@primer/view-components 0.35.0-rc.300b5a03 → 0.35.0-rc.5665bbca
Sign up to get free protection for your applications and to get access to all the features.
- package/app/assets/javascripts/{app/components → components}/primer/primer.d.ts +3 -3
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- 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/select_panel_element.js +7 -1
- package/app/components/primer/alpha/text_field.css +1 -1
- package/app/components/primer/primer.js +3 -3
- package/package.json +2 -2
- package/static/arguments.json +20 -2
- package/static/constants.json +5 -0
- package/static/info_arch.json +57 -3
- package/static/previews.json +26 -0
- package/app/components/primer/alpha/action_bar_element.d.ts +0 -17
- package/app/components/primer/alpha/action_list.d.ts +0 -16
- package/app/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -42
- package/app/components/primer/alpha/dropdown/menu.d.ts +0 -1
- package/app/components/primer/alpha/dropdown.d.ts +0 -1
- package/app/components/primer/alpha/image_crop.d.ts +0 -1
- package/app/components/primer/alpha/modal_dialog.d.ts +0 -18
- package/app/components/primer/alpha/segmented_control.d.ts +0 -12
- package/app/components/primer/alpha/select_panel_element.d.ts +0 -63
- package/app/components/primer/alpha/tab_container.d.ts +0 -1
- package/app/components/primer/alpha/toggle_switch.d.ts +0 -34
- package/app/components/primer/alpha/tool_tip.d.ts +0 -27
- package/app/components/primer/alpha/x_banner.d.ts +0 -18
- package/app/components/primer/anchored_position.d.ts +0 -27
- package/app/components/primer/aria_live.d.ts +0 -8
- package/app/components/primer/beta/auto_complete/auto_complete.d.ts +0 -1
- package/app/components/primer/beta/clipboard_copy.d.ts +0 -1
- package/app/components/primer/beta/nav_list.d.ts +0 -20
- package/app/components/primer/beta/nav_list_group_element.d.ts +0 -19
- package/app/components/primer/beta/relative_time.d.ts +0 -1
- package/app/components/primer/dialog_helper.d.ts +0 -15
- package/app/components/primer/focus_group.d.ts +0 -19
- package/app/components/primer/primer.d.ts +0 -28
- package/app/components/primer/scrollable_region.d.ts +0 -13
- package/app/components/primer/shared_events.d.ts +0 -11
- package/lib/primer/forms/primer_multi_input.js +0 -44
- package/lib/primer/forms/primer_text_field.js +0 -119
- package/lib/primer/forms/toggle_switch_input.js +0 -34
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/action_bar_element.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/action_list.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/action_menu/action_menu_element.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown/menu.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/image_crop.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/modal_dialog.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/segmented_control.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/select_panel_element.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/tab_container.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/toggle_switch.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/tool_tip.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/alpha/x_banner.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/anchored_position.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/aria_live.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/beta/auto_complete/auto_complete.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/beta/clipboard_copy.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/beta/nav_list.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/beta/nav_list_group_element.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/beta/relative_time.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/dialog_helper.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/focus_group.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/scrollable_region.d.ts +0 -0
- /package/app/assets/javascripts/{app/components → components}/primer/shared_events.d.ts +0 -0
@@ -145,7 +145,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
|
|
145
145
|
updateAnchorPosition() {
|
146
146
|
// If the selectPanel is removed from the screen on resize close the dialog
|
147
147
|
if (this && this.offsetParent === null) {
|
148
|
-
this.
|
148
|
+
this.hide();
|
149
149
|
}
|
150
150
|
if (this.invokerElement) {
|
151
151
|
const { top, left } = getAnchoredPosition(this.dialog, this.invokerElement, {
|
@@ -254,6 +254,12 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
|
|
254
254
|
// Remove data-ready so it can be set the next time the panel is opened
|
255
255
|
this.dialog.removeAttribute('data-ready');
|
256
256
|
this.invokerElement?.setAttribute('aria-expanded', 'false');
|
257
|
+
// When we close the dialog, clear the filter input
|
258
|
+
const fireSearchEvent = this.filterInputTextField.value.length > 0;
|
259
|
+
this.filterInputTextField.value = '';
|
260
|
+
if (fireSearchEvent) {
|
261
|
+
this.filterInputTextField.dispatchEvent(new Event('input'));
|
262
|
+
}
|
257
263
|
this.dispatchEvent(new CustomEvent('panelClosed', {
|
258
264
|
detail: { panel: this },
|
259
265
|
bubbles: true,
|
@@ -1 +1 @@
|
|
1
|
-
.FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--fgColor-default);font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);line-height:var(--text-body-lineHeight-medium)}.FormControl-caption{color:var(--fgColor-muted);font-weight:var(--text-caption-weight);margin-bottom:0}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size);line-height:var(--text-caption-lineHeight)}.FormControl-inlineValidation{color:var(--control-borderColor-danger);display:flex;font-weight:var(--base-text-weight-semibold);fill:var(--control-borderColor-danger);align-items:flex-start;flex-direction:row;gap:var(--base-size-4)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--success{color:var(--control-borderColor-success);fill:var(--control-borderColor-success)}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16)}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:.5rem}.FormControl-horizontalGroup{column-gap:.5rem;display:flex}.FormControl-input,.FormControl-select,.FormControl-textarea{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset);color:var(--fgColor-default)}[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea){background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;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);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}.FormControl-input,.FormControl-select,.FormControl-textarea{border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);line-height:var(--text-body-lineHeight-medium);padding-block:calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));padding-inline:var(--control-medium-paddingInline-condensed);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}[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){font-size:var(--text-body-size-small);height:var(--control-small-size);padding-block:var(--control-small-paddingBlock);padding-inline:var(--control-small-paddingInline-normal)}.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-block:var(--control-large-paddingBlock);padding-inline:var(--control-large-paddingInline-normal)}.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{align-items:flex-start;display:flex;gap:var(--base-size-16)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--fgColor-muted);display:block;height:var(--base-size-16);left:var(--base-size-8);pointer-events:none;position:absolute;top:var(--base-size-8);width:var(--base-size-16)}:is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small);color:var(--fgColor-muted);cursor:pointer;display:grid;height:var(--control-xsmall-size);justify-content:center;padding:0;position:absolute;right:var(--base-size-4);top:var(--base-size-4);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size);z-index:4}: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{background:var(--borderColor-default);content:"";display:block;height:var(--base-size-16);left:calc(var(--base-size-4)*-1);position:absolute;top:calc((var(--control-xsmall-size) - var(--base-size-16))/2);width:var(--borderWidth-thin)}:is(:is(.FormControl-input-wrap .FormControl-input-trailingAction):after){content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){:is(.FormControl-input-wrap .FormControl-input-trailingAction):after{min-height:var(--control-minTarget-coarse);min-width: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--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{left:calc(var(--control-medium-paddingInline-condensed) - .125rem);top:calc(var(--control-medium-paddingInline-condensed) - .125rem)}.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{height:calc(var(--control-small-size) - var(--base-size-8));width: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{left:var(--control-medium-paddingInline-normal);top: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--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{height:var(--control-small-size);right:calc(var(--control-medium-paddingInline-condensed) - .125rem);top:calc(var(--control-medium-paddingInline-condensed) - .125rem);width:var(--control-small-size)}:is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction):before{height:var(--base-size-20);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16)}.FormControl-select-wrap:after{background-color:var(--bgColor-neutral-emphasis);content:"";grid-column:2;grid-row:1;height:var(--base-size-16);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJtNC40MjcgOS40MjcgMy4zOTYgMy4zOTZhLjI1LjI1IDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3TTQuNDIzIDYuNDcgNy44MiAzLjA3MmEuMjUuMjUgMCAwIDEgLjM1NCAwTDExLjU3IDYuNDdhLjI1LjI1IDAgMCAxLS4xNzcuNDI3SDQuNmEuMjUuMjUgMCAwIDEtLjE3Ny0uNDI3Ii8+PC9zdmc+");mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJtNC40MjcgOS40MjcgMy4zOTYgMy4zOTZhLjI1LjI1IDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3TTQuNDIzIDYuNDcgNy44MiAzLjA3MmEuMjUuMjUgMCAwIDEgLjM1NCAwTDExLjU3IDYuNDdhLjI1LjI1IDAgMCAxLS4xNzcuNDI3SDQuNmEuMjUuMjUgMCAwIDEtLjE3Ny0uNDI3Ii8+PC9zdmc+");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4);place-self:center end;pointer-events:none;width:var(--base-size-16)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;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;gap:var(--base-size-8);grid-template-columns:min-content auto}:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap,:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .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{border:0;margin:0;padding:0}input[type=checkbox].FormControl-checkbox{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset);color:var(--fgColor-default)}input.FormControl-checkbox[type=checkbox][disabled]{background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}input.FormControl-checkbox[type=checkbox][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}input.FormControl-checkbox[type=checkbox][invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-small);cursor:pointer;display:grid;height:var(--base-size-16);margin:.125rem 0 0;place-content:center;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16)}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--control-checked-fgColor-rest);clip-path:inset(var(--base-size-16) 0 0 0);content:"";height:var(--base-size-16);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:75%;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16)}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}}:is(input.FormControl-checkbox[type=checkbox]:after){content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}:is(input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}input.FormControl-checkbox[type=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) 0ms}input.FormControl-checkbox[type=checkbox]:checked:before{transition:visibility 0s linear 0s;visibility:visible}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:checked:before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}}input.FormControl-checkbox[type=checkbox]:checked:disabled{background-color:var(--control-fgColor-disabled);border-color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--control-checked-fgColor-rest)}@media (forced-colors:active){input.FormControl-checkbox[type=checkbox]:checked{background-color:canvastext;border-color:canvastext}}input.FormControl-checkbox[type=checkbox]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}input[type=radio].FormControl-radio{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset);color:var(--fgColor-default)}input.FormControl-radio[type=radio][disabled]{background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}input.FormControl-radio[type=radio][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}input.FormControl-radio[type=radio][invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-full);cursor:pointer;height:var(--base-size-16);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16)}:is(input.FormControl-radio[type=radio]:after){content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}:is(input.FormControl-radio[type=radio][disabled]~.FormControl-radio-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:checked{border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));border-width:var(--base-size-4)}input.FormControl-radio[type=radio]:checked:disabled,input.FormControl-radio[type=radio][disabled]:checked{border-color:var(--control-fgColor-disabled);cursor:not-allowed}:is(:is(input.FormControl-radio[type=radio][disabled]:checked,input.FormControl-radio[type=radio]:checked:disabled)~.FormControl-radio-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}@media (forced-colors:active){input[type=radio].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{color:var(--fgColor-default);font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);line-height:var(--text-body-lineHeight-medium)}.FormControl-caption{color:var(--fgColor-muted);font-weight:var(--text-caption-weight);margin-bottom:0}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size);line-height:var(--text-caption-lineHeight)}.FormControl-inlineValidation{color:var(--control-borderColor-danger);display:flex;font-weight:var(--base-text-weight-semibold);fill:var(--control-borderColor-danger);align-items:flex-start;flex-direction:row;gap:var(--base-size-4)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--success{color:var(--control-borderColor-success);fill:var(--control-borderColor-success)}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16)}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:.5rem}.FormControl-horizontalGroup{column-gap:.5rem;display:flex}.FormControl-input,.FormControl-select,.FormControl-textarea{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset);color:var(--fgColor-default)}[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea){background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;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);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}.FormControl-input,.FormControl-select,.FormControl-textarea{border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);line-height:var(--text-body-lineHeight-medium);padding-block:calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));padding-inline:var(--control-medium-paddingInline-condensed);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}[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){font-size:var(--text-body-size-small);height:var(--control-small-size);padding-block:var(--control-small-paddingBlock);padding-inline:var(--control-small-paddingInline-normal)}.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-block:var(--control-large-paddingBlock);padding-inline:var(--control-large-paddingInline-normal)}.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{align-items:flex-start;display:flex;gap:var(--base-size-16)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--fgColor-muted);display:block;height:var(--base-size-16);left:var(--base-size-8);pointer-events:none;position:absolute;top:var(--base-size-8);width:var(--base-size-16)}:is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small);color:var(--fgColor-muted);cursor:pointer;display:grid;height:var(--control-xsmall-size);justify-content:center;padding:0;position:absolute;right:var(--base-size-4);top:var(--base-size-4);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size);z-index:4}: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{background:var(--borderColor-default);content:"";display:block;height:var(--base-size-16);left:calc(var(--base-size-4)*-1);position:absolute;top:calc((var(--control-xsmall-size) - var(--base-size-16))/2);width:var(--borderWidth-thin)}:is(:is(.FormControl-input-wrap .FormControl-input-trailingAction):after){content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){:is(.FormControl-input-wrap .FormControl-input-trailingAction):after{min-height:var(--control-minTarget-coarse);min-width: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--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{left:calc(var(--control-medium-paddingInline-condensed) - .125rem);top:calc(var(--control-medium-paddingInline-condensed) - .125rem)}.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{height:calc(var(--control-small-size) - var(--base-size-8));width: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{left:var(--control-medium-paddingInline-normal);top: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--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{height:var(--control-small-size);right:calc(var(--control-medium-paddingInline-condensed) - .125rem);top:calc(var(--control-medium-paddingInline-condensed) - .125rem);width:var(--control-small-size)}:is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction):before{height:var(--base-size-20);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16)}.FormControl-select-wrap:after{background-color:var(--bgColor-neutral-emphasis);content:"";grid-column:2;grid-row:1;height:var(--base-size-16);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJtNC40MjcgOS40MjcgMy4zOTYgMy4zOTZhLjI1LjI1IDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3TTQuNDIzIDYuNDcgNy44MiAzLjA3MmEuMjUuMjUgMCAwIDEgLjM1NCAwTDExLjU3IDYuNDdhLjI1LjI1IDAgMCAxLS4xNzcuNDI3SDQuNmEuMjUuMjUgMCAwIDEtLjE3Ny0uNDI3Ii8+PC9zdmc+");mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJtNC40MjcgOS40MjcgMy4zOTYgMy4zOTZhLjI1LjI1IDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3TTQuNDIzIDYuNDcgNy44MiAzLjA3MmEuMjUuMjUgMCAwIDEgLjM1NCAwTDExLjU3IDYuNDdhLjI1LjI1IDAgMCAxLS4xNzcuNDI3SDQuNmEuMjUuMjUgMCAwIDEtLjE3Ny0uNDI3Ii8+PC9zdmc+");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4);place-self:center end;pointer-events:none;width:var(--base-size-16)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;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;gap:var(--base-size-8);grid-template-columns:min-content auto}:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap,:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .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{border:0;margin:0;padding:0}input[type=checkbox].FormControl-checkbox{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset);color:var(--fgColor-default)}input.FormControl-checkbox[type=checkbox][disabled]{background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}input.FormControl-checkbox[type=checkbox][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}input.FormControl-checkbox[type=checkbox][invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-small);cursor:pointer;display:grid;height:var(--base-size-16);margin:.125rem 0 0;place-content:center;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16)}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--control-checked-fgColor-rest);clip-path:inset(var(--base-size-16) 0 0 0);content:"";height:var(--base-size-16);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:75%;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16)}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}}:is(input.FormControl-checkbox[type=checkbox]:after){content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}:is(input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}input.FormControl-checkbox[type=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}input.FormControl-checkbox[type=checkbox]:checked:before{transition:visibility 0s linear 0s;visibility:visible}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:checked:before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}}input.FormControl-checkbox[type=checkbox]:checked:disabled{background-color:var(--control-fgColor-disabled);border-color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--control-checked-fgColor-rest)}@media (forced-colors:active){input.FormControl-checkbox[type=checkbox]:checked{background-color:canvastext;border-color:canvastext}}input.FormControl-checkbox[type=checkbox]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}input[type=radio].FormControl-radio{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset);color:var(--fgColor-default)}input.FormControl-radio[type=radio][disabled]{background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}input.FormControl-radio[type=radio][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}input.FormControl-radio[type=radio][invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-full);cursor:pointer;height:var(--base-size-16);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16)}:is(input.FormControl-radio[type=radio]:after){content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}:is(input.FormControl-radio[type=radio][disabled]~.FormControl-radio-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:checked{border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));border-width:var(--base-size-4)}input.FormControl-radio[type=radio]:checked:disabled,input.FormControl-radio[type=radio][disabled]:checked{border-color:var(--control-fgColor-disabled);cursor:not-allowed}:is(:is(input.FormControl-radio[type=radio][disabled]:checked,input.FormControl-radio[type=radio]:checked:disabled)~.FormControl-radio-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}@media (forced-colors:active){input[type=radio].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)}}
|
@@ -21,8 +21,8 @@ import './beta/auto_complete/auto_complete';
|
|
21
21
|
import './beta/clipboard_copy';
|
22
22
|
import './beta/relative_time';
|
23
23
|
import './alpha/tab_container';
|
24
|
-
import '
|
25
|
-
import '
|
26
|
-
import '
|
24
|
+
import '../../lib/primer/forms/primer_multi_input';
|
25
|
+
import '../../lib/primer/forms/primer_text_field';
|
26
|
+
import '../../lib/primer/forms/toggle_switch_input';
|
27
27
|
import './alpha/action_menu/action_menu_element';
|
28
28
|
import './alpha/select_panel_element';
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@primer/view-components",
|
3
|
-
"version": "0.35.0-rc.
|
3
|
+
"version": "0.35.0-rc.5665bbca",
|
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",
|
@@ -84,7 +84,7 @@
|
|
84
84
|
"postcss": "^8.4.16",
|
85
85
|
"postcss-cli": "^11.0.0",
|
86
86
|
"postcss-import": "^16.0.0",
|
87
|
-
"postcss-mixins": "^
|
87
|
+
"postcss-mixins": "^11.0.1",
|
88
88
|
"postcss-preset-env": "^10.0.2",
|
89
89
|
"prettier": "^3.3.2",
|
90
90
|
"rollup": "^2.79.1",
|
package/static/arguments.json
CHANGED
@@ -108,7 +108,7 @@
|
|
108
108
|
"name": "aria_selection_variant",
|
109
109
|
"type": "Symbol",
|
110
110
|
"default": "`:checked`",
|
111
|
-
"description": "Specifies which aria selection to use.
|
111
|
+
"description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
|
112
112
|
},
|
113
113
|
{
|
114
114
|
"name": "form_arguments",
|
@@ -451,7 +451,7 @@
|
|
451
451
|
"name": "aria_selection_variant",
|
452
452
|
"type": "Symbol",
|
453
453
|
"default": "`:checked`",
|
454
|
-
"description": "Specifies which aria selection to use.
|
454
|
+
"description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
|
455
455
|
},
|
456
456
|
{
|
457
457
|
"name": "form_arguments",
|
@@ -2468,6 +2468,24 @@
|
|
2468
2468
|
"default": "`:outside_bottom`",
|
2469
2469
|
"description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
|
2470
2470
|
},
|
2471
|
+
{
|
2472
|
+
"name": "loading_label",
|
2473
|
+
"type": "String",
|
2474
|
+
"default": "`\"Loading content...\"`",
|
2475
|
+
"description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
|
2476
|
+
},
|
2477
|
+
{
|
2478
|
+
"name": "loading_description",
|
2479
|
+
"type": "String",
|
2480
|
+
"default": "`nil`",
|
2481
|
+
"description": "The description to use when the panel is loading. If not provided, no description will be used."
|
2482
|
+
},
|
2483
|
+
{
|
2484
|
+
"name": "banner_scheme",
|
2485
|
+
"type": "Symbol",
|
2486
|
+
"default": "`:danger`",
|
2487
|
+
"description": "The scheme for the error banner One of `:danger` or `:warning`."
|
2488
|
+
},
|
2471
2489
|
{
|
2472
2490
|
"name": "system_arguments",
|
2473
2491
|
"type": "Hash",
|
package/static/constants.json
CHANGED
@@ -598,6 +598,11 @@
|
|
598
598
|
"Primer::Alpha::Select": {
|
599
599
|
},
|
600
600
|
"Primer::Alpha::SelectPanel": {
|
601
|
+
"BANNER_SCHEME_OPTIONS": [
|
602
|
+
"danger",
|
603
|
+
"warning"
|
604
|
+
],
|
605
|
+
"DEFAULT_BANNER_SCHEME": "danger",
|
601
606
|
"DEFAULT_FETCH_STRATEGY": "remote",
|
602
607
|
"DEFAULT_PRELOAD": false,
|
603
608
|
"DEFAULT_SELECT_VARIANT": "single",
|
package/static/info_arch.json
CHANGED
@@ -250,7 +250,7 @@
|
|
250
250
|
"name": "aria_selection_variant",
|
251
251
|
"type": "Symbol",
|
252
252
|
"default": "`:checked`",
|
253
|
-
"description": "Specifies which aria selection to use.
|
253
|
+
"description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
|
254
254
|
},
|
255
255
|
{
|
256
256
|
"name": "form_arguments",
|
@@ -2102,7 +2102,7 @@
|
|
2102
2102
|
"name": "aria_selection_variant",
|
2103
2103
|
"type": "Symbol",
|
2104
2104
|
"default": "`:checked`",
|
2105
|
-
"description": "Specifies which aria selection to use.
|
2105
|
+
"description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
|
2106
2106
|
},
|
2107
2107
|
{
|
2108
2108
|
"name": "form_arguments",
|
@@ -7653,6 +7653,24 @@
|
|
7653
7653
|
"default": "`:outside_bottom`",
|
7654
7654
|
"description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
|
7655
7655
|
},
|
7656
|
+
{
|
7657
|
+
"name": "loading_label",
|
7658
|
+
"type": "String",
|
7659
|
+
"default": "`\"Loading content...\"`",
|
7660
|
+
"description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
|
7661
|
+
},
|
7662
|
+
{
|
7663
|
+
"name": "loading_description",
|
7664
|
+
"type": "String",
|
7665
|
+
"default": "`nil`",
|
7666
|
+
"description": "The description to use when the panel is loading. If not provided, no description will be used."
|
7667
|
+
},
|
7668
|
+
{
|
7669
|
+
"name": "banner_scheme",
|
7670
|
+
"type": "Symbol",
|
7671
|
+
"default": "`:danger`",
|
7672
|
+
"description": "The scheme for the error banner One of `:danger` or `:warning`."
|
7673
|
+
},
|
7656
7674
|
{
|
7657
7675
|
"name": "system_arguments",
|
7658
7676
|
"type": "Hash",
|
@@ -7753,6 +7771,16 @@
|
|
7753
7771
|
"Symbol"
|
7754
7772
|
]
|
7755
7773
|
},
|
7774
|
+
{
|
7775
|
+
"name": "banner_scheme",
|
7776
|
+
"description": "One of `:danger` or `:warning`.",
|
7777
|
+
"parameters": [
|
7778
|
+
|
7779
|
+
],
|
7780
|
+
"return_types": [
|
7781
|
+
"Symbol"
|
7782
|
+
]
|
7783
|
+
},
|
7756
7784
|
{
|
7757
7785
|
"name": "fetch_strategy",
|
7758
7786
|
"description": "One of `:eventually_local`, `:local`, or `:remote`.",
|
@@ -7885,6 +7913,32 @@
|
|
7885
7913
|
]
|
7886
7914
|
}
|
7887
7915
|
},
|
7916
|
+
{
|
7917
|
+
"preview_path": "primer/alpha/select_panel/custom_loading_label",
|
7918
|
+
"name": "custom_loading_label",
|
7919
|
+
"snapshot": "interactive",
|
7920
|
+
"skip_rules": {
|
7921
|
+
"wont_fix": [
|
7922
|
+
"region"
|
7923
|
+
],
|
7924
|
+
"will_fix": [
|
7925
|
+
"color-contrast"
|
7926
|
+
]
|
7927
|
+
}
|
7928
|
+
},
|
7929
|
+
{
|
7930
|
+
"preview_path": "primer/alpha/select_panel/custom_loading_description",
|
7931
|
+
"name": "custom_loading_description",
|
7932
|
+
"snapshot": "interactive",
|
7933
|
+
"skip_rules": {
|
7934
|
+
"wont_fix": [
|
7935
|
+
"region"
|
7936
|
+
],
|
7937
|
+
"will_fix": [
|
7938
|
+
"color-contrast"
|
7939
|
+
]
|
7940
|
+
}
|
7941
|
+
},
|
7888
7942
|
{
|
7889
7943
|
"preview_path": "primer/alpha/select_panel/local_fetch_no_results",
|
7890
7944
|
"name": "local_fetch_no_results",
|
@@ -17238,6 +17292,6 @@
|
|
17238
17292
|
"component": "BaseComponent",
|
17239
17293
|
"fully_qualified_name": "Primer::BaseComponent",
|
17240
17294
|
"description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) previously used by [Primer React](https://primer.style/guides/react/system-props).\n\nUnder the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).\n\n## Responsive values\n\nTo apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.\n\nFor example:\n\n```erb\n<%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>\n Hello world\n<% end %>\n```\n\nRenders:\n\n```html\n<h1 class=\"mt-0 mt-lg-4 mt-xl-2\">Hello world</h1>\n```",
|
17241
|
-
"args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding
|
17295
|
+
"args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding top. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n### Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n### Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
|
17242
17296
|
}
|
17243
17297
|
]
|
package/static/previews.json
CHANGED
@@ -5940,6 +5940,32 @@
|
|
5940
5940
|
]
|
5941
5941
|
}
|
5942
5942
|
},
|
5943
|
+
{
|
5944
|
+
"preview_path": "primer/alpha/select_panel/custom_loading_label",
|
5945
|
+
"name": "custom_loading_label",
|
5946
|
+
"snapshot": "interactive",
|
5947
|
+
"skip_rules": {
|
5948
|
+
"wont_fix": [
|
5949
|
+
"region"
|
5950
|
+
],
|
5951
|
+
"will_fix": [
|
5952
|
+
"color-contrast"
|
5953
|
+
]
|
5954
|
+
}
|
5955
|
+
},
|
5956
|
+
{
|
5957
|
+
"preview_path": "primer/alpha/select_panel/custom_loading_description",
|
5958
|
+
"name": "custom_loading_description",
|
5959
|
+
"snapshot": "interactive",
|
5960
|
+
"skip_rules": {
|
5961
|
+
"wont_fix": [
|
5962
|
+
"region"
|
5963
|
+
],
|
5964
|
+
"will_fix": [
|
5965
|
+
"color-contrast"
|
5966
|
+
]
|
5967
|
+
}
|
5968
|
+
},
|
5943
5969
|
{
|
5944
5970
|
"preview_path": "primer/alpha/select_panel/local_fetch_no_results",
|
5945
5971
|
"name": "local_fetch_no_results",
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import { ActionMenuElement } from './action_menu/action_menu_element';
|
2
|
-
declare class ActionBarElement extends HTMLElement {
|
3
|
-
#private;
|
4
|
-
items: HTMLElement[];
|
5
|
-
itemContainer: HTMLElement;
|
6
|
-
moreMenu: ActionMenuElement;
|
7
|
-
connectedCallback(): void;
|
8
|
-
disconnectedCallback(): void;
|
9
|
-
menuItemClick(event: Event): void;
|
10
|
-
update(): void;
|
11
|
-
}
|
12
|
-
declare global {
|
13
|
-
interface Window {
|
14
|
-
ActionBarElement: typeof ActionBarElement;
|
15
|
-
}
|
16
|
-
}
|
17
|
-
export {};
|
@@ -1,16 +0,0 @@
|
|
1
|
-
export declare class ActionListTruncationObserver {
|
2
|
-
resizeObserver: ResizeObserver;
|
3
|
-
constructor(el: HTMLElement);
|
4
|
-
unobserve(el: HTMLElement): void;
|
5
|
-
update(el: HTMLElement): void;
|
6
|
-
}
|
7
|
-
export declare class ActionListElement extends HTMLElement {
|
8
|
-
#private;
|
9
|
-
connectedCallback(): void;
|
10
|
-
disconnectedCallback(): void;
|
11
|
-
}
|
12
|
-
declare global {
|
13
|
-
interface Window {
|
14
|
-
ActionListElement: typeof ActionListElement;
|
15
|
-
}
|
16
|
-
}
|
@@ -1,42 +0,0 @@
|
|
1
|
-
import '@oddbird/popover-polyfill';
|
2
|
-
import type { IncludeFragmentElement } from '@github/include-fragment-element';
|
3
|
-
type SelectVariant = 'none' | 'single' | 'multiple' | null;
|
4
|
-
type SelectedItem = {
|
5
|
-
label: string | null | undefined;
|
6
|
-
value: string | null | undefined;
|
7
|
-
element: Element;
|
8
|
-
};
|
9
|
-
export declare class ActionMenuElement extends HTMLElement {
|
10
|
-
#private;
|
11
|
-
includeFragment: IncludeFragmentElement;
|
12
|
-
get selectVariant(): SelectVariant;
|
13
|
-
set selectVariant(variant: SelectVariant);
|
14
|
-
get dynamicLabelPrefix(): string;
|
15
|
-
set dynamicLabelPrefix(value: string);
|
16
|
-
get dynamicLabel(): boolean;
|
17
|
-
set dynamicLabel(value: boolean);
|
18
|
-
get popoverElement(): HTMLElement | null;
|
19
|
-
get invokerElement(): HTMLButtonElement | null;
|
20
|
-
get invokerLabel(): HTMLElement | null;
|
21
|
-
get selectedItems(): SelectedItem[];
|
22
|
-
connectedCallback(): void;
|
23
|
-
disconnectedCallback(): void;
|
24
|
-
handleEvent(event: Event): void;
|
25
|
-
get items(): HTMLElement[];
|
26
|
-
getItemById(itemId: string): HTMLElement | null;
|
27
|
-
isItemDisabled(item: Element | null): boolean;
|
28
|
-
disableItem(item: Element | null): void;
|
29
|
-
enableItem(item: Element | null): void;
|
30
|
-
isItemHidden(item: Element | null): boolean;
|
31
|
-
hideItem(item: Element | null): void;
|
32
|
-
showItem(item: Element | null): void;
|
33
|
-
isItemChecked(item: Element | null): boolean;
|
34
|
-
checkItem(item: Element | null): void;
|
35
|
-
uncheckItem(item: Element | null): void;
|
36
|
-
}
|
37
|
-
declare global {
|
38
|
-
interface Window {
|
39
|
-
ActionMenuElement: typeof ActionMenuElement;
|
40
|
-
}
|
41
|
-
}
|
42
|
-
export {};
|
@@ -1 +0,0 @@
|
|
1
|
-
import '@github/details-menu-element';
|
@@ -1 +0,0 @@
|
|
1
|
-
import './dropdown/menu';
|
@@ -1 +0,0 @@
|
|
1
|
-
import '@github/image-crop-element';
|
@@ -1,18 +0,0 @@
|
|
1
|
-
export declare class ModalDialogElement extends HTMLElement {
|
2
|
-
#private;
|
3
|
-
openButton: HTMLButtonElement | null;
|
4
|
-
get open(): boolean;
|
5
|
-
set open(value: boolean);
|
6
|
-
get showButtons(): NodeList;
|
7
|
-
connectedCallback(): void;
|
8
|
-
show(): void;
|
9
|
-
close(closedNotCancelled?: boolean): void;
|
10
|
-
}
|
11
|
-
declare global {
|
12
|
-
interface Window {
|
13
|
-
ModalDialogElement: typeof ModalDialogElement;
|
14
|
-
}
|
15
|
-
interface HTMLElementTagNameMap {
|
16
|
-
'modal-dialog': ModalDialogElement;
|
17
|
-
}
|
18
|
-
}
|
@@ -1,12 +0,0 @@
|
|
1
|
-
declare class SegmentedControlElement extends HTMLElement {
|
2
|
-
#private;
|
3
|
-
items: HTMLElement[];
|
4
|
-
connectedCallback(): void;
|
5
|
-
select(event: Event): void;
|
6
|
-
}
|
7
|
-
declare global {
|
8
|
-
interface Window {
|
9
|
-
SegmentedControlElement: typeof SegmentedControlElement;
|
10
|
-
}
|
11
|
-
}
|
12
|
-
export {};
|
@@ -1,63 +0,0 @@
|
|
1
|
-
import { IncludeFragmentElement } from '@github/include-fragment-element';
|
2
|
-
import type { AnchorAlignment, AnchorSide } from '@primer/behaviors';
|
3
|
-
import '@oddbird/popover-polyfill';
|
4
|
-
type SelectVariant = 'none' | 'single' | 'multiple' | null;
|
5
|
-
type SelectedItem = {
|
6
|
-
label: string | null | undefined;
|
7
|
-
value: string | null | undefined;
|
8
|
-
inputName: string | null | undefined;
|
9
|
-
};
|
10
|
-
export type SelectPanelItem = HTMLLIElement;
|
11
|
-
export type FilterFn = (item: SelectPanelItem, query: string) => boolean;
|
12
|
-
export declare class SelectPanelElement extends HTMLElement {
|
13
|
-
#private;
|
14
|
-
includeFragment: IncludeFragmentElement;
|
15
|
-
dialog: HTMLDialogElement;
|
16
|
-
filterInputTextField: HTMLInputElement;
|
17
|
-
remoteInput: HTMLElement;
|
18
|
-
list: HTMLElement;
|
19
|
-
ariaLiveContainer: HTMLElement;
|
20
|
-
noResults: HTMLElement;
|
21
|
-
fragmentErrorElement: HTMLElement;
|
22
|
-
bannerErrorElement: HTMLElement;
|
23
|
-
bodySpinner: HTMLElement;
|
24
|
-
filterFn?: FilterFn;
|
25
|
-
get open(): boolean;
|
26
|
-
get selectVariant(): SelectVariant;
|
27
|
-
get ariaSelectionType(): string;
|
28
|
-
set selectVariant(variant: SelectVariant);
|
29
|
-
get dynamicLabelPrefix(): string;
|
30
|
-
get dynamicAriaLabelPrefix(): string;
|
31
|
-
set dynamicLabelPrefix(value: string);
|
32
|
-
get dynamicLabel(): boolean;
|
33
|
-
set dynamicLabel(value: boolean);
|
34
|
-
get invokerElement(): HTMLButtonElement | null;
|
35
|
-
get closeButton(): HTMLButtonElement | null;
|
36
|
-
get invokerLabel(): HTMLElement | null;
|
37
|
-
get selectedItems(): SelectedItem[];
|
38
|
-
get align(): AnchorAlignment;
|
39
|
-
get side(): AnchorSide;
|
40
|
-
updateAnchorPosition(): void;
|
41
|
-
connectedCallback(): void;
|
42
|
-
disconnectedCallback(): void;
|
43
|
-
handleEvent(event: Event): void;
|
44
|
-
show(): void;
|
45
|
-
hide(): void;
|
46
|
-
get visibleItems(): SelectPanelItem[];
|
47
|
-
get items(): SelectPanelItem[];
|
48
|
-
get focusableItem(): HTMLElement | undefined;
|
49
|
-
getItemById(itemId: string): SelectPanelItem | null;
|
50
|
-
isItemDisabled(item: SelectPanelItem | null): boolean;
|
51
|
-
disableItem(item: SelectPanelItem | null): void;
|
52
|
-
enableItem(item: SelectPanelItem | null): void;
|
53
|
-
isItemHidden(item: SelectPanelItem | null): boolean;
|
54
|
-
isItemChecked(item: SelectPanelItem | null): boolean;
|
55
|
-
checkItem(item: SelectPanelItem | null): void;
|
56
|
-
uncheckItem(item: SelectPanelItem | null): void;
|
57
|
-
}
|
58
|
-
declare global {
|
59
|
-
interface Window {
|
60
|
-
SelectPanelElement: typeof SelectPanelElement;
|
61
|
-
}
|
62
|
-
}
|
63
|
-
export {};
|
@@ -1 +0,0 @@
|
|
1
|
-
import '@github/tab-container-element';
|
@@ -1,34 +0,0 @@
|
|
1
|
-
declare class ToggleSwitchElement extends HTMLElement {
|
2
|
-
switch: HTMLElement;
|
3
|
-
loadingSpinner: HTMLElement;
|
4
|
-
errorIcon: HTMLElement;
|
5
|
-
turbo: boolean;
|
6
|
-
private toggling;
|
7
|
-
get src(): string | null;
|
8
|
-
get csrf(): string | null;
|
9
|
-
get csrfField(): string;
|
10
|
-
isRemote(): boolean;
|
11
|
-
toggle(): Promise<void>;
|
12
|
-
turnOn(): void;
|
13
|
-
turnOff(): void;
|
14
|
-
isOn(): boolean;
|
15
|
-
isOff(): boolean;
|
16
|
-
isDisabled(): boolean;
|
17
|
-
disable(): void;
|
18
|
-
enable(): void;
|
19
|
-
private performToggle;
|
20
|
-
private setLoadingState;
|
21
|
-
private setSuccessState;
|
22
|
-
private setErrorState;
|
23
|
-
private setFinishedState;
|
24
|
-
private submitForm;
|
25
|
-
}
|
26
|
-
declare global {
|
27
|
-
interface Window {
|
28
|
-
ToggleSwitchElement: typeof ToggleSwitchElement;
|
29
|
-
Turbo: {
|
30
|
-
renderStreamMessage: (message: string) => void;
|
31
|
-
};
|
32
|
-
}
|
33
|
-
}
|
34
|
-
export {};
|
@@ -1,27 +0,0 @@
|
|
1
|
-
import '@oddbird/popover-polyfill';
|
2
|
-
type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
|
3
|
-
declare class ToolTipElement extends HTMLElement {
|
4
|
-
#private;
|
5
|
-
styles(): string;
|
6
|
-
get showReason(): "focus" | "mouse";
|
7
|
-
get htmlFor(): string;
|
8
|
-
set htmlFor(value: string);
|
9
|
-
get type(): 'description' | 'label';
|
10
|
-
set type(value: 'description' | 'label');
|
11
|
-
get direction(): Direction;
|
12
|
-
set direction(value: Direction);
|
13
|
-
get control(): HTMLElement | null;
|
14
|
-
set hiddenFromView(value: true | false);
|
15
|
-
get hiddenFromView(): true | false;
|
16
|
-
connectedCallback(): void;
|
17
|
-
disconnectedCallback(): void;
|
18
|
-
handleEvent(event: Event): Promise<void>;
|
19
|
-
static observedAttributes: string[];
|
20
|
-
attributeChangedCallback(name: string): void;
|
21
|
-
}
|
22
|
-
declare global {
|
23
|
-
interface Window {
|
24
|
-
ToolTipElement: typeof ToolTipElement;
|
25
|
-
}
|
26
|
-
}
|
27
|
-
export {};
|