@primer/view-components 0.52.0-rc.62fe3ab0 → 0.52.0-rc.bfc4df68

package/app/components/primer/alpha/auto_complete.css

@@ -1 +1 @@
-.autocomplete-label-stacked{display:block;margin-bottom:var(--base-size-6)}.autocomplete-label-inline{display:inline;margin-right:var(--base-size-6)}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:var(--base-size-6)}}.autocomplete-body{position:relative;display:inline}.autocomplete-embedded-icon-wrap{display:inline-flex;padding:var(--base-size-4) var(--base-size-8);align-items:center}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.autocomplete-embedded-icon-wrap .form-control{padding:0;margin-left:var(--base-size-8);border:none;box-shadow:none}:is(.autocomplete-embedded-icon-wrap .form-control):focus,:is(.autocomplete-embedded-icon-wrap .form-control):focus-visible{box-shadow:none}.autocomplete-results{position:absolute;left:0;z-index:99;width:max-content;min-width:100%;max-height:20em;overflow-y:auto;font-size:var(--text-codeBlock-size);list-style:none;background:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-resting-medium)}.autocomplete-item{display:block;width:100%;padding:var(--base-size-4) var(--base-size-8);overflow:hidden;font-weight:var(--base-text-weight-semibold);color:var(--fgColor-default);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-color:var(--overlay-bgColor);border:0}.autocomplete-item,.autocomplete-item:hover{-webkit-text-decoration:none;text-decoration:none}.autocomplete-item:hover{color:var(--fgColor-onEmphasis);background-color:var(--bgColor-accent-emphasis)}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none;background-color:var(--bgColor-accent-emphasis)}:is(.autocomplete-item.selected,.autocomplete-item[aria-selected=true],.autocomplete-item.navigation-focus) *{color:inherit!important}
+.autocomplete-label-stacked{display:block;margin-bottom:var(--base-size-6)}.autocomplete-label-inline{display:inline;margin-right:var(--base-size-6)}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:var(--base-size-6)}}.autocomplete-body{position:relative;display:inline}.autocomplete-embedded-icon-wrap{display:inline-flex;padding:var(--base-size-4) var(--base-size-8);align-items:center}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.autocomplete-embedded-icon-wrap .form-control{padding:0;margin-left:var(--base-size-8);border:none;box-shadow:none}:is(.autocomplete-embedded-icon-wrap .form-control):focus,:is(.autocomplete-embedded-icon-wrap .form-control):focus-visible{box-shadow:none}.autocomplete-results{position:absolute;left:0;z-index:99;width:max-content;min-width:100%;max-height:20em;overflow-y:auto;font-size:var(--text-codeBlock-size);list-style:none;background:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-resting-medium)}.autocomplete-item{display:block;width:100%;padding:var(--base-size-4) var(--base-size-8);overflow:hidden;font-weight:var(--base-text-weight-semibold);color:var(--fgColor-default);text-align:left;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-color:var(--overlay-bgColor);border:0}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item:hover,.autocomplete-item[aria-selected=true]{color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none;background-color:var(--bgColor-accent-emphasis)}

package/app/components/primer/alpha/auto_complete.css.json

@@ -11,11 +11,9 @@
     ":is(.autocomplete-embedded-icon-wrap .form-control):focus-visible",
     ".autocomplete-results",
     ".autocomplete-item",
-    ".autocomplete-item:hover",
-    ".autocomplete-item:hover *",
     ".autocomplete-item.navigation-focus",
     ".autocomplete-item.selected",
-    ".autocomplete-item[aria-selected=true]",
-    ":is(.autocomplete-item.selected,.autocomplete-item[aria-selected=true],.autocomplete-item.navigation-focus) *"
+    ".autocomplete-item:hover",
+    ".autocomplete-item[aria-selected=true]"
   ]
 }

package/app/components/primer/alpha/text_field.css

