@department-of-veterans-affairs/component-library 44.0.0 → 46.0.0

package/dist/components/va-button-pair.js

@@ -1 +1 @@
-import{proxyCustomElement,HTMLElement,createEvent,h,Host}from"@stencil/core/internal/client";import{d as defineCustomElement$3}from"./va-button2.js";import{d as defineCustomElement$2}from"./va-icon2.js";const vaButtonPairCss='.usa-button-group{margin-bottom:0;margin-top:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style-type:none;margin-left:-0.25rem;margin-right:-0.25rem;padding-left:0}@media all and (min-width: 30em){.usa-button-group{-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex-direction:row;flex-direction:row}}.usa-button-group .usa-button-group{height:100%}@media all and (min-width: 30em){.usa-button-group .usa-button-group .usa-button-group__item{margin-top:0;margin-bottom:0}}.usa-button-group .usa-button-group--segmented .usa-button-group__item{margin-top:0;margin-bottom:0}.usa-button-group__item{margin:0.25rem}@media all and (min-width: 30em){.usa-button-group__item:last-child{margin-right:0}}.usa-button-group__item .usa-button{height:100%;margin-left:0;margin-right:0}.usa-button-group--segmented{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;margin-left:0;margin-right:0}@media all and (min-width: 30em){.usa-button-group--segmented{-ms-flex-pack:start;justify-content:flex-start}}.usa-button-group--segmented .usa-button{position:relative;width:calc(100% + 2px)}@media all and (min-width: 30em){.usa-button-group--segmented .usa-button{width:auto}}.usa-button-group--segmented .usa-button:hover,.usa-button-group--segmented .usa-button:active{z-index:2}.usa-button-group--segmented .usa-button:focus{z-index:3}.usa-button-group--segmented .usa-button-group__item{margin-left:0;margin-right:0;width:100%}@media all and (min-width: 30em){.usa-button-group--segmented .usa-button-group__item{width:auto}}.usa-button-group--segmented .usa-button-group__item:first-child>.usa-button{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.usa-button-group--segmented .usa-button-group__item:last-child>.usa-button{border-top-left-radius:0;border-bottom-left-radius:0;margin-right:0;margin-left:-2px;width:calc(100% + 2px)}@media all and (min-width: 30em){.usa-button-group--segmented .usa-button-group__item:last-child>.usa-button{margin-left:-1px;width:auto}}.usa-button-group--segmented .usa-button-group__item:where(:not(:first-child):not(:last-child))>.usa-button{border-radius:0;margin-right:-1px;margin-left:-1px}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button::before{border-right:1px solid #1a4480;bottom:0;content:"";display:block;height:100%;position:absolute;right:1px;top:0;width:1px;z-index:3}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--secondary::before{border-right-color:#b50909}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--accent-cool::before{border-right-color:#28a0cb}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--base::before{border-right-color:#565c65}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) [class*=usa-button]:disabled::before,.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) [class*=usa-button][aria-disabled=true]::before{border-right-color:white}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button:active::before,.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--outline::before{display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(:not([uswds=false])) va-button::part(button){margin-right:0}@media (max-width: 480px){:host(:not([uswds=false])) va-button{display:block}.usa-button-group{margin:0 auto;width:100%}}:host([uswds=false]) va-button{-ms-flex:1 1 auto;flex:1 1 auto}:host([uswds=false]){max-width:560px}:host([uswds=false]) va-button::part(button){max-width:280px;width:100%}@media (min-width: 481px){:host([continue]:not([continue=false])[uswds=false]){-ms-flex-direction:row;flex-direction:row}:host([continue]:not([continue=false])[uswds=false]) va-button+va-button::part(button){margin-left:12px;margin-right:0}}@media (min-width: 481px){:host([uswds=false]){-ms-flex-direction:row;flex-direction:row;max-width:420px}:host([uswds=false]) va-button+va-button::part(button){margin-left:12px;margin-right:0}:host([uswds=false]) va-button::part(button){max-width:210px}}@media (max-width: 481px){:host([uswds=false]){width:100%}:host([continue]:not([continue=false])[uswds=false]) va-button::part(button){max-width:280px}}@media (max-width: 320px){:host([uswds=false]){margin:0 auto;max-width:280px}:host([continue]:not([continue=false])[uswds=false]) va-button::part(button){max-width:280px}}',VaButtonPair$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.primaryClick=createEvent(this,"primaryClick",7),this.secondaryClick=createEvent(this,"secondaryClick",7),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.handlePrimaryClick=t=>{this.primaryClick.emit(t)},this.handleSecondaryClick=t=>{this.secondaryClick.emit(t)},this.continue=!1,this.disableAnalytics=!1,this.primaryLabel=void 0,this.secondaryLabel=void 0,this.submit=void 0,this.update=!1,this.uswds=!0}handleButtonAnalytics(t){var e;if("va-button-pair"!==t.detail.componentName&&(t.stopPropagation(),!this.disableAnalytics)){const a={componentName:"va-button-pair",action:"click",details:Object.assign({type:null,label:null},null===(e=t.detail)||void 0===e?void 0:e.details)};this.componentLibraryAnalytics.emit(a)}}render(){const{continue:t,disableAnalytics:e,handlePrimaryClick:a,handleSecondaryClick:o,primaryLabel:s,secondaryLabel:n,submit:i,update:u,uswds:r}=this;return t?r?h(Host,null,h("ul",{class:"usa-button-group"},h("li",{class:"usa-button-group__item"},h("va-button",{back:!0,"disable-analytics":e,label:n,onClick:o})),h("li",{class:"usa-button-group__item"},h("va-button",{continue:!0,"disable-analytics":e,label:s,onClick:a,submit:i})))):h(Host,null,h("va-button",{back:!0,"disable-analytics":e,label:n,onClick:o,uswds:!1,class:"uswds-false"}),h("va-button",{continue:!0,"disable-analytics":e,label:s,onClick:a,submit:i,uswds:!1,class:"uswds-false"})):u||!t?r?h(Host,null,h("ul",{class:"usa-button-group"},h("li",{class:"usa-button-group__item"},h("va-button",{"disable-analytics":e,label:s,onClick:a,text:u?"Update":"Yes",submit:i})),h("li",{class:"usa-button-group__item"},h("va-button",{"disable-analytics":e,label:n,onClick:o,secondary:!0,text:u?"Cancel":"No"})))):h(Host,null,h("va-button",{"disable-analytics":e,label:s,onClick:a,text:u?"Update":"Yes",submit:i,uswds:!1,class:"uswds-false"}),h("va-button",{"disable-analytics":e,label:n,onClick:o,secondary:!0,text:u?"Cancel":"No",uswds:!1,class:"uswds-false"})):void 0}static get style(){return vaButtonPairCss}},[1,"va-button-pair",{continue:[4],disableAnalytics:[4,"disable-analytics"],primaryLabel:[1,"primary-label"],secondaryLabel:[1,"secondary-label"],submit:[1],update:[4],uswds:[4]},[[0,"component-library-analytics","handleButtonAnalytics"]]]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-button-pair","va-button","va-icon"].forEach((t=>{switch(t){case"va-button-pair":customElements.get(t)||customElements.define(t,VaButtonPair$1);break;case"va-button":customElements.get(t)||defineCustomElement$3();break;case"va-icon":customElements.get(t)||defineCustomElement$2()}}))}const VaButtonPair=VaButtonPair$1,defineCustomElement=defineCustomElement$1;export{VaButtonPair,defineCustomElement};
+import{proxyCustomElement,HTMLElement,createEvent,h,Host}from"@stencil/core/internal/client";import{d as defineCustomElement$3}from"./va-button2.js";import{d as defineCustomElement$2}from"./va-icon2.js";const vaButtonPairCss='.usa-button-group{margin-bottom:0;margin-top:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style-type:none;margin-left:-0.25rem;margin-right:-0.25rem;padding-left:0}@media all and (min-width: 30em){.usa-button-group{-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex-direction:row;flex-direction:row}}.usa-button-group .usa-button-group{height:100%}@media all and (min-width: 30em){.usa-button-group .usa-button-group .usa-button-group__item{margin-top:0;margin-bottom:0}}.usa-button-group .usa-button-group--segmented .usa-button-group__item{margin-top:0;margin-bottom:0}.usa-button-group__item{margin:0.25rem}@media all and (min-width: 30em){.usa-button-group__item:last-child{margin-right:0}}.usa-button-group__item .usa-button{height:100%;margin-left:0;margin-right:0}.usa-button-group--segmented{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;margin-left:0;margin-right:0}@media all and (min-width: 30em){.usa-button-group--segmented{-ms-flex-pack:start;justify-content:flex-start}}.usa-button-group--segmented .usa-button{position:relative;width:calc(100% + 2px)}@media all and (min-width: 30em){.usa-button-group--segmented .usa-button{width:auto}}.usa-button-group--segmented .usa-button:hover,.usa-button-group--segmented .usa-button:active{z-index:2}.usa-button-group--segmented .usa-button:focus{z-index:3}.usa-button-group--segmented .usa-button-group__item{margin-left:0;margin-right:0;width:100%}@media all and (min-width: 30em){.usa-button-group--segmented .usa-button-group__item{width:auto}}.usa-button-group--segmented .usa-button-group__item:first-child>.usa-button{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.usa-button-group--segmented .usa-button-group__item:last-child>.usa-button{border-top-left-radius:0;border-bottom-left-radius:0;margin-right:0;margin-left:-2px;width:calc(100% + 2px)}@media all and (min-width: 30em){.usa-button-group--segmented .usa-button-group__item:last-child>.usa-button{margin-left:-1px;width:auto}}.usa-button-group--segmented .usa-button-group__item:where(:not(:first-child):not(:last-child))>.usa-button{border-radius:0;margin-right:-1px;margin-left:-1px}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button::before{border-right:1px solid #1a4480;bottom:0;content:"";display:block;height:100%;position:absolute;right:1px;top:0;width:1px;z-index:3}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--secondary::before{border-right-color:#b50909}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--accent-cool::before{border-right-color:#28a0cb}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--base::before{border-right-color:#565c65}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) [class*=usa-button]:disabled::before,.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) [class*=usa-button][aria-disabled=true]::before{border-right-color:white}.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button:active::before,.usa-button-group--segmented .usa-button-group__item:where(:not(:last-child)) .usa-button--outline::before{display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host va-button::part(button){margin-right:0}@media (max-width: 480px){:host va-button{display:block}.usa-button-group{margin:0 auto;width:100%}}',VaButtonPair$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.primaryClick=createEvent(this,"primaryClick",7),this.secondaryClick=createEvent(this,"secondaryClick",7),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.handlePrimaryClick=t=>{this.primaryClick.emit(t)},this.handleSecondaryClick=t=>{this.secondaryClick.emit(t)},this.getLeftButtonText=()=>{let t;return t=this.leftButtonText?this.leftButtonText:this.update?"Update":"Yes",t},this.getRightButtonText=()=>{let t;return t=this.rightButtonText?this.rightButtonText:this.update?"Cancel":"No",t},this.continue=!1,this.disableAnalytics=!1,this.primaryLabel=void 0,this.secondaryLabel=void 0,this.submit=void 0,this.update=!1,this.leftButtonText=void 0,this.rightButtonText=void 0}handleButtonAnalytics(t){var e;if("va-button-pair"!==t.detail.componentName&&(t.stopPropagation(),!this.disableAnalytics)){const o={componentName:"va-button-pair",action:"click",details:Object.assign({type:null,label:null},null===(e=t.detail)||void 0===e?void 0:e.details)};this.componentLibraryAnalytics.emit(o)}}render(){const{continue:t,disableAnalytics:e,handlePrimaryClick:o,handleSecondaryClick:a,primaryLabel:n,secondaryLabel:i,submit:u}=this;return h(Host,null,t?h("ul",{class:"usa-button-group"},h("li",{class:"usa-button-group__item"},h("va-button",{back:!0,"disable-analytics":e,label:i,onClick:a})),h("li",{class:"usa-button-group__item"},h("va-button",{continue:!0,"disable-analytics":e,label:n,onClick:o,submit:u}))):h("ul",{class:"usa-button-group"},h("li",{class:"usa-button-group__item"},h("va-button",{"disable-analytics":e,label:n,onClick:o,text:this.getLeftButtonText(),submit:u})),h("li",{class:"usa-button-group__item"},h("va-button",{"disable-analytics":e,label:i,onClick:a,secondary:!0,text:this.getRightButtonText()}))))}static get style(){return vaButtonPairCss}},[1,"va-button-pair",{continue:[4],disableAnalytics:[4,"disable-analytics"],primaryLabel:[1,"primary-label"],secondaryLabel:[1,"secondary-label"],submit:[1],update:[4],leftButtonText:[1,"left-button-text"],rightButtonText:[1,"right-button-text"]},[[0,"component-library-analytics","handleButtonAnalytics"]]]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-button-pair","va-button","va-icon"].forEach((t=>{switch(t){case"va-button-pair":customElements.get(t)||customElements.define(t,VaButtonPair$1);break;case"va-button":customElements.get(t)||defineCustomElement$3();break;case"va-icon":customElements.get(t)||defineCustomElement$2()}}))}const VaButtonPair=VaButtonPair$1,defineCustomElement=defineCustomElement$1;export{VaButtonPair,defineCustomElement};

package/dist/components/va-button2.js

