@primer/view-components 0.52.0-rc.e63ea21e → 0.52.1-rc.8dd01fd1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/assets/styles/primer_view_components.css +1 -1
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/auto_complete.css +1 -1
- package/app/components/primer/alpha/auto_complete.css.json +2 -4
- package/app/components/primer/alpha/text_field.css +1 -1
- package/app/components/primer/alpha/text_field.css.json +2 -1
- package/app/components/primer/beta/breadcrumbs.css +1 -1
- package/app/components/primer/beta/breadcrumbs.css.json +2 -1
- package/app/components/primer/beta/popover.css +1 -1
- package/app/components/primer/beta/popover.css.json +22 -16
- package/package.json +6 -1
- package/static/classes.json +21 -0
- package/static/classnames.cjs +9 -0
- package/static/classnames.js +9 -0
|
@@ -1 +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
|
|
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;-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)}
|
|
@@ -11,11 +11,9 @@
|
|
|
11
11
|
":is(.autocomplete-embedded-icon-wrap .form-control):focus-visible",
|
|
12
12
|
".autocomplete-results",
|
|
13
13
|
".autocomplete-item",
|
|
14
|
-
".autocomplete-item:hover",
|
|
15
|
-
".autocomplete-item:hover *",
|
|
16
14
|
".autocomplete-item.navigation-focus",
|
|
17
15
|
".autocomplete-item.selected",
|
|
18
|
-
".autocomplete-item
|
|
19
|
-
"
|
|
16
|
+
".autocomplete-item:hover",
|
|
17
|
+
".autocomplete-item[aria-selected=true]"
|
|
20
18
|
]
|
|
21
19
|
}
|
|
@@ -1 +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)}}
|
|
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) .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)}}
|
|
@@ -80,8 +80,9 @@
|
|
|
80
80
|
".FormControl-select-wrap[data-multiple] .FormControl-select",
|
|
81
81
|
".FormControl-checkbox-wrap",
|
|
82
82
|
".FormControl-radio-wrap",
|
|
83
|
-
":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) :is(.FormControl-checkbox-labelWrap,.FormControl-radio-labelWrap)",
|
|
84
83
|
":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label",
|
|
84
|
+
".FormControl-checkbox-wrap .FormControl-checkbox-labelWrap",
|
|
85
|
+
".FormControl-radio-wrap .FormControl-radio-labelWrap",
|
|
85
86
|
".FormControl-check-group-wrap fieldset",
|
|
86
87
|
".FormControl-radio-group-wrap fieldset",
|
|
87
88
|
".FormControl-checkbox",
|
|
@@ -1 +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)}
|
|
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)}.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}
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
"selectors": [
|
|
4
4
|
".breadcrumb-item",
|
|
5
5
|
".breadcrumb-item:after",
|
|
6
|
-
"
|
|
6
|
+
".breadcrumb-item-selected:after",
|
|
7
|
+
".breadcrumb-item[aria-current]:not([aria-current=false]):after",
|
|
7
8
|
".breadcrumb-item-selected a"
|
|
8
9
|
]
|
|
9
10
|
}
|
|
@@ -1 +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}
|
|
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}.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}}
|
|
@@ -7,26 +7,32 @@
|
|
|
7
7
|
".Popover-message:before",
|
|
8
8
|
".Popover-message--no-caret:after",
|
|
9
9
|
".Popover-message--no-caret:before",
|
|
10
|
-
"
|
|
11
|
-
"
|
|
10
|
+
".Popover-message--bottom-left:after",
|
|
11
|
+
".Popover-message--bottom-left:before",
|
|
12
|
+
".Popover-message--bottom-right:after",
|
|
13
|
+
".Popover-message--bottom-right:before",
|
|
14
|
+
".Popover-message--bottom:after",
|
|
15
|
+
".Popover-message--bottom:before",
|
|
12
16
|
".Popover-message--bottom-right",
|
|
13
17
|
".Popover-message--top-right",
|
|
14
|
-
"
|
|
15
|
-
"
|
|
18
|
+
".Popover-message--top-right:after",
|
|
19
|
+
".Popover-message--top-right:before",
|
|
16
20
|
".Popover-message--bottom-left",
|
|
17
21
|
".Popover-message--top-left",
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
22
|
+
".Popover-message--top-left:after",
|
|
23
|
+
".Popover-message--top-left:before",
|
|
24
|
+
".Popover-message--left-bottom:after",
|
|
25
|
+
".Popover-message--left-bottom:before",
|
|
26
|
+
".Popover-message--left-top:after",
|
|
27
|
+
".Popover-message--left-top:before",
|
|
28
|
+
".Popover-message--left:after",
|
|
29
|
+
".Popover-message--left:before",
|
|
30
|
+
".Popover-message--right-bottom:after",
|
|
31
|
+
".Popover-message--right-bottom:before",
|
|
32
|
+
".Popover-message--right-top:after",
|
|
33
|
+
".Popover-message--right-top:before",
|
|
34
|
+
".Popover-message--right:after",
|
|
35
|
+
".Popover-message--right:before",
|
|
30
36
|
".Popover-message--large",
|
|
31
37
|
".Popover-message>.btn-octicon"
|
|
32
38
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.52.
|
|
3
|
+
"version": "0.52.1-rc.8dd01fd1",
|
|
4
4
|
"description": "ViewComponents for the Primer Design System",
|
|
5
5
|
"main": "app/assets/javascripts/primer_view_components.js",
|
|
6
6
|
"module": "app/components/primer/primer.js",
|
|
@@ -16,6 +16,11 @@
|
|
|
16
16
|
"import": "./static/classnames.js",
|
|
17
17
|
"require": "./static/classnames.cjs"
|
|
18
18
|
},
|
|
19
|
+
"./app/*": {
|
|
20
|
+
"types": "./app/*.d.ts",
|
|
21
|
+
"import": "./app/*.js",
|
|
22
|
+
"default": "./app/*.js"
|
|
23
|
+
},
|
|
19
24
|
"./*": "./*"
|
|
20
25
|
},
|
|
21
26
|
"repository": "primer/view_components",
|
package/static/classes.json
CHANGED
|
@@ -459,6 +459,9 @@
|
|
|
459
459
|
"Popover-message": [
|
|
460
460
|
"Primer::Beta::Popover"
|
|
461
461
|
],
|
|
462
|
+
"Popover-message--bottom": [
|
|
463
|
+
"Primer::Beta::Popover"
|
|
464
|
+
],
|
|
462
465
|
"Popover-message--bottom-left": [
|
|
463
466
|
"Primer::Beta::Popover"
|
|
464
467
|
],
|
|
@@ -468,9 +471,27 @@
|
|
|
468
471
|
"Popover-message--large": [
|
|
469
472
|
"Primer::Beta::Popover"
|
|
470
473
|
],
|
|
474
|
+
"Popover-message--left": [
|
|
475
|
+
"Primer::Beta::Popover"
|
|
476
|
+
],
|
|
477
|
+
"Popover-message--left-bottom": [
|
|
478
|
+
"Primer::Beta::Popover"
|
|
479
|
+
],
|
|
480
|
+
"Popover-message--left-top": [
|
|
481
|
+
"Primer::Beta::Popover"
|
|
482
|
+
],
|
|
471
483
|
"Popover-message--no-caret": [
|
|
472
484
|
"Primer::Beta::Popover"
|
|
473
485
|
],
|
|
486
|
+
"Popover-message--right": [
|
|
487
|
+
"Primer::Beta::Popover"
|
|
488
|
+
],
|
|
489
|
+
"Popover-message--right-bottom": [
|
|
490
|
+
"Primer::Beta::Popover"
|
|
491
|
+
],
|
|
492
|
+
"Popover-message--right-top": [
|
|
493
|
+
"Primer::Beta::Popover"
|
|
494
|
+
],
|
|
474
495
|
"Popover-message--top-left": [
|
|
475
496
|
"Primer::Beta::Popover"
|
|
476
497
|
],
|
package/static/classnames.cjs
CHANGED
|
@@ -110,6 +110,7 @@ module.exports = new Set([
|
|
|
110
110
|
'FormControl-caption',
|
|
111
111
|
'FormControl-check-group-wrap',
|
|
112
112
|
'FormControl-checkbox',
|
|
113
|
+
'FormControl-checkbox-labelWrap',
|
|
113
114
|
'FormControl-checkbox-wrap',
|
|
114
115
|
'FormControl-error',
|
|
115
116
|
'FormControl-horizontalGroup',
|
|
@@ -139,6 +140,7 @@ module.exports = new Set([
|
|
|
139
140
|
'FormControl-monospace',
|
|
140
141
|
'FormControl-radio',
|
|
141
142
|
'FormControl-radio-group-wrap',
|
|
143
|
+
'FormControl-radio-labelWrap',
|
|
142
144
|
'FormControl-radio-wrap',
|
|
143
145
|
'FormControl-select',
|
|
144
146
|
'FormControl-select-wrap',
|
|
@@ -246,10 +248,17 @@ module.exports = new Set([
|
|
|
246
248
|
'Overlay-titleWrap',
|
|
247
249
|
'Popover',
|
|
248
250
|
'Popover-message',
|
|
251
|
+
'Popover-message--bottom',
|
|
249
252
|
'Popover-message--bottom-left',
|
|
250
253
|
'Popover-message--bottom-right',
|
|
251
254
|
'Popover-message--large',
|
|
255
|
+
'Popover-message--left',
|
|
256
|
+
'Popover-message--left-bottom',
|
|
257
|
+
'Popover-message--left-top',
|
|
252
258
|
'Popover-message--no-caret',
|
|
259
|
+
'Popover-message--right',
|
|
260
|
+
'Popover-message--right-bottom',
|
|
261
|
+
'Popover-message--right-top',
|
|
253
262
|
'Popover-message--top-left',
|
|
254
263
|
'Popover-message--top-right',
|
|
255
264
|
'Progress',
|
package/static/classnames.js
CHANGED
|
@@ -110,6 +110,7 @@ const classNames = new Set([
|
|
|
110
110
|
'FormControl-caption',
|
|
111
111
|
'FormControl-check-group-wrap',
|
|
112
112
|
'FormControl-checkbox',
|
|
113
|
+
'FormControl-checkbox-labelWrap',
|
|
113
114
|
'FormControl-checkbox-wrap',
|
|
114
115
|
'FormControl-error',
|
|
115
116
|
'FormControl-horizontalGroup',
|
|
@@ -139,6 +140,7 @@ const classNames = new Set([
|
|
|
139
140
|
'FormControl-monospace',
|
|
140
141
|
'FormControl-radio',
|
|
141
142
|
'FormControl-radio-group-wrap',
|
|
143
|
+
'FormControl-radio-labelWrap',
|
|
142
144
|
'FormControl-radio-wrap',
|
|
143
145
|
'FormControl-select',
|
|
144
146
|
'FormControl-select-wrap',
|
|
@@ -246,10 +248,17 @@ const classNames = new Set([
|
|
|
246
248
|
'Overlay-titleWrap',
|
|
247
249
|
'Popover',
|
|
248
250
|
'Popover-message',
|
|
251
|
+
'Popover-message--bottom',
|
|
249
252
|
'Popover-message--bottom-left',
|
|
250
253
|
'Popover-message--bottom-right',
|
|
251
254
|
'Popover-message--large',
|
|
255
|
+
'Popover-message--left',
|
|
256
|
+
'Popover-message--left-bottom',
|
|
257
|
+
'Popover-message--left-top',
|
|
252
258
|
'Popover-message--no-caret',
|
|
259
|
+
'Popover-message--right',
|
|
260
|
+
'Popover-message--right-bottom',
|
|
261
|
+
'Popover-message--right-top',
|
|
253
262
|
'Popover-message--top-left',
|
|
254
263
|
'Popover-message--top-right',
|
|
255
264
|
'Progress',
|