@uswds/web-components/dist/components/usa-banner.cjs

> [!CAUTION] > Work on the next version of the Design System is happening in this repo. The code in this repository is not yet ready for production use.

"use strict";var ee=Object.defineProperty;var te=(o,e,t)=>e in o?ee(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var N=(o,e,t)=>te(o,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("lit");/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const k=globalThis,T=k.trustedTypes,R=T?T.createPolicy("lit-html",{createHTML:o=>o}):void 0,G="$lit$",g=`lit$${Math.random().toFixed(9).slice(2)}$`,J="?"+g,ne=`<${J}>`,v=document,M=()=>v.createComment(""),$=o=>o===null||typeof o!="object"&&typeof o!="function",C=Array.isArray,ae=o=>C(o)||typeof(o==null?void 0:o[Symbol.iterator])=="function",B=`[ 	
\f\r]`,A=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,W=/-->/g,I=/>/g,_=RegExp(`>|${B}(?:([^\\s"'>=/]+)(${B}*=${B}*(?:[^ 	
\f\r"'\`<>=]|("|')|))|$)`,"g"),O=/'/g,j=/"/g,K=/^(?:script|style|textarea|title)$/i,w=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),P=new WeakMap,p=v.createTreeWalker(v,129);function Q(o,e){if(!C(o)||!o.hasOwnProperty("raw"))throw Error("invalid template strings array");return R!==void 0?R.createHTML(e):e}const oe=(o,e)=>{const t=o.length-1,n=[];let a,r=e===2?"<svg>":e===3?"<math>":"",i=A;for(let u=0;u<t;u++){const s=o[u];let c,h,l=-1,f=0;for(;f<s.length&&(i.lastIndex=f,h=i.exec(s),h!==null);)f=i.lastIndex,i===A?h[1]==="!--"?i=W:h[1]!==void 0?i=I:h[2]!==void 0?(K.test(h[2])&&(a=RegExp("</"+h[2],"g")),i=_):h[3]!==void 0&&(i=_):i===_?h[0]===">"?(i=a??A,l=-1):h[1]===void 0?l=-2:(l=i.lastIndex-h[2].length,c=h[1],i=h[3]===void 0?_:h[3]==='"'?j:O):i===j||i===O?i=_:i===W||i===I?i=A:(i=_,a=void 0);const m=i===_&&o[u+1].startsWith("/>")?" ":"";r+=i===A?s+ne:l>=0?(n.push(c),s.slice(0,l)+G+s.slice(l)+g+m):s+g+(l===-2?u:m)}return[Q(o,r+(o[t]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),n]};class y{constructor({strings:e,_$litType$:t},n){let a;this.parts=[];let r=0,i=0;const u=e.length-1,s=this.parts,[c,h]=oe(e,t);if(this.el=y.createElement(c,n),p.currentNode=this.el.content,t===2||t===3){const l=this.el.content.firstChild;l.replaceWith(...l.childNodes)}for(;(a=p.nextNode())!==null&&s.length<u;){if(a.nodeType===1){if(a.hasAttributes())for(const l of a.getAttributeNames())if(l.endsWith(G)){const f=h[i++],m=a.getAttribute(l).split(g),S=/([.?@])?(.*)/.exec(f);s.push({type:1,index:r,name:S[2],strings:m,ctor:S[1]==="."?ie:S[1]==="?"?se:S[1]==="@"?le:E}),a.removeAttribute(l)}else l.startsWith(g)&&(s.push({type:6,index:r}),a.removeAttribute(l));if(K.test(a.tagName)){const l=a.textContent.split(g),f=l.length-1;if(f>0){a.textContent=T?T.emptyScript:"";for(let m=0;m<f;m++)a.append(l[m],M()),p.nextNode(),s.push({type:2,index:++r});a.append(l[f],M())}}}else if(a.nodeType===8)if(a.data===J)s.push({type:2,index:r});else{let l=-1;for(;(l=a.data.indexOf(g,l+1))!==-1;)s.push({type:7,index:r}),l+=g.length-1}r++}}static createElement(e,t){const n=v.createElement("template");return n.innerHTML=e,n}}function x(o,e,t=o,n){var i,u;if(e===w)return e;let a=n!==void 0?(i=t.o)==null?void 0:i[n]:t.l;const r=$(e)?void 0:e._$litDirective$;return(a==null?void 0:a.constructor)!==r&&((u=a==null?void 0:a._$AO)==null||u.call(a,!1),r===void 0?a=void 0:(a=new r(o),a._$AT(o,t,n)),n!==void 0?(t.o??(t.o=[]))[n]=a:t.l=a),a!==void 0&&(e=x(o,a._$AS(o,e.values),a,n)),e}class re{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:n}=this._$AD,a=((e==null?void 0:e.creationScope)??v).importNode(t,!0);p.currentNode=a;let r=p.nextNode(),i=0,u=0,s=n[0];for(;s!==void 0;){if(i===s.index){let c;s.type===2?c=new z(r,r.nextSibling,this,e):s.type===1?c=new s.ctor(r,s.name,s.strings,this,e):s.type===6&&(c=new de(r,this,e)),this._$AV.push(c),s=n[++u]}i!==(s==null?void 0:s.index)&&(r=p.nextNode(),i++)}return p.currentNode=v,a}p(e){let t=0;for(const n of this._$AV)n!==void 0&&(n.strings!==void 0?(n._$AI(e,n,t),t+=n.strings.length-2):n._$AI(e[t])),t++}}class z{get _$AU(){var e;return((e=this._$AM)==null?void 0:e._$AU)??this.v}constructor(e,t,n,a){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=n,this.options=a,this.v=(a==null?void 0:a.isConnected)??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return t!==void 0&&(e==null?void 0:e.nodeType)===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=x(this,e,t),$(e)?e===d||e==null||e===""?(this._$AH!==d&&this._$AR(),this._$AH=d):e!==this._$AH&&e!==w&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):ae(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==d&&$(this._$AH)?this._$AA.nextSibling.data=e:this.T(v.createTextNode(e)),this._$AH=e}$(e){var r;const{values:t,_$litType$:n}=e,a=typeof n=="number"?this._$AC(e):(n.el===void 0&&(n.el=y.createElement(Q(n.h,n.h[0]),this.options)),n);if(((r=this._$AH)==null?void 0:r._$AD)===a)this._$AH.p(t);else{const i=new re(a,this),u=i.u(this.options);i.p(t),this.T(u),this._$AH=i}}_$AC(e){let t=P.get(e.strings);return t===void 0&&P.set(e.strings,t=new y(e)),t}k(e){C(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let n,a=0;for(const r of e)a===t.length?t.push(n=new z(this.O(M()),this.O(M()),this,this.options)):n=t[a],n._$AI(r),a++;a<t.length&&(this._$AR(n&&n._$AB.nextSibling,a),t.length=a)}_$AR(e=this._$AA.nextSibling,t){var n;for((n=this._$AP)==null?void 0:n.call(this,!1,!0,t);e&&e!==this._$AB;){const a=e.nextSibling;e.remove(),e=a}}setConnected(e){var t;this._$AM===void 0&&(this.v=e,(t=this._$AP)==null||t.call(this,e))}}class E{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,n,a,r){this.type=1,this._$AH=d,this._$AN=void 0,this.element=e,this.name=t,this._$AM=a,this.options=r,n.length>2||n[0]!==""||n[1]!==""?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=d}_$AI(e,t=this,n,a){const r=this.strings;let i=!1;if(r===void 0)e=x(this,e,t,0),i=!$(e)||e!==this._$AH&&e!==w,i&&(this._$AH=e);else{const u=e;let s,c;for(e=r[0],s=0;s<r.length-1;s++)c=x(this,u[n+s],t,s),c===w&&(c=this._$AH[s]),i||(i=!$(c)||c!==this._$AH[s]),c===d?e=d:e!==d&&(e+=(c??"")+r[s+1]),this._$AH[s]=c}i&&!a&&this.j(e)}j(e){e===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class ie extends E{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===d?void 0:e}}class se extends E{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==d)}}class le extends E{constructor(e,t,n,a,r){super(e,t,n,a,r),this.type=5}_$AI(e,t=this){if((e=x(this,e,t,0)??d)===w)return;const n=this._$AH,a=e===d&&n!==d||e.capture!==n.capture||e.once!==n.once||e.passive!==n.passive,r=e!==d&&(n===d||a);a&&this.element.removeEventListener(this.name,this,n),r&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){var t;typeof this._$AH=="function"?this._$AH.call(((t=this.options)==null?void 0:t.host)??this.element,e):this._$AH.handleEvent(e)}}class de{constructor(e,t,n){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(e){x(this,e)}}const L=k.litHtmlPolyfillSupport;L==null||L(y,z),(k.litHtmlVersions??(k.litHtmlVersions=[])).push("3.2.0");/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const Z={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Y=o=>(...e)=>({_$litDirective$:o,values:e});class X{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,n){this.t=e,this._$AM=t,this.i=n}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */class U extends X{constructor(e){if(super(e),this.it=d,e.type!==Z.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===d||e==null)return this._t=void 0,this.it=e;if(e===w)return e;if(typeof e!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;const t=[e];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}}U.directiveName="unsafeHTML",U.resultType=1;const V=Y(U);/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const ce=Y(class extends X{constructor(o){var e;if(super(o),o.type!==Z.ATTRIBUTE||o.name!=="class"||((e=o.strings)==null?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(o){return" "+Object.keys(o).filter(e=>o[e]).join(" ")+" "}update(o,[e]){var n,a;if(this.st===void 0){this.st=new Set,o.strings!==void 0&&(this.nt=new Set(o.strings.join(" ").split(/\s/).filter(r=>r!=="")));for(const r in e)e[r]&&!((n=this.nt)!=null&&n.has(r))&&this.st.add(r);return this.render(e)}const t=o.element.classList;for(const r of this.st)r in e||(t.remove(r),this.st.delete(r));for(const r in e){const i=!!e[r];i===this.st.has(r)||(a=this.nt)!=null&&a.has(r)||(i?(t.add(r),this.st.add(r)):(t.remove(r),this.st.delete(r)))}return w}}),ue='@font-face{font-family:Roboto Mono Web;font-style:normal;font-weight:300;font-display:fallback;src:url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2")}@font-face{font-family:Roboto Mono Web;font-style:normal;font-weight:400;font-display:fallback;src:url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2")}@font-face{font-family:Roboto Mono Web;font-style:normal;font-weight:700;font-display:fallback;src:url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2")}@font-face{font-family:Roboto Mono Web;font-style:italic;font-weight:300;font-display:fallback;src:url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2")}@font-face{font-family:Roboto Mono Web;font-style:italic;font-weight:400;font-display:fallback;src:url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2")}@font-face{font-family:Roboto Mono Web;font-style:italic;font-weight:700;font-display:fallback;src:url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2")}@font-face{font-family:Source Sans Pro Web;font-style:normal;font-weight:300;font-display:fallback;src:url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2")}@font-face{font-family:Source Sans Pro Web;font-style:normal;font-weight:400;font-display:fallback;src:url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2")}@font-face{font-family:Source Sans Pro Web;font-style:normal;font-weight:700;font-display:fallback;src:url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2")}@font-face{font-family:Source Sans Pro Web;font-style:italic;font-weight:300;font-display:fallback;src:url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2")}@font-face{font-family:Source Sans Pro Web;font-style:italic;font-weight:400;font-display:fallback;src:url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2")}@font-face{font-family:Source Sans Pro Web;font-style:italic;font-weight:700;font-display:fallback;src:url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2")}@font-face{font-family:Merriweather Web;font-style:normal;font-weight:300;font-display:fallback;src:url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2")}@font-face{font-family:Merriweather Web;font-style:normal;font-weight:400;font-display:fallback;src:url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2")}@font-face{font-family:Merriweather Web;font-style:normal;font-weight:700;font-display:fallback;src:url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2")}@font-face{font-family:Merriweather Web;font-style:italic;font-weight:300;font-display:fallback;src:url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2")}@font-face{font-family:Merriweather Web;font-style:italic;font-weight:400;font-display:fallback;src:url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2")}@font-face{font-family:Merriweather Web;font-style:italic;font-weight:700;font-display:fallback;src:url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2")}.usa-media-block{align-items:flex-start;display:flex}.usa-media-block__img{flex-shrink:0;margin-right:.5rem}.usa-media-block__body{flex:1 1 0%}.usa-banner{font-family:Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;font-size:1.06rem;line-height:1.5;background-color:#f0f0f0}@media all and (min-width: 40em){.usa-banner{font-size:.87rem;padding-bottom:0rem}}.usa-banner .usa-accordion{font-family:Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;font-size:1.06rem;line-height:1.5}.usa-banner .grid-row{display:flex;flex-wrap:wrap}.usa-banner .grid-row.grid-gap-lg{margin-left:-.75rem;margin-right:-.75rem}.usa-banner .grid-row.grid-gap-lg>*{padding-left:.75rem;padding-right:.75rem}@media all and (min-width: 40em){.usa-banner .grid-row .tablet\\:grid-col-6{flex:0 1 auto;width:50%}}.usa-banner__header,.usa-banner__content{color:#1b1b1b}.usa-banner__content{margin-left:auto;margin-right:auto;max-width:64rem;padding-right:1rem;padding-left:1rem;background-color:transparent;font-size:1rem;overflow:hidden;padding:.25rem 1rem 1rem .5rem;width:100%}@media all and (min-width: 64em){.usa-banner__content{padding-left:2rem;padding-right:2rem}}@media all and (min-width: 40em){.usa-banner__content{padding-bottom:1.5rem;padding-top:1.5rem}}.usa-banner__content p:first-child{margin:0}.usa-banner__guidance{display:flex;align-items:flex-start;max-width:64ex;padding-top:1rem}@media all and (min-width: 40em){.usa-banner__guidance{padding-top:0rem}}.usa-banner__lock-image{height:1.5ex;width:1.21875ex}.usa-banner__lock-image path{fill:currentColor}@media (forced-colors: active){.usa-banner__lock-image path{fill:CanvasText}}.usa-banner__inner{margin-left:auto;margin-right:auto;max-width:64rem;padding-left:1rem;padding-right:1rem;display:flex;flex-wrap:wrap;align-items:flex-start;padding-right:0rem}@media all and (min-width: 64em){.usa-banner__inner{padding-left:2rem;padding-right:2rem}}@media all and (min-width: 40em){.usa-banner__inner{align-items:center}}.usa-banner__header{padding-bottom:.5rem;padding-top:.5rem;font-size:.8rem;font-weight:400;min-height:3rem;position:relative}@media all and (min-width: 40em){.usa-banner__header{padding-bottom:.25rem;padding-top:.25rem;min-height:0}}.usa-banner__header-text{margin-bottom:0;margin-top:0;font-size:.8rem;line-height:1.1}.usa-banner__header-action{color:#005ea2;line-height:1.1;margin-bottom:0rem;margin-top:2px;text-decoration:underline}.usa-banner__header-action:after{background-image:url(../img/usa-icons/expand_more.svg);background-repeat:no-repeat;background-position:center center;background-size:1rem 1rem;display:inline-block;height:1rem;width:1rem;content:"";vertical-align:middle;margin-left:auto}@supports (mask: url()){.usa-banner__header-action:after{background:none;background-color:#005ea2;-webkit-mask-image:url(../img/usa-icons/expand_more.svg),linear-gradient(transparent,transparent);mask-image:url(../img/usa-icons/expand_more.svg),linear-gradient(transparent,transparent);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:1rem 1rem;mask-size:1rem 1rem}.usa-banner__header-action:after:hover{background-color:#1a4480}}.usa-banner__header-action:hover:after{content:"";background-color:#1a4480}.usa-banner__header-action:visited{color:#54278f}.usa-banner__header-action:hover,.usa-banner__header-action:active{color:#1a4480}@media all and (min-width: 40em){.usa-banner__header-action{display:none}}@media (forced-colors: active){.usa-banner__header-action{color:LinkText}.usa-banner__header-action:after{background-color:ButtonText}}.usa-banner__header-flag{float:left;margin-right:.5rem;width:1rem}@media all and (min-width: 40em){.usa-banner__header-flag{margin-right:.5rem;padding-top:0rem}}.usa-banner__header--expanded{padding-right:3.5rem}@media all and (min-width: 40em){.usa-banner__header--expanded{background-color:transparent;display:block;font-size:.8rem;font-weight:400;min-height:0rem;padding-right:0rem}}.usa-banner__header--expanded .usa-banner__inner{margin-left:0rem}@media all and (min-width: 40em){.usa-banner__header--expanded .usa-banner__inner{margin-left:auto}}.usa-banner__header--expanded .usa-banner__header-action{display:none}.usa-banner__button{background-color:transparent;border:0;border-radius:0;box-shadow:none;font-weight:400;justify-content:normal;text-align:left;margin:0;padding:0;left:0;position:absolute;bottom:0;top:0;text-decoration:underline;color:#005ea2;display:block;font-size:.8rem;height:auto;line-height:1.1;padding-top:0rem;padding-left:0rem;text-decoration:none;width:auto}.usa-banner__button:hover{color:#1a4480}.usa-banner__button:active{color:#162e51}.usa-banner__button:focus{outline:.25rem solid #2491ff;outline-offset:0rem}.usa-banner__button:hover,.usa-banner__button.usa-button--hover,.usa-banner__button:disabled:hover,.usa-banner__button[aria-disabled=true]:hover,.usa-banner__button:disabled.usa-button--hover,.usa-banner__button[aria-disabled=true].usa-button--hover,.usa-banner__button:active,.usa-banner__button.usa-button--active,.usa-banner__button:disabled:active,.usa-banner__button[aria-disabled=true]:active,.usa-banner__button:disabled.usa-button--active,.usa-banner__button[aria-disabled=true].usa-button--active,.usa-banner__button:disabled:focus,.usa-banner__button[aria-disabled=true]:focus,.usa-banner__button:disabled.usa-focus,.usa-banner__button[aria-disabled=true].usa-focus,.usa-banner__button:disabled,.usa-banner__button[aria-disabled=true],.usa-banner__button.usa-button--disabled{background-color:transparent;box-shadow:none;text-decoration:underline}.usa-banner__button.usa-button--hover{color:#1a4480}.usa-banner__button.usa-button--active{color:#162e51}.usa-banner__button:disabled,.usa-banner__button[aria-disabled=true],.usa-banner__button:disabled:hover,.usa-banner__button[aria-disabled=true]:hover,.usa-banner__button[aria-disabled=true]:focus{color:#757575}@media (forced-colors: active){.usa-banner__button:disabled,.usa-banner__button[aria-disabled=true],.usa-banner__button:disabled:hover,.usa-banner__button[aria-disabled=true]:hover,.usa-banner__button[aria-disabled=true]:focus{color:GrayText}}.usa-banner__button:visited{color:#54278f}.usa-banner__button:hover,.usa-banner__button:active{color:#1a4480}@media all and (max-width: 39.99em){.usa-banner__button{width:100%}.usa-banner__button:enabled:focus{outline-offset:-.25rem}}@media all and (min-width: 40em){.usa-banner__button{color:#005ea2;position:static;bottom:auto;left:auto;right:auto;top:auto;display:inline;margin-left:.5rem;position:relative}.usa-banner__button:after{background-image:url(../img/usa-icons/expand_more.svg);background-repeat:no-repeat;background-position:center center;background-size:1rem 1rem;display:inline-block;height:1rem;width:1rem;content:"";vertical-align:middle;margin-left:2px}@supports (mask: url()){.usa-banner__button:after{background:none;background-color:#005ea2;-webkit-mask-image:url(../img/usa-icons/expand_more.svg),linear-gradient(transparent,transparent);mask-image:url(../img/usa-icons/expand_more.svg),linear-gradient(transparent,transparent);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:1rem 1rem;mask-size:1rem 1rem}.usa-banner__button:after:hover{background-color:#1a4480}}.usa-banner__button:hover:after{content:"";background-color:#1a4480}.usa-banner__button:visited{color:#54278f}.usa-banner__button:hover,.usa-banner__button:active{color:#1a4480}.usa-banner__button:after,.usa-banner__button:hover:after{position:absolute}}@media (min-width: 40em) and (forced-colors: active){.usa-banner__button:after,.usa-banner__button:hover:after{background-color:ButtonText}}@media all and (min-width: 40em){.usa-banner__button:hover{text-decoration:none}}.usa-banner__button[aria-expanded=false],.usa-banner__button[aria-expanded=false]:hover,.usa-banner__button[aria-expanded=true],.usa-banner__button[aria-expanded=true]:hover{background-image:none}@media (forced-colors: active){.usa-banner__button[aria-expanded=false]:before,.usa-banner__button[aria-expanded=false]:hover:before,.usa-banner__button[aria-expanded=true]:before,.usa-banner__button[aria-expanded=true]:hover:before{content:none}}@media all and (max-width: 39.99em){.usa-banner__button[aria-expanded=true]:after{background-image:url(../img/usa-icons/close.svg);background-repeat:no-repeat;background-position:center center;background-size:1.5rem 1.5rem;display:inline-block;height:3rem;width:3rem;content:"";vertical-align:middle;margin-left:0rem}@supports (mask: url()){.usa-banner__button[aria-expanded=true]:after{background:none;background-color:#005ea2;-webkit-mask-image:url(../img/usa-icons/close.svg),linear-gradient(transparent,transparent);mask-image:url(../img/usa-icons/close.svg),linear-gradient(transparent,transparent);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:1.5rem 1.5rem;mask-size:1.5rem 1.5rem}}.usa-banner__button[aria-expanded=true]:before{bottom:0;top:0;position:absolute;right:0;background-color:#dfe1e2;content:"";display:block;height:3rem;width:3rem}.usa-banner__button[aria-expanded=true]:after{bottom:0;top:0;position:absolute;right:0}}@media all and (min-width: 40em){.usa-banner__button[aria-expanded=true]{height:auto;padding:0rem;position:relative}.usa-banner__button[aria-expanded=true]:after{background-image:url(../img/usa-icons/expand_less.svg);background-repeat:no-repeat;background-position:center center;background-size:1rem 1rem;display:inline-block;height:1rem;width:1rem;content:"";vertical-align:middle;margin-left:2px}@supports (mask: url()){.usa-banner__button[aria-expanded=true]:after{background:none;background-color:#005ea2;-webkit-mask-image:url(../img/usa-icons/expand_less.svg),linear-gradient(transparent,transparent);mask-image:url(../img/usa-icons/expand_less.svg),linear-gradient(transparent,transparent);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:1rem 1rem;mask-size:1rem 1rem}.usa-banner__button[aria-expanded=true]:after:hover{background-color:#1a4480}}.usa-banner__button[aria-expanded=true]:hover:after{content:"";background-color:#1a4480}.usa-banner__button[aria-expanded=true]:after,.usa-banner__button[aria-expanded=true]:hover:after{position:absolute}}@media (min-width: 40em) and (forced-colors: active){.usa-banner__button[aria-expanded=true]:after,.usa-banner__button[aria-expanded=true]:hover:after{background-color:ButtonText}}.usa-banner__button-text{position:absolute;left:-999em;right:auto;text-decoration:underline}@media all and (min-width: 40em){.usa-banner__button-text{position:static;display:inline}}@media (forced-colors: active){.usa-banner__button-text{color:LinkText}}.usa-banner__icon{width:2.5rem}.usa-js-loading .usa-banner__content{position:absolute;left:-999em;right:auto}',F="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'/%3e%3c/svg%3e",D="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M16.59%208.59%2012%2013.17%207.41%208.59%206%2010l6%206%206-6z'/%3e%3c/svg%3e",q="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='m12%208-6%206%201.41%201.41L12%2010.83l4.59%204.58L18%2014z'/%3e%3c/svg%3e",he=[b.unsafeCSS(ue),b.css`
    * {
      box-sizing: border-box;
    }
    .usa-banner__inner {
      flex-wrap: nowrap;
    }

    .usa-accordion__button {
      cursor: pointer;
    }
  `,b.css`
    .usa-banner__button::after,
    .usa-banner__header-action::after {
      background-image: url(${b.unsafeCSS(D)});
      mask-image: url(${b.unsafeCSS(D)});
    }

    .usa-banner__button[aria-expanded="true"]::after {
      background-image: url(${b.unsafeCSS(F)});
      mask-image: url(${b.unsafeCSS(F)});
    }

    @media all and (min-width: 40em) {
      .usa-banner__button[aria-expanded="true"]::after {
        background-image: url(${b.unsafeCSS(q)});
        mask-image: url(${b.unsafeCSS(q)});
      }
    }
  `],be="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAsBAMAAAAncaPMAAAAAXNSR0IArs4c6QAAABtQTFRF////4EAg2z8g2z8f2z4f2j4fHjSyHjOxHTOxQEYPwgAAAIdJREFUeNrNkUENxDAMBEOhFJaCKZiCKZhCKBj2ebV3rdR71+pIq+Qxj1GyqjJ3U8VlHkc07hFm0awBYe91juq6MSI0yhSAEgkzJ4TMKiXyzFw3pgR9lmIBJlqj2AmBedf+IycExmlKZVzvZEJ4A0oBrjBl/m6PCy95B3fFAN6YuQPxhbcB4QMkEj04wQXD5wAAAABJRU5ErkJggg==",fe="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-dot-gov%3c/title%3e%3cpath%20fill='%232378C3'%20fill-rule='evenodd'%20d='m32%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032-32-14.3-32-32%2014.3-32%2032-32zm0%201.2c-17%200-30.8%2013.8-30.8%2030.8s13.8%2030.8%2030.8%2030.8%2030.8-13.8%2030.8-30.8-13.8-30.8-30.8-30.8zm11.4%2038.9c.5%200%20.9.4.9.8v1.6h-24.6v-1.6c0-.5.4-.8.9-.8zm-17.1-12.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h.8c.5%200%20.9.4.9.8v.8h-21.4v-.8c0-.5.4-.8.9-.8h.8v-9.8zm5.7-8.2%2012.3%204.9v1.6h-1.6c0%20.5-.4.8-.9.8h-19.6c-.5%200-.9-.4-.9-.8h-1.6v-1.6s12.3-4.9%2012.3-4.9z'/%3e%3c/svg%3e",me="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-https%3c/title%3e%3cpath%20fill='%23719F2A'%20fill-rule='evenodd'%20d='M32%200c17.673%200%2032%2014.327%2032%2032%200%2017.673-14.327%2032-32%2032C14.327%2064%200%2049.673%200%2032%200%2014.327%2014.327%200%2032%200zm0%201.208C14.994%201.208%201.208%2014.994%201.208%2032S14.994%2062.792%2032%2062.792%2062.792%2049.006%2062.792%2032%2049.006%201.208%2032%201.208zm0%2018.886a7.245%207.245%200%200%201%207.245%207.245v3.103h.52c.86%200%201.557.698%201.557%201.558v9.322c0%20.86-.697%201.558-1.557%201.558h-15.53c-.86%200-1.557-.697-1.557-1.558V32c0-.86.697-1.558%201.557-1.558h.52V27.34A7.245%207.245%200%200%201%2032%2020.094zm0%203.103a4.142%204.142%200%200%200-4.142%204.142v3.103h8.284V27.34A4.142%204.142%200%200%200%2032%2023.197z'/%3e%3c/svg%3e";class H extends b.LitElement{toggle(){this.isOpen=!this.isOpen,this.shadowRoot.querySelector(".usa-banner__content").toggleAttribute("hidden")}constructor(){super(),this.lang="en",this.isOpen=!1,this.tld="gov",this.data={en:{banner:{label:"Official website of the United States government",text:"An official website of the United States government",action:"Here's how you know"},domain:{heading:"Official websites use",text1:"A",text2:"website belongs to an official government organization in the United States."},https:{heading1:"Secure",heading2:"websites use HTTPS",text1:"A <strong>lock</strong>",text2:"or <strong>https://</strong> means you’ve safely connected to the",text3:"website. Share sensitive information only on official, secure websites."}},es:{banner:{label:"Un sitio oficial del Gobierno de Estados Unidos",text:"Un sitio oficial del Gobierno de Estados Unidos",action:"Así es como usted puede verificarlo"},domain:{heading:"Los sitios web oficiales usan",text1:"Un sitio web",text2:"pertenece a una organización oficial del Gobierno de Estados Unidos."},https:{heading1:"Los sitios web seguros",heading2:"usan HTTPS",text1:"Un <strong>candado</strong>",text2:"o <strong>https://</strong> significa que usted se conectó de forma segura a un sitio web",text3:"Comparta información sensible sólo en sitios web oficiales y seguros."}}}}get _bannerText(){return this.data[this.lang]||this.data.en}get _actionText(){const e=this.querySelector('[slot="banner-action"]');return e==null?void 0:e.textContent}svgLock(){return b.html`
      <span class="icon-lock">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="52"
          height="64"
          viewBox="0 0 52 64"
          class="usa-banner__lock-image"
          role="img"
          aria-labelledby="banner-lock-description-default"
          focusable="false"
        >
          <title id="banner-lock-title-default">Lock</title>
          <desc id="banner-lock-description-default">Locked padlock icon</desc>
          <path
            fill="#000000"
            fill-rule="evenodd"
            d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
          />
        </svg>
      </span>
    `}domainTemplate(e){const{domain:t}=this._bannerText;return b.html`
      <img
        class="usa-banner__icon usa-media-block__img"
        src="${fe}"
        role="img"
        alt=""
        aria-hidden="true"
      />
      <div class="usa-media-block__body">
        <p>
          <strong>
            <slot name="domain-heading"> ${t.heading} .${e} </slot>
          </strong>
          <br />
          <slot name="domain-text">
            ${t.text1} <strong>.${e}</strong> ${t.text2}
          </slot>
        </p>
      </div>
    `}httpsTemplate(e){const{https:t}=this._bannerText;return b.html`
      <img
        class="usa-banner__icon usa-media-block__img"
        src="${me}"
        role="img"
        alt=""
        aria-hidden="true"
      />
      <div class="usa-media-block__body">
        <p>
          <strong>
            <slot name="https-heading">
              ${t.heading1} .${e} ${t.heading2}
            </slot> </strong
          ><br />
          <slot name="https-text">
            ${V(t.text1)} (${this.svgLock()})
            ${V(t.text2)} .${e} ${t.text3}
          </slot>
        </p>
      </div>
    `}render(){const e={"usa-banner__header--expanded":this.isOpen},t=this.tld==="mil"?"mil":"gov",{banner:n}=this._bannerText;return b.html`
      <section class="usa-banner" aria-label=${this.label||n.label}>
        <div class="usa-accordion">
          <header class="usa-banner__header ${ce(e)}">
            <div class="usa-banner__inner">
              <div class="grid-col-auto">
                <img
                  aria-hidden="true"
                  class="usa-banner__header-flag"
                  src=${be}
                  alt=""
                />
              </div>
              <div
                class="grid-col-fill tablet:grid-col-auto"
                aria-hidden="true"
              >
                <p class="usa-banner__header-text">
                  <slot name="banner-text">${n.text}</slot>
                </p>
                <p class="usa-banner__header-action">
                  <slot name="banner-action">${n.action}</slot>
                </p>
              </div>
              <button
                type="button"
                class="usa-accordion__button usa-banner__button"
                aria-expanded="${this.isOpen}"
                aria-controls="gov-banner-default"
                @click="${this.toggle}"
              >
                <span class="usa-banner__button-text">
                  ${this._actionText||n.action}
                </span>
              </button>
            </div>
          </header>
          <div class="usa-banner__content usa-accordion__content" hidden>
            <div class="grid-row grid-gap-lg">
              <div class="usa-banner__guidance tablet:grid-col-6">
                ${this.domainTemplate(t)}
              </div>
              <div class="usa-banner__guidance tablet:grid-col-6">
                ${this.httpsTemplate(t)}
              </div>
            </div>
          </div>
        </div>
      </section>
    `}}N(H,"properties",{lang:{type:String},data:{attribute:!1},isOpen:{type:Boolean},classes:{},label:{type:String},tld:{type:String,reflect:!0}}),N(H,"styles",[he]);customElements.define("usa-banner",H);exports.UsaBanner=H;