@@ -1 +1 @@
-import{proxyCustomElement,HTMLElement,createEvent,h,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";import{d as defineCustomElement$1}from"./va-icon2.js";const vaButtonCss="button:not([disabled]):focus,:host([uswds='false']) button:not([disabled]):active,select:not([disabled]):focus,a:not([disabled]):focus,h1:focus,input:not([disabled]):focus,textarea:not([disabled]):focus,#form-question [role='option']:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:5px;color:var(--vads-button-color-text-primary-alt-on-light);cursor:pointer;display:inline-block;font-family:var(--font-source-sans);font-size:1rem;font-weight:700;line-height:1;padding:0.625rem 1.25rem;text-align:center;text-decoration:none}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-button{font-family:Source Sans Pro Web, \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;font-size:1.06rem;line-height:0.9;color:white;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex-align:center;align-items:center;border:0;border-radius:0.25rem;cursor:pointer;-webkit-column-gap:0.5rem;-moz-column-gap:0.5rem;column-gap:0.5rem;display:-ms-inline-flexbox;display:inline-flex;font-weight:700;-ms-flex-pack:center;justify-content:center;margin-right:0.5rem;padding:0.75rem 1.25rem;text-align:center;text-decoration:none;width:100%}@media all and (min-width: 30em){.usa-button{width:auto}}.usa-button:visited{color:white}.usa-button:hover,.usa-button.usa-button--hover{color:white;background-color:#1a4480;border-bottom:0;text-decoration:none}.usa-button:active,.usa-button.usa-button--active{color:white;background-color:#162e51}.usa-button:not([disabled]):focus,.usa-button:not([disabled]).usa-focus{outline-offset:0.25rem}.usa-button:disabled,.usa-button[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-button:disabled:hover,.usa-button:disabled:active,.usa-button:disabled:focus,.usa-button:disabled.usa-focus,.usa-button[aria-disabled=true]:hover,.usa-button[aria-disabled=true]:active,.usa-button[aria-disabled=true]:focus,.usa-button[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-button:disabled,.usa-button[aria-disabled=true]{border:0;color:GrayText}.usa-button:disabled:hover,.usa-button:disabled:active,.usa-button:disabled:focus,.usa-button:disabled.usa-focus,.usa-button[aria-disabled=true]:hover,.usa-button[aria-disabled=true]:active,.usa-button[aria-disabled=true]:focus,.usa-button[aria-disabled=true].usa-focus{color:GrayText}}.usa-button:disabled.usa-button--hover,.usa-button:disabled.usa-button--active,.usa-button[aria-disabled=true].usa-button--hover,.usa-button[aria-disabled=true].usa-button--active{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-button:disabled.usa-button--hover:hover,.usa-button:disabled.usa-button--hover:active,.usa-button:disabled.usa-button--hover:focus,.usa-button:disabled.usa-button--hover.usa-focus,.usa-button:disabled.usa-button--active:hover,.usa-button:disabled.usa-button--active:active,.usa-button:disabled.usa-button--active:focus,.usa-button:disabled.usa-button--active.usa-focus,.usa-button[aria-disabled=true].usa-button--hover:hover,.usa-button[aria-disabled=true].usa-button--hover:active,.usa-button[aria-disabled=true].usa-button--hover:focus,.usa-button[aria-disabled=true].usa-button--hover.usa-focus,.usa-button[aria-disabled=true].usa-button--active:hover,.usa-button[aria-disabled=true].usa-button--active:active,.usa-button[aria-disabled=true].usa-button--active:focus,.usa-button[aria-disabled=true].usa-button--active.usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-button:disabled.usa-button--hover,.usa-button:disabled.usa-button--active,.usa-button[aria-disabled=true].usa-button--hover,.usa-button[aria-disabled=true].usa-button--active{border:0;color:GrayText}.usa-button:disabled.usa-button--hover:hover,.usa-button:disabled.usa-button--hover:active,.usa-button:disabled.usa-button--hover:focus,.usa-button:disabled.usa-button--hover.usa-focus,.usa-button:disabled.usa-button--active:hover,.usa-button:disabled.usa-button--active:active,.usa-button:disabled.usa-button--active:focus,.usa-button:disabled.usa-button--active.usa-focus,.usa-button[aria-disabled=true].usa-button--hover:hover,.usa-button[aria-disabled=true].usa-button--hover:active,.usa-button[aria-disabled=true].usa-button--hover:focus,.usa-button[aria-disabled=true].usa-button--hover.usa-focus,.usa-button[aria-disabled=true].usa-button--active:hover,.usa-button[aria-disabled=true].usa-button--active:active,.usa-button[aria-disabled=true].usa-button--active:focus,.usa-button[aria-disabled=true].usa-button--active.usa-focus{color:GrayText}}@media (forced-colors: active){.usa-button:disabled:not(.usa-button--unstyled),.usa-button[aria-disabled=true]:not(.usa-button--unstyled){border:2px solid GrayText}}.usa-button .usa-icon{-ms-flex-negative:0;flex-shrink:0}@media (forced-colors: active){.usa-button:not(.usa-button--unstyled){border:2px solid transparent}}.usa-button--accent-cool{color:#1b1b1b;background-color:#00bde3}.usa-button--accent-cool:visited{color:#1b1b1b;background-color:#00bde3}.usa-button--accent-cool:hover,.usa-button--accent-cool.usa-button--hover{color:#1b1b1b;background-color:#28a0cb}.usa-button--accent-cool:active,.usa-button--accent-cool.usa-button--active{color:white;background-color:#07648d}.usa-button--accent-warm{color:#1b1b1b;background-color:#fa9441}.usa-button--accent-warm:visited{color:#1b1b1b;background-color:#fa9441}.usa-button--accent-warm:hover,.usa-button--accent-warm.usa-button--hover{color:white;background-color:#c05600}.usa-button--accent-warm:active,.usa-button--accent-warm.usa-button--active{color:white;background-color:#775540}.usa-button--outline{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px #005ea2;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}.usa-button--outline:visited{color:#005ea2}.usa-button--outline:hover,.usa-button--outline.usa-button--hover{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px #1a4480;box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}.usa-button--outline:active,.usa-button--outline.usa-button--active{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px #162e51;box-shadow:inset 0 0 0 2px #162e51;color:#162e51}.usa-button--outline.usa-button--inverse{-webkit-box-shadow:inset 0 0 0 2px #dfe1e2;box-shadow:inset 0 0 0 2px #dfe1e2;color:#dfe1e2}.usa-button--outline.usa-button--inverse:visited{color:#dfe1e2}.usa-button--outline.usa-button--inverse:hover,.usa-button--outline.usa-button--inverse.usa-button--hover{-webkit-box-shadow:inset 0 0 0 2px #f0f0f0;box-shadow:inset 0 0 0 2px #f0f0f0;color:#f0f0f0}.usa-button--outline.usa-button--inverse:active,.usa-button--outline.usa-button--inverse.usa-button--active{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px white;box-shadow:inset 0 0 0 2px white;color:white}.usa-button--outline.usa-button--inverse.usa-button--unstyled{color:#005ea2;text-decoration:underline;background-color:transparent;border:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none;font-weight:normal;-ms-flex-pack:normal;justify-content:normal;text-align:left;margin:0;padding:0;color:#dfe1e2}.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited{color:#54278f}.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover{color:#1a4480}.usa-button--outline.usa-button--inverse.usa-button--unstyled:active{color:#162e51}.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus{outline:0.25rem solid #2491ff;outline-offset:0rem}.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true].usa-button--hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true].usa-button--active,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true].usa-focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true],.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;text-decoration:underline}.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover{color:#1a4480}.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active{color:#162e51}.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true],.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:focus{color:#757575}@media (forced-colors: active){.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true],.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:focus{color:GrayText}}.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited{color:#dfe1e2}.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover{color:#f0f0f0}.usa-button--outline.usa-button--inverse.usa-button--unstyled:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active{color:white}.usa-button--base{color:white;background-color:#71767a}.usa-button--base:hover,.usa-button--base.usa-button--hover{color:white;background-color:#565c65}.usa-button--base:active,.usa-button--base.usa-button--active{color:white;background-color:#3d4551}.usa-button--secondary{color:white;background-color:#d83933}.usa-button--secondary:hover,.usa-button--secondary.usa-button--hover{color:white;background-color:#b50909}.usa-button--secondary:active,.usa-button--secondary.usa-button--active{color:white;background-color:#8b0a03}.usa-button--big{border-radius:0.25rem;font-size:1.46rem;padding:1rem 1.5rem}.usa-button--outline:disabled,.usa-button--outline:disabled:hover,.usa-button--outline:disabled:active,.usa-button--outline:disabled:focus,.usa-button--outline[aria-disabled=true],.usa-button--outline[aria-disabled=true]:hover,.usa-button--outline[aria-disabled=true]:active,.usa-button--outline[aria-disabled=true]:focus,.usa-button--outline-inverse:disabled,.usa-button--outline-inverse:disabled:hover,.usa-button--outline-inverse:disabled:active,.usa-button--outline-inverse:disabled:focus,.usa-button--outline-inverse[aria-disabled=true],.usa-button--outline-inverse[aria-disabled=true]:hover,.usa-button--outline-inverse[aria-disabled=true]:active,.usa-button--outline-inverse[aria-disabled=true]:focus{background-color:transparent;color:#757575}.usa-button--outline:disabled,.usa-button--outline[aria-disabled=true]{-webkit-box-shadow:inset 0 0 0 2px #c9c9c9;box-shadow:inset 0 0 0 2px #c9c9c9}.usa-button--outline:disabled.usa-button--inverse,.usa-button--outline[aria-disabled=true].usa-button--inverse{-webkit-box-shadow:inset 0 0 0 2px #919191;box-shadow:inset 0 0 0 2px #919191;color:#919191}@media (forced-colors: active){.usa-button--outline:disabled.usa-button--inverse,.usa-button--outline[aria-disabled=true].usa-button--inverse{color:GrayText}}.usa-button--unstyled{color:#005ea2;text-decoration:underline;background-color:transparent;border:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none;font-weight:normal;-ms-flex-pack:normal;justify-content:normal;text-align:left;margin:0;padding:0}.usa-button--unstyled:visited{color:#54278f}.usa-button--unstyled:hover{color:#1a4480}.usa-button--unstyled:active{color:#162e51}.usa-button--unstyled:focus{outline:0.25rem solid #2491ff;outline-offset:0rem}.usa-button--unstyled:hover,.usa-button--unstyled.usa-button--hover,.usa-button--unstyled:disabled:hover,.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--unstyled:disabled.usa-button--hover,.usa-button--unstyled[aria-disabled=true].usa-button--hover,.usa-button--unstyled:active,.usa-button--unstyled.usa-button--active,.usa-button--unstyled:disabled:active,.usa-button--unstyled[aria-disabled=true]:active,.usa-button--unstyled:disabled.usa-button--active,.usa-button--unstyled[aria-disabled=true].usa-button--active,.usa-button--unstyled:disabled:focus,.usa-button--unstyled[aria-disabled=true]:focus,.usa-button--unstyled:disabled.usa-focus,.usa-button--unstyled[aria-disabled=true].usa-focus,.usa-button--unstyled:disabled,.usa-button--unstyled[aria-disabled=true],.usa-button--unstyled.usa-button--disabled{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;text-decoration:underline}.usa-button--unstyled.usa-button--hover{color:#1a4480}.usa-button--unstyled.usa-button--active{color:#162e51}.usa-button--unstyled:disabled,.usa-button--unstyled[aria-disabled=true],.usa-button--unstyled:disabled:hover,.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--unstyled[aria-disabled=true]:focus{color:#757575}@media (forced-colors: active){.usa-button--unstyled:disabled,.usa-button--unstyled[aria-disabled=true],.usa-button--unstyled:disabled:hover,.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--unstyled[aria-disabled=true]:focus{color:GrayText}}:host{display:inline-block}:host([disabled]:not([disabled=false])) button{pointer-events:none}:host([disabled]:not([disabled=false])){cursor:not-allowed}:host([big]:not([big=false]):is([back],[continue])) .usa-button--big{padding-top:14px}.usa-button.usa-button--outline{background-color:var(--vads-button-color-background-secondary-on-light)}.usa-button.usa-button--outline:hover,.usa-button.usa-button--outline:focus{background-color:var(--vads-button-color-background-secondary-on-light);text-decoration:none}.va-button-primary--alternate{background:var(--vads-color-success-dark)}.va-button-primary--alternate:hover,.va-button-primary--alternate:focus{background-color:var(--vads-button-color-background-primary-alt-active-on-light);text-decoration:none}:host([uswds=false]) button{-ms-flex-align:center;align-items:center;background-color:var(--vads-color-primary);border-radius:5px;color:var(--vads-button-color-text-primary-alt-on-light);display:-ms-flexbox;display:flex;font-size:1.06rem;-ms-flex-pack:center;justify-content:center;margin:0.5em 0.5em 0.5em 0}:host([uswds=false]) button:hover,:host([uswds=false]) button:focus{background-color:var(--vads-color-primary-dark)}:host([uswds=false]) button:active{background-color:var(--vads-color-primary-darker)}:host([uswds=false]) button.va-button-primary--alternate{background:var(--vads-color-success-dark)}:host([uswds=false]) button.va-button-primary--alternate:hover,:host([uswds=false]) button.va-button-primary--alternate:focus{background-color:var(--vads-button-color-background-primary-alt-active-on-light);text-decoration:none}:host([uswds=false][back]:not([back=false])) button,:host([uswds=false][secondary]:not([secondary=false])) button{background-color:var(--vads-button-color-background-secondary-on-light);-webkit-box-shadow:inset 0 0 0 2px var(--vads-color-primary);box-shadow:inset 0 0 0 2px var(--vads-color-primary);color:var(--vads-color-primary)}:host([uswds=false][back]:not([back=false])) button:active,:host([uswds=false][back]:not([back=false])) button:hover,:host([uswds=false][secondary]:not([secondary=false])) button:active,:host([uswds=false][secondary]:not([secondary=false])) button:hover{background-color:var(--vads-color-gray-cool-light);-webkit-box-shadow:inset 0 0 0 2px var(--vads-color-primary-dark);box-shadow:inset 0 0 0 2px var(--vads-color-primary-dark);color:var(--vads-color-primary-dark)}:host([uswds=false][back]:not([back=false])) button:focus,:host([uswds=false][secondary]:not([secondary=false])) button:focus{background-color:var(--vads-color-gray-cool-light);-webkit-box-shadow:inset 0 0 0 2px var(--vads-color-primary);box-shadow:inset 0 0 0 2px var(--vads-color-primary);color:var(--vads-color-primary)}:host([uswds=false][big]:not([big=false])) button{border-radius:8px;font-size:1.5rem;padding:0.9375rem 1.875rem}:host([uswds=false][disabled]:not([disabled=false])) button{background-color:var(--vads-color-base-lighter);-webkit-box-shadow:none;box-shadow:none;color:var(--vads-button-color-text-primary-alt-on-light)}",VaButton=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.handleClick=()=>{if(!this.disableAnalytics){const t={componentName:"va-button",action:"click",details:{type:this.secondary?"secondary":"primary",label:this.getButtonText()}};this.componentLibraryAnalytics.emit(t)}},this.getButtonText=()=>this.continue?"Continue":this.back?"Back":this.text,this.back=!1,this.big=!1,this.continue=!1,this.disableAnalytics=!1,this.disabled=!1,this.label=void 0,this.primaryAlternate=!1,this.secondary=!1,this.submit=void 0,this.text=void 0,this.uswds=!0,this.messageAriaDescribedby=void 0}componentDidLoad(){this.el.classList.contains("uswds-false")&&this.el.setAttribute("uswds","false")}handleSubmit(){if(void 0===this.submit)return;const t=this.el.closest("form");if(!t)return;const o=new CustomEvent("submit",{bubbles:!0,cancelable:!0,composed:!0});"skip"!==this.submit&&t.dispatchEvent(o),"prevent"!==this.submit&&t.submit()}handleClickOverride(t){if(this.disabled)return t.preventDefault(),void t.stopPropagation();this.handleClick(),this.handleSubmit()}render(){const{back:t,continue:o,disabled:a,getButtonText:u,label:e,submit:s,secondary:n,primaryAlternate:r,big:i,uswds:b,messageAriaDescribedby:d}=this,l=(d?"button-description":"").trim()||null,c=a?"true":void 0,v=u(),f=void 0!==s?"submit":"button";if(b){const a=classnames({"usa-button":!0,"usa-button--big":i,"usa-button--outline":t||n,"va-button-primary--alternate":r});return h(Host,null,h("button",{class:a,"aria-disabled":c,"aria-label":e,"aria-describedby":l,type:f,part:"button"},t&&!o&&h("va-icon",{icon:"navigate_far_before"}),v,o&&!t&&h("va-icon",{icon:"navigate_far_next"})),d&&h("span",{id:"button-description",class:"usa-sr-only"},d))}{const a=classnames({"va-button-primary--alternate":r});return h(Host,null,h("button",{class:a,"aria-disabled":c,"aria-label":e,type:f,part:"button"},t&&!o&&h("va-icon",{class:"va-button--icon",icon:"navigate_far_before",size:2}),v,o&&!t&&h("va-icon",{class:"va-button--icon",icon:"navigate_far_next",size:2})))}}get el(){return this}static get style(){return vaButtonCss}},[1,"va-button",{back:[516],big:[516],continue:[516],disableAnalytics:[4,"disable-analytics"],disabled:[516],label:[1],primaryAlternate:[4,"primary-alternate"],secondary:[516],submit:[1],text:[1],uswds:[516],messageAriaDescribedby:[1,"message-aria-describedby"]},[[0,"click","handleClickOverride"]]]);function defineCustomElement(){"undefined"!=typeof customElements&&["va-button","va-icon"].forEach((t=>{switch(t){case"va-button":customElements.get(t)||customElements.define(t,VaButton);break;case"va-icon":customElements.get(t)||defineCustomElement$1()}}))}export{VaButton as V,defineCustomElement as d};
+import{proxyCustomElement,HTMLElement,createEvent,h,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";import{d as defineCustomElement$1}from"./va-icon2.js";const vaButtonCss="button:not([disabled]):focus,:host([uswds='false']) button:not([disabled]):active,select:not([disabled]):focus,a:not([disabled]):focus,h1:focus,input:not([disabled]):focus,textarea:not([disabled]):focus,#form-question [role='option']:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-button{font-family:Source Sans Pro Web, \"Source Sans Pro\", \"Helvetica Neue\", Helvetica, Arial, sans;font-size:1.06rem;line-height:0.9;color:white;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex-align:center;align-items:center;border:0;border-radius:0.25rem;cursor:pointer;-webkit-column-gap:0.5rem;-moz-column-gap:0.5rem;column-gap:0.5rem;display:-ms-inline-flexbox;display:inline-flex;font-weight:700;-ms-flex-pack:center;justify-content:center;margin-right:0.5rem;padding:0.75rem 1.25rem;text-align:center;text-decoration:none;width:100%}@media all and (min-width: 30em){.usa-button{width:auto}}.usa-button:visited{color:white}.usa-button:hover,.usa-button.usa-button--hover{color:white;background-color:#1a4480;border-bottom:0;text-decoration:none}.usa-button:active,.usa-button.usa-button--active{color:white;background-color:#162e51}.usa-button:not([disabled]):focus,.usa-button:not([disabled]).usa-focus{outline-offset:0.25rem}.usa-button:disabled,.usa-button[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-button:disabled:hover,.usa-button:disabled:active,.usa-button:disabled:focus,.usa-button:disabled.usa-focus,.usa-button[aria-disabled=true]:hover,.usa-button[aria-disabled=true]:active,.usa-button[aria-disabled=true]:focus,.usa-button[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-button:disabled,.usa-button[aria-disabled=true]{border:0;color:GrayText}.usa-button:disabled:hover,.usa-button:disabled:active,.usa-button:disabled:focus,.usa-button:disabled.usa-focus,.usa-button[aria-disabled=true]:hover,.usa-button[aria-disabled=true]:active,.usa-button[aria-disabled=true]:focus,.usa-button[aria-disabled=true].usa-focus{color:GrayText}}.usa-button:disabled.usa-button--hover,.usa-button:disabled.usa-button--active,.usa-button[aria-disabled=true].usa-button--hover,.usa-button[aria-disabled=true].usa-button--active{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-button:disabled.usa-button--hover:hover,.usa-button:disabled.usa-button--hover:active,.usa-button:disabled.usa-button--hover:focus,.usa-button:disabled.usa-button--hover.usa-focus,.usa-button:disabled.usa-button--active:hover,.usa-button:disabled.usa-button--active:active,.usa-button:disabled.usa-button--active:focus,.usa-button:disabled.usa-button--active.usa-focus,.usa-button[aria-disabled=true].usa-button--hover:hover,.usa-button[aria-disabled=true].usa-button--hover:active,.usa-button[aria-disabled=true].usa-button--hover:focus,.usa-button[aria-disabled=true].usa-button--hover.usa-focus,.usa-button[aria-disabled=true].usa-button--active:hover,.usa-button[aria-disabled=true].usa-button--active:active,.usa-button[aria-disabled=true].usa-button--active:focus,.usa-button[aria-disabled=true].usa-button--active.usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-button:disabled.usa-button--hover,.usa-button:disabled.usa-button--active,.usa-button[aria-disabled=true].usa-button--hover,.usa-button[aria-disabled=true].usa-button--active{border:0;color:GrayText}.usa-button:disabled.usa-button--hover:hover,.usa-button:disabled.usa-button--hover:active,.usa-button:disabled.usa-button--hover:focus,.usa-button:disabled.usa-button--hover.usa-focus,.usa-button:disabled.usa-button--active:hover,.usa-button:disabled.usa-button--active:active,.usa-button:disabled.usa-button--active:focus,.usa-button:disabled.usa-button--active.usa-focus,.usa-button[aria-disabled=true].usa-button--hover:hover,.usa-button[aria-disabled=true].usa-button--hover:active,.usa-button[aria-disabled=true].usa-button--hover:focus,.usa-button[aria-disabled=true].usa-button--hover.usa-focus,.usa-button[aria-disabled=true].usa-button--active:hover,.usa-button[aria-disabled=true].usa-button--active:active,.usa-button[aria-disabled=true].usa-button--active:focus,.usa-button[aria-disabled=true].usa-button--active.usa-focus{color:GrayText}}@media (forced-colors: active){.usa-button:disabled:not(.usa-button--unstyled),.usa-button[aria-disabled=true]:not(.usa-button--unstyled){border:2px solid GrayText}}.usa-button .usa-icon{-ms-flex-negative:0;flex-shrink:0}@media (forced-colors: active){.usa-button:not(.usa-button--unstyled){border:2px solid transparent}}.usa-button--accent-cool{color:#1b1b1b;background-color:#00bde3}.usa-button--accent-cool:visited{color:#1b1b1b;background-color:#00bde3}.usa-button--accent-cool:hover,.usa-button--accent-cool.usa-button--hover{color:#1b1b1b;background-color:#28a0cb}.usa-button--accent-cool:active,.usa-button--accent-cool.usa-button--active{color:white;background-color:#07648d}.usa-button--accent-warm{color:#1b1b1b;background-color:#fa9441}.usa-button--accent-warm:visited{color:#1b1b1b;background-color:#fa9441}.usa-button--accent-warm:hover,.usa-button--accent-warm.usa-button--hover{color:white;background-color:#c05600}.usa-button--accent-warm:active,.usa-button--accent-warm.usa-button--active{color:white;background-color:#775540}.usa-button--outline{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px #005ea2;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}.usa-button--outline:visited{color:#005ea2}.usa-button--outline:hover,.usa-button--outline.usa-button--hover{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px #1a4480;box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}.usa-button--outline:active,.usa-button--outline.usa-button--active{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px #162e51;box-shadow:inset 0 0 0 2px #162e51;color:#162e51}.usa-button--outline.usa-button--inverse{-webkit-box-shadow:inset 0 0 0 2px #dfe1e2;box-shadow:inset 0 0 0 2px #dfe1e2;color:#dfe1e2}.usa-button--outline.usa-button--inverse:visited{color:#dfe1e2}.usa-button--outline.usa-button--inverse:hover,.usa-button--outline.usa-button--inverse.usa-button--hover{-webkit-box-shadow:inset 0 0 0 2px #f0f0f0;box-shadow:inset 0 0 0 2px #f0f0f0;color:#f0f0f0}.usa-button--outline.usa-button--inverse:active,.usa-button--outline.usa-button--inverse.usa-button--active{background-color:transparent;-webkit-box-shadow:inset 0 0 0 2px white;box-shadow:inset 0 0 0 2px white;color:white}.usa-button--outline.usa-button--inverse.usa-button--unstyled{color:#005ea2;text-decoration:underline;background-color:transparent;border:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none;font-weight:normal;-ms-flex-pack:normal;justify-content:normal;text-align:left;margin:0;padding:0;color:#dfe1e2}.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited{color:#54278f}.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover{color:#1a4480}.usa-button--outline.usa-button--inverse.usa-button--unstyled:active{color:#162e51}.usa-button--outline.usa-button--inverse.usa-button--unstyled:focus{outline:0.25rem solid #2491ff;outline-offset:0rem}.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true].usa-button--hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true].usa-button--active,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true].usa-focus,.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true],.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;text-decoration:underline}.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover{color:#1a4480}.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active{color:#162e51}.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true],.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:focus{color:#757575}@media (forced-colors: active){.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true],.usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled[aria-disabled=true]:focus{color:GrayText}}.usa-button--outline.usa-button--inverse.usa-button--unstyled:visited{color:#dfe1e2}.usa-button--outline.usa-button--inverse.usa-button--unstyled:hover,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover{color:#f0f0f0}.usa-button--outline.usa-button--inverse.usa-button--unstyled:active,.usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active{color:white}.usa-button--base{color:white;background-color:#71767a}.usa-button--base:hover,.usa-button--base.usa-button--hover{color:white;background-color:#565c65}.usa-button--base:active,.usa-button--base.usa-button--active{color:white;background-color:#3d4551}.usa-button--secondary{color:white;background-color:#d83933}.usa-button--secondary:hover,.usa-button--secondary.usa-button--hover{color:white;background-color:#b50909}.usa-button--secondary:active,.usa-button--secondary.usa-button--active{color:white;background-color:#8b0a03}.usa-button--big{border-radius:0.25rem;font-size:1.46rem;padding:1rem 1.5rem}.usa-button--outline:disabled,.usa-button--outline:disabled:hover,.usa-button--outline:disabled:active,.usa-button--outline:disabled:focus,.usa-button--outline[aria-disabled=true],.usa-button--outline[aria-disabled=true]:hover,.usa-button--outline[aria-disabled=true]:active,.usa-button--outline[aria-disabled=true]:focus,.usa-button--outline-inverse:disabled,.usa-button--outline-inverse:disabled:hover,.usa-button--outline-inverse:disabled:active,.usa-button--outline-inverse:disabled:focus,.usa-button--outline-inverse[aria-disabled=true],.usa-button--outline-inverse[aria-disabled=true]:hover,.usa-button--outline-inverse[aria-disabled=true]:active,.usa-button--outline-inverse[aria-disabled=true]:focus{background-color:transparent;color:#757575}.usa-button--outline:disabled,.usa-button--outline[aria-disabled=true]{-webkit-box-shadow:inset 0 0 0 2px #c9c9c9;box-shadow:inset 0 0 0 2px #c9c9c9}.usa-button--outline:disabled.usa-button--inverse,.usa-button--outline[aria-disabled=true].usa-button--inverse{-webkit-box-shadow:inset 0 0 0 2px #919191;box-shadow:inset 0 0 0 2px #919191;color:#919191}@media (forced-colors: active){.usa-button--outline:disabled.usa-button--inverse,.usa-button--outline[aria-disabled=true].usa-button--inverse{color:GrayText}}.usa-button--unstyled{color:#005ea2;text-decoration:underline;background-color:transparent;border:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none;font-weight:normal;-ms-flex-pack:normal;justify-content:normal;text-align:left;margin:0;padding:0}.usa-button--unstyled:visited{color:#54278f}.usa-button--unstyled:hover{color:#1a4480}.usa-button--unstyled:active{color:#162e51}.usa-button--unstyled:focus{outline:0.25rem solid #2491ff;outline-offset:0rem}.usa-button--unstyled:hover,.usa-button--unstyled.usa-button--hover,.usa-button--unstyled:disabled:hover,.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--unstyled:disabled.usa-button--hover,.usa-button--unstyled[aria-disabled=true].usa-button--hover,.usa-button--unstyled:active,.usa-button--unstyled.usa-button--active,.usa-button--unstyled:disabled:active,.usa-button--unstyled[aria-disabled=true]:active,.usa-button--unstyled:disabled.usa-button--active,.usa-button--unstyled[aria-disabled=true].usa-button--active,.usa-button--unstyled:disabled:focus,.usa-button--unstyled[aria-disabled=true]:focus,.usa-button--unstyled:disabled.usa-focus,.usa-button--unstyled[aria-disabled=true].usa-focus,.usa-button--unstyled:disabled,.usa-button--unstyled[aria-disabled=true],.usa-button--unstyled.usa-button--disabled{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;text-decoration:underline}.usa-button--unstyled.usa-button--hover{color:#1a4480}.usa-button--unstyled.usa-button--active{color:#162e51}.usa-button--unstyled:disabled,.usa-button--unstyled[aria-disabled=true],.usa-button--unstyled:disabled:hover,.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--unstyled[aria-disabled=true]:focus{color:#757575}@media (forced-colors: active){.usa-button--unstyled:disabled,.usa-button--unstyled[aria-disabled=true],.usa-button--unstyled:disabled:hover,.usa-button--unstyled[aria-disabled=true]:hover,.usa-button--unstyled[aria-disabled=true]:focus{color:GrayText}}:host{display:inline-block}:host([disabled]:not([disabled=false])) button{pointer-events:none}:host([disabled]:not([disabled=false])){cursor:not-allowed}:host([big]:not([big=false]):is([back],[continue])) .usa-button--big{padding-top:14px}.usa-button.usa-button--outline{background-color:var(--vads-button-color-background-secondary-on-light)}.usa-button.usa-button--outline:hover,.usa-button.usa-button--outline:focus{background-color:var(--vads-button-color-background-secondary-on-light);text-decoration:none}.va-button-primary--alternate{background:var(--vads-color-success-dark)}.va-button-primary--alternate:hover,.va-button-primary--alternate:focus{background-color:var(--vads-button-color-background-primary-alt-active-on-light);text-decoration:none}",VaButton=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.handleClick=()=>{if(!this.disableAnalytics){const t={componentName:"va-button",action:"click",details:{type:this.secondary?"secondary":"primary",label:this.getButtonText()}};this.componentLibraryAnalytics.emit(t)}},this.getButtonText=()=>this.continue?"Continue":this.back?"Back":this.text,this.back=!1,this.big=!1,this.continue=!1,this.disableAnalytics=!1,this.disabled=!1,this.label=void 0,this.primaryAlternate=!1,this.secondary=!1,this.submit=void 0,this.text=void 0,this.messageAriaDescribedby=void 0}handleSubmit(){if(void 0===this.submit)return;const t=this.el.closest("form");if(!t)return;const u=new CustomEvent("submit",{bubbles:!0,cancelable:!0,composed:!0});"skip"!==this.submit&&t.dispatchEvent(u),"prevent"!==this.submit&&t.submit()}handleClickOverride(t){if(this.disabled)return t.preventDefault(),void t.stopPropagation();this.handleClick(),this.handleSubmit()}render(){const{back:t,continue:u,disabled:o,getButtonText:a,label:e,submit:s,secondary:n,primaryAlternate:i,big:b,messageAriaDescribedby:r}=this,d=(r?"button-description":"").trim()||null,l=o?"true":void 0,c=a(),v=void 0!==s?"submit":"button",f=classnames({"usa-button":!0,"usa-button--big":b,"usa-button--outline":t||n,"va-button-primary--alternate":i});return h(Host,null,h("button",{class:f,"aria-disabled":l,"aria-label":e,"aria-describedby":d,type:v,part:"button"},t&&!u&&h("va-icon",{icon:"navigate_far_before"}),c,u&&!t&&h("va-icon",{icon:"navigate_far_next"})),r&&h("span",{id:"button-description",class:"usa-sr-only"},r))}get el(){return this}static get style(){return vaButtonCss}},[1,"va-button",{back:[516],big:[516],continue:[516],disableAnalytics:[4,"disable-analytics"],disabled:[516],label:[1],primaryAlternate:[4,"primary-alternate"],secondary:[516],submit:[1],text:[1],messageAriaDescribedby:[1,"message-aria-describedby"]},[[0,"click","handleClickOverride"]]]);function defineCustomElement(){"undefined"!=typeof customElements&&["va-button","va-icon"].forEach((t=>{switch(t){case"va-button":customElements.get(t)||customElements.define(t,VaButton);break;case"va-icon":customElements.get(t)||defineCustomElement$1()}}))}export{VaButton as V,defineCustomElement as d};

package/dist/components/va-checkbox-group.js

@@ -1 +1 @@
-import{Build,proxyCustomElement,HTMLElement,createEvent,forceUpdate,h,Fragment,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";import{i as instance}from"./i18next.js";import{a as getHeaderLevel}from"./utils.js";const vaCheckboxGroupCss='/* From the USWDS styles: */\n/*   https://github.com/uswds/uswds/blob/3dc296ec56cd621fe52d918701fd94621d96a198/src/stylesheets/core/mixins/_focus.scss#L12-L13 */\nbutton:not([disabled]):focus,\n:host([uswds=\'false\']) button:not([disabled]):active,\nselect:not([disabled]):focus,\na:not([disabled]):focus,\nh1:focus,\ninput:not([disabled]):focus,\ntextarea:not([disabled]):focus,\n#form-question\n[role=\'option\']:focus {\n  outline: 2px solid var(--vads-color-action-focus-on-light);\n  outline-offset: 2px;\n}\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (":") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n  headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nBroswer compatibility mode\n----------------------------------------\nWhen true, outputs woff and ttf font \nformats in addition to woff2\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n\'georgia\'\n\'helvetica\'\n\'merriweather\'\n\'open-sans\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\'system\'\n\'tahoma\'\n\'verdana\'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: \'example-font-token\';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n\'georgia\'\n\'helvetica\'\n\'merriweather\'\n\'open-sans\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\'system\'\n\'tahoma\'\n\'verdana\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don\'t need to include the\nfont\'s display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: \'source-sans-pro\';\n$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;\n\nOutput:\nfont-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n\'merriweather\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n  Directory relative to $theme-font-path\n- This directory should include fonts saved as\n  .woff2\n  ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n  dir: \'custom/example-serif\',\n  roman: (\n    100: false,\n    200: false,\n    300: \'ExampleSerif-Light\',\n    400: \'ExampleSerif-Normal\',\n    500: false,\n    600: false,\n    700: \'ExampleSerif-Bold\',\n    800: false,\n    900: false,\n  ),\n  italic: (\n    100: false,\n    200: false,\n    300: \'ExampleSerif-LightItalic\',\n    400: \'ExampleSerif-Italic\',\n    500: false,\n    600: false,\n    700: \'ExampleSerif-BoldItalic\',\n    800: false,\n    900: false,\n  ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n\'cond\'\n\'icon\'\n\'lang\'\n\'mono\'\n\'sans\'\n\'serif\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project\'s type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro:      10px\n1:          12px\n2:          13px\n3:          14px\n4:          15px\n5:          16px\n6:          17px\n7:          18px\n8:          20px\n9:          22px\n10:         24px\n11:         28px\n12:         32px\n13:         36px\n14:         40px\n15:         48px\n16:         56px\n17:         64px\n18:         80px\n19:         120px\n20:         140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1:    1\n2:    1.15\n3:    1.35\n4:    1.5\n5:    1.62\n6:    1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n\'ui\'\n\'heading\'\n\'body\'\n\'code\'\n\'alt\'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1:       44ex\n2:       60ex\n3:       64ex\n4:       68ex\n5:       74ex\n6:       88ex\nnone:    none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px           2px\n0.5           4px\n1             8px\n1.5           12px\n2             16px\n2.5           20px\n3             24px\n4             32px\n5             40px\n6             48px\n7             56px\n8             64px\n9             72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px         2px\n0.5         4px\n1           8px\n2           16px\n3           24px\n4           32px\n5           40px\n6           48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default("bg-color")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin\'s props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) --\x3e\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family("accent-warm-vivid")\n> "accent-warm"\ncolor-token-family("red-50v")\n> "red"\ncolor-token-variant(("red", 50, "vivid"))\n> "red"\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return "vivid" as the\nvariant.\nIf neither grade nor variant exists,\nreturns \'null\'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family("accent-warm-vivid")\n> "accent-warm"\ncolor-token-family("red-50v")\n> "red"\ncolor-token-variant(("red", 50, "vivid"))\n> "red"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade("accent-warm")\n> "root"\ncolor-token-grade("accent-warm-vivid")\n> "root"\ncolor-token-grade("accent-warm-darker")\n> "darker"\ncolor-token-grade("red-50v")\n> 50\ncolor-token-variant(("red", 50, "vivid"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family("accent-warm-vivid")\n> "accent-warm"\ncolor-token-family("red-50v")\n> "red"\ncolor-token-variant(("red", 50, "vivid"))\n> "red"\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: "system" | "theme"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: "vivid" | false\ncolor-token-variant("accent-warm")\n> false\ncolor-token-variant("accent-warm-vivid")\n> "vivid"\ncolor-token-variant("red-50v")\n> "vivid"\ncolor-token-variant(("red", 50, "vivid"))\n> "vivid"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number("red-50", "red-10")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, "AA")\n> false\nis-accessible-magic-number(10, 60, "AA")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n"AA"\n"AA-Large"\n"AAA"\nwcag-magic-number("AA")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n  "black",\n  "red-60",\n  "red-10",\n  "AA")\n> "red-10", "red-5"\nget-link-tokens-from-bg(\n  "black",\n  "red-60v",\n  "red-10v",\n  "AA-large")\n> "red-60v", "red-50v"\nget-link-tokens-from-bg(\n  "black",\n  "red-5v",\n  "red-60v",\n  "AA")\n> "red-5v", "white"\nget-link-tokens-from-bg(\n  "black",\n  "white",\n  "red-60v",\n  "AA")\n> "white", "white"\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next "darker" or "lighter" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token("accent-warm", "lighter")\n> "accent-warm-light"\nnext-token("gray-10", "lighter")\n> "gray-5"\nnext-token("gray-5", "lighter")\n> "white"\nnext-token("white", "lighter")\n> false\nnext-token("red-50v", "darker")\n> "red-60v"\nnext-token("red-50", "darker")\n> "red-60"\nnext-token("red-80v", "darker")\n> "red-90"\nnext-token("red-90", "darker")\n> "black"\nnext-token("white", "darker")\n> "gray-5"\nnext-token("black", "lighter")\n> "gray-90"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-sources()\n----------------------------------------\nOutputs a list of font sources used in\na @font-face declaration.\n\n$theme-font-browser-compatibility: true - output woff2, woff, ttf\n$theme-font-browser-compatibility: false - output woff2\n\n@param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]]\n@output: string\n\nfiletypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face\'s optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5   --\x3e \'05\'\n    -1px  --\x3e \'neg-1px\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --\x3e 6\n    grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\nh1 {\n  margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-bottom: 0;\n  margin-top: 0;\n  clear: both;\n}\n* + h1,\n* + h2,\n* + h3,\n* + h4,\n* + h5,\n* + h6 {\n  margin-top: 1.5em;\n}\nh1 + *,\nh2 + *,\nh3 + *,\nh4 + *,\nh5 + *,\nh6 + * {\n  margin-top: 1em;\n}\n\nh1 {\n  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;\n  font-size: 2.44rem;\n  line-height: 1.2;\n  font-weight: 700;\n}\n\nh2 {\n  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;\n  font-size: 1.95rem;\n  line-height: 1.2;\n  font-weight: 700;\n}\n\nh3 {\n  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;\n  font-size: 1.34rem;\n  line-height: 1.2;\n  font-weight: 700;\n}\n\nh4 {\n  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;\n  font-size: 0.98rem;\n  line-height: 1.2;\n  font-weight: 700;\n}\n\nh5 {\n  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;\n  font-size: 0.91rem;\n  line-height: 1.2;\n  font-weight: 700;\n}\n\nh6 {\n  font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;\n  font-size: 0.87rem;\n  line-height: 1.1;\n  font-weight: normal;\n  letter-spacing: 0.025em;\n  text-transform: uppercase;\n}\n\nh1, h2, h3, h4, h5 {\n  font-family: Bitter, Georgia, Cambria, "Times New Roman", Times, serif;\n  font-weight: 700;\n}\n\nh6 {\n  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;\n  font-weight: 700;\n}\n\nh1 {\n  margin-top: 0;\n  font-size: 2.5rem;\n}\n\nh2 {\n  font-size: 1.875rem;\n}\n\nh3 {\n  font-size: 1.25rem;\n}\n\nh4 {\n  font-size: 1.0625rem;\n}\n\nh5 {\n  font-size: 0.9375rem;\n}\n\nh6 {\n  font-size: 0.9375rem;\n}\n\n@media (max-width: 481px) {\n  h1 {\n    font-size: 30px;\n  }\n  h2 {\n    font-size: 24px;\n  }\n}\nh6 {\n  margin: 0.5em 0 0;\n  text-transform: none;\n  font-weight: 700;\n}\n\n@media (max-width: 481px) {\n  h1 {\n    font-size: 30px;\n  }\n  h2 {\n    font-size: 24px;\n  }\n}\nh6 {\n  margin: 0.5em 0 0;\n  text-transform: none;\n  font-weight: 700;\n}\n\n\n:host legend :is(h1, h2, h3, h4, h5, h6),\n:host label :is(h1, h2, h3, h4, h5, h6) {\n  display: inline;\n  margin: 0px;\n}\n\n/* h6 remains as Source Sans Pro, everything else uses Bitter */\n:host legend :is(h1, h2, h3, h4, h5),\n:host label :is(h1, h2, h3, h4, h5)  {\n  font-family: var(--font-serif);\n}\n\n:host h1 + *, :host h2 + *, :host h3 + *, :host h4 + *, :host h5 + *, :host h6 + * {\n  margin-top: unset;\n}\n\n:host #form-question {\n  margin-bottom: 1rem;\n}\n\n.sr-only {\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  -webkit-clip-path: inset(50%);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute !important;\n  width: 1px;\n  /*  Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1241631 */\n  word-wrap: normal !important;\n}\n\n#error-message {\n  margin-bottom: 0.75rem;\n}\n\n#error-message,\n#input-error-message {\n  color: var(--vads-color-secondary-dark);\n  display: block;\n  font-weight: 700;\n  font-size: 1.06rem;\n}\n\n:host([error]:not([error=\'\'])) {\n  border-left: 0.3rem solid var(--vads-color-secondary-dark);\n  padding-left: 1.25rem;\n  position: relative;\n}\n\n@media screen and (min-width: 1008px) {\n  :host([error]:not([error=\'\'])) {\n    margin-left: -1.4375rem; /* padding left + border left */\n  }\n}\n\n:host([error]:not([error=\'\'])[uswds=\'false\']) {\n  label {\n    margin-top: 0;\n  }\n\n  input,\n  textarea,\n  select {\n    border: 4px solid var(--vads-color-secondary-dark);\n  }\n}\n\n.hint-text {\n    color: #71767A;\n    display: block;\n    font-size: 1.06rem;\n}\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (":") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n  headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nBroswer compatibility mode\n----------------------------------------\nWhen true, outputs woff and ttf font \nformats in addition to woff2\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n\'georgia\'\n\'helvetica\'\n\'merriweather\'\n\'open-sans\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\'system\'\n\'tahoma\'\n\'verdana\'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: \'example-font-token\';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n\'georgia\'\n\'helvetica\'\n\'merriweather\'\n\'open-sans\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\'system\'\n\'tahoma\'\n\'verdana\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don\'t need to include the\nfont\'s display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: \'source-sans-pro\';\n$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;\n\nOutput:\nfont-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n\'merriweather\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n  Directory relative to $theme-font-path\n- This directory should include fonts saved as\n  .woff2\n  ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n  dir: \'custom/example-serif\',\n  roman: (\n    100: false,\n    200: false,\n    300: \'ExampleSerif-Light\',\n    400: \'ExampleSerif-Normal\',\n    500: false,\n    600: false,\n    700: \'ExampleSerif-Bold\',\n    800: false,\n    900: false,\n  ),\n  italic: (\n    100: false,\n    200: false,\n    300: \'ExampleSerif-LightItalic\',\n    400: \'ExampleSerif-Italic\',\n    500: false,\n    600: false,\n    700: \'ExampleSerif-BoldItalic\',\n    800: false,\n    900: false,\n  ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n\'cond\'\n\'icon\'\n\'lang\'\n\'mono\'\n\'sans\'\n\'serif\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project\'s type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro:      10px\n1:          12px\n2:          13px\n3:          14px\n4:          15px\n5:          16px\n6:          17px\n7:          18px\n8:          20px\n9:          22px\n10:         24px\n11:         28px\n12:         32px\n13:         36px\n14:         40px\n15:         48px\n16:         56px\n17:         64px\n18:         80px\n19:         120px\n20:         140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1:    1\n2:    1.15\n3:    1.35\n4:    1.5\n5:    1.62\n6:    1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n\'ui\'\n\'heading\'\n\'body\'\n\'code\'\n\'alt\'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1:       44ex\n2:       60ex\n3:       64ex\n4:       68ex\n5:       74ex\n6:       88ex\nnone:    none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px           2px\n0.5           4px\n1             8px\n1.5           12px\n2             16px\n2.5           20px\n3             24px\n4             32px\n5             40px\n6             48px\n7             56px\n8             64px\n9             72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px         2px\n0.5         4px\n1           8px\n2           16px\n3           24px\n4           32px\n5           40px\n6           48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default("bg-color")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin\'s props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) --\x3e\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5   --\x3e \'05\'\n    -1px  --\x3e \'neg-1px\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-sources()\n----------------------------------------\nOutputs a list of font sources used in\na @font-face declaration.\n\n$theme-font-browser-compatibility: true - output woff2, woff, ttf\n$theme-font-browser-compatibility: false - output woff2\n\n@param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]]\n@output: string\n\nfiletypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face\'s optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/*  deprecated.scss\n    ---\n    Occasionally the design system will deprecate\n    old variables or functionality. If we replace\n    the old functionality with something new, this is a\n    place to connect the old functionality to the\n    new functionality, in the service of better\n    continuity and backwards compatibility within a\n    major release cycle.\n\n    Note the USWDS version where we deprecated the\n    old functionality in a comment.\n\n    Be sure to update notifications.scss.\n\n    This file should started fresh at each\n    major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return "vivid" as the\nvariant.\nIf neither grade nor variant exists,\nreturns \'null\'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family("accent-warm-vivid")\n> "accent-warm"\ncolor-token-family("red-50v")\n> "red"\ncolor-token-variant(("red", 50, "vivid"))\n> "red"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade("accent-warm")\n> "root"\ncolor-token-grade("accent-warm-vivid")\n> "root"\ncolor-token-grade("accent-warm-darker")\n> "darker"\ncolor-token-grade("red-50v")\n> 50\ncolor-token-variant(("red", 50, "vivid"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: "system" | "theme"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: "vivid" | false\ncolor-token-variant("accent-warm")\n> false\ncolor-token-variant("accent-warm-vivid")\n> "vivid"\ncolor-token-variant("red-50v")\n> "vivid"\ncolor-token-variant(("red", 50, "vivid"))\n> "vivid"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number("red-50", "red-10")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n"AA"\n"AA-Large"\n"AAA"\nwcag-magic-number("AA")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, "AA")\n> false\nis-accessible-magic-number(10, 60, "AA")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next "darker" or "lighter" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token("accent-warm", "lighter")\n> "accent-warm-light"\nnext-token("gray-10", "lighter")\n> "gray-5"\nnext-token("gray-5", "lighter")\n> "white"\nnext-token("white", "lighter")\n> false\nnext-token("red-50v", "darker")\n> "red-60v"\nnext-token("red-50", "darker")\n> "red-60"\nnext-token("red-80v", "darker")\n> "red-90"\nnext-token("red-90", "darker")\n> "black"\nnext-token("white", "darker")\n> "gray-5"\nnext-token("black", "lighter")\n> "gray-90"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n  "black",\n  "red-60",\n  "red-10",\n  "AA")\n> "red-10", "red-5"\nget-link-tokens-from-bg(\n  "black",\n  "red-60v",\n  "red-10v",\n  "AA-large")\n> "red-60v", "red-50v"\nget-link-tokens-from-bg(\n  "black",\n  "red-5v",\n  "red-60v",\n  "AA")\n> "red-5v", "white"\nget-link-tokens-from-bg(\n  "black",\n  "white",\n  "red-60v",\n  "AA")\n> "white", "white"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --\x3e 6\n    grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a \'interpolation near\noperators will be simplified in a\nfuture version of Sass\' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/*  notifications.scss\n    ---\n    Adds a notification at the top of each USWDS\n    compile. Use this file for important notifications\n    and updates to the design system.\n\n    This file should started fresh at each\n    major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n.usa-hint, .usa-fieldset {\n  font-family: Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n  font-size: 1.06rem;\n  line-height: 1.3;\n}\n\n.usa-sr-only {\n  position: absolute;\n  left: -999em;\n  right: auto;\n}\n\n.usa-fieldset {\n  border: none;\n  margin: 0;\n  padding: 0;\n}\n\n.usa-label {\n  font-family: Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n  font-size: 1.06rem;\n  line-height: 1.3;\n  display: block;\n  font-weight: normal;\n  margin-top: 1.5rem;\n  max-width: 30rem;\n}\n\n.usa-label--error {\n  font-weight: 700;\n  margin-top: 0;\n}\n\n.usa-label--required {\n  color: #b50909;\n}\n\n.usa-hint {\n  color: #71767a;\n}\n\n.usa-hint--required {\n  color: #b50909;\n}\n\n.usa-error-message {\n  padding-bottom: 0.25rem;\n  padding-top: 0.25rem;\n  color: #b50909;\n  display: block;\n  font-weight: 700;\n}\n\n.usa-error-message {\n  font-size: 1.06rem;\n}\n\n:host([error]:not([error=""]):not([uswds=false])) {\n  border-left: 0.25rem solid #b50909;\n  padding-left: 1rem;\n  position: relative;\n}\n\n:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) {\n  border-left: none;\n}\n\n:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap {\n  border-left: 0.25rem solid #b50909;\n  padding-left: 1rem;\n  position: relative;\n}\n\n@media screen and (min-width: 1008px) {\n  :host([error]:not([error=""]):not([uswds=false])) {\n    margin-left: -0.9rem;\n  }\n\n  :host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap {\n    margin-left: -0.9rem;\n  }\n}\n@media screen and (max-width: 1008px) {\n  :host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) {\n    padding-left: 0;\n  }\n}\n:host {\n  display: block;\n  border: none;\n  padding: 0;\n}\n\n:host(:not([uswds=false])) {\n  margin-top: 24px;\n}\n\n/* Original Component Style */\n:host([uswds=false]) #error-message {\n  font-size: 1.06rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  margin-bottom: 0;\n}\n:host([uswds=false]) .required {\n  color: var(--vads-color-secondary-dark);\n  margin: 0 0.219rem;\n}\n:host([uswds=false]) fieldset {\n  border: none;\n  margin: 0;\n  padding: 0;\n}\n:host([uswds=false]) legend {\n  display: block;\n  max-width: 28.75rem;\n  font-weight: inherit;\n  font-size: 1.06rem;\n  line-height: inherit;\n  padding-inline: 0;\n}';Build.isTesting&&instance.init({lng:"cimode"});const VaCheckboxGroup$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.label=void 0,this.required=!1,this.error=void 0,this.enableAnalytics=!1,this.hint=void 0,this.uswds=!0,this.labelHeaderLevel=void 0,this.useFormsPattern=void 0,this.formHeadingLevel=3,this.formHeading=void 0}vaChangeHandler(n){const e=n.target;this.enableAnalytics&&this.fireAnalyticsEvent(e.label)}fireAnalyticsEvent(n){this.componentLibraryAnalytics.emit({componentName:"va-checkbox-group",action:"change",details:{label:this.label,optionLabel:n,required:this.required}})}getHeaderLevel(){const n=parseInt(this.labelHeaderLevel,10);return n>=1&&n<=6?`h${n}`:null}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}render(){const{label:n,required:e,error:t,hint:o,uswds:a,useFormsPattern:r,formHeadingLevel:s,formHeading:i}=this,l=this.getHeaderLevel(),c=`${r&&i?"form-question":""} ${r?"form-description":""} ${"multiple"===r?"header-message":""}`.trim()||null;if(a){const a=classnames({"usa-legend":!0,"usa-label--error":t});let m=null;if("single"===r||"multiple"===r){const n=getHeaderLevel(s);m=h(Fragment,null,i&&h(n,{id:"form-question",part:"form-header"},i),h("div",{id:"form-description"},h("slot",{name:"form-description"})))}return h(Host,{role:"group"},m,h("div",{class:"input-wrap"},h("fieldset",{class:"usa-fieldset","aria-labelledby":c},h("legend",{class:a},l?h(l,{part:"header"},n):n," ","multiple"===r&&h("span",{id:"header-message",class:"sr-only"},n),e&&h("span",{class:"usa-label--required"},instance.t("required")),o&&h("div",{class:"usa-hint"},o)),h("span",{id:"checkbox-error-message",role:"alert"},t&&h(Fragment,null,h("span",{class:"usa-sr-only"},instance.t("error")),h("span",{class:"usa-error-message"},t))),h("slot",null))))}return h(Host,{role:"group"},h("fieldset",null,h("legend",null,l?h(l,{part:"header"},n):n,e&&h("span",{class:"required"},instance.t("required")),o&&h("div",{class:"hint-text"},o)),h("span",{id:"error-message",role:"alert"},t&&h(Fragment,null,h("span",{class:"sr-only"},instance.t("error"))," ",t)),h("slot",null)))}get el(){return this}static get style(){return vaCheckboxGroupCss}},[1,"va-checkbox-group",{label:[1],required:[4],error:[1],enableAnalytics:[4,"enable-analytics"],hint:[1],uswds:[4],labelHeaderLevel:[1,"label-header-level"],useFormsPattern:[1,"use-forms-pattern"],formHeadingLevel:[2,"form-heading-level"],formHeading:[1,"form-heading"]},[[0,"vaChange","vaChangeHandler"]]]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-checkbox-group"].forEach((n=>{"va-checkbox-group"===n&&(customElements.get(n)||customElements.define(n,VaCheckboxGroup$1))}))}const VaCheckboxGroup=VaCheckboxGroup$1,defineCustomElement=defineCustomElement$1;export{VaCheckboxGroup,defineCustomElement};
+import{Build,proxyCustomElement,HTMLElement,createEvent,forceUpdate,h,Fragment,Host}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";import"./i18n-setup.js";import"./contacts.js";import{a as getHeaderLevel}from"./utils.js";import{i as instance}from"./i18next.js";const vaCheckboxGroupCss='button:not([disabled]):focus,:host([uswds=\'false\']) button:not([disabled]):active,select:not([disabled]):focus,a:not([disabled]):focus,h1:focus,input:not([disabled]):focus,textarea:not([disabled]):focus,#form-question [role=\'option\']:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px}h1{margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:0;clear:both}*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-top:1.5em}h1+*,h2+*,h3+*,h4+*,h5+*,h6+*{margin-top:1em}h1{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:2.44rem;line-height:1.2;font-weight:700}h2{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.95rem;line-height:1.2;font-weight:700}h3{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.34rem;line-height:1.2;font-weight:700}h4{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.98rem;line-height:1.2;font-weight:700}h5{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.91rem;line-height:1.2;font-weight:700}h6{font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;font-size:0.87rem;line-height:1.1;font-weight:normal;letter-spacing:0.025em;text-transform:uppercase}h1,h2,h3,h4,h5{font-family:Bitter, Georgia, Cambria, "Times New Roman", Times, serif;font-weight:700}h6{font-family:"Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;font-weight:700}h1{margin-top:0;font-size:2.5rem}h2{font-size:1.875rem}h3{font-size:1.25rem}h4{font-size:1.0625rem}h5{font-size:0.9375rem}h6{font-size:0.9375rem}@media (max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}@media (max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}:host legend :is(h1,h2,h3,h4,h5,h6),:host label :is(h1,h2,h3,h4,h5,h6){display:inline;margin:0px}:host legend :is(h1,h2,h3,h4,h5),:host label :is(h1,h2,h3,h4,h5){font-family:var(--font-serif)}:host h1+*,:host h2+*,:host h3+*,:host h4+*,:host h5+*,:host h6+*{margin-top:unset}:host #form-question{margin-bottom:1rem}.usa-hint,.usa-fieldset{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-fieldset{border:none;margin:0;padding:0}.usa-label{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3;display:block;font-weight:normal;margin-top:1.5rem;max-width:30rem}.usa-label--error{font-weight:700;margin-top:0}.usa-label--required{color:#b50909}.usa-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;font-weight:700}.usa-error-message{font-size:1.06rem}:host([error]:not([error=""]):not([uswds=false])){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]){border-left:none}:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap{border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host([error]:not([error=""]):not([uswds=false])){margin-left:-0.9rem}:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap{margin-left:-0.9rem}}@media screen and (max-width: 1008px){:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]){padding-left:0}}:host{display:block;border:none;padding:0;margin-top:24px}';Build.isTesting&&instance.init({lng:"cimode"});const VaCheckboxGroup$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.label=void 0,this.required=!1,this.error=void 0,this.enableAnalytics=!1,this.hint=void 0,this.labelHeaderLevel=void 0,this.useFormsPattern=void 0,this.formHeadingLevel=3,this.formHeading=void 0}vaChangeHandler(e){const t=e.target;this.enableAnalytics&&this.fireAnalyticsEvent(t.label)}fireAnalyticsEvent(e){this.componentLibraryAnalytics.emit({componentName:"va-checkbox-group",action:"change",details:{label:this.label,optionLabel:e,required:this.required}})}getHeaderLevel(){const e=parseInt(this.labelHeaderLevel,10);return e>=1&&e<=6?`h${e}`:null}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}render(){const{label:e,required:t,error:r,hint:o,useFormsPattern:i,formHeadingLevel:s,formHeading:a}=this,n=this.getHeaderLevel(),l=`${i&&a?"form-question":""} ${i?"form-description":""} ${"multiple"===i?"header-message":""}`.trim()||null,m=classnames({"usa-legend":!0,"usa-label--error":r});let f=null;if("single"===i||"multiple"===i){const e=getHeaderLevel(s);f=h(Fragment,null,a&&h(e,{id:"form-question",part:"form-header"},a),h("div",{id:"form-description"},h("slot",{name:"form-description"})))}return h(Host,{role:"group"},f,h("div",{class:"input-wrap"},h("fieldset",{class:"usa-fieldset","aria-labelledby":l},h("legend",{class:m},n?h(n,{part:"header"},e):e," ","multiple"===i&&h("span",{id:"header-message",class:"usa-sr-only"},e),t&&h("span",{class:"usa-label--required"},instance.t("required")),o&&h("div",{class:"usa-hint"},o)),h("span",{id:"checkbox-error-message",role:"alert"},r&&h(Fragment,null,h("span",{class:"usa-sr-only"},instance.t("error")),h("span",{class:"usa-error-message"},r))),h("slot",null))))}get el(){return this}static get style(){return vaCheckboxGroupCss}},[1,"va-checkbox-group",{label:[1],required:[4],error:[1],enableAnalytics:[4,"enable-analytics"],hint:[1],labelHeaderLevel:[1,"label-header-level"],useFormsPattern:[1,"use-forms-pattern"],formHeadingLevel:[2,"form-heading-level"],formHeading:[1,"form-heading"]},[[0,"vaChange","vaChangeHandler"]]]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-checkbox-group"].forEach((e=>{"va-checkbox-group"===e&&(customElements.get(e)||customElements.define(e,VaCheckboxGroup$1))}))}const VaCheckboxGroup=VaCheckboxGroup$1,defineCustomElement=defineCustomElement$1;export{VaCheckboxGroup,defineCustomElement};