@@ -1 +1 @@
-.FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4)}.FormControl--fullWidth{display:flex}.FormControl-label{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);line-height:var(--text-body-lineHeight-medium);color:var(--fgColor-default)}.FormControl-caption{margin-bottom:0;font-weight:var(--text-caption-weight);color:var(--fgColor-muted)}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size);line-height:var(--text-caption-lineHeight)}.FormControl-inlineValidation{display:flex;font-weight:var(--base-text-weight-semibold);color:var(--control-danger-fgColor-rest);fill:var(--control-danger-fgColor-rest);flex-direction:row;align-items:flex-start;gap:var(--base-size-4)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--success{color:var(--fgColor-success);fill:var(--fgColor-success)}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16)}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:var(--stack-gap-normal)}.FormControl-horizontalGroup{display:flex;column-gap:.5rem}.FormControl-input,.FormControl-select,.FormControl-textarea{color:var(--fgColor-default);background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset)}[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea){color:var(--control-fgColor-disabled);cursor:not-allowed;background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}[invalid=true]:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus){border-color:var(--control-borderColor-danger)}[invalid=false]:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus){border-color:var(--control-borderColor-success)}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor)}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.FormControl-input,.FormControl-select,.FormControl-textarea{width:100%;font-size:var(--text-body-size-medium);line-height:var(--text-body-lineHeight-medium);border-radius:var(--borderRadius-medium);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;padding-inline:var(--control-medium-paddingInline-condensed);padding-block:calc(var(--control-medium-paddingBlock) - var(--borderWidth-thin))}[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder{color:var(--control-fgColor-disabled)}[readonly]:is(.FormControl-input,.FormControl-select,.FormControl-textarea){background-color:var(--control-bgColor-disabled)}:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder{color:var(--control-fgColor-placeholder);opacity:1}.FormControl-small:is(.FormControl-input,.FormControl-select,.FormControl-textarea){height:var(--control-small-size);padding-inline:var(--control-small-paddingInline-normal);padding-block:var(--control-small-paddingBlock);font-size:var(--text-body-size-small)}.FormControl-medium:is(.FormControl-input,.FormControl-select,.FormControl-textarea){height:var(--control-medium-size)}.FormControl-large:is(.FormControl-input,.FormControl-select,.FormControl-textarea){height:var(--control-large-size);padding-inline:var(--control-large-paddingInline-normal);padding-block:var(--control-large-paddingBlock)}.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea){background-color:var(--bgColor-muted)}.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus,.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus-visible{background-color:var(--bgColor-default)}.FormControl-monospace:is(.FormControl-input,.FormControl-select,.FormControl-textarea){font-family:var(--fontStack-monospace)}.FormControl-error:is(.FormControl-input,.FormControl-select,.FormControl-textarea){border-color:var(--control-borderColor-danger)}.FormControl-success:is(.FormControl-input,.FormControl-select,.FormControl-textarea){border-color:var(--control-borderColor-success)}.FormControl-warning:is(.FormControl-input,.FormControl-select,.FormControl-textarea){border-color:var(--control-borderColor-warning)}.FormControl-toggleSwitchInput{display:flex;align-items:flex-start;gap:var(--base-size-16)}.FormControl-input-wrap{position:relative;display:grid}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{position:absolute;top:var(--base-size-8);left:var(--base-size-8);display:block;width:var(--base-size-16);height:var(--base-size-16);color:var(--fgColor-muted);pointer-events:none}:is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingVisualWrap{position:absolute;top:var(--base-size-8);right:var(--base-size-8);display:flex;height:var(--base-size-16);align-items:center;gap:var(--base-size-4);color:var(--fgColor-muted);pointer-events:none}:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualLabel),:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualText){max-width:25%;padding-left:var(--base-size-8)}:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap) .FormControl-input-trailingVisualLabel{overflow:hidden;text-overflow:ellipsis}.FormControl-input-wrap .FormControl-input-trailingAction{position:absolute;top:var(--base-size-4);right:var(--base-size-4);z-index:4;display:grid;width:var(--control-xsmall-size);height:var(--control-xsmall-size);padding:0;color:var(--fgColor-muted);cursor:pointer;background:#0000;border:0;border-radius:var(--borderRadius-small);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;align-items:center;justify-content:center}:is(.FormControl-input-wrap .FormControl-input-trailingAction) svg{-webkit-user-select:none;user-select:none}[disabled]:is(.FormControl-input-wrap .FormControl-input-trailingAction){color:var(--control-fgColor-disabled);pointer-events:none}:is(.FormControl-input-wrap .FormControl-input-trailingAction):hover{background:var(--control-transparent-bgColor-hover)}:is(.FormControl-input-wrap .FormControl-input-trailingAction):active{background:var(--control-transparent-bgColor-active)}.FormControl-input-trailingAction--divider:is(.FormControl-input-wrap .FormControl-input-trailingAction):before{position:absolute;top:calc((var(--control-xsmall-size) - var(--base-size-16))/2);left:calc(var(--base-size-4)*-1);display:block;width:var(--borderWidth-thin);height:var(--base-size-16);content:"";background:var(--borderColor-default)}:is(:is(.FormControl-input-wrap .FormControl-input-trailingAction):after){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:var(--control-medium-size) var(--control-medium-size);content:"";transform:translateX(-50%) translateY(-50%)}@media (pointer:coarse){:is(.FormControl-input-wrap .FormControl-input-trailingAction):after{min-width:var(--control-minTarget-coarse);min-height:var(--control-minTarget-coarse)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingVisual .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input,.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input{padding-inline-end:25%}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{top:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2));left:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingVisualWrap{top:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2));right:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{width:calc(var(--control-small-size) - var(--base-size-8));height:calc(var(--control-small-size) - var(--base-size-8))}:is(.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction):before{top:calc((var(--control-xsmall-size) - var(--base-size-16))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{top:var(--control-medium-paddingInline-normal);left:var(--control-medium-paddingInline-normal)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingVisualWrap{top:var(--control-medium-paddingInline-normal);right:var(--control-medium-paddingInline-normal)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual .FormControl-input{padding-inline-end:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingLabel .FormControl-input.FormControl-large,.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingText .FormControl-input.FormControl-large,.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input,.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input{padding-inline-end:25%}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{top:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2));right:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2));width:var(--control-small-size);height:var(--control-small-size)}:is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction):before{top:unset;height:var(--base-size-20)}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16)}.FormControl-select-wrap:after{width:var(--base-size-16);height:var(--base-size-16);padding-right:var(--base-size-4);pointer-events:none;content:"";background-color:var(--bgColor-neutral-emphasis);mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJtNC40MjcgOS40MjcgMy4zOTYgMy4zOTZhLjI1LjI1IDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3TTQuNDIzIDYuNDcgNy44MiAzLjA3MmEuMjUuMjUgMCAwIDEgLjM1NCAwTDExLjU3IDYuNDdhLjI1LjI1IDAgMCAxLS4xNzcuNDI3SDQuNmEuMjUuMjUgMCAwIDEtLjE3Ny0uNDI3Ii8+PC9zdmc+");mask-size:contain;mask-repeat:no-repeat;grid-column:2;grid-row:1;place-self:center end}.FormControl-select-wrap .FormControl-select{grid-column:1/-1;grid-row:1;appearance:none;padding-right:var(--base-size-20)}.FormControl-select-wrap[data-multiple]:after{content:none}.FormControl-select-wrap[data-multiple] .FormControl-select{padding-right:var(--base-size-8)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;grid-template-columns:min-content auto;gap:var(--base-size-8)}:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) :is(.FormControl-checkbox-labelWrap,.FormControl-radio-labelWrap){display:flex;flex-direction:column;gap:var(--base-size-4)}:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label{cursor:pointer}.FormControl-check-group-wrap fieldset,.FormControl-radio-group-wrap fieldset{padding:0;margin:0;border:0}.FormControl-checkbox{color:var(--fgColor-default);background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset)}.FormControl-checkbox[disabled]{color:var(--control-fgColor-disabled);cursor:not-allowed;background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}.FormControl-checkbox[invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}.FormControl-checkbox[invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}.FormControl-checkbox:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.FormControl-checkbox:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor)}.FormControl-checkbox:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.FormControl-checkbox{position:relative;display:grid;width:var(--base-size-16);height:var(--base-size-16);margin:0;margin-top:var(--base-size-2);cursor:pointer;border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-small);transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);appearance:none;place-content:center}.FormControl-checkbox:before{width:var(--base-size-16);height:var(--base-size-16);visibility:hidden;content:"";background-color:var(--control-checked-fgColor-rest);transition:visibility 0s linear .23s;clip-path:inset(var(--base-size-16) 0 0 0);mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");mask-size:75%;mask-repeat:no-repeat;mask-position:center;animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}:is(.FormControl-checkbox:after){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:var(--control-medium-size) var(--control-medium-size);content:"";transform:translateX(-50%) translateY(-50%)}:is(.FormControl-checkbox[disabled]~.FormControl-checkbox-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}.FormControl-checkbox:checked{background:var(--control-checked-bgColor-rest,var(--color-accent-fg));border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}.FormControl-checkbox:checked:before{visibility:visible;transition:visibility 0s linear 0s;animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}.FormControl-checkbox:checked:disabled{cursor:not-allowed;background-color:var(--control-fgColor-disabled);border-color:var(--control-fgColor-disabled);opacity:1}.FormControl-checkbox:checked:disabled:before{background-color:var(--control-checked-fgColor-rest)}@media (forced-colors:active){.FormControl-checkbox:checked{background-color:canvastext;border-color:canvastext}}.FormControl-checkbox:focus-visible{outline:2px solid var(--focus-outlineColor);outline-offset:2px;box-shadow:none}.FormControl-checkbox:indeterminate:before{mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}.FormControl-radio{color:var(--fgColor-default);background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset)}.FormControl-radio[disabled]{color:var(--control-fgColor-disabled);cursor:not-allowed;background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}.FormControl-radio[invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}.FormControl-radio[invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}.FormControl-radio:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.FormControl-radio:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor)}.FormControl-radio:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.FormControl-radio{position:relative;width:var(--base-size-16);height:var(--base-size-16);margin:0;margin-top:var(--base-size-2);cursor:pointer;border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-full);transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);appearance:none}:is(.FormControl-radio:after){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:var(--control-medium-size) var(--control-medium-size);content:"";transform:translateX(-50%) translateY(-50%)}:is(.FormControl-radio[disabled]~.FormControl-radio-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}.FormControl-radio:checked{border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));border-width:var(--base-size-4)}.FormControl-radio:checked:disabled,.FormControl-radio[disabled]:checked{cursor:not-allowed;border-color:var(--control-fgColor-disabled)}:is(:is(.FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled)~.FormControl-radio-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}.FormControl-radio:focus-visible{outline:2px solid var(--focus-outlineColor);outline-offset:2px;box-shadow:none}@media (forced-colors:active){.FormControl-radio{background-color:canvastext;border-color:canvastext}}@keyframes checkmarkIn{0%{clip-path:inset(var(--base-size-16) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16) 0 0 0)}}
+.FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4)}.FormControl--fullWidth{display:flex}.FormControl-label{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);line-height:var(--text-body-lineHeight-medium);color:var(--fgColor-default)}.FormControl-caption{margin-bottom:0;font-weight:var(--text-caption-weight);color:var(--fgColor-muted)}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size);line-height:var(--text-caption-lineHeight)}.FormControl-inlineValidation{display:flex;font-weight:var(--base-text-weight-semibold);color:var(--control-danger-fgColor-rest);fill:var(--control-danger-fgColor-rest);flex-direction:row;align-items:flex-start;gap:var(--base-size-4)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--success{color:var(--fgColor-success);fill:var(--fgColor-success)}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16)}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:var(--stack-gap-normal)}.FormControl-horizontalGroup{display:flex;column-gap:.5rem}.FormControl-input,.FormControl-select,.FormControl-textarea{color:var(--fgColor-default);background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset)}[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea){color:var(--control-fgColor-disabled);cursor:not-allowed;background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}[invalid=true]:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus){border-color:var(--control-borderColor-danger)}[invalid=false]:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus){border-color:var(--control-borderColor-success)}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor)}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.FormControl-input,.FormControl-select,.FormControl-textarea{width:100%;font-size:var(--text-body-size-medium);line-height:var(--text-body-lineHeight-medium);border-radius:var(--borderRadius-medium);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;padding-inline:var(--control-medium-paddingInline-condensed);padding-block:calc(var(--control-medium-paddingBlock) - var(--borderWidth-thin))}[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder{color:var(--control-fgColor-disabled)}[readonly]:is(.FormControl-input,.FormControl-select,.FormControl-textarea){background-color:var(--control-bgColor-disabled)}:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder{color:var(--control-fgColor-placeholder);opacity:1}.FormControl-small:is(.FormControl-input,.FormControl-select,.FormControl-textarea){height:var(--control-small-size);padding-inline:var(--control-small-paddingInline-normal);padding-block:var(--control-small-paddingBlock);font-size:var(--text-body-size-small)}.FormControl-medium:is(.FormControl-input,.FormControl-select,.FormControl-textarea){height:var(--control-medium-size)}.FormControl-large:is(.FormControl-input,.FormControl-select,.FormControl-textarea){height:var(--control-large-size);padding-inline:var(--control-large-paddingInline-normal);padding-block:var(--control-large-paddingBlock)}.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea){background-color:var(--bgColor-muted)}.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus,.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus-visible{background-color:var(--bgColor-default)}.FormControl-monospace:is(.FormControl-input,.FormControl-select,.FormControl-textarea){font-family:var(--fontStack-monospace)}.FormControl-error:is(.FormControl-input,.FormControl-select,.FormControl-textarea){border-color:var(--control-borderColor-danger)}.FormControl-success:is(.FormControl-input,.FormControl-select,.FormControl-textarea){border-color:var(--control-borderColor-success)}.FormControl-warning:is(.FormControl-input,.FormControl-select,.FormControl-textarea){border-color:var(--control-borderColor-warning)}.FormControl-toggleSwitchInput{display:flex;align-items:flex-start;gap:var(--base-size-16)}.FormControl-input-wrap{position:relative;display:grid}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{position:absolute;top:var(--base-size-8);left:var(--base-size-8);display:block;width:var(--base-size-16);height:var(--base-size-16);color:var(--fgColor-muted);pointer-events:none}:is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingVisualWrap{position:absolute;top:var(--base-size-8);right:var(--base-size-8);display:flex;height:var(--base-size-16);align-items:center;gap:var(--base-size-4);color:var(--fgColor-muted);pointer-events:none}:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualLabel),:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualText){max-width:25%;padding-left:var(--base-size-8)}:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap) .FormControl-input-trailingVisualLabel{overflow:hidden;text-overflow:ellipsis}.FormControl-input-wrap .FormControl-input-trailingAction{position:absolute;top:var(--base-size-4);right:var(--base-size-4);z-index:4;display:grid;width:var(--control-xsmall-size);height:var(--control-xsmall-size);padding:0;color:var(--fgColor-muted);cursor:pointer;background:#0000;border:0;border-radius:var(--borderRadius-small);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;align-items:center;justify-content:center}:is(.FormControl-input-wrap .FormControl-input-trailingAction) svg{-webkit-user-select:none;user-select:none}[disabled]:is(.FormControl-input-wrap .FormControl-input-trailingAction){color:var(--control-fgColor-disabled);pointer-events:none}:is(.FormControl-input-wrap .FormControl-input-trailingAction):hover{background:var(--control-transparent-bgColor-hover)}:is(.FormControl-input-wrap .FormControl-input-trailingAction):active{background:var(--control-transparent-bgColor-active)}.FormControl-input-trailingAction--divider:is(.FormControl-input-wrap .FormControl-input-trailingAction):before{position:absolute;top:calc((var(--control-xsmall-size) - var(--base-size-16))/2);left:calc(var(--base-size-4)*-1);display:block;width:var(--borderWidth-thin);height:var(--base-size-16);content:"";background:var(--borderColor-default)}:is(:is(.FormControl-input-wrap .FormControl-input-trailingAction):after){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:var(--control-medium-size) var(--control-medium-size);content:"";transform:translateX(-50%) translateY(-50%)}@media (pointer:coarse){:is(.FormControl-input-wrap .FormControl-input-trailingAction):after{min-width:var(--control-minTarget-coarse);min-height:var(--control-minTarget-coarse)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingVisual .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input,.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input{padding-inline-end:25%}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{top:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2));left:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingVisualWrap{top:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2));right:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{width:calc(var(--control-small-size) - var(--base-size-8));height:calc(var(--control-small-size) - var(--base-size-8))}:is(.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction):before{top:calc((var(--control-xsmall-size) - var(--base-size-16))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{top:var(--control-medium-paddingInline-normal);left:var(--control-medium-paddingInline-normal)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingVisualWrap{top:var(--control-medium-paddingInline-normal);right:var(--control-medium-paddingInline-normal)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual .FormControl-input{padding-inline-end:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingLabel .FormControl-input.FormControl-large,.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingText .FormControl-input.FormControl-large,.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input,.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input{padding-inline-end:25%}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{top:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2));right:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2));width:var(--control-small-size);height:var(--control-small-size)}:is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction):before{top:unset;height:var(--base-size-20)}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16)}.FormControl-select-wrap:after{width:var(--base-size-16);height:var(--base-size-16);padding-right:var(--base-size-4);pointer-events:none;content:"";background-color:var(--bgColor-neutral-emphasis);mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJtNC40MjcgOS40MjcgMy4zOTYgMy4zOTZhLjI1LjI1IDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3TTQuNDIzIDYuNDcgNy44MiAzLjA3MmEuMjUuMjUgMCAwIDEgLjM1NCAwTDExLjU3IDYuNDdhLjI1LjI1IDAgMCAxLS4xNzcuNDI3SDQuNmEuMjUuMjUgMCAwIDEtLjE3Ny0uNDI3Ii8+PC9zdmc+");mask-size:contain;mask-repeat:no-repeat;grid-column:2;grid-row:1;place-self:center end}.FormControl-select-wrap .FormControl-select{grid-column:1/-1;grid-row:1;appearance:none;padding-right:var(--base-size-20)}.FormControl-select-wrap[data-multiple]:after{content:none}.FormControl-select-wrap[data-multiple] .FormControl-select{padding-right:var(--base-size-8)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;grid-template-columns:min-content auto;gap:var(--base-size-8)}:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label{cursor:pointer}.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,.FormControl-radio-wrap .FormControl-radio-labelWrap{display:flex;flex-direction:column;gap:var(--base-size-4)}.FormControl-check-group-wrap fieldset,.FormControl-radio-group-wrap fieldset{padding:0;margin:0;border:0}.FormControl-checkbox{color:var(--fgColor-default);background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset)}.FormControl-checkbox[disabled]{color:var(--control-fgColor-disabled);cursor:not-allowed;background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}.FormControl-checkbox[invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}.FormControl-checkbox[invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}.FormControl-checkbox:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.FormControl-checkbox:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor)}.FormControl-checkbox:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.FormControl-checkbox{position:relative;display:grid;width:var(--base-size-16);height:var(--base-size-16);margin:0;margin-top:var(--base-size-2);cursor:pointer;border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-small);transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);appearance:none;place-content:center}.FormControl-checkbox:before{width:var(--base-size-16);height:var(--base-size-16);visibility:hidden;content:"";background-color:var(--control-checked-fgColor-rest);transition:visibility 0s linear .23s;clip-path:inset(var(--base-size-16) 0 0 0);mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");mask-size:75%;mask-repeat:no-repeat;mask-position:center;animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}:is(.FormControl-checkbox:after){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:var(--control-medium-size) var(--control-medium-size);content:"";transform:translateX(-50%) translateY(-50%)}:is(.FormControl-checkbox[disabled]~.FormControl-checkbox-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}.FormControl-checkbox:checked{background:var(--control-checked-bgColor-rest,var(--color-accent-fg));border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}.FormControl-checkbox:checked:before{visibility:visible;transition:visibility 0s linear 0s;animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}.FormControl-checkbox:checked:disabled{cursor:not-allowed;background-color:var(--control-fgColor-disabled);border-color:var(--control-fgColor-disabled);opacity:1}.FormControl-checkbox:checked:disabled:before{background-color:var(--control-checked-fgColor-rest)}@media (forced-colors:active){.FormControl-checkbox:checked{background-color:canvastext;border-color:canvastext}}.FormControl-checkbox:focus-visible{outline:2px solid var(--focus-outlineColor);outline-offset:2px;box-shadow:none}.FormControl-checkbox:indeterminate:before{mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}.FormControl-radio{color:var(--fgColor-default);background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset)}.FormControl-radio[disabled]{color:var(--control-fgColor-disabled);cursor:not-allowed;background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}.FormControl-radio[invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}.FormControl-radio[invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}.FormControl-radio:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.FormControl-radio:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor)}.FormControl-radio:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.FormControl-radio{position:relative;width:var(--base-size-16);height:var(--base-size-16);margin:0;margin-top:var(--base-size-2);cursor:pointer;border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-full);transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);appearance:none}:is(.FormControl-radio:after){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:var(--control-medium-size) var(--control-medium-size);content:"";transform:translateX(-50%) translateY(-50%)}:is(.FormControl-radio[disabled]~.FormControl-radio-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}.FormControl-radio:checked{border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));border-width:var(--base-size-4)}.FormControl-radio:checked:disabled,.FormControl-radio[disabled]:checked{cursor:not-allowed;border-color:var(--control-fgColor-disabled)}:is(:is(.FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled)~.FormControl-radio-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}.FormControl-radio:focus-visible{outline:2px solid var(--focus-outlineColor);outline-offset:2px;box-shadow:none}@media (forced-colors:active){.FormControl-radio{background-color:canvastext;border-color:canvastext}}@keyframes checkmarkIn{0%{clip-path:inset(var(--base-size-16) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16) 0 0 0)}}

package/app/components/primer/alpha/text_field.css.json

@@ -80,8 +80,9 @@
     ".FormControl-select-wrap[data-multiple] .FormControl-select",
     ".FormControl-checkbox-wrap",
     ".FormControl-radio-wrap",
-    ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) :is(.FormControl-checkbox-labelWrap,.FormControl-radio-labelWrap)",
     ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label",
