@primer/css 20.2.1-rc.833ef5c2 → 20.2.2

package/dist/stats/toggle-switch.json

@@ -1 +1 @@
-{"size":4653,"gzipSize":1016,"humanizedSize":"5KB","humanizedGzipSize":"1016B","rules":{"total":37,"size":{"graph":[3,1,1,18,1,8,1,1,2,1,1,1,2,1,1,3,1,1,4,1,2,1,1,1,5,6,6,13,1,5,1,2,1,2,2,1,1],"max":18,"average":2.810810810810811},"selectorByRuleSizes":[{"selector":".ToggleSwitch-track","declarations":18},{"selector":".ToggleSwitch-knob","declarations":13},{"selector":".ToggleSwitch-track::before","declarations":8},{"selector":".ToggleSwitch-circleIcon","declarations":6},{"selector":".ToggleSwitch-lineIcon","declarations":6},{"selector":".ToggleSwitch-status","declarations":5},{"selector":".ToggleSwitch-icons","declarations":5},{"selector":".ToggleSwitch-track[aria-disabled=true]","declarations":4},{"selector":".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob","declarations":3},{"selector":".ToggleSwitch","declarations":3},{"selector":".ToggleSwitch-statusOff","declarations":2},{"selector":".ToggleSwitch-statusOn","declarations":2},{"selector":".ToggleSwitch--small .ToggleSwitch-track","declarations":2},{"selector":".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob","declarations":2},{"selector":".ToggleSwitch-track[aria-checked=true]","declarations":2},{"selector":".ToggleSwitch-track[aria-checked=true][aria-disabled=true]","declarations":2},{"selector":".ToggleSwitch--statusAtEnd .ToggleSwitch-status","declarations":1},{"selector":".ToggleSwitch--statusAtEnd","declarations":1},{"selector":".ToggleSwitch--disabled .ToggleSwitch-status","declarations":1},{"selector":".ToggleSwitch--small .ToggleSwitch-status","declarations":1},{"selector":".ToggleSwitch-knob","declarations":1},{"selector":".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon","declarations":1},{"selector":".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon","declarations":1},{"selector":".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:hover,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:active","declarations":1},{"selector":".ToggleSwitch-track[aria-disabled=true]:hover .ToggleSwitch-knob,.ToggleSwitch-track[aria-disabled=true]:active .ToggleSwitch-knob","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true]:active","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true]:hover","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true][aria-disabled=true] .ToggleSwitch-knob","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover .ToggleSwitch-knob,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active .ToggleSwitch-knob","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active","declarations":1},{"selector":".ToggleSwitch-track *","declarations":1},{"selector":".ToggleSwitch-track","declarations":1},{"selector":".ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible","declarations":1},{"selector":".ToggleSwitch:active .ToggleSwitch-knob","declarations":1},{"selector":".ToggleSwitch:hover .ToggleSwitch-knob","declarations":1}]},"selectors":{"total":42,"type":0,"class":42,"id":0,"pseudoClass":14,"pseudoElement":1,"values":[".ToggleSwitch",".ToggleSwitch:hover .ToggleSwitch-knob",".ToggleSwitch:active .ToggleSwitch-knob",".ToggleSwitch-track",".ToggleSwitch-track:focus",".ToggleSwitch-track:focus-visible",".ToggleSwitch-track::before",".ToggleSwitch-track",".ToggleSwitch-track *",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true][aria-disabled=true] .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true]",".ToggleSwitch-track[aria-checked=true]:hover",".ToggleSwitch-track[aria-checked=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]:hover .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled=true]:active .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:hover",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:active",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon",".ToggleSwitch-icons",".ToggleSwitch-lineIcon",".ToggleSwitch-circleIcon",".ToggleSwitch-knob",".ToggleSwitch-knob",".ToggleSwitch-status",".ToggleSwitch--small .ToggleSwitch-status",".ToggleSwitch--small .ToggleSwitch-track",".ToggleSwitch--disabled .ToggleSwitch-status",".ToggleSwitch-statusOn",".ToggleSwitch-statusOff",".ToggleSwitch--statusAtEnd",".ToggleSwitch--statusAtEnd .ToggleSwitch-status"],"specificity":{"max":50,"average":24.071428571428573}},"declarations":{"total":104,"unique":78,"uniqueToTotalRatio":0.75,"properties":{"align-items":["center","center"],"display":["inline-flex","block","flex"],"gap":["8px"],"background-color":["var(--color-btn-hover-bg)","var(--color-btn-active-bg)","var(--color-switch-track-bg)","var(--color-canvas-subtle)","var(--color-canvas-subtle)","var(--color-switch-knob-checked-disabled-bg)","var(--color-switch-knob-checked-disabled-bg)","var(--color-switch-track-checked-bg)","var(--color-switch-track-checked-hover-bg)","var(--color-switch-track-checked-active-bg)","var(--color-switch-knob-checked-bg)","var(--color-canvas-subtle)","var(--color-btn-bg)","var(--color-btn-bg)","var(--color-btn-bg)"],"position":["relative","absolute","absolute","relative"],"width":["64px","100%","100%","50%","48px"],"height":["32px","100%","100%","24px","0","auto"],"padding":["0"],"overflow":["hidden","hidden"],"text-decoration":["none"],"cursor":["pointer","not-allowed"],"-webkit-user-select":["none"],"user-select":["none"],"border":["1px solid var(--color-switch-track-border)","0","1px solid var(--color-switch-track-border)"],"border-radius":["6px","6px"],"transition-timing-function":["cubic-bezier(0.5, 1, 0.89, 1)","cubic-bezier(0.5, 1, 0.89, 1)"],"transition-duration":["80ms","80ms","80ms","80ms"],"transition-property":["background-color,border-color","none","transform","transform","transform"],"-webkit-appearance":["none"],"appearance":["none"],"outline-offset":["0"],"top":["50%","-1px"],"left":["50%"],"min-height":["44px"],"content":["\"\""],"transform":["translateX(-50%) translateY(-50%)","translateX(calc(100% + 1px))","translateX(0%)","translateX(100%)","translateX(-100%)","translateX(0)","translateX(-1px)"],"transition":["none","none","none"],"border-color":["var(--color-border-subtle)","var(--color-switch-track-checked-border)","var(--color-border-subtle)","var(--color-border-default)"],"box-shadow":["none","var(--color-shadow-medium),var(--color-btn-inset-shadow)"],"color":["var(--color-fg-subtle)","var(--color-fg-subtle)","var(--color-accent-fg)","var(--color-fg-default)","var(--color-fg-default)","var(--color-fg-muted)"],"line-height":["0","0","1.5"],"flex":["1 0 50%","1 0 50%"],"bottom":["-1px"],"z-index":["1"],"font-size":["14px","12px"],"text-align":["right","left"],"visibility":["hidden","visible"],"flex-direction":["row-reverse"]}},"mediaQueries":{"total":3,"unique":2,"values":["(pointer: coarse)","(prefers-reduced-motion)","(prefers-reduced-motion)"],"contents":[{"value":"(pointer: coarse)","rules":{"total":1,"size":{"graph":[8],"max":8,"average":8},"selectorByRuleSizes":[{"selector":".ToggleSwitch-track::before","declarations":8}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":1,"values":[".ToggleSwitch-track::before"],"specificity":{"max":11,"average":11}},"declarations":{"total":8,"unique":8,"uniqueToTotalRatio":1,"properties":{"position":["absolute"],"top":["50%"],"left":["50%"],"width":["100%"],"height":["100%"],"min-height":["44px"],"content":["\"\""],"transform":["translateX(-50%) translateY(-50%)"]}}},{"value":"(prefers-reduced-motion)","rules":{"total":2,"size":{"graph":[1,1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":",.ToggleSwitch-track *","declarations":1},{"selector":".ToggleSwitch-track","declarations":1}]},"selectors":{"total":2,"type":0,"class":2,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".ToggleSwitch-track",".ToggleSwitch-track *"],"specificity":{"max":10,"average":10}},"declarations":{"total":2,"unique":1,"uniqueToTotalRatio":0.5,"properties":{"transition":["none","none"]}}},{"value":"(prefers-reduced-motion)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".ToggleSwitch-knob","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".ToggleSwitch-knob"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"transition":["none"]}}}]}}
+{"size":4851,"gzipSize":1040,"humanizedSize":"5KB","humanizedGzipSize":"1KB","rules":{"total":40,"size":{"graph":[1,3,1,1,2,2,18,1,8,1,1,2,1,1,1,2,1,1,3,1,1,4,1,2,1,1,1,5,6,6,13,1,5,1,2,1,2,2,1,1],"max":18,"average":2.725},"selectorByRuleSizes":[{"selector":".ToggleSwitch-track","declarations":18},{"selector":".ToggleSwitch-knob","declarations":13},{"selector":".ToggleSwitch-track::before","declarations":8},{"selector":".ToggleSwitch-circleIcon","declarations":6},{"selector":".ToggleSwitch-lineIcon","declarations":6},{"selector":".ToggleSwitch-status","declarations":5},{"selector":".ToggleSwitch-icons","declarations":5},{"selector":".ToggleSwitch-track[aria-disabled=true]","declarations":4},{"selector":".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob","declarations":3},{"selector":".ToggleSwitch","declarations":3},{"selector":".ToggleSwitch-statusOff","declarations":2},{"selector":".ToggleSwitch-statusOn","declarations":2},{"selector":".ToggleSwitch--small .ToggleSwitch-track","declarations":2},{"selector":".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob","declarations":2},{"selector":".ToggleSwitch-track[aria-checked=true]","declarations":2},{"selector":".ToggleSwitch-track[aria-checked=true][aria-disabled=true]","declarations":2},{"selector":".ToggleSwitch--checked .ToggleSwitch-statusOff","declarations":2},{"selector":".ToggleSwitch--checked .ToggleSwitch-statusOn","declarations":2},{"selector":".ToggleSwitch--statusAtEnd .ToggleSwitch-status","declarations":1},{"selector":".ToggleSwitch--statusAtEnd","declarations":1},{"selector":".ToggleSwitch--disabled .ToggleSwitch-status","declarations":1},{"selector":".ToggleSwitch--small .ToggleSwitch-status","declarations":1},{"selector":".ToggleSwitch-knob","declarations":1},{"selector":".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon","declarations":1},{"selector":".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon","declarations":1},{"selector":".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:hover,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:active","declarations":1},{"selector":".ToggleSwitch-track[aria-disabled=true]:hover .ToggleSwitch-knob,.ToggleSwitch-track[aria-disabled=true]:active .ToggleSwitch-knob","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true]:active","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true]:hover","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true][aria-disabled=true] .ToggleSwitch-knob","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover .ToggleSwitch-knob,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active .ToggleSwitch-knob","declarations":1},{"selector":".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active","declarations":1},{"selector":".ToggleSwitch-track *","declarations":1},{"selector":".ToggleSwitch-track","declarations":1},{"selector":".ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible","declarations":1},{"selector":".ToggleSwitch:active .ToggleSwitch-knob","declarations":1},{"selector":".ToggleSwitch:hover .ToggleSwitch-knob","declarations":1},{"selector":".ToggleSwitch.ToggleSwitch","declarations":1}]},"selectors":{"total":45,"type":0,"class":45,"id":0,"pseudoClass":14,"pseudoElement":1,"values":[".ToggleSwitch.ToggleSwitch",".ToggleSwitch",".ToggleSwitch:hover .ToggleSwitch-knob",".ToggleSwitch:active .ToggleSwitch-knob",".ToggleSwitch--checked .ToggleSwitch-statusOn",".ToggleSwitch--checked .ToggleSwitch-statusOff",".ToggleSwitch-track",".ToggleSwitch-track:focus",".ToggleSwitch-track:focus-visible",".ToggleSwitch-track::before",".ToggleSwitch-track",".ToggleSwitch-track *",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true][aria-disabled=true] .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true]",".ToggleSwitch-track[aria-checked=true]:hover",".ToggleSwitch-track[aria-checked=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]:hover .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled=true]:active .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:hover",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:active",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon",".ToggleSwitch-icons",".ToggleSwitch-lineIcon",".ToggleSwitch-circleIcon",".ToggleSwitch-knob",".ToggleSwitch-knob",".ToggleSwitch-status",".ToggleSwitch--small .ToggleSwitch-status",".ToggleSwitch--small .ToggleSwitch-track",".ToggleSwitch--disabled .ToggleSwitch-status",".ToggleSwitch-statusOn",".ToggleSwitch-statusOff",".ToggleSwitch--statusAtEnd",".ToggleSwitch--statusAtEnd .ToggleSwitch-status"],"specificity":{"max":50,"average":23.8}},"declarations":{"total":109,"unique":78,"uniqueToTotalRatio":0.7155963302752294,"properties":{"display":["inline-flex","inline-flex","block","flex"],"align-items":["center","center"],"gap":["8px"],"background-color":["var(--color-btn-hover-bg)","var(--color-btn-active-bg)","var(--color-switch-track-bg)","var(--color-canvas-subtle)","var(--color-canvas-subtle)","var(--color-switch-knob-checked-disabled-bg)","var(--color-switch-knob-checked-disabled-bg)","var(--color-switch-track-checked-bg)","var(--color-switch-track-checked-hover-bg)","var(--color-switch-track-checked-active-bg)","var(--color-switch-knob-checked-bg)","var(--color-canvas-subtle)","var(--color-btn-bg)","var(--color-btn-bg)","var(--color-btn-bg)"],"height":["auto","0","32px","100%","100%","24px","0","auto"],"visibility":["visible","hidden","hidden","visible"],"position":["relative","absolute","absolute","relative"],"width":["64px","100%","100%","50%","48px"],"padding":["0"],"overflow":["hidden","hidden"],"text-decoration":["none"],"cursor":["pointer","not-allowed"],"-webkit-user-select":["none"],"user-select":["none"],"border":["1px solid var(--color-switch-track-border)","0","1px solid var(--color-switch-track-border)"],"border-radius":["6px","6px"],"transition-timing-function":["cubic-bezier(0.5, 1, 0.89, 1)","cubic-bezier(0.5, 1, 0.89, 1)"],"transition-duration":["80ms","80ms","80ms","80ms"],"transition-property":["background-color,border-color","none","transform","transform","transform"],"-webkit-appearance":["none"],"appearance":["none"],"outline-offset":["0"],"top":["50%","-1px"],"left":["50%"],"min-height":["44px"],"content":["\"\""],"transform":["translateX(-50%) translateY(-50%)","translateX(calc(100% + 1px))","translateX(0%)","translateX(100%)","translateX(-100%)","translateX(0)","translateX(-1px)"],"transition":["none","none","none"],"border-color":["var(--color-border-subtle)","var(--color-switch-track-checked-border)","var(--color-border-subtle)","var(--color-border-default)"],"box-shadow":["none","var(--color-shadow-medium),var(--color-btn-inset-shadow)"],"color":["var(--color-fg-subtle)","var(--color-fg-subtle)","var(--color-accent-fg)","var(--color-fg-default)","var(--color-fg-default)","var(--color-fg-muted)"],"line-height":["0","0","1.5"],"flex":["1 0 50%","1 0 50%"],"bottom":["-1px"],"z-index":["1"],"font-size":["14px","12px"],"text-align":["right","left"],"flex-direction":["row-reverse"]}},"mediaQueries":{"total":3,"unique":2,"values":["(pointer: coarse)","(prefers-reduced-motion)","(prefers-reduced-motion)"],"contents":[{"value":"(pointer: coarse)","rules":{"total":1,"size":{"graph":[8],"max":8,"average":8},"selectorByRuleSizes":[{"selector":".ToggleSwitch-track::before","declarations":8}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":1,"values":[".ToggleSwitch-track::before"],"specificity":{"max":11,"average":11}},"declarations":{"total":8,"unique":8,"uniqueToTotalRatio":1,"properties":{"position":["absolute"],"top":["50%"],"left":["50%"],"width":["100%"],"height":["100%"],"min-height":["44px"],"content":["\"\""],"transform":["translateX(-50%) translateY(-50%)"]}}},{"value":"(prefers-reduced-motion)","rules":{"total":2,"size":{"graph":[1,1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":",.ToggleSwitch-track *","declarations":1},{"selector":".ToggleSwitch-track","declarations":1}]},"selectors":{"total":2,"type":0,"class":2,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".ToggleSwitch-track",".ToggleSwitch-track *"],"specificity":{"max":10,"average":10}},"declarations":{"total":2,"unique":1,"uniqueToTotalRatio":0.5,"properties":{"transition":["none","none"]}}},{"value":"(prefers-reduced-motion)","rules":{"total":1,"size":{"graph":[1],"max":1,"average":1},"selectorByRuleSizes":[{"selector":".ToggleSwitch-knob","declarations":1}]},"selectors":{"total":1,"type":0,"class":1,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".ToggleSwitch-knob"],"specificity":{"max":10,"average":10}},"declarations":{"total":1,"unique":1,"uniqueToTotalRatio":1,"properties":{"transition":["none"]}}}]}}

package/dist/toggle-switch.css

@@ -1,2 +1,2 @@
-.ToggleSwitch{align-items:center;display:inline-flex;gap:8px}.ToggleSwitch:hover .ToggleSwitch-knob{background-color:var(--color-btn-hover-bg)}.ToggleSwitch:active .ToggleSwitch-knob{background-color:var(--color-btn-active-bg)}.ToggleSwitch-track{position:relative;display:block;width:64px;height:32px;padding:0;overflow:hidden;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--color-switch-track-bg);border:1px solid var(--color-switch-track-border);border-radius:6px;transition-timing-function:cubic-bezier(0.5, 1, 0.89, 1);transition-duration:80ms;transition-property:background-color,border-color;-webkit-appearance:none;appearance:none}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:0}@media(pointer: coarse){.ToggleSwitch-track::before{position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:44px;content:"";transform:translateX(-50%) translateY(-50%)}}@media(prefers-reduced-motion){.ToggleSwitch-track{transition:none}.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]{background-color:var(--color-canvas-subtle);border-color:var(--color-border-subtle)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active{background-color:var(--color-canvas-subtle)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover .ToggleSwitch-knob,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-disabled-bg)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true] .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-disabled-bg)}.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]:hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-checked=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:0;transform:translateX(calc(100% + 1px))}.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]{cursor:not-allowed;background-color:var(--color-canvas-subtle);border-color:var(--color-border-subtle);transition-property:none}.ToggleSwitch-track[aria-disabled=true]:hover .ToggleSwitch-knob,.ToggleSwitch-track[aria-disabled=true]:active .ToggleSwitch-knob{background-color:var(--color-btn-bg)}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:hover,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:active{background-color:var(--color-btn-bg)}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon{color:var(--color-fg-subtle)}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon{color:var(--color-fg-subtle)}.ToggleSwitch-icons{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.ToggleSwitch-lineIcon{line-height:0;color:var(--color-accent-fg);transition-duration:80ms;transition-property:transform;transform:translateX(-100%);flex:1 0 50%}.ToggleSwitch-circleIcon{line-height:0;color:var(--color-fg-default);transition-duration:80ms;transition-property:transform;transform:translateX(0);flex:1 0 50%}.ToggleSwitch-knob{position:absolute;top:-1px;bottom:-1px;z-index:1;width:50%;background-color:var(--color-btn-bg);border:1px solid var(--color-switch-track-border);border-radius:6px;box-shadow:var(--color-shadow-medium),var(--color-btn-inset-shadow);transition-timing-function:cubic-bezier(0.5, 1, 0.89, 1);transition-duration:80ms;transition-property:transform;transform:translateX(-1px)}@media(prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{position:relative;font-size:14px;line-height:1.5;color:var(--color-fg-default);text-align:right}.ToggleSwitch--small .ToggleSwitch-status{font-size:12px}.ToggleSwitch--small .ToggleSwitch-track{width:48px;height:24px}.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{display:inline-flex}.ToggleSwitch{align-items:center;display:inline-flex;gap:8px}.ToggleSwitch:hover .ToggleSwitch-knob{background-color:var(--color-btn-hover-bg)}.ToggleSwitch:active .ToggleSwitch-knob{background-color:var(--color-btn-active-bg)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{position:relative;display:block;width:64px;height:32px;padding:0;overflow:hidden;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--color-switch-track-bg);border:1px solid var(--color-switch-track-border);border-radius:6px;transition-timing-function:cubic-bezier(0.5, 1, 0.89, 1);transition-duration:80ms;transition-property:background-color,border-color;-webkit-appearance:none;appearance:none}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:0}@media(pointer: coarse){.ToggleSwitch-track::before{position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:44px;content:"";transform:translateX(-50%) translateY(-50%)}}@media(prefers-reduced-motion){.ToggleSwitch-track{transition:none}.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]{background-color:var(--color-canvas-subtle);border-color:var(--color-border-subtle)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active{background-color:var(--color-canvas-subtle)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover .ToggleSwitch-knob,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-disabled-bg)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true] .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-disabled-bg)}.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]:hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-checked=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:0;transform:translateX(calc(100% + 1px))}.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]{cursor:not-allowed;background-color:var(--color-canvas-subtle);border-color:var(--color-border-subtle);transition-property:none}.ToggleSwitch-track[aria-disabled=true]:hover .ToggleSwitch-knob,.ToggleSwitch-track[aria-disabled=true]:active .ToggleSwitch-knob{background-color:var(--color-btn-bg)}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:hover,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:active{background-color:var(--color-btn-bg)}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon{color:var(--color-fg-subtle)}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon{color:var(--color-fg-subtle)}.ToggleSwitch-icons{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.ToggleSwitch-lineIcon{line-height:0;color:var(--color-accent-fg);transition-duration:80ms;transition-property:transform;transform:translateX(-100%);flex:1 0 50%}.ToggleSwitch-circleIcon{line-height:0;color:var(--color-fg-default);transition-duration:80ms;transition-property:transform;transform:translateX(0);flex:1 0 50%}.ToggleSwitch-knob{position:absolute;top:-1px;bottom:-1px;z-index:1;width:50%;background-color:var(--color-btn-bg);border:1px solid var(--color-switch-track-border);border-radius:6px;box-shadow:var(--color-shadow-medium),var(--color-btn-inset-shadow);transition-timing-function:cubic-bezier(0.5, 1, 0.89, 1);transition-duration:80ms;transition-property:transform;transform:translateX(-1px)}@media(prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{position:relative;font-size:14px;line-height:1.5;color:var(--color-fg-default);text-align:right}.ToggleSwitch--small .ToggleSwitch-status{font-size:12px}.ToggleSwitch--small .ToggleSwitch-track{width:48px;height:24px}.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}
 /*# sourceMappingURL=toggle-switch.css.map */

package/dist/toggle-switch.css.map

@@ -1 +1 @@
-{"version":3,"sources":["file:///home/runner/work/css/css/src/toggle-switch/index.scss%23sass"],"names":[],"mappings":"AA2iBA,cAAA,kBAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,uCAAA,0CAAA,CAAA,wCAAA,2CAAA,CAAA,oBAAA,iBAAA,CAAA,aAAA,CAAA,UAAA,CAAA,WAAA,CAAA,SAAA,CAAA,eAAA,CAAA,oBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,6CAAA,CAAA,iDAAA,CAAA,iBAAA,CAAA,wDAAA,CAAA,wBAAA,CAAA,iDAAA,CAAA,uBAAA,CAAA,eAAA,CAAA,4DAAA,gBAAA,CAAA,wBAAA,4BAAA,iBAAA,CAAA,OAAA,CAAA,QAAA,CAAA,UAAA,CAAA,WAAA,CAAA,eAAA,CAAA,UAAA,CAAA,2CAAA,CAAA,CAAA,+BAAA,oBAAA,eAAA,CAAA,sBAAA,eAAA,CAAA,CAAA,2DAAA,2CAAA,CAAA,uCAAA,CAAA,mIAAA,2CAAA,CAAA,yKAAA,6DAAA,CAAA,8EAAA,6DAAA,CAAA,uCAAA,qDAAA,CAAA,qDAAA,CAAA,6CAAA,2DAAA,CAAA,8CAAA,4DAAA,CAAA,0DAAA,oDAAA,CAAA,QAAA,CAAA,sCAAA,CAAA,8DAAA,wBAAA,CAAA,gEAAA,0BAAA,CAAA,wCAAA,kBAAA,CAAA,2CAAA,CAAA,uCAAA,CAAA,wBAAA,CAAA,mIAAA,oCAAA,CAAA,2DAAA,wCAAA,CAAA,eAAA,CAAA,mIAAA,oCAAA,CAAA,+DAAA,4BAAA,CAAA,iEAAA,4BAAA,CAAA,oBAAA,YAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,WAAA,CAAA,eAAA,CAAA,uBAAA,aAAA,CAAA,4BAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,2BAAA,CAAA,YAAA,CAAA,yBAAA,aAAA,CAAA,6BAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,mBAAA,iBAAA,CAAA,QAAA,CAAA,WAAA,CAAA,SAAA,CAAA,SAAA,CAAA,oCAAA,CAAA,iDAAA,CAAA,iBAAA,CAAA,mEAAA,CAAA,wDAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,0BAAA,CAAA,+BAAA,mBAAA,eAAA,CAAA,CAAA,qBAAA,iBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,6BAAA,CAAA,gBAAA,CAAA,0CAAA,cAAA,CAAA,yCAAA,UAAA,CAAA,WAAA,CAAA,6CAAA,2BAAA,CAAA,uBAAA,QAAA,CAAA,iBAAA,CAAA,wBAAA,WAAA,CAAA,kBAAA,CAAA,2BAAA,0BAAA,CAAA,gDAAA,eAAA","file":"toggle-switch.css"}
+{"version":3,"sources":["file:///home/runner/work/css/css/src/toggle-switch/index.scss%23sass"],"names":[],"mappings":"AA6iBA,2BAAA,mBAAA,CAAA,cAAA,kBAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,uCAAA,0CAAA,CAAA,wCAAA,2CAAA,CAAA,8CAAA,WAAA,CAAA,kBAAA,CAAA,+CAAA,QAAA,CAAA,iBAAA,CAAA,oBAAA,iBAAA,CAAA,aAAA,CAAA,UAAA,CAAA,WAAA,CAAA,SAAA,CAAA,eAAA,CAAA,oBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,6CAAA,CAAA,iDAAA,CAAA,iBAAA,CAAA,wDAAA,CAAA,wBAAA,CAAA,iDAAA,CAAA,uBAAA,CAAA,eAAA,CAAA,4DAAA,gBAAA,CAAA,wBAAA,4BAAA,iBAAA,CAAA,OAAA,CAAA,QAAA,CAAA,UAAA,CAAA,WAAA,CAAA,eAAA,CAAA,UAAA,CAAA,2CAAA,CAAA,CAAA,+BAAA,oBAAA,eAAA,CAAA,sBAAA,eAAA,CAAA,CAAA,2DAAA,2CAAA,CAAA,uCAAA,CAAA,mIAAA,2CAAA,CAAA,yKAAA,6DAAA,CAAA,8EAAA,6DAAA,CAAA,uCAAA,qDAAA,CAAA,qDAAA,CAAA,6CAAA,2DAAA,CAAA,8CAAA,4DAAA,CAAA,0DAAA,oDAAA,CAAA,QAAA,CAAA,sCAAA,CAAA,8DAAA,wBAAA,CAAA,gEAAA,0BAAA,CAAA,wCAAA,kBAAA,CAAA,2CAAA,CAAA,uCAAA,CAAA,wBAAA,CAAA,mIAAA,oCAAA,CAAA,2DAAA,wCAAA,CAAA,eAAA,CAAA,mIAAA,oCAAA,CAAA,+DAAA,4BAAA,CAAA,iEAAA,4BAAA,CAAA,oBAAA,YAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,WAAA,CAAA,eAAA,CAAA,uBAAA,aAAA,CAAA,4BAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,2BAAA,CAAA,YAAA,CAAA,yBAAA,aAAA,CAAA,6BAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,mBAAA,iBAAA,CAAA,QAAA,CAAA,WAAA,CAAA,SAAA,CAAA,SAAA,CAAA,oCAAA,CAAA,iDAAA,CAAA,iBAAA,CAAA,mEAAA,CAAA,wDAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,0BAAA,CAAA,+BAAA,mBAAA,eAAA,CAAA,CAAA,qBAAA,iBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,6BAAA,CAAA,gBAAA,CAAA,0CAAA,cAAA,CAAA,yCAAA,UAAA,CAAA,WAAA,CAAA,6CAAA,2BAAA,CAAA,uBAAA,QAAA,CAAA,iBAAA,CAAA,wBAAA,WAAA,CAAA,kBAAA,CAAA,2BAAA,0BAAA,CAAA,gDAAA,eAAA","file":"toggle-switch.css"}

package/forms/FormControl.scss

@@ -0,0 +1,382 @@
+// stylelint-disable primer/typography, primer/borders, primer/spacing, primer/box-shadow, max-nesting-depth
+
+// group label, field, caption and error message
+.FormGroup {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--base-size-4, 4px);
+}
+
+// fill container
+.FormGroup--fullWidth {
+  display: flex;
+
+  // stretch field to fill container
+  .FormControl-fieldWrap {
+    flex-grow: 1;
+  }
+}
+
+// <label>
+.FormControl-label {
+  font-size: var(--primer-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-semibold, 600);
+  line-height: var(--primer-text-body-lineHeight-medium, 20px);
+  user-select: none;
+}
+
+// optional caption
+.FormControl-caption {
+  margin-bottom: 0;
+  font-size: var(--primer-text-caption-size, 12px);
+  font-weight: var(--primer-text-caption-weight, 400);
+  line-height: var(--primer-text-caption-lineHeight, 16px);
+  color: var(--color-fg-muted);
+}
+
+.FormControl-validation {
+  display: flex;
+  font-size: var(--primer-text-caption-size, 12px);
+  font-weight: var(--base-text-weight-semibold, 600);
+  color: var(--color-danger-fg);
+  fill: var(--color-danger-fg);
+  flex-direction: row;
+  align-items: center;
+  gap: var(--base-size-4, 4px);
+
+  // stylelint-disable-next-line selector-max-type
+  p {
+    margin-bottom: 0;
+  }
+}
+
+// shared among all form control components (input, select, textarea, checkbox, radio)
+.FormControl {
+  background-color: var(--color-canvas-default);
+  border: solid var(--primer-borderWidth-thin, 1px) var(--color-border-default);
+
+  &[disabled] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-input-disabled-bg);
+    border-color: var(--color-border-default);
+    -webkit-text-fill-color: var(--color-primer-fg-disabled);
+    opacity: 1;
+  }
+
+  &:not(:focus)[invalid] {
+    border-color: var(--color-danger-emphasis);
+  }
+
+  // <select> and <input>
+  &.FormControl--input,
+  &.FormControl--select {
+    height: var(--primer-control-medium-size, 32px);
+    font-size: var(--primer-text-body-size-medium, 14px);
+    line-height: var(--primer-text-body-lineHeight-medium, 20px);
+    border-radius: var(--primer-borderRadius-medium, 6px);
+    padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
+
+    &[disabled] {
+      &::placeholder {
+        color: var(--color-primer-fg-disabled);
+      }
+    }
+
+    ::placeholder {
+      color: var(--color-fg-subtle);
+      opacity: 1;
+    }
+  }
+
+  // sizes
+
+  &.FormControl--small {
+    height: var(--primer-control-small-size, 28px);
+    font-size: var(--primer-text-body-size-small, 12px);
+  }
+
+  &.FormControl--medium {
+    height: var(--primer-control-medium-size, 32px);
+  }
+
+  &.FormControl--large {
+    height: var(--primer-control-large-size, 40px);
+    padding-inline: var(--primer-control-large-paddingInline-normal, 12px);
+  }
+}
+
+// pseudo input styles to allow for visual and action slots
+// set input styles on -fieldWrap, remove styles from <input>
+.FormControl-fieldWrap {
+  display: inline-grid;
+  height: var(--primer-control-medium-size, 32px);
+  background-color: var(--color-canvas-default);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  box-shadow: var(--primer-borderInset-thin, 1px) var(--color-border-default);
+  grid-template-rows: auto;
+  gap: var(--primer-controlStack-medium-gap-condensed, 8px);
+  align-items: center;
+  align-content: center;
+  padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
+
+  .FormControl {
+    padding: unset;
+    background-color: transparent;
+    border: 0;
+
+    &:focus-visible,
+    &:focus {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
+  &:focus-within {
+    @include focusBoxShadowInset(2px, var(--color-accent-fg));
+  }
+
+  &.FormControl-fieldWrap--disabled {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-input-disabled-bg);
+  }
+
+  &.FormControl-fieldWrap--invalid:not(:focus-within) {
+    box-shadow: var(--primer-borderInset-thin, 1px) var(--color-danger-emphasis);
+  }
+
+  // if leadingVisual is present
+  &.FormControl-fieldWrap--input-leadingVisual {
+    grid-template-columns: var(--base-size-16, 16px) minmax(0, auto);
+
+    .FormControl--input {
+      padding-inline-start: calc(var(--base-size-16, 16px) + var(--primer-control-medium-paddingInline-condensed, 8px));
+    }
+
+    // if leadingVisual and trailingAction are present
+    &.FormControl-fieldWrap--input-trailingAction {
+      grid-template-columns: var(--base-size-16, 16px) minmax(0, auto) min-content;
+
+      .FormControl--input-trailingAction {
+        grid-column: 3 / 4;
+      }
+    }
+  }
+
+  // if trailingAction is present
+  &.FormControl-fieldWrap--input-trailingAction {
+    grid-template-columns: minmax(0, auto) min-content;
+  }
+
+  &.FormControl-fieldWrap--input {
+    grid-template-rows: max-content;
+
+    .FormControl--input-leadingVisual {
+      grid-column: 1 / 2;
+      grid-row: 1;
+    }
+
+    // <input> spans entire grid
+    .FormControl--input {
+      grid-column: 1 / -1;
+      grid-row: 1;
+    }
+
+    // TODO: replace with new Button component
+    // trailingAction will auto fill last grid slot
+    .FormControl--input-trailingAction {
+      display: grid;
+      width: calc(var(--primer-control-medium-size, 32px) - var(--base-size-4, 4px));
+      height: calc(var(--primer-control-medium-size, 32px) - var(--base-size-4, 4px));
+      padding: 0;
+      // optically align the icon with field padding
+      margin-right: calc(calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem) * -1);
+      color: var(--color-fg-muted);
+      cursor: pointer;
+      user-select: none;
+      background-color: transparent;
+      border: solid var(--primer-borderWidth-thin, 1px) transparent;
+      border-radius: var(--primer-borderRadius-medium, 6px);
+      transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+      transition-property: color, background-color, border-color;
+      grid-row: 1;
+      place-content: center;
+      place-self: center end;
+      grid-column: 2 / 3;
+
+      &:hover {
+        background-color: var(--color-btn-hover-bg);
+        border: solid var(--primer-borderWidth-thin, 1px) var(--color-btn-hover-bg);
+      }
+
+      &[disabled] {
+        color: var(--color-primer-fg-disabled);
+        pointer-events: none;
+      }
+    }
+
+    // sizes
+
+    // these selectors can be refactored to use :has()
+    &.FormControl--small {
+      height: var(--primer-control-small-size, 28px);
+      font-size: var(--primer-text-body-size-small, 12px);
+
+      .FormControl--input-trailingAction {
+        width: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
+        height: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
+      }
+    }
+
+    &.FormControl--medium {
+      height: var(--primer-control-medium-size, 32px);
+
+      .FormControl--input-trailingAction {
+        width: calc(var(--primer-control-medium-size, 32px) - var(--base-size-8, 8px));
+        height: calc(var(--primer-control-medium-size, 32px) - var(--base-size-8, 8px));
+      }
+    }
+
+    &.FormControl--large {
+      height: var(--primer-control-large-size, 40px);
+      padding-inline: var(--primer-control-large-paddingInline-normal, 12px);
+
+      .FormControl--input-trailingAction {
+        width: calc(var(--primer-control-large-size, 40px) - var(--base-size-8, 8px));
+        height: calc(var(--primer-control-large-size, 40px) - var(--base-size-8, 8px));
+        margin-right: calc(calc(var(--primer-control-medium-paddingInline-normal, 12px) - 0.125rem) * -1);
+      }
+    }
+  }
+}
+
+.FormControl-fieldWrap--select {
+  grid-template-columns: minmax(0, auto) var(--base-size-16, 16px);
+  padding-inline-end: var(--primer-control-medium-paddingInline-condensed, 8px);
+
+  // mask allows for background-color to respect themes
+  &::after {
+    width: var(--base-size-16, 16px);
+    height: var(--base-size-16, 16px);
+    pointer-events: none;
+    content: '';
+    background-color: var(--color-fg-muted);
+    mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
+    mask-size: cover;
+    grid-column: 2;
+    grid-row: 1;
+    place-self: center end;
+  }
+
+  // spans entire grid below mask
+  .FormControl {
+    grid-column: 1/-1;
+    grid-row: 1;
+    appearance: none;
+    padding-right: var(--base-size-16, 16px);
+  }
+}
+
+.FormGroup--checkbox {
+  display: inline-grid;
+  grid-template-areas: 'field label' '. caption';
+  gap: var(--base-size-8, 8px);
+
+  .FormControl-label {
+    grid-area: label;
+  }
+
+  .FormControl-caption {
+    grid-area: caption;
+  }
+}
+
+// checkbox + radio specific styles
+
+.FormControl--checkbox,
+.FormControl--radio {
+  position: absolute;
+  width: var(--base-size-16, 16px);
+  height: var(--base-size-16, 16px);
+  opacity: 0;
+
+  &:checked {
+    + .FormControl--checkbox-svg {
+      .FormControl--checkbox-background {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+      }
+
+      .FormControl--checkbox-check {
+        fill: var(--color-fg-on-emphasis);
+        visibility: visible;
+
+        @media screen and (prefers-reduced-motion: no-preference) {
+          animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+        }
+      }
+    }
+  }
+
+  &:indeterminate {
+    + .FormControl--checkbox-svg {
+      .FormControl--checkbox-background {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+      }
+
+      .FormControl--checkbox-indeterminate {
+        fill: var(--color-fg-on-emphasis);
+        visibility: visible;
+      }
+    }
+  }
+
+  @keyframes checkmarkIn {
+    from {
+      clip-path: inset(16px 0 0 0);
+    }
+
+    to {
+      clip-path: inset(0 0 0 0);
+    }
+  }
+
+  @keyframes checkmarkOut {
+    from {
+      clip-path: inset(0 0 0 0);
+    }
+
+    to {
+      clip-path: inset(16px 0 0 0);
+    }
+  }
+}
+
+.FormControl--checkbox-svg {
+  width: var(--base-size-16, 16px);
+  height: var(--base-size-16, 16px);
+  margin-top: 0.125rem;
+  cursor: pointer;
+
+  .FormControl--checkbox-background {
+    fill: var(--color-canvas-default);
+    stroke: var(--color-border-default);
+  }
+
+  .FormControl--checkbox-check {
+    visibility: hidden;
+    transition: visibility 0s linear 200ms;
+    clip-path: inset(16px 0 0 0);
+
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+    }
+  }
+
+  .FormControl--checkbox-indeterminate {
+    fill: transparent;
+    visibility: hidden;
+  }
+}

package/forms/index.scss

@@ -5,3 +5,5 @@
 @import './form-validation.scss';
 @import './input-group.scss';
 @import './radio-group.scss';
+// new pvc components
+@import './FormControl.scss';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.2.1-rc.833ef5c2",
+  "version": "20.2.2",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",

package/toggle-switch/toggle-switch.scss

@@ -1,3 +1,9 @@
+// Catalyst in dotcom applies a display: block to all web component elements. This
+// rule overrides it so the status label and toggle switch are laid out correctly.
+.ToggleSwitch.ToggleSwitch {
+  display: inline-flex;
+}
+
 .ToggleSwitch {
   align-items: center;
   display: inline-flex;
@@ -16,6 +22,18 @@
   }
 }
 
+.ToggleSwitch--checked {
+  .ToggleSwitch-statusOn {
+    height: auto;
+    visibility: visible;
+  }
+
+  .ToggleSwitch-statusOff {
+    height: 0;
+    visibility: hidden;
+  }
+}
+
 .ToggleSwitch-track {
   position: relative;
   display: block;