package/dist/components/va-checkbox2.js

@@ -1 +1 @@
-import{Build,proxyCustomElement,HTMLElement,createEvent,forceUpdate,h,Host,Fragment}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";import{i as instance}from"./i18next.js";const vaCheckboxCss='@charset "UTF-8";\n.sr-only {\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  -webkit-clip-path: inset(50%);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute !important;\n  width: 1px;\n  /*  Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1241631 */\n  word-wrap: normal !important;\n}\n\n#error-message {\n  margin-bottom: 0.75rem;\n}\n\n#error-message,\n#input-error-message {\n  color: var(--vads-color-secondary-dark);\n  display: block;\n  font-weight: 700;\n  font-size: 1.06rem;\n}\n\n:host([error]:not([error=\'\'])) {\n  border-left: 0.3rem solid var(--vads-color-secondary-dark);\n  padding-left: 1.25rem;\n  position: relative;\n}\n\n@media screen and (min-width: 1008px) {\n  :host([error]:not([error=\'\'])) {\n    margin-left: -1.4375rem; /* padding left + border left */\n  }\n}\n\n:host([error]:not([error=\'\'])[uswds=\'false\']) {\n  label {\n    margin-top: 0;\n  }\n\n  input,\n  textarea,\n  select {\n    border: 4px solid var(--vads-color-secondary-dark);\n  }\n}\n\n.hint-text {\n    color: #71767A;\n    display: block;\n    font-size: 1.06rem;\n}\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (":") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n  headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nBroswer compatibility mode\n----------------------------------------\nWhen true, outputs woff and ttf font \nformats in addition to woff2\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n\'georgia\'\n\'helvetica\'\n\'merriweather\'\n\'open-sans\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\'system\'\n\'tahoma\'\n\'verdana\'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: \'example-font-token\';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n\'georgia\'\n\'helvetica\'\n\'merriweather\'\n\'open-sans\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\'system\'\n\'tahoma\'\n\'verdana\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don\'t need to include the\nfont\'s display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: \'source-sans-pro\';\n$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;\n\nOutput:\nfont-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n\'merriweather\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n  Directory relative to $theme-font-path\n- This directory should include fonts saved as\n  .woff2\n  ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n  dir: \'custom/example-serif\',\n  roman: (\n    100: false,\n    200: false,\n    300: \'ExampleSerif-Light\',\n    400: \'ExampleSerif-Normal\',\n    500: false,\n    600: false,\n    700: \'ExampleSerif-Bold\',\n    800: false,\n    900: false,\n  ),\n  italic: (\n    100: false,\n    200: false,\n    300: \'ExampleSerif-LightItalic\',\n    400: \'ExampleSerif-Italic\',\n    500: false,\n    600: false,\n    700: \'ExampleSerif-BoldItalic\',\n    800: false,\n    900: false,\n  ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n\'cond\'\n\'icon\'\n\'lang\'\n\'mono\'\n\'sans\'\n\'serif\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project\'s type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro:      10px\n1:          12px\n2:          13px\n3:          14px\n4:          15px\n5:          16px\n6:          17px\n7:          18px\n8:          20px\n9:          22px\n10:         24px\n11:         28px\n12:         32px\n13:         36px\n14:         40px\n15:         48px\n16:         56px\n17:         64px\n18:         80px\n19:         120px\n20:         140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1:    1\n2:    1.15\n3:    1.35\n4:    1.5\n5:    1.62\n6:    1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n\'ui\'\n\'heading\'\n\'body\'\n\'code\'\n\'alt\'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1:       44ex\n2:       60ex\n3:       64ex\n4:       68ex\n5:       74ex\n6:       88ex\nnone:    none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px           2px\n0.5           4px\n1             8px\n1.5           12px\n2             16px\n2.5           20px\n3             24px\n4             32px\n5             40px\n6             48px\n7             56px\n8             64px\n9             72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px         2px\n0.5         4px\n1           8px\n2           16px\n3           24px\n4           32px\n5           40px\n6           48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default("bg-color")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin\'s props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) --\x3e\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5   --\x3e \'05\'\n    -1px  --\x3e \'neg-1px\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-sources()\n----------------------------------------\nOutputs a list of font sources used in\na @font-face declaration.\n\n$theme-font-browser-compatibility: true - output woff2, woff, ttf\n$theme-font-browser-compatibility: false - output woff2\n\n@param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]]\n@output: string\n\nfiletypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face\'s optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/*  deprecated.scss\n    ---\n    Occasionally the design system will deprecate\n    old variables or functionality. If we replace\n    the old functionality with something new, this is a\n    place to connect the old functionality to the\n    new functionality, in the service of better\n    continuity and backwards compatibility within a\n    major release cycle.\n\n    Note the USWDS version where we deprecated the\n    old functionality in a comment.\n\n    Be sure to update notifications.scss.\n\n    This file should started fresh at each\n    major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return "vivid" as the\nvariant.\nIf neither grade nor variant exists,\nreturns \'null\'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family("accent-warm-vivid")\n> "accent-warm"\ncolor-token-family("red-50v")\n> "red"\ncolor-token-variant(("red", 50, "vivid"))\n> "red"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade("accent-warm")\n> "root"\ncolor-token-grade("accent-warm-vivid")\n> "root"\ncolor-token-grade("accent-warm-darker")\n> "darker"\ncolor-token-grade("red-50v")\n> 50\ncolor-token-variant(("red", 50, "vivid"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: "system" | "theme"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: "vivid" | false\ncolor-token-variant("accent-warm")\n> false\ncolor-token-variant("accent-warm-vivid")\n> "vivid"\ncolor-token-variant("red-50v")\n> "vivid"\ncolor-token-variant(("red", 50, "vivid"))\n> "vivid"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number("red-50", "red-10")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n"AA"\n"AA-Large"\n"AAA"\nwcag-magic-number("AA")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, "AA")\n> false\nis-accessible-magic-number(10, 60, "AA")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next "darker" or "lighter" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token("accent-warm", "lighter")\n> "accent-warm-light"\nnext-token("gray-10", "lighter")\n> "gray-5"\nnext-token("gray-5", "lighter")\n> "white"\nnext-token("white", "lighter")\n> false\nnext-token("red-50v", "darker")\n> "red-60v"\nnext-token("red-50", "darker")\n> "red-60"\nnext-token("red-80v", "darker")\n> "red-90"\nnext-token("red-90", "darker")\n> "black"\nnext-token("white", "darker")\n> "gray-5"\nnext-token("black", "lighter")\n> "gray-90"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n  "black",\n  "red-60",\n  "red-10",\n  "AA")\n> "red-10", "red-5"\nget-link-tokens-from-bg(\n  "black",\n  "red-60v",\n  "red-10v",\n  "AA-large")\n> "red-60v", "red-50v"\nget-link-tokens-from-bg(\n  "black",\n  "red-5v",\n  "red-60v",\n  "AA")\n> "red-5v", "white"\nget-link-tokens-from-bg(\n  "black",\n  "white",\n  "red-60v",\n  "AA")\n> "white", "white"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --\x3e 6\n    grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a \'interpolation near\noperators will be simplified in a\nfuture version of Sass\' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/*  notifications.scss\n    ---\n    Adds a notification at the top of each USWDS\n    compile. Use this file for important notifications\n    and updates to the design system.\n\n    This file should started fresh at each\n    major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n.usa-hint, .usa-checkbox__label {\n  font-family: Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n  font-size: 1.06rem;\n  line-height: 1.3;\n}\n\n.usa-sr-only {\n  position: absolute;\n  left: -999em;\n  right: auto;\n}\n\n.usa-icon {\n  display: inline-block;\n  fill: currentColor;\n  height: 1em;\n  position: relative;\n  width: 1em;\n}\n\n.usa-icon--size-3 {\n  height: 1.5rem;\n  width: 1.5rem;\n}\n\n.usa-icon--size-4 {\n  height: 2rem;\n  width: 2rem;\n}\n\n.usa-icon--size-5 {\n  height: 2.5rem;\n  width: 2.5rem;\n}\n\n.usa-icon--size-6 {\n  height: 3rem;\n  width: 3rem;\n}\n\n.usa-icon--size-7 {\n  height: 3.5rem;\n  width: 3.5rem;\n}\n\n.usa-icon--size-8 {\n  height: 4rem;\n  width: 4rem;\n}\n\n.usa-icon--size-9 {\n  height: 4.5rem;\n  width: 4.5rem;\n}\n\n.usa-checkbox {\n  background: white;\n}\n\n.usa-checkbox__label {\n  color: #1b1b1b;\n}\n.usa-checkbox__label::before {\n  background: white;\n  -webkit-box-shadow: 0 0 0 2px #1b1b1b;\n  box-shadow: 0 0 0 2px #1b1b1b;\n}\n@media (forced-colors: active) {\n  .usa-checkbox__label::before {\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n  }\n}\n\n.usa-checkbox__input:checked + [class*=__label]::before {\n  background-color: #005ea2;\n  -webkit-box-shadow: 0 0 0 2px #005ea2;\n  box-shadow: 0 0 0 2px #005ea2;\n}\n.usa-checkbox__input:disabled + [class*=__label], .usa-checkbox__input[aria-disabled=true] + [class*=__label] {\n  color: #757575;\n  cursor: not-allowed;\n}\n@media (forced-colors: active) {\n  .usa-checkbox__input:disabled + [class*=__label], .usa-checkbox__input[aria-disabled=true] + [class*=__label] {\n    color: GrayText;\n  }\n}\n.usa-checkbox__input:disabled + [class*=__label]::before, .usa-checkbox__input[aria-disabled=true] + [class*=__label]::before {\n  background-color: white;\n  -webkit-box-shadow: 0 0 0 2px #757575;\n  box-shadow: 0 0 0 2px #757575;\n}\n.usa-checkbox__input--tile + [class*=__label] {\n  background-color: white;\n  border: 2px solid #c9c9c9;\n  color: #1b1b1b;\n}\n.usa-checkbox__input--tile:checked + [class*=__label] {\n  background-color: rgba(0, 94, 162, 0.1);\n  border-color: #005ea2;\n}\n@media (forced-colors: active) {\n  .usa-checkbox__input--tile:checked + [class*=__label] {\n    border: ButtonText solid 0.25rem;\n  }\n}\n.usa-checkbox__input--tile:disabled + [class*=__label], .usa-checkbox__input--tile[aria-disabled=true] + [class*=__label] {\n  border-color: #e6e6e6;\n}\n.usa-checkbox__input--tile:disabled:checked + [class*=__label], .usa-checkbox__input--tile:disabled:indeterminate + [class*=__label], .usa-checkbox__input--tile:disabled[data-indeterminate] + [class*=__label], .usa-checkbox__input--tile[aria-disabled=true]:checked + [class*=__label], .usa-checkbox__input--tile[aria-disabled=true]:indeterminate + [class*=__label], .usa-checkbox__input--tile[aria-disabled=true][data-indeterminate] + [class*=__label] {\n  background-color: white;\n}\n\n.usa-checkbox__input:indeterminate + [class*=__label]::before, .usa-checkbox__input[data-indeterminate] + [class*=__label]::before {\n  background-image: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 26.3.1%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 64 64%22 style%3D%22enable-background%3Anew 0 0 64 64%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M2.9%2C35.9c0%2C1.1%2C0.4%2C2%2C1.2%2C2.8c0.8%2C0.8%2C1.7%2C1.2%2C2.8%2C1.2h7.9h42.3c1.1%2C0%2C2-0.4%2C2.8-1.2s1.2-1.7%2C1.2-2.8l0%2C0V28%09c0-1.1-0.4-2-1.2-2.8S58.2%2C24%2C57.1%2C24H6.9c-1.1%2C0-2%2C0.4-2.8%2C1.2S2.9%2C26.9%2C2.9%2C28V35.9z%22%2F%3E%3C%2Fsvg%3E"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent));\n  background-image: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 26.3.1%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 64 64%22 style%3D%22enable-background%3Anew 0 0 64 64%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M2.9%2C35.9c0%2C1.1%2C0.4%2C2%2C1.2%2C2.8c0.8%2C0.8%2C1.7%2C1.2%2C2.8%2C1.2h7.9h42.3c1.1%2C0%2C2-0.4%2C2.8-1.2s1.2-1.7%2C1.2-2.8l0%2C0V28%09c0-1.1-0.4-2-1.2-2.8S58.2%2C24%2C57.1%2C24H6.9c-1.1%2C0-2%2C0.4-2.8%2C1.2S2.9%2C26.9%2C2.9%2C28V35.9z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(transparent, transparent);\n  background-repeat: no-repeat;\n  background-color: #005ea2;\n  -webkit-box-shadow: 0 0 0 2px #005ea2;\n  box-shadow: 0 0 0 2px #005ea2;\n  background-position: center center;\n  background-size: 0.75rem auto;\n}\n@media (forced-colors: active) {\n  .usa-checkbox__input:indeterminate + [class*=__label]::before, .usa-checkbox__input[data-indeterminate] + [class*=__label]::before {\n    background-image: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 28.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 64 64%22 style%3D%22enable-background%3Anew 0 0 64 64%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M2.9%2C35.9c0%2C1.1%2C0.4%2C2%2C1.2%2C2.8s1.7%2C1.2%2C2.8%2C1.2h7.9h42.3c1.1%2C0%2C2-0.4%2C2.8-1.2s1.2-1.7%2C1.2-2.8l0%2C0V28%09c0-1.1-0.4-2-1.2-2.8S58.2%2C24%2C57.1%2C24H6.9c-1.1%2C0-2%2C0.4-2.8%2C1.2S2.9%2C26.9%2C2.9%2C28V35.9z%22%2F%3E%3C%2Fsvg%3E"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent));\n    background-image: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 28.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 64 64%22 style%3D%22enable-background%3Anew 0 0 64 64%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M2.9%2C35.9c0%2C1.1%2C0.4%2C2%2C1.2%2C2.8s1.7%2C1.2%2C2.8%2C1.2h7.9h42.3c1.1%2C0%2C2-0.4%2C2.8-1.2s1.2-1.7%2C1.2-2.8l0%2C0V28%09c0-1.1-0.4-2-1.2-2.8S58.2%2C24%2C57.1%2C24H6.9c-1.1%2C0-2%2C0.4-2.8%2C1.2S2.9%2C26.9%2C2.9%2C28V35.9z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(transparent, transparent);\n    background-repeat: no-repeat;\n    background-color: SelectedItem;\n  }\n}\n.usa-checkbox__input:indeterminate:disabled + [class*=__label]::before, .usa-checkbox__input:indeterminate[aria-disabled=true] + [class*=__label]::before, .usa-checkbox__input[data-indeterminate]:disabled + [class*=__label]::before, .usa-checkbox__input[data-indeterminate][aria-disabled=true] + [class*=__label]::before {\n  -webkit-box-shadow: 0 0 0 2px #757575;\n  box-shadow: 0 0 0 2px #757575;\n}\n.usa-checkbox__input:indeterminate:disabled + [class*=__label], .usa-checkbox__input:indeterminate[aria-disabled=true] + [class*=__label], .usa-checkbox__input[data-indeterminate]:disabled + [class*=__label], .usa-checkbox__input[data-indeterminate][aria-disabled=true] + [class*=__label] {\n  border-color: #e6e6e6;\n}\n.usa-checkbox__input--tile:indeterminate + [class*=__label], .usa-checkbox__input--tile[data-indeterminate] + [class*=__label] {\n  background-color: rgba(0, 94, 162, 0.1);\n  border-color: #005ea2;\n}\n@media (forced-colors: active) {\n  .usa-checkbox__input--tile:indeterminate + [class*=__label], .usa-checkbox__input--tile[data-indeterminate] + [class*=__label] {\n    border: ButtonText solid 0.25rem;\n  }\n}\n.usa-checkbox__input:checked + [class*=__label]::before, .usa-checkbox__input:checked:disabled + [class*=__label]::before, .usa-checkbox__input:checked[aria-disabled=true] + [class*=__label]::before {\n  background-image: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2265%22 height%3D%2250%22 viewBox%3D%220 0 65 50%22%3E%3Ctitle%3Ecorrect8%3C%2Ftitle%3E%3Cpath fill%3D%22%23FFF%22 fill-rule%3D%22evenodd%22 d%3D%22M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z%22%2F%3E%3C%2Fsvg%3E"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent));\n  background-image: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2265%22 height%3D%2250%22 viewBox%3D%220 0 65 50%22%3E%3Ctitle%3Ecorrect8%3C%2Ftitle%3E%3Cpath fill%3D%22%23FFF%22 fill-rule%3D%22evenodd%22 d%3D%22M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(transparent, transparent);\n  background-repeat: no-repeat;\n}\n@media (forced-colors: active) {\n  .usa-checkbox__input:checked + [class*=__label]::before, .usa-checkbox__input:checked:disabled + [class*=__label]::before, .usa-checkbox__input:checked[aria-disabled=true] + [class*=__label]::before {\n    background-image: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2265%22 height%3D%2250%22 viewBox%3D%220 0 65 50%22%3E%3Ctitle%3Ecorrect8-alt%3C%2Ftitle%3E%3Cpath fill%3D%22%23171717%22 fill-rule%3D%22evenodd%22 d%3D%22M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z%22%2F%3E%3C%2Fsvg%3E"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent));\n    background-image: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2265%22 height%3D%2250%22 viewBox%3D%220 0 65 50%22%3E%3Ctitle%3Ecorrect8-alt%3C%2Ftitle%3E%3Cpath fill%3D%22%23171717%22 fill-rule%3D%22evenodd%22 d%3D%22M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(transparent, transparent);\n    background-repeat: no-repeat;\n  }\n}\n.usa-checkbox__input:checked:disabled + [class*=__label]::before, .usa-checkbox__input:checked[aria-disabled=true] + [class*=__label]::before, .usa-checkbox__input:indeterminate:disabled + [class*=__label]::before, .usa-checkbox__input:indeterminate[aria-disabled=true] + [class*=__label]::before, .usa-checkbox__input[data-indeterminate]:disabled + [class*=__label]::before, .usa-checkbox__input[data-indeterminate][aria-disabled=true] + [class*=__label]::before {\n  background-color: #757575;\n}\n@media (forced-colors: active) {\n  .usa-checkbox__input:checked:disabled + [class*=__label]::before, .usa-checkbox__input:checked[aria-disabled=true] + [class*=__label]::before, .usa-checkbox__input:indeterminate:disabled + [class*=__label]::before, .usa-checkbox__input:indeterminate[aria-disabled=true] + [class*=__label]::before, .usa-checkbox__input[data-indeterminate]:disabled + [class*=__label]::before, .usa-checkbox__input[data-indeterminate][aria-disabled=true] + [class*=__label]::before {\n    background-color: GrayText;\n  }\n}\n\n.usa-checkbox__input {\n  position: absolute;\n  left: -999em;\n  right: auto;\n}\n.usa-checkbox__input:focus + [class*=__label]::before {\n  outline: 0.25rem solid #2491ff;\n  outline-offset: 0.25rem;\n}\n.usa-checkbox__input--tile + [class*=__label] {\n  border-radius: 0.25rem;\n  margin-top: 0.5rem;\n  padding: 0.75rem 1rem 0.75rem 2.5rem;\n}\n.usa-checkbox__input--tile + [class*=__label]::before {\n  left: 0.5rem;\n}\n\n.usa-checkbox__input:checked + [class*=__label]::before {\n  background-position: center center;\n  background-size: 0.75rem auto;\n}\n@media print {\n  .usa-checkbox__input:checked + [class*=__label]::before {\n    background-image: none;\n    background-color: white;\n    content: "✔";\n    text-align: center;\n  }\n}\n@media (forced-colors: active) {\n  .usa-checkbox__input:checked + [class*=__label]::before {\n    background-color: SelectedItem;\n  }\n}\n\n.usa-checkbox__label {\n  cursor: pointer;\n  display: inherit;\n  font-weight: normal;\n  margin-top: 0.75rem;\n  padding-left: 2rem;\n  position: relative;\n}\n.usa-checkbox__label::before {\n  content: " ";\n  display: block;\n  left: 0;\n  margin-left: 2px;\n  margin-top: 0.064rem;\n  position: absolute;\n}\n\n.usa-checkbox__label::before {\n  height: 1.25rem;\n  width: 1.25rem;\n  border-radius: 2px;\n}\n\n.usa-checkbox__label-description {\n  display: block;\n  font-size: 0.93rem;\n  margin-top: 0.5rem;\n}\n\n/*\n.checkbox-tests {\n  @include set-text-and-bg("green-80");\n  @include checkbox-colors("green-80", "green-warm-10v");\n  padding: units(2);\n  border-radius: radius("md");\n}\n*/\n.usa-legend {\n  font-family: Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n  font-size: 1.06rem;\n  line-height: 1.3;\n  display: block;\n  font-weight: normal;\n  margin-top: 1.5rem;\n  max-width: 30rem;\n}\n\n.usa-legend--large {\n  font-size: 2.13rem;\n  font-weight: 700;\n  margin-top: 1rem;\n}\n\n.usa-label {\n  font-family: Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n  font-size: 1.06rem;\n  line-height: 1.3;\n  display: block;\n  font-weight: normal;\n  margin-top: 1.5rem;\n  max-width: 30rem;\n}\n\n.usa-label--error {\n  font-weight: 700;\n  margin-top: 0;\n}\n\n.usa-label--required {\n  color: #b50909;\n}\n\n.usa-hint {\n  color: #71767a;\n}\n\n.usa-hint--required {\n  color: #b50909;\n}\n\n.usa-error-message {\n  padding-bottom: 0.25rem;\n  padding-top: 0.25rem;\n  color: #b50909;\n  display: block;\n  font-weight: 700;\n}\n\n.usa-error-message {\n  font-size: 1.06rem;\n}\n\n:host([error]:not([error=""]):not([uswds=false])) {\n  border-left: 0.25rem solid #b50909;\n  padding-left: 1rem;\n  position: relative;\n}\n\n:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) {\n  border-left: none;\n}\n\n:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap {\n  border-left: 0.25rem solid #b50909;\n  padding-left: 1rem;\n  position: relative;\n}\n\n@media screen and (min-width: 1008px) {\n  :host([error]:not([error=""]):not([uswds=false])) {\n    margin-left: -0.9rem;\n  }\n\n  :host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap {\n    margin-left: -0.9rem;\n  }\n}\n@media screen and (max-width: 1008px) {\n  :host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) {\n    padding-left: 0;\n  }\n}\n:host {\n  display: block;\n}\n\n.usa-checkbox {\n  max-width: 320px;\n  background: transparent;\n}\n\n.usa-checkbox__input:focus + [class*=__label]::before {\n  outline: 2px solid var(--vads-color-action-focus-on-light);\n  outline-offset: 4px;\n}\n\n/* Original Component Style */\n:host([uswds=false]) {\n  --visible-checkbox-size: 1.25rem;\n  --visible-checkbox-top-margin: 0.0875rem;\n}\n:host([uswds=false]) p {\n  font-size: 1.06rem;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n:host([uswds=false]) #error-message {\n  font-size: 1.06rem;\n  margin-bottom: 0;\n}\n\n:host([error][uswds=false]:not([error=""])) input + label {\n  margin-top: 0.75rem;\n}\n\n:host([uswds=false]) {\n  /* The actual box */\n}\n:host([uswds=false]) input {\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  position: absolute;\n  left: auto;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n}\n:host([uswds=false]) label {\n  display: block;\n}\n:host([uswds=false]) input + label {\n  cursor: pointer;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-size: 1.06rem;\n  font-weight: 400;\n  margin-top: 0.75rem;\n  width: 100%;\n}\n:host([uswds=false]) input + label::before {\n  display: block;\n  float: left;\n  margin-top: var(--visible-checkbox-top-margin);\n  margin-right: 0.625rem;\n  pointer-events: none;\n  border-radius: 2px;\n  -webkit-box-shadow: 0 0 0 1px var(--vads-color-gray-medium);\n  box-shadow: 0 0 0 1px var(--vads-color-gray-medium);\n  content: " ";\n  height: var(--visible-checkbox-size);\n  max-width: var(--visible-checkbox-size);\n  width: 100%;\n  background-color: var(--vads-input-background-color-on-light);\n}\n:host([uswds=false]) input:checked + label::before {\n  background-color: var(--vads-color-primary);\n  -webkit-box-shadow: 0 0 0 1px var(--vads-color-primary);\n  box-shadow: 0 0 0 1px var(--vads-color-primary);\n  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 216 146%22%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M168.86 37.966l-11.08-11.08c-1.52-1.52-3.367-2.28-5.54-2.28-2.172 0-4.02.76-5.54 2.28L93.254 80.414 69.3 56.38c-1.52-1.522-3.367-2.282-5.54-2.282-2.172 0-4.02.76-5.54 2.28L47.14 67.46c-1.52 1.522-2.28 3.37-2.28 5.542 0 2.172.76 4.02 2.28 5.54l29.493 29.493 11.08 11.08c1.52 1.52 3.368 2.28 5.54 2.28 2.173 0 4.02-.76 5.54-2.28l11.082-11.08L168.86 49.05c1.52-1.52 2.283-3.37 2.283-5.54 0-2.174-.76-4.02-2.28-5.54z%22%2F%3E%3C%2Fsvg%3E");\n  background-position: 50%;\n  background-repeat: no-repeat;\n}\n:host([uswds=false]) input:not([disabled]):focus + label:before {\n  outline: 2px solid var(--vads-color-action-focus-on-light);\n  outline-offset: 2px;\n}\n:host([uswds=false]) .required {\n  color: var(--vads-color-secondary-dark);\n  margin: 0 0.21875rem;\n}\n:host([uswds=false]) ::slotted([slot=description]) {\n  margin-top: 0 !important;\n  margin-bottom: 0.75rem !important;\n}\n\n:host([uswds=false][tile=true]) label {\n  padding: 12px 16px 12px 12px;\n  border: 2px solid var(--vads-color-base-light);\n  border-radius: 0.25em;\n  width: 320px;\n}\n\n:host([uswds=false][tile=true]) input:checked + label {\n  background-color: rgba(0, 94, 162, 0.1);\n  border-color: #005ea2;\n}';Build.isTesting&&instance.init({lng:"cimode"});const VaCheckbox=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.vaChange=createEvent(this,"vaChange",7),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.fireAnalyticsEvent=()=>{var n;const e=this.description||[...null===(n=this.el.shadowRoot.querySelector('slot[name="description"]'))||void 0===n?void 0:n.assignedNodes(),...Array.from(this.el.shadowRoot.querySelectorAll('[slot="description"]'))].map((n=>n.textContent)).join(" ");this.componentLibraryAnalytics.emit({componentName:"va-checkbox",action:"change",details:{label:this.label,description:e,required:this.required,checked:this.checked}})},this.handleChange=n=>{this.checked=n.target.checked,this.vaChange.emit({checked:this.checked}),this.enableAnalytics&&this.fireAnalyticsEvent()},this.label=void 0,this.error=void 0,this.description=void 0,this.required=!1,this.enableAnalytics=!1,this.checked=!1,this.hint=void 0,this.tile=!1,this.uswds=!0,this.checkboxDescription=void 0,this.disabled=!1,this.messageAriaDescribedby=void 0,this.name=void 0}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}componentDidLoad(){this.el.classList.contains("uswds-false")&&this.el.setAttribute("uswds","false")}render(){const{error:n,label:e,required:t,description:a,checked:o,hint:s,tile:r,uswds:i,checkboxDescription:l,disabled:c,messageAriaDescribedby:d,name:u}=this,p=a||!!this.el.querySelector('[slot="description"]');if(i){const i=classnames({"usa-checkbox__input":!0,"usa-checkbox__input--tile":r}),m=classnames({"usa-legend":!0,"usa-label--error":n}),b=[d?"input-message":"",n?"checkbox-error-message":"",p?"description":""].filter(Boolean).join(" ").trim()||null;return h(Host,null,a?h("legend",{id:"description",class:m},a):h("slot",{name:"description"}),s&&h("span",{class:"usa-hint"},s),h("span",{id:"checkbox-error-message",role:"alert"},n&&h(Fragment,null,h("span",{class:"usa-sr-only"},instance.t("error")),h("span",{class:"usa-error-message"},n))),h("div",{class:"usa-checkbox",part:"checkbox"},h("input",{class:i,type:"checkbox",name:u||null,id:"checkbox-element",checked:o,"aria-describedby":b,"aria-invalid":n?"true":"false",disabled:c,onChange:this.handleChange}),h("label",{htmlFor:"checkbox-element",id:"option-label",class:"usa-checkbox__label",part:"label"},e," ",t&&h("span",{class:"usa-label--required"},instance.t("required")),l&&h("span",{class:"usa-checkbox__label-description","aria-describedby":"option-label",part:"description"},l)),d&&h("span",{id:"input-message",class:"sr-only dd-privacy-hidden"},d)))}{const r=[d?"input-message":"",n?"checkbox-error-message":"",p?"description":""].filter(Boolean).join(" ").trim()||null;return h(Host,null,h("div",{id:"description"},a?h("p",null,a):h("slot",{name:"description"})),s&&h("span",{class:"hint-text"},s),h("span",{id:"checkbox-error-message",class:"usa-error-message",role:"alert"},n&&h(Fragment,null,h("span",{class:"sr-only"},instance.t("error"))," ",n)),h("input",{type:"checkbox",id:"checkbox-element",checked:o,"aria-describedby":r,"aria-invalid":n?"true":"false",onChange:this.handleChange}),h("label",{htmlFor:"checkbox-element"},h("span",null,e," ",t&&h("span",{class:"required"},instance.t("required")))),d&&h("span",{id:"input-message",class:"sr-only dd-privacy-hidden"},d))}}get el(){return this}static get style(){return vaCheckboxCss}},[1,"va-checkbox",{label:[1],error:[513],description:[1],required:[4],enableAnalytics:[4,"enable-analytics"],checked:[1028],hint:[1],tile:[4],uswds:[516],checkboxDescription:[1,"checkbox-description"],disabled:[4],messageAriaDescribedby:[1,"message-aria-describedby"],name:[1]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["va-checkbox"].forEach((n=>{"va-checkbox"===n&&(customElements.get(n)||customElements.define(n,VaCheckbox))}))}export{VaCheckbox as V,defineCustomElement as d};
+import{Build,proxyCustomElement,HTMLElement,createEvent,forceUpdate,h,Host,Fragment}from"@stencil/core/internal/client";import{c as classnames}from"./index2.js";import"./i18n-setup.js";import"./contacts.js";import{i as instance}from"./i18next.js";const vaCheckboxCss='@charset "UTF-8";.usa-hint,.usa-checkbox__label{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-icon{display:inline-block;fill:currentColor;height:1em;position:relative;width:1em}.usa-icon--size-3{height:1.5rem;width:1.5rem}.usa-icon--size-4{height:2rem;width:2rem}.usa-icon--size-5{height:2.5rem;width:2.5rem}.usa-icon--size-6{height:3rem;width:3rem}.usa-icon--size-7{height:3.5rem;width:3.5rem}.usa-icon--size-8{height:4rem;width:4rem}.usa-icon--size-9{height:4.5rem;width:4.5rem}.usa-checkbox{background:white}.usa-checkbox__label{color:#1b1b1b}.usa-checkbox__label::before{background:white;-webkit-box-shadow:0 0 0 2px #1b1b1b;box-shadow:0 0 0 2px #1b1b1b}@media (forced-colors: active){.usa-checkbox__label::before{outline:2px solid transparent;outline-offset:2px}}.usa-checkbox__input:checked+[class*=__label]::before{background-color:#005ea2;-webkit-box-shadow:0 0 0 2px #005ea2;box-shadow:0 0 0 2px #005ea2}.usa-checkbox__input:disabled+[class*=__label],.usa-checkbox__input[aria-disabled=true]+[class*=__label]{color:#757575;cursor:not-allowed}@media (forced-colors: active){.usa-checkbox__input:disabled+[class*=__label],.usa-checkbox__input[aria-disabled=true]+[class*=__label]{color:GrayText}}.usa-checkbox__input:disabled+[class*=__label]::before,.usa-checkbox__input[aria-disabled=true]+[class*=__label]::before{background-color:white;-webkit-box-shadow:0 0 0 2px #757575;box-shadow:0 0 0 2px #757575}.usa-checkbox__input--tile+[class*=__label]{background-color:white;border:2px solid #c9c9c9;color:#1b1b1b}.usa-checkbox__input--tile:checked+[class*=__label]{background-color:rgba(0, 94, 162, 0.1);border-color:#005ea2}@media (forced-colors: active){.usa-checkbox__input--tile:checked+[class*=__label]{border:ButtonText solid 0.25rem}}.usa-checkbox__input--tile:disabled+[class*=__label],.usa-checkbox__input--tile[aria-disabled=true]+[class*=__label]{border-color:#e6e6e6}.usa-checkbox__input--tile:disabled:checked+[class*=__label],.usa-checkbox__input--tile:disabled:indeterminate+[class*=__label],.usa-checkbox__input--tile:disabled[data-indeterminate]+[class*=__label],.usa-checkbox__input--tile[aria-disabled=true]:checked+[class*=__label],.usa-checkbox__input--tile[aria-disabled=true]:indeterminate+[class*=__label],.usa-checkbox__input--tile[aria-disabled=true][data-indeterminate]+[class*=__label]{background-color:white}.usa-checkbox__input:indeterminate+[class*=__label]::before,.usa-checkbox__input[data-indeterminate]+[class*=__label]::before{background-image:url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 26.3.1%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 64 64%22 style%3D%22enable-background%3Anew 0 0 64 64%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M2.9%2C35.9c0%2C1.1%2C0.4%2C2%2C1.2%2C2.8c0.8%2C0.8%2C1.7%2C1.2%2C2.8%2C1.2h7.9h42.3c1.1%2C0%2C2-0.4%2C2.8-1.2s1.2-1.7%2C1.2-2.8l0%2C0V28%09c0-1.1-0.4-2-1.2-2.8S58.2%2C24%2C57.1%2C24H6.9c-1.1%2C0-2%2C0.4-2.8%2C1.2S2.9%2C26.9%2C2.9%2C28V35.9z%22%2F%3E%3C%2Fsvg%3E"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent));background-image:url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 26.3.1%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 64 64%22 style%3D%22enable-background%3Anew 0 0 64 64%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M2.9%2C35.9c0%2C1.1%2C0.4%2C2%2C1.2%2C2.8c0.8%2C0.8%2C1.7%2C1.2%2C2.8%2C1.2h7.9h42.3c1.1%2C0%2C2-0.4%2C2.8-1.2s1.2-1.7%2C1.2-2.8l0%2C0V28%09c0-1.1-0.4-2-1.2-2.8S58.2%2C24%2C57.1%2C24H6.9c-1.1%2C0-2%2C0.4-2.8%2C1.2S2.9%2C26.9%2C2.9%2C28V35.9z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(transparent, transparent);background-repeat:no-repeat;background-color:#005ea2;-webkit-box-shadow:0 0 0 2px #005ea2;box-shadow:0 0 0 2px #005ea2;background-position:center center;background-size:0.75rem auto}@media (forced-colors: active){.usa-checkbox__input:indeterminate+[class*=__label]::before,.usa-checkbox__input[data-indeterminate]+[class*=__label]::before{background-image:url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 28.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 64 64%22 style%3D%22enable-background%3Anew 0 0 64 64%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M2.9%2C35.9c0%2C1.1%2C0.4%2C2%2C1.2%2C2.8s1.7%2C1.2%2C2.8%2C1.2h7.9h42.3c1.1%2C0%2C2-0.4%2C2.8-1.2s1.2-1.7%2C1.2-2.8l0%2C0V28%09c0-1.1-0.4-2-1.2-2.8S58.2%2C24%2C57.1%2C24H6.9c-1.1%2C0-2%2C0.4-2.8%2C1.2S2.9%2C26.9%2C2.9%2C28V35.9z%22%2F%3E%3C%2Fsvg%3E"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent));background-image:url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 28.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 64 64%22 style%3D%22enable-background%3Anew 0 0 64 64%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M2.9%2C35.9c0%2C1.1%2C0.4%2C2%2C1.2%2C2.8s1.7%2C1.2%2C2.8%2C1.2h7.9h42.3c1.1%2C0%2C2-0.4%2C2.8-1.2s1.2-1.7%2C1.2-2.8l0%2C0V28%09c0-1.1-0.4-2-1.2-2.8S58.2%2C24%2C57.1%2C24H6.9c-1.1%2C0-2%2C0.4-2.8%2C1.2S2.9%2C26.9%2C2.9%2C28V35.9z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(transparent, transparent);background-repeat:no-repeat;background-color:SelectedItem}}.usa-checkbox__input:indeterminate:disabled+[class*=__label]::before,.usa-checkbox__input:indeterminate[aria-disabled=true]+[class*=__label]::before,.usa-checkbox__input[data-indeterminate]:disabled+[class*=__label]::before,.usa-checkbox__input[data-indeterminate][aria-disabled=true]+[class*=__label]::before{-webkit-box-shadow:0 0 0 2px #757575;box-shadow:0 0 0 2px #757575}.usa-checkbox__input:indeterminate:disabled+[class*=__label],.usa-checkbox__input:indeterminate[aria-disabled=true]+[class*=__label],.usa-checkbox__input[data-indeterminate]:disabled+[class*=__label],.usa-checkbox__input[data-indeterminate][aria-disabled=true]+[class*=__label]{border-color:#e6e6e6}.usa-checkbox__input--tile:indeterminate+[class*=__label],.usa-checkbox__input--tile[data-indeterminate]+[class*=__label]{background-color:rgba(0, 94, 162, 0.1);border-color:#005ea2}@media (forced-colors: active){.usa-checkbox__input--tile:indeterminate+[class*=__label],.usa-checkbox__input--tile[data-indeterminate]+[class*=__label]{border:ButtonText solid 0.25rem}}.usa-checkbox__input:checked+[class*=__label]::before,.usa-checkbox__input:checked:disabled+[class*=__label]::before,.usa-checkbox__input:checked[aria-disabled=true]+[class*=__label]::before{background-image:url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2265%22 height%3D%2250%22 viewBox%3D%220 0 65 50%22%3E%3Ctitle%3Ecorrect8%3C%2Ftitle%3E%3Cpath fill%3D%22%23FFF%22 fill-rule%3D%22evenodd%22 d%3D%22M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z%22%2F%3E%3C%2Fsvg%3E"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent));background-image:url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2265%22 height%3D%2250%22 viewBox%3D%220 0 65 50%22%3E%3Ctitle%3Ecorrect8%3C%2Ftitle%3E%3Cpath fill%3D%22%23FFF%22 fill-rule%3D%22evenodd%22 d%3D%22M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(transparent, transparent);background-repeat:no-repeat}@media (forced-colors: active){.usa-checkbox__input:checked+[class*=__label]::before,.usa-checkbox__input:checked:disabled+[class*=__label]::before,.usa-checkbox__input:checked[aria-disabled=true]+[class*=__label]::before{background-image:url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2265%22 height%3D%2250%22 viewBox%3D%220 0 65 50%22%3E%3Ctitle%3Ecorrect8-alt%3C%2Ftitle%3E%3Cpath fill%3D%22%23171717%22 fill-rule%3D%22evenodd%22 d%3D%22M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z%22%2F%3E%3C%2Fsvg%3E"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent));background-image:url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2265%22 height%3D%2250%22 viewBox%3D%220 0 65 50%22%3E%3Ctitle%3Ecorrect8-alt%3C%2Ftitle%3E%3Cpath fill%3D%22%23171717%22 fill-rule%3D%22evenodd%22 d%3D%22M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(transparent, transparent);background-repeat:no-repeat}}.usa-checkbox__input:checked:disabled+[class*=__label]::before,.usa-checkbox__input:checked[aria-disabled=true]+[class*=__label]::before,.usa-checkbox__input:indeterminate:disabled+[class*=__label]::before,.usa-checkbox__input:indeterminate[aria-disabled=true]+[class*=__label]::before,.usa-checkbox__input[data-indeterminate]:disabled+[class*=__label]::before,.usa-checkbox__input[data-indeterminate][aria-disabled=true]+[class*=__label]::before{background-color:#757575}@media (forced-colors: active){.usa-checkbox__input:checked:disabled+[class*=__label]::before,.usa-checkbox__input:checked[aria-disabled=true]+[class*=__label]::before,.usa-checkbox__input:indeterminate:disabled+[class*=__label]::before,.usa-checkbox__input:indeterminate[aria-disabled=true]+[class*=__label]::before,.usa-checkbox__input[data-indeterminate]:disabled+[class*=__label]::before,.usa-checkbox__input[data-indeterminate][aria-disabled=true]+[class*=__label]::before{background-color:GrayText}}.usa-checkbox__input{position:absolute;left:-999em;right:auto}.usa-checkbox__input:focus+[class*=__label]::before{outline:0.25rem solid #2491ff;outline-offset:0.25rem}.usa-checkbox__input--tile+[class*=__label]{border-radius:0.25rem;margin-top:0.5rem;padding:0.75rem 1rem 0.75rem 2.5rem}.usa-checkbox__input--tile+[class*=__label]::before{left:0.5rem}.usa-checkbox__input:checked+[class*=__label]::before{background-position:center center;background-size:0.75rem auto}@media print{.usa-checkbox__input:checked+[class*=__label]::before{background-image:none;background-color:white;content:"✔";text-align:center}}@media (forced-colors: active){.usa-checkbox__input:checked+[class*=__label]::before{background-color:SelectedItem}}.usa-checkbox__label{cursor:pointer;display:inherit;font-weight:normal;margin-top:0.75rem;padding-left:2rem;position:relative}.usa-checkbox__label::before{content:" ";display:block;left:0;margin-left:2px;margin-top:0.064rem;position:absolute}.usa-checkbox__label::before{height:1.25rem;width:1.25rem;border-radius:2px}.usa-checkbox__label-description{display:block;font-size:0.93rem;margin-top:0.5rem}.usa-legend{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3;display:block;font-weight:normal;margin-top:1.5rem;max-width:30rem}.usa-legend--large{font-size:2.13rem;font-weight:700;margin-top:1rem}.usa-label{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3;display:block;font-weight:normal;margin-top:1.5rem;max-width:30rem}.usa-label--error{font-weight:700;margin-top:0}.usa-label--required{color:#b50909}.usa-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;font-weight:700}.usa-error-message{font-size:1.06rem}:host([error]:not([error=""]):not([uswds=false])){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]){border-left:none}:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap{border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host([error]:not([error=""]):not([uswds=false])){margin-left:-0.9rem}:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap{margin-left:-0.9rem}}@media screen and (max-width: 1008px){:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]){padding-left:0}}:host{display:block}.usa-checkbox{max-width:320px;background:transparent}.usa-checkbox__input:focus+[class*=__label]::before{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:4px}';Build.isTesting&&instance.init({lng:"cimode"});const VaCheckbox=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.vaChange=createEvent(this,"vaChange",7),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.fireAnalyticsEvent=()=>{var e;const a=this.description||[...null===(e=this.el.shadowRoot.querySelector('slot[name="description"]'))||void 0===e?void 0:e.assignedNodes(),...Array.from(this.el.shadowRoot.querySelectorAll('[slot="description"]'))].map((e=>e.textContent)).join(" ");this.componentLibraryAnalytics.emit({componentName:"va-checkbox",action:"change",details:{label:this.label,description:a,required:this.required,checked:this.checked}})},this.handleChange=e=>{this.checked=e.target.checked,this.vaChange.emit({checked:this.checked}),this.enableAnalytics&&this.fireAnalyticsEvent()},this.label=void 0,this.error=void 0,this.description=void 0,this.required=!1,this.enableAnalytics=!1,this.checked=!1,this.hint=void 0,this.tile=!1,this.checkboxDescription=void 0,this.disabled=!1,this.messageAriaDescribedby=void 0,this.name=void 0}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}render(){const{error:e,label:a,required:t,description:s,checked:l,hint:i,tile:r,checkboxDescription:o,disabled:c,messageAriaDescribedby:n,name:d}=this,b=s||!!this.el.querySelector('[slot="description"]'),u=classnames({"usa-checkbox__input":!0,"usa-checkbox__input--tile":r}),_=classnames({"usa-legend":!0,"usa-label--error":e}),p=[n?"input-message":"",e?"checkbox-error-message":"",b?"description":""].filter(Boolean).join(" ").trim()||null;return h(Host,null,s?h("legend",{id:"description",class:_},s):h("slot",{name:"description"}),i&&h("span",{class:"usa-hint"},i),h("span",{id:"checkbox-error-message",role:"alert"},e&&h(Fragment,null,h("span",{class:"usa-sr-only"},instance.t("error")),h("span",{class:"usa-error-message"},e))),h("div",{class:"usa-checkbox",part:"checkbox"},h("input",{class:u,type:"checkbox",name:d||null,id:"checkbox-element",checked:l,"aria-describedby":p,"aria-invalid":e?"true":"false",disabled:c,onChange:this.handleChange}),h("label",{htmlFor:"checkbox-element",id:"option-label",class:"usa-checkbox__label",part:"label"},a," ",t&&h("span",{class:"usa-label--required"},instance.t("required")),o&&h("span",{class:"usa-checkbox__label-description","aria-describedby":"option-label",part:"description"},o)),n&&h("span",{id:"input-message",class:"usa-sr-only dd-privacy-hidden"},n)))}get el(){return this}static get style(){return vaCheckboxCss}},[1,"va-checkbox",{label:[1],error:[513],description:[1],required:[4],enableAnalytics:[4,"enable-analytics"],checked:[1028],hint:[1],tile:[4],checkboxDescription:[1,"checkbox-description"],disabled:[4],messageAriaDescribedby:[1,"message-aria-describedby"],name:[1]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["va-checkbox"].forEach((e=>{"va-checkbox"===e&&(customElements.get(e)||customElements.define(e,VaCheckbox))}))}export{VaCheckbox as V,defineCustomElement as d};