+    ".FormControl-checkbox-wrap .FormControl-checkbox-labelWrap",
+    ".FormControl-radio-wrap .FormControl-radio-labelWrap",
     ".FormControl-check-group-wrap fieldset",
     ".FormControl-radio-group-wrap fieldset",
     ".FormControl-checkbox",

package/app/components/primer/beta/breadcrumbs.css

@@ -1 +1 @@
-.breadcrumb-item{display:inline-block;list-style:none;max-width:100%}.breadcrumb-item:after{display:inline-block;height:.8em;margin:0 .15em 0 .5em;content:"";border-right:.1em solid var(--borderColor-neutral-emphasis);transform:rotate(15deg) translateY(.0625em)}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);-webkit-text-decoration:none!important;text-decoration:none!important;cursor:default!important}
+.breadcrumb-item{display:inline-block;list-style:none;max-width:100%}.breadcrumb-item:after{display:inline-block;height:.8em;margin:0 .15em 0 .5em;content:"";border-right:.1em solid var(--borderColor-neutral-emphasis);transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);-webkit-text-decoration:none!important;text-decoration:none!important;cursor:default!important}

package/app/components/primer/beta/breadcrumbs.css.json

@@ -3,7 +3,8 @@
   "selectors": [
     ".breadcrumb-item",
     ".breadcrumb-item:after",
-    ":is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after",
+    ".breadcrumb-item-selected:after",
+    ".breadcrumb-item[aria-current]:not([aria-current=false]):after",
     ".breadcrumb-item-selected a"
   ]
 }

