@codeforamerica/marcomms-design-system 1.13.0 → 1.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +2477 -1
- package/dist/styles.css +1 -1
- package/package.json +14 -14
- package/src/core/grid.scss +5 -1
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2478 @@
|
|
|
1
1
|
/*! For license information please see index.js.LICENSE.txt */
|
|
2
|
-
(()=>{"use strict";const n=globalThis,e=n.ShadowRoot&&(void 0===n.ShadyCSS||n.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,t=Symbol(),r=new WeakMap;class i{constructor(n,e,r){if(this._$cssResult$=!0,r!==t)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=n,this.t=e}get styleSheet(){let n=this.o;const t=this.t;if(e&&void 0===n){const e=void 0!==t&&1===t.length;e&&(n=r.get(t)),void 0===n&&((this.o=n=new CSSStyleSheet).replaceSync(this.cssText),e&&r.set(t,n))}return n}toString(){return this.cssText}}const o=(n,...e)=>{const r=1===n.length?n[0]:e.reduce((e,t,r)=>e+(n=>{if(!0===n._$cssResult$)return n.cssText;if("number"==typeof n)return n;throw Error("Value passed to 'css' function must be a 'css' function result: "+n+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(t)+n[r+1],n[0]);return new i(r,n,t)},a=(t,r)=>{if(e)t.adoptedStyleSheets=r.map(n=>n instanceof CSSStyleSheet?n:n.styleSheet);else for(const e of r){const r=document.createElement("style"),i=n.litNonce;void 0!==i&&r.setAttribute("nonce",i),r.textContent=e.cssText,t.appendChild(r)}},s=e?n=>n:n=>n instanceof CSSStyleSheet?(n=>{let e="";for(const t of n.cssRules)e+=t.cssText;return(n=>new i("string"==typeof n?n:n+"",void 0,t))(e)})(n):n,{is:l,defineProperty:c,getOwnPropertyDescriptor:h,getOwnPropertyNames:d,getOwnPropertySymbols:u,getPrototypeOf:p}=Object,f=globalThis,v=f.trustedTypes,g=v?v.emptyScript:"",b=f.reactiveElementPolyfillSupport,m=(n,e)=>n,w={toAttribute(n,e){switch(e){case Boolean:n=n?g:null;break;case Object:case Array:n=null==n?n:JSON.stringify(n)}return n},fromAttribute(n,e){let t=n;switch(e){case Boolean:t=null!==n;break;case Number:t=null===n?null:Number(n);break;case Object:case Array:try{t=JSON.parse(n)}catch(n){t=null}}return t}},y=(n,e)=>!l(n,e),x={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:y};Symbol.metadata??=Symbol("metadata"),f.litPropertyMetadata??=new WeakMap;class k extends HTMLElement{static addInitializer(n){this._$Ei(),(this.l??=[]).push(n)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(n,e=x){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(n)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(n,e),!e.noAccessor){const t=Symbol(),r=this.getPropertyDescriptor(n,t,e);void 0!==r&&c(this.prototype,n,r)}}static getPropertyDescriptor(n,e,t){const{get:r,set:i}=h(this.prototype,n)??{get(){return this[e]},set(n){this[e]=n}};return{get:r,set(e){const o=r?.call(this);i?.call(this,e),this.requestUpdate(n,o,t)},configurable:!0,enumerable:!0}}static getPropertyOptions(n){return this.elementProperties.get(n)??x}static _$Ei(){if(this.hasOwnProperty(m("elementProperties")))return;const n=p(this);n.finalize(),void 0!==n.l&&(this.l=[...n.l]),this.elementProperties=new Map(n.elementProperties)}static finalize(){if(this.hasOwnProperty(m("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(m("properties"))){const n=this.properties,e=[...d(n),...u(n)];for(const t of e)this.createProperty(t,n[t])}const n=this[Symbol.metadata];if(null!==n){const e=litPropertyMetadata.get(n);if(void 0!==e)for(const[n,t]of e)this.elementProperties.set(n,t)}this._$Eh=new Map;for(const[n,e]of this.elementProperties){const t=this._$Eu(n,e);void 0!==t&&this._$Eh.set(t,n)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(n){const e=[];if(Array.isArray(n)){const t=new Set(n.flat(1/0).reverse());for(const n of t)e.unshift(s(n))}else void 0!==n&&e.push(s(n));return e}static _$Eu(n,e){const t=e.attribute;return!1===t?void 0:"string"==typeof t?t:"string"==typeof n?n.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(n=>this.enableUpdating=n),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(n=>n(this))}addController(n){(this._$EO??=new Set).add(n),void 0!==this.renderRoot&&this.isConnected&&n.hostConnected?.()}removeController(n){this._$EO?.delete(n)}_$E_(){const n=new Map,e=this.constructor.elementProperties;for(const t of e.keys())this.hasOwnProperty(t)&&(n.set(t,this[t]),delete this[t]);n.size>0&&(this._$Ep=n)}createRenderRoot(){const n=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return a(n,this.constructor.elementStyles),n}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(n=>n.hostConnected?.())}enableUpdating(n){}disconnectedCallback(){this._$EO?.forEach(n=>n.hostDisconnected?.())}attributeChangedCallback(n,e,t){this._$AK(n,t)}_$ET(n,e){const t=this.constructor.elementProperties.get(n),r=this.constructor._$Eu(n,t);if(void 0!==r&&!0===t.reflect){const i=(void 0!==t.converter?.toAttribute?t.converter:w).toAttribute(e,t.type);this._$Em=n,null==i?this.removeAttribute(r):this.setAttribute(r,i),this._$Em=null}}_$AK(n,e){const t=this.constructor,r=t._$Eh.get(n);if(void 0!==r&&this._$Em!==r){const n=t.getPropertyOptions(r),i="function"==typeof n.converter?{fromAttribute:n.converter}:void 0!==n.converter?.fromAttribute?n.converter:w;this._$Em=r;const o=i.fromAttribute(e,n.type);this[r]=o??this._$Ej?.get(r)??o,this._$Em=null}}requestUpdate(n,e,t){if(void 0!==n){const r=this.constructor,i=this[n];if(t??=r.getPropertyOptions(n),!((t.hasChanged??y)(i,e)||t.useDefault&&t.reflect&&i===this._$Ej?.get(n)&&!this.hasAttribute(r._$Eu(n,t))))return;this.C(n,e,t)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(n,e,{useDefault:t,reflect:r,wrapped:i},o){t&&!(this._$Ej??=new Map).has(n)&&(this._$Ej.set(n,o??e??this[n]),!0!==i||void 0!==o)||(this._$AL.has(n)||(this.hasUpdated||t||(e=void 0),this._$AL.set(n,e)),!0===r&&this._$Em!==n&&(this._$Eq??=new Set).add(n))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(n){Promise.reject(n)}const n=this.scheduleUpdate();return null!=n&&await n,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[n,e]of this._$Ep)this[n]=e;this._$Ep=void 0}const n=this.constructor.elementProperties;if(n.size>0)for(const[e,t]of n){const{wrapped:n}=t,r=this[e];!0!==n||this._$AL.has(e)||void 0===r||this.C(e,void 0,t,r)}}let n=!1;const e=this._$AL;try{n=this.shouldUpdate(e),n?(this.willUpdate(e),this._$EO?.forEach(n=>n.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw n=!1,this._$EM(),e}n&&this._$AE(e)}willUpdate(n){}_$AE(n){this._$EO?.forEach(n=>n.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(n)),this.updated(n)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(n){return!0}update(n){this._$Eq&&=this._$Eq.forEach(n=>this._$ET(n,this[n])),this._$EM()}updated(n){}firstUpdated(n){}}k.elementStyles=[],k.shadowRootOptions={mode:"open"},k[m("elementProperties")]=new Map,k[m("finalized")]=new Map,b?.({ReactiveElement:k}),(f.reactiveElementVersions??=[]).push("2.1.1");const z=globalThis,j=z.trustedTypes,_=j?j.createPolicy("lit-html",{createHTML:n=>n}):void 0,E="$lit$",S=`lit$${Math.random().toFixed(9).slice(2)}$`,$="?"+S,A=`<${$}>`,P=document,O=()=>P.createComment(""),C=n=>null===n||"object"!=typeof n&&"function"!=typeof n,T=Array.isArray,U="[ \t\n\f\r]",L=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,M=/-->/g,H=/>/g,N=RegExp(`>|${U}(?:([^\\s"'>=/]+)(${U}*=${U}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),R=/'/g,I=/"/g,B=/^(?:script|style|textarea|title)$/i,F=n=>(e,...t)=>({_$litType$:n,strings:e,values:t}),q=F(1),V=F(2),D=(F(3),Symbol.for("lit-noChange")),W=Symbol.for("lit-nothing"),Z=new WeakMap,K=P.createTreeWalker(P,129);function J(n,e){if(!T(n)||!n.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==_?_.createHTML(e):e}const X=(n,e)=>{const t=n.length-1,r=[];let i,o=2===e?"<svg>":3===e?"<math>":"",a=L;for(let e=0;e<t;e++){const t=n[e];let s,l,c=-1,h=0;for(;h<t.length&&(a.lastIndex=h,l=a.exec(t),null!==l);)h=a.lastIndex,a===L?"!--"===l[1]?a=M:void 0!==l[1]?a=H:void 0!==l[2]?(B.test(l[2])&&(i=RegExp("</"+l[2],"g")),a=N):void 0!==l[3]&&(a=N):a===N?">"===l[0]?(a=i??L,c=-1):void 0===l[1]?c=-2:(c=a.lastIndex-l[2].length,s=l[1],a=void 0===l[3]?N:'"'===l[3]?I:R):a===I||a===R?a=N:a===M||a===H?a=L:(a=N,i=void 0);const d=a===N&&n[e+1].startsWith("/>")?" ":"";o+=a===L?t+A:c>=0?(r.push(s),t.slice(0,c)+E+t.slice(c)+S+d):t+S+(-2===c?e:d)}return[J(n,o+(n[t]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),r]};class Y{constructor({strings:n,_$litType$:e},t){let r;this.parts=[];let i=0,o=0;const a=n.length-1,s=this.parts,[l,c]=X(n,e);if(this.el=Y.createElement(l,t),K.currentNode=this.el.content,2===e||3===e){const n=this.el.content.firstChild;n.replaceWith(...n.childNodes)}for(;null!==(r=K.nextNode())&&s.length<a;){if(1===r.nodeType){if(r.hasAttributes())for(const n of r.getAttributeNames())if(n.endsWith(E)){const e=c[o++],t=r.getAttribute(n).split(S),a=/([.?@])?(.*)/.exec(e);s.push({type:1,index:i,name:a[2],strings:t,ctor:"."===a[1]?tn:"?"===a[1]?rn:"@"===a[1]?on:en}),r.removeAttribute(n)}else n.startsWith(S)&&(s.push({type:6,index:i}),r.removeAttribute(n));if(B.test(r.tagName)){const n=r.textContent.split(S),e=n.length-1;if(e>0){r.textContent=j?j.emptyScript:"";for(let t=0;t<e;t++)r.append(n[t],O()),K.nextNode(),s.push({type:2,index:++i});r.append(n[e],O())}}}else if(8===r.nodeType)if(r.data===$)s.push({type:2,index:i});else{let n=-1;for(;-1!==(n=r.data.indexOf(S,n+1));)s.push({type:7,index:i}),n+=S.length-1}i++}}static createElement(n,e){const t=P.createElement("template");return t.innerHTML=n,t}}function G(n,e,t=n,r){if(e===D)return e;let i=void 0!==r?t._$Co?.[r]:t._$Cl;const o=C(e)?void 0:e._$litDirective$;return i?.constructor!==o&&(i?._$AO?.(!1),void 0===o?i=void 0:(i=new o(n),i._$AT(n,t,r)),void 0!==r?(t._$Co??=[])[r]=i:t._$Cl=i),void 0!==i&&(e=G(n,i._$AS(n,e.values),i,r)),e}class Q{constructor(n,e){this._$AV=[],this._$AN=void 0,this._$AD=n,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(n){const{el:{content:e},parts:t}=this._$AD,r=(n?.creationScope??P).importNode(e,!0);K.currentNode=r;let i=K.nextNode(),o=0,a=0,s=t[0];for(;void 0!==s;){if(o===s.index){let e;2===s.type?e=new nn(i,i.nextSibling,this,n):1===s.type?e=new s.ctor(i,s.name,s.strings,this,n):6===s.type&&(e=new an(i,this,n)),this._$AV.push(e),s=t[++a]}o!==s?.index&&(i=K.nextNode(),o++)}return K.currentNode=P,r}p(n){let e=0;for(const t of this._$AV)void 0!==t&&(void 0!==t.strings?(t._$AI(n,t,e),e+=t.strings.length-2):t._$AI(n[e])),e++}}class nn{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(n,e,t,r){this.type=2,this._$AH=W,this._$AN=void 0,this._$AA=n,this._$AB=e,this._$AM=t,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let n=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===n?.nodeType&&(n=e.parentNode),n}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(n,e=this){n=G(this,n,e),C(n)?n===W||null==n||""===n?(this._$AH!==W&&this._$AR(),this._$AH=W):n!==this._$AH&&n!==D&&this._(n):void 0!==n._$litType$?this.$(n):void 0!==n.nodeType?this.T(n):(n=>T(n)||"function"==typeof n?.[Symbol.iterator])(n)?this.k(n):this._(n)}O(n){return this._$AA.parentNode.insertBefore(n,this._$AB)}T(n){this._$AH!==n&&(this._$AR(),this._$AH=this.O(n))}_(n){this._$AH!==W&&C(this._$AH)?this._$AA.nextSibling.data=n:this.T(P.createTextNode(n)),this._$AH=n}$(n){const{values:e,_$litType$:t}=n,r="number"==typeof t?this._$AC(n):(void 0===t.el&&(t.el=Y.createElement(J(t.h,t.h[0]),this.options)),t);if(this._$AH?._$AD===r)this._$AH.p(e);else{const n=new Q(r,this),t=n.u(this.options);n.p(e),this.T(t),this._$AH=n}}_$AC(n){let e=Z.get(n.strings);return void 0===e&&Z.set(n.strings,e=new Y(n)),e}k(n){T(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let t,r=0;for(const i of n)r===e.length?e.push(t=new nn(this.O(O()),this.O(O()),this,this.options)):t=e[r],t._$AI(i),r++;r<e.length&&(this._$AR(t&&t._$AB.nextSibling,r),e.length=r)}_$AR(n=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);n!==this._$AB;){const e=n.nextSibling;n.remove(),n=e}}setConnected(n){void 0===this._$AM&&(this._$Cv=n,this._$AP?.(n))}}class en{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(n,e,t,r,i){this.type=1,this._$AH=W,this._$AN=void 0,this.element=n,this.name=e,this._$AM=r,this.options=i,t.length>2||""!==t[0]||""!==t[1]?(this._$AH=Array(t.length-1).fill(new String),this.strings=t):this._$AH=W}_$AI(n,e=this,t,r){const i=this.strings;let o=!1;if(void 0===i)n=G(this,n,e,0),o=!C(n)||n!==this._$AH&&n!==D,o&&(this._$AH=n);else{const r=n;let a,s;for(n=i[0],a=0;a<i.length-1;a++)s=G(this,r[t+a],e,a),s===D&&(s=this._$AH[a]),o||=!C(s)||s!==this._$AH[a],s===W?n=W:n!==W&&(n+=(s??"")+i[a+1]),this._$AH[a]=s}o&&!r&&this.j(n)}j(n){n===W?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,n??"")}}class tn extends en{constructor(){super(...arguments),this.type=3}j(n){this.element[this.name]=n===W?void 0:n}}class rn extends en{constructor(){super(...arguments),this.type=4}j(n){this.element.toggleAttribute(this.name,!!n&&n!==W)}}class on extends en{constructor(n,e,t,r,i){super(n,e,t,r,i),this.type=5}_$AI(n,e=this){if((n=G(this,n,e,0)??W)===D)return;const t=this._$AH,r=n===W&&t!==W||n.capture!==t.capture||n.once!==t.once||n.passive!==t.passive,i=n!==W&&(t===W||r);r&&this.element.removeEventListener(this.name,this,t),i&&this.element.addEventListener(this.name,this,n),this._$AH=n}handleEvent(n){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,n):this._$AH.handleEvent(n)}}class an{constructor(n,e,t){this.element=n,this.type=6,this._$AN=void 0,this._$AM=e,this.options=t}get _$AU(){return this._$AM._$AU}_$AI(n){G(this,n)}}const sn=z.litHtmlPolyfillSupport;sn?.(Y,nn),(z.litHtmlVersions??=[]).push("3.3.1");const ln=globalThis;class cn extends k{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const n=super.createRenderRoot();return this.renderOptions.renderBefore??=n.firstChild,n}update(n){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(n),this._$Do=((n,e,t)=>{const r=t?.renderBefore??e;let i=r._$litPart$;if(void 0===i){const n=t?.renderBefore??null;r._$litPart$=i=new nn(e.insertBefore(O(),n),n,void 0,t??{})}return i._$AI(n),i})(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return D}}cn._$litElement$=!0,cn.finalized=!0,ln.litElementHydrateSupport?.({LitElement:cn});const hn=ln.litElementPolyfillSupport;var dn;hn?.({LitElement:cn}),(ln.litElementVersions??=[]).push("4.2.1");const un=o(dn||(dn=function(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}(["\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n *:focus-visible,\n *:target {\n outline: var(--focus-outline);\n position: relative;\n }\n"])));var pn,fn,vn,gn,bn,mn,wn,yn,xn,kn,zn;function jn(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function _n(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}class En extends cn{render(){return q(pn||(pn=jn(["\n <style>\n :host {\n --size: var(--spacing-layout-",", 8rem);\n }\n </style>\n <picture>\n ","\n </picture>\n "])),this.size||"4",this.imageUrl?q(fn||(fn=jn(['\n <img\n src="','"\n loading="lazy"\n alt="','"\n />\n '])),this.imageUrl,this.altText):W)}}function Sn(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function $n(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}_n(En,"properties",{imageUrl:{},altText:{},size:{}}),_n(En,"styles",[un,o(vn||(vn=jn(["\n :host {\n --bg-color: var(--blue-20);\n\n display: inline-block;\n max-width: 100%;\n }\n\n picture {\n aspect-ratio: 1 / 1;\n background-color: var(--bg-color);\n border-radius: 50%;\n display: block;\n max-width: 100%;\n overflow: hidden;\n width: var(--size);\n }\n\n img {\n display: block;\n height: 100%;\n object-fit: cover;\n width: 100%;\n }\n "])))]),customElements.get("cfa-avatar")||customElements.define("cfa-avatar",En);class An extends cn{constructor(){super(),this.shape="1"}blobTemplate(){let n;switch(this.shape){case"1":n=q(gn||(gn=Sn(['<svg\n width="628"\n height="577"\n viewBox="0 0 628 577"\n fill="none"\n xmlns="http://www.w3.org/2000/svg"\n >\n <path\n fill-rule="evenodd"\n clip-rule="evenodd"\n d="M304.482 3.44206C399.413 -5.50752 504.225 1.17063 567.446 72.5295C633.526 147.115 639.549 256.491 613.992 352.793C589.57 444.814 526.084 523.087 438.164 559.679C355.477 594.092 265.039 570.416 184.315 531.621C103.504 492.784 22.0294 438.546 3.59029 350.826C-14.5863 264.355 39.2746 183.666 97.1329 116.868C151.394 54.223 221.956 11.2221 304.482 3.44206Z"\n />\n </svg>'])));break;case"2":n=q(bn||(bn=Sn(['<svg\n width="580"\n height="592"\n viewBox="0 0 580 592"\n fill="none"\n xmlns="http://www.w3.org/2000/svg"\n >\n <path\n d="M238.814 591.215C210.461 592.077 182.849 587.767 155.66 580.979C60.4457 557.059 4.05766 489.933 0.460672 390.376C-2.50155 306.442 8.71258 223.693 37.2769 144.499C73.2468 44.6185 170.894 -12.5948 276.159 2.81295C358.996 14.9883 437.177 39.3389 499.172 100.108C588.039 187.167 604.437 293.512 544.346 402.767C514.618 456.855 477.59 505.988 426.386 541.544C369.892 580.656 304.723 587.767 238.814 591.215Z"\n />\n </svg>'])));break;case"3":n=q(mn||(mn=Sn(['<svg\n width="620"\n height="613"\n viewBox="0 0 620 613"\n fill="none"\n xmlns="http://www.w3.org/2000/svg"\n >\n <path\n fill-rule="evenodd"\n clip-rule="evenodd"\n d="M619.142 301.769C615.581 212.393 536.92 153.752 466.654 98.7402C397.998 44.9883 323.934 -10.5844 236.421 2.12929C141.656 15.8965 53.9975 76.8338 15.687 164.256C-20.6955 247.277 16.2818 336.243 54.5575 417.127C92.4807 497.265 137.965 580.831 224.139 604.752C314.166 629.742 409.183 593.817 484.092 536.359C559.738 478.336 622.883 395.641 619.142 301.769Z"\n />\n </svg>'])));break;case"4":n=q(wn||(wn=Sn(['<svg\n width="656"\n height="566"\n viewBox="0 0 656 566"\n fill="none"\n xmlns="http://www.w3.org/2000/svg"\n >\n <path\n fill-rule="evenodd"\n clip-rule="evenodd"\n d="M332.011 564.695C235.808 569.34 135.091 552.4 71.2946 488.381C4.66596 421.518 -10.0767 327.738 8.2158 239.764C27.3773 147.61 73.5054 52.3693 169.88 14.2546C263.181 -22.6447 364.8 21.5179 455.491 62.8734C540.631 101.698 627.337 150.367 649.771 233.088C672.265 316.032 626.78 399.503 564.43 464.569C505.684 525.875 422.382 560.331 332.011 564.695Z"\n />\n </svg>'])));break;default:n=q(yn||(yn=Sn(['<svg\n width="628"\n height="577"\n viewBox="0 0 628 577"\n fill="none"\n xmlns="http://www.w3.org/2000/svg"\n >\n <path\n fill-rule="evenodd"\n clip-rule="evenodd"\n d="M304.482 3.44206C399.413 -5.50752 504.225 1.17063 567.446 72.5295C633.526 147.115 639.549 256.491 613.992 352.793C589.57 444.814 526.084 523.087 438.164 559.679C355.477 594.092 265.039 570.416 184.315 531.621C103.504 492.784 22.0294 438.546 3.59029 350.826C-14.5863 264.355 39.2746 183.666 97.1329 116.868C151.394 54.223 221.956 11.2221 304.482 3.44206Z"\n />\n </svg>'])))}return n}render(){const n=this.color?"var(--".concat(this.color,")"):"var(--blue-20)";return q(xn||(xn=Sn([' \n <div \n class="blob" \n style="--color: ','"\n >\n ',"\n </div> \n "])),n,this.blobTemplate())}}$n(An,"properties",{color:{},shape:{},styles:{}}),$n(An,"styles",[un,o(kn||(kn=Sn(["\n :host {\n --color: var(--blue-20);\n\n display: block;\n }\n\n .blob,\n svg {\n height: 100%;\n width: 100%;\n }\n\n svg path {\n fill: var(--color, #fff);\n }\n "])))]),customElements.get("cfa-blob")||customElements.define("cfa-blob",An);const Pn=o(zn||(zn=function(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}(['\n .cfa-button,\n a.cfa-button, \n .cfa-button > a,\n .wp-block-button > * {\n --bg-color: var(--white);\n --border-color: transparent;\n --font-family: var(--font-family-sans-serif);\n --font-size: var(--font-size-base);\n --hover-bg-color: var(--blue-20);\n --hover-border-color: var(--border-color);\n --line-height: var(--line-height-base);\n --text-color: var(--purple-80);\n\n background-color: var(--bg-color);\n border: var(--hairline) solid var(--border-color);\n border-radius: var(--rounded-corners);\n box-shadow: var(--shadow-small);\n color: var(--text-color);\n cursor: pointer;\n display: block;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-weight: bold;\n padding: var(--spacing-component-2) var(--spacing-component-3);\n text-align: center;\n text-decoration: none;\n transition: background-color 0.5s, box-shadow 0.5s;\n\n &:hover {\n background-color: var(--hover-bg-color);\n border-color: var(--hover-border-color);\n box-shadow: var(--shadow-medium);\n color: var(--text-color);\n }\n }\n\n @media (max-width: 768px) {\n .cfa-button, \n a.cfa-button, \n .cfa-button > a,\n .wp-block-button > * {\n width: 100%;\n \n & + & {\n margin-block-start: var(--spacing-layout-half);\n }\n }\n\n .wp-block-button {\n width: 100%;\n }\n }\n\n @media (min-width: 768px) {\n .cfa-button, \n a.cfa-button, \n .cfa-button > a,\n .wp-block-button > * {\n display: inline-block;\n\n & {\n margin-block: var(--spacing-component-2);\n margin-inline-end: var(--spacing-component-2);\n }\n }\n }\n\n // Themes / variants\n\n .cfa-button--primary,\n a.cfa-button--primary,\n .cfa-button--primary > a,\n .wp-block-button.is-style-primary > * {\n --bg-color: var(--red-60);\n --hover-bg-color: var(--red-80);\n --text-color: var(--white,);\n }\n\n .cfa-button--outline,\n a.cfa-button--outline,\n .cfa-button--outline > a,\n .wp-block-button.is-style-outline > * {\n --border-color: var(--black-20);\n --bg-color: transparent;\n }\n\n .cfa-button--outline-white,\n a.cfa-button--outline-white,\n .cfa-button--outline-white > a,\n .wp-block-button.is-style-outline-white > * {\n --border-color: var(--white);\n --bg-color: transparent;\n --hover-bg-color: var(--black-20);\n --shadow-color: var(--white-20);\n --text-color: var(--white);\n }\n\n .cfa-button--prominent-link,\n a.cfa-button--prominent-link,\n .cfa-button--prominent-link > a,\n .wp-block-button.is-style-prominent-link > * {\n --accent-color: var(--purple-60);\n\n background: unset;\n box-shadow: unset;\n color: inherit;\n font-weight: bold;\n padding: 0;\n text-decoration: underline;\n text-decoration-color: var(--accent-color);\n text-decoration-thickness: var(--medium);\n text-underline-offset: 0.4em;\n transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; \n\n &:hover {\n --accent-color: var(--red-60);\n \n background: unset;\n box-shadow: unset;\n }\n\n &::after {\n @include icon.icon;\n \n content: "arrow_right_alt";\n display: inline-block;\n padding-inline-start: 0.1em;\n text-decoration: none;\n transition: transform 0.2s ease-in-out;\n width: 1em;\n }\n\n &:hover::after {\n transform: translateX(0.3em);\n }\n\n cfa-icon {\n text-decoration: none;\n }\n }\n\n // Sizes\n\n .cfa-button--sm,\n a.cfa-button--sm,\n .cfa-button--sm > a {\n --font-size: var(--font-size-small);\n --line-height: var(--line-height-small);\n }\n\n .cfa-button--md,\n a.cfa-button--md,\n .cfa-button--md > a {\n --font-size: var(--font-size-base);\n --line-height: var(--line-height-base);\n }\n'])));var On,Cn,Tn;function Un(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}class Ln extends cn{render(){return q(On||(On=Un(['\n <span class="icon">\n <slot></slot>\n </span>\n '])))}}!function(n,e,t){(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t}(Ln,"styles",[un,o(Cn||(Cn=Un(['\n :host {\n --size: 1.2em;\n\n display: inline;\n line-height: inherit;\n }\n\n .icon {\n -webkit-font-feature-settings: "liga";\n direction: ltr;\n display: inline-block;\n font-family: "Material Symbols Rounded";\n font-size: var(--size);\n font-style: normal;\n font-weight: normal;\n letter-spacing: normal;\n margin-top: -0.1em;\n text-transform: none;\n vertical-align: middle;\n white-space: nowrap;\n word-wrap: normal;\n }\n '])))]),customElements.get("cfa-icon")||customElements.define("cfa-icon",Ln);const Mn=o(Tn||(Tn=function(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}(['\n .serif {\n font-family: var(--font-family-serif) !important;\n }\n\n .sans-serif {\n font-family: var(--font-family-sans-serif) !important;\n }\n\n .normal {\n font-weight: normal !important;\n }\n\n .strong {\n font-weight: bold !important;\n }\n\n italic {\n font-style: italic !important;\n }\n\n .display 1 {\n font-family: var(--font-family-display-1);\n font-size: var(--font-size-display-1);\n font-weight: var(--font-weight-display-1);\n letter-spacing: var(--letter-spacing-display-1);\n line-height: var(--line-height-display-1);\n }\n\n .display-2 {\n font-family: var(--font-family-display-2);\n font-size: var(--font-size-display-2);\n font-weight: var(--font-weight-display-2);\n letter-spacing: var(--letter-spacing-display-2);\n line-height: var(--line-height-display-2);\n }\n\n .h1 {\n font-family: var(--font-family-h1);\n font-size: var(--font-size-h1);\n font-weight: var(--font-weight-h1);\n letter-spacing: var(--letter-spacing-h1);\n line-height: var(--line-height-h1);\n }\n\n .h2 {\n font-family: var(--font-family-h2);\n font-size: var(--font-size-h2);\n font-weight: var(--font-weight-h2);\n letter-spacing: var(--letter-spacing-h2);\n line-height: var(--line-height-h2);\n }\n\n .h3 {\n font-family: var(--font-family-h3);\n font-size: var(--font-size-h3);\n font-weight: var(--font-weight-h3);\n letter-spacing: var(--letter-spacing-h3);\n line-height: var(--line-height-h3);\n }\n\n .h4 {\n font-family: var(--font-family-h4);\n font-size: var(--font-size-h4);\n font-weight: var(--font-weight-h4);\n letter-spacing: var(--letter-spacing-h4);\n line-height: var(--line-height-h4);\n }\n\n .eyebrow {\n font-family: var(--font-family-eyebrow);\n font-size: var(--font-size-eyebrow);\n font-weight: var(--font-weight-eyebrow);\n letter-spacing: var(--letter-spacing-eyebrow);\n line-height: var(--line-height-eyebrow);\n text-transform: uppercase;\n }\n\n .eyebrow-with-line {\n align-items: center;\n color: var(--text-color);\n display: flex;\n font-family: var(--font-family-eyebrow);\n font-size: var(--font-size-eyebrow);\n font-weight: var(--font-weight-eyebrow);\n letter-spacing: var(--letter-spacing-eyebrow);\n line-height: var(--line-height-eyebrow);\n margin-block-end: var(--spacing-layout-half);\n position: relative;\n text-transform: uppercase;\n }\n\n .eyebrow-with-line::after {\n border-block-end: var(--hairline) solid var(--text-color);\n content: "";\n flex-grow: 1;\n margin-left: var(--spacing-component-3);\n }\n\n .small {\n font-size: var(--font-size-small);\n letter-spacing: var(--letter-spacing-small);\n line-height: var(--line-height-small);\n }\n\n .subtle {\n color: var(--text-color-subtle);\n }\n'])));var Hn,Nn,Rn,In,Bn,Fn,qn,Vn,Dn,Wn,Zn,Kn,Jn,Xn,Yn,Gn,Qn,ne,ee,te,re,ie,oe,ae,se,le,ce,he,de,ue,pe,fe,ve,ge,be,me,we,ye,xe,ke,ze,je,_e,Ee,Se,$e,Ae,Pe,Oe,Ce,Te,Ue,Le,Me,He,Ne,Re,Ie,Be,Fe,qe,Ve,De,We,Ze,Ke,Je,Xe,Ye,Ge,Qe,nt,et,tt,rt,it,ot,at,st,lt,ct,ht,dt,ut,pt,ft,vt,gt,bt,mt,wt,yt,xt,kt,zt,jt,_t,Et,St,$t,At,Pt,Ot,Ct,Tt,Ut,Lt,Mt,Ht,Nt;function Rt(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function It(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}class Bt extends cn{render(){return q(Hn||(Hn=Rt(['\n <div class="label small strong" color="','">\n <slot />\n </div>\n '])),this.color)}}function Ft(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}It(Bt,"properties",{color:""}),It(Bt,"styles",[un,Mn,o(Nn||(Nn=Rt(['\n .label {\n --background-color: var(--gray-20);\n --text-color: var(--black, #000);\n\n background-color: var(--background-color);\n color: var(--text-color);\n display: inline-block;\n line-height: 1em;\n padding: var(--spacing-component-2) var(--spacing-component-3);\n }\n\n .label[color="white"] {\n --background-color: var(--white, #fff);\n box-shadow: var(--shadow-small);\n }\n\n .label[color="purple"] {\n --background-color: var(--purple-20);\n }\n\n .label[color="red"] {\n --background-color: var(--red-20);\n }\n\n .label[color="blue"] {\n --background-color: var(--blue-20);\n }\n\n .label[color="green"] {\n --background-color: var(--green-20);\n }\n\n .label[color="yellow"] {\n --background-color: var(--yellow-20);\n }\n '])))]),customElements.get("cfa-label")||customElements.define("cfa-label",Bt);class qt extends cn{render(){return q(Rn||(Rn=Ft([" <slot /> "])))}}function Vt(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function Dt(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}!function(n,e,t){(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t}(qt,"styles",[un,o(In||(In=Ft(["\n :host {\n --bg-color: var(--gray-20);\n --text-color: var(--gray-80);\n\n background-color: var(--bg-color);\n border-radius: var(--spacing-component-3);\n color: var(--text-color);\n display: inline-block;\n font-size: var(--font-size-small);\n font-weight: bold;\n line-height: 1;\n margin-right: var(--spacing-component-1);\n padding: var(--spacing-component-1) var(--spacing-component-2);\n vertical-align: middle;\n }\n "])))]),customElements.get("cfa-pill")||customElements.define("cfa-pill",qt);class Wt extends cn{render(){return q(Bn||(Bn=Vt(["\n <blockquote>\n <slot />\n </blockquote>\n "])))}}function Zt(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function Kt(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}Dt(Wt,"properties",{}),Dt(Wt,"styles",[un,o(Fn||(Fn=Vt(["\n :host {\n --color: var(--purple-60);\n\n display: block;\n }\n blockquote {\n border-inline-start: var(--thick) solid var(--color);\n color: var(--color);\n font-size: var(--font-size-h3);\n font-weight: 600;\n line-height: var(--line-height-h3);\n margin: 0;\n padding: var(--spacing-layout-half) var(--spacing-layout-1);\n }\n p {\n margin: 0;\n }\n p + p {\n margin-block-start: var(--spacing-layout-half);\n }\n "])))]),customElements.get("cfa-pullquote")||customElements.define("cfa-pullquote",Wt);class Jt extends cn{render(){return q(qn||(qn=Zt(['\n <figure>\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 339.42 264.4" aria-hidden="true" shape-rendering="geometricPrecision">\n <path d="M91.69,126.5c-9.19,0-15.39,1-18.59,3,4.01-16,12.59-32.41,25.8-49.21h0c12.8-15.99,26.61-27.79,41.4-35.39h1.2l.61-1.21c3.19-1.2,4.79-4.2,4.79-9,0-3.2-1.39-6-4.21-8.4L104.9,2.29c-1.61-1.2-3.79-1.79-6.6-1.79l-4.2,1.2c-28.8,20.8-51.4,45.6-67.8,74.4C9.09,106.1.5,137.7.5,170.9c0,28.39,8.21,51.2,24.61,68.39,14.79,16.4,33.4,24.61,55.79,24.61,19.61,0,36.6-7.01,51-21,14-14.4,21-31.4,21-51s-6-34.8-18-46.8c-11.6-12.39-26-18.6-43.21-18.6Z"/>\n <path d="M276.52,126.5c-8.39,0-14.39,1-18,3,4.01-16,12.79-32.4,26.4-49.21,13.21-16,27-27.79,41.4-35.39l.6-1.21c4-1.2,6-4.2,6-9,0-2.8-1.39-5.61-4.21-8.4l-37.8-24c-2-1.2-4.21-1.79-6.6-1.79l-4.2,1.2h-.6c-29.21,20.8-52,45.61-68.39,74.4-17.21,30-25.8,61.6-25.8,94.8,0,28.39,8.21,51.2,24.6,68.39,15.6,16.4,34.61,24.61,57,24.61,19.61,0,36.6-7.01,51-21,14-14.4,21-31.4,21-51s-6-34.8-18-46.8c-11.6-12.39-26.4-18.6-44.4-18.6Z"/>\n </svg>\n <div class="content">\n <blockquote>\n <slot name="text" /><slot />\n </blockquote>\n <figcaption>\n <slot name="attribution" />\n </figcaption>\n </div>\n </figure>\n '])))}}function Xt(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function Yt(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}Kt(Jt,"properties",{text:{},attribution:{}}),Kt(Jt,"styles",[un,o(Vn||(Vn=Zt(['\n :host {\n --attribution-color: var(--purple-60);\n container-type: inline-size;\n display: block;\n width: 100%;\n }\n\n figure {\n margin: 0 auto;\n position: relative;\n width: 100%;\n }\n\n @container (min-width: 25rem) {\n figure {\n display: grid;\n grid-template-columns: 3rem 1fr;\n column-gap: var(--spacing-layout-1);\n grid-template-areas: \n "icon content";\n }\n\n svg {\n grid-area: icon;\n margin-block-end: 0;\n }\n\n .content {\n grid-area: content;\n }\n }\n\n blockquote {\n font-family: var(--font-family-serif);\n font-size: var(--font-size-h3);\n line-height: var(--line-height-h3);\n padding: 0;\n margin: 0;\n position: relative;\n }\n\n ::slotted(*) {\n display: inline;\n }\n\n figcaption {\n color: var(--attribution-color);\n font-size: var(--font-size-small);\n line-height: var(--line-height-small);\n font-weight: 600;\n margin-block-start: var(--spacing-layout-half);\n margin-inline: 0;\n position: relative;\n padding-inline-start: calc(var(--spacing-component-4) + var(--spacing-component-2));\n }\n\n figcaption::before {\n background-color: currentColor;\n content: "";\n display: block;\n position: absolute;\n left: 0;\n top: calc(var(--line-height-small) / 2 - var(--hairline) / 2);\n height: var(--hairline);\n width: var(--spacing-component-4);\n }\n\n svg {\n display: block;\n fill: var(--purple-60);\n height: calc(1.5 * var(--spacing-layout-1));\n margin-block-end: var(--spacing-layout-half);\n opacity: 0.5;\n width: auto;\n }\n '])))]),customElements.get("cfa-quote")||customElements.define("cfa-quote",Jt);class Gt extends cn{constructor(){super()}iconTemplate(n){switch(n){case"bluesky":return q(Dn||(Dn=Xt(['\n <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 568 501">\n <path class="st0" d="M123.1,33.7c65.1,48.9,135.2,148,160.9,201.2,25.7-53.2,95.8-152.3,160.9-201.2,47-35.3,123.1-62.6,123.1,24.3s-9.9,145.7-15.8,166.6c-20.3,72.5-94.2,90.9-159.9,79.7,114.9,19.6,144.1,84.3,81,149.1-119.9,123-172.3-30.9-185.7-70.3-2.5-7.2-3.6-10.6-3.6-7.7,0-2.9-1.2.5-3.6,7.7-13.4,39.4-65.8,193.3-185.7,70.3-63.1-64.8-33.9-129.5,81-149.1-65.7,11.2-139.6-7.3-159.9-79.7C9.9,203.7,0,75.3,0,57.9,0-28.9,76.1-1.6,123.1,33.7Z"/>\n </svg>\n '])));case"dropbox":return q(Wn||(Wn=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="16.5"\n viewBox="0 0 528 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"\n />\n </svg>\n '])));case"facebook":return q(Zn||(Zn=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="16"\n viewBox="0 0 512 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"\n />\n </svg>\n '])));case"github":return q(Kn||(Kn=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="15.5"\n viewBox="0 0 496 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"\n />\n </svg>\n '])));case"google-drive":return q(Jn||(Jn=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="16"\n viewBox="0 0 512 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M339 314.9L175.4 32h161.2l163.6 282.9H339zm-137.5 23.6L120.9 480h310.5L512 338.5H201.5zM154.1 67.4L0 338.5 80.6 480 237 208.8 154.1 67.4z"\n />\n </svg>\n '])));case"google":return q(Xn||(Xn=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="15.25"\n viewBox="0 0 488 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"\n />\n </svg>\n '])));case"instagram":return q(Yn||(Yn=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="14"\n viewBox="0 0 448 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"\n />\n </svg>\n '])));case"linkedin":return q(Gn||(Gn=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="14"\n viewBox="0 0 448 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"\n />\n </svg>\n '])));case"reddit":return q(Qn||(Qn=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="16"\n viewBox="0 0 512 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z"\n />\n </svg>\n '])));case"soundcloud":return q(ne||(ne=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="20"\n viewBox="0 0 640 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M111.4 256.3l5.8 65-5.8 68.3c-.3 2.5-2.2 4.4-4.4 4.4s-4.2-1.9-4.2-4.4l-5.6-68.3 5.6-65c0-2.2 1.9-4.2 4.2-4.2 2.2 0 4.1 2 4.4 4.2zm21.4-45.6c-2.8 0-4.7 2.2-5 5l-5 105.6 5 68.3c.3 2.8 2.2 5 5 5 2.5 0 4.7-2.2 4.7-5l5.8-68.3-5.8-105.6c0-2.8-2.2-5-4.7-5zm25.5-24.1c-3.1 0-5.3 2.2-5.6 5.3l-4.4 130 4.4 67.8c.3 3.1 2.5 5.3 5.6 5.3 2.8 0 5.3-2.2 5.3-5.3l5.3-67.8-5.3-130c0-3.1-2.5-5.3-5.3-5.3zM7.2 283.2c-1.4 0-2.2 1.1-2.5 2.5L0 321.3l4.7 35c.3 1.4 1.1 2.5 2.5 2.5s2.2-1.1 2.5-2.5l5.6-35-5.6-35.6c-.3-1.4-1.1-2.5-2.5-2.5zm23.6-21.9c-1.4 0-2.5 1.1-2.5 2.5l-6.4 57.5 6.4 56.1c0 1.7 1.1 2.8 2.5 2.8s2.5-1.1 2.8-2.5l7.2-56.4-7.2-57.5c-.3-1.4-1.4-2.5-2.8-2.5zm25.3-11.4c-1.7 0-3.1 1.4-3.3 3.3L47 321.3l5.8 65.8c.3 1.7 1.7 3.1 3.3 3.1 1.7 0 3.1-1.4 3.1-3.1l6.9-65.8-6.9-68.1c0-1.9-1.4-3.3-3.1-3.3zm25.3-2.2c-1.9 0-3.6 1.4-3.6 3.6l-5.8 70 5.8 67.8c0 2.2 1.7 3.6 3.6 3.6s3.6-1.4 3.9-3.6l6.4-67.8-6.4-70c-.3-2.2-2-3.6-3.9-3.6zm241.4-110.9c-1.1-.8-2.8-1.4-4.2-1.4-2.2 0-4.2 .8-5.6 1.9-1.9 1.7-3.1 4.2-3.3 6.7v.8l-3.3 176.7 1.7 32.5 1.7 31.7c.3 4.7 4.2 8.6 8.9 8.6s8.6-3.9 8.6-8.6l3.9-64.2-3.9-177.5c-.4-3-2-5.8-4.5-7.2zm-26.7 15.3c-1.4-.8-2.8-1.4-4.4-1.4s-3.1 .6-4.4 1.4c-2.2 1.4-3.6 3.9-3.6 6.7l-.3 1.7-2.8 160.8s0 .3 3.1 65.6v.3c0 1.7 .6 3.3 1.7 4.7 1.7 1.9 3.9 3.1 6.4 3.1 2.2 0 4.2-1.1 5.6-2.5 1.7-1.4 2.5-3.3 2.5-5.6l.3-6.7 3.1-58.6-3.3-162.8c-.3-2.8-1.7-5.3-3.9-6.7zm-111.4 22.5c-3.1 0-5.8 2.8-5.8 6.1l-4.4 140.6 4.4 67.2c.3 3.3 2.8 5.8 5.8 5.8 3.3 0 5.8-2.5 6.1-5.8l5-67.2-5-140.6c-.2-3.3-2.7-6.1-6.1-6.1zm376.7 62.8c-10.8 0-21.1 2.2-30.6 6.1-6.4-70.8-65.8-126.4-138.3-126.4-17.8 0-35 3.3-50.3 9.4-6.1 2.2-7.8 4.4-7.8 9.2v249.7c0 5 3.9 8.6 8.6 9.2h218.3c43.3 0 78.6-35 78.6-78.3 .1-43.6-35.2-78.9-78.5-78.9zm-296.7-60.3c-4.2 0-7.5 3.3-7.8 7.8l-3.3 136.7 3.3 65.6c.3 4.2 3.6 7.5 7.8 7.5 4.2 0 7.5-3.3 7.5-7.5l3.9-65.6-3.9-136.7c-.3-4.5-3.3-7.8-7.5-7.8zm-53.6-7.8c-3.3 0-6.4 3.1-6.4 6.7l-3.9 145.3 3.9 66.9c.3 3.6 3.1 6.4 6.4 6.4 3.6 0 6.4-2.8 6.7-6.4l4.4-66.9-4.4-145.3c-.3-3.6-3.1-6.7-6.7-6.7zm26.7 3.4c-3.9 0-6.9 3.1-6.9 6.9L227 321.3l3.9 66.4c.3 3.9 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9l4.2-66.4-4.2-141.7c0-3.9-3-6.9-6.9-6.9z"\n />\n </svg>\n '])));case"threads":return q(ee||(ee=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="14"\n viewBox="0 0 448 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z"\n />\n </svg>\n '])));case"twitter":return q(te||(te=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="16"\n viewBox="0 0 512 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"\n />\n </svg>\n '])));case"wikipedia":return q(re||(re=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="20"\n viewBox="0 0 640 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M640 51.2l-.3 12.2c-28.1 .8-45 15.8-55.8 40.3-25 57.8-103.3 240-155.3 358.6H415l-81.9-193.1c-32.5 63.6-68.3 130-99.2 193.1-.3 .3-15 0-15-.3C172 352.3 122.8 243.4 75.8 133.4 64.4 106.7 26.4 63.4 .2 63.7c0-3.1-.3-10-.3-14.2h161.9v13.9c-19.2 1.1-52.8 13.3-43.3 34.2 21.9 49.7 103.6 240.3 125.6 288.6 15-29.7 57.8-109.2 75.3-142.8-13.9-28.3-58.6-133.9-72.8-160-9.7-17.8-36.1-19.4-55.8-19.7V49.8l142.5 .3v13.1c-19.4 .6-38.1 7.8-29.4 26.1 18.9 40 30.6 68.1 48.1 104.7 5.6-10.8 34.7-69.4 48.1-100.8 8.9-20.6-3.9-28.6-38.6-29.4 .3-3.6 0-10.3 .3-13.6 44.4-.3 111.1-.3 123.1-.6v13.6c-22.5 .8-45.8 12.8-58.1 31.7l-59.2 122.8c6.4 16.1 63.3 142.8 69.2 156.7L559.2 91.8c-8.6-23.1-36.4-28.1-47.2-28.3V49.6l127.8 1.1 .2 .5z"\n />\n </svg>\n '])));case"youtube":return q(ie||(ie=Xt(['\n <svg\n xmlns="http://www.w3.org/2000/svg"\n height="16"\n width="18"\n viewBox="0 0 576 512"\n >\n \x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e\n <path\n d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"\n />\n </svg>\n '])));default:return""}}render(){return q(oe||(oe=Xt(['\n <span class="social-icon ','" aria-hidden="true">\n ',"\n </span>\n "])),this.icon,this.iconTemplate(this.icon))}}function Qt(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function nr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}Yt(Gt,"properties",{icon:""}),Yt(Gt,"styles",[un,o(ae||(ae=Xt(["\n .social-icon {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n\n svg {\n fill: currentColor;\n height: 1em;\n vertical-align: -0.125em;\n width: 1em;\n }\n "])))]),customElements.get("cfa-social-icon")||customElements.define("cfa-social-icon",Gt);class er extends cn{constructor(){super(),this.animated=!0}firstUpdated(){const n=this.shadowRoot.querySelector(".stat");new IntersectionObserver(n=>{n.forEach(n=>{n.isIntersecting&&n.target.classList.add("is-visible")})},{rootMargin:"0px 0px -20% 0px"}).observe(n)}render(){return q(se||(se=Qt(['\n <div class="stat ','">\n <div class="above-label strong">','</div>\n <div class="figure display-2">\n <span>','</span>\n </div>\n <div class="below-label strong">',"</div>\n </div>\n "])),this.animated?"is-animated":"",this.beforeLabel,this.figure,this.afterLabel)}}function tr(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function rr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}nr(er,"properties",{beforeLabel:{},figure:{},afterLabel:{},animated:{}}),nr(er,"styles",[un,Mn,o(le||(le=Qt(["\n :host {\n --text-color: var(--text-dark);\n --highlight-color: var(--purple-20);\n --highlight-thickness: var(--spacing-layout-half);\n\n align-self: center;\n display: block;\n margin-inline: auto;\n }\n .stat {\n align-items: center;\n color: var(--text-color);\n display: flex;\n flex-direction: column;\n text-align: center;\n }\n .figure {\n min-width: var(--spacing-layout-3);\n padding-inline: var(--spacing-component-2);\n }\n .figure > span {\n background-image: linear-gradient(\n var(--highlight-color),\n var(--highlight-color)\n );\n background-size: 100% var(--highlight-thickness);\n background-position: bottom 0.15em left;\n background-repeat: no-repeat;\n padding-inline: 0.25em;\n }\n /* Animation */\n @media (prefers-reduced-motion: no-preference) {\n .stat.is-animated .figure > span {\n background-size: 0% var(--highlight-thickness);\n transition: background-size 1s ease;\n }\n .stat.is-animated.is-visible .figure > span {\n background-size: 100% var(--highlight-thickness);\n }\n }\n "])))]),customElements.get("cfa-stat")||customElements.define("cfa-stat",er);class ir extends cn{constructor(){super(),this.open=!1}toggle(){this.open=!this.open}handleKeyPress(n){"Enter"!==n.key&&" "!==n.key||this.toggle()}render(){return q(ce||(ce=tr(['\n <div class="item">\n <div\n class="header"\n role="button"\n aria-expanded=','\n tabindex="0"\n @click=',"\n @keypress=",'\n >\n <div class="title">\n <slot name="title"></slot>\n </div>\n <span class="icon" aria-hidden="true">\n ','\n </span>\n </div>\n <div\n class="body ','"\n role="region"\n aria-hidden=',"\n >\n <slot></slot>\n </div>\n </div>\n "])),this.open?"true":"false",this.toggle,this.handleKeyPress,this.open?q(he||(he=tr(["<cfa-icon>expand_less</cfa-icon>"]))):q(de||(de=tr(["<cfa-icon>expand_more</cfa-icon>"]))),this.open?"open":"",this.open?"false":"true")}}rr(ir,"properties",{open:{type:Boolean}}),rr(ir,"styles",[un,o(pe||(pe=tr(["\n :host {\n --color: var(--purple-60);\n --hover-bg-color: var(--blue-20);\n\n display: block;\n }\n\n .item {\n border-bottom: var(--thin) solid var(--black-20);\n max-width: var(--column-span-8);\n margin-inline: auto;\n background-color: var(--bg-color);\n }\n\n .header {\n align-items: center;\n color: var(--color);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n padding-block: var(--spacing-component-3);\n }\n\n .header:hover {\n background-color: var(--hover-bg-color);\n box-shadow:\n var(--spacing-component-3) 0 var(--blue-20),\n calc(-1 * var(--spacing-component-3)) 0 var(--blue-20);\n }\n\n .header:focus {\n outline: none;\n }\n\n .title {\n flex: 1;\n }\n\n .title ::slotted(*) {\n font-family: var(--font-family-sans-serif) !important;\n font-size: var(--base-font-size) !important;\n }\n\n .icon {\n flex: 0;\n }\n\n .body {\n opacity: 0;\n max-height: 0;\n overflow: hidden;\n }\n\n .body.open {\n max-height: unset;\n opacity: 1;\n padding-block: var(--spacing-layout-half) var(--spacing-layout-1);\n }\n\n .body ::slotted(*) {\n margin-block-start: 0 !important;\n }\n "])))]);class or extends cn{render(){return q(ue||(ue=tr(['\n <div role="tablist">\n <slot></slot>\n </div>\n '])))}}function ar(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function sr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}rr(or,"styles",o(fe||(fe=tr(["\n :host {\n display: block;\n }\n "])))),customElements.get("cfa-accordion-item")||customElements.define("cfa-accordion-item",ir),customElements.get("cfa-accordion")||customElements.define("cfa-accordion",or);class lr extends cn{firstUpdated(){const n=this.shadowRoot.querySelector(".content"),e=n=>{n.classList.toggle("is-overflowing",n.scrollWidth>n.clientWidth)};"ResizeObserver"in window&&new ResizeObserver(n=>{e(n[0].target)}).observe(n),"MutationObserver"in window&&new MutationObserver(()=>{e(n)}).observe(n,{childList:!0}),e(n)}render(){return q(ve||(ve=ar(['\n <div class="bar">\n <div class="content">\n <slot></slot>\n </div>\n </div>\n '])))}}function cr(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function hr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}sr(lr,"properties",{theme:{}}),sr(lr,"styles",[un,o(ge||(ge=ar(['\n :host {\n --bg-color: var(--purple-80);\n --text-color: var(--white);\n --link-color: var(--white);\n --link-hover-color: var(--white);\n --scrollbar-color: var(--white);\n --spacing: var(--spacing-layout-half);\n\n display: block;\n }\n\n .bar {\n background-color: var(--bg-color);\n color: var(--text-color);\n\n a {\n color: var(--link-color);\n }\n\n a:hover {\n color: var(--link-hover-color);\n }\n }\n\n .content {\n display: flex;\n column-gap: var(--spacing);\n justify-content: center; \n overflow-x: auto;\n overflow-y: hidden;\n padding-bottom: var(--spacing-layout-half);\n padding-top: var(--spacing-layout-half);\n scrollbar-color: var(--scrollbar-color) var(--bg-color);\n scrollbar-width: thin;\n\n &::before,\n &::after {\n content: "";\n flex-basis: calc(var(--outer-margin) - var(--spacing));\n flex-shrink: 0;\n }\n }\n \n .content.is-overflowing {\n justify-content: start; \n }\n\n ::slotted(*) {\n max-width: none !important;\n white-space: nowrap !important;\n }\n '])))]),customElements.get("cfa-bar")||customElements.define("cfa-bar",lr);class dr extends cn{render(){return q(be||(be=cr(['\n <div class="box ','">\n <slot />\n </div>\n '])),this.theme?"box--"+this.theme:"")}}function ur(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function pr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}hr(dr,"properties",{theme:{}}),hr(dr,"styles",[un,o(me||(me=cr(["\n :host {\n --bg-color: var(--white);\n --padding: var(--spacing-component-4);\n --shadow: var(--shadow-small);\n --text-color: var(--black);\n\n display: flex;\n flex: 1;\n }\n\n .box {\n background-color: var(--bg-color);\n box-shadow: var(--shadow);\n color: var(--text-color, #000);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-layout-half);\n padding: var(--padding);\n width: 100%;\n }\n\n .box--rounded {\n border-radius: var(--spacing-layout-half, 0.5rem);\n }\n\n ::slotted(*) {\n --spacing: var(--spacing-layout-half);\n\n max-width: 100%;\n }\n "])))]),customElements.get("cfa-box")||customElements.define("cfa-box",dr);class fr extends cn{handleSlotchange(n){const e=n.target.assignedNodes({flatten:!0});console.log(e);const t=this.shadowRoot.querySelector(".breadcrumbs");t.innerHTML="",e.forEach(n=>{"UL"===n.tagName&&n.querySelectorAll("li").forEach(n=>{t.appendChild(n.cloneNode(!0))})})}render(){return q(we||(we=ur(["\n <slot @slotchange=",'></slot>\n <ul class="breadcrumbs"></ul>\n '])),this.handleSlotchange)}}function vr(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}pr(fr,"properties",{}),pr(fr,"styles",[un,o(ye||(ye=ur(['\n slot {\n display: none;\n }\n\n :host {\n display: block;\n }\n\n .breadcrumbs {\n margin: 0;\n margin-inline: calc(-1 * var(--outer-margin));\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0;\n scrollbar-width: none;\n white-space: nowrap;\n }\n\n .breadcrumbs::before,\n .breadcrumbs::after {\n content: "";\n display: inline-block;\n width: var(--outer-margin);\n }\n\n .breadcrumbs > * {\n display: inline-block;\n font-size: var(--font-size-small);\n font-weight: 600;\n line-height: var(--line-height-small);\n margin: 0;\n padding: 0;\n }\n\n .breadcrumbs > *:not(:last-child)::after {\n content: "/";\n opacity: 0.5;\n padding-inline: 0.75em;\n }\n\n .breadcrumbs a {\n color: var(--link-color);\n text-decoration: none;\n }\n '])))]),customElements.get("cfa-breadcrumbs")||customElements.define("cfa-breadcrumbs",fr);class gr extends cn{render(){return q(xe||(xe=vr(['\n <div class="callout">\n <div class="icon">\n <cfa-icon>info</cfa-icon>\n </div>\n <div class="text">\n <slot></slot>\n </div>\n </div>\n '])))}}function br(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function mr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}!function(n,e,t){(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t}(gr,"styles",[un,o(ke||(ke=vr(["\n :host {\n --background: var(--white);\n --icon-color: var(--purple-80);\n --link-color: var(--base-link-color);\n --link-hover-color: var(--base-link-hover-color);\n --text-color: var(--black);\n\n display: block;\n }\n\n .callout {\n align-items: flex-start;\n background: var(--background);\n box-shadow: var(--shadow-medium);\n color: var(--text-color);\n display: flex;\n flex-direction: row;\n gap: var(--spacing-component-2);\n padding: var(--spacing-component-3);\n }\n\n .icon {\n color: var(--icon-color);\n flex-direction: column;\n flex-grow: 0;\n font-size: var(--font-size-h3);\n height: 100%;\n margin-block-start: -0.075em;\n margin-inline-end: var(--spacing-component-2);\n }\n\n .callout + .callout {\n margin-top: var(--spacing-layout-half);\n }\n "])))]),customElements.get("cfa-callout")||customElements.define("cfa-callout",gr);class wr extends cn{visualTemplate(){let n;return"image"===this.visualType?n=q(ze||(ze=br(['\n <div class="visual image">\n <div class="fallback-image">\n ',"\n </div>\n ","\n </div>\n "])),V(je||(je=br(['\n <svg \n width="1600" \n height="900" \n viewBox="0 0 1600 900" \n fill="none" \n preserveAspectRatio="xMinYMin slice"\n xmlns="http://www.w3.org/2000/svg"\n >\n <g clip-path="url(#clip0)">\n <rect width="1600" height="900" fill="#2B1A78"/>\n <path fill-rule="evenodd" clip-rule="evenodd" d="M1218.12 -444.87C1375.54 -448.403 1528.96 -379.695 1624.93 -254.874C1718.97 -132.569 1729.75 28.0324 1697.74 178.942C1664.98 333.396 1596.67 491.622 1452.8 556.721C1311.8 620.52 1155.18 556.724 1017.04 486.944C883.26 419.362 752.204 329.485 715.393 184.213C677.697 35.4535 737.759 -117.225 833.568 -237.116C929.253 -356.852 1064.86 -441.431 1218.12 -444.87Z" fill="#5650BE"/>\n <path fill-rule="evenodd" clip-rule="evenodd" d="M372.893 247.378C457.708 243.989 548.299 262.758 600.503 329.652C652.21 395.908 640.741 485.984 623.238 568.169C605.287 652.459 579.269 741.096 503.945 783.041C424.143 827.479 324.366 822.072 243.48 779.638C165.755 738.862 118.175 659.045 102.906 572.65C88.5877 491.632 114.457 410.294 167.015 346.974C218.23 285.272 292.743 250.581 372.893 247.378Z" fill="#5650BE"/>\n </g>\n <defs>\n <clipPath id="clip0">\n <rect width="1600" height="900" fill="white"/>\n </clipPath>\n </defs>\n </svg>\n ']))),this.visualUrl?q(_e||(_e=br(['\n <picture>\n <source srcset="','" />\n <img\n src="','"\n alt="','"\n loading="lazy"\n onerror="this.style.display=\'none\'"\n />\n </picture>\n '])),this.visualUrl,this.visualThumbnailUrl,this.visualAltText):W):"logo"===this.visualType&&(n=q(Ee||(Ee=br(['\n <div class="visual logo">\n <picture>\n <source srcset="','" />\n <img\n src="','"\n alt="','"\n loading="lazy"\n />\n </picture>\n </div>\n '])),this.visualUrl,this.visualThumbnailUrl,this.visualAltText)),n}cardContentTemplate(){return q(Se||(Se=br(["\n ",'\n <div class="content">\n <div class="header">\n <div>\n ',"\n ","\n </div>\n ",'\n </div>\n <div class="body">\n ',"\n ","\n ","\n </div>\n </div>\n "])),this.visualTemplate(),this.eyebrow?q($e||($e=br([' <div class="eyebrow">',"</div> "])),this.eyebrow):W,this.title?q(Ae||(Ae=br([' <div class="h3 title">',"</div> "])),this.title):W,this.label?q(Pe||(Pe=br(['\n <div>\n <cfa-label color="green">',"</cfa-label>\n </div>\n "])),this.label):W,this.text?q(Oe||(Oe=br([' <div class="small" .innerHTML="','"></div> '])),this.text):W,this.metaText?q(Ce||(Ce=br(['\n <div\n class="meta-text small"\n .innerHTML="','"\n ></div>\n '])),this.metaText):W,this.actionLabel?q(Te||(Te=br([' <div class="action-label">',"</div> "])),this.actionLabel):W)}render(){return q(Ue||(Ue=br(["\n ","\n "])),this.linkUrl?q(Le||(Le=br(['\n <a\n href="','"\n target="','"\n rel="','"\n class="card ','"\n >\n ',"\n </a>\n "])),this.linkUrl,this.linkTarget,"_blank"==this.linkTarget?"noopener":W,this.theme?"card--"+this.theme:"",this.cardContentTemplate()):q(Me||(Me=br(['\n <div class="card ','">\n ',"\n </div>\n "])),this.theme?"card--"+this.theme:"",this.cardContentTemplate()))}}function yr(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function xr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}mr(wr,"properties",{theme:{},linkUrl:{},linkTarget:{},visualType:{},visualUrl:{},visualThumbnailUrl:{},visualAltText:{},eyebrow:{},label:{},title:{},text:{},metaText:{},actionLabel:{}}),mr(wr,"styles",[un,Mn,o(He||(He=br(['\n :host {\n --action-border-color: var(--purple-20);\n --action-border-hover-color: var(--red-60);\n --action-text-color: var(--purple-60);\n --action-text-hover-color: var(--red-60);\n --bg-color: var(--white);\n --padding: var(--spacing-component-4);\n --text-color: var(--black);\n\n display: flex;\n flex-direction: column;\n margin-inline: auto;\n max-width: 100%;\n width: 100%;\n }\n\n .card,\n a.card {\n box-shadow: var(--shadow-small);\n border: var(--hairline) solid var(--gray-20);\n color: var(--text-color);\n display: flex;\n flex-direction: column;\n flex: 1;\n height: 100%;\n text-decoration: none;\n transition: 500ms;\n }\n\n a.card:hover {\n --action-color: var(--action-hover-color);\n\n box-shadow: var(--shadow-medium);\n }\n\n .content {\n background-color: var(--bg-color);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding: var(--padding);\n }\n\n .header {\n align-items: start;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-layout-half);\n margin-block-end: var(--spacing-layout-half);\n }\n\n .body {\n display: flex;\n flex-flow: column nowrap;\n gap: var(--spacing-layout-half);\n height: 100%;\n text-align: var(--text-alignment, start);\n }\n\n .eyebrow {\n color: var(--purple-60);\n }\n\n .eyebrow + * {\n margin-block-start: var(--spacing-component-2);\n }\n\n .meta-text {\n color: var(--gray-60);\n }\n\n .action-label {\n align-self: flex-start;\n color: var(--action-text-color);\n display: inline-block;\n font-size: var(--font-size-small);\n font-weight: bold;\n margin-block-start: auto;\n padding-block-start: var(--spacing-component-3);\n }\n\n a:hover .action-label {\n color: var(--action-text-hover-color);\n }\n\n .action-label::after {\n background: linear-gradient(\n to top,\n var(--action-border-hover-color) 0% 50%,\n var(--action-border-color) 50% 100%\n );\n background-position: 0% 0%;\n background-size: 100% 200%;\n content: "";\n display: block;\n height: var(--spacing-component-2);\n transition: background-position 0.3s;\n }\n\n a:hover .action-label::after {\n background-position: 0% 100%;\n }\n\n .visual {\n box-sizing: border-box;\n display: flex;\n height: auto;\n height: var(--spacing-layout-7);\n position: relative;\n width: 100%;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n width: 100%;\n }\n\n .fallback-image {\n background-color: var(--purple-80);\n position: absolute;\n inline-start: 0;\n block-start: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n }\n\n .fallback-image svg {\n height: 100%;\n width: 100%;\n }\n\n .visual picture {\n position: relative;\n z-index: 1;\n width: 100%;\n }\n\n .image::after {\n block-end: 0;\n block-start: 0;\n bottom: 0;\n box-shadow: inset 0 -50px 50px -50px var(--black-60);\n content: "";\n inline-end: 0;\n inline-start: 0;\n position: absolute;\n z-index: 2;\n }\n\n .logo {\n background-color: var(--white, #fff);\n box-sizing: border-box;\n border-block-end: 1px solid var(--gray-20);\n padding: var(--spacing-component-5);\n }\n\n .logo img {\n object-fit: contain;\n }\n\n /* --- */\n\n /* Theme: Compact Card */\n\n .card--compact {\n --padding: var(--spacing-component-3);\n }\n\n .card--compact .title {\n font-size: var(--font-size-h4);\n line-height: var(--line-height-h4);\n }\n\n .card--compact .action-label {\n padding-block-start: 0;\n }\n\n /* --- */\n\n /* Theme: Horizontal Card */\n\n @media (min-width: 768px) {\n .card--horizontal,\n a.card--horizontal {\n align-items: stretch;\n flex-direction: row;\n }\n\n .card--horizontal .visual {\n aspect-ratio: initial;\n height: auto;\n flex: 0 0 50%;\n }\n\n .card--horizontal .logo {\n border-block-end: 0;\n border-inline-end: 1px solid var(--gray-20);\n }\n }\n\n /* --- */\n\n /* Theme: Horizontal Compact Card */\n\n @media (min-width: 768px) {\n .card--horizontal-compact,\n a.card--horizontal-compact {\n align-items: stretch;\n flex-direction: row;\n }\n\n .card--horizontal-compact .visual {\n aspect-ratio: initial;\n flex: 0 0 34%;\n height: auto;\n position: relative;\n }\n\n .card--horizontal-compact .image picture {\n position: absolute;\n height: 100%;\n width: 100%;\n }\n\n .card--horizontal-compact .logo {\n border-block-end: 0;\n border-right: 1px solid var(--gray-20);\n padding: var(--spacing-component-4);\n }\n }\n\n .card--horizontal-compact,\n a.card--horizontal-compact {\n --padding: var(--spacing-component-3);\n }\n\n .card--horizontal-compact .body {\n gap: var(--spacing-component-2);\n }\n\n .card--horizontal-compact .header {\n margin-block-end: var(--spacing-component-2);\n }\n\n .card--horizontal-compact .title {\n font-size: var(--font-size-h4);\n line-height: var(--line-height-h4);\n }\n\n .card--horizontal-compact .action-label {\n padding-block-start: var(--spacing-component-2);\n }\n '])))]),customElements.get("cfa-card")||customElements.define("cfa-card",wr);class kr extends cn{cardContentTemplate(){let n;return n=this.imageUrl?q(Ne||(Ne=yr([' <img src="','" alt="','" /> '])),this.imageUrl,this.name):q(Re||(Re=yr([" "," "])),this.name),n}render(){return q(Ie||(Ie=yr(["\n ","\n "])),this.linkUrl?q(Be||(Be=yr(['\n <a\n href="','"\n target="','"\n rel="','"\n class="card"\n >\n ',"\n </a>\n "])),this.linkUrl,this.linkTarget||"_self","_blank"==this.linkTarget?"noopener noreferrer":W,this.cardContentTemplate()):q(Fe||(Fe=yr([' <div class="card">',"</div> "])),this.cardContentTemplate()))}}function zr(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function jr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}xr(kr,"properties",{name:{},imageUrl:{},linkUrl:{},linkTarget:{}}),xr(kr,"styles",[un,Mn,o(qe||(qe=yr(["\n :host {\n --bg-color: var(--blue-20);\n --text-color: var(--black);\n\n align-items: stretch;\n display: flex;\n flex-direction: row;\n }\n\n .card {\n align-items: center;\n background-color: var(--white);\n border: var(--hairline) solid var(--black-10);\n color: var(--text-color);\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-h3);\n font-weight: bold;\n justify-content: center;\n line-height: var(--line-height-h4);\n margin-inline: auto;\n max-width: 100%;\n min-height: var(--spacing-layout-8);\n padding: var(--spacing-component-5);\n text-align: center;\n text-decoration: none;\n transition: box-shadow 1s;\n width: var(--column-span-4);\n }\n\n a.card {\n box-shadow: var(--shadow-small);\n color: var(--text-color);\n }\n\n a.card:hover {\n box-shadow: var(--shadow-medium);\n }\n\n img {\n aspect-ratio: 2 / 1;\n object-fit: contain;\n width: 100%;\n }\n "])))]),customElements.get("cfa-logo-card")||customElements.define("cfa-logo-card",kr);class _r extends cn{handleSlotchange(n){const e=n.target.assignedNodes({flatten:!0}),t=this.shadowRoot.querySelector("ul");t.innerHTML="",e.forEach(n=>{"UL"===n.tagName&&n.querySelectorAll("li").forEach(n=>{t.appendChild(n.cloneNode(!0))})})}render(){return q(Ve||(Ve=zr(["\n <slot @slotchange=",'></slot>\n <nav data-font-size="','">\n <ul></ul>\n </nav>\n '])),this.handleSlotchange,this.fontSize)}}function Er(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function Sr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}jr(_r,"properties",{fontSize:{}}),jr(_r,"styles",[un,o(De||(De=zr(['\n :host {\n --link-color: var(--purple-80);\n --link-hover-color: var(--purple-80);\n\n display: block;\n font-family: var(--font-family-sans-serif);\n }\n\n slot {\n display: none;\n }\n\n nav {\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n }\n\n nav[data-font-size="small"] {\n font-size: var(--font-size-small);\n line-height: var(--line-height-small);\n }\n\n nav[data-font-size="large"] {\n font-size: var(--font-size-h3);\n line-height: var(--line-height-h3);\n }\n\n ul {\n display: flex;\n flex-direction: row;\n gap: var(--spacing-component-1);\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n li {\n flex-shrink: 0;\n margin: 0;\n padding: 0;\n }\n\n li.is-active a {\n box-shadow: inset 0 calc(-1 * var(--medium)) var(--link-hover-color);\n }\n\n a {\n box-shadow: 0;\n color: var(--link-color);\n display: block;\n font-weight: bold;\n height: 100%;\n padding: var(--spacing-component-2) var(--spacing-component-3);\n text-decoration: none;\n transition: box-shadow 0.25s ease-in-out;\n }\n\n a:hover {\n box-shadow: inset 0 calc(-1 * var(--medium)) var(--link-hover-color);\n }\n '])))]),customElements.get("cfa-nav")||customElements.define("cfa-nav",_r);class $r extends cn{handleSlotchange(n){const e=n.target.assignedNodes({flatten:!0}),t=this.shadowRoot.querySelector("ul"),r=[];e.forEach(n=>{"UL"===n.tagName&&n.querySelectorAll("li").forEach(n=>{var e;t.appendChild(n.cloneNode(!0));const i=null===(e=n.querySelector("a"))||void 0===e?void 0:e.getAttribute("href");i&&i.startsWith("#")&&r.push(i.substring(1))})}),window.addEventListener("scroll",()=>this.updateActiveNav(r))}updateActiveNav(n){const e=window.scrollY;let t=null;if(n.forEach(n=>{const r=document.getElementById(n);r&&r.offsetTop<=e+256&&(t=n)}),this.shadowRoot.querySelectorAll("li a").forEach(n=>{n.classList.remove("is-active")}),t){const n=this.shadowRoot.querySelector('li a[href*="#'.concat(t,'"]'));n&&n.classList.add("is-active")}}render(){return q(We||(We=Er(["\n <slot @slotchange=","></slot>\n <nav>\n <ul>\n <li><strong>On this page:  </strong></li>\n </ul>\n </nav>\n "])),this.handleSlotchange)}}function Ar(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function Pr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}Sr($r,"properties",{fontSize:{}}),Sr($r,"styles",[un,o(Ze||(Ze=Er(["\n :host {\n --bg-color: var(--white);\n --link-color: var(--purple-80);\n --link-hover-color: var(--purple-80);\n\n background-color: var(--bg-color);\n display: block;\n padding-block: var(--spacing-layout-1);\n display: block;\n font-family: var(--font-family-sans-serif);\n font-size: var(--font-size-small);\n line-height: var(--font-size-small);\n }\n\n slot {\n display: none;\n }\n\n nav {\n }\n\n ul {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-layout-half);\n margin: 0;\n padding: 0 var(--outer-margin);\n min-height: var(--spacing-layout-2);\n }\n\n li {\n display: block;\n }\n\n a {\n background-color: var(--purple-10);\n border-radius: var(--rounded-corners);\n color: var(--link-color);\n display: block;\n position: relative;\n padding: var(--spacing-layout-half);\n text-decoration: none;\n }\n\n a:hover {\n background-color: var(--blue-20);\n color: var(--link-hover-color);\n }\n\n a:active {\n background-color: var(--blue-40);\n color: var(--link-color);\n }\n\n @media (min-width: 768px) {\n :host {\n box-shadow: var(--shadow-small);\n padding-block: var(--spacing-component-2);\n position: sticky;\n top: 0;\n z-index: 3;\n }\n\n nav {\n align-items: center;\n display: flex;\n flex-direction: row;\n margin-inline: auto;\n max-width: var(--grid-max-width);\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n }\n\n ul {\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: var(--spacing-component-2);\n }\n\n a,\n li {\n max-width: none;\n white-space: nowrap;\n }\n\n a.is-active {\n background-color: var(--blue-40);\n }\n }\n "])))]),customElements.get("cfa-page-nav")||customElements.define("cfa-page-nav",$r);class Or extends cn{render(){return q(Ke||(Ke=Ar(['\n <nav>\n <div class="next">\n ','\n </div>\n <div class="previous">\n ',"\n </div>\n </nav>\n "])),this.nextUrl?q(Je||(Je=Ar(['\n <a href="','" class="cfa-button">\n <span class="small label"\n >Next <cfa-icon>arrow_forward</cfa-icon></span\n ><br />\n <span class="title normal">',"</span>\n </a>\n "])),this.nextUrl,this.nextTitle):"",this.previousUrl?q(Xe||(Xe=Ar(['\n <a\n href="','"\n class="cfa-button cfa-button--outline"\n >\n <span class="small label"\n ><cfa-icon>arrow_back</cfa-icon> Previous</span\n ><br />\n <span class="title normal">',"</span>\n </a>\n "])),this.previousUrl,this.previousTitle):"")}}function Cr(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function Tr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}Pr(Or,"properties",{previousTitle:{},previousUrl:{},nextTitle:{},nextUrl:{}}),Pr(Or,"styles",[un,Mn,Pn,o(Ye||(Ye=Ar(["\n :host {\n display: block;\n }\n\n * {\n box-sizing: border-box;\n text-wrap: comfortable;\n }\n\n nav {\n display: flex;\n flex-direction: column;\n column-gap: var(--gutter-width);\n row-gap: var(--spacing-layout-half);\n }\n\n nav > * > * {\n width: 100%;\n }\n\n @media (min-width: 768px) {\n nav {\n flex-direction: row-reverse;\n justify-content: space-between;\n }\n\n a {\n min-width: var(--column-span-4);\n }\n\n .next a {\n text-align: end;\n }\n\n .previous a {\n text-align: start;\n }\n }\n "])))]),customElements.get("cfa-pager")||customElements.define("cfa-pager",Or);class Ur extends cn{constructor(){super(),this.previousLabel="Previous",this.nextLabel="Next",this.page=1,this.totalPages=1}render(){return q(Ge||(Ge=Cr(['\n <div class="pagination">\n <div class="previous">\n ','\n </div>\n <div class="status">Page '," of ",'</div>\n <div class="next">\n ',"\n </div>\n </div>\n "])),this.page>1?q(Qe||(Qe=Cr(['\n <button class="cfa-button" @click="','">\n <cfa-icon>arrow_back</cfa-icon> ',"\n </button>\n "])),this.handlePreviousPage,this.previousLabel):"",this.page,this.totalPages,this.page<this.totalPages?q(nt||(nt=Cr(['\n <button class="cfa-button" @click="','">\n '," <cfa-icon>arrow_forward</cfa-icon>\n </button>\n "])),this.handleNextPage,this.nextLabel):"")}handleNextPage(){if(this.page<this.totalPages){this.page++;const n=new CustomEvent("page-change",{bubbles:!0,cancelable:!0,detail:this.page});this.dispatchEvent(n)}}handlePreviousPage(){if(this.page>1){this.page--;const n=new CustomEvent("page-change",{bubbles:!0,cancelable:!0,detail:this.page});this.dispatchEvent(n)}}}function Lr(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function Mr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}Tr(Ur,"properties",{page:{type:Number},totalPages:{type:Number},previousLabel:{},nextLabel:{}}),Tr(Ur,"styles",[un,Pn,o(et||(et=Cr(["\n :host {\n display: block;\n }\n\n .pagination {\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: var(--gutter-width);\n justify-content: space-between;\n }\n\n .pagination > * {\n flex: 1;\n }\n\n .status {\n font-size: var(--font-size-small);\n line-height: var(-line-height-small);\n color: var(--gray-60);\n text-align: center;\n }\n\n @media (max-width: 768px) {\n .status {\n display: none;\n }\n }\n\n .previous {\n text-align: left;\n }\n\n .next {\n text-align: right;\n }\n "])))]),customElements.get("cfa-pagination")||customElements.define("cfa-pagination",Ur);class Hr extends cn{render(){var n,e;return q(tt||(tt=Lr(['\n <div class="card ','">\n \x3c!-- Link overlay pseudo-element so we can do nested links within the card --\x3e\n ','\n <div class="avatar">\n ','\n </div>\n <div class="details">\n <div>\n <div class="name h4">\n ',"\n </div>\n ",'\n </div>\n <div class="title small">\n ',"\n </div>\n ","\n </div>\n </div>\n "])),this.linkUrl?"has-link":"",this.linkUrl?q(rt||(rt=Lr(['\n <a\n href="','"\n target="','"\n rel="','"\n class="link-overlay"\n tabindex="-1"\n >\n </a>\n '])),this.linkUrl,this.linkTarget||"_self","_blank"==this.linkTarget?"noopener":W):"",this.linkUrl?q(it||(it=Lr(['\n <a\n href="','"\n target="','"\n rel="','"\n >\n <cfa-avatar\n imageUrl="','"\n altText="Avatar photo of ','"\n size="3"\n >\n </cfa-avatar>\n </a>\n '])),this.linkUrl,this.linkTarget||"_self","_blank"==this.linkTarget?"noopener":W,this.imageUrl,this.name):q(ot||(ot=Lr(['\n <cfa-avatar\n imageUrl="','"\n altText="Avatar photo of ','"\n size="3"\n >\n </cfa-avatar>\n '])),this.imageUrl,this.name),this.linkUrl?q(at||(at=Lr(['\n <a\n href="','"\n target="','"\n rel="','"\n >\n ',"\n </a>\n "])),this.linkUrl,this.linkTarget||"_self","_blank"==this.linkTarget?"noopener":W,this.name.trim()):q(st||(st=Lr([" "," "])),this.name.trim()),this.pronouns?q(lt||(lt=Lr([' <span class="pronouns small">(',")</span> "])),this.pronouns):"",[null===(n=this.title)||void 0===n?void 0:n.trim(),null===(e=this.company)||void 0===e?void 0:e.trim()].filter(Boolean).join(", "),this.linkedInUrl||this.twitterHandle?q(ct||(ct=Lr(['\n <div class="social">\n ',"\n ","\n </div>\n "])),this.linkedInUrl?q(ht||(ht=Lr(['\n <a\n href="','"\n target="_blank"\n rel="noopener"\n title="View ','\'s profile on LinkedIn"\n >\n <cfa-social-icon icon="linkedin" />\n </a>\n '])),this.linkedInUrl,this.name):W,this.twitterHandle?q(dt||(dt=Lr(['\n <a\n href="https://twitter.com/','"\n target="_blank"\n rel="noopener"\n title="View ','\'s profile on X (Twitter)"\n >\n <cfa-social-icon icon="twitter" />\n </a>\n '])),this.twitterHandle,this.name):W):W)}}function Nr(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function Rr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}Mr(Hr,"properties",{name:{type:"string"},title:{type:"string"},company:{type:"string"},pronouns:{type:"string"},imageUrl:{type:"string"},imageAltText:{type:"string"},linkUrl:{type:"string"},linkedInUrl:{type:"string"},twitterHandle:{type:"string"}}),Mr(Hr,"styles",[un,Mn,o(ut||(ut=Lr(['\n :host {\n display: block;\n }\n\n .card {\n border-radius: var(--rounded-corners);\n position: relative;\n display: flex;\n flex-direction: row;\n margin-inline: auto;\n max-width: 100%;\n text-align: start;\n width: var(--column-span-4);\n transform: translate(0, 0); // hack to ensure pseudo element is stacked above parent background\n }\n\n .card.has-link::before {\n border-radius: var(--rounded-corners);\n bottom: calc(-1 * var(--thick));\n content: "";\n height: calc(100% + 2 * var(--thick)));\n left: calc(-1 * var(--thick));\n position: absolute;\n right: calc(-1 * var(--thick));\n top: calc(-1 * var(--thick));\n width: calc(100% + 2 * var(--thick)));\n z-index: -1;\n transition: \n background-color 0.5s ease-in-out,\n box-shadow 0.5s ease-in-out;\n }\n\n .card.has-link:hover::before,\n .card.has-link:focus-visible::before {\n background-color: var(--white);\n box-shadow: var(--shadow-medium);\n }\n\n .card.has-link .name a {\n box-shadow: 0;\n color: var(--purple-80);\n transition: box-shadow 0.5s ease-in-out;\n }\n\n .card.has-link:hover .name a {\n box-shadow: inset 0 calc(-1 * var(--thick)) 0 0 var(--purple-20);\n }\n\n a {\n position: relative;\n text-decoration: none;\n z-index: 1;\n }\n\n a.link-overlay {\n position: static;\n }\n\n a.link-overlay::before {\n content: "";\n position: absolute;\n z-index: 0;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n \n .avatar {\n flex-grow: 0;\n }\n\n .name {\n display: inline-block;\n }\n\n .pronouns {\n color: var(--purple-60);\n }\n \n .details {\n color: var(--black);\n flex-grow: 1;\n padding-block-start: var(--spacing-component-2);\n padding-inline-start: var(--spacing-component-2);\n }\n\n .social {\n font-size: 0.9rem;\n margin-block-start: var(--spacing-component-1);\n }\n \n .social a {\n align-items: center;\n border-radius: 10000px;\n color: var(--purple-80);\n display: inline-flex;\n height: var(--spacing-component-4);\n justify-content: center;\n margin: calc(-1 * var(--spacing-component-2));\n width: var(--spacing-component-4);\n }\n\n .social a:hover {\n background-color: var(--purple-20);\n }\n\n .social > a + a {\n margin-inline-start: var(--spacing-component-2);\n }\n '])))]),customElements.get("cfa-person-card")||customElements.define("cfa-person-card",Hr);class Ir extends cn{render(){return q(pt||(pt=Nr(['\n <a\n href="','"\n target="','"\n class="promo\n "\n >\n ',"\n ","\n ","\n </a>\n "])),this.linkUrl||"javascript:void(0)",this.linkTarget||W,this.heading?q(ft||(ft=Nr([' <div class="h4 sans-serif">',"</div> "])),this.heading):W,this.text?q(vt||(vt=Nr([' <div class="small">',"</div> "])),this.text):W,this.actionLabel?q(gt||(gt=Nr(['\n <div class="action-label small strong">\n '," <cfa-icon>arrow_forward</cfa-icon>\n </div>\n "])),this.actionLabel):W)}}function Br(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function Fr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}Rr(Ir,"properties",{heading:{},text:{},actionLabel:{},linkUrl:{},linkTarget:{}}),Rr(Ir,"styles",[un,Mn,o(bt||(bt=Nr(["\n :host {\n --bg-color: var(--blue-20);\n --padding: var(--spacing-component-4);\n --text-color: var(--black);\n --action-label-color: var(--purple-60);\n --action-label-hover-color: var(--red-60);\n\n display: block;\n }\n\n .promo,\n a.promo {\n background-color: var(--bg-color);\n box-shadow: var(--shadow-small);\n color: var(--text-color, #000);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-layout-half);\n padding: var(--padding);\n text-align: center;\n text-decoration: none;\n transition: box-shadow 0.2s ease-in-out;\n width: 100%;\n }\n\n a.promo:hover {\n box-shadow: var(--shadow-medium);\n }\n\n .action-label {\n color: var(--action-label-color);\n }\n\n a.promo:hover .action-label {\n color: var(--action-label-hover-color);\n }\n "])))]),customElements.get("cfa-promo")||customElements.define("cfa-promo",Ir);class qr extends cn{constructor(){super(),this.showLabel="Show more",this.hideLabel="Show less",this.showIcon="expand_more",this.hideIcon="expand_less",this.expanded=!1}render(){return q(mt||(mt=Br(['\n <slot\n id="content"\n class="content ','"\n aria-labelledby="button"\n ?hidden="','"\n ></slot>\n <div class="controls">\n <button\n @click="','"\n aria-expanded="','"\n aria-controls="content"\n >\n ',"\n <cfa-icon>","</cfa-icon>\n </button>\n </div>\n "])),this.expanded?"is-expanded":"is-collapsed",!this.expanded,()=>this.expanded=!this.expanded,this.expanded,this.expanded?this.hideLabel:this.showLabel,this.expanded?this.hideIcon:this.showIcon)}}function Vr(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function Dr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}Fr(qr,"properties",{showLabel:{type:String},hideLabel:{type:String},showIcon:{type:String},hideIcon:{type:String},expanded:{type:Boolean,reflect:!0}}),Fr(qr,"styles",[un,o(wt||(wt=Br(["\n :host {\n --color: var(--purple-60);\n --hover-color: var(--red-60);\n --margin-top: var(--spacing-layout-half) !important;\n\n display: flex;\n flex-direction: column;\n row-gap: var(--spacing-between, 1rem);\n }\n\n :host([expanded]) {\n --margin-top: var(--spacing) !important;\n }\n\n button {\n background: transparent;\n border: none;\n color: var(--color);\n cursor: pointer;\n font: inherit;\n font-size: var(--font-size-small, 0.8rem);\n font-weight: bold;\n color: var(--)\n line-height: normal;\n margin: 0;\n overflow: visible;\n padding: 0;\n width: auto;\n }\n\n button:hover {\n color: var(--hover-color);\n }\n "])))]),customElements.get("cfa-reveal")||customElements.define("cfa-reveal",qr);class Wr extends cn{constructor(){super(),this.linkUrl="javascript:void(0);",this.linkTarget="_self"}render(){return q(yt||(yt=Vr(['\n <a href="','" target="','" class="slide">\n <div class="image">\n ','\n </div>\n <div class="content">\n <slot></slot>\n </div>\n </a>\n '])),this.linkUrl,this.linkTarget,this.imageUrl?q(xt||(xt=Vr(['\n <img\n src="','"\n alt="','"\n loading="lazy"\n onerror="this.style.display=\'none\'"\n />\n '])),this.imageUrl,this.imageAltText):"")}}function Zr(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function Kr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}Dr(Wr,"properties",{imageUrl:{},imageAltText:{},linkUrl:{},linkTarget:{}}),Dr(Wr,"styles",[un,o(kt||(kt=Vr(['\n :host {\n --background: var(--white, #fff);\n --width: var(--column-span-12);\n }\n\n .slide {\n background: var(--background);\n box-shadow: var(--shadow-small);\n color: inherit;\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: stretch;\n margin-inline: auto;\n max-width: var(--width);\n text-decoration: none;\n transition: box-shadow 0.2s ease-in-out;\n width: 100%;\n }\n\n .slide:hover,\n .slide:focus {\n box-shadow: var(--shadow-medium);\n }\n\n .image {\n background-image: url("https://codeforamerica.org/wp-content/themes/cfa-core/static/images/bg-placeholder-03.svg");\n background-position: center center;\n background-size: cover;\n height: var(--spacing-layout-9);\n position: relative;\n }\n\n .image::after {\n bottom: 0;\n box-shadow: inset 0 -50px 50px -50px var(--black-40);\n content: "";\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 2;\n }\n\n .image img {\n height: 100%;\n object-fit: cover;\n width: 100%;\n }\n\n .content {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-component-4);\n }\n\n @media (min-width: 1024px) {\n .slide {\n flex-direction: row;\n min-height: calc(12 * var(--spacing-layout-1));\n }\n\n .slide > * {\n flex-basis: 50%;\n }\n\n .image {\n height: auto;\n }\n\n .image::after {\n box-shadow: inset -50px -50px 50px -50px var(--black-20);\n }\n }\n '])))]),customElements.get("cfa-slide")||customElements.define("cfa-slide",Wr);class Jr extends cn{constructor(){super(),this.active=!1,this.panelId=""}firstUpdated(){this.addEventListener("keydown",this._onKeyDown)}_onKeyDown(n){const e=Array.from(this.parentElement.querySelectorAll("cfa-tab")),t=e.indexOf(this);let r;switch(n.key){case"ArrowLeft":r=(t-1+e.length)%e.length,e[r].shadowRoot.querySelector("button").focus();break;case"ArrowRight":r=(t+1)%e.length,e[r].shadowRoot.querySelector("button").focus();break;case"Home":e[0].shadowRoot.querySelector("button").focus();break;case"End":e[e.length-1].shadowRoot.querySelector("button").focus()}}render(){return q(zt||(zt=Zr(['\n <button\n role="tab"\n aria-selected="','"\n aria-controls="','"\n class="','"\n tabindex="','"\n >\n <slot></slot>\n </button>\n '])),this.active?"true":"false",this.panelId,this.active?"active":"",this.active?"0":"-1")}}function Xr(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function Yr(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}Kr(Jr,"properties",{active:{type:Boolean},panelId:{type:String}}),Kr(Jr,"styles",[un,Mn,o(jt||(jt=Zr(["\n button {\n background: none;\n border: 0;\n box-shadow: inset 0 calc(-1 * var(--hairline)) 0 0 var(--gray-40);\n color: var(--gray-80);\n cursor: pointer;\n font-family: var(--font-family-sans-serif);\n font-size: var(--font-size-small);\n font-weight: normal;\n padding: var(--spacing-component-2) var(--spacing-component-3)\n calc(var(--spacing-component-2) + var(--medium));\n }\n button:focus {\n background-color: var(--focus-color);\n outline: none;\n }\n button:not(.active):hover {\n box-shadow: inset 0 calc(-1 * var(--medium)) 0 0 var(--purple-40);\n color: var(--black);\n }\n button.active {\n box-shadow: inset 0 calc(-1 * var(--medium)) 0 0 var(--purple-60);\n color: var(--black);\n font-weight: bold;\n }\n "])))]),customElements.get("cfa-tab")||customElements.define("cfa-tab",Jr);class Gr extends cn{constructor(){super()}firstUpdated(){this.addEventListener("click",this._onTabClick),this.setAttribute("role","tablist"),this._setInitialAriaAttributes()}_setInitialAriaAttributes(){this.querySelectorAll("cfa-tab").forEach((n,e)=>{n.setAttribute("role","tab"),n.setAttribute("aria-selected","false"),n.setAttribute("tabindex","-1"),0===e&&(n.setAttribute("aria-selected","true"),n.setAttribute("tabindex","0"))})}_onTabClick(n){const e=n.target.closest("cfa-tab");e&&this._setActiveTab(e)}_setActiveTab(n){this.querySelectorAll("cfa-tab").forEach(n=>{n.removeAttribute("active"),n.setAttribute("aria-selected","false"),n.setAttribute("tabindex","-1")}),n.setAttribute("active",""),n.setAttribute("aria-selected","true"),n.setAttribute("tabindex","0");let e=n.id;e&&e.startsWith("tab-")&&(e=e.substring(4)),console.log("Tab changed event dispatched with ID:",e),this.dispatchEvent(new CustomEvent("tab-changed",{detail:{id:e},bubbles:!0,composed:!0}))}render(){return q(_t||(_t=Xr(['\n <div class="tab-list" role="tablist">\n <slot></slot>\n </div>\n '])))}}function Qr(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function ni(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}Yr(Gr,"properties",{}),Yr(Gr,"styles",[un,Pn,o(Et||(Et=Xr(['\n :host {\n display: block;\n width: calc(100% + var(--outer-margin));\n }\n\n .tab-list {\n display: flex;\n flex-direction: row;\n line-height: 1;\n margin-inline-start: calc(-1 * var(--outer-margin));\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n white-space: nowrap;\n }\n\n .tab-list::before {\n content: "";\n min-width: var(--outer-margin);\n }\n\n .tab-list::after {\n border-bottom: var(--hairline) solid var(--gray-40);\n content: "";\n flex-grow: 1;\n margin-right: var(--outer-margin);\n }\n\n ::slotted(*) {\n max-width: none !important;\n white-space: nowrap !important;\n }\n '])))]),customElements.get("cfa-tab-list")||customElements.define("cfa-tab-list",Gr);class ei extends cn{tileContentTemplate(){return q(St||(St=Qr(["\n ",'\n\n <div class="title h3">',"</div>\n\n \x3c!-- Description --\x3e\n ","\n\n \x3c!-- Action label --\x3e\n ","\n "])),this.imageUrl?q($t||($t=Qr(['\n <picture>\n <cfa-blob></cfa-blob>\n <img\n src="','"\n alt="','"\n load="lazy"\n />\n </picture>\n '])),this.imageUrl,this.imageAltText):W,this.title,this.description?q(At||(At=Qr([' <p class="small">',"</p> "])),this.description):W,this.actionLabel?q(Pt||(Pt=Qr(['\n <div class="label small strong">\n '," <cfa-icon>arrow_forward</cfa-icon>\n </div>\n "])),this.actionLabel):W)}render(){return q(Ot||(Ot=Qr(["\n <style>\n cfa-blob {\n --color: var(--blob-color);\n }\n </style>\n ","\n "])),this.linkUrl?q(Ct||(Ct=Qr(['\n <a\n href="','"\n target="','"\n rel="','"\n class="tile"\n >\n ',"\n </a>\n "])),this.linkUrl,this.linkTarget,"_blank"==this.linkTarget?"noopener":W,this.tileContentTemplate()):q(Tt||(Tt=Qr([' <div class="tile">',"</div> "])),this.tileContentTemplate()))}}function ti(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}ni(ei,"properties",{title:{type:String},description:{type:String},actionLabel:{type:String},linkUrl:{type:String},linkTarget:{type:String},imageUrl:{type:String},imageThumbnailUrl:{type:String},imageAltText:{type:String}}),ni(ei,"styles",[un,Mn,o(Ut||(Ut=Qr(["\n :host {\n --bg-color: var(--white);\n --title-color: var(--purple-60);\n --text-color: var(--black);\n --action-label-color: var(--purple-80);\n --action-label-hover-highlight: var(--purple-20);\n --blob-color: var(--purple-20);\n\n align-items: stretch;\n display: flex;\n text-align: center;\n width: 100%;\n }\n\n .tile {\n background-color: var(--bg-color);\n border-radius: var(--spacing-component-2);\n border: var(--hairline) solid var(--black-20);\n color: var(--text-color);\n display: flex;\n flex-direction: column;\n padding: var(--spacing-component-4);\n text-decoration: none;\n transition:\n box-shadow 0.5s ease-in-out,\n border-color 0.5s ease-in-out;\n width: 100%;\n }\n\n a.tile:hover {\n box-shadow: var(--shadow-medium);\n border-color: rgba(0, 0, 0, 0);\n }\n\n picture {\n display: grid;\n place-items: center;\n padding-block-end: var(--spacing-layout-1);\n }\n\n picture > * {\n height: var(--spacing-layout-4);\n grid-area: 1 / 1;\n }\n\n cfa-blob {\n transition: scale 0.5s ease-in-out;\n }\n\n a.tile:hover cfa-blob {\n scale: 1.2;\n }\n\n img {\n object-fit: contain;\n z-index: 2;\n }\n\n .title {\n color: var(--title-color);\n }\n\n .label {\n color: var(--action-label-color);\n display: inline-block;\n margin-block-start: auto;\n padding-block-start: var(--spacing-layout-half);\n }\n "])))]),customElements.get("cfa-tile")||customElements.define("cfa-tile",ei);class ri extends cn{render(){return q(Lt||(Lt=ti(['\n <div class="label eyebrow-with-line">Transcript</div>\n <div class="text small">\n <slot />\n </div>\n '])))}}function ii(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function oi(n,e,t){return(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}!function(n,e,t){(e=function(n){var e=function(n){if("object"!=typeof n||!n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var t=e.call(n,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"==typeof e?e:e+""}(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t}(ri,"styles",[un,Mn,o(Mt||(Mt=ti(["\n :host {\n --label-color: var(--purple-60);\n\n display: block;\n max-width: var(--column-span-8);\n }\n\n .label {\n --text-color: var(--label-color);\n }\n\n .text {\n background-color: var(--white);\n border: var(--hairline) solid var(--black-20);\n color: var(--black);\n height: calc(12 * var(--spacing-layout-1));\n overflow: auto;\n padding: var(--spacing-component-3);\n }\n "])))]),customElements.get("cfa-transcript")||customElements.define("cfa-transcript",ri);class ai extends cn{constructor(){super(),this.atScrollStart=!0,this.atScrollEnd=!1}connectedCallback(){super.connectedCallback(),this.addEventListener("focusin",n=>{""===n.target.slot&&n.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})})}scrollPrevious(){const n=this.shadowRoot.querySelector(".carousel"),e=this.shadowRoot.querySelector("slot").assignedElements()[0].clientWidth;n.scrollBy({left:-e,behavior:"smooth"})}scrollNext(){const n=this.shadowRoot.querySelector(".carousel"),e=this.shadowRoot.querySelector("slot").assignedElements()[0].clientWidth;n.scrollBy({left:e,behavior:"smooth"})}handleScroll(n){0===n.target.scrollLeft?this.atScrollStart=!0:this.atScrollStart=!1,Math.round(n.target.scrollLeft+n.target.clientWidth)>=Math.round(n.target.scrollWidth)?this.atScrollEnd=!0:this.atScrollEnd=!1}render(){return q(Ht||(Ht=ii(['\n <div class="carousel" @scroll=','>\n <div class="spacer"></div>\n <slot></slot>\n <div class="spacer"></div>\n </div>\n <div class="controls">\n <button\n class="previous ','"\n @click="','"\n >\n <cfa-icon>arrow_back</cfa-icon>\n </button>\n <button\n class="next ','"\n @click="','"\n >\n <cfa-icon>arrow_forward</cfa-icon>\n </button>\n </div>\n '])),this.handleScroll,this.atScrollStart?"disabled":"",this.scrollPrevious,this.atScrollEnd?"disabled":"",this.scrollNext)}}oi(ai,"properties",{atScrollStart:{type:Boolean},atScrollEnd:{type:Boolean}}),oi(ai,"styles",[un,o(Nt||(Nt=ii(["\n :host {\n --slide-width-mobile: 75vw;\n --slide-width-desktop: var(--column-span-3);\n\n display: block;\n scrollbar-color: transparent transparent;\n scrollbar-width: 0px;\n scroll-behavior: smooth;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n }\n\n :host(:focus) {\n outline: none !important;\n }\n\n ::-webkit-scrollbar {\n background: transparent;\n width: 0px;\n }\n\n .carousel {\n display: flex;\n gap: var(--spacing-layout-1);\n overflow-x: scroll;\n scroll-snap-type: x mandatory;\n padding-block-start: var(--spacing-layout-half);\n padding-block-end: var(--spacing-layout-1);\n }\n\n .controls {\n margin-block-start: calc(-1 * var(--spacing-layout-half));\n margin-block-end: var(--spacing-layout-1);\n text-align: center;\n }\n\n .controls > * + * {\n margin-inline-start: var(--spacing-layout-half);\n }\n\n .controls button {\n background: transparent;\n border: none;\n border-radius: 50%;\n color: var(--purple-80);\n cursor: pointer;\n font-size: var(--font-size-large, 1.25rem);\n height: var(--spacing-layout-2);\n transition: background-color 0.2s ease-in-out;\n width: var(--spacing-layout-2);\n }\n\n .controls button:hover,\n .controls button:focus {\n background-color: var(--white, #fff);\n }\n\n .controls button:focus {\n outline: var(--focus-outline);\n }\n\n .controls button.disabled {\n color: var(--black-20);\n cursor: default;\n }\n\n .controls button.disabled:hover,\n .controls button.disabled:focus {\n background: transparent;\n outline: none;\n }\n\n ::slotted(*) {\n flex: 0 0 var(--slide-width-mobile);\n margin-block: var(--spacing-layout-1);\n scroll-snap-align: center;\n }\n\n @media (min-width: 1024px) {\n ::slotted(*) {\n flex: 0 0 var(--slide-width-desktop);\n }\n\n .spacer {\n flex: 0 0\n calc((100vw - var(--column-span-12)) / 2 - var(--outer-margin));\n }\n }\n "])))]),customElements.get("cfa-carousel")||customElements.define("cfa-carousel",ai)})();
|
|
2
|
+
(()=>{"use strict";const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,o=Symbol(),i=new WeakMap;class a{constructor(t,e,i){if(this._$cssResult$=!0,i!==o)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const o=this.t;if(e&&void 0===t){const e=void 0!==o&&1===o.length;e&&(t=i.get(o)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&i.set(o,t))}return t}toString(){return this.cssText}}const s=(t,...e)=>{const i=1===t.length?t[0]:e.reduce((e,o,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(o)+t[i+1],t[0]);return new a(i,t,o)},r=(o,i)=>{if(e)o.adoptedStyleSheets=i.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of i){const i=document.createElement("style"),a=t.litNonce;void 0!==a&&i.setAttribute("nonce",a),i.textContent=e.cssText,o.appendChild(i)}},n=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const o of t.cssRules)e+=o.cssText;return(t=>new a("string"==typeof t?t:t+"",void 0,o))(e)})(t):t,{is:l,defineProperty:c,getOwnPropertyDescriptor:h,getOwnPropertyNames:d,getOwnPropertySymbols:p,getPrototypeOf:g}=Object,v=globalThis,u=v.trustedTypes,m=u?u.emptyScript:"",f=v.reactiveElementPolyfillSupport,b=(t,e)=>t,w={toAttribute(t,e){switch(e){case Boolean:t=t?m:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let o=t;switch(e){case Boolean:o=null!==t;break;case Number:o=null===t?null:Number(t);break;case Object:case Array:try{o=JSON.parse(t)}catch(t){o=null}}return o}},y=(t,e)=>!l(t,e),x={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:y};Symbol.metadata??=Symbol("metadata"),v.litPropertyMetadata??=new WeakMap;class $ extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=x){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const o=Symbol(),i=this.getPropertyDescriptor(t,o,e);void 0!==i&&c(this.prototype,t,i)}}static getPropertyDescriptor(t,e,o){const{get:i,set:a}=h(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:i,set(e){const s=i?.call(this);a?.call(this,e),this.requestUpdate(t,s,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??x}static _$Ei(){if(this.hasOwnProperty(b("elementProperties")))return;const t=g(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(b("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(b("properties"))){const t=this.properties,e=[...d(t),...p(t)];for(const o of e)this.createProperty(o,t[o])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,o]of e)this.elementProperties.set(t,o)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const o=this._$Eu(t,e);void 0!==o&&this._$Eh.set(o,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const o=new Set(t.flat(1/0).reverse());for(const t of o)e.unshift(n(t))}else void 0!==t&&e.push(n(t));return e}static _$Eu(t,e){const o=e.attribute;return!1===o?void 0:"string"==typeof o?o:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const o of e.keys())this.hasOwnProperty(o)&&(t.set(o,this[o]),delete this[o]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return r(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,o){this._$AK(t,o)}_$ET(t,e){const o=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,o);if(void 0!==i&&!0===o.reflect){const a=(void 0!==o.converter?.toAttribute?o.converter:w).toAttribute(e,o.type);this._$Em=t,null==a?this.removeAttribute(i):this.setAttribute(i,a),this._$Em=null}}_$AK(t,e){const o=this.constructor,i=o._$Eh.get(t);if(void 0!==i&&this._$Em!==i){const t=o.getPropertyOptions(i),a="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this._$Em=i;const s=a.fromAttribute(e,t.type);this[i]=s??this._$Ej?.get(i)??s,this._$Em=null}}requestUpdate(t,e,o,i=!1,a){if(void 0!==t){const s=this.constructor;if(!1===i&&(a=this[t]),o??=s.getPropertyOptions(t),!((o.hasChanged??y)(a,e)||o.useDefault&&o.reflect&&a===this._$Ej?.get(t)&&!this.hasAttribute(s._$Eu(t,o))))return;this.C(t,e,o)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:o,reflect:i,wrapped:a},s){o&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,s??e??this[t]),!0!==a||void 0!==s)||(this._$AL.has(t)||(this.hasUpdated||o||(e=void 0),this._$AL.set(t,e)),!0===i&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,o]of t){const{wrapped:t}=o,i=this[e];!0!==t||this._$AL.has(e)||void 0===i||this.C(e,void 0,o,i)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}}$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[b("elementProperties")]=new Map,$[b("finalized")]=new Map,f?.({ReactiveElement:$}),(v.reactiveElementVersions??=[]).push("2.1.2");const k=globalThis,_=t=>t,z=k.trustedTypes,A=z?z.createPolicy("lit-html",{createHTML:t=>t}):void 0,E="$lit$",C=`lit$${Math.random().toFixed(9).slice(2)}$`,S="?"+C,T=`<${S}>`,U=document,L=()=>U.createComment(""),M=t=>null===t||"object"!=typeof t&&"function"!=typeof t,P=Array.isArray,H="[ \t\n\f\r]",N=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,R=/-->/g,I=/>/g,B=RegExp(`>|${H}(?:([^\\s"'>=/]+)(${H}*=${H}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),O=/'/g,F=/"/g,q=/^(?:script|style|textarea|title)$/i,j=t=>(e,...o)=>({_$litType$:t,strings:e,values:o}),V=j(1),D=j(2),W=(j(3),Symbol.for("lit-noChange")),Z=Symbol.for("lit-nothing"),K=new WeakMap,J=U.createTreeWalker(U,129);function X(t,e){if(!P(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==A?A.createHTML(e):e}const Y=(t,e)=>{const o=t.length-1,i=[];let a,s=2===e?"<svg>":3===e?"<math>":"",r=N;for(let e=0;e<o;e++){const o=t[e];let n,l,c=-1,h=0;for(;h<o.length&&(r.lastIndex=h,l=r.exec(o),null!==l);)h=r.lastIndex,r===N?"!--"===l[1]?r=R:void 0!==l[1]?r=I:void 0!==l[2]?(q.test(l[2])&&(a=RegExp("</"+l[2],"g")),r=B):void 0!==l[3]&&(r=B):r===B?">"===l[0]?(r=a??N,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,n=l[1],r=void 0===l[3]?B:'"'===l[3]?F:O):r===F||r===O?r=B:r===R||r===I?r=N:(r=B,a=void 0);const d=r===B&&t[e+1].startsWith("/>")?" ":"";s+=r===N?o+T:c>=0?(i.push(n),o.slice(0,c)+E+o.slice(c)+C+d):o+C+(-2===c?e:d)}return[X(t,s+(t[o]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),i]};class G{constructor({strings:t,_$litType$:e},o){let i;this.parts=[];let a=0,s=0;const r=t.length-1,n=this.parts,[l,c]=Y(t,e);if(this.el=G.createElement(l,o),J.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=J.nextNode())&&n.length<r;){if(1===i.nodeType){if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(E)){const e=c[s++],o=i.getAttribute(t).split(C),r=/([.?@])?(.*)/.exec(e);n.push({type:1,index:a,name:r[2],strings:o,ctor:"."===r[1]?it:"?"===r[1]?at:"@"===r[1]?st:ot}),i.removeAttribute(t)}else t.startsWith(C)&&(n.push({type:6,index:a}),i.removeAttribute(t));if(q.test(i.tagName)){const t=i.textContent.split(C),e=t.length-1;if(e>0){i.textContent=z?z.emptyScript:"";for(let o=0;o<e;o++)i.append(t[o],L()),J.nextNode(),n.push({type:2,index:++a});i.append(t[e],L())}}}else if(8===i.nodeType)if(i.data===S)n.push({type:2,index:a});else{let t=-1;for(;-1!==(t=i.data.indexOf(C,t+1));)n.push({type:7,index:a}),t+=C.length-1}a++}}static createElement(t,e){const o=U.createElement("template");return o.innerHTML=t,o}}function Q(t,e,o=t,i){if(e===W)return e;let a=void 0!==i?o._$Co?.[i]:o._$Cl;const s=M(e)?void 0:e._$litDirective$;return a?.constructor!==s&&(a?._$AO?.(!1),void 0===s?a=void 0:(a=new s(t),a._$AT(t,o,i)),void 0!==i?(o._$Co??=[])[i]=a:o._$Cl=a),void 0!==a&&(e=Q(t,a._$AS(t,e.values),a,i)),e}class tt{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:o}=this._$AD,i=(t?.creationScope??U).importNode(e,!0);J.currentNode=i;let a=J.nextNode(),s=0,r=0,n=o[0];for(;void 0!==n;){if(s===n.index){let e;2===n.type?e=new et(a,a.nextSibling,this,t):1===n.type?e=new n.ctor(a,n.name,n.strings,this,t):6===n.type&&(e=new rt(a,this,t)),this._$AV.push(e),n=o[++r]}s!==n?.index&&(a=J.nextNode(),s++)}return J.currentNode=U,i}p(t){let e=0;for(const o of this._$AV)void 0!==o&&(void 0!==o.strings?(o._$AI(t,o,e),e+=o.strings.length-2):o._$AI(t[e])),e++}}class et{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,o,i){this.type=2,this._$AH=Z,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=o,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Q(this,t,e),M(t)?t===Z||null==t||""===t?(this._$AH!==Z&&this._$AR(),this._$AH=Z):t!==this._$AH&&t!==W&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>P(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==Z&&M(this._$AH)?this._$AA.nextSibling.data=t:this.T(U.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:o}=t,i="number"==typeof o?this._$AC(t):(void 0===o.el&&(o.el=G.createElement(X(o.h,o.h[0]),this.options)),o);if(this._$AH?._$AD===i)this._$AH.p(e);else{const t=new tt(i,this),o=t.u(this.options);t.p(e),this.T(o),this._$AH=t}}_$AC(t){let e=K.get(t.strings);return void 0===e&&K.set(t.strings,e=new G(t)),e}k(t){P(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let o,i=0;for(const a of t)i===e.length?e.push(o=new et(this.O(L()),this.O(L()),this,this.options)):o=e[i],o._$AI(a),i++;i<e.length&&(this._$AR(o&&o._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=_(t).nextSibling;_(t).remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class ot{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,o,i,a){this.type=1,this._$AH=Z,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=a,o.length>2||""!==o[0]||""!==o[1]?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=Z}_$AI(t,e=this,o,i){const a=this.strings;let s=!1;if(void 0===a)t=Q(this,t,e,0),s=!M(t)||t!==this._$AH&&t!==W,s&&(this._$AH=t);else{const i=t;let r,n;for(t=a[0],r=0;r<a.length-1;r++)n=Q(this,i[o+r],e,r),n===W&&(n=this._$AH[r]),s||=!M(n)||n!==this._$AH[r],n===Z?t=Z:t!==Z&&(t+=(n??"")+a[r+1]),this._$AH[r]=n}s&&!i&&this.j(t)}j(t){t===Z?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class it extends ot{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===Z?void 0:t}}class at extends ot{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==Z)}}class st extends ot{constructor(t,e,o,i,a){super(t,e,o,i,a),this.type=5}_$AI(t,e=this){if((t=Q(this,t,e,0)??Z)===W)return;const o=this._$AH,i=t===Z&&o!==Z||t.capture!==o.capture||t.once!==o.once||t.passive!==o.passive,a=t!==Z&&(o===Z||i);i&&this.element.removeEventListener(this.name,this,o),a&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class rt{constructor(t,e,o){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const nt=k.litHtmlPolyfillSupport;nt?.(G,et),(k.litHtmlVersions??=[]).push("3.3.2");const lt=globalThis;class ct extends ${constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,o)=>{const i=o?.renderBefore??e;let a=i._$litPart$;if(void 0===a){const t=o?.renderBefore??null;i._$litPart$=a=new et(e.insertBefore(L(),t),t,void 0,o??{})}return a._$AI(t),a})(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return W}}ct._$litElement$=!0,ct.finalized=!0,lt.litElementHydrateSupport?.({LitElement:ct});const ht=lt.litElementPolyfillSupport;ht?.({LitElement:ct}),(lt.litElementVersions??=[]).push("4.2.2");const dt=s`
|
|
3
|
+
*,
|
|
4
|
+
*::before,
|
|
5
|
+
*::after {
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
*:focus-visible,
|
|
10
|
+
*:target {
|
|
11
|
+
outline: var(--focus-outline);
|
|
12
|
+
position: relative;
|
|
13
|
+
}
|
|
14
|
+
`;class pt extends ct{static properties={imageUrl:{},altText:{},size:{}};static styles=(()=>[dt,s`
|
|
15
|
+
:host {
|
|
16
|
+
--bg-color: var(--blue-20);
|
|
17
|
+
|
|
18
|
+
display: inline-block;
|
|
19
|
+
max-width: 100%;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
picture {
|
|
23
|
+
aspect-ratio: 1 / 1;
|
|
24
|
+
background-color: var(--bg-color);
|
|
25
|
+
border-radius: 50%;
|
|
26
|
+
display: block;
|
|
27
|
+
max-width: 100%;
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
width: var(--size);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
img {
|
|
33
|
+
display: block;
|
|
34
|
+
height: 100%;
|
|
35
|
+
object-fit: cover;
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
`])();render(){return V`
|
|
39
|
+
<style>
|
|
40
|
+
:host {
|
|
41
|
+
--size: var(--spacing-layout-${this.size||"4"}, 8rem);
|
|
42
|
+
}
|
|
43
|
+
</style>
|
|
44
|
+
<picture>
|
|
45
|
+
${this.imageUrl?V`
|
|
46
|
+
<img
|
|
47
|
+
src="${this.imageUrl}"
|
|
48
|
+
loading="lazy"
|
|
49
|
+
alt="${this.altText}"
|
|
50
|
+
/>
|
|
51
|
+
`:Z}
|
|
52
|
+
</picture>
|
|
53
|
+
`}}customElements.get("cfa-avatar")||customElements.define("cfa-avatar",pt);class gt extends ct{static properties={color:{},shape:{},styles:{}};static styles=(()=>[dt,s`
|
|
54
|
+
:host {
|
|
55
|
+
--color: var(--blue-20);
|
|
56
|
+
|
|
57
|
+
display: block;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.blob,
|
|
61
|
+
svg {
|
|
62
|
+
height: 100%;
|
|
63
|
+
width: 100%;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
svg path {
|
|
67
|
+
fill: var(--color, #fff);
|
|
68
|
+
}
|
|
69
|
+
`])();constructor(){super(),this.shape="1"}blobTemplate(){let t;switch(this.shape){case"1":default:t=V`<svg
|
|
70
|
+
width="628"
|
|
71
|
+
height="577"
|
|
72
|
+
viewBox="0 0 628 577"
|
|
73
|
+
fill="none"
|
|
74
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
75
|
+
>
|
|
76
|
+
<path
|
|
77
|
+
fill-rule="evenodd"
|
|
78
|
+
clip-rule="evenodd"
|
|
79
|
+
d="M304.482 3.44206C399.413 -5.50752 504.225 1.17063 567.446 72.5295C633.526 147.115 639.549 256.491 613.992 352.793C589.57 444.814 526.084 523.087 438.164 559.679C355.477 594.092 265.039 570.416 184.315 531.621C103.504 492.784 22.0294 438.546 3.59029 350.826C-14.5863 264.355 39.2746 183.666 97.1329 116.868C151.394 54.223 221.956 11.2221 304.482 3.44206Z"
|
|
80
|
+
/>
|
|
81
|
+
</svg>`;break;case"2":t=V`<svg
|
|
82
|
+
width="580"
|
|
83
|
+
height="592"
|
|
84
|
+
viewBox="0 0 580 592"
|
|
85
|
+
fill="none"
|
|
86
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
87
|
+
>
|
|
88
|
+
<path
|
|
89
|
+
d="M238.814 591.215C210.461 592.077 182.849 587.767 155.66 580.979C60.4457 557.059 4.05766 489.933 0.460672 390.376C-2.50155 306.442 8.71258 223.693 37.2769 144.499C73.2468 44.6185 170.894 -12.5948 276.159 2.81295C358.996 14.9883 437.177 39.3389 499.172 100.108C588.039 187.167 604.437 293.512 544.346 402.767C514.618 456.855 477.59 505.988 426.386 541.544C369.892 580.656 304.723 587.767 238.814 591.215Z"
|
|
90
|
+
/>
|
|
91
|
+
</svg>`;break;case"3":t=V`<svg
|
|
92
|
+
width="620"
|
|
93
|
+
height="613"
|
|
94
|
+
viewBox="0 0 620 613"
|
|
95
|
+
fill="none"
|
|
96
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
97
|
+
>
|
|
98
|
+
<path
|
|
99
|
+
fill-rule="evenodd"
|
|
100
|
+
clip-rule="evenodd"
|
|
101
|
+
d="M619.142 301.769C615.581 212.393 536.92 153.752 466.654 98.7402C397.998 44.9883 323.934 -10.5844 236.421 2.12929C141.656 15.8965 53.9975 76.8338 15.687 164.256C-20.6955 247.277 16.2818 336.243 54.5575 417.127C92.4807 497.265 137.965 580.831 224.139 604.752C314.166 629.742 409.183 593.817 484.092 536.359C559.738 478.336 622.883 395.641 619.142 301.769Z"
|
|
102
|
+
/>
|
|
103
|
+
</svg>`;break;case"4":t=V`<svg
|
|
104
|
+
width="656"
|
|
105
|
+
height="566"
|
|
106
|
+
viewBox="0 0 656 566"
|
|
107
|
+
fill="none"
|
|
108
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
109
|
+
>
|
|
110
|
+
<path
|
|
111
|
+
fill-rule="evenodd"
|
|
112
|
+
clip-rule="evenodd"
|
|
113
|
+
d="M332.011 564.695C235.808 569.34 135.091 552.4 71.2946 488.381C4.66596 421.518 -10.0767 327.738 8.2158 239.764C27.3773 147.61 73.5054 52.3693 169.88 14.2546C263.181 -22.6447 364.8 21.5179 455.491 62.8734C540.631 101.698 627.337 150.367 649.771 233.088C672.265 316.032 626.78 399.503 564.43 464.569C505.684 525.875 422.382 560.331 332.011 564.695Z"
|
|
114
|
+
/>
|
|
115
|
+
</svg>`}return t}render(){const t=this.color?`var(--${this.color})`:"var(--blue-20)";return V`
|
|
116
|
+
<div
|
|
117
|
+
class="blob"
|
|
118
|
+
style="--color: ${t}"
|
|
119
|
+
>
|
|
120
|
+
${this.blobTemplate()}
|
|
121
|
+
</div>
|
|
122
|
+
`}}customElements.get("cfa-blob")||customElements.define("cfa-blob",gt);const vt=s`
|
|
123
|
+
.cfa-button,
|
|
124
|
+
a.cfa-button,
|
|
125
|
+
.cfa-button > a,
|
|
126
|
+
.wp-block-button > * {
|
|
127
|
+
--bg-color: var(--white);
|
|
128
|
+
--border-color: transparent;
|
|
129
|
+
--font-family: var(--font-family-sans-serif);
|
|
130
|
+
--font-size: var(--font-size-base);
|
|
131
|
+
--hover-bg-color: var(--blue-20);
|
|
132
|
+
--hover-border-color: var(--border-color);
|
|
133
|
+
--line-height: var(--line-height-base);
|
|
134
|
+
--text-color: var(--purple-80);
|
|
135
|
+
|
|
136
|
+
background-color: var(--bg-color);
|
|
137
|
+
border: var(--hairline) solid var(--border-color);
|
|
138
|
+
border-radius: var(--rounded-corners);
|
|
139
|
+
box-shadow: var(--shadow-small);
|
|
140
|
+
color: var(--text-color);
|
|
141
|
+
cursor: pointer;
|
|
142
|
+
display: block;
|
|
143
|
+
font-family: var(--font-family);
|
|
144
|
+
font-size: var(--font-size);
|
|
145
|
+
font-weight: bold;
|
|
146
|
+
padding: var(--spacing-component-2) var(--spacing-component-3);
|
|
147
|
+
text-align: center;
|
|
148
|
+
text-decoration: none;
|
|
149
|
+
transition: background-color 0.5s, box-shadow 0.5s;
|
|
150
|
+
|
|
151
|
+
&:hover {
|
|
152
|
+
background-color: var(--hover-bg-color);
|
|
153
|
+
border-color: var(--hover-border-color);
|
|
154
|
+
box-shadow: var(--shadow-medium);
|
|
155
|
+
color: var(--text-color);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
@media (max-width: 768px) {
|
|
160
|
+
.cfa-button,
|
|
161
|
+
a.cfa-button,
|
|
162
|
+
.cfa-button > a,
|
|
163
|
+
.wp-block-button > * {
|
|
164
|
+
width: 100%;
|
|
165
|
+
|
|
166
|
+
& + & {
|
|
167
|
+
margin-block-start: var(--spacing-layout-half);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.wp-block-button {
|
|
172
|
+
width: 100%;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
@media (min-width: 768px) {
|
|
177
|
+
.cfa-button,
|
|
178
|
+
a.cfa-button,
|
|
179
|
+
.cfa-button > a,
|
|
180
|
+
.wp-block-button > * {
|
|
181
|
+
display: inline-block;
|
|
182
|
+
|
|
183
|
+
& {
|
|
184
|
+
margin-block: var(--spacing-component-2);
|
|
185
|
+
margin-inline-end: var(--spacing-component-2);
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
// Themes / variants
|
|
191
|
+
|
|
192
|
+
.cfa-button--primary,
|
|
193
|
+
a.cfa-button--primary,
|
|
194
|
+
.cfa-button--primary > a,
|
|
195
|
+
.wp-block-button.is-style-primary > * {
|
|
196
|
+
--bg-color: var(--red-60);
|
|
197
|
+
--hover-bg-color: var(--red-80);
|
|
198
|
+
--text-color: var(--white,);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.cfa-button--outline,
|
|
202
|
+
a.cfa-button--outline,
|
|
203
|
+
.cfa-button--outline > a,
|
|
204
|
+
.wp-block-button.is-style-outline > * {
|
|
205
|
+
--border-color: var(--black-20);
|
|
206
|
+
--bg-color: transparent;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.cfa-button--outline-white,
|
|
210
|
+
a.cfa-button--outline-white,
|
|
211
|
+
.cfa-button--outline-white > a,
|
|
212
|
+
.wp-block-button.is-style-outline-white > * {
|
|
213
|
+
--border-color: var(--white);
|
|
214
|
+
--bg-color: transparent;
|
|
215
|
+
--hover-bg-color: var(--black-20);
|
|
216
|
+
--shadow-color: var(--white-20);
|
|
217
|
+
--text-color: var(--white);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.cfa-button--prominent-link,
|
|
221
|
+
a.cfa-button--prominent-link,
|
|
222
|
+
.cfa-button--prominent-link > a,
|
|
223
|
+
.wp-block-button.is-style-prominent-link > * {
|
|
224
|
+
--accent-color: var(--purple-60);
|
|
225
|
+
|
|
226
|
+
background: unset;
|
|
227
|
+
box-shadow: unset;
|
|
228
|
+
color: inherit;
|
|
229
|
+
font-weight: bold;
|
|
230
|
+
padding: 0;
|
|
231
|
+
text-decoration: underline;
|
|
232
|
+
text-decoration-color: var(--accent-color);
|
|
233
|
+
text-decoration-thickness: var(--medium);
|
|
234
|
+
text-underline-offset: 0.4em;
|
|
235
|
+
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
|
236
|
+
|
|
237
|
+
&:hover {
|
|
238
|
+
--accent-color: var(--red-60);
|
|
239
|
+
|
|
240
|
+
background: unset;
|
|
241
|
+
box-shadow: unset;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
&::after {
|
|
245
|
+
@include icon.icon;
|
|
246
|
+
|
|
247
|
+
content: "arrow_right_alt";
|
|
248
|
+
display: inline-block;
|
|
249
|
+
padding-inline-start: 0.1em;
|
|
250
|
+
text-decoration: none;
|
|
251
|
+
transition: transform 0.2s ease-in-out;
|
|
252
|
+
width: 1em;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
&:hover::after {
|
|
256
|
+
transform: translateX(0.3em);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
cfa-icon {
|
|
260
|
+
text-decoration: none;
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
// Sizes
|
|
265
|
+
|
|
266
|
+
.cfa-button--sm,
|
|
267
|
+
a.cfa-button--sm,
|
|
268
|
+
.cfa-button--sm > a {
|
|
269
|
+
--font-size: var(--font-size-small);
|
|
270
|
+
--line-height: var(--line-height-small);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.cfa-button--md,
|
|
274
|
+
a.cfa-button--md,
|
|
275
|
+
.cfa-button--md > a {
|
|
276
|
+
--font-size: var(--font-size-base);
|
|
277
|
+
--line-height: var(--line-height-base);
|
|
278
|
+
}
|
|
279
|
+
`;class ut extends ct{static styles=(()=>[dt,s`
|
|
280
|
+
:host {
|
|
281
|
+
--size: 1.2em;
|
|
282
|
+
|
|
283
|
+
display: inline;
|
|
284
|
+
line-height: inherit;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.icon {
|
|
288
|
+
-webkit-font-feature-settings: "liga";
|
|
289
|
+
direction: ltr;
|
|
290
|
+
display: inline-block;
|
|
291
|
+
font-family: "Material Symbols Rounded";
|
|
292
|
+
font-size: var(--size);
|
|
293
|
+
font-style: normal;
|
|
294
|
+
font-weight: normal;
|
|
295
|
+
letter-spacing: normal;
|
|
296
|
+
margin-top: -0.1em;
|
|
297
|
+
text-transform: none;
|
|
298
|
+
vertical-align: middle;
|
|
299
|
+
white-space: nowrap;
|
|
300
|
+
word-wrap: normal;
|
|
301
|
+
}
|
|
302
|
+
`])();render(){return V`
|
|
303
|
+
<span class="icon">
|
|
304
|
+
<slot></slot>
|
|
305
|
+
</span>
|
|
306
|
+
`}}customElements.get("cfa-icon")||customElements.define("cfa-icon",ut);const mt=s`
|
|
307
|
+
.serif {
|
|
308
|
+
font-family: var(--font-family-serif) !important;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.sans-serif {
|
|
312
|
+
font-family: var(--font-family-sans-serif) !important;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.normal {
|
|
316
|
+
font-weight: normal !important;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.strong {
|
|
320
|
+
font-weight: bold !important;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
italic {
|
|
324
|
+
font-style: italic !important;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.display 1 {
|
|
328
|
+
font-family: var(--font-family-display-1);
|
|
329
|
+
font-size: var(--font-size-display-1);
|
|
330
|
+
font-weight: var(--font-weight-display-1);
|
|
331
|
+
letter-spacing: var(--letter-spacing-display-1);
|
|
332
|
+
line-height: var(--line-height-display-1);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.display-2 {
|
|
336
|
+
font-family: var(--font-family-display-2);
|
|
337
|
+
font-size: var(--font-size-display-2);
|
|
338
|
+
font-weight: var(--font-weight-display-2);
|
|
339
|
+
letter-spacing: var(--letter-spacing-display-2);
|
|
340
|
+
line-height: var(--line-height-display-2);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.h1 {
|
|
344
|
+
font-family: var(--font-family-h1);
|
|
345
|
+
font-size: var(--font-size-h1);
|
|
346
|
+
font-weight: var(--font-weight-h1);
|
|
347
|
+
letter-spacing: var(--letter-spacing-h1);
|
|
348
|
+
line-height: var(--line-height-h1);
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.h2 {
|
|
352
|
+
font-family: var(--font-family-h2);
|
|
353
|
+
font-size: var(--font-size-h2);
|
|
354
|
+
font-weight: var(--font-weight-h2);
|
|
355
|
+
letter-spacing: var(--letter-spacing-h2);
|
|
356
|
+
line-height: var(--line-height-h2);
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.h3 {
|
|
360
|
+
font-family: var(--font-family-h3);
|
|
361
|
+
font-size: var(--font-size-h3);
|
|
362
|
+
font-weight: var(--font-weight-h3);
|
|
363
|
+
letter-spacing: var(--letter-spacing-h3);
|
|
364
|
+
line-height: var(--line-height-h3);
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.h4 {
|
|
368
|
+
font-family: var(--font-family-h4);
|
|
369
|
+
font-size: var(--font-size-h4);
|
|
370
|
+
font-weight: var(--font-weight-h4);
|
|
371
|
+
letter-spacing: var(--letter-spacing-h4);
|
|
372
|
+
line-height: var(--line-height-h4);
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.eyebrow {
|
|
376
|
+
font-family: var(--font-family-eyebrow);
|
|
377
|
+
font-size: var(--font-size-eyebrow);
|
|
378
|
+
font-weight: var(--font-weight-eyebrow);
|
|
379
|
+
letter-spacing: var(--letter-spacing-eyebrow);
|
|
380
|
+
line-height: var(--line-height-eyebrow);
|
|
381
|
+
text-transform: uppercase;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.eyebrow-with-line {
|
|
385
|
+
align-items: center;
|
|
386
|
+
color: var(--text-color);
|
|
387
|
+
display: flex;
|
|
388
|
+
font-family: var(--font-family-eyebrow);
|
|
389
|
+
font-size: var(--font-size-eyebrow);
|
|
390
|
+
font-weight: var(--font-weight-eyebrow);
|
|
391
|
+
letter-spacing: var(--letter-spacing-eyebrow);
|
|
392
|
+
line-height: var(--line-height-eyebrow);
|
|
393
|
+
margin-block-end: var(--spacing-layout-half);
|
|
394
|
+
position: relative;
|
|
395
|
+
text-transform: uppercase;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.eyebrow-with-line::after {
|
|
399
|
+
border-block-end: var(--hairline) solid var(--text-color);
|
|
400
|
+
content: "";
|
|
401
|
+
flex-grow: 1;
|
|
402
|
+
margin-left: var(--spacing-component-3);
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.small {
|
|
406
|
+
font-size: var(--font-size-small);
|
|
407
|
+
letter-spacing: var(--letter-spacing-small);
|
|
408
|
+
line-height: var(--line-height-small);
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.subtle {
|
|
412
|
+
color: var(--text-color-subtle);
|
|
413
|
+
}
|
|
414
|
+
`;class ft extends ct{static properties={color:""};static styles=(()=>[dt,mt,s`
|
|
415
|
+
.label {
|
|
416
|
+
--background-color: var(--gray-20);
|
|
417
|
+
--text-color: var(--black, #000);
|
|
418
|
+
|
|
419
|
+
background-color: var(--background-color);
|
|
420
|
+
color: var(--text-color);
|
|
421
|
+
display: inline-block;
|
|
422
|
+
line-height: 1em;
|
|
423
|
+
padding: var(--spacing-component-2) var(--spacing-component-3);
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.label[color="white"] {
|
|
427
|
+
--background-color: var(--white, #fff);
|
|
428
|
+
box-shadow: var(--shadow-small);
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.label[color="purple"] {
|
|
432
|
+
--background-color: var(--purple-20);
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.label[color="red"] {
|
|
436
|
+
--background-color: var(--red-20);
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.label[color="blue"] {
|
|
440
|
+
--background-color: var(--blue-20);
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
.label[color="green"] {
|
|
444
|
+
--background-color: var(--green-20);
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.label[color="yellow"] {
|
|
448
|
+
--background-color: var(--yellow-20);
|
|
449
|
+
}
|
|
450
|
+
`])();render(){return V`
|
|
451
|
+
<div class="label small strong" color="${this.color}">
|
|
452
|
+
<slot />
|
|
453
|
+
</div>
|
|
454
|
+
`}}customElements.get("cfa-label")||customElements.define("cfa-label",ft);class bt extends ct{static styles=(()=>[dt,s`
|
|
455
|
+
:host {
|
|
456
|
+
--bg-color: var(--gray-20);
|
|
457
|
+
--text-color: var(--gray-80);
|
|
458
|
+
|
|
459
|
+
background-color: var(--bg-color);
|
|
460
|
+
border-radius: var(--spacing-component-3);
|
|
461
|
+
color: var(--text-color);
|
|
462
|
+
display: inline-block;
|
|
463
|
+
font-size: var(--font-size-small);
|
|
464
|
+
font-weight: bold;
|
|
465
|
+
line-height: 1;
|
|
466
|
+
margin-right: var(--spacing-component-1);
|
|
467
|
+
padding: var(--spacing-component-1) var(--spacing-component-2);
|
|
468
|
+
vertical-align: middle;
|
|
469
|
+
}
|
|
470
|
+
`])();render(){return V` <slot /> `}}customElements.get("cfa-pill")||customElements.define("cfa-pill",bt);class wt extends ct{static properties={};static styles=(()=>[dt,s`
|
|
471
|
+
:host {
|
|
472
|
+
--color: var(--purple-60);
|
|
473
|
+
|
|
474
|
+
display: block;
|
|
475
|
+
}
|
|
476
|
+
blockquote {
|
|
477
|
+
border-inline-start: var(--thick) solid var(--color);
|
|
478
|
+
color: var(--color);
|
|
479
|
+
font-size: var(--font-size-h3);
|
|
480
|
+
font-weight: 600;
|
|
481
|
+
line-height: var(--line-height-h3);
|
|
482
|
+
margin: 0;
|
|
483
|
+
padding: var(--spacing-layout-half) var(--spacing-layout-1);
|
|
484
|
+
}
|
|
485
|
+
p {
|
|
486
|
+
margin: 0;
|
|
487
|
+
}
|
|
488
|
+
p + p {
|
|
489
|
+
margin-block-start: var(--spacing-layout-half);
|
|
490
|
+
}
|
|
491
|
+
`])();render(){return V`
|
|
492
|
+
<blockquote>
|
|
493
|
+
<slot />
|
|
494
|
+
</blockquote>
|
|
495
|
+
`}}customElements.get("cfa-pullquote")||customElements.define("cfa-pullquote",wt);class yt extends ct{static properties={text:{},attribution:{}};static styles=(()=>[dt,s`
|
|
496
|
+
:host {
|
|
497
|
+
--attribution-color: var(--purple-60);
|
|
498
|
+
container-type: inline-size;
|
|
499
|
+
display: block;
|
|
500
|
+
width: 100%;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
figure {
|
|
504
|
+
margin: 0 auto;
|
|
505
|
+
position: relative;
|
|
506
|
+
width: 100%;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
@container (min-width: 25rem) {
|
|
510
|
+
figure {
|
|
511
|
+
display: grid;
|
|
512
|
+
grid-template-columns: 3rem 1fr;
|
|
513
|
+
column-gap: var(--spacing-layout-1);
|
|
514
|
+
grid-template-areas:
|
|
515
|
+
"icon content";
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
svg {
|
|
519
|
+
grid-area: icon;
|
|
520
|
+
margin-block-end: 0;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
.content {
|
|
524
|
+
grid-area: content;
|
|
525
|
+
}
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
blockquote {
|
|
529
|
+
font-family: var(--font-family-serif);
|
|
530
|
+
font-size: var(--font-size-h3);
|
|
531
|
+
line-height: var(--line-height-h3);
|
|
532
|
+
padding: 0;
|
|
533
|
+
margin: 0;
|
|
534
|
+
position: relative;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
::slotted(*) {
|
|
538
|
+
display: inline;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
figcaption {
|
|
542
|
+
color: var(--attribution-color);
|
|
543
|
+
font-size: var(--font-size-small);
|
|
544
|
+
line-height: var(--line-height-small);
|
|
545
|
+
font-weight: 600;
|
|
546
|
+
margin-block-start: var(--spacing-layout-half);
|
|
547
|
+
margin-inline: 0;
|
|
548
|
+
position: relative;
|
|
549
|
+
padding-inline-start: calc(var(--spacing-component-4) + var(--spacing-component-2));
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
figcaption::before {
|
|
553
|
+
background-color: currentColor;
|
|
554
|
+
content: "";
|
|
555
|
+
display: block;
|
|
556
|
+
position: absolute;
|
|
557
|
+
left: 0;
|
|
558
|
+
top: calc(var(--line-height-small) / 2 - var(--hairline) / 2);
|
|
559
|
+
height: var(--hairline);
|
|
560
|
+
width: var(--spacing-component-4);
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
svg {
|
|
564
|
+
display: block;
|
|
565
|
+
fill: var(--purple-60);
|
|
566
|
+
height: calc(1.5 * var(--spacing-layout-1));
|
|
567
|
+
margin-block-end: var(--spacing-layout-half);
|
|
568
|
+
opacity: 0.5;
|
|
569
|
+
width: auto;
|
|
570
|
+
}
|
|
571
|
+
`])();render(){return V`
|
|
572
|
+
<figure>
|
|
573
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 339.42 264.4" aria-hidden="true" shape-rendering="geometricPrecision">
|
|
574
|
+
<path d="M91.69,126.5c-9.19,0-15.39,1-18.59,3,4.01-16,12.59-32.41,25.8-49.21h0c12.8-15.99,26.61-27.79,41.4-35.39h1.2l.61-1.21c3.19-1.2,4.79-4.2,4.79-9,0-3.2-1.39-6-4.21-8.4L104.9,2.29c-1.61-1.2-3.79-1.79-6.6-1.79l-4.2,1.2c-28.8,20.8-51.4,45.6-67.8,74.4C9.09,106.1.5,137.7.5,170.9c0,28.39,8.21,51.2,24.61,68.39,14.79,16.4,33.4,24.61,55.79,24.61,19.61,0,36.6-7.01,51-21,14-14.4,21-31.4,21-51s-6-34.8-18-46.8c-11.6-12.39-26-18.6-43.21-18.6Z"/>
|
|
575
|
+
<path d="M276.52,126.5c-8.39,0-14.39,1-18,3,4.01-16,12.79-32.4,26.4-49.21,13.21-16,27-27.79,41.4-35.39l.6-1.21c4-1.2,6-4.2,6-9,0-2.8-1.39-5.61-4.21-8.4l-37.8-24c-2-1.2-4.21-1.79-6.6-1.79l-4.2,1.2h-.6c-29.21,20.8-52,45.61-68.39,74.4-17.21,30-25.8,61.6-25.8,94.8,0,28.39,8.21,51.2,24.6,68.39,15.6,16.4,34.61,24.61,57,24.61,19.61,0,36.6-7.01,51-21,14-14.4,21-31.4,21-51s-6-34.8-18-46.8c-11.6-12.39-26.4-18.6-44.4-18.6Z"/>
|
|
576
|
+
</svg>
|
|
577
|
+
<div class="content">
|
|
578
|
+
<blockquote>
|
|
579
|
+
<slot name="text" /><slot />
|
|
580
|
+
</blockquote>
|
|
581
|
+
<figcaption>
|
|
582
|
+
<slot name="attribution" />
|
|
583
|
+
</figcaption>
|
|
584
|
+
</div>
|
|
585
|
+
</figure>
|
|
586
|
+
`}}customElements.get("cfa-quote")||customElements.define("cfa-quote",yt);class xt extends ct{static properties={icon:""};static styles=(()=>[dt,s`
|
|
587
|
+
.social-icon {
|
|
588
|
+
-moz-osx-font-smoothing: grayscale;
|
|
589
|
+
-webkit-font-smoothing: antialiased;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
svg {
|
|
593
|
+
fill: currentColor;
|
|
594
|
+
height: 1em;
|
|
595
|
+
vertical-align: -0.125em;
|
|
596
|
+
width: 1em;
|
|
597
|
+
}
|
|
598
|
+
`])();constructor(){super()}iconTemplate(t){switch(t){case"bluesky":return V`
|
|
599
|
+
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 568 501">
|
|
600
|
+
<path class="st0" d="M123.1,33.7c65.1,48.9,135.2,148,160.9,201.2,25.7-53.2,95.8-152.3,160.9-201.2,47-35.3,123.1-62.6,123.1,24.3s-9.9,145.7-15.8,166.6c-20.3,72.5-94.2,90.9-159.9,79.7,114.9,19.6,144.1,84.3,81,149.1-119.9,123-172.3-30.9-185.7-70.3-2.5-7.2-3.6-10.6-3.6-7.7,0-2.9-1.2.5-3.6,7.7-13.4,39.4-65.8,193.3-185.7,70.3-63.1-64.8-33.9-129.5,81-149.1-65.7,11.2-139.6-7.3-159.9-79.7C9.9,203.7,0,75.3,0,57.9,0-28.9,76.1-1.6,123.1,33.7Z"/>
|
|
601
|
+
</svg>
|
|
602
|
+
`;case"dropbox":return V`
|
|
603
|
+
<svg
|
|
604
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
605
|
+
height="16"
|
|
606
|
+
width="16.5"
|
|
607
|
+
viewBox="0 0 528 512"
|
|
608
|
+
>
|
|
609
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
610
|
+
<path
|
|
611
|
+
d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
|
|
612
|
+
/>
|
|
613
|
+
</svg>
|
|
614
|
+
`;case"facebook":return V`
|
|
615
|
+
<svg
|
|
616
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
617
|
+
height="16"
|
|
618
|
+
width="16"
|
|
619
|
+
viewBox="0 0 512 512"
|
|
620
|
+
>
|
|
621
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
622
|
+
<path
|
|
623
|
+
d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
|
|
624
|
+
/>
|
|
625
|
+
</svg>
|
|
626
|
+
`;case"github":return V`
|
|
627
|
+
<svg
|
|
628
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
629
|
+
height="16"
|
|
630
|
+
width="15.5"
|
|
631
|
+
viewBox="0 0 496 512"
|
|
632
|
+
>
|
|
633
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
634
|
+
<path
|
|
635
|
+
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
|
|
636
|
+
/>
|
|
637
|
+
</svg>
|
|
638
|
+
`;case"google-drive":return V`
|
|
639
|
+
<svg
|
|
640
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
641
|
+
height="16"
|
|
642
|
+
width="16"
|
|
643
|
+
viewBox="0 0 512 512"
|
|
644
|
+
>
|
|
645
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
646
|
+
<path
|
|
647
|
+
d="M339 314.9L175.4 32h161.2l163.6 282.9H339zm-137.5 23.6L120.9 480h310.5L512 338.5H201.5zM154.1 67.4L0 338.5 80.6 480 237 208.8 154.1 67.4z"
|
|
648
|
+
/>
|
|
649
|
+
</svg>
|
|
650
|
+
`;case"google":return V`
|
|
651
|
+
<svg
|
|
652
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
653
|
+
height="16"
|
|
654
|
+
width="15.25"
|
|
655
|
+
viewBox="0 0 488 512"
|
|
656
|
+
>
|
|
657
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
658
|
+
<path
|
|
659
|
+
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
|
|
660
|
+
/>
|
|
661
|
+
</svg>
|
|
662
|
+
`;case"instagram":return V`
|
|
663
|
+
<svg
|
|
664
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
665
|
+
height="16"
|
|
666
|
+
width="14"
|
|
667
|
+
viewBox="0 0 448 512"
|
|
668
|
+
>
|
|
669
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
670
|
+
<path
|
|
671
|
+
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
|
|
672
|
+
/>
|
|
673
|
+
</svg>
|
|
674
|
+
`;case"linkedin":return V`
|
|
675
|
+
<svg
|
|
676
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
677
|
+
height="16"
|
|
678
|
+
width="14"
|
|
679
|
+
viewBox="0 0 448 512"
|
|
680
|
+
>
|
|
681
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
682
|
+
<path
|
|
683
|
+
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
|
|
684
|
+
/>
|
|
685
|
+
</svg>
|
|
686
|
+
`;case"reddit":return V`
|
|
687
|
+
<svg
|
|
688
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
689
|
+
height="16"
|
|
690
|
+
width="16"
|
|
691
|
+
viewBox="0 0 512 512"
|
|
692
|
+
>
|
|
693
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
694
|
+
<path
|
|
695
|
+
d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z"
|
|
696
|
+
/>
|
|
697
|
+
</svg>
|
|
698
|
+
`;case"soundcloud":return V`
|
|
699
|
+
<svg
|
|
700
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
701
|
+
height="16"
|
|
702
|
+
width="20"
|
|
703
|
+
viewBox="0 0 640 512"
|
|
704
|
+
>
|
|
705
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
706
|
+
<path
|
|
707
|
+
d="M111.4 256.3l5.8 65-5.8 68.3c-.3 2.5-2.2 4.4-4.4 4.4s-4.2-1.9-4.2-4.4l-5.6-68.3 5.6-65c0-2.2 1.9-4.2 4.2-4.2 2.2 0 4.1 2 4.4 4.2zm21.4-45.6c-2.8 0-4.7 2.2-5 5l-5 105.6 5 68.3c.3 2.8 2.2 5 5 5 2.5 0 4.7-2.2 4.7-5l5.8-68.3-5.8-105.6c0-2.8-2.2-5-4.7-5zm25.5-24.1c-3.1 0-5.3 2.2-5.6 5.3l-4.4 130 4.4 67.8c.3 3.1 2.5 5.3 5.6 5.3 2.8 0 5.3-2.2 5.3-5.3l5.3-67.8-5.3-130c0-3.1-2.5-5.3-5.3-5.3zM7.2 283.2c-1.4 0-2.2 1.1-2.5 2.5L0 321.3l4.7 35c.3 1.4 1.1 2.5 2.5 2.5s2.2-1.1 2.5-2.5l5.6-35-5.6-35.6c-.3-1.4-1.1-2.5-2.5-2.5zm23.6-21.9c-1.4 0-2.5 1.1-2.5 2.5l-6.4 57.5 6.4 56.1c0 1.7 1.1 2.8 2.5 2.8s2.5-1.1 2.8-2.5l7.2-56.4-7.2-57.5c-.3-1.4-1.4-2.5-2.8-2.5zm25.3-11.4c-1.7 0-3.1 1.4-3.3 3.3L47 321.3l5.8 65.8c.3 1.7 1.7 3.1 3.3 3.1 1.7 0 3.1-1.4 3.1-3.1l6.9-65.8-6.9-68.1c0-1.9-1.4-3.3-3.1-3.3zm25.3-2.2c-1.9 0-3.6 1.4-3.6 3.6l-5.8 70 5.8 67.8c0 2.2 1.7 3.6 3.6 3.6s3.6-1.4 3.9-3.6l6.4-67.8-6.4-70c-.3-2.2-2-3.6-3.9-3.6zm241.4-110.9c-1.1-.8-2.8-1.4-4.2-1.4-2.2 0-4.2 .8-5.6 1.9-1.9 1.7-3.1 4.2-3.3 6.7v.8l-3.3 176.7 1.7 32.5 1.7 31.7c.3 4.7 4.2 8.6 8.9 8.6s8.6-3.9 8.6-8.6l3.9-64.2-3.9-177.5c-.4-3-2-5.8-4.5-7.2zm-26.7 15.3c-1.4-.8-2.8-1.4-4.4-1.4s-3.1 .6-4.4 1.4c-2.2 1.4-3.6 3.9-3.6 6.7l-.3 1.7-2.8 160.8s0 .3 3.1 65.6v.3c0 1.7 .6 3.3 1.7 4.7 1.7 1.9 3.9 3.1 6.4 3.1 2.2 0 4.2-1.1 5.6-2.5 1.7-1.4 2.5-3.3 2.5-5.6l.3-6.7 3.1-58.6-3.3-162.8c-.3-2.8-1.7-5.3-3.9-6.7zm-111.4 22.5c-3.1 0-5.8 2.8-5.8 6.1l-4.4 140.6 4.4 67.2c.3 3.3 2.8 5.8 5.8 5.8 3.3 0 5.8-2.5 6.1-5.8l5-67.2-5-140.6c-.2-3.3-2.7-6.1-6.1-6.1zm376.7 62.8c-10.8 0-21.1 2.2-30.6 6.1-6.4-70.8-65.8-126.4-138.3-126.4-17.8 0-35 3.3-50.3 9.4-6.1 2.2-7.8 4.4-7.8 9.2v249.7c0 5 3.9 8.6 8.6 9.2h218.3c43.3 0 78.6-35 78.6-78.3 .1-43.6-35.2-78.9-78.5-78.9zm-296.7-60.3c-4.2 0-7.5 3.3-7.8 7.8l-3.3 136.7 3.3 65.6c.3 4.2 3.6 7.5 7.8 7.5 4.2 0 7.5-3.3 7.5-7.5l3.9-65.6-3.9-136.7c-.3-4.5-3.3-7.8-7.5-7.8zm-53.6-7.8c-3.3 0-6.4 3.1-6.4 6.7l-3.9 145.3 3.9 66.9c.3 3.6 3.1 6.4 6.4 6.4 3.6 0 6.4-2.8 6.7-6.4l4.4-66.9-4.4-145.3c-.3-3.6-3.1-6.7-6.7-6.7zm26.7 3.4c-3.9 0-6.9 3.1-6.9 6.9L227 321.3l3.9 66.4c.3 3.9 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9l4.2-66.4-4.2-141.7c0-3.9-3-6.9-6.9-6.9z"
|
|
708
|
+
/>
|
|
709
|
+
</svg>
|
|
710
|
+
`;case"threads":return V`
|
|
711
|
+
<svg
|
|
712
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
713
|
+
height="16"
|
|
714
|
+
width="14"
|
|
715
|
+
viewBox="0 0 448 512"
|
|
716
|
+
>
|
|
717
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
718
|
+
<path
|
|
719
|
+
d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z"
|
|
720
|
+
/>
|
|
721
|
+
</svg>
|
|
722
|
+
`;case"twitter":return V`
|
|
723
|
+
<svg
|
|
724
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
725
|
+
height="16"
|
|
726
|
+
width="16"
|
|
727
|
+
viewBox="0 0 512 512"
|
|
728
|
+
>
|
|
729
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
730
|
+
<path
|
|
731
|
+
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
|
|
732
|
+
/>
|
|
733
|
+
</svg>
|
|
734
|
+
`;case"wikipedia":return V`
|
|
735
|
+
<svg
|
|
736
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
737
|
+
height="16"
|
|
738
|
+
width="20"
|
|
739
|
+
viewBox="0 0 640 512"
|
|
740
|
+
>
|
|
741
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
742
|
+
<path
|
|
743
|
+
d="M640 51.2l-.3 12.2c-28.1 .8-45 15.8-55.8 40.3-25 57.8-103.3 240-155.3 358.6H415l-81.9-193.1c-32.5 63.6-68.3 130-99.2 193.1-.3 .3-15 0-15-.3C172 352.3 122.8 243.4 75.8 133.4 64.4 106.7 26.4 63.4 .2 63.7c0-3.1-.3-10-.3-14.2h161.9v13.9c-19.2 1.1-52.8 13.3-43.3 34.2 21.9 49.7 103.6 240.3 125.6 288.6 15-29.7 57.8-109.2 75.3-142.8-13.9-28.3-58.6-133.9-72.8-160-9.7-17.8-36.1-19.4-55.8-19.7V49.8l142.5 .3v13.1c-19.4 .6-38.1 7.8-29.4 26.1 18.9 40 30.6 68.1 48.1 104.7 5.6-10.8 34.7-69.4 48.1-100.8 8.9-20.6-3.9-28.6-38.6-29.4 .3-3.6 0-10.3 .3-13.6 44.4-.3 111.1-.3 123.1-.6v13.6c-22.5 .8-45.8 12.8-58.1 31.7l-59.2 122.8c6.4 16.1 63.3 142.8 69.2 156.7L559.2 91.8c-8.6-23.1-36.4-28.1-47.2-28.3V49.6l127.8 1.1 .2 .5z"
|
|
744
|
+
/>
|
|
745
|
+
</svg>
|
|
746
|
+
`;case"youtube":return V`
|
|
747
|
+
<svg
|
|
748
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
749
|
+
height="16"
|
|
750
|
+
width="18"
|
|
751
|
+
viewBox="0 0 576 512"
|
|
752
|
+
>
|
|
753
|
+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
754
|
+
<path
|
|
755
|
+
d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"
|
|
756
|
+
/>
|
|
757
|
+
</svg>
|
|
758
|
+
`;default:return""}}render(){return V`
|
|
759
|
+
<span class="social-icon ${this.icon}" aria-hidden="true">
|
|
760
|
+
${this.iconTemplate(this.icon)}
|
|
761
|
+
</span>
|
|
762
|
+
`}}customElements.get("cfa-social-icon")||customElements.define("cfa-social-icon",xt);class $t extends ct{static properties={beforeLabel:{},figure:{},afterLabel:{},animated:{}};static styles=(()=>[dt,mt,s`
|
|
763
|
+
:host {
|
|
764
|
+
--text-color: var(--text-dark);
|
|
765
|
+
--highlight-color: var(--purple-20);
|
|
766
|
+
--highlight-thickness: var(--spacing-layout-half);
|
|
767
|
+
|
|
768
|
+
align-self: center;
|
|
769
|
+
display: block;
|
|
770
|
+
margin-inline: auto;
|
|
771
|
+
}
|
|
772
|
+
.stat {
|
|
773
|
+
align-items: center;
|
|
774
|
+
color: var(--text-color);
|
|
775
|
+
display: flex;
|
|
776
|
+
flex-direction: column;
|
|
777
|
+
text-align: center;
|
|
778
|
+
}
|
|
779
|
+
.figure {
|
|
780
|
+
min-width: var(--spacing-layout-3);
|
|
781
|
+
padding-inline: var(--spacing-component-2);
|
|
782
|
+
}
|
|
783
|
+
.figure > span {
|
|
784
|
+
background-image: linear-gradient(
|
|
785
|
+
var(--highlight-color),
|
|
786
|
+
var(--highlight-color)
|
|
787
|
+
);
|
|
788
|
+
background-size: 100% var(--highlight-thickness);
|
|
789
|
+
background-position: bottom 0.15em left;
|
|
790
|
+
background-repeat: no-repeat;
|
|
791
|
+
padding-inline: 0.25em;
|
|
792
|
+
}
|
|
793
|
+
/* Animation */
|
|
794
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
795
|
+
.stat.is-animated .figure > span {
|
|
796
|
+
background-size: 0% var(--highlight-thickness);
|
|
797
|
+
transition: background-size 1s ease;
|
|
798
|
+
}
|
|
799
|
+
.stat.is-animated.is-visible .figure > span {
|
|
800
|
+
background-size: 100% var(--highlight-thickness);
|
|
801
|
+
}
|
|
802
|
+
}
|
|
803
|
+
`])();constructor(){super(),this.animated=!0}firstUpdated(){const t=this.shadowRoot.querySelector(".stat");new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting&&t.target.classList.add("is-visible")})},{rootMargin:"0px 0px -20% 0px"}).observe(t)}render(){return V`
|
|
804
|
+
<div class="stat ${this.animated?"is-animated":""}">
|
|
805
|
+
<div class="above-label strong">${this.beforeLabel}</div>
|
|
806
|
+
<div class="figure display-2">
|
|
807
|
+
<span>${this.figure}</span>
|
|
808
|
+
</div>
|
|
809
|
+
<div class="below-label strong">${this.afterLabel}</div>
|
|
810
|
+
</div>
|
|
811
|
+
`}}customElements.get("cfa-stat")||customElements.define("cfa-stat",$t);class kt extends ct{static properties=(()=>({open:{type:Boolean}}))();static styles=(()=>[dt,s`
|
|
812
|
+
:host {
|
|
813
|
+
--color: var(--purple-60);
|
|
814
|
+
--hover-bg-color: var(--blue-20);
|
|
815
|
+
|
|
816
|
+
display: block;
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
.item {
|
|
820
|
+
border-bottom: var(--thin) solid var(--black-20);
|
|
821
|
+
max-width: var(--column-span-8);
|
|
822
|
+
margin-inline: auto;
|
|
823
|
+
background-color: var(--bg-color);
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
.header {
|
|
827
|
+
align-items: center;
|
|
828
|
+
color: var(--color);
|
|
829
|
+
cursor: pointer;
|
|
830
|
+
display: flex;
|
|
831
|
+
flex-direction: row;
|
|
832
|
+
padding-block: var(--spacing-component-3);
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
.header:hover {
|
|
836
|
+
background-color: var(--hover-bg-color);
|
|
837
|
+
box-shadow:
|
|
838
|
+
var(--spacing-component-3) 0 var(--blue-20),
|
|
839
|
+
calc(-1 * var(--spacing-component-3)) 0 var(--blue-20);
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
.header:focus {
|
|
843
|
+
outline: none;
|
|
844
|
+
}
|
|
845
|
+
|
|
846
|
+
.title {
|
|
847
|
+
flex: 1;
|
|
848
|
+
}
|
|
849
|
+
|
|
850
|
+
.title ::slotted(*) {
|
|
851
|
+
font-family: var(--font-family-sans-serif) !important;
|
|
852
|
+
font-size: var(--base-font-size) !important;
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
.icon {
|
|
856
|
+
flex: 0;
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
.body {
|
|
860
|
+
opacity: 0;
|
|
861
|
+
max-height: 0;
|
|
862
|
+
overflow: hidden;
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
.body.open {
|
|
866
|
+
max-height: unset;
|
|
867
|
+
opacity: 1;
|
|
868
|
+
padding-block: var(--spacing-layout-half) var(--spacing-layout-1);
|
|
869
|
+
}
|
|
870
|
+
|
|
871
|
+
.body ::slotted(*) {
|
|
872
|
+
margin-block-start: 0 !important;
|
|
873
|
+
}
|
|
874
|
+
`])();constructor(){super(),this.open=!1}toggle(){this.open=!this.open}handleKeyPress(t){"Enter"!==t.key&&" "!==t.key||this.toggle()}render(){return V`
|
|
875
|
+
<div class="item">
|
|
876
|
+
<div
|
|
877
|
+
class="header"
|
|
878
|
+
role="button"
|
|
879
|
+
aria-expanded=${this.open?"true":"false"}
|
|
880
|
+
tabindex="0"
|
|
881
|
+
@click=${this.toggle}
|
|
882
|
+
@keypress=${this.handleKeyPress}
|
|
883
|
+
>
|
|
884
|
+
<div class="title">
|
|
885
|
+
<slot name="title"></slot>
|
|
886
|
+
</div>
|
|
887
|
+
<span class="icon" aria-hidden="true">
|
|
888
|
+
${this.open?V`<cfa-icon>expand_less</cfa-icon>`:V`<cfa-icon>expand_more</cfa-icon>`}
|
|
889
|
+
</span>
|
|
890
|
+
</div>
|
|
891
|
+
<div
|
|
892
|
+
class="body ${this.open?"open":""}"
|
|
893
|
+
role="region"
|
|
894
|
+
aria-hidden=${this.open?"false":"true"}
|
|
895
|
+
>
|
|
896
|
+
<slot></slot>
|
|
897
|
+
</div>
|
|
898
|
+
</div>
|
|
899
|
+
`}}class _t extends ct{static styles=(()=>s`
|
|
900
|
+
:host {
|
|
901
|
+
display: block;
|
|
902
|
+
}
|
|
903
|
+
`)();render(){return V`
|
|
904
|
+
<div role="tablist">
|
|
905
|
+
<slot></slot>
|
|
906
|
+
</div>
|
|
907
|
+
`}}customElements.get("cfa-accordion-item")||customElements.define("cfa-accordion-item",kt),customElements.get("cfa-accordion")||customElements.define("cfa-accordion",_t);class zt extends ct{static properties={theme:{}};static styles=(()=>[dt,s`
|
|
908
|
+
:host {
|
|
909
|
+
--bg-color: var(--purple-80);
|
|
910
|
+
--text-color: var(--white);
|
|
911
|
+
--link-color: var(--white);
|
|
912
|
+
--link-hover-color: var(--white);
|
|
913
|
+
--scrollbar-color: var(--white);
|
|
914
|
+
--spacing: var(--spacing-layout-half);
|
|
915
|
+
|
|
916
|
+
display: block;
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
.bar {
|
|
920
|
+
background-color: var(--bg-color);
|
|
921
|
+
color: var(--text-color);
|
|
922
|
+
|
|
923
|
+
a {
|
|
924
|
+
color: var(--link-color);
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
a:hover {
|
|
928
|
+
color: var(--link-hover-color);
|
|
929
|
+
}
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
.content {
|
|
933
|
+
display: flex;
|
|
934
|
+
column-gap: var(--spacing);
|
|
935
|
+
justify-content: center;
|
|
936
|
+
overflow-x: auto;
|
|
937
|
+
overflow-y: hidden;
|
|
938
|
+
padding-bottom: var(--spacing-layout-half);
|
|
939
|
+
padding-top: var(--spacing-layout-half);
|
|
940
|
+
scrollbar-color: var(--scrollbar-color) var(--bg-color);
|
|
941
|
+
scrollbar-width: thin;
|
|
942
|
+
|
|
943
|
+
&::before,
|
|
944
|
+
&::after {
|
|
945
|
+
content: "";
|
|
946
|
+
flex-basis: calc(var(--outer-margin) - var(--spacing));
|
|
947
|
+
flex-shrink: 0;
|
|
948
|
+
}
|
|
949
|
+
}
|
|
950
|
+
|
|
951
|
+
.content.is-overflowing {
|
|
952
|
+
justify-content: start;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
::slotted(*) {
|
|
956
|
+
max-width: none !important;
|
|
957
|
+
white-space: nowrap !important;
|
|
958
|
+
}
|
|
959
|
+
`])();firstUpdated(){const t=this.shadowRoot.querySelector(".content"),e=t=>{t.classList.toggle("is-overflowing",t.scrollWidth>t.clientWidth)};"ResizeObserver"in window&&new ResizeObserver(t=>{e(t[0].target)}).observe(t),"MutationObserver"in window&&new MutationObserver(()=>{e(t)}).observe(t,{childList:!0}),e(t)}render(){return V`
|
|
960
|
+
<div class="bar">
|
|
961
|
+
<div class="content">
|
|
962
|
+
<slot></slot>
|
|
963
|
+
</div>
|
|
964
|
+
</div>
|
|
965
|
+
`}}customElements.get("cfa-bar")||customElements.define("cfa-bar",zt);class At extends ct{static properties={theme:{}};static styles=(()=>[dt,s`
|
|
966
|
+
:host {
|
|
967
|
+
--bg-color: var(--white);
|
|
968
|
+
--padding: var(--spacing-component-4);
|
|
969
|
+
--shadow: var(--shadow-small);
|
|
970
|
+
--text-color: var(--black);
|
|
971
|
+
|
|
972
|
+
display: flex;
|
|
973
|
+
flex: 1;
|
|
974
|
+
}
|
|
975
|
+
|
|
976
|
+
.box {
|
|
977
|
+
background-color: var(--bg-color);
|
|
978
|
+
box-shadow: var(--shadow);
|
|
979
|
+
color: var(--text-color, #000);
|
|
980
|
+
display: flex;
|
|
981
|
+
flex-direction: column;
|
|
982
|
+
gap: var(--spacing-layout-half);
|
|
983
|
+
padding: var(--padding);
|
|
984
|
+
width: 100%;
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
.box--rounded {
|
|
988
|
+
border-radius: var(--spacing-layout-half, 0.5rem);
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
::slotted(*) {
|
|
992
|
+
--spacing: var(--spacing-layout-half);
|
|
993
|
+
|
|
994
|
+
max-width: 100%;
|
|
995
|
+
}
|
|
996
|
+
`])();render(){return V`
|
|
997
|
+
<div class="box ${this.theme?"box--"+this.theme:""}">
|
|
998
|
+
<slot />
|
|
999
|
+
</div>
|
|
1000
|
+
`}}customElements.get("cfa-box")||customElements.define("cfa-box",At);class Et extends ct{static properties={};static styles=(()=>[dt,s`
|
|
1001
|
+
slot {
|
|
1002
|
+
display: none;
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
:host {
|
|
1006
|
+
display: block;
|
|
1007
|
+
}
|
|
1008
|
+
|
|
1009
|
+
.breadcrumbs {
|
|
1010
|
+
margin: 0;
|
|
1011
|
+
margin-inline: calc(-1 * var(--outer-margin));
|
|
1012
|
+
overflow-x: auto;
|
|
1013
|
+
overflow-y: hidden;
|
|
1014
|
+
padding: 0;
|
|
1015
|
+
scrollbar-width: none;
|
|
1016
|
+
white-space: nowrap;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
.breadcrumbs::before,
|
|
1020
|
+
.breadcrumbs::after {
|
|
1021
|
+
content: "";
|
|
1022
|
+
display: inline-block;
|
|
1023
|
+
width: var(--outer-margin);
|
|
1024
|
+
}
|
|
1025
|
+
|
|
1026
|
+
.breadcrumbs > * {
|
|
1027
|
+
display: inline-block;
|
|
1028
|
+
font-size: var(--font-size-small);
|
|
1029
|
+
font-weight: 600;
|
|
1030
|
+
line-height: var(--line-height-small);
|
|
1031
|
+
margin: 0;
|
|
1032
|
+
padding: 0;
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
.breadcrumbs > *:not(:last-child)::after {
|
|
1036
|
+
content: "/";
|
|
1037
|
+
opacity: 0.5;
|
|
1038
|
+
padding-inline: 0.75em;
|
|
1039
|
+
}
|
|
1040
|
+
|
|
1041
|
+
.breadcrumbs a {
|
|
1042
|
+
color: var(--link-color);
|
|
1043
|
+
text-decoration: none;
|
|
1044
|
+
}
|
|
1045
|
+
`])();handleSlotchange(t){const e=t.target.assignedNodes({flatten:!0});console.log(e);const o=this.shadowRoot.querySelector(".breadcrumbs");o.innerHTML="",e.forEach(t=>{"UL"===t.tagName&&t.querySelectorAll("li").forEach(t=>{o.appendChild(t.cloneNode(!0))})})}render(){return V`
|
|
1046
|
+
<slot @slotchange=${this.handleSlotchange}></slot>
|
|
1047
|
+
<ul class="breadcrumbs"></ul>
|
|
1048
|
+
`}}customElements.get("cfa-breadcrumbs")||customElements.define("cfa-breadcrumbs",Et);class Ct extends ct{static styles=(()=>[dt,s`
|
|
1049
|
+
:host {
|
|
1050
|
+
--background: var(--white);
|
|
1051
|
+
--icon-color: var(--purple-80);
|
|
1052
|
+
--link-color: var(--base-link-color);
|
|
1053
|
+
--link-hover-color: var(--base-link-hover-color);
|
|
1054
|
+
--text-color: var(--black);
|
|
1055
|
+
|
|
1056
|
+
display: block;
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
.callout {
|
|
1060
|
+
align-items: flex-start;
|
|
1061
|
+
background: var(--background);
|
|
1062
|
+
box-shadow: var(--shadow-medium);
|
|
1063
|
+
color: var(--text-color);
|
|
1064
|
+
display: flex;
|
|
1065
|
+
flex-direction: row;
|
|
1066
|
+
gap: var(--spacing-component-2);
|
|
1067
|
+
padding: var(--spacing-component-3);
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
.icon {
|
|
1071
|
+
color: var(--icon-color);
|
|
1072
|
+
flex-direction: column;
|
|
1073
|
+
flex-grow: 0;
|
|
1074
|
+
font-size: var(--font-size-h3);
|
|
1075
|
+
height: 100%;
|
|
1076
|
+
margin-block-start: -0.075em;
|
|
1077
|
+
margin-inline-end: var(--spacing-component-2);
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
.callout + .callout {
|
|
1081
|
+
margin-top: var(--spacing-layout-half);
|
|
1082
|
+
}
|
|
1083
|
+
`])();render(){return V`
|
|
1084
|
+
<div class="callout">
|
|
1085
|
+
<div class="icon">
|
|
1086
|
+
<cfa-icon>info</cfa-icon>
|
|
1087
|
+
</div>
|
|
1088
|
+
<div class="text">
|
|
1089
|
+
<slot></slot>
|
|
1090
|
+
</div>
|
|
1091
|
+
</div>
|
|
1092
|
+
`}}customElements.get("cfa-callout")||customElements.define("cfa-callout",Ct);class St extends ct{static properties={theme:{},linkUrl:{},linkTarget:{},visualType:{},visualUrl:{},visualThumbnailUrl:{},visualAltText:{},eyebrow:{},label:{},title:{},text:{},metaText:{},actionLabel:{}};static styles=(()=>[dt,mt,s`
|
|
1093
|
+
:host {
|
|
1094
|
+
--action-border-color: var(--purple-20);
|
|
1095
|
+
--action-border-hover-color: var(--red-60);
|
|
1096
|
+
--action-text-color: var(--purple-60);
|
|
1097
|
+
--action-text-hover-color: var(--red-60);
|
|
1098
|
+
--bg-color: var(--white);
|
|
1099
|
+
--padding: var(--spacing-component-4);
|
|
1100
|
+
--text-color: var(--black);
|
|
1101
|
+
|
|
1102
|
+
display: flex;
|
|
1103
|
+
flex-direction: column;
|
|
1104
|
+
margin-inline: auto;
|
|
1105
|
+
max-width: 100%;
|
|
1106
|
+
width: 100%;
|
|
1107
|
+
}
|
|
1108
|
+
|
|
1109
|
+
.card,
|
|
1110
|
+
a.card {
|
|
1111
|
+
box-shadow: var(--shadow-small);
|
|
1112
|
+
border: var(--hairline) solid var(--gray-20);
|
|
1113
|
+
color: var(--text-color);
|
|
1114
|
+
display: flex;
|
|
1115
|
+
flex-direction: column;
|
|
1116
|
+
flex: 1;
|
|
1117
|
+
height: 100%;
|
|
1118
|
+
text-decoration: none;
|
|
1119
|
+
transition: 500ms;
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
a.card:hover {
|
|
1123
|
+
--action-color: var(--action-hover-color);
|
|
1124
|
+
|
|
1125
|
+
box-shadow: var(--shadow-medium);
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
.content {
|
|
1129
|
+
background-color: var(--bg-color);
|
|
1130
|
+
display: flex;
|
|
1131
|
+
flex-direction: column;
|
|
1132
|
+
flex-grow: 1;
|
|
1133
|
+
padding: var(--padding);
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
.header {
|
|
1137
|
+
align-items: start;
|
|
1138
|
+
display: flex;
|
|
1139
|
+
flex-direction: column;
|
|
1140
|
+
gap: var(--spacing-layout-half);
|
|
1141
|
+
margin-block-end: var(--spacing-layout-half);
|
|
1142
|
+
}
|
|
1143
|
+
|
|
1144
|
+
.body {
|
|
1145
|
+
display: flex;
|
|
1146
|
+
flex-flow: column nowrap;
|
|
1147
|
+
gap: var(--spacing-layout-half);
|
|
1148
|
+
height: 100%;
|
|
1149
|
+
text-align: var(--text-alignment, start);
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
.eyebrow {
|
|
1153
|
+
color: var(--purple-60);
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
.eyebrow + * {
|
|
1157
|
+
margin-block-start: var(--spacing-component-2);
|
|
1158
|
+
}
|
|
1159
|
+
|
|
1160
|
+
.meta-text {
|
|
1161
|
+
color: var(--gray-60);
|
|
1162
|
+
}
|
|
1163
|
+
|
|
1164
|
+
.action-label {
|
|
1165
|
+
align-self: flex-start;
|
|
1166
|
+
color: var(--action-text-color);
|
|
1167
|
+
display: inline-block;
|
|
1168
|
+
font-size: var(--font-size-small);
|
|
1169
|
+
font-weight: bold;
|
|
1170
|
+
margin-block-start: auto;
|
|
1171
|
+
padding-block-start: var(--spacing-component-3);
|
|
1172
|
+
}
|
|
1173
|
+
|
|
1174
|
+
a:hover .action-label {
|
|
1175
|
+
color: var(--action-text-hover-color);
|
|
1176
|
+
}
|
|
1177
|
+
|
|
1178
|
+
.action-label::after {
|
|
1179
|
+
background: linear-gradient(
|
|
1180
|
+
to top,
|
|
1181
|
+
var(--action-border-hover-color) 0% 50%,
|
|
1182
|
+
var(--action-border-color) 50% 100%
|
|
1183
|
+
);
|
|
1184
|
+
background-position: 0% 0%;
|
|
1185
|
+
background-size: 100% 200%;
|
|
1186
|
+
content: "";
|
|
1187
|
+
display: block;
|
|
1188
|
+
height: var(--spacing-component-2);
|
|
1189
|
+
transition: background-position 0.3s;
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
a:hover .action-label::after {
|
|
1193
|
+
background-position: 0% 100%;
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1196
|
+
.visual {
|
|
1197
|
+
box-sizing: border-box;
|
|
1198
|
+
display: flex;
|
|
1199
|
+
height: auto;
|
|
1200
|
+
height: var(--spacing-layout-7);
|
|
1201
|
+
position: relative;
|
|
1202
|
+
width: 100%;
|
|
1203
|
+
}
|
|
1204
|
+
|
|
1205
|
+
img {
|
|
1206
|
+
height: 100%;
|
|
1207
|
+
object-fit: cover;
|
|
1208
|
+
width: 100%;
|
|
1209
|
+
}
|
|
1210
|
+
|
|
1211
|
+
.fallback-image {
|
|
1212
|
+
background-color: var(--purple-80);
|
|
1213
|
+
position: absolute;
|
|
1214
|
+
inline-start: 0;
|
|
1215
|
+
block-start: 0;
|
|
1216
|
+
width: 100%;
|
|
1217
|
+
height: 100%;
|
|
1218
|
+
z-index: 0;
|
|
1219
|
+
}
|
|
1220
|
+
|
|
1221
|
+
.fallback-image svg {
|
|
1222
|
+
height: 100%;
|
|
1223
|
+
width: 100%;
|
|
1224
|
+
}
|
|
1225
|
+
|
|
1226
|
+
.visual picture {
|
|
1227
|
+
position: relative;
|
|
1228
|
+
z-index: 1;
|
|
1229
|
+
width: 100%;
|
|
1230
|
+
}
|
|
1231
|
+
|
|
1232
|
+
.image::after {
|
|
1233
|
+
block-end: 0;
|
|
1234
|
+
block-start: 0;
|
|
1235
|
+
bottom: 0;
|
|
1236
|
+
box-shadow: inset 0 -50px 50px -50px var(--black-60);
|
|
1237
|
+
content: "";
|
|
1238
|
+
inline-end: 0;
|
|
1239
|
+
inline-start: 0;
|
|
1240
|
+
position: absolute;
|
|
1241
|
+
z-index: 2;
|
|
1242
|
+
}
|
|
1243
|
+
|
|
1244
|
+
.logo {
|
|
1245
|
+
background-color: var(--white, #fff);
|
|
1246
|
+
box-sizing: border-box;
|
|
1247
|
+
border-block-end: 1px solid var(--gray-20);
|
|
1248
|
+
padding: var(--spacing-component-5);
|
|
1249
|
+
}
|
|
1250
|
+
|
|
1251
|
+
.logo img {
|
|
1252
|
+
object-fit: contain;
|
|
1253
|
+
}
|
|
1254
|
+
|
|
1255
|
+
/* --- */
|
|
1256
|
+
|
|
1257
|
+
/* Theme: Compact Card */
|
|
1258
|
+
|
|
1259
|
+
.card--compact {
|
|
1260
|
+
--padding: var(--spacing-component-3);
|
|
1261
|
+
}
|
|
1262
|
+
|
|
1263
|
+
.card--compact .title {
|
|
1264
|
+
font-size: var(--font-size-h4);
|
|
1265
|
+
line-height: var(--line-height-h4);
|
|
1266
|
+
}
|
|
1267
|
+
|
|
1268
|
+
.card--compact .action-label {
|
|
1269
|
+
padding-block-start: 0;
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1272
|
+
/* --- */
|
|
1273
|
+
|
|
1274
|
+
/* Theme: Horizontal Card */
|
|
1275
|
+
|
|
1276
|
+
@media (min-width: 768px) {
|
|
1277
|
+
.card--horizontal,
|
|
1278
|
+
a.card--horizontal {
|
|
1279
|
+
align-items: stretch;
|
|
1280
|
+
flex-direction: row;
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
.card--horizontal .visual {
|
|
1284
|
+
aspect-ratio: initial;
|
|
1285
|
+
height: auto;
|
|
1286
|
+
flex: 0 0 50%;
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1289
|
+
.card--horizontal .logo {
|
|
1290
|
+
border-block-end: 0;
|
|
1291
|
+
border-inline-end: 1px solid var(--gray-20);
|
|
1292
|
+
}
|
|
1293
|
+
}
|
|
1294
|
+
|
|
1295
|
+
/* --- */
|
|
1296
|
+
|
|
1297
|
+
/* Theme: Horizontal Compact Card */
|
|
1298
|
+
|
|
1299
|
+
@media (min-width: 768px) {
|
|
1300
|
+
.card--horizontal-compact,
|
|
1301
|
+
a.card--horizontal-compact {
|
|
1302
|
+
align-items: stretch;
|
|
1303
|
+
flex-direction: row;
|
|
1304
|
+
}
|
|
1305
|
+
|
|
1306
|
+
.card--horizontal-compact .visual {
|
|
1307
|
+
aspect-ratio: initial;
|
|
1308
|
+
flex: 0 0 34%;
|
|
1309
|
+
height: auto;
|
|
1310
|
+
position: relative;
|
|
1311
|
+
}
|
|
1312
|
+
|
|
1313
|
+
.card--horizontal-compact .image picture {
|
|
1314
|
+
position: absolute;
|
|
1315
|
+
height: 100%;
|
|
1316
|
+
width: 100%;
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1319
|
+
.card--horizontal-compact .logo {
|
|
1320
|
+
border-block-end: 0;
|
|
1321
|
+
border-right: 1px solid var(--gray-20);
|
|
1322
|
+
padding: var(--spacing-component-4);
|
|
1323
|
+
}
|
|
1324
|
+
}
|
|
1325
|
+
|
|
1326
|
+
.card--horizontal-compact,
|
|
1327
|
+
a.card--horizontal-compact {
|
|
1328
|
+
--padding: var(--spacing-component-3);
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
.card--horizontal-compact .body {
|
|
1332
|
+
gap: var(--spacing-component-2);
|
|
1333
|
+
}
|
|
1334
|
+
|
|
1335
|
+
.card--horizontal-compact .header {
|
|
1336
|
+
margin-block-end: var(--spacing-component-2);
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
.card--horizontal-compact .title {
|
|
1340
|
+
font-size: var(--font-size-h4);
|
|
1341
|
+
line-height: var(--line-height-h4);
|
|
1342
|
+
}
|
|
1343
|
+
|
|
1344
|
+
.card--horizontal-compact .action-label {
|
|
1345
|
+
padding-block-start: var(--spacing-component-2);
|
|
1346
|
+
}
|
|
1347
|
+
`])();visualTemplate(){let t;return"image"===this.visualType?t=V`
|
|
1348
|
+
<div class="visual image">
|
|
1349
|
+
<div class="fallback-image">
|
|
1350
|
+
${D`
|
|
1351
|
+
<svg
|
|
1352
|
+
width="1600"
|
|
1353
|
+
height="900"
|
|
1354
|
+
viewBox="0 0 1600 900"
|
|
1355
|
+
fill="none"
|
|
1356
|
+
preserveAspectRatio="xMinYMin slice"
|
|
1357
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1358
|
+
>
|
|
1359
|
+
<g clip-path="url(#clip0)">
|
|
1360
|
+
<rect width="1600" height="900" fill="#2B1A78"/>
|
|
1361
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1218.12 -444.87C1375.54 -448.403 1528.96 -379.695 1624.93 -254.874C1718.97 -132.569 1729.75 28.0324 1697.74 178.942C1664.98 333.396 1596.67 491.622 1452.8 556.721C1311.8 620.52 1155.18 556.724 1017.04 486.944C883.26 419.362 752.204 329.485 715.393 184.213C677.697 35.4535 737.759 -117.225 833.568 -237.116C929.253 -356.852 1064.86 -441.431 1218.12 -444.87Z" fill="#5650BE"/>
|
|
1362
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M372.893 247.378C457.708 243.989 548.299 262.758 600.503 329.652C652.21 395.908 640.741 485.984 623.238 568.169C605.287 652.459 579.269 741.096 503.945 783.041C424.143 827.479 324.366 822.072 243.48 779.638C165.755 738.862 118.175 659.045 102.906 572.65C88.5877 491.632 114.457 410.294 167.015 346.974C218.23 285.272 292.743 250.581 372.893 247.378Z" fill="#5650BE"/>
|
|
1363
|
+
</g>
|
|
1364
|
+
<defs>
|
|
1365
|
+
<clipPath id="clip0">
|
|
1366
|
+
<rect width="1600" height="900" fill="white"/>
|
|
1367
|
+
</clipPath>
|
|
1368
|
+
</defs>
|
|
1369
|
+
</svg>
|
|
1370
|
+
`}
|
|
1371
|
+
</div>
|
|
1372
|
+
${this.visualUrl?V`
|
|
1373
|
+
<picture>
|
|
1374
|
+
<source srcset="${this.visualUrl}" />
|
|
1375
|
+
<img
|
|
1376
|
+
src="${this.visualThumbnailUrl}"
|
|
1377
|
+
alt="${this.visualAltText}"
|
|
1378
|
+
loading="lazy"
|
|
1379
|
+
onerror="this.style.display='none'"
|
|
1380
|
+
/>
|
|
1381
|
+
</picture>
|
|
1382
|
+
`:Z}
|
|
1383
|
+
</div>
|
|
1384
|
+
`:"logo"===this.visualType&&(t=V`
|
|
1385
|
+
<div class="visual logo">
|
|
1386
|
+
<picture>
|
|
1387
|
+
<source srcset="${this.visualUrl}" />
|
|
1388
|
+
<img
|
|
1389
|
+
src="${this.visualThumbnailUrl}"
|
|
1390
|
+
alt="${this.visualAltText}"
|
|
1391
|
+
loading="lazy"
|
|
1392
|
+
/>
|
|
1393
|
+
</picture>
|
|
1394
|
+
</div>
|
|
1395
|
+
`),t}cardContentTemplate(){return V`
|
|
1396
|
+
${this.visualTemplate()}
|
|
1397
|
+
<div class="content">
|
|
1398
|
+
<div class="header">
|
|
1399
|
+
<div>
|
|
1400
|
+
${this.eyebrow?V` <div class="eyebrow">${this.eyebrow}</div> `:Z}
|
|
1401
|
+
${this.title?V` <div class="h3 title">${this.title}</div> `:Z}
|
|
1402
|
+
</div>
|
|
1403
|
+
${this.label?V`
|
|
1404
|
+
<div>
|
|
1405
|
+
<cfa-label color="green">${this.label}</cfa-label>
|
|
1406
|
+
</div>
|
|
1407
|
+
`:Z}
|
|
1408
|
+
</div>
|
|
1409
|
+
<div class="body">
|
|
1410
|
+
${this.text?V` <div class="small" .innerHTML="${this.text}"></div> `:Z}
|
|
1411
|
+
${this.metaText?V`
|
|
1412
|
+
<div
|
|
1413
|
+
class="meta-text small"
|
|
1414
|
+
.innerHTML="${this.metaText}"
|
|
1415
|
+
></div>
|
|
1416
|
+
`:Z}
|
|
1417
|
+
${this.actionLabel?V` <div class="action-label">${this.actionLabel}</div> `:Z}
|
|
1418
|
+
</div>
|
|
1419
|
+
</div>
|
|
1420
|
+
`}render(){return V`
|
|
1421
|
+
${this.linkUrl?V`
|
|
1422
|
+
<a
|
|
1423
|
+
href="${this.linkUrl}"
|
|
1424
|
+
target="${this.linkTarget}"
|
|
1425
|
+
rel="${"_blank"==this.linkTarget?"noopener":Z}"
|
|
1426
|
+
class="card ${this.theme?"card--"+this.theme:""}"
|
|
1427
|
+
>
|
|
1428
|
+
${this.cardContentTemplate()}
|
|
1429
|
+
</a>
|
|
1430
|
+
`:V`
|
|
1431
|
+
<div class="card ${this.theme?"card--"+this.theme:""}">
|
|
1432
|
+
${this.cardContentTemplate()}
|
|
1433
|
+
</div>
|
|
1434
|
+
`}
|
|
1435
|
+
`}}customElements.get("cfa-card")||customElements.define("cfa-card",St);class Tt extends ct{static properties={name:{},imageUrl:{},linkUrl:{},linkTarget:{}};static styles=(()=>[dt,mt,s`
|
|
1436
|
+
:host {
|
|
1437
|
+
--bg-color: var(--blue-20);
|
|
1438
|
+
--text-color: var(--black);
|
|
1439
|
+
|
|
1440
|
+
align-items: stretch;
|
|
1441
|
+
display: flex;
|
|
1442
|
+
flex-direction: row;
|
|
1443
|
+
}
|
|
1444
|
+
|
|
1445
|
+
.card {
|
|
1446
|
+
align-items: center;
|
|
1447
|
+
background-color: var(--white);
|
|
1448
|
+
border: var(--hairline) solid var(--black-10);
|
|
1449
|
+
color: var(--text-color);
|
|
1450
|
+
display: flex;
|
|
1451
|
+
flex-direction: column;
|
|
1452
|
+
font-size: var(--font-size-h3);
|
|
1453
|
+
font-weight: bold;
|
|
1454
|
+
justify-content: center;
|
|
1455
|
+
line-height: var(--line-height-h4);
|
|
1456
|
+
margin-inline: auto;
|
|
1457
|
+
max-width: 100%;
|
|
1458
|
+
min-height: var(--spacing-layout-8);
|
|
1459
|
+
padding: var(--spacing-component-5);
|
|
1460
|
+
text-align: center;
|
|
1461
|
+
text-decoration: none;
|
|
1462
|
+
transition: box-shadow 1s;
|
|
1463
|
+
width: var(--column-span-4);
|
|
1464
|
+
}
|
|
1465
|
+
|
|
1466
|
+
a.card {
|
|
1467
|
+
box-shadow: var(--shadow-small);
|
|
1468
|
+
color: var(--text-color);
|
|
1469
|
+
}
|
|
1470
|
+
|
|
1471
|
+
a.card:hover {
|
|
1472
|
+
box-shadow: var(--shadow-medium);
|
|
1473
|
+
}
|
|
1474
|
+
|
|
1475
|
+
img {
|
|
1476
|
+
aspect-ratio: 2 / 1;
|
|
1477
|
+
object-fit: contain;
|
|
1478
|
+
width: 100%;
|
|
1479
|
+
}
|
|
1480
|
+
`])();cardContentTemplate(){let t;return t=this.imageUrl?V` <img src="${this.imageUrl}" alt="${this.name}" /> `:V` ${this.name} `,t}render(){return V`
|
|
1481
|
+
${this.linkUrl?V`
|
|
1482
|
+
<a
|
|
1483
|
+
href="${this.linkUrl}"
|
|
1484
|
+
target="${this.linkTarget||"_self"}"
|
|
1485
|
+
rel="${"_blank"==this.linkTarget?"noopener noreferrer":Z}"
|
|
1486
|
+
class="card"
|
|
1487
|
+
>
|
|
1488
|
+
${this.cardContentTemplate()}
|
|
1489
|
+
</a>
|
|
1490
|
+
`:V` <div class="card">${this.cardContentTemplate()}</div> `}
|
|
1491
|
+
`}}customElements.get("cfa-logo-card")||customElements.define("cfa-logo-card",Tt);class Ut extends ct{static properties={fontSize:{}};static styles=(()=>[dt,s`
|
|
1492
|
+
:host {
|
|
1493
|
+
--link-color: var(--purple-80);
|
|
1494
|
+
--link-hover-color: var(--purple-80);
|
|
1495
|
+
|
|
1496
|
+
display: block;
|
|
1497
|
+
font-family: var(--font-family-sans-serif);
|
|
1498
|
+
}
|
|
1499
|
+
|
|
1500
|
+
slot {
|
|
1501
|
+
display: none;
|
|
1502
|
+
}
|
|
1503
|
+
|
|
1504
|
+
nav {
|
|
1505
|
+
font-size: var(--font-size-base);
|
|
1506
|
+
line-height: var(--line-height-base);
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
nav[data-font-size="small"] {
|
|
1510
|
+
font-size: var(--font-size-small);
|
|
1511
|
+
line-height: var(--line-height-small);
|
|
1512
|
+
}
|
|
1513
|
+
|
|
1514
|
+
nav[data-font-size="large"] {
|
|
1515
|
+
font-size: var(--font-size-h3);
|
|
1516
|
+
line-height: var(--line-height-h3);
|
|
1517
|
+
}
|
|
1518
|
+
|
|
1519
|
+
ul {
|
|
1520
|
+
display: flex;
|
|
1521
|
+
flex-direction: row;
|
|
1522
|
+
gap: var(--spacing-component-1);
|
|
1523
|
+
list-style: none;
|
|
1524
|
+
margin: 0;
|
|
1525
|
+
padding: 0;
|
|
1526
|
+
}
|
|
1527
|
+
|
|
1528
|
+
li {
|
|
1529
|
+
flex-shrink: 0;
|
|
1530
|
+
margin: 0;
|
|
1531
|
+
padding: 0;
|
|
1532
|
+
}
|
|
1533
|
+
|
|
1534
|
+
li.is-active a {
|
|
1535
|
+
box-shadow: inset 0 calc(-1 * var(--medium)) var(--link-hover-color);
|
|
1536
|
+
}
|
|
1537
|
+
|
|
1538
|
+
a {
|
|
1539
|
+
box-shadow: 0;
|
|
1540
|
+
color: var(--link-color);
|
|
1541
|
+
display: block;
|
|
1542
|
+
font-weight: bold;
|
|
1543
|
+
height: 100%;
|
|
1544
|
+
padding: var(--spacing-component-2) var(--spacing-component-3);
|
|
1545
|
+
text-decoration: none;
|
|
1546
|
+
transition: box-shadow 0.25s ease-in-out;
|
|
1547
|
+
}
|
|
1548
|
+
|
|
1549
|
+
a:hover {
|
|
1550
|
+
box-shadow: inset 0 calc(-1 * var(--medium)) var(--link-hover-color);
|
|
1551
|
+
}
|
|
1552
|
+
`])();handleSlotchange(t){const e=t.target.assignedNodes({flatten:!0}),o=this.shadowRoot.querySelector("ul");o.innerHTML="",e.forEach(t=>{"UL"===t.tagName&&t.querySelectorAll("li").forEach(t=>{o.appendChild(t.cloneNode(!0))})})}render(){return V`
|
|
1553
|
+
<slot @slotchange=${this.handleSlotchange}></slot>
|
|
1554
|
+
<nav data-font-size="${this.fontSize}">
|
|
1555
|
+
<ul></ul>
|
|
1556
|
+
</nav>
|
|
1557
|
+
`}}customElements.get("cfa-nav")||customElements.define("cfa-nav",Ut);class Lt extends ct{static properties={fontSize:{}};static styles=(()=>[dt,s`
|
|
1558
|
+
:host {
|
|
1559
|
+
--bg-color: var(--white);
|
|
1560
|
+
--link-color: var(--purple-80);
|
|
1561
|
+
--link-hover-color: var(--purple-80);
|
|
1562
|
+
|
|
1563
|
+
background-color: var(--bg-color);
|
|
1564
|
+
display: block;
|
|
1565
|
+
padding-block: var(--spacing-layout-1);
|
|
1566
|
+
display: block;
|
|
1567
|
+
font-family: var(--font-family-sans-serif);
|
|
1568
|
+
font-size: var(--font-size-small);
|
|
1569
|
+
line-height: var(--font-size-small);
|
|
1570
|
+
}
|
|
1571
|
+
|
|
1572
|
+
slot {
|
|
1573
|
+
display: none;
|
|
1574
|
+
}
|
|
1575
|
+
|
|
1576
|
+
nav {
|
|
1577
|
+
}
|
|
1578
|
+
|
|
1579
|
+
ul {
|
|
1580
|
+
display: flex;
|
|
1581
|
+
flex-direction: column;
|
|
1582
|
+
gap: var(--spacing-layout-half);
|
|
1583
|
+
margin: 0;
|
|
1584
|
+
padding: 0 var(--outer-margin);
|
|
1585
|
+
min-height: var(--spacing-layout-2);
|
|
1586
|
+
}
|
|
1587
|
+
|
|
1588
|
+
li {
|
|
1589
|
+
display: block;
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1592
|
+
a {
|
|
1593
|
+
background-color: var(--purple-10);
|
|
1594
|
+
border-radius: var(--rounded-corners);
|
|
1595
|
+
color: var(--link-color);
|
|
1596
|
+
display: block;
|
|
1597
|
+
position: relative;
|
|
1598
|
+
padding: var(--spacing-layout-half);
|
|
1599
|
+
text-decoration: none;
|
|
1600
|
+
}
|
|
1601
|
+
|
|
1602
|
+
a:hover {
|
|
1603
|
+
background-color: var(--blue-20);
|
|
1604
|
+
color: var(--link-hover-color);
|
|
1605
|
+
}
|
|
1606
|
+
|
|
1607
|
+
a:active {
|
|
1608
|
+
background-color: var(--blue-40);
|
|
1609
|
+
color: var(--link-color);
|
|
1610
|
+
}
|
|
1611
|
+
|
|
1612
|
+
@media (min-width: 768px) {
|
|
1613
|
+
:host {
|
|
1614
|
+
box-shadow: var(--shadow-small);
|
|
1615
|
+
padding-block: var(--spacing-component-2);
|
|
1616
|
+
position: sticky;
|
|
1617
|
+
top: 0;
|
|
1618
|
+
z-index: 3;
|
|
1619
|
+
}
|
|
1620
|
+
|
|
1621
|
+
nav {
|
|
1622
|
+
align-items: center;
|
|
1623
|
+
display: flex;
|
|
1624
|
+
flex-direction: row;
|
|
1625
|
+
margin-inline: auto;
|
|
1626
|
+
max-width: var(--grid-max-width);
|
|
1627
|
+
overflow-x: auto;
|
|
1628
|
+
overflow-y: hidden;
|
|
1629
|
+
scrollbar-width: none;
|
|
1630
|
+
}
|
|
1631
|
+
|
|
1632
|
+
ul {
|
|
1633
|
+
align-items: center;
|
|
1634
|
+
display: flex;
|
|
1635
|
+
flex-direction: row;
|
|
1636
|
+
gap: var(--spacing-component-2);
|
|
1637
|
+
}
|
|
1638
|
+
|
|
1639
|
+
a,
|
|
1640
|
+
li {
|
|
1641
|
+
max-width: none;
|
|
1642
|
+
white-space: nowrap;
|
|
1643
|
+
}
|
|
1644
|
+
|
|
1645
|
+
a.is-active {
|
|
1646
|
+
background-color: var(--blue-40);
|
|
1647
|
+
}
|
|
1648
|
+
}
|
|
1649
|
+
`])();handleSlotchange(t){const e=t.target.assignedNodes({flatten:!0}),o=this.shadowRoot.querySelector("ul"),i=[];e.forEach(t=>{"UL"===t.tagName&&t.querySelectorAll("li").forEach(t=>{o.appendChild(t.cloneNode(!0));const e=t.querySelector("a")?.getAttribute("href");e&&e.startsWith("#")&&i.push(e.substring(1))})}),window.addEventListener("scroll",()=>this.updateActiveNav(i))}updateActiveNav(t){const e=window.scrollY;let o=null;if(t.forEach(t=>{const i=document.getElementById(t);i&&i.offsetTop<=e+256&&(o=t)}),this.shadowRoot.querySelectorAll("li a").forEach(t=>{t.classList.remove("is-active")}),o){const t=this.shadowRoot.querySelector(`li a[href*="#${o}"]`);t&&t.classList.add("is-active")}}render(){return V`
|
|
1650
|
+
<slot @slotchange=${this.handleSlotchange}></slot>
|
|
1651
|
+
<nav>
|
|
1652
|
+
<ul>
|
|
1653
|
+
<li><strong>On this page:  </strong></li>
|
|
1654
|
+
</ul>
|
|
1655
|
+
</nav>
|
|
1656
|
+
`}}customElements.get("cfa-page-nav")||customElements.define("cfa-page-nav",Lt);class Mt extends ct{static properties={previousTitle:{},previousUrl:{},nextTitle:{},nextUrl:{}};static styles=(()=>[dt,mt,vt,s`
|
|
1657
|
+
:host {
|
|
1658
|
+
display: block;
|
|
1659
|
+
}
|
|
1660
|
+
|
|
1661
|
+
* {
|
|
1662
|
+
box-sizing: border-box;
|
|
1663
|
+
text-wrap: comfortable;
|
|
1664
|
+
}
|
|
1665
|
+
|
|
1666
|
+
nav {
|
|
1667
|
+
display: flex;
|
|
1668
|
+
flex-direction: column;
|
|
1669
|
+
column-gap: var(--gutter-width);
|
|
1670
|
+
row-gap: var(--spacing-layout-half);
|
|
1671
|
+
}
|
|
1672
|
+
|
|
1673
|
+
nav > * > * {
|
|
1674
|
+
width: 100%;
|
|
1675
|
+
}
|
|
1676
|
+
|
|
1677
|
+
@media (min-width: 768px) {
|
|
1678
|
+
nav {
|
|
1679
|
+
flex-direction: row-reverse;
|
|
1680
|
+
justify-content: space-between;
|
|
1681
|
+
}
|
|
1682
|
+
|
|
1683
|
+
a {
|
|
1684
|
+
min-width: var(--column-span-4);
|
|
1685
|
+
}
|
|
1686
|
+
|
|
1687
|
+
.next a {
|
|
1688
|
+
text-align: end;
|
|
1689
|
+
}
|
|
1690
|
+
|
|
1691
|
+
.previous a {
|
|
1692
|
+
text-align: start;
|
|
1693
|
+
}
|
|
1694
|
+
}
|
|
1695
|
+
`])();render(){return V`
|
|
1696
|
+
<nav>
|
|
1697
|
+
<div class="next">
|
|
1698
|
+
${this.nextUrl?V`
|
|
1699
|
+
<a href="${this.nextUrl}" class="cfa-button">
|
|
1700
|
+
<span class="small label"
|
|
1701
|
+
>Next <cfa-icon>arrow_forward</cfa-icon></span
|
|
1702
|
+
><br />
|
|
1703
|
+
<span class="title normal">${this.nextTitle}</span>
|
|
1704
|
+
</a>
|
|
1705
|
+
`:""}
|
|
1706
|
+
</div>
|
|
1707
|
+
<div class="previous">
|
|
1708
|
+
${this.previousUrl?V`
|
|
1709
|
+
<a
|
|
1710
|
+
href="${this.previousUrl}"
|
|
1711
|
+
class="cfa-button cfa-button--outline"
|
|
1712
|
+
>
|
|
1713
|
+
<span class="small label"
|
|
1714
|
+
><cfa-icon>arrow_back</cfa-icon> Previous</span
|
|
1715
|
+
><br />
|
|
1716
|
+
<span class="title normal">${this.previousTitle}</span>
|
|
1717
|
+
</a>
|
|
1718
|
+
`:""}
|
|
1719
|
+
</div>
|
|
1720
|
+
</nav>
|
|
1721
|
+
`}}customElements.get("cfa-pager")||customElements.define("cfa-pager",Mt);class Pt extends ct{static properties=(()=>({page:{type:Number},totalPages:{type:Number},previousLabel:{},nextLabel:{}}))();static styles=(()=>[dt,vt,s`
|
|
1722
|
+
:host {
|
|
1723
|
+
display: block;
|
|
1724
|
+
}
|
|
1725
|
+
|
|
1726
|
+
.pagination {
|
|
1727
|
+
align-items: center;
|
|
1728
|
+
display: flex;
|
|
1729
|
+
flex-direction: row;
|
|
1730
|
+
gap: var(--gutter-width);
|
|
1731
|
+
justify-content: space-between;
|
|
1732
|
+
}
|
|
1733
|
+
|
|
1734
|
+
.pagination > * {
|
|
1735
|
+
flex: 1;
|
|
1736
|
+
}
|
|
1737
|
+
|
|
1738
|
+
.status {
|
|
1739
|
+
font-size: var(--font-size-small);
|
|
1740
|
+
line-height: var(-line-height-small);
|
|
1741
|
+
color: var(--gray-60);
|
|
1742
|
+
text-align: center;
|
|
1743
|
+
}
|
|
1744
|
+
|
|
1745
|
+
@media (max-width: 768px) {
|
|
1746
|
+
.status {
|
|
1747
|
+
display: none;
|
|
1748
|
+
}
|
|
1749
|
+
}
|
|
1750
|
+
|
|
1751
|
+
.previous {
|
|
1752
|
+
text-align: left;
|
|
1753
|
+
}
|
|
1754
|
+
|
|
1755
|
+
.next {
|
|
1756
|
+
text-align: right;
|
|
1757
|
+
}
|
|
1758
|
+
`])();constructor(){super(),this.previousLabel="Previous",this.nextLabel="Next",this.page=1,this.totalPages=1}render(){return V`
|
|
1759
|
+
<div class="pagination">
|
|
1760
|
+
<div class="previous">
|
|
1761
|
+
${this.page>1?V`
|
|
1762
|
+
<button class="cfa-button" @click="${this.handlePreviousPage}">
|
|
1763
|
+
<cfa-icon>arrow_back</cfa-icon> ${this.previousLabel}
|
|
1764
|
+
</button>
|
|
1765
|
+
`:""}
|
|
1766
|
+
</div>
|
|
1767
|
+
<div class="status">Page ${this.page} of ${this.totalPages}</div>
|
|
1768
|
+
<div class="next">
|
|
1769
|
+
${this.page<this.totalPages?V`
|
|
1770
|
+
<button class="cfa-button" @click="${this.handleNextPage}">
|
|
1771
|
+
${this.nextLabel} <cfa-icon>arrow_forward</cfa-icon>
|
|
1772
|
+
</button>
|
|
1773
|
+
`:""}
|
|
1774
|
+
</div>
|
|
1775
|
+
</div>
|
|
1776
|
+
`}handleNextPage(){if(this.page<this.totalPages){this.page++;const t=new CustomEvent("page-change",{bubbles:!0,cancelable:!0,detail:this.page});this.dispatchEvent(t)}}handlePreviousPage(){if(this.page>1){this.page--;const t=new CustomEvent("page-change",{bubbles:!0,cancelable:!0,detail:this.page});this.dispatchEvent(t)}}}customElements.get("cfa-pagination")||customElements.define("cfa-pagination",Pt);class Ht extends ct{static properties={name:{type:"string"},title:{type:"string"},company:{type:"string"},pronouns:{type:"string"},imageUrl:{type:"string"},imageAltText:{type:"string"},linkUrl:{type:"string"},linkedInUrl:{type:"string"},twitterHandle:{type:"string"}};static styles=(()=>[dt,mt,s`
|
|
1777
|
+
:host {
|
|
1778
|
+
display: block;
|
|
1779
|
+
}
|
|
1780
|
+
|
|
1781
|
+
.card {
|
|
1782
|
+
border-radius: var(--rounded-corners);
|
|
1783
|
+
position: relative;
|
|
1784
|
+
display: flex;
|
|
1785
|
+
flex-direction: row;
|
|
1786
|
+
margin-inline: auto;
|
|
1787
|
+
max-width: 100%;
|
|
1788
|
+
text-align: start;
|
|
1789
|
+
width: var(--column-span-4);
|
|
1790
|
+
transform: translate(0, 0); // hack to ensure pseudo element is stacked above parent background
|
|
1791
|
+
}
|
|
1792
|
+
|
|
1793
|
+
.card.has-link::before {
|
|
1794
|
+
border-radius: var(--rounded-corners);
|
|
1795
|
+
bottom: calc(-1 * var(--thick));
|
|
1796
|
+
content: "";
|
|
1797
|
+
height: calc(100% + 2 * var(--thick)));
|
|
1798
|
+
left: calc(-1 * var(--thick));
|
|
1799
|
+
position: absolute;
|
|
1800
|
+
right: calc(-1 * var(--thick));
|
|
1801
|
+
top: calc(-1 * var(--thick));
|
|
1802
|
+
width: calc(100% + 2 * var(--thick)));
|
|
1803
|
+
z-index: -1;
|
|
1804
|
+
transition:
|
|
1805
|
+
background-color 0.5s ease-in-out,
|
|
1806
|
+
box-shadow 0.5s ease-in-out;
|
|
1807
|
+
}
|
|
1808
|
+
|
|
1809
|
+
.card.has-link:hover::before,
|
|
1810
|
+
.card.has-link:focus-visible::before {
|
|
1811
|
+
background-color: var(--white);
|
|
1812
|
+
box-shadow: var(--shadow-medium);
|
|
1813
|
+
}
|
|
1814
|
+
|
|
1815
|
+
.card.has-link .name a {
|
|
1816
|
+
box-shadow: 0;
|
|
1817
|
+
color: var(--purple-80);
|
|
1818
|
+
transition: box-shadow 0.5s ease-in-out;
|
|
1819
|
+
}
|
|
1820
|
+
|
|
1821
|
+
.card.has-link:hover .name a {
|
|
1822
|
+
box-shadow: inset 0 calc(-1 * var(--thick)) 0 0 var(--purple-20);
|
|
1823
|
+
}
|
|
1824
|
+
|
|
1825
|
+
a {
|
|
1826
|
+
position: relative;
|
|
1827
|
+
text-decoration: none;
|
|
1828
|
+
z-index: 1;
|
|
1829
|
+
}
|
|
1830
|
+
|
|
1831
|
+
a.link-overlay {
|
|
1832
|
+
position: static;
|
|
1833
|
+
}
|
|
1834
|
+
|
|
1835
|
+
a.link-overlay::before {
|
|
1836
|
+
content: "";
|
|
1837
|
+
position: absolute;
|
|
1838
|
+
z-index: 0;
|
|
1839
|
+
top: 0;
|
|
1840
|
+
right: 0;
|
|
1841
|
+
bottom: 0;
|
|
1842
|
+
left: 0;
|
|
1843
|
+
}
|
|
1844
|
+
|
|
1845
|
+
.avatar {
|
|
1846
|
+
flex-grow: 0;
|
|
1847
|
+
}
|
|
1848
|
+
|
|
1849
|
+
.name {
|
|
1850
|
+
display: inline-block;
|
|
1851
|
+
}
|
|
1852
|
+
|
|
1853
|
+
.pronouns {
|
|
1854
|
+
color: var(--purple-60);
|
|
1855
|
+
}
|
|
1856
|
+
|
|
1857
|
+
.details {
|
|
1858
|
+
color: var(--black);
|
|
1859
|
+
flex-grow: 1;
|
|
1860
|
+
padding-block-start: var(--spacing-component-2);
|
|
1861
|
+
padding-inline-start: var(--spacing-component-2);
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
.social {
|
|
1865
|
+
font-size: 0.9rem;
|
|
1866
|
+
margin-block-start: var(--spacing-component-1);
|
|
1867
|
+
}
|
|
1868
|
+
|
|
1869
|
+
.social a {
|
|
1870
|
+
align-items: center;
|
|
1871
|
+
border-radius: 10000px;
|
|
1872
|
+
color: var(--purple-80);
|
|
1873
|
+
display: inline-flex;
|
|
1874
|
+
height: var(--spacing-component-4);
|
|
1875
|
+
justify-content: center;
|
|
1876
|
+
margin: calc(-1 * var(--spacing-component-2));
|
|
1877
|
+
width: var(--spacing-component-4);
|
|
1878
|
+
}
|
|
1879
|
+
|
|
1880
|
+
.social a:hover {
|
|
1881
|
+
background-color: var(--purple-20);
|
|
1882
|
+
}
|
|
1883
|
+
|
|
1884
|
+
.social > a + a {
|
|
1885
|
+
margin-inline-start: var(--spacing-component-2);
|
|
1886
|
+
}
|
|
1887
|
+
`])();render(){return V`
|
|
1888
|
+
<div class="card ${this.linkUrl?"has-link":""}">
|
|
1889
|
+
<!-- Link overlay pseudo-element so we can do nested links within the card -->
|
|
1890
|
+
${this.linkUrl?V`
|
|
1891
|
+
<a
|
|
1892
|
+
href="${this.linkUrl}"
|
|
1893
|
+
target="${this.linkTarget||"_self"}"
|
|
1894
|
+
rel="${"_blank"==this.linkTarget?"noopener":Z}"
|
|
1895
|
+
class="link-overlay"
|
|
1896
|
+
tabindex="-1"
|
|
1897
|
+
>
|
|
1898
|
+
</a>
|
|
1899
|
+
`:""}
|
|
1900
|
+
<div class="avatar">
|
|
1901
|
+
${this.linkUrl?V`
|
|
1902
|
+
<a
|
|
1903
|
+
href="${this.linkUrl}"
|
|
1904
|
+
target="${this.linkTarget||"_self"}"
|
|
1905
|
+
rel="${"_blank"==this.linkTarget?"noopener":Z}"
|
|
1906
|
+
>
|
|
1907
|
+
<cfa-avatar
|
|
1908
|
+
imageUrl="${this.imageUrl}"
|
|
1909
|
+
altText="Avatar photo of ${this.name}"
|
|
1910
|
+
size="3"
|
|
1911
|
+
>
|
|
1912
|
+
</cfa-avatar>
|
|
1913
|
+
</a>
|
|
1914
|
+
`:V`
|
|
1915
|
+
<cfa-avatar
|
|
1916
|
+
imageUrl="${this.imageUrl}"
|
|
1917
|
+
altText="Avatar photo of ${this.name}"
|
|
1918
|
+
size="3"
|
|
1919
|
+
>
|
|
1920
|
+
</cfa-avatar>
|
|
1921
|
+
`}
|
|
1922
|
+
</div>
|
|
1923
|
+
<div class="details">
|
|
1924
|
+
<div>
|
|
1925
|
+
<div class="name h4">
|
|
1926
|
+
${this.linkUrl?V`
|
|
1927
|
+
<a
|
|
1928
|
+
href="${this.linkUrl}"
|
|
1929
|
+
target="${this.linkTarget||"_self"}"
|
|
1930
|
+
rel="${"_blank"==this.linkTarget?"noopener":Z}"
|
|
1931
|
+
>
|
|
1932
|
+
${this.name.trim()}
|
|
1933
|
+
</a>
|
|
1934
|
+
`:V` ${this.name.trim()} `}
|
|
1935
|
+
</div>
|
|
1936
|
+
${this.pronouns?V` <span class="pronouns small">(${this.pronouns})</span> `:""}
|
|
1937
|
+
</div>
|
|
1938
|
+
<div class="title small">
|
|
1939
|
+
${[this.title?.trim(),this.company?.trim()].filter(Boolean).join(", ")}
|
|
1940
|
+
</div>
|
|
1941
|
+
${this.linkedInUrl||this.twitterHandle?V`
|
|
1942
|
+
<div class="social">
|
|
1943
|
+
${this.linkedInUrl?V`
|
|
1944
|
+
<a
|
|
1945
|
+
href="${this.linkedInUrl}"
|
|
1946
|
+
target="_blank"
|
|
1947
|
+
rel="noopener"
|
|
1948
|
+
title="View ${this.name}'s profile on LinkedIn"
|
|
1949
|
+
>
|
|
1950
|
+
<cfa-social-icon icon="linkedin" />
|
|
1951
|
+
</a>
|
|
1952
|
+
`:Z}
|
|
1953
|
+
${this.twitterHandle?V`
|
|
1954
|
+
<a
|
|
1955
|
+
href="https://twitter.com/${this.twitterHandle}"
|
|
1956
|
+
target="_blank"
|
|
1957
|
+
rel="noopener"
|
|
1958
|
+
title="View ${this.name}'s profile on X (Twitter)"
|
|
1959
|
+
>
|
|
1960
|
+
<cfa-social-icon icon="twitter" />
|
|
1961
|
+
</a>
|
|
1962
|
+
`:Z}
|
|
1963
|
+
</div>
|
|
1964
|
+
`:Z}
|
|
1965
|
+
</div>
|
|
1966
|
+
</div>
|
|
1967
|
+
`}}customElements.get("cfa-person-card")||customElements.define("cfa-person-card",Ht);class Nt extends ct{static properties={heading:{},text:{},actionLabel:{},linkUrl:{},linkTarget:{}};static styles=(()=>[dt,mt,s`
|
|
1968
|
+
:host {
|
|
1969
|
+
--bg-color: var(--blue-20);
|
|
1970
|
+
--padding: var(--spacing-component-4);
|
|
1971
|
+
--text-color: var(--black);
|
|
1972
|
+
--action-label-color: var(--purple-60);
|
|
1973
|
+
--action-label-hover-color: var(--red-60);
|
|
1974
|
+
|
|
1975
|
+
display: block;
|
|
1976
|
+
}
|
|
1977
|
+
|
|
1978
|
+
.promo,
|
|
1979
|
+
a.promo {
|
|
1980
|
+
background-color: var(--bg-color);
|
|
1981
|
+
box-shadow: var(--shadow-small);
|
|
1982
|
+
color: var(--text-color, #000);
|
|
1983
|
+
display: flex;
|
|
1984
|
+
flex-direction: column;
|
|
1985
|
+
gap: var(--spacing-layout-half);
|
|
1986
|
+
padding: var(--padding);
|
|
1987
|
+
text-align: center;
|
|
1988
|
+
text-decoration: none;
|
|
1989
|
+
transition: box-shadow 0.2s ease-in-out;
|
|
1990
|
+
width: 100%;
|
|
1991
|
+
}
|
|
1992
|
+
|
|
1993
|
+
a.promo:hover {
|
|
1994
|
+
box-shadow: var(--shadow-medium);
|
|
1995
|
+
}
|
|
1996
|
+
|
|
1997
|
+
.action-label {
|
|
1998
|
+
color: var(--action-label-color);
|
|
1999
|
+
}
|
|
2000
|
+
|
|
2001
|
+
a.promo:hover .action-label {
|
|
2002
|
+
color: var(--action-label-hover-color);
|
|
2003
|
+
}
|
|
2004
|
+
`])();render(){return V`
|
|
2005
|
+
<a
|
|
2006
|
+
href="${this.linkUrl||"javascript:void(0)"}"
|
|
2007
|
+
target="${this.linkTarget||Z}"
|
|
2008
|
+
class="promo
|
|
2009
|
+
"
|
|
2010
|
+
>
|
|
2011
|
+
${this.heading?V` <div class="h4 sans-serif">${this.heading}</div> `:Z}
|
|
2012
|
+
${this.text?V` <div class="small">${this.text}</div> `:Z}
|
|
2013
|
+
${this.actionLabel?V`
|
|
2014
|
+
<div class="action-label small strong">
|
|
2015
|
+
${this.actionLabel} <cfa-icon>arrow_forward</cfa-icon>
|
|
2016
|
+
</div>
|
|
2017
|
+
`:Z}
|
|
2018
|
+
</a>
|
|
2019
|
+
`}}customElements.get("cfa-promo")||customElements.define("cfa-promo",Nt);class Rt extends ct{static properties=(()=>({showLabel:{type:String},hideLabel:{type:String},showIcon:{type:String},hideIcon:{type:String},expanded:{type:Boolean,reflect:!0}}))();static styles=(()=>[dt,s`
|
|
2020
|
+
:host {
|
|
2021
|
+
--color: var(--purple-60);
|
|
2022
|
+
--hover-color: var(--red-60);
|
|
2023
|
+
--margin-top: var(--spacing-layout-half) !important;
|
|
2024
|
+
|
|
2025
|
+
display: flex;
|
|
2026
|
+
flex-direction: column;
|
|
2027
|
+
row-gap: var(--spacing-between, 1rem);
|
|
2028
|
+
}
|
|
2029
|
+
|
|
2030
|
+
:host([expanded]) {
|
|
2031
|
+
--margin-top: var(--spacing) !important;
|
|
2032
|
+
}
|
|
2033
|
+
|
|
2034
|
+
button {
|
|
2035
|
+
background: transparent;
|
|
2036
|
+
border: none;
|
|
2037
|
+
color: var(--color);
|
|
2038
|
+
cursor: pointer;
|
|
2039
|
+
font: inherit;
|
|
2040
|
+
font-size: var(--font-size-small, 0.8rem);
|
|
2041
|
+
font-weight: bold;
|
|
2042
|
+
color: var(--)
|
|
2043
|
+
line-height: normal;
|
|
2044
|
+
margin: 0;
|
|
2045
|
+
overflow: visible;
|
|
2046
|
+
padding: 0;
|
|
2047
|
+
width: auto;
|
|
2048
|
+
}
|
|
2049
|
+
|
|
2050
|
+
button:hover {
|
|
2051
|
+
color: var(--hover-color);
|
|
2052
|
+
}
|
|
2053
|
+
`])();constructor(){super(),this.showLabel="Show more",this.hideLabel="Show less",this.showIcon="expand_more",this.hideIcon="expand_less",this.expanded=!1}render(){return V`
|
|
2054
|
+
<slot
|
|
2055
|
+
id="content"
|
|
2056
|
+
class="content ${this.expanded?"is-expanded":"is-collapsed"}"
|
|
2057
|
+
aria-labelledby="button"
|
|
2058
|
+
?hidden="${!this.expanded}"
|
|
2059
|
+
></slot>
|
|
2060
|
+
<div class="controls">
|
|
2061
|
+
<button
|
|
2062
|
+
@click="${()=>this.expanded=!this.expanded}"
|
|
2063
|
+
aria-expanded="${this.expanded}"
|
|
2064
|
+
aria-controls="content"
|
|
2065
|
+
>
|
|
2066
|
+
${this.expanded?this.hideLabel:this.showLabel}
|
|
2067
|
+
<cfa-icon>${this.expanded?this.hideIcon:this.showIcon}</cfa-icon>
|
|
2068
|
+
</button>
|
|
2069
|
+
</div>
|
|
2070
|
+
`}}customElements.get("cfa-reveal")||customElements.define("cfa-reveal",Rt);class It extends ct{static properties={imageUrl:{},imageAltText:{},linkUrl:{},linkTarget:{}};static styles=(()=>[dt,s`
|
|
2071
|
+
:host {
|
|
2072
|
+
--background: var(--white, #fff);
|
|
2073
|
+
--width: var(--column-span-12);
|
|
2074
|
+
}
|
|
2075
|
+
|
|
2076
|
+
.slide {
|
|
2077
|
+
background: var(--background);
|
|
2078
|
+
box-shadow: var(--shadow-small);
|
|
2079
|
+
color: inherit;
|
|
2080
|
+
display: flex;
|
|
2081
|
+
flex-direction: column;
|
|
2082
|
+
height: 100%;
|
|
2083
|
+
justify-content: stretch;
|
|
2084
|
+
margin-inline: auto;
|
|
2085
|
+
max-width: var(--width);
|
|
2086
|
+
text-decoration: none;
|
|
2087
|
+
transition: box-shadow 0.2s ease-in-out;
|
|
2088
|
+
width: 100%;
|
|
2089
|
+
}
|
|
2090
|
+
|
|
2091
|
+
.slide:hover,
|
|
2092
|
+
.slide:focus {
|
|
2093
|
+
box-shadow: var(--shadow-medium);
|
|
2094
|
+
}
|
|
2095
|
+
|
|
2096
|
+
.image {
|
|
2097
|
+
background-image: url("https://codeforamerica.org/wp-content/themes/cfa-core/static/images/bg-placeholder-03.svg");
|
|
2098
|
+
background-position: center center;
|
|
2099
|
+
background-size: cover;
|
|
2100
|
+
height: var(--spacing-layout-9);
|
|
2101
|
+
position: relative;
|
|
2102
|
+
}
|
|
2103
|
+
|
|
2104
|
+
.image::after {
|
|
2105
|
+
bottom: 0;
|
|
2106
|
+
box-shadow: inset 0 -50px 50px -50px var(--black-40);
|
|
2107
|
+
content: "";
|
|
2108
|
+
left: 0;
|
|
2109
|
+
position: absolute;
|
|
2110
|
+
right: 0;
|
|
2111
|
+
top: 0;
|
|
2112
|
+
z-index: 2;
|
|
2113
|
+
}
|
|
2114
|
+
|
|
2115
|
+
.image img {
|
|
2116
|
+
height: 100%;
|
|
2117
|
+
object-fit: cover;
|
|
2118
|
+
width: 100%;
|
|
2119
|
+
}
|
|
2120
|
+
|
|
2121
|
+
.content {
|
|
2122
|
+
box-sizing: border-box;
|
|
2123
|
+
display: flex;
|
|
2124
|
+
flex-direction: column;
|
|
2125
|
+
justify-content: center;
|
|
2126
|
+
padding: var(--spacing-component-4);
|
|
2127
|
+
}
|
|
2128
|
+
|
|
2129
|
+
@media (min-width: 1024px) {
|
|
2130
|
+
.slide {
|
|
2131
|
+
flex-direction: row;
|
|
2132
|
+
min-height: calc(12 * var(--spacing-layout-1));
|
|
2133
|
+
}
|
|
2134
|
+
|
|
2135
|
+
.slide > * {
|
|
2136
|
+
flex-basis: 50%;
|
|
2137
|
+
}
|
|
2138
|
+
|
|
2139
|
+
.image {
|
|
2140
|
+
height: auto;
|
|
2141
|
+
}
|
|
2142
|
+
|
|
2143
|
+
.image::after {
|
|
2144
|
+
box-shadow: inset -50px -50px 50px -50px var(--black-20);
|
|
2145
|
+
}
|
|
2146
|
+
}
|
|
2147
|
+
`])();constructor(){super(),this.linkUrl="javascript:void(0);",this.linkTarget="_self"}render(){return V`
|
|
2148
|
+
<a href="${this.linkUrl}" target="${this.linkTarget}" class="slide">
|
|
2149
|
+
<div class="image">
|
|
2150
|
+
${this.imageUrl?V`
|
|
2151
|
+
<img
|
|
2152
|
+
src="${this.imageUrl}"
|
|
2153
|
+
alt="${this.imageAltText}"
|
|
2154
|
+
loading="lazy"
|
|
2155
|
+
onerror="this.style.display='none'"
|
|
2156
|
+
/>
|
|
2157
|
+
`:""}
|
|
2158
|
+
</div>
|
|
2159
|
+
<div class="content">
|
|
2160
|
+
<slot></slot>
|
|
2161
|
+
</div>
|
|
2162
|
+
</a>
|
|
2163
|
+
`}}customElements.get("cfa-slide")||customElements.define("cfa-slide",It);class Bt extends ct{static properties=(()=>({active:{type:Boolean},panelId:{type:String}}))();static styles=(()=>[dt,mt,s`
|
|
2164
|
+
button {
|
|
2165
|
+
background: none;
|
|
2166
|
+
border: 0;
|
|
2167
|
+
box-shadow: inset 0 calc(-1 * var(--hairline)) 0 0 var(--gray-40);
|
|
2168
|
+
color: var(--gray-80);
|
|
2169
|
+
cursor: pointer;
|
|
2170
|
+
font-family: var(--font-family-sans-serif);
|
|
2171
|
+
font-size: var(--font-size-small);
|
|
2172
|
+
font-weight: normal;
|
|
2173
|
+
padding: var(--spacing-component-2) var(--spacing-component-3)
|
|
2174
|
+
calc(var(--spacing-component-2) + var(--medium));
|
|
2175
|
+
}
|
|
2176
|
+
button:focus {
|
|
2177
|
+
background-color: var(--focus-color);
|
|
2178
|
+
outline: none;
|
|
2179
|
+
}
|
|
2180
|
+
button:not(.active):hover {
|
|
2181
|
+
box-shadow: inset 0 calc(-1 * var(--medium)) 0 0 var(--purple-40);
|
|
2182
|
+
color: var(--black);
|
|
2183
|
+
}
|
|
2184
|
+
button.active {
|
|
2185
|
+
box-shadow: inset 0 calc(-1 * var(--medium)) 0 0 var(--purple-60);
|
|
2186
|
+
color: var(--black);
|
|
2187
|
+
font-weight: bold;
|
|
2188
|
+
}
|
|
2189
|
+
`])();constructor(){super(),this.active=!1,this.panelId=""}firstUpdated(){this.addEventListener("keydown",this._onKeyDown)}_onKeyDown(t){const e=Array.from(this.parentElement.querySelectorAll("cfa-tab")),o=e.indexOf(this);let i;switch(t.key){case"ArrowLeft":i=(o-1+e.length)%e.length,e[i].shadowRoot.querySelector("button").focus();break;case"ArrowRight":i=(o+1)%e.length,e[i].shadowRoot.querySelector("button").focus();break;case"Home":e[0].shadowRoot.querySelector("button").focus();break;case"End":e[e.length-1].shadowRoot.querySelector("button").focus()}}render(){return V`
|
|
2190
|
+
<button
|
|
2191
|
+
role="tab"
|
|
2192
|
+
aria-selected="${this.active?"true":"false"}"
|
|
2193
|
+
aria-controls="${this.panelId}"
|
|
2194
|
+
class="${this.active?"active":""}"
|
|
2195
|
+
tabindex="${this.active?"0":"-1"}"
|
|
2196
|
+
>
|
|
2197
|
+
<slot></slot>
|
|
2198
|
+
</button>
|
|
2199
|
+
`}}customElements.get("cfa-tab")||customElements.define("cfa-tab",Bt);class Ot extends ct{static properties={};static styles=(()=>[dt,vt,s`
|
|
2200
|
+
:host {
|
|
2201
|
+
display: block;
|
|
2202
|
+
width: calc(100% + var(--outer-margin));
|
|
2203
|
+
}
|
|
2204
|
+
|
|
2205
|
+
.tab-list {
|
|
2206
|
+
display: flex;
|
|
2207
|
+
flex-direction: row;
|
|
2208
|
+
line-height: 1;
|
|
2209
|
+
margin-inline-start: calc(-1 * var(--outer-margin));
|
|
2210
|
+
overflow-x: auto;
|
|
2211
|
+
overflow-y: hidden;
|
|
2212
|
+
scrollbar-width: none;
|
|
2213
|
+
white-space: nowrap;
|
|
2214
|
+
}
|
|
2215
|
+
|
|
2216
|
+
.tab-list::before {
|
|
2217
|
+
content: "";
|
|
2218
|
+
min-width: var(--outer-margin);
|
|
2219
|
+
}
|
|
2220
|
+
|
|
2221
|
+
.tab-list::after {
|
|
2222
|
+
border-bottom: var(--hairline) solid var(--gray-40);
|
|
2223
|
+
content: "";
|
|
2224
|
+
flex-grow: 1;
|
|
2225
|
+
margin-right: var(--outer-margin);
|
|
2226
|
+
}
|
|
2227
|
+
|
|
2228
|
+
::slotted(*) {
|
|
2229
|
+
max-width: none !important;
|
|
2230
|
+
white-space: nowrap !important;
|
|
2231
|
+
}
|
|
2232
|
+
`])();constructor(){super()}firstUpdated(){this.addEventListener("click",this._onTabClick),this.setAttribute("role","tablist"),this._setInitialAriaAttributes()}_setInitialAriaAttributes(){this.querySelectorAll("cfa-tab").forEach((t,e)=>{t.setAttribute("role","tab"),t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1"),0===e&&(t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0"))})}_onTabClick(t){const e=t.target.closest("cfa-tab");e&&this._setActiveTab(e)}_setActiveTab(t){this.querySelectorAll("cfa-tab").forEach(t=>{t.removeAttribute("active"),t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1")}),t.setAttribute("active",""),t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0");let e=t.id;e&&e.startsWith("tab-")&&(e=e.substring(4)),console.log("Tab changed event dispatched with ID:",e),this.dispatchEvent(new CustomEvent("tab-changed",{detail:{id:e},bubbles:!0,composed:!0}))}render(){return V`
|
|
2233
|
+
<div class="tab-list" role="tablist">
|
|
2234
|
+
<slot></slot>
|
|
2235
|
+
</div>
|
|
2236
|
+
`}}customElements.get("cfa-tab-list")||customElements.define("cfa-tab-list",Ot);class Ft extends ct{static properties=(()=>({title:{type:String},description:{type:String},actionLabel:{type:String},linkUrl:{type:String},linkTarget:{type:String},imageUrl:{type:String},imageThumbnailUrl:{type:String},imageAltText:{type:String}}))();static styles=(()=>[dt,mt,s`
|
|
2237
|
+
:host {
|
|
2238
|
+
--bg-color: var(--white);
|
|
2239
|
+
--title-color: var(--purple-60);
|
|
2240
|
+
--text-color: var(--black);
|
|
2241
|
+
--action-label-color: var(--purple-80);
|
|
2242
|
+
--action-label-hover-highlight: var(--purple-20);
|
|
2243
|
+
--blob-color: var(--purple-20);
|
|
2244
|
+
|
|
2245
|
+
align-items: stretch;
|
|
2246
|
+
display: flex;
|
|
2247
|
+
text-align: center;
|
|
2248
|
+
width: 100%;
|
|
2249
|
+
}
|
|
2250
|
+
|
|
2251
|
+
.tile {
|
|
2252
|
+
background-color: var(--bg-color);
|
|
2253
|
+
border-radius: var(--spacing-component-2);
|
|
2254
|
+
border: var(--hairline) solid var(--black-20);
|
|
2255
|
+
color: var(--text-color);
|
|
2256
|
+
display: flex;
|
|
2257
|
+
flex-direction: column;
|
|
2258
|
+
padding: var(--spacing-component-4);
|
|
2259
|
+
text-decoration: none;
|
|
2260
|
+
transition:
|
|
2261
|
+
box-shadow 0.5s ease-in-out,
|
|
2262
|
+
border-color 0.5s ease-in-out;
|
|
2263
|
+
width: 100%;
|
|
2264
|
+
}
|
|
2265
|
+
|
|
2266
|
+
a.tile:hover {
|
|
2267
|
+
box-shadow: var(--shadow-medium);
|
|
2268
|
+
border-color: rgba(0, 0, 0, 0);
|
|
2269
|
+
}
|
|
2270
|
+
|
|
2271
|
+
picture {
|
|
2272
|
+
display: grid;
|
|
2273
|
+
place-items: center;
|
|
2274
|
+
padding-block-end: var(--spacing-layout-1);
|
|
2275
|
+
}
|
|
2276
|
+
|
|
2277
|
+
picture > * {
|
|
2278
|
+
height: var(--spacing-layout-4);
|
|
2279
|
+
grid-area: 1 / 1;
|
|
2280
|
+
}
|
|
2281
|
+
|
|
2282
|
+
cfa-blob {
|
|
2283
|
+
transition: scale 0.5s ease-in-out;
|
|
2284
|
+
}
|
|
2285
|
+
|
|
2286
|
+
a.tile:hover cfa-blob {
|
|
2287
|
+
scale: 1.2;
|
|
2288
|
+
}
|
|
2289
|
+
|
|
2290
|
+
img {
|
|
2291
|
+
object-fit: contain;
|
|
2292
|
+
z-index: 2;
|
|
2293
|
+
}
|
|
2294
|
+
|
|
2295
|
+
.title {
|
|
2296
|
+
color: var(--title-color);
|
|
2297
|
+
}
|
|
2298
|
+
|
|
2299
|
+
.label {
|
|
2300
|
+
color: var(--action-label-color);
|
|
2301
|
+
display: inline-block;
|
|
2302
|
+
margin-block-start: auto;
|
|
2303
|
+
padding-block-start: var(--spacing-layout-half);
|
|
2304
|
+
}
|
|
2305
|
+
`])();tileContentTemplate(){return V`
|
|
2306
|
+
${this.imageUrl?V`
|
|
2307
|
+
<picture>
|
|
2308
|
+
<cfa-blob></cfa-blob>
|
|
2309
|
+
<img
|
|
2310
|
+
src="${this.imageUrl}"
|
|
2311
|
+
alt="${this.imageAltText}"
|
|
2312
|
+
load="lazy"
|
|
2313
|
+
/>
|
|
2314
|
+
</picture>
|
|
2315
|
+
`:Z}
|
|
2316
|
+
|
|
2317
|
+
<div class="title h3">${this.title}</div>
|
|
2318
|
+
|
|
2319
|
+
<!-- Description -->
|
|
2320
|
+
${this.description?V` <p class="small">${this.description}</p> `:Z}
|
|
2321
|
+
|
|
2322
|
+
<!-- Action label -->
|
|
2323
|
+
${this.actionLabel?V`
|
|
2324
|
+
<div class="label small strong">
|
|
2325
|
+
${this.actionLabel} <cfa-icon>arrow_forward</cfa-icon>
|
|
2326
|
+
</div>
|
|
2327
|
+
`:Z}
|
|
2328
|
+
`}render(){return V`
|
|
2329
|
+
<style>
|
|
2330
|
+
cfa-blob {
|
|
2331
|
+
--color: var(--blob-color);
|
|
2332
|
+
}
|
|
2333
|
+
</style>
|
|
2334
|
+
${this.linkUrl?V`
|
|
2335
|
+
<a
|
|
2336
|
+
href="${this.linkUrl}"
|
|
2337
|
+
target="${this.linkTarget}"
|
|
2338
|
+
rel="${"_blank"==this.linkTarget?"noopener":Z}"
|
|
2339
|
+
class="tile"
|
|
2340
|
+
>
|
|
2341
|
+
${this.tileContentTemplate()}
|
|
2342
|
+
</a>
|
|
2343
|
+
`:V` <div class="tile">${this.tileContentTemplate()}</div> `}
|
|
2344
|
+
`}}customElements.get("cfa-tile")||customElements.define("cfa-tile",Ft);class qt extends ct{static styles=(()=>[dt,mt,s`
|
|
2345
|
+
:host {
|
|
2346
|
+
--label-color: var(--purple-60);
|
|
2347
|
+
|
|
2348
|
+
display: block;
|
|
2349
|
+
max-width: var(--column-span-8);
|
|
2350
|
+
}
|
|
2351
|
+
|
|
2352
|
+
.label {
|
|
2353
|
+
--text-color: var(--label-color);
|
|
2354
|
+
}
|
|
2355
|
+
|
|
2356
|
+
.text {
|
|
2357
|
+
background-color: var(--white);
|
|
2358
|
+
border: var(--hairline) solid var(--black-20);
|
|
2359
|
+
color: var(--black);
|
|
2360
|
+
height: calc(12 * var(--spacing-layout-1));
|
|
2361
|
+
overflow: auto;
|
|
2362
|
+
padding: var(--spacing-component-3);
|
|
2363
|
+
}
|
|
2364
|
+
`])();render(){return V`
|
|
2365
|
+
<div class="label eyebrow-with-line">Transcript</div>
|
|
2366
|
+
<div class="text small">
|
|
2367
|
+
<slot />
|
|
2368
|
+
</div>
|
|
2369
|
+
`}}customElements.get("cfa-transcript")||customElements.define("cfa-transcript",qt);class jt extends ct{static properties=(()=>({atScrollStart:{type:Boolean},atScrollEnd:{type:Boolean}}))();static styles=(()=>[dt,s`
|
|
2370
|
+
:host {
|
|
2371
|
+
--slide-width-mobile: 75vw;
|
|
2372
|
+
--slide-width-desktop: var(--column-span-3);
|
|
2373
|
+
|
|
2374
|
+
display: block;
|
|
2375
|
+
scrollbar-color: transparent transparent;
|
|
2376
|
+
scrollbar-width: 0px;
|
|
2377
|
+
scroll-behavior: smooth;
|
|
2378
|
+
overflow: hidden;
|
|
2379
|
+
-webkit-overflow-scrolling: touch;
|
|
2380
|
+
}
|
|
2381
|
+
|
|
2382
|
+
:host(:focus) {
|
|
2383
|
+
outline: none !important;
|
|
2384
|
+
}
|
|
2385
|
+
|
|
2386
|
+
::-webkit-scrollbar {
|
|
2387
|
+
background: transparent;
|
|
2388
|
+
width: 0px;
|
|
2389
|
+
}
|
|
2390
|
+
|
|
2391
|
+
.carousel {
|
|
2392
|
+
display: flex;
|
|
2393
|
+
gap: var(--spacing-layout-1);
|
|
2394
|
+
overflow-x: scroll;
|
|
2395
|
+
scroll-snap-type: x mandatory;
|
|
2396
|
+
padding-block-start: var(--spacing-layout-half);
|
|
2397
|
+
padding-block-end: var(--spacing-layout-1);
|
|
2398
|
+
}
|
|
2399
|
+
|
|
2400
|
+
.controls {
|
|
2401
|
+
margin-block-start: calc(-1 * var(--spacing-layout-half));
|
|
2402
|
+
margin-block-end: var(--spacing-layout-1);
|
|
2403
|
+
text-align: center;
|
|
2404
|
+
}
|
|
2405
|
+
|
|
2406
|
+
.controls > * + * {
|
|
2407
|
+
margin-inline-start: var(--spacing-layout-half);
|
|
2408
|
+
}
|
|
2409
|
+
|
|
2410
|
+
.controls button {
|
|
2411
|
+
background: transparent;
|
|
2412
|
+
border: none;
|
|
2413
|
+
border-radius: 50%;
|
|
2414
|
+
color: var(--purple-80);
|
|
2415
|
+
cursor: pointer;
|
|
2416
|
+
font-size: var(--font-size-large, 1.25rem);
|
|
2417
|
+
height: var(--spacing-layout-2);
|
|
2418
|
+
transition: background-color 0.2s ease-in-out;
|
|
2419
|
+
width: var(--spacing-layout-2);
|
|
2420
|
+
}
|
|
2421
|
+
|
|
2422
|
+
.controls button:hover,
|
|
2423
|
+
.controls button:focus {
|
|
2424
|
+
background-color: var(--white, #fff);
|
|
2425
|
+
}
|
|
2426
|
+
|
|
2427
|
+
.controls button:focus {
|
|
2428
|
+
outline: var(--focus-outline);
|
|
2429
|
+
}
|
|
2430
|
+
|
|
2431
|
+
.controls button.disabled {
|
|
2432
|
+
color: var(--black-20);
|
|
2433
|
+
cursor: default;
|
|
2434
|
+
}
|
|
2435
|
+
|
|
2436
|
+
.controls button.disabled:hover,
|
|
2437
|
+
.controls button.disabled:focus {
|
|
2438
|
+
background: transparent;
|
|
2439
|
+
outline: none;
|
|
2440
|
+
}
|
|
2441
|
+
|
|
2442
|
+
::slotted(*) {
|
|
2443
|
+
flex: 0 0 var(--slide-width-mobile);
|
|
2444
|
+
margin-block: var(--spacing-layout-1);
|
|
2445
|
+
scroll-snap-align: center;
|
|
2446
|
+
}
|
|
2447
|
+
|
|
2448
|
+
@media (min-width: 1024px) {
|
|
2449
|
+
::slotted(*) {
|
|
2450
|
+
flex: 0 0 var(--slide-width-desktop);
|
|
2451
|
+
}
|
|
2452
|
+
|
|
2453
|
+
.spacer {
|
|
2454
|
+
flex: 0 0
|
|
2455
|
+
calc((100vw - var(--column-span-12)) / 2 - var(--outer-margin));
|
|
2456
|
+
}
|
|
2457
|
+
}
|
|
2458
|
+
`])();constructor(){super(),this.atScrollStart=!0,this.atScrollEnd=!1}connectedCallback(){super.connectedCallback(),this.addEventListener("focusin",t=>{""===t.target.slot&&t.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})})}scrollPrevious(){const t=this.shadowRoot.querySelector(".carousel"),e=this.shadowRoot.querySelector("slot").assignedElements()[0].clientWidth;t.scrollBy({left:-e,behavior:"smooth"})}scrollNext(){const t=this.shadowRoot.querySelector(".carousel"),e=this.shadowRoot.querySelector("slot").assignedElements()[0].clientWidth;t.scrollBy({left:e,behavior:"smooth"})}handleScroll(t){0===t.target.scrollLeft?this.atScrollStart=!0:this.atScrollStart=!1,Math.round(t.target.scrollLeft+t.target.clientWidth)>=Math.round(t.target.scrollWidth)?this.atScrollEnd=!0:this.atScrollEnd=!1}render(){return V`
|
|
2459
|
+
<div class="carousel" @scroll=${this.handleScroll}>
|
|
2460
|
+
<div class="spacer"></div>
|
|
2461
|
+
<slot></slot>
|
|
2462
|
+
<div class="spacer"></div>
|
|
2463
|
+
</div>
|
|
2464
|
+
<div class="controls">
|
|
2465
|
+
<button
|
|
2466
|
+
class="previous ${this.atScrollStart?"disabled":""}"
|
|
2467
|
+
@click="${this.scrollPrevious}"
|
|
2468
|
+
>
|
|
2469
|
+
<cfa-icon>arrow_back</cfa-icon>
|
|
2470
|
+
</button>
|
|
2471
|
+
<button
|
|
2472
|
+
class="next ${this.atScrollEnd?"disabled":""}"
|
|
2473
|
+
@click="${this.scrollNext}"
|
|
2474
|
+
>
|
|
2475
|
+
<cfa-icon>arrow_forward</cfa-icon>
|
|
2476
|
+
</button>
|
|
2477
|
+
</div>
|
|
2478
|
+
`}}customElements.get("cfa-carousel")||customElements.define("cfa-carousel",jt)})();
|