@codeforamerica/marcomms-design-system 1.15.2 → 1.17.0
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 +484 -160
- package/package.json +1 -1
- package/src/components/card.js +127 -95
- package/src/components/card.stories.js +13 -61
- package/src/shared/typography.js +349 -41
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*! For license information please see index.js.LICENSE.txt */
|
|
2
|
-
(()=>{"use strict";const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),o=new WeakMap;class a{constructor(t,e,o){if(this._$cssResult$=!0,o!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const i=this.t;if(e&&void 0===t){const e=void 0!==i&&1===i.length;e&&(t=o.get(i)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o.set(i,t))}return t}toString(){return this.cssText}}const s=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,i,o)=>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.")})(i)+t[o+1],t[0]);return new a(o,t,i)},r=(i,o)=>{if(e)i.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),a=t.litNonce;void 0!==a&&o.setAttribute("nonce",a),o.textContent=e.cssText,i.appendChild(o)}},n=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new a("string"==typeof t?t:t+"",void 0,i))(e)})(t):t,{is:l,defineProperty:c,getOwnPropertyDescriptor:h,getOwnPropertyNames:d,getOwnPropertySymbols:p,getPrototypeOf:u}=Object,g=globalThis,v=g.trustedTypes,m=v?v.emptyScript:"",f=g.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 i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},y=(t,e)=>!l(t,e),x={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:y};Symbol.metadata??=Symbol("metadata"),g.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 i=Symbol(),o=this.getPropertyDescriptor(t,i,e);void 0!==o&&c(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:a}=h(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:o,set(e){const s=o?.call(this);a?.call(this,e),this.requestUpdate(t,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??x}static _$Ei(){if(this.hasOwnProperty(b("elementProperties")))return;const t=u(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 i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(n(t))}else void 0!==t&&e.push(n(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"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 i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);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,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,i);if(void 0!==o&&!0===i.reflect){const a=(void 0!==i.converter?.toAttribute?i.converter:w).toAttribute(e,i.type);this._$Em=t,null==a?this.removeAttribute(o):this.setAttribute(o,a),this._$Em=null}}_$AK(t,e){const i=this.constructor,o=i._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=i.getPropertyOptions(o),a="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this._$Em=o;const s=a.fromAttribute(e,t.type);this[o]=s??this._$Ej?.get(o)??s,this._$Em=null}}requestUpdate(t,e,i,o=!1,a){if(void 0!==t){const s=this.constructor;if(!1===o&&(a=this[t]),i??=s.getPropertyOptions(t),!((i.hasChanged??y)(a,e)||i.useDefault&&i.reflect&&a===this._$Ej?.get(t)&&!this.hasAttribute(s._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:o,wrapped:a},s){i&&!(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||i||(e=void 0),this._$AL.set(t,e)),!0===o&&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,i]of t){const{wrapped:t}=i,o=this[e];!0!==t||this._$AL.has(e)||void 0===o||this.C(e,void 0,i,o)}}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:$}),(g.reactiveElementVersions??=[]).push("2.1.2");const k=globalThis,_=t=>t,E=k.trustedTypes,A=E?E.createPolicy("lit-html",{createHTML:t=>t}):void 0,z="$lit$",P=`lit$${Math.random().toFixed(9).slice(2)}$`,S="?"+P,T=`<${S}>`,C=document,L=()=>C.createComment(""),U=t=>null===t||"object"!=typeof t&&"function"!=typeof t,M=Array.isArray,I="[ \t\n\f\r]",R=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,H=/-->/g,N=/>/g,O=RegExp(`>|${I}(?:([^\\s"'>=/]+)(${I}*=${I}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),V=/'/g,q=/"/g,B=/^(?:script|style|textarea|title)$/i,F=t=>(e,...i)=>({_$litType$:t,strings:e,values:i}),D=F(1),j=F(2),W=(F(3),Symbol.for("lit-noChange")),K=Symbol.for("lit-nothing"),X=new WeakMap,Z=C.createTreeWalker(C,129);function G(t,e){if(!M(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==A?A.createHTML(e):e}const Y=(t,e)=>{const i=t.length-1,o=[];let a,s=2===e?"<svg>":3===e?"<math>":"",r=R;for(let e=0;e<i;e++){const i=t[e];let n,l,c=-1,h=0;for(;h<i.length&&(r.lastIndex=h,l=r.exec(i),null!==l);)h=r.lastIndex,r===R?"!--"===l[1]?r=H:void 0!==l[1]?r=N:void 0!==l[2]?(B.test(l[2])&&(a=RegExp("</"+l[2],"g")),r=O):void 0!==l[3]&&(r=O):r===O?">"===l[0]?(r=a??R,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,n=l[1],r=void 0===l[3]?O:'"'===l[3]?q:V):r===q||r===V?r=O:r===H||r===N?r=R:(r=O,a=void 0);const d=r===O&&t[e+1].startsWith("/>")?" ":"";s+=r===R?i+T:c>=0?(o.push(n),i.slice(0,c)+z+i.slice(c)+P+d):i+P+(-2===c?e:d)}return[G(t,s+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),o]};class J{constructor({strings:t,_$litType$:e},i){let o;this.parts=[];let a=0,s=0;const r=t.length-1,n=this.parts,[l,c]=Y(t,e);if(this.el=J.createElement(l,i),Z.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(o=Z.nextNode())&&n.length<r;){if(1===o.nodeType){if(o.hasAttributes())for(const t of o.getAttributeNames())if(t.endsWith(z)){const e=c[s++],i=o.getAttribute(t).split(P),r=/([.?@])?(.*)/.exec(e);n.push({type:1,index:a,name:r[2],strings:i,ctor:"."===r[1]?ot:"?"===r[1]?at:"@"===r[1]?st:it}),o.removeAttribute(t)}else t.startsWith(P)&&(n.push({type:6,index:a}),o.removeAttribute(t));if(B.test(o.tagName)){const t=o.textContent.split(P),e=t.length-1;if(e>0){o.textContent=E?E.emptyScript:"";for(let i=0;i<e;i++)o.append(t[i],L()),Z.nextNode(),n.push({type:2,index:++a});o.append(t[e],L())}}}else if(8===o.nodeType)if(o.data===S)n.push({type:2,index:a});else{let t=-1;for(;-1!==(t=o.data.indexOf(P,t+1));)n.push({type:7,index:a}),t+=P.length-1}a++}}static createElement(t,e){const i=C.createElement("template");return i.innerHTML=t,i}}function Q(t,e,i=t,o){if(e===W)return e;let a=void 0!==o?i._$Co?.[o]:i._$Cl;const s=U(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,i,o)),void 0!==o?(i._$Co??=[])[o]=a:i._$Cl=a),void 0!==a&&(e=Q(t,a._$AS(t,e.values),a,o)),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:i}=this._$AD,o=(t?.creationScope??C).importNode(e,!0);Z.currentNode=o;let a=Z.nextNode(),s=0,r=0,n=i[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=i[++r]}s!==n?.index&&(a=Z.nextNode(),s++)}return Z.currentNode=C,o}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class et{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,o){this.type=2,this._$AH=K,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=o,this._$Cv=o?.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),U(t)?t===K||null==t||""===t?(this._$AH!==K&&this._$AR(),this._$AH=K):t!==this._$AH&&t!==W&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>M(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!==K&&U(this._$AH)?this._$AA.nextSibling.data=t:this.T(C.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,o="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=J.createElement(G(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===o)this._$AH.p(e);else{const t=new tt(o,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=X.get(t.strings);return void 0===e&&X.set(t.strings,e=new J(t)),e}k(t){M(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,o=0;for(const a of t)o===e.length?e.push(i=new et(this.O(L()),this.O(L()),this,this.options)):i=e[o],i._$AI(a),o++;o<e.length&&(this._$AR(i&&i._$AB.nextSibling,o),e.length=o)}_$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 it{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,o,a){this.type=1,this._$AH=K,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=a,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=K}_$AI(t,e=this,i,o){const a=this.strings;let s=!1;if(void 0===a)t=Q(this,t,e,0),s=!U(t)||t!==this._$AH&&t!==W,s&&(this._$AH=t);else{const o=t;let r,n;for(t=a[0],r=0;r<a.length-1;r++)n=Q(this,o[i+r],e,r),n===W&&(n=this._$AH[r]),s||=!U(n)||n!==this._$AH[r],n===K?t=K:t!==K&&(t+=(n??"")+a[r+1]),this._$AH[r]=n}s&&!o&&this.j(t)}j(t){t===K?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class ot extends it{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===K?void 0:t}}class at extends it{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==K)}}class st extends it{constructor(t,e,i,o,a){super(t,e,i,o,a),this.type=5}_$AI(t,e=this){if((t=Q(this,t,e,0)??K)===W)return;const i=this._$AH,o=t===K&&i!==K||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,a=t!==K&&(i===K||o);o&&this.element.removeEventListener(this.name,this,i),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,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const nt=k.litHtmlPolyfillSupport;nt?.(J,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,i)=>{const o=i?.renderBefore??e;let a=o._$litPart$;if(void 0===a){const t=i?.renderBefore??null;o._$litPart$=a=new et(e.insertBefore(L(),t),t,void 0,i??{})}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`
|
|
2
|
+
(()=>{"use strict";const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),a=new WeakMap;class o{constructor(t,e,a){if(this._$cssResult$=!0,a!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const i=this.t;if(e&&void 0===t){const e=void 0!==i&&1===i.length;e&&(t=a.get(i)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&a.set(i,t))}return t}toString(){return this.cssText}}const s=(t,...e)=>{const a=1===t.length?t[0]:e.reduce((e,i,a)=>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.")})(i)+t[a+1],t[0]);return new o(a,t,i)},r=(i,a)=>{if(e)i.adoptedStyleSheets=a.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of a){const a=document.createElement("style"),o=t.litNonce;void 0!==o&&a.setAttribute("nonce",o),a.textContent=e.cssText,i.appendChild(a)}},n=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,i))(e)})(t):t,{is:l,defineProperty:c,getOwnPropertyDescriptor:h,getOwnPropertyNames:d,getOwnPropertySymbols:p,getPrototypeOf:g}=Object,u=globalThis,v=u.trustedTypes,m=v?v.emptyScript:"",f=u.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 i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},y=(t,e)=>!l(t,e),x={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:y};Symbol.metadata??=Symbol("metadata"),u.litPropertyMetadata??=new WeakMap;class k 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 i=Symbol(),a=this.getPropertyDescriptor(t,i,e);void 0!==a&&c(this.prototype,t,a)}}static getPropertyDescriptor(t,e,i){const{get:a,set:o}=h(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:a,set(e){const s=a?.call(this);o?.call(this,e),this.requestUpdate(t,s,i)},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 i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(n(t))}else void 0!==t&&e.push(n(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"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 i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);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,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),a=this.constructor._$Eu(t,i);if(void 0!==a&&!0===i.reflect){const o=(void 0!==i.converter?.toAttribute?i.converter:w).toAttribute(e,i.type);this._$Em=t,null==o?this.removeAttribute(a):this.setAttribute(a,o),this._$Em=null}}_$AK(t,e){const i=this.constructor,a=i._$Eh.get(t);if(void 0!==a&&this._$Em!==a){const t=i.getPropertyOptions(a),o="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this._$Em=a;const s=o.fromAttribute(e,t.type);this[a]=s??this._$Ej?.get(a)??s,this._$Em=null}}requestUpdate(t,e,i,a=!1,o){if(void 0!==t){const s=this.constructor;if(!1===a&&(o=this[t]),i??=s.getPropertyOptions(t),!((i.hasChanged??y)(o,e)||i.useDefault&&i.reflect&&o===this._$Ej?.get(t)&&!this.hasAttribute(s._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:a,wrapped:o},s){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,s??e??this[t]),!0!==o||void 0!==s)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===a&&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,i]of t){const{wrapped:t}=i,a=this[e];!0!==t||this._$AL.has(e)||void 0===a||this.C(e,void 0,i,a)}}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){}}k.elementStyles=[],k.shadowRootOptions={mode:"open"},k[b("elementProperties")]=new Map,k[b("finalized")]=new Map,f?.({ReactiveElement:k}),(u.reactiveElementVersions??=[]).push("2.1.2");const $=globalThis,_=t=>t,E=$.trustedTypes,A=E?E.createPolicy("lit-html",{createHTML:t=>t}):void 0,z="$lit$",P=`lit$${Math.random().toFixed(9).slice(2)}$`,S="?"+P,T=`<${S}>`,C=document,L=()=>C.createComment(""),U=t=>null===t||"object"!=typeof t&&"function"!=typeof t,M=Array.isArray,I="[ \t\n\f\r]",R=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,H=/-->/g,N=/>/g,O=RegExp(`>|${I}(?:([^\\s"'>=/]+)(${I}*=${I}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),V=/'/g,q=/"/g,B=/^(?:script|style|textarea|title)$/i,F=t=>(e,...i)=>({_$litType$:t,strings:e,values:i}),D=F(1),j=F(2),W=(F(3),Symbol.for("lit-noChange")),K=Symbol.for("lit-nothing"),X=new WeakMap,Z=C.createTreeWalker(C,129);function G(t,e){if(!M(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==A?A.createHTML(e):e}const Y=(t,e)=>{const i=t.length-1,a=[];let o,s=2===e?"<svg>":3===e?"<math>":"",r=R;for(let e=0;e<i;e++){const i=t[e];let n,l,c=-1,h=0;for(;h<i.length&&(r.lastIndex=h,l=r.exec(i),null!==l);)h=r.lastIndex,r===R?"!--"===l[1]?r=H:void 0!==l[1]?r=N:void 0!==l[2]?(B.test(l[2])&&(o=RegExp("</"+l[2],"g")),r=O):void 0!==l[3]&&(r=O):r===O?">"===l[0]?(r=o??R,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,n=l[1],r=void 0===l[3]?O:'"'===l[3]?q:V):r===q||r===V?r=O:r===H||r===N?r=R:(r=O,o=void 0);const d=r===O&&t[e+1].startsWith("/>")?" ":"";s+=r===R?i+T:c>=0?(a.push(n),i.slice(0,c)+z+i.slice(c)+P+d):i+P+(-2===c?e:d)}return[G(t,s+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),a]};class J{constructor({strings:t,_$litType$:e},i){let a;this.parts=[];let o=0,s=0;const r=t.length-1,n=this.parts,[l,c]=Y(t,e);if(this.el=J.createElement(l,i),Z.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(a=Z.nextNode())&&n.length<r;){if(1===a.nodeType){if(a.hasAttributes())for(const t of a.getAttributeNames())if(t.endsWith(z)){const e=c[s++],i=a.getAttribute(t).split(P),r=/([.?@])?(.*)/.exec(e);n.push({type:1,index:o,name:r[2],strings:i,ctor:"."===r[1]?at:"?"===r[1]?ot:"@"===r[1]?st:it}),a.removeAttribute(t)}else t.startsWith(P)&&(n.push({type:6,index:o}),a.removeAttribute(t));if(B.test(a.tagName)){const t=a.textContent.split(P),e=t.length-1;if(e>0){a.textContent=E?E.emptyScript:"";for(let i=0;i<e;i++)a.append(t[i],L()),Z.nextNode(),n.push({type:2,index:++o});a.append(t[e],L())}}}else if(8===a.nodeType)if(a.data===S)n.push({type:2,index:o});else{let t=-1;for(;-1!==(t=a.data.indexOf(P,t+1));)n.push({type:7,index:o}),t+=P.length-1}o++}}static createElement(t,e){const i=C.createElement("template");return i.innerHTML=t,i}}function Q(t,e,i=t,a){if(e===W)return e;let o=void 0!==a?i._$Co?.[a]:i._$Cl;const s=U(e)?void 0:e._$litDirective$;return o?.constructor!==s&&(o?._$AO?.(!1),void 0===s?o=void 0:(o=new s(t),o._$AT(t,i,a)),void 0!==a?(i._$Co??=[])[a]=o:i._$Cl=o),void 0!==o&&(e=Q(t,o._$AS(t,e.values),o,a)),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:i}=this._$AD,a=(t?.creationScope??C).importNode(e,!0);Z.currentNode=a;let o=Z.nextNode(),s=0,r=0,n=i[0];for(;void 0!==n;){if(s===n.index){let e;2===n.type?e=new et(o,o.nextSibling,this,t):1===n.type?e=new n.ctor(o,n.name,n.strings,this,t):6===n.type&&(e=new rt(o,this,t)),this._$AV.push(e),n=i[++r]}s!==n?.index&&(o=Z.nextNode(),s++)}return Z.currentNode=C,a}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class et{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,a){this.type=2,this._$AH=K,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=a,this._$Cv=a?.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),U(t)?t===K||null==t||""===t?(this._$AH!==K&&this._$AR(),this._$AH=K):t!==this._$AH&&t!==W&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>M(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!==K&&U(this._$AH)?this._$AA.nextSibling.data=t:this.T(C.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,a="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=J.createElement(G(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===a)this._$AH.p(e);else{const t=new tt(a,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=X.get(t.strings);return void 0===e&&X.set(t.strings,e=new J(t)),e}k(t){M(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,a=0;for(const o of t)a===e.length?e.push(i=new et(this.O(L()),this.O(L()),this,this.options)):i=e[a],i._$AI(o),a++;a<e.length&&(this._$AR(i&&i._$AB.nextSibling,a),e.length=a)}_$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 it{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,a,o){this.type=1,this._$AH=K,this._$AN=void 0,this.element=t,this.name=e,this._$AM=a,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=K}_$AI(t,e=this,i,a){const o=this.strings;let s=!1;if(void 0===o)t=Q(this,t,e,0),s=!U(t)||t!==this._$AH&&t!==W,s&&(this._$AH=t);else{const a=t;let r,n;for(t=o[0],r=0;r<o.length-1;r++)n=Q(this,a[i+r],e,r),n===W&&(n=this._$AH[r]),s||=!U(n)||n!==this._$AH[r],n===K?t=K:t!==K&&(t+=(n??"")+o[r+1]),this._$AH[r]=n}s&&!a&&this.j(t)}j(t){t===K?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class at extends it{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===K?void 0:t}}class ot extends it{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==K)}}class st extends it{constructor(t,e,i,a,o){super(t,e,i,a,o),this.type=5}_$AI(t,e=this){if((t=Q(this,t,e,0)??K)===W)return;const i=this._$AH,a=t===K&&i!==K||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,o=t!==K&&(i===K||a);a&&this.element.removeEventListener(this.name,this,i),o&&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,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const nt=$.litHtmlPolyfillSupport;nt?.(J,et),($.litHtmlVersions??=[]).push("3.3.2");const lt=globalThis;class ct extends k{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,i)=>{const a=i?.renderBefore??e;let o=a._$litPart$;if(void 0===o){const t=i?.renderBefore??null;a._$litPart$=o=new et(e.insertBefore(L(),t),t,void 0,i??{})}return o._$AI(t),o})(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
3
|
*,
|
|
4
4
|
*::before,
|
|
5
5
|
*::after {
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
/>
|
|
51
51
|
`:K}
|
|
52
52
|
</picture>
|
|
53
|
-
`}}customElements.get("cfa-avatar")||customElements.define("cfa-avatar",pt);class
|
|
53
|
+
`}}customElements.get("cfa-avatar")||customElements.define("cfa-avatar",pt);class gt extends ct{static properties={color:{},shape:{},styles:{}};static styles=(()=>[dt,s`
|
|
54
54
|
:host {
|
|
55
55
|
--color: var(--blue-20);
|
|
56
56
|
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
>
|
|
120
120
|
${this.blobTemplate()}
|
|
121
121
|
</div>
|
|
122
|
-
`}}customElements.get("cfa-blob")||customElements.define("cfa-blob",
|
|
122
|
+
`}}customElements.get("cfa-blob")||customElements.define("cfa-blob",gt);const ut=s`
|
|
123
123
|
.cfa-button,
|
|
124
124
|
a.cfa-button,
|
|
125
125
|
.cfa-button > a,
|
|
@@ -304,76 +304,134 @@
|
|
|
304
304
|
<slot></slot>
|
|
305
305
|
</span>
|
|
306
306
|
`}}customElements.get("cfa-icon")||customElements.define("cfa-icon",vt);const mt=s`
|
|
307
|
-
|
|
308
|
-
font-family: var(--font-family-serif) !important;
|
|
309
|
-
}
|
|
307
|
+
// =====
|
|
310
308
|
|
|
311
|
-
|
|
312
|
-
|
|
309
|
+
// Typography spacing
|
|
310
|
+
|
|
311
|
+
// Add a single space around paragraphs, blockquotes, and lists
|
|
312
|
+
p, ul, ol, blockquote {
|
|
313
|
+
& + * {
|
|
314
|
+
margin-block-start: var(--spacing, var(--spacing-layout-1, 1.5rem));
|
|
315
|
+
}
|
|
316
|
+
* + & {
|
|
317
|
+
margin-block-start: var(--spacing, var(--spacing-layout-1, 1.5rem));
|
|
318
|
+
}
|
|
313
319
|
}
|
|
314
320
|
|
|
315
|
-
.
|
|
316
|
-
|
|
321
|
+
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-1, .display-2 {
|
|
322
|
+
// Add a single line space after headings
|
|
323
|
+
& + * {
|
|
324
|
+
margin-block-start: var(--spacing, var(--spacing-layout-1, 1.5rem));
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
// Add two line spaces before headings
|
|
328
|
+
* + & {
|
|
329
|
+
--spacing: var(--spacing-layout-2);
|
|
330
|
+
|
|
331
|
+
margin-block-start: --spacing;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
// Only add a single space between headings and other headings
|
|
335
|
+
& + & {
|
|
336
|
+
--spacing: var(--spacing-layout-1);
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
// Reduce space after breadcrumbs and eyebrows
|
|
340
|
+
cfa-breadcrumbs + & {
|
|
341
|
+
margin-block-start: var(--spacing-layout-half) !important;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.eyebrow + & {
|
|
345
|
+
margin-block-start: 0 !important;
|
|
346
|
+
}
|
|
317
347
|
}
|
|
318
348
|
|
|
319
|
-
.
|
|
320
|
-
|
|
349
|
+
h1, .h1, .display-1, .display-2 {
|
|
350
|
+
text-wrap: balance;
|
|
321
351
|
}
|
|
322
352
|
|
|
323
|
-
|
|
324
|
-
|
|
353
|
+
// =====
|
|
354
|
+
|
|
355
|
+
// Font styles
|
|
356
|
+
|
|
357
|
+
.regular {
|
|
358
|
+
font-family: var(--font-family-base);
|
|
359
|
+
font-size: var(--font-size-base);
|
|
360
|
+
line-height: var(--line-height-base);
|
|
325
361
|
}
|
|
326
362
|
|
|
327
|
-
.display
|
|
328
|
-
font-family: var(--font-family-
|
|
363
|
+
.display-1 {
|
|
364
|
+
font-family: var(--font-family-heading);
|
|
329
365
|
font-size: var(--font-size-display-1);
|
|
330
|
-
font-weight:
|
|
331
|
-
letter-spacing: var(--letter-spacing-display-1);
|
|
366
|
+
font-weight: bold;
|
|
332
367
|
line-height: var(--line-height-display-1);
|
|
368
|
+
letter-spacing: var(--letter-spacing-display-1);
|
|
333
369
|
}
|
|
334
370
|
|
|
335
371
|
.display-2 {
|
|
336
|
-
font-family: var(--font-family-
|
|
372
|
+
font-family: var(--font-family-heading);
|
|
337
373
|
font-size: var(--font-size-display-2);
|
|
338
|
-
font-weight:
|
|
339
|
-
letter-spacing: var(--letter-spacing-display-2);
|
|
374
|
+
font-weight: bold;
|
|
340
375
|
line-height: var(--line-height-display-2);
|
|
376
|
+
letter-spacing: var(--letter-spacing-display-2);
|
|
341
377
|
}
|
|
342
378
|
|
|
379
|
+
h1,
|
|
343
380
|
.h1 {
|
|
344
|
-
font-family: var(--font-family-
|
|
381
|
+
font-family: var(--font-family-heading);
|
|
345
382
|
font-size: var(--font-size-h1);
|
|
346
|
-
font-weight:
|
|
347
|
-
letter-spacing: var(--letter-spacing-h1);
|
|
383
|
+
font-weight: bold;
|
|
348
384
|
line-height: var(--line-height-h1);
|
|
385
|
+
letter-spacing: var(--letter-spacing-h1);
|
|
349
386
|
}
|
|
350
387
|
|
|
388
|
+
h2,
|
|
351
389
|
.h2 {
|
|
352
|
-
font-family: var(--font-family-
|
|
390
|
+
font-family: var(--font-family-heading);
|
|
353
391
|
font-size: var(--font-size-h2);
|
|
354
|
-
font-weight:
|
|
355
|
-
letter-spacing: var(--letter-spacing-h2);
|
|
392
|
+
font-weight: bold;
|
|
356
393
|
line-height: var(--line-height-h2);
|
|
394
|
+
letter-spacing: var(--letter-spacing-h2);
|
|
357
395
|
}
|
|
358
396
|
|
|
397
|
+
h3,
|
|
359
398
|
.h3 {
|
|
360
|
-
font-family: var(--font-family-
|
|
399
|
+
font-family: var(--font-family-heading);
|
|
361
400
|
font-size: var(--font-size-h3);
|
|
362
|
-
font-weight:
|
|
363
|
-
letter-spacing: var(--letter-spacing-h3);
|
|
401
|
+
font-weight: bold;
|
|
364
402
|
line-height: var(--line-height-h3);
|
|
403
|
+
letter-spacing: var(--letter-spacing-h3);
|
|
365
404
|
}
|
|
366
405
|
|
|
406
|
+
h4,
|
|
367
407
|
.h4 {
|
|
368
|
-
font-family: var(--font-family-
|
|
408
|
+
font-family: var(--font-family-heading);
|
|
369
409
|
font-size: var(--font-size-h4);
|
|
370
|
-
font-weight:
|
|
371
|
-
letter-spacing: var(--letter-spacing-h4);
|
|
410
|
+
font-weight: bold;
|
|
372
411
|
line-height: var(--line-height-h4);
|
|
412
|
+
letter-spacing: var(--letter-spacing-h4);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.extra-large {
|
|
416
|
+
font-size: var(--font-size-extra-large);
|
|
417
|
+
line-height: var(--line-height-extra-large);
|
|
418
|
+
letter-spacing: var(--letter-spacing-extra-large);
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.large {
|
|
422
|
+
font-size: var(--font-size-large);
|
|
423
|
+
line-height: var(--line-height-large);
|
|
424
|
+
letter-spacing: var(--letter-spacing-large);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.small {
|
|
428
|
+
font-size: var(--font-size-small);
|
|
429
|
+
line-height: var(--line-height-small);
|
|
430
|
+
letter-spacing: var(--letter-spacing-small);
|
|
373
431
|
}
|
|
374
432
|
|
|
375
433
|
.eyebrow {
|
|
376
|
-
font-family: var(--font-family-
|
|
434
|
+
font-family: var(--font-family-sans-serif);
|
|
377
435
|
font-size: var(--font-size-eyebrow);
|
|
378
436
|
font-weight: var(--font-weight-eyebrow);
|
|
379
437
|
letter-spacing: var(--letter-spacing-eyebrow);
|
|
@@ -393,23 +451,273 @@
|
|
|
393
451
|
margin-block-end: var(--spacing-layout-half);
|
|
394
452
|
position: relative;
|
|
395
453
|
text-transform: uppercase;
|
|
454
|
+
|
|
455
|
+
&::after {
|
|
456
|
+
border-block-end: var(--hairline) solid currentColor;
|
|
457
|
+
content: "";
|
|
458
|
+
flex-grow: 1;
|
|
459
|
+
margin-left: var(--spacing-component-3);
|
|
460
|
+
}
|
|
396
461
|
}
|
|
397
462
|
|
|
398
|
-
.
|
|
399
|
-
|
|
463
|
+
.subtle {
|
|
464
|
+
opacity: 0.6;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.serif {
|
|
468
|
+
font-family: var(--font-family-serif);
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
.sans-serif {
|
|
472
|
+
font-family: var(--font-family-sans-serif);
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
i,
|
|
476
|
+
em,
|
|
477
|
+
.italic {
|
|
478
|
+
font-style: italic;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
b,
|
|
482
|
+
strong,
|
|
483
|
+
.strong {
|
|
484
|
+
font-weight: bold;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.normal {
|
|
488
|
+
font-weight: normal;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
.prominent-link,
|
|
492
|
+
a.prominent-link {
|
|
493
|
+
--accent-color: var(--purple-60);
|
|
494
|
+
|
|
495
|
+
font-weight: bold;
|
|
496
|
+
text-decoration: underline;
|
|
497
|
+
text-decoration-color: var(--accent-color);
|
|
498
|
+
text-decoration-thickness: var(--medium);
|
|
499
|
+
text-underline-offset: 0.4em;
|
|
500
|
+
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
|
501
|
+
|
|
502
|
+
&:hover {
|
|
503
|
+
--accent-color: var(--red-60);
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
&:not(:has(cfa-icon))::after {
|
|
507
|
+
@include icon.icon;
|
|
508
|
+
|
|
509
|
+
content: "arrow_right_alt";
|
|
510
|
+
display: inline-block;
|
|
511
|
+
padding-inline-start: 0.1em;
|
|
512
|
+
text-decoration: none;
|
|
513
|
+
transition: padding 0.2s ease-in-out;
|
|
514
|
+
width: 1em;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
&:not(:has(cfa-icon)):hover::after {
|
|
518
|
+
padding-inline-start: 0.3em;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
cfa-icon {
|
|
522
|
+
text-decoration: none;
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.white-text,
|
|
527
|
+
.text-light /* fallback */ {
|
|
528
|
+
-moz-osx-font-smoothing: grayscale; // Sharper antialising for white text on a dark background
|
|
529
|
+
-webkit-font-smoothing: antialiased; // Sharper antialising for white text on a dark background
|
|
530
|
+
color: var(--white);
|
|
531
|
+
--link-color: var(--white);
|
|
532
|
+
--link-hover-color: var(--white);
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
// =====
|
|
536
|
+
|
|
537
|
+
// Highlights
|
|
538
|
+
|
|
539
|
+
.highlight {
|
|
540
|
+
--highlight-offset: 0.2em;
|
|
541
|
+
|
|
542
|
+
box-decoration-break: clone;
|
|
543
|
+
display: inline;
|
|
544
|
+
background: linear-gradient(to top, transparent 0%, transparent var(--highlight-offset), var(--highlight-color) var(--highlight-offset), var(--highlight-color) calc(var(--highlight-offset) + var(--highlight-thickness)), transparent calc(var(--highlight-offset) + var(--highlight-thickness)), transparent 100%);
|
|
545
|
+
padding-inline: 0.1em;
|
|
546
|
+
-webkit-box-decoration-break: clone;
|
|
547
|
+
margin-inline-start: -0.1em;
|
|
548
|
+
margin-inline-end: -0.1em;
|
|
549
|
+
word-wrap: break-word;
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
// ======
|
|
553
|
+
|
|
554
|
+
// Lists
|
|
555
|
+
|
|
556
|
+
.ul,
|
|
557
|
+
.content ul {
|
|
558
|
+
list-style-type: disc;
|
|
559
|
+
padding-left: var(--spacing-layout-1);
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
.ul + *,
|
|
563
|
+
.content ul + *,
|
|
564
|
+
* + .ul,
|
|
565
|
+
* + .content ul {
|
|
566
|
+
margin-block-start: var(--spacing, var(--spacing-layout-1));
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
.ul > li,
|
|
570
|
+
.content ul > li {
|
|
571
|
+
margin-inline-start: 0;
|
|
572
|
+
padding-left: var(--spacing-component-2);
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.ul > li + li,
|
|
576
|
+
.content ul > li + li {
|
|
577
|
+
margin-block-start: var(--spacing-layout-half);
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
.ul > li > ul,
|
|
581
|
+
.content ul > li > ul {
|
|
582
|
+
margin-block-start: var(--spacing-layout-half);
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
.ol,
|
|
586
|
+
.content ol {
|
|
587
|
+
list-style-type: decimal;
|
|
588
|
+
padding-left: var(--spacing-layout-1);
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
.ol + *,
|
|
592
|
+
.content ol + *,
|
|
593
|
+
* + .ol,
|
|
594
|
+
* + .content ol {
|
|
595
|
+
margin-block-start: var(--spacing, var(--spacing-layout-1));
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
.ol > li,
|
|
599
|
+
.content ol > li {
|
|
600
|
+
margin-inline-start: 0;
|
|
601
|
+
padding-inline-start: var(--spacing-component-2);
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
.ol > li + li,
|
|
605
|
+
.content ol > li + li {
|
|
606
|
+
margin-block-start: var(--spacing-layout-half);
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
.ol > li > ul,
|
|
610
|
+
.content ol > li > ul {
|
|
611
|
+
margin-block-start: var(--spacing-layout-half);
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
.ul--unstyled {
|
|
615
|
+
list-style: none;
|
|
616
|
+
padding: 0;
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.ul--unstyled > li {
|
|
620
|
+
margin-inline: 0;
|
|
621
|
+
padding: 0;
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
.ul--line-separators > li + li::before {
|
|
625
|
+
border-block-start: 1px solid var(--gray-20);
|
|
400
626
|
content: "";
|
|
401
|
-
|
|
402
|
-
margin-
|
|
627
|
+
display: block;
|
|
628
|
+
margin-block: var(--spacing-layout-half);
|
|
629
|
+
width: 100%;
|
|
403
630
|
}
|
|
404
631
|
|
|
405
|
-
.
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
632
|
+
.ul--inline,
|
|
633
|
+
.ul--inline-with-separators,
|
|
634
|
+
.ul--inline-with-line-separators {
|
|
635
|
+
display: inline;
|
|
636
|
+
list-style: none;
|
|
637
|
+
padding-inline: 0 !important;
|
|
638
|
+
padding-left: 0 !important;
|
|
409
639
|
}
|
|
410
640
|
|
|
411
|
-
.
|
|
412
|
-
|
|
641
|
+
.ul--inline > li,
|
|
642
|
+
.ul--inline-with-separators > li,
|
|
643
|
+
.ul--inline-with-line-separators > li {
|
|
644
|
+
display: inline-block;
|
|
645
|
+
margin-inline-end: var(--spacing-component-3);
|
|
646
|
+
padding: 0 !important;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
.ul--inline li:last-child,
|
|
650
|
+
.ul--inline-with-separators li:last-child,
|
|
651
|
+
.ul--inline-with-line-separators li:last-child {
|
|
652
|
+
margin-inline-end: 0;
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
.ul--inline > li + li,
|
|
656
|
+
.ul--inline-with-separators > li + li,
|
|
657
|
+
.ul--inline-with-line-separators > li + li {
|
|
658
|
+
margin-block-start: 0;
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
.ul--inline-with-separators li,
|
|
662
|
+
.ul--inline-with-line-separators li {
|
|
663
|
+
margin-inline-end: 0;
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.ul--inline-with-separators > li::after {
|
|
667
|
+
content: "•";
|
|
668
|
+
margin-inline: var(--spacing-component-2);
|
|
669
|
+
opacity: 0.5;
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.ul--inline-with-separators > li:last-child::after {
|
|
673
|
+
content: "";
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
.ul--inline-with-line-separators > li::after {
|
|
677
|
+
content: "|";
|
|
678
|
+
margin-inline: var(--spacing-component-2);
|
|
679
|
+
opacity: 0.5;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
.ul--inline-with-line-separators > li:last-child::after {
|
|
683
|
+
content: "";
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
// ===
|
|
687
|
+
|
|
688
|
+
// Horizontal rule
|
|
689
|
+
|
|
690
|
+
hr {
|
|
691
|
+
--color: currentColor;
|
|
692
|
+
|
|
693
|
+
background-color: var(--color);
|
|
694
|
+
border: 0;
|
|
695
|
+
color: var(--color);
|
|
696
|
+
display: block;
|
|
697
|
+
font-size: 0;
|
|
698
|
+
height: var(--hairline);
|
|
699
|
+
margin-block: var(--spacing-layout-1);
|
|
700
|
+
opacity: 0.4;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
// ===
|
|
704
|
+
|
|
705
|
+
// Icons
|
|
706
|
+
|
|
707
|
+
.icon {
|
|
708
|
+
-webkit-font-feature-settings: 'liga';
|
|
709
|
+
direction: ltr;
|
|
710
|
+
display: inline-block;
|
|
711
|
+
font-family: 'Material Symbols Rounded';
|
|
712
|
+
font-feature-settings: 'liga';
|
|
713
|
+
font-size: 1.4em;
|
|
714
|
+
font-style: normal;
|
|
715
|
+
font-weight: normal;
|
|
716
|
+
letter-spacing: normal;
|
|
717
|
+
text-transform: none;
|
|
718
|
+
vertical-align: middle;
|
|
719
|
+
white-space: nowrap;
|
|
720
|
+
word-wrap: normal;
|
|
413
721
|
}
|
|
414
722
|
`;class ft extends ct{static properties={color:""};static styles=(()=>[dt,mt,s`
|
|
415
723
|
.label {
|
|
@@ -759,7 +1067,7 @@
|
|
|
759
1067
|
<span class="social-icon ${this.icon}" aria-hidden="true">
|
|
760
1068
|
${this.iconTemplate(this.icon)}
|
|
761
1069
|
</span>
|
|
762
|
-
`}}customElements.get("cfa-social-icon")||customElements.define("cfa-social-icon",xt);class
|
|
1070
|
+
`}}customElements.get("cfa-social-icon")||customElements.define("cfa-social-icon",xt);class kt extends ct{static properties={beforeLabel:{},figure:{},afterLabel:{},animated:{}};static styles=(()=>[dt,mt,s`
|
|
763
1071
|
:host {
|
|
764
1072
|
--text-color: var(--text-dark);
|
|
765
1073
|
--highlight-color: var(--purple-20);
|
|
@@ -808,7 +1116,7 @@
|
|
|
808
1116
|
</div>
|
|
809
1117
|
<div class="below-label strong">${this.afterLabel}</div>
|
|
810
1118
|
</div>
|
|
811
|
-
`}}customElements.get("cfa-stat")||customElements.define("cfa-stat"
|
|
1119
|
+
`}}customElements.get("cfa-stat")||customElements.define("cfa-stat",kt);class $t extends ct{static properties=(()=>({open:{type:Boolean}}))();static styles=(()=>[dt,s`
|
|
812
1120
|
:host {
|
|
813
1121
|
--color: var(--purple-60);
|
|
814
1122
|
--hover-bg-color: var(--blue-20);
|
|
@@ -904,7 +1212,7 @@
|
|
|
904
1212
|
<div role="tablist">
|
|
905
1213
|
<slot></slot>
|
|
906
1214
|
</div>
|
|
907
|
-
`}}customElements.get("cfa-accordion-item")||customElements.define("cfa-accordion-item"
|
|
1215
|
+
`}}customElements.get("cfa-accordion-item")||customElements.define("cfa-accordion-item",$t),customElements.get("cfa-accordion")||customElements.define("cfa-accordion",_t);class Et extends ct{static properties={theme:{}};static styles=(()=>[dt,s`
|
|
908
1216
|
:host {
|
|
909
1217
|
--bg-color: var(--purple-80);
|
|
910
1218
|
--text-color: var(--white);
|
|
@@ -1251,99 +1559,6 @@
|
|
|
1251
1559
|
.logo img {
|
|
1252
1560
|
object-fit: contain;
|
|
1253
1561
|
}
|
|
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
1562
|
`])();visualTemplate(){let t;return"image"===this.visualType?t=D`
|
|
1348
1563
|
<div class="visual image">
|
|
1349
1564
|
<div class="fallback-image">
|
|
@@ -1407,11 +1622,11 @@
|
|
|
1407
1622
|
`:K}
|
|
1408
1623
|
</div>
|
|
1409
1624
|
<div class="body">
|
|
1410
|
-
${this.text?D` <div class="small" .innerHTML
|
|
1625
|
+
${this.text?D` <div class="small" .innerHTML=${this.text}></div> `:K}
|
|
1411
1626
|
${this.metaText?D`
|
|
1412
1627
|
<div
|
|
1413
1628
|
class="meta-text small"
|
|
1414
|
-
.innerHTML
|
|
1629
|
+
.innerHTML=${this.metaText}
|
|
1415
1630
|
></div>
|
|
1416
1631
|
`:K}
|
|
1417
1632
|
${this.actionLabel?D` <div class="action-label">${this.actionLabel}</div> `:K}
|
|
@@ -1432,7 +1647,116 @@
|
|
|
1432
1647
|
${this.cardContentTemplate()}
|
|
1433
1648
|
</div>
|
|
1434
1649
|
`}
|
|
1435
|
-
`}}
|
|
1650
|
+
`}}class Tt extends ct{static styles=(()=>[dt,mt,s`
|
|
1651
|
+
:host {
|
|
1652
|
+
display: flex;
|
|
1653
|
+
flex-direction: column;
|
|
1654
|
+
margin-inline: auto;
|
|
1655
|
+
max-width: 100%;
|
|
1656
|
+
width: 100%;
|
|
1657
|
+
}
|
|
1658
|
+
|
|
1659
|
+
.card-skeleton {
|
|
1660
|
+
background-color: var(--white);
|
|
1661
|
+
border: var(--hairline) solid var(--gray-20);
|
|
1662
|
+
box-shadow: var(--shadow-small);
|
|
1663
|
+
color: var(--black);
|
|
1664
|
+
display: flex;
|
|
1665
|
+
flex: 1;
|
|
1666
|
+
flex-direction: column;
|
|
1667
|
+
height: 100%;
|
|
1668
|
+
}
|
|
1669
|
+
|
|
1670
|
+
.visual-skeleton {
|
|
1671
|
+
background-color: var(--gray-20);
|
|
1672
|
+
height: var(--spacing-layout-7);
|
|
1673
|
+
overflow: hidden;
|
|
1674
|
+
position: relative;
|
|
1675
|
+
width: 100%;
|
|
1676
|
+
}
|
|
1677
|
+
|
|
1678
|
+
.content {
|
|
1679
|
+
background-color: var(--white);
|
|
1680
|
+
display: flex;
|
|
1681
|
+
flex: 1;
|
|
1682
|
+
flex-direction: column;
|
|
1683
|
+
gap: var(--spacing-layout-half);
|
|
1684
|
+
padding: var(--spacing-component-4);
|
|
1685
|
+
}
|
|
1686
|
+
|
|
1687
|
+
.body {
|
|
1688
|
+
display: flex;
|
|
1689
|
+
flex: 1;
|
|
1690
|
+
flex-direction: column;
|
|
1691
|
+
gap: var(--spacing-layout-half);
|
|
1692
|
+
}
|
|
1693
|
+
|
|
1694
|
+
.line {
|
|
1695
|
+
background-color: var(--gray-20);
|
|
1696
|
+
border-radius: var(--spacing-component-1);
|
|
1697
|
+
display: block;
|
|
1698
|
+
overflow: hidden;
|
|
1699
|
+
position: relative;
|
|
1700
|
+
width: 100%;
|
|
1701
|
+
}
|
|
1702
|
+
|
|
1703
|
+
.line::after {
|
|
1704
|
+
animation: shimmer 1.5s linear infinite;
|
|
1705
|
+
background: linear-gradient(
|
|
1706
|
+
90deg,
|
|
1707
|
+
transparent 0%,
|
|
1708
|
+
var(--white-50, rgba(255, 255, 255, 0.45)) 50%,
|
|
1709
|
+
transparent 100%
|
|
1710
|
+
);
|
|
1711
|
+
content: "";
|
|
1712
|
+
inset: 0;
|
|
1713
|
+
position: absolute;
|
|
1714
|
+
transform: translateX(-100%);
|
|
1715
|
+
}
|
|
1716
|
+
|
|
1717
|
+
.line--eyebrow {
|
|
1718
|
+
height: var(--line-height-small);
|
|
1719
|
+
max-width: 28%;
|
|
1720
|
+
}
|
|
1721
|
+
|
|
1722
|
+
.line--title {
|
|
1723
|
+
height: var(--line-height-h3);
|
|
1724
|
+
max-width: 76%;
|
|
1725
|
+
}
|
|
1726
|
+
|
|
1727
|
+
.line--body {
|
|
1728
|
+
height: var(--line-height-base);
|
|
1729
|
+
}
|
|
1730
|
+
|
|
1731
|
+
.line--body-short {
|
|
1732
|
+
max-width: 86%;
|
|
1733
|
+
}
|
|
1734
|
+
|
|
1735
|
+
.line--action {
|
|
1736
|
+
height: var(--line-height-small);
|
|
1737
|
+
margin-block-start: auto;
|
|
1738
|
+
max-width: 36%;
|
|
1739
|
+
}
|
|
1740
|
+
|
|
1741
|
+
@keyframes shimmer {
|
|
1742
|
+
100% {
|
|
1743
|
+
transform: translateX(100%);
|
|
1744
|
+
}
|
|
1745
|
+
}
|
|
1746
|
+
`])();render(){return D`
|
|
1747
|
+
<div class="card-skeleton" role="status" aria-busy="true" aria-label="Loading card">
|
|
1748
|
+
<div class="visual-skeleton line" aria-hidden="true"></div>
|
|
1749
|
+
<div class="content">
|
|
1750
|
+
<div class="line line--eyebrow" aria-hidden="true"></div>
|
|
1751
|
+
<div class="line line--title" aria-hidden="true"></div>
|
|
1752
|
+
<div class="body" aria-hidden="true">
|
|
1753
|
+
<div class="line line--body"></div>
|
|
1754
|
+
<div class="line line--body line--body-short"></div>
|
|
1755
|
+
<div class="line line--action"></div>
|
|
1756
|
+
</div>
|
|
1757
|
+
</div>
|
|
1758
|
+
</div>
|
|
1759
|
+
`}}customElements.get("cfa-card")||customElements.define("cfa-card",St),customElements.get("cfa-card-skeleton")||customElements.define("cfa-card-skeleton",Tt);class Ct extends ct{static properties={name:{},imageUrl:{},linkUrl:{},linkTarget:{}};static styles=(()=>[dt,mt,s`
|
|
1436
1760
|
:host {
|
|
1437
1761
|
--bg-color: var(--blue-20);
|
|
1438
1762
|
--text-color: var(--black);
|
|
@@ -1488,7 +1812,7 @@
|
|
|
1488
1812
|
${this.cardContentTemplate()}
|
|
1489
1813
|
</a>
|
|
1490
1814
|
`:D` <div class="card">${this.cardContentTemplate()}</div> `}
|
|
1491
|
-
`}}customElements.get("cfa-logo-card")||customElements.define("cfa-logo-card",
|
|
1815
|
+
`}}customElements.get("cfa-logo-card")||customElements.define("cfa-logo-card",Ct);class Lt extends ct{static properties={fontSize:{}};static styles=(()=>[dt,s`
|
|
1492
1816
|
:host {
|
|
1493
1817
|
--link-color: var(--purple-80);
|
|
1494
1818
|
--link-hover-color: var(--purple-80);
|
|
@@ -1554,7 +1878,7 @@
|
|
|
1554
1878
|
<nav data-font-size="${this.fontSize}">
|
|
1555
1879
|
<ul></ul>
|
|
1556
1880
|
</nav>
|
|
1557
|
-
`}}customElements.get("cfa-nav")||customElements.define("cfa-nav",
|
|
1881
|
+
`}}customElements.get("cfa-nav")||customElements.define("cfa-nav",Lt);class Ut extends ct{static properties={fontSize:{}};static styles=(()=>[dt,s`
|
|
1558
1882
|
:host {
|
|
1559
1883
|
--bg-color: var(--white);
|
|
1560
1884
|
--link-color: var(--purple-80);
|
|
@@ -1646,14 +1970,14 @@
|
|
|
1646
1970
|
background-color: var(--blue-40);
|
|
1647
1971
|
}
|
|
1648
1972
|
}
|
|
1649
|
-
`])();handleSlotchange(t){const e=t.target.assignedNodes({flatten:!0}),i=this.shadowRoot.querySelector("ul"),
|
|
1973
|
+
`])();handleSlotchange(t){const e=t.target.assignedNodes({flatten:!0}),i=this.shadowRoot.querySelector("ul"),a=[];e.forEach(t=>{"UL"===t.tagName&&t.querySelectorAll("li").forEach(t=>{i.appendChild(t.cloneNode(!0));const e=t.querySelector("a")?.getAttribute("href");e&&e.startsWith("#")&&a.push(e.substring(1))})}),window.addEventListener("scroll",()=>this.updateActiveNav(a))}updateActiveNav(t){const e=window.scrollY;let i=null;if(t.forEach(t=>{const a=document.getElementById(t);a&&a.offsetTop<=e+256&&(i=t)}),this.shadowRoot.querySelectorAll("li a").forEach(t=>{t.classList.remove("is-active")}),i){const t=this.shadowRoot.querySelector(`li a[href*="#${i}"]`);t&&t.classList.add("is-active")}}render(){return D`
|
|
1650
1974
|
<slot @slotchange=${this.handleSlotchange}></slot>
|
|
1651
1975
|
<nav>
|
|
1652
1976
|
<ul>
|
|
1653
1977
|
<li><strong>On this page:  </strong></li>
|
|
1654
1978
|
</ul>
|
|
1655
1979
|
</nav>
|
|
1656
|
-
`}}customElements.get("cfa-page-nav")||customElements.define("cfa-page-nav",
|
|
1980
|
+
`}}customElements.get("cfa-page-nav")||customElements.define("cfa-page-nav",Ut);class Mt extends ct{static properties={previousTitle:{},previousUrl:{},nextTitle:{},nextUrl:{}};static styles=(()=>[dt,mt,ut,s`
|
|
1657
1981
|
:host {
|
|
1658
1982
|
display: block;
|
|
1659
1983
|
}
|
|
@@ -1718,7 +2042,7 @@
|
|
|
1718
2042
|
`:""}
|
|
1719
2043
|
</div>
|
|
1720
2044
|
</nav>
|
|
1721
|
-
`}}customElements.get("cfa-pager")||customElements.define("cfa-pager",
|
|
2045
|
+
`}}customElements.get("cfa-pager")||customElements.define("cfa-pager",Mt);class It extends ct{static properties=(()=>({page:{type:Number},totalPages:{type:Number},previousLabel:{},nextLabel:{}}))();static styles=(()=>[dt,ut,s`
|
|
1722
2046
|
:host {
|
|
1723
2047
|
display: block;
|
|
1724
2048
|
}
|
|
@@ -1773,7 +2097,7 @@
|
|
|
1773
2097
|
`:""}
|
|
1774
2098
|
</div>
|
|
1775
2099
|
</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",
|
|
2100
|
+
`}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",It);class Rt 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
2101
|
:host {
|
|
1778
2102
|
display: block;
|
|
1779
2103
|
}
|
|
@@ -1964,7 +2288,7 @@
|
|
|
1964
2288
|
`:K}
|
|
1965
2289
|
</div>
|
|
1966
2290
|
</div>
|
|
1967
|
-
`}}customElements.get("cfa-person-card")||customElements.define("cfa-person-card",
|
|
2291
|
+
`}}customElements.get("cfa-person-card")||customElements.define("cfa-person-card",Rt);class Ht extends ct{static properties={heading:{},text:{},actionLabel:{},linkUrl:{},linkTarget:{}};static styles=(()=>[dt,mt,s`
|
|
1968
2292
|
:host {
|
|
1969
2293
|
--bg-color: var(--blue-20);
|
|
1970
2294
|
--padding: var(--spacing-component-4);
|
|
@@ -2016,7 +2340,7 @@
|
|
|
2016
2340
|
</div>
|
|
2017
2341
|
`:K}
|
|
2018
2342
|
</a>
|
|
2019
|
-
`}}customElements.get("cfa-promo")||customElements.define("cfa-promo",
|
|
2343
|
+
`}}customElements.get("cfa-promo")||customElements.define("cfa-promo",Ht);class Nt 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
2344
|
:host {
|
|
2021
2345
|
--color: var(--purple-60);
|
|
2022
2346
|
--hover-color: var(--red-60);
|
|
@@ -2067,7 +2391,7 @@
|
|
|
2067
2391
|
<cfa-icon>${this.expanded?this.hideIcon:this.showIcon}</cfa-icon>
|
|
2068
2392
|
</button>
|
|
2069
2393
|
</div>
|
|
2070
|
-
`}}customElements.get("cfa-reveal")||customElements.define("cfa-reveal",
|
|
2394
|
+
`}}customElements.get("cfa-reveal")||customElements.define("cfa-reveal",Nt);class Ot extends ct{static properties={imageUrl:{},imageAltText:{},linkUrl:{},linkTarget:{}};static styles=(()=>[dt,s`
|
|
2071
2395
|
:host {
|
|
2072
2396
|
--background: var(--white, #fff);
|
|
2073
2397
|
--width: var(--column-span-12);
|
|
@@ -2160,7 +2484,7 @@
|
|
|
2160
2484
|
<slot></slot>
|
|
2161
2485
|
</div>
|
|
2162
2486
|
</a>
|
|
2163
|
-
`}}customElements.get("cfa-slide")||customElements.define("cfa-slide",
|
|
2487
|
+
`}}customElements.get("cfa-slide")||customElements.define("cfa-slide",Ot);class Vt extends ct{static properties=(()=>({active:{type:Boolean},panelId:{type:String}}))();static styles=(()=>[dt,mt,s`
|
|
2164
2488
|
button {
|
|
2165
2489
|
background: none;
|
|
2166
2490
|
border: 0;
|
|
@@ -2186,7 +2510,7 @@
|
|
|
2186
2510
|
color: var(--black);
|
|
2187
2511
|
font-weight: bold;
|
|
2188
2512
|
}
|
|
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")),i=e.indexOf(this);let
|
|
2513
|
+
`])();constructor(){super(),this.active=!1,this.panelId=""}firstUpdated(){this.addEventListener("keydown",this._onKeyDown)}_onKeyDown(t){const e=Array.from(this.parentElement.querySelectorAll("cfa-tab")),i=e.indexOf(this);let a;switch(t.key){case"ArrowLeft":a=(i-1+e.length)%e.length,e[a].shadowRoot.querySelector("button").focus();break;case"ArrowRight":a=(i+1)%e.length,e[a].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 D`
|
|
2190
2514
|
<button
|
|
2191
2515
|
role="tab"
|
|
2192
2516
|
aria-selected="${this.active?"true":"false"}"
|
|
@@ -2196,7 +2520,7 @@
|
|
|
2196
2520
|
>
|
|
2197
2521
|
<slot></slot>
|
|
2198
2522
|
</button>
|
|
2199
|
-
`}}customElements.get("cfa-tab")||customElements.define("cfa-tab",
|
|
2523
|
+
`}}customElements.get("cfa-tab")||customElements.define("cfa-tab",Vt);class qt extends ct{static properties={};static styles=(()=>[dt,ut,s`
|
|
2200
2524
|
:host {
|
|
2201
2525
|
display: block;
|
|
2202
2526
|
width: calc(100% + var(--outer-margin));
|
|
@@ -2233,7 +2557,7 @@
|
|
|
2233
2557
|
<div class="tab-list" role="tablist">
|
|
2234
2558
|
<slot></slot>
|
|
2235
2559
|
</div>
|
|
2236
|
-
`}}customElements.get("cfa-tab-list")||customElements.define("cfa-tab-list",
|
|
2560
|
+
`}}customElements.get("cfa-tab-list")||customElements.define("cfa-tab-list",qt);class Bt 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
2561
|
:host {
|
|
2238
2562
|
--bg-color: var(--white);
|
|
2239
2563
|
--title-color: var(--purple-60);
|
|
@@ -2341,7 +2665,7 @@
|
|
|
2341
2665
|
${this.tileContentTemplate()}
|
|
2342
2666
|
</a>
|
|
2343
2667
|
`:D` <div class="tile">${this.tileContentTemplate()}</div> `}
|
|
2344
|
-
`}}customElements.get("cfa-tile")||customElements.define("cfa-tile",
|
|
2668
|
+
`}}customElements.get("cfa-tile")||customElements.define("cfa-tile",Bt);class Ft extends ct{static styles=(()=>[dt,mt,s`
|
|
2345
2669
|
:host {
|
|
2346
2670
|
--label-color: var(--purple-60);
|
|
2347
2671
|
|
|
@@ -2366,7 +2690,7 @@
|
|
|
2366
2690
|
<div class="text small">
|
|
2367
2691
|
<slot />
|
|
2368
2692
|
</div>
|
|
2369
|
-
`}}customElements.get("cfa-transcript")||customElements.define("cfa-transcript",
|
|
2693
|
+
`}}customElements.get("cfa-transcript")||customElements.define("cfa-transcript",Ft);class Dt extends ct{static SWIPE_THRESHOLD=50;static SHADOW_SPACE=32;static PROGRESS_UPDATE_INTERVAL=100;static AUTOPLAY_DURATION=1e4;static DESKTOP_BREAKPOINT=768;static ITEMS_PER_VIEW_DESKTOP=3;static ITEMS_PER_VIEW_MOBILE=1;static properties=(()=>({currentPage:{type:Number,state:!0},totalSlides:{type:Number,state:!0},progressPercentage:{type:Number,state:!0},isPaused:{type:Boolean,state:!0},prefersReducedMotion:{type:Boolean,state:!0},itemsPerView:{type:Number},autoPlay:{type:Boolean},autoPlayDuration:{type:Number}}))();static styles=(()=>[dt,s`
|
|
2370
2694
|
:host {
|
|
2371
2695
|
--carousel-fade-duration: 300ms;
|
|
2372
2696
|
--carousel-control-size: var(--spacing-layout-2);
|
|
@@ -2518,7 +2842,7 @@
|
|
|
2518
2842
|
min-width: calc(var(--carousel-dot-size) * 0.8);
|
|
2519
2843
|
}
|
|
2520
2844
|
}
|
|
2521
|
-
`])();constructor(){super(),this.currentPage=0,this.totalSlides=0,this.progressPercentage=0,this.isPaused=!0,this.prefersReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.itemsPerView=
|
|
2845
|
+
`])();constructor(){super(),this.currentPage=0,this.totalSlides=0,this.progressPercentage=0,this.isPaused=!0,this.prefersReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.itemsPerView=Dt.ITEMS_PER_VIEW_DESKTOP,this.autoPlay=!0,this.autoPlayDuration=Math.max(100,Dt.AUTOPLAY_DURATION),this.autoPlayTimer=null,this.autoPlayTimeout=null,this.touchStartX=null,this.touchEndX=null,this._initialized=!1,this._resizeTimerId=null,this._mouseEnterListener=null,this._mouseLeaveListener=null}connectedCallback(){super.connectedCallback();const t=this.getAttribute("items-per-view");if(null!==t){const e=parseInt(t,10);isNaN(e)||(this.itemsPerView=e)}this.style.setProperty("--items-per-view",this.itemsPerView),this.addEventListener("keydown",t=>this._handleKeydown(t)),this.addEventListener("touchstart",t=>this._handleTouchStart(t),!1),this.addEventListener("touchend",t=>this._handleTouchEnd(t),!1),this._resizeListener=()=>{this._resizeTimerId&&clearTimeout(this._resizeTimerId),this._resizeTimerId=setTimeout(()=>{this.updateItemsPerView(),this.updateCarouselHeight()},150)},window.addEventListener("resize",this._resizeListener)}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoPlay(),this._resizeListener&&window.removeEventListener("resize",this._resizeListener),this._resizeTimerId&&clearTimeout(this._resizeTimerId);const t=this.shadowRoot?.querySelector(".carousel-slides");t&&this._mouseEnterListener&&this._mouseLeaveListener&&(t.removeEventListener("mouseenter",this._mouseEnterListener),t.removeEventListener("mouseleave",this._mouseLeaveListener))}updated(t){t.has("itemsPerView")&&this.style.setProperty("--items-per-view",this.itemsPerView),t.has("currentPage")&&this.updateItemVisibility()}firstUpdated(){const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".carousel-slides");t&&!this._slotChangeSetup&&(this._slotChangeSetup=!0,t.addEventListener("slotchange",()=>{this._slotChangeTimeout&&clearTimeout(this._slotChangeTimeout),this._slotChangeTimeout=setTimeout(()=>{this._initialized||this._initializeCarousel()},50)})),e&&!this._mouseEnterListener&&(this._mouseEnterListener=()=>{this.stopAutoPlay()},this._mouseLeaveListener=()=>{this.isPaused||this._scheduleNextPage()},e.addEventListener("mouseenter",this._mouseEnterListener),e.addEventListener("mouseleave",this._mouseLeaveListener))}_initializeCarousel(){if(this._initialized)return;const t=this.shadowRoot.querySelector("slot");if(!t)return;const e=t.assignedElements();0!==e.length&&(this._initialized=!0,this.totalSlides=e.length,this.updateItemsPerView(),this.updateItemVisibility(),this.startAutoPlay(),this._waitForImages(e,5e3).then(()=>{this.updateCarouselHeight()}))}_waitForImages(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:3e3;return Promise.race([Promise.all(Array.from(t).map(t=>Promise.all(Array.from(t.querySelectorAll("img")).map(t=>t.complete?Promise.resolve():new Promise(e=>{t.addEventListener("load",e,{once:!0}),t.addEventListener("error",e,{once:!0})}))))),new Promise((t,i)=>setTimeout(()=>i(new Error("Image load timeout")),e))]).catch(()=>Promise.resolve())}get totalPages(){return Math.ceil(this.totalSlides/this.itemsPerView)}updateItemsPerView(){if(this.hasAttribute("items-per-view"))return;const t=window.innerWidth>=Dt.DESKTOP_BREAKPOINT?Dt.ITEMS_PER_VIEW_DESKTOP:Dt.ITEMS_PER_VIEW_MOBILE;t!==this.itemsPerView&&(this.itemsPerView=t,this.style.setProperty("--items-per-view",this.itemsPerView),this.currentPage>=this.totalPages&&(this.currentPage=0),this.requestUpdate())}updateItemVisibility(){const t=this.shadowRoot.querySelector("slot");if(!t)return;const e=t.assignedElements();if(0===e.length)return;const i=this.currentPage*this.itemsPerView,a=i+this.itemsPerView;e.forEach((t,e)=>{e>=i&&e<a?t.setAttribute("data-slide-active",""):t.removeAttribute("data-slide-active")}),this.updateCarouselHeight()}updateCarouselHeight(){const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".carousel-slides");if(!t||!e)return;const i=t.assignedElements();if(0===i.length)return;const a=this.currentPage*this.itemsPerView,o=a+this.itemsPerView;requestAnimationFrame(()=>{requestAnimationFrame(()=>{setTimeout(()=>{let t=0;for(let e=a;e<o&&e<i.length;e++){const a=i[e].offsetHeight;t=Math.max(t,a)}const s=Math.max(t,Dt.SHADOW_SPACE);e.style.height=s+"px"},0)})})}startAutoPlay(){this.autoPlay&&!this.prefersReducedMotion&&0!==this.totalSlides?(this.isPaused=!1,this.progressPercentage=0,this._scheduleNextPage()):this.isPaused=!0}play(){this.prefersReducedMotion||this.startAutoPlay()}pause(){this.isPaused=!0,this.stopAutoPlay()}stopAutoPlay(){this.autoPlayTimer&&(clearInterval(this.autoPlayTimer),this.autoPlayTimer=null),this.autoPlayTimeout&&(clearTimeout(this.autoPlayTimeout),this.autoPlayTimeout=null)}_scheduleNextPage(){this.stopAutoPlay();const t=100/(this.autoPlayDuration/Dt.PROGRESS_UPDATE_INTERVAL);this.autoPlayTimer=setInterval(()=>{this.progressPercentage=Math.min(100,this.progressPercentage+t)},Dt.PROGRESS_UPDATE_INTERVAL),this.autoPlayTimeout=setTimeout(()=>{this.isPaused||(this.nextPage(),this.startAutoPlay())},this.autoPlayDuration)}nextPage(){this.currentPage=(this.currentPage+1)%this.totalPages,this.progressPercentage=0,this.stopAutoPlay(),this.requestUpdate(),this.play()}previousPage(){this.currentPage=(this.currentPage-1+this.totalPages)%this.totalPages,this.progressPercentage=0,this.stopAutoPlay(),this.requestUpdate(),this.play()}goToPage(t){t>=0&&t<this.totalPages&&t!==this.currentPage&&(this.currentPage=t,this.progressPercentage=0,this.stopAutoPlay(),this.requestUpdate(),this.play())}_handleKeydown(t){"ArrowRight"===t.key?(t.preventDefault(),this.nextPage(),this.pause()):"ArrowLeft"===t.key&&(t.preventDefault(),this.previousPage(),this.pause())}_handleTouchStart(t){t.changedTouches&&t.changedTouches.length>0&&(this.touchStartX=t.changedTouches[0].screenX)}_handleTouchEnd(t){t.changedTouches&&t.changedTouches.length>0&&(this.touchEndX=t.changedTouches[0].screenX,this._handleSwipe())}_handleSwipe(){if(null===this.touchStartX||null===this.touchEndX)return;const t=this.touchStartX-this.touchEndX;Math.abs(t)>Dt.SWIPE_THRESHOLD&&(t>0?(this.nextPage(),this.pause()):(this.previousPage(),this.pause()))}render(){return D`
|
|
2522
2846
|
<div
|
|
2523
2847
|
class="carousel-container"
|
|
2524
2848
|
role="region"
|
|
@@ -2566,4 +2890,4 @@
|
|
|
2566
2890
|
</div>
|
|
2567
2891
|
`:""}
|
|
2568
2892
|
</div>
|
|
2569
|
-
`}}customElements.get("cfa-carousel")||customElements.define("cfa-carousel",
|
|
2893
|
+
`}}customElements.get("cfa-carousel")||customElements.define("cfa-carousel",Dt)})();
|