package/app/components/primer/beta/popover.css

@@ -1 +1 @@
-.Popover{position:absolute;z-index:100}.Popover-message{position:relative;width:232px;margin-right:auto;margin-left:auto;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important}.Popover-message:after,.Popover-message:before{position:absolute;left:50%;display:inline-block;content:""}.Popover-message:before{top:-16px;margin-left:-9px;border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.Popover-message:after{top:-14px;margin-left:-8px;border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after,:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{top:auto;border-bottom-color:#0000}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{bottom:-16px;border-top-color:var(--borderColor-default)}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after{bottom:-14px;border-top-color:var(--overlay-bgColor)}.Popover-message--bottom-right,.Popover-message--top-right{right:-9px;margin-right:0}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{left:auto;margin-left:0}:is(.Popover-message--top-right,.Popover-message--bottom-right):before{right:var(--base-size-20)}:is(.Popover-message--top-right,.Popover-message--bottom-right):after{right:var(--base-size-20);margin-right:1px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after,:is(.Popover-message--top-left,.Popover-message--bottom-left):before{left:var(--base-size-24);margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after{left:var(--base-size-24);margin-left:1px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after,:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{top:50%;left:auto;margin-left:0;border-bottom-color:#0000}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{margin-top:-9px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{margin-top:-8px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):before{right:-16px;border-left-color:var(--borderColor-default)}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):after{right:-14px;border-left-color:var(--overlay-bgColor)}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{left:-16px;border-right-color:var(--borderColor-default)}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{left:-14px;margin-bottom:1px;border-right-color:var(--overlay-bgColor)}:is(.Popover-message--right-top,.Popover-message--left-top):after,:is(.Popover-message--right-top,.Popover-message--left-top):before{top:var(--base-size-24)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after,:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{top:auto}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{bottom:var(--base-size-16)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after{bottom:var(--base-size-16);margin-bottom:1px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{position:fixed;top:auto!important;right:0!important;bottom:0!important;left:0!important}.Popover-message{top:auto;right:auto;bottom:auto;left:auto;width:auto!important;margin:var(--stack-gap-condensed)}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}
+.Popover{position:absolute;z-index:100}.Popover-message{position:relative;width:232px;margin-right:auto;margin-left:auto;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important}.Popover-message:after,.Popover-message:before{position:absolute;left:50%;display:inline-block;content:""}.Popover-message:before{top:-16px;margin-left:-9px;border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.Popover-message:after{top:-14px;margin-left:-8px;border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{top:auto;border-bottom-color:#0000}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{bottom:-16px;border-top-color:var(--borderColor-default)}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{bottom:-14px;border-top-color:var(--overlay-bgColor)}.Popover-message--bottom-right,.Popover-message--top-right{right:-9px;margin-right:0}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:var(--base-size-20)}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:var(--base-size-20);margin-right:1px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:var(--base-size-24);margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:var(--base-size-24);margin-left:1px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{top:50%;left:auto;margin-left:0;border-bottom-color:#0000}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{right:-16px;border-left-color:var(--borderColor-default)}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{right:-14px;border-left-color:var(--overlay-bgColor)}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{left:-16px;border-right-color:var(--borderColor-default)}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{left:-14px;margin-bottom:1px;border-right-color:var(--overlay-bgColor)}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:var(--base-size-24)}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:var(--base-size-16)}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:var(--base-size-16);margin-bottom:1px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{position:fixed;top:auto!important;right:0!important;bottom:0!important;left:0!important}.Popover-message{top:auto;right:auto;bottom:auto;left:auto;width:auto!important;margin:var(--stack-gap-condensed)}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}

package/app/components/primer/beta/popover.css.json

@@ -7,26 +7,32 @@
     ".Popover-message:before",
     ".Popover-message--no-caret:after",
     ".Popover-message--no-caret:before",
-    ":is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after",
-    ":is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before",
+    ".Popover-message--bottom-left:after",
+    ".Popover-message--bottom-left:before",
+    ".Popover-message--bottom-right:after",
+    ".Popover-message--bottom-right:before",
+    ".Popover-message--bottom:after",
+    ".Popover-message--bottom:before",
     ".Popover-message--bottom-right",
     ".Popover-message--top-right",
-    ":is(.Popover-message--top-right,.Popover-message--bottom-right):after",
-    ":is(.Popover-message--top-right,.Popover-message--bottom-right):before",
+    ".Popover-message--top-right:after",
+    ".Popover-message--top-right:before",
     ".Popover-message--bottom-left",
     ".Popover-message--top-left",
-    ":is(.Popover-message--top-left,.Popover-message--bottom-left):after",
-    ":is(.Popover-message--top-left,.Popover-message--bottom-left):before",
-    ":is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after",
-    ":is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before",
-    ":is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):before",
-    ":is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):after",
-    ":is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before",
-    ":is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after",
-    ":is(.Popover-message--right-top,.Popover-message--left-top):after",
-    ":is(.Popover-message--right-top,.Popover-message--left-top):before",
-    ":is(.Popover-message--right-bottom,.Popover-message--left-bottom):after",
-    ":is(.Popover-message--right-bottom,.Popover-message--left-bottom):before",
+    ".Popover-message--top-left:after",
+    ".Popover-message--top-left:before",
+    ".Popover-message--left-bottom:after",
+    ".Popover-message--left-bottom:before",
+    ".Popover-message--left-top:after",
+    ".Popover-message--left-top:before",
+    ".Popover-message--left:after",
+    ".Popover-message--left:before",
+    ".Popover-message--right-bottom:after",
+    ".Popover-message--right-bottom:before",
+    ".Popover-message--right-top:after",
+    ".Popover-message--right-top:before",
+    ".Popover-message--right:after",
+    ".Popover-message--right:before",
     ".Popover-message--large",
     ".Popover-message>.btn-octicon"
   ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.52.0-rc.62fe3ab0",
+  "version": "0.52.0-rc.bfc4df68",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/classes.json

@@ -459,6 +459,9 @@
   "Popover-message": [
     "Primer::Beta::Popover"
   ],
+  "Popover-message--bottom": [
+    "Primer::Beta::Popover"
+  ],
   "Popover-message--bottom-left": [
     "Primer::Beta::Popover"
   ],
@@ -468,9 +471,27 @@
   "Popover-message--large": [
     "Primer::Beta::Popover"
   ],
+  "Popover-message--left": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--left-bottom": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--left-top": [
+    "Primer::Beta::Popover"
+  ],
   "Popover-message--no-caret": [
     "Primer::Beta::Popover"
   ],
+  "Popover-message--right": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--right-bottom": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--right-top": [
+    "Primer::Beta::Popover"
+  ],
   "Popover-message--top-left": [
     "Primer::Beta::Popover"
   ],

package/static/classnames.cjs

@@ -110,6 +110,7 @@ module.exports = new Set([
   'FormControl-caption',
   'FormControl-check-group-wrap',
   'FormControl-checkbox',
+  'FormControl-checkbox-labelWrap',
   'FormControl-checkbox-wrap',
   'FormControl-error',
   'FormControl-horizontalGroup',
@@ -139,6 +140,7 @@ module.exports = new Set([
   'FormControl-monospace',
   'FormControl-radio',
   'FormControl-radio-group-wrap',
+  'FormControl-radio-labelWrap',
   'FormControl-radio-wrap',
   'FormControl-select',
   'FormControl-select-wrap',
@@ -246,10 +248,17 @@ module.exports = new Set([
   'Overlay-titleWrap',
   'Popover',
   'Popover-message',
+  'Popover-message--bottom',
   'Popover-message--bottom-left',
   'Popover-message--bottom-right',
   'Popover-message--large',
+  'Popover-message--left',
+  'Popover-message--left-bottom',
+  'Popover-message--left-top',
   'Popover-message--no-caret',
+  'Popover-message--right',
+  'Popover-message--right-bottom',
+  'Popover-message--right-top',
   'Popover-message--top-left',
   'Popover-message--top-right',
   'Progress',

package/static/classnames.js

@@ -110,6 +110,7 @@ const classNames = new Set([
   'FormControl-caption',
   'FormControl-check-group-wrap',
   'FormControl-checkbox',
+  'FormControl-checkbox-labelWrap',
   'FormControl-checkbox-wrap',
   'FormControl-error',
   'FormControl-horizontalGroup',
@@ -139,6 +140,7 @@ const classNames = new Set([
   'FormControl-monospace',
   'FormControl-radio',
   'FormControl-radio-group-wrap',
+  'FormControl-radio-labelWrap',
   'FormControl-radio-wrap',
   'FormControl-select',
   'FormControl-select-wrap',
@@ -246,10 +248,17 @@ const classNames = new Set([
   'Overlay-titleWrap',
   'Popover',
   'Popover-message',
+  'Popover-message--bottom',
   'Popover-message--bottom-left',
   'Popover-message--bottom-right',
   'Popover-message--large',
+  'Popover-message--left',
+  'Popover-message--left-bottom',
+  'Popover-message--left-top',
   'Popover-message--no-caret',
+  'Popover-message--right',
+  'Popover-message--right-bottom',
+  'Popover-message--right-top',
   'Popover-message--top-left',
   'Popover-message--top-right',
   'Progress',