@department-of-veterans-affairs/component-library 53.0.0 → 53.1.0

package/dist/components/va-textarea.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"./i18n-setup.js";import"./contacts.js";import{e as debounce,u as updateScreenReaderCount,f as getMaxLength,h as getCharacterMessage,i as isMessageSet,g as getHeaderLevel}from"./utils.js";import{i as instance}from"./i18next.js";const vaTextareaCss='button:not([disabled]):focus,select:not([disabled]):focus,a:not([disabled]):focus,h1:focus,input:not([disabled]):focus,textarea:not([disabled]):focus,#form-question [role=\'option\']:focus,*[tabindex]:focus,a.va-sidenav-submenu__link:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px;z-index:2}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 Web", "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-textarea,.usa-hint,.usa-input{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.usa-textarea,.usa-input{border-width:1px;border-color:#565c65;border-style:solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;color:#1b1b1b;display:block;height:2.5rem;margin-top:0.5rem;max-width:30rem;padding:0.5rem;width:100%}.usa-sr-only{position:absolute;left:-999em;right:auto}.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-input:disabled,.usa-input[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1;-webkit-text-fill-color:#454545}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:0;color:GrayText}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:GrayText}}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:2px solid GrayText}}.usa-input--error{border-width:0.25rem;border-color:#b50909;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-input--success{border-width:0.25rem;border-color:#00a91c;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;font-weight:700}.usa-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-textarea:disabled,.usa-textarea[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-textarea:disabled:hover,.usa-textarea:disabled:active,.usa-textarea:disabled:focus,.usa-textarea:disabled.usa-focus,.usa-textarea[aria-disabled=true]:hover,.usa-textarea[aria-disabled=true]:active,.usa-textarea[aria-disabled=true]:focus,.usa-textarea[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-textarea:disabled,.usa-textarea[aria-disabled=true]{border:0;color:GrayText}.usa-textarea:disabled:hover,.usa-textarea:disabled:active,.usa-textarea:disabled:focus,.usa-textarea:disabled.usa-focus,.usa-textarea[aria-disabled=true]:hover,.usa-textarea[aria-disabled=true]:active,.usa-textarea[aria-disabled=true]:focus,.usa-textarea[aria-disabled=true].usa-focus{color:GrayText}}@media (forced-colors: active){.usa-textarea:disabled,.usa-textarea[aria-disabled=true]{border:2px solid GrayText}}.usa-textarea{height:10rem}.usa-character-count__status{display:inline-block;padding-top:0.25rem}.usa-character-count__status.usa-character-count__status--invalid{color:#b50909;font-weight:700}.usa-error-message{font-size:1.06rem}:host([error]:not([error=""])),:host(.va-form-group--error){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}:host([error]:not([error=""])[use-forms-pattern=multiple]),:host(.va-form-group--error[use-forms-pattern=multiple]){border-left:none}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap,:host(.va-form-group--error[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=""])),:host(.va-form-group--error){margin-left:-0.9rem}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap,:host(.va-form-group--error[use-forms-pattern=multiple]) .input-wrap{margin-left:-0.9rem}}@media screen and (max-width: 1008px){:host([error]:not([error=""])[use-forms-pattern=multiple]),:host(.va-form-group--error[use-forms-pattern=multiple]){padding-left:0}}:host{color:var(--vads-color-base);display:block;resize:both;font-family:var(--font-source-sans)}:host(:focus){outline:none !important}.usa-hint{display:block;font-weight:normal}textarea{-webkit-box-sizing:border-box;box-sizing:border-box}h1 .usa-label,h2 .usa-label,h3 .usa-label,h4 .usa-label,h5 .usa-label,h6 .usa-label{font-family:inherit;font-size:inherit;font-weight:inherit}h1 .usa-label .usa-label--required,h2 .usa-label .usa-label--required,h3 .usa-label .usa-label--required,h4 .usa-label .usa-label--required,h5 .usa-label .usa-label--required,h6 .usa-label .usa-label--required{font-family:var(--font-source-sans);font-size:initial;font-weight:initial}',VaTextareaStyle0=vaTextareaCss;Build.isTesting&&instance.init({lng:"cimode"});const VaTextarea$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.debouncedUpdateScreenReaderCount=debounce(updateScreenReaderCount,1e3),this.handleInput=e=>{const a=e.target;this.value=a.value,this.debouncedUpdateScreenReaderCount(this.charCountElement,this.value,getMaxLength(this.maxlength))},this.handleBlur=()=>{this.enableAnalytics&&this.value&&this.componentLibraryAnalytics.emit({componentName:"va-textarea",action:"blur",details:{label:this.label,value:this.value}})},this.label=void 0,this.error=void 0,this.placeholder=void 0,this.name=void 0,this.required=!1,this.hint=void 0,this.messageAriaDescribedby=void 0,this.maxlength=void 0,this.value=void 0,this.enableAnalytics=!1,this.labelHeaderLevel=void 0,this.headerAriaDescribedby=void 0,this.useFormsPattern=void 0,this.formHeadingLevel=3,this.formHeading=void 0,this.charcount=!1}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}componentDidRender(){this.charCountElement&&!this.charCountElement.innerText&&(this.charCountElement.innerText=getCharacterMessage(this.value,getMaxLength(this.maxlength)))}render(){const{label:e,error:a,placeholder:t,name:r,required:s,value:i,hint:o,charcount:n,messageAriaDescribedby:l,useFormsPattern:d,formHeadingLevel:u,headerAriaDescribedby:c,formHeading:m}=this,b=getMaxLength(this.maxlength),f=`${a?"input-error-message":""} ${n&&b?"charcount-message":""} ${l?"input-message":""}`.trim()||null,p=`${d&&m?"form-question":""} ${d?"form-description":""} ${d&&e?"input-label":""}`.trim()||null,g=getHeaderLevel(this.labelHeaderLevel),v=c?"header-message":null,x=n&&(null==i?void 0:i.length)>b,y=classnames({"usa-label":!0,"usa-label--error":a}),w=classnames({"usa-textarea":!0,"usa-input--error":a}),k=classnames({"usa-hint":!0,"usa-character-count__status":n,"usa-character-count__status--invalid":n&&b&&(null==i?void 0:i.length)>b});let T=null;if("single"===d||"multiple"===d){const e=getHeaderLevel(u);T=h(Fragment,{key:"90f8eebc6e52fb99444becb4ef6ef8ec53553e1c"},m&&h(e,{key:"98a588ce34ee4941d806846e1eb3bcfaa9f2a013",id:"form-question",part:"form-header"},m),h("div",{key:"a366822596b5e524d5d942ed6b4b50d78e869cc7",id:"form-description"},h("slot",{key:"cb0eb0b8b8c2ef3a7a3ffb2b8d8f78f90bc1d8c1",name:"form-description"})))}const C=h("label",{key:"0750aaaca6d693f1ef88afc10a5fb665d6d629f8",htmlFor:"input-type-textarea",id:"input-label",class:y,part:"label"},e,"multiple"===d&&h("span",{key:"d8f5f9a43d6678226505acb84a061b5a4dd4496e",id:"header-message",class:"usa-sr-only"},e),c&&h("span",{key:"620e10ea07f0e4391f77bda30e026dd6a986f851",id:"header-message",class:"usa-sr-only"},c),s&&h("span",{key:"0b355ecdf725e36df4c4b0320ba61fd8a9557e6d",class:"usa-label--required"}," ",instance.t("required")),o&&h("div",{key:"af998dd6fd4e6e6dcb635a5e4f739fd22918906a",class:"usa-hint"},o));return h(Host,{key:"6f6ab597327ebf5faf8d0170d6560d58a297febf"},T,h("div",{key:"9028e3c4f25e6426916b3aee18dd877d6fbfd9f4",class:"input-wrap"},e&&g?h(g,{part:"header","aria-describedby":v},C):h(Fragment,null,C),h("slot",{key:"3ddd1238147edf7baa85d1f19af5a595fde1a9cd"}),h("span",{key:"11e30516fb62a43e25d3d54f1289484decc79c44",id:"input-error-message",role:"alert"},a&&h(Fragment,{key:"1469a72516b14242cabc345cb24f519ba7ad5295"},h("span",{key:"f3733a9d23e2b8873a3945cc78a58c1c5fe6acf1",class:"usa-sr-only"},instance.t("error")),h("span",{key:"7ebcbe18d9c170b2cb3647e10ae0302402b8b270",class:"usa-error-message"},a))),h("textarea",{key:"493bbf5e151df948467b60d973c0556d2c4b3c88",class:w,"aria-describedby":f,"aria-invalid":a||x?"true":"false","aria-labelledby":p,onInput:this.handleInput,onBlur:this.handleBlur,id:"input-type-textarea",placeholder:t,name:r,maxLength:n?void 0:b,value:i,part:"input-type-textarea"}),!n&&b&&(null==i?void 0:i.length)>=b&&h("span",{key:"436e6a7106c1a4d1a5ceb210eb1de8afbdcfad56",class:k,"aria-live":"polite"},instance.t("max-chars",{length:b})),n&&b&&h(Fragment,{key:"d11b93672f395fa74f6b891637b8d3a324c14de7"},h("span",{key:"df045a71ed760a789d44449b15951e7e06670613","aria-hidden":"true",class:k},getCharacterMessage(this.value,getMaxLength(this.maxlength))),h("span",{key:"0089a8e5d6e1617f96945432b9ec7017152ccca9",id:"charcount-message","aria-live":"polite",class:"usa-sr-only",ref:e=>this.charCountElement=e})),isMessageSet(l)&&h("span",{key:"cf4eb812c2af7c99870eb9c3438486f389962ca3",id:"input-message",class:"usa-sr-only dd-privacy-hidden"},l)))}get el(){return this}static get style(){return VaTextareaStyle0}},[1,"va-textarea",{label:[1],error:[1],placeholder:[1],name:[1],required:[4],hint:[1],messageAriaDescribedby:[1,"message-aria-describedby"],maxlength:[2],value:[1537],enableAnalytics:[4,"enable-analytics"],labelHeaderLevel:[1,"label-header-level"],headerAriaDescribedby:[1,"header-aria-describedby"],useFormsPattern:[1,"use-forms-pattern"],formHeadingLevel:[2,"form-heading-level"],formHeading:[1,"form-heading"],charcount:[4]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-textarea"].forEach((e=>{"va-textarea"===e&&(customElements.get(e)||customElements.define(e,VaTextarea$1))}))}const VaTextarea=VaTextarea$1,defineCustomElement=defineCustomElement$1;export{VaTextarea,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{e as debounce,u as updateScreenReaderCount,f as getMaxLength,h as getCharacterMessage,i as isMessageSet,g as getHeaderLevel}from"./utils.js";import{i as instance}from"./i18next.js";const vaTextareaCss='button:not([disabled]):focus,select:not([disabled]):focus,a:not([disabled]):focus,h1:focus,input:not([disabled]):focus,textarea:not([disabled]):focus,#form-question [role=\'option\']:focus,*[tabindex]:focus,a.va-sidenav-submenu__link:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px;z-index:2}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 Web", "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-textarea,.usa-hint,.usa-input{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.usa-textarea,.usa-input{border-width:1px;border-color:#565c65;border-style:solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;color:#1b1b1b;display:block;height:2.5rem;margin-top:0.5rem;max-width:30rem;padding:0.5rem;width:100%}.usa-sr-only{position:absolute;left:-999em;right:auto}.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-input:disabled,.usa-input[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1;-webkit-text-fill-color:#454545}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:0;color:GrayText}.usa-input:disabled:hover,.usa-input:disabled:active,.usa-input:disabled:focus,.usa-input:disabled.usa-focus,.usa-input[aria-disabled=true]:hover,.usa-input[aria-disabled=true]:active,.usa-input[aria-disabled=true]:focus,.usa-input[aria-disabled=true].usa-focus{color:GrayText}}@media (forced-colors: active){.usa-input:disabled,.usa-input[aria-disabled=true]{border:2px solid GrayText}}.usa-input--error{border-width:0.25rem;border-color:#b50909;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-input--success{border-width:0.25rem;border-color:#00a91c;border-style:solid;padding-top:calc(0.5rem - 0.25rem);padding-bottom:calc(0.5rem - 0.25rem)}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;font-weight:700}.usa-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-textarea:disabled,.usa-textarea[aria-disabled=true]{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}.usa-textarea:disabled:hover,.usa-textarea:disabled:active,.usa-textarea:disabled:focus,.usa-textarea:disabled.usa-focus,.usa-textarea[aria-disabled=true]:hover,.usa-textarea[aria-disabled=true]:active,.usa-textarea[aria-disabled=true]:focus,.usa-textarea[aria-disabled=true].usa-focus{color:#454545;background-color:#c9c9c9}@media (forced-colors: active){.usa-textarea:disabled,.usa-textarea[aria-disabled=true]{border:0;color:GrayText}.usa-textarea:disabled:hover,.usa-textarea:disabled:active,.usa-textarea:disabled:focus,.usa-textarea:disabled.usa-focus,.usa-textarea[aria-disabled=true]:hover,.usa-textarea[aria-disabled=true]:active,.usa-textarea[aria-disabled=true]:focus,.usa-textarea[aria-disabled=true].usa-focus{color:GrayText}}@media (forced-colors: active){.usa-textarea:disabled,.usa-textarea[aria-disabled=true]{border:2px solid GrayText}}.usa-textarea{height:10rem}.usa-character-count__status{display:inline-block;padding-top:0.25rem}.usa-character-count__status.usa-character-count__status--invalid{color:#b50909;font-weight:700}.usa-error-message{font-size:1.06rem}:host([error]:not([error=""])),:host(.va-form-group--error){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}:host([error]:not([error=""])[use-forms-pattern=multiple]),:host(.va-form-group--error[use-forms-pattern=multiple]){border-left:none}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap,:host(.va-form-group--error[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=""])),:host(.va-form-group--error){margin-left:-0.9rem}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap,:host(.va-form-group--error[use-forms-pattern=multiple]) .input-wrap{margin-left:-0.9rem}}@media screen and (max-width: 1008px){:host([error]:not([error=""])[use-forms-pattern=multiple]),:host(.va-form-group--error[use-forms-pattern=multiple]){padding-left:0}}:host{color:var(--vads-color-base);display:block;resize:both;font-family:var(--font-source-sans)}:host(:focus){outline:none !important}.usa-hint{display:block;font-weight:normal}textarea{-webkit-box-sizing:border-box;box-sizing:border-box}h1 .usa-label,h2 .usa-label,h3 .usa-label,h4 .usa-label,h5 .usa-label,h6 .usa-label{font-family:inherit;font-size:inherit;font-weight:inherit}h1 .usa-label .usa-label--required,h2 .usa-label .usa-label--required,h3 .usa-label .usa-label--required,h4 .usa-label .usa-label--required,h5 .usa-label .usa-label--required,h6 .usa-label .usa-label--required{font-family:var(--font-source-sans);font-size:initial;font-weight:initial}',VaTextareaStyle0=vaTextareaCss;Build.isTesting&&instance.init({lng:"cimode"});const VaTextarea$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.debouncedUpdateScreenReaderCount=debounce(updateScreenReaderCount,1e3),this.handleInput=e=>{const a=e.target;this.value=a.value,this.debouncedUpdateScreenReaderCount(this.charCountElement,this.value,getMaxLength(this.maxlength))},this.handleBlur=()=>{this.enableAnalytics&&this.value&&this.componentLibraryAnalytics.emit({componentName:"va-textarea",action:"blur",details:{label:this.label,value:this.value}})},this.label=void 0,this.error=void 0,this.placeholder=void 0,this.name=void 0,this.required=!1,this.hint=void 0,this.messageAriaDescribedby=void 0,this.maxlength=void 0,this.value=void 0,this.enableAnalytics=!1,this.labelHeaderLevel=void 0,this.headerAriaDescribedby=void 0,this.useFormsPattern=void 0,this.formHeadingLevel=3,this.formHeading=void 0,this.charcount=!1}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}componentDidRender(){this.charCountElement&&!this.charCountElement.innerText&&(this.charCountElement.innerText=getCharacterMessage(this.value,getMaxLength(this.maxlength)))}render(){const{label:e,error:a,placeholder:t,name:r,required:s,value:i,hint:o,charcount:n,messageAriaDescribedby:l,useFormsPattern:d,formHeadingLevel:u,headerAriaDescribedby:c,formHeading:b}=this,m=getMaxLength(this.maxlength),f=`${a?"input-error-message":""} ${n&&m?"charcount-message":""} ${l?"input-message":""}`.trim()||null,p=`${d&&b?"form-question":""} ${d?"form-description":""} ${d&&e?"input-label":""}`.trim()||null,g=getHeaderLevel(this.labelHeaderLevel),v=c?"header-message":null,x=n&&(null==i?void 0:i.length)>m,y=classnames({"usa-label":!0,"usa-label--error":a}),w=classnames({"usa-textarea":!0,"usa-input--error":a}),k=classnames({"usa-hint":!0,"usa-character-count__status":n,"usa-character-count__status--invalid":n&&m&&(null==i?void 0:i.length)>m});let T=null;if("single"===d||"multiple"===d){const e=getHeaderLevel(u);T=h(Fragment,{key:"da9fe11b7c697b6e72cc5b23e8029ceccc1799ac"},b&&h(e,{key:"74fabaea246c0848d417f97165a78967afae59ef",id:"form-question",part:"form-header"},b),h("div",{key:"0043b61e7e6e2eb67221df0b706d72eabd080d79",id:"form-description"},h("slot",{key:"729b7c53e9560104788d5305bb4f273652068c7b",name:"form-description"})))}const C=h("label",{key:"b830bea083163233ef65351556bafa56c2f8cd53",htmlFor:"input-type-textarea",id:"input-label",class:y,part:"label"},e,"multiple"===d&&h("span",{key:"0cba465862a2821795b43f642e8c758d9a03dd94",id:"header-message",class:"usa-sr-only"},e),c&&h("span",{key:"880c77d5c2424b56b6428e7774091b8997e039bd",id:"header-message",class:"usa-sr-only"},c),s&&h("span",{key:"feef3eedcadb9418ce6e95e2f72bd8359117bd96",class:"usa-label--required"}," ",instance.t("required")),o&&h("div",{key:"d823820cd16a0957bbb4de65dea232f96ce4ea59",class:"usa-hint"},o));return h(Host,{key:"58cdc13d0912f4154b4db0fc68462d39b3e0f96b"},T,h("div",{key:"6bb47f96b36bffdbe98a636c5de2e478c5352722",class:"input-wrap"},e&&g?h(g,{part:"header","aria-describedby":v},C):h(Fragment,null,C),h("slot",{key:"049b686379ec7878eb9faf1407ea1e1687904303"}),h("span",{key:"6f7b8719c05d93ca33b05a745dc9b9a30da379a7",id:"input-error-message",role:"alert"},a&&h(Fragment,{key:"14d7dcff92b3faec7c34140bd1b2079feec8084f"},h("span",{key:"7784ee6fe80c2035cccc15aea7bc6c6cdab7c3be",class:"usa-sr-only"},instance.t("error")),h("span",{key:"4cf625fdf9a9efbf37acde5a4ea0d8ac15421078",class:"usa-error-message"},a))),h("textarea",{key:"194823a4bf9dcd501720450a3e7365e73fc46593",class:w,"aria-describedby":f,"aria-invalid":a||x?"true":"false","aria-labelledby":p,onInput:this.handleInput,onBlur:this.handleBlur,id:"input-type-textarea",placeholder:t,name:r,maxLength:n?void 0:m,value:i,part:"input-type-textarea"}),!n&&m&&(null==i?void 0:i.length)>=m&&h("span",{key:"1103cce9deaeeddca27139605fdd2e26c69b8a3b",class:k,"aria-live":"polite"},instance.t("max-chars",{length:m})),n&&m&&h(Fragment,{key:"5cca336004ad5f0834f8ec3f05a9ed875137fcb4"},h("span",{key:"31ac688462a147655b5ff15a72d3af4a2d607b28","aria-hidden":"true",class:k},getCharacterMessage(this.value,getMaxLength(this.maxlength))),h("span",{key:"2d548fd0b49061416fa017ea66707de4f8ffe74b",id:"charcount-message","aria-live":"polite",class:"usa-sr-only",ref:e=>this.charCountElement=e})),isMessageSet(l)&&h("span",{key:"cf884f742ba598eedfb393db83b42db82d96cf24",id:"input-message",class:"usa-sr-only dd-privacy-hidden"},l)))}get el(){return this}static get style(){return VaTextareaStyle0}},[1,"va-textarea",{label:[1],error:[1],placeholder:[1],name:[1],required:[4],hint:[1],messageAriaDescribedby:[1,"message-aria-describedby"],maxlength:[2],value:[1537],enableAnalytics:[4,"enable-analytics"],labelHeaderLevel:[1,"label-header-level"],headerAriaDescribedby:[1,"header-aria-describedby"],useFormsPattern:[1,"use-forms-pattern"],formHeadingLevel:[2,"form-heading-level"],formHeading:[1,"form-heading"],charcount:[4]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-textarea"].forEach((e=>{"va-textarea"===e&&(customElements.get(e)||customElements.define(e,VaTextarea$1))}))}const VaTextarea=VaTextarea$1,defineCustomElement=defineCustomElement$1;export{VaTextarea,defineCustomElement};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@department-of-veterans-affairs/component-library",
   "description": "VA.gov component library. Includes React and web components.",
-  "version": "53.0.0",
+  "version": "53.1.0",
   "license": "MIT",
   "scripts": {
     "build": "webpack"
@@ -16,7 +16,7 @@
   "module": "src/main.js",
   "dependencies": {
     "@department-of-veterans-affairs/react-components": "28.1.0",
-    "@department-of-veterans-affairs/web-components": "21.0.0",
+    "@department-of-veterans-affairs/web-components": "21.1.0",
     "i18next": "^21.6.14",
     "i18next-browser-languagedetector": "^6.1.4",
     "react-focus-on": "^3.5.1",