@cfpb/cfpb-design-system 4.4.0 → 5.0.0

package/src/elements/cfpb-select/index.js

@@ -1,9 +1,9 @@
-import { html, LitElement, css, unsafeCSS, nothing } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import styles from './cfpb-select.component.scss';
-import expandIcon from '../../components/cfpb-icons/icons/down.svg';
-import collapseIcon from '../../components/cfpb-icons/icons/up.svg';
+import expandIcon from '../../components/cfpb-icons/icons/down.svg?raw';
+import collapseIcon from '../../components/cfpb-icons/icons/up.svg?raw';
 import { CfpbFormSearchInput } from '../cfpb-form-search-input';
 import { SearchService } from '../cfpb-utilities/search-service.js';
 import { MaxHeightTransition } from '../../utilities/transition/max-height-transition';
@@ -20,9 +20,7 @@ import { MultipleSelectEventProxy } from './multiple-select-event-proxy.js';
  * @slot - The main content for the select.
  */
 export class CfpbSelect extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   #eventProxy;
   #flyoutMenu;

package/src/elements/cfpb-tag-filter/index.js

@@ -1,7 +1,7 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import styles from './cfpb-tag-filter.component.scss';
-import icon from '../../components/cfpb-icons/icons/error.svg';
+import icon from '../../components/cfpb-icons/icons/error.svg?raw';
 
 /**
  *
@@ -9,9 +9,7 @@ import icon from '../../components/cfpb-icons/icons/error.svg';
  * @slot - The content for the filter tag.
  */
 export class CfpbTagFilter extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {string} for - Associate the label with an ID elsewhere.

package/src/elements/cfpb-tag-group/index.js

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import styles from './cfpb-tag-group.component.scss';
 import { parseChildData } from '../cfpb-utilities/parse-child-data';
 
@@ -12,14 +12,12 @@ const SUPPORTED_TAG_LIST = ['CFPB-TAG-FILTER', 'CFPB-TAG-TOPIC'];
  *   The tag group has a list of tags in the lightDOM that gets re-written
  *   inside an unordered list in the shadowDOM so that it is read out
  *   as a list of items in VoiceOver.
- * @attribute {string} lang - The element's language.
- * @fires addtag - A tag was added to the group.
- * @fires removetag - A tag was removed from the group.
+ * @fires CfpbTagGroup#event:"tag-added" - A tag was added to the group.
+ * @fires CfpbTagGroup#event:"tag-click" - A tag was clicked.
+ * @fires CfpbTagGroup#event:"tag-removed" - A tag was removed to the group.
  */
 export class CfpbTagGroup extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {string} childData - Structure data to create child components.
@@ -200,7 +198,7 @@ export class CfpbTagGroup extends LitElement {
 
   /**
    * Add a tag to the light and dark DOM.
-   * @param {*} tag - The tag to add.
+   * @param {HTMLElement} tag - The tag to add.
    * @param {number} index - The position at which to add the tag.
    * @returns {boolean} false if the tag is already in the light DOM.
    */
@@ -215,11 +213,12 @@ export class CfpbTagGroup extends LitElement {
     this.#insertIntoShadowDom(tag, index);
 
     this.#refreshTagList();
+    return true;
   }
 
   /**
    * Add a tag to the light DOM.
-   * @param {*} tag - The tag to add.
+   * @param {HTMLElement} tag - The tag to add.
    * @param {number} index - The position at which to add the tag.
    */
   #insertIntoLightDom(tag, index) {
@@ -232,7 +231,7 @@ export class CfpbTagGroup extends LitElement {
 
   /**
    * Add a tag to the shadow DOM.
-   * @param {*} tag - The tag to add.
+   * @param {HTMLElement} tag - The tag to add.
    * @param {number} index - The position at which to add the tag.
    */
   #insertIntoShadowDom(tag, index) {
@@ -275,7 +274,7 @@ export class CfpbTagGroup extends LitElement {
   }
 
   /**
-   * @param {*} tag - The tag to add.
+   * @param {HTMLElement} tag - The tag to add.
    * @returns {string} A unique ID.
    */
   #tagIdentifier(tag) {
@@ -285,7 +284,7 @@ export class CfpbTagGroup extends LitElement {
   /**
    * Remove a filter tag from the light DOM.
    * This is private because it's called by the mutation observer.
-   * @param {*} tag - The tag to remove.
+   * @param {HTMLElement} tag - The tag to remove.
    * @returns {boolean} false if the wrapped tag was not found.
    */
   #removeTagNode(tag) {
@@ -324,11 +323,12 @@ export class CfpbTagGroup extends LitElement {
 
     this.#refreshTagList();
     this.focus();
+    return true;
   }
 
   /**
    * Remove a filter tag from the light and dark DOM.
-   * @param {*} tag - The tag to remove.
+   * @param {HTMLElement} tag - The tag to remove.
    */
   removeTag(tag) {
     // Support passing in either light DOM <tag> or shadow DOM <li> if needed
@@ -341,18 +341,18 @@ export class CfpbTagGroup extends LitElement {
 
   /**
    * Get light and dark DOM.
-   * @param {Node} node - The tag to remove.
-   * @returns {Node|null} The tag node.
+   * @param {HTMLElement} tag - The tag to remove.
+   * @returns {HTMLElement|null} The tag node.
    */
-  #getLightDomTag(node) {
+  #getLightDomTag(tag) {
     // If node is a wrapped shadow DOM <li>, get the orignal tag inside it.
-    if (node.tagName === 'LI' && node.shadowRoot) {
+    if (tag.tagName === 'LI' && tag.shadowRoot) {
       // unlikely scenario if you don't expose shadow nodes externally.
-      return node.querySelector('cfpb-tag-filter');
+      return tag.querySelector('cfpb-tag-filter');
     }
 
     // If node is already a light DOM tag or child <cfpb-tag-group>, return it.
-    if (this.contains(node)) return node;
+    if (this.contains(tag)) return tag;
 
     return null;
   }

package/src/elements/cfpb-tag-topic/index.js

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import styles from './cfpb-tag-topic.component.scss';
 
 /**
@@ -7,9 +7,7 @@ import styles from './cfpb-tag-topic.component.scss';
  * @slot - The content for the topic tag.
  */
 export class CfpbTagTopic extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {string} href - href attribute, if this is a topic link.

package/src/elements/cfpb-tagline/cfpb-tagline.component.scss

@@ -0,0 +1,33 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+
+:host {
+  .a-tagline {
+    font-size: math.div(12px, $base-font-size-px) + rem;
+
+    display: grid;
+    grid-template-columns: 22px 1fr;
+    column-gap: 10px;
+
+    &__text {
+      // Needed for browsers with legacy/no grid support (e.g. IE11).
+      display: inline-block;
+    }
+
+    & cfpb-flag-usa {
+      margin-top: 1px;
+    }
+
+    &--large {
+      font-size: math.div(16px, $base-font-size-px) + rem;
+
+      & cfpb-flag-usa {
+        margin-top: 4px;
+      }
+    }
+  }
+
+  .u-nowrap {
+    white-space: nowrap;
+  }
+}

package/src/elements/cfpb-tagline/index.js

@@ -0,0 +1,51 @@
+import { html, LitElement } from 'lit';
+import { CfpbFlagUsa } from '../cfpb-flag-usa';
+import styles from './cfpb-tagline.component.scss';
+
+/**
+ * @element cfpb-icon-text
+ * @slot - The main content for the tagline.
+ */
+export class CfpbTagline extends LitElement {
+  static styles = styles;
+
+  /**
+   * @property {boolean} isLarge - Whether to use the larger tagline appearance.
+   * @returns {object} The map of properties.
+   */
+  static properties = {
+    isLarge: { type: Boolean, reflect: true },
+  };
+
+  constructor() {
+    super();
+    this.isLarge = false;
+  }
+
+  render() {
+    const baseClasses = ['a-tagline'];
+    if (this.isLarge) baseClasses.push('a-tagline--large');
+
+    return html`
+      <div
+        class="${baseClasses.join(' ')}"
+        aria-label="Official website of the United States government"
+      >
+        <cfpb-flag-usa></cfpb-flag-usa>
+        <div class="a-tagline__text">
+          <slot>
+            An official website of the
+            <span class="u-nowrap">United States government</span>
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+
+  static init() {
+    CfpbFlagUsa.init();
+
+    globalThis.customElements.get('cfpb-tagline') ??
+      globalThis.customElements.define('cfpb-tagline', CfpbTagline);
+  }
+}

package/src/elements/cfpb-utilities/parse-child-data.js

@@ -4,7 +4,7 @@
  *   - JS arrays
  *   - JSON strings
  *   - JSON-like strings with single quotes
- * @param {Array | string} input - An array or JSON string.
+ * @param {Array|string} input - An array or JSON string.
  * @param {object} options - optional settings.
  * @param {boolean} options.allowSingleQuotes - default true.
  * @returns {Array|null} Parsed array/string, or null if invalid.
@@ -20,6 +20,7 @@ export function parseChildData(input, options = {}) {
   }
 
   if (typeof input !== 'string') {
+    // eslint-disable-next-line no-console
     console.error('childData must be a string or array.');
     return null;
   }
@@ -38,12 +39,14 @@ export function parseChildData(input, options = {}) {
     const parsed = JSON.parse(text);
 
     if (!Array.isArray(parsed)) {
+      // eslint-disable-next-line no-console
       console.error('childData JSON must parse to an array.');
       return null;
     }
 
     return parsed;
   } catch (err) {
+    // eslint-disable-next-line no-console
     console.error('Failed to parse childData JSON:', err);
     return null;
   }

package/src/elements/index.js

@@ -13,6 +13,7 @@ export * from './cfpb-list';
 export * from './cfpb-list-item';
 export * from './cfpb-form-search';
 export * from './cfpb-form-search-input';
+export * from './cfpb-tagline';
 export * from './cfpb-tag-filter';
 export * from './cfpb-tag-topic';
 export * from './cfpb-tag-group';

package/src/index.scss

@@ -1,4 +1,3 @@
-
 // Buttons.
 @forward 'components/cfpb-buttons/vars';
 @forward 'components/cfpb-buttons/button';
@@ -70,7 +69,7 @@
 // cfpb-button
 @forward 'elements/cfpb-button/cfpb-button';
 @forward 'elements/cfpb-button/cfpb-button-group';
-@forward 'elements/cfpb-button/cfpb-button-link'; 
+@forward 'elements/cfpb-button/cfpb-button-link';
 @forward 'elements/cfpb-button/cfpb-button.component';
 @forward 'elements/cfpb-button/vars';
 

package/src/utilities/atomic-helpers.js

@@ -100,11 +100,11 @@ function setInitFlag(element) {
 
 /**
  * @param {string} selector - Selector to search for in the document.
- * @param {Function} Constructor - A constructor function.
+ * @param {new (...args: unknown[]) => object} Constructor - A constructor function.
  * @param {HTMLElement} [scope] - A dom node in which to query the selector.
  *   If not supplied, it defaults to the `document`.
  * @param {object} config - Configuration will be provided to the Constructor's init()
- * @returns {Array} List of instances that were instantiated.
+ * @returns {Array<object>} List of instances that were instantiated.
  */
 function instantiateAll(selector, Constructor, scope, config = {}) {
   const base = scope || document;

package/src/utilities/behavior/behavior.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {(options: unknown) => void} EventCallback
+ */
+
 /* ==========================================================================
    Dom Behaviors
    Behaviors are functionality that can be shared between different pieces
@@ -33,13 +37,16 @@ import { contains } from '../data-hook.js';
  */
 function _findElements(behaviorSelector, baseElement) {
   baseElement = baseElement || document;
+  // eslint-disable-next-line no-useless-assignment
   let behaviorElements = [];
 
   try {
     behaviorElements = baseElement.querySelectorAll(behaviorSelector);
   } catch (error) {
     const msg = `${behaviorSelector} not found in DOM! ${error}`;
-    throw new Error(msg);
+    throw new Error(msg, {
+      cause: error,
+    });
   }
 
   if (
@@ -56,7 +63,7 @@ function _findElements(behaviorSelector, baseElement) {
  * @param {( string|HTMLElement|Array|NodeList )} behaviorElement - Used to
  *   query dom for elements.
  * @param {string} event - Event type to add to element.
- * @param {Function} eventHandler - Callback for event.
+ * @param {EventCallback} eventHandler - Callback for event.
  * @param {HTMLElement} baseElement - Containing element
  *   for the behavior element.
  * @returns {Array|NodeList} if it exists in the dom, null otherwise.

package/src/utilities/behavior/flyout-menu.js

@@ -333,8 +333,8 @@ function FlyoutMenu(element, autoHideContent = true) {
   /**
    * Set the transition that runs when this flyout is expanded/collapsed.
    * @param {BaseTransition} transition - A transition object.
-   * @param {Function} collapseMethod - The collapse method to call on the transition.
-   * @param {Function} expandMethod - The expand method to call on the transition.
+   * @param {()=>void} collapseMethod - The collapse method to call on the transition.
+   * @param {()=>void} expandMethod - The expand method to call on the transition.
    */
   function setTransition(transition, collapseMethod, expandMethod) {
     _transition = transition;
@@ -356,12 +356,10 @@ function FlyoutMenu(element, autoHideContent = true) {
       _transition.remove();
     }
 
-    let UNDEFINED;
+    _transition = undefined;
 
-    _transition = UNDEFINED;
-
-    _expandTransitionMethod = UNDEFINED;
-    _collapseTransitionMethod = UNDEFINED;
+    _expandTransitionMethod = undefined;
+    _collapseTransitionMethod = undefined;
   }
 
   /**

package/src/utilities/event-observer.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {(options: unknown) => void} EventCallback
+ */
+
 /**
  * EventObserver
  * @class
@@ -12,7 +16,7 @@ function EventObserver() {
   /**
    * Register an event listener.
    * @param {string} event - The event name to listen for.
-   * @param {Function} callback - The function called when the event has fired.
+   * @param {EventCallback} callback - The function called when the event has fired.
    * @returns {object} The instance this EventObserver instance is decorating.
    */
   function addEventListener(event, callback) {
@@ -29,7 +33,7 @@ function EventObserver() {
    * Remove an added event listener.
    * Must match a call made to addEventListener.
    * @param {string} event - The event name to remove.
-   * @param {Function} callback - The function attached to the event.
+   * @param {EventCallback} callback - The function attached to the event.
    * @returns {object} The instance this EventObserver instance is decorating.
    */
   function removeEventListener(event, callback) {
@@ -49,7 +53,7 @@ function EventObserver() {
   /**
    * Broadcast an event.
    * @param {string} event - The type of event to broadcast.
-   * @param {object} options - The event object to pass to the event handler.
+   * @param {object} [options] - The event object to pass to the event handler.
    * @returns {object} The instance this EventObserver instance is decorating.
    */
   function dispatchEvent(event, options) {

package/src/utilities/transition/alpha-transition.js

@@ -21,7 +21,7 @@ function AlphaTransition(element) {
   const _baseTransition = new BaseTransition(element, CLASSES, this);
 
   /**
-   * @param {Function} initialClass - The initial state for this transition.
+   * @param {string} initialClass - The initial CSS class to set the state for this transition.
    * @returns {AlphaTransition} An instance.
    */
   function init(initialClass) {

package/src/utilities/transition/base-transition.js

@@ -202,7 +202,7 @@ function BaseTransition(element, classes, child) {
   }
 
   /**
-   * @param {Function} initialClass - The initial state for this transition.
+   * @param {string} initialClass - The initial CSS class to set the state for this transition.
    * @returns {BaseTransition} An instance.
    */
   function init(initialClass) {

package/src/utilities/transition/max-height-transition.js

@@ -68,7 +68,7 @@ function MaxHeightTransition(element) {
   }
 
   /**
-   * @param {Function} initialClass - The initial state for this transition.
+   * @param {string} initialClass - The initial CSS class to set the state for this transition.
    * @returns {MaxHeightTransition} An instance.
    */
   function init(initialClass) {

package/src/utilities/transition/move-transition.js

@@ -25,7 +25,7 @@ function MoveTransition(element) {
   const _baseTransition = new BaseTransition(element, CLASSES, this);
 
   /**
-   * @param {Function} initialClass - The initial state for this transition.
+   * @param {string} initialClass - The initial CSS class to set the state for this transition.
    * @returns {MoveTransition} An instance.
    */
   function init(initialClass) {

package/src/utilities/type-checkers.js

@@ -17,7 +17,7 @@ const _toString = Object.prototype.toString;
  * @kind function
  * @description
  * Determines if a reference is undefined.
- * @param {*} value - Reference to check.
+ * @param {unknown} value - Reference to check.
  * @returns {boolean} True if `value` is undefined.
  */
 function isUndefined(value) {
@@ -29,7 +29,7 @@ function isUndefined(value) {
  * @kind function
  * @description
  * Determines if a reference is defined.
- * @param {*} value - Reference to check.
+ * @param {unknown} value - Reference to check.
  * @returns {boolean} True if `value` is defined.
  */
 function isDefined(value) {
@@ -43,7 +43,7 @@ function isDefined(value) {
  * Determines if a reference is an `Object`.
  * Unlike `typeof` in JavaScript, `null`s are not
  * considered to be objects. Note that JavaScript arrays are objects.
- * @param {*} value - Reference to check.
+ * @param {unknown} value - Reference to check.
  * @returns {boolean} True if `value` is an `Object` but not `null`.
  */
 function isObject(value) {
@@ -56,7 +56,7 @@ function isObject(value) {
  * @kind function
  * @description
  * Determines if a reference is a `String`.
- * @param {*} value - Reference to check.
+ * @param {unknown} value - Reference to check.
  * @returns {boolean} True if `value` is a `String`.
  */
 function isString(value) {
@@ -75,7 +75,7 @@ function isString(value) {
  * [`isFinite'](https://developer.mozilla.org/en-US/docs/Web/JavaScript/
  *                      Reference/Global_Objects/isFinite)
  * method.
- * @param {*} value - Reference to check.
+ * @param {unknown} value - Reference to check.
  * @returns {boolean} True if `value` is a `Number`.
  */
 function isNumber(value) {
@@ -87,7 +87,7 @@ function isNumber(value) {
  * @kind function
  * @description
  * Determines if a value is a date.
- * @param {*} value - Reference to check.
+ * @param {unknown} value - Reference to check.
  * @returns {boolean} True if `value` is a `Date`.
  */
 function isDate(value) {
@@ -99,7 +99,7 @@ function isDate(value) {
  * @kind function
  * @description
  * Determines if a reference is an `Array`.
- * @param {*} value - Reference to check.
+ * @param {unknown} value - Reference to check.
  * @returns {boolean} True if `value` is an `Array`.
  */
 const isArray =
@@ -113,7 +113,7 @@ const isArray =
  * @kind function
  * @description
  * Determines if a reference is a `Function`.
- * @param {*} value - Reference to check.
+ * @param {unknown} value - Reference to check.
  * @returns {boolean} True if `value` is a `Function`.
  */
 function isFunction(value) {
@@ -127,7 +127,7 @@ function isFunction(value) {
  * @kind function
  * @description
  * Determines if a reference is empty.
- * @param {*} value - Reference to check.
+ * @param {unknown} value - Reference to check.
  * @returns {boolean} True if `value` is empty.
  */
 function isEmpty(value) {

package/src/utilities/type-checkers.spec.js

@@ -29,11 +29,10 @@ const anObject = {
 };
 
 const anArray = [1, 2, 3];
-let UNDEFINED;
 
 describe('TypeCheckers isUndefined', () => {
   it('should identify undefined variables', () => {
-    expect(isUndefined(UNDEFINED)).toBe(true);
+    expect(isUndefined(undefined)).toBe(true);
   });
 
   it('should NOT return true for blank variables', () => {
@@ -55,7 +54,7 @@ describe('TypeCheckers isDefined', () => {
   });
 
   it('should NOT return true for undefined variables', () => {
-    expect(isDefined(UNDEFINED)).toBe(false);
+    expect(isDefined(undefined)).toBe(false);
   });
 });
 

package/dist/abstracts/index.js

@@ -1,2 +0,0 @@
-(()=>{var m={bpXS:{min:0,max:600},bpSM:{min:601,max:900},bpMED:{min:901,max:1020},bpLG:{min:1021,max:1200},bpXL:{min:1201}};})();
-//# sourceMappingURL=index.js.map

package/dist/abstracts/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../packages/cfpb-design-system/src/abstracts/vars-breakpoints.js"],
-  "sourcesContent": ["/* ==========================================================================\n   Design System\n   Breakpoint JavaScript variables.\n   All values are pixel based.\n\n   NOTE: If any of the values in this file are adjusted,\n         they need to be adjusted in vars-breakpoints.scss as well.\n   ========================================================================== */\n\nexport const varsBreakpoints = {\n  bpXS: {\n    min: 0,\n    max: 600,\n  },\n  bpSM: {\n    min: 601,\n    max: 900,\n  },\n  bpMED: {\n    min: 901,\n    max: 1020,\n  },\n  bpLG: {\n    min: 1021,\n    max: 1200,\n  },\n  bpXL: {\n    min: 1201,\n  },\n};\n"],
-  "mappings": "MASO,IAAMA,EAAkB,CAC7B,KAAM,CACJ,IAAK,EACL,IAAK,GACP,EACA,KAAM,CACJ,IAAK,IACL,IAAK,GACP,EACA,MAAO,CACL,IAAK,IACL,IAAK,IACP,EACA,KAAM,CACJ,IAAK,KACL,IAAK,IACP,EACA,KAAM,CACJ,IAAK,IACP,CACF",
-  "names": ["varsBreakpoints"]
-}

package/dist/base/index.css

@@ -1,3 +0,0 @@
-@charset "UTF-8";html{font-family:sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:initial;height:0}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201c" "\201d" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sup{top:-.5em}sub{bottom:-.25em}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{appearance:textfield;box-sizing:initial}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}:root{--font-adjust-base:.517;--font-adjust-step:.0054;--font-adjust-h1:calc(var(--font-size-adjust-base) + var(--font-adjust-step)*5);--font-adjust-h2:calc(var(--font-size-adjust-base) + var(--font-adjust-step)*4);--font-adjust-h3:calc(var(--font-size-adjust-base) + var(--font-adjust-step)*3);--font-adjust-h4:calc(var(--font-size-adjust-base) + var(--font-adjust-step)*2);--font-adjust-h5:calc(var(--font-size-adjust-base) + var(--font-adjust-step)*1);--font-adjust-h6:var(--font-adjust-base);--font-adjust-body:var(--font-adjust-base);--input-text-default:var(--black);--input-text-disabled-default:var(--gray-dark);--input-text-placeholder-default:var(--gray-dark);--input-border-default:var(--gray-60);--input-border-disabled:var(--gray-60);--input-border-success:var(--green);--input-border-warning:var(--gold);--input-border-error:var(--red);--input-border-hover-default:var(--pacific);--input-border-focus-default:var(--pacific);--input-bg-default:var(--white);--input-bg-disabled-default:var(--gray-10);--form-alert-icon-color-default:var(--gray);--form-alert-icon-color-success:var(--green);--form-alert-icon-color-warning:var(--gold);--form-alert-icon-color-error:var(--red);--select-border-default:var(--gray-60);--select-border-width-default:1px;--select-border-error:var(--red);--select-border-width-error:2px;--select-border-hover-default:var(--pacific);--select-border-focus-default:var(--pacific);--select-bg-disabled-default:var(--gray-10);--select-icon-bg-default:var(--gray-10);--select-text-disabled-default:var(--gray-dark);--choice-border-default:var(--gray-60);--choice-border-disabled:var(--gray-60);--choice-border-success:var(--green);--choice-border-warning:var(--gold);--choice-border-error:var(--red);--choice-border-hover-default:var(--pacific);--choice-border-focus-default:var(--pacific);--choice-outline-focus-default:var(--pacific);--choice-bg-default:var(--white);--choice-bg-disabled:var(--gray-10);--choice-bg-selected-default:var(--pacific);--choice-bg-selected-disabled:var(--gray-40);--choice-bg-selected-focus-default:var(--pacific);--choice-label-disabled-default:var(--gray-dark)}body{color:var(--black);font-family:var(--font-stack);font-size:100%;font-size-adjust:var(--font-adjust-body);line-height:1.375;-webkit-font-smoothing:antialiased}button,input,select,textarea{font-family:var(--font-stack);font-size-adjust:var(--font-adjust-body);line-height:1.1875}input[type=date]{display:revert;min-height:35px;min-width:100px;padding-bottom:0;padding-top:0}input[type=date].a-text-input--full{min-width:100%}hr{border:none;border-top:1px solid var(--gray-40)}b,strong{font-weight:600}h1,h2,h3,h4,h5,h6{margin-top:0}.h1,h1{font-size:2.125em;font-size-adjust:var(--font-adjust-h1);font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:.4411764706em;text-transform:inherit}blockquote+.h1,blockquote+h1,dl+.h1,dl+h1,figure+.h1,figure+h1,img+.h1,img+h1,ol+.h1,ol+h1,p+.h1,p+h1,table+.h1,table+h1,ul+.h1,ul+h1{margin-top:1.7647058824em}@media only screen and (max-width:37.5em){.h2+.h1,.h2+h1,.h3+.h1,.h3+h1,.h4+.h1,.h4+h1,.h5+.h1,.h5+h1,.h6+.h1,.h6+h1,h2+.h1,h2+h1,h3+.h1,h3+h1,h4+.h1,h4+h1,h5+.h1,h5+h1,h6+.h1,h6+h1{margin-top:1.1538461538em}.h1,h1{font-size:1.625em;font-size-adjust:var(--font-adjust-h2);font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:.5769230769em;text-transform:inherit}blockquote+.h1,blockquote+h1,dl+.h1,dl+h1,figure+.h1,figure+h1,img+.h1,img+h1,ol+.h1,ol+h1,p+.h1,p+h1,table+.h1,table+h1,ul+.h1,ul+h1{margin-top:1.7307692308em}.h1+.h1,.h1+h1,.h3+.h1,.h3+h1,.h4+.h1,.h4+h1,.h5+.h1,.h5+h1,.h6+.h1,.h6+h1,h1+.h1,h1+h1,h3+.h1,h3+h1,h4+.h1,h4+h1,h5+.h1,h5+h1,h6+.h1,h6+h1{margin-top:1.1538461538em}}.h2,h2{font-size:1.625em;font-size-adjust:var(--font-adjust-h2);font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:.5769230769em;text-transform:inherit}blockquote+.h2,blockquote+h2,dl+.h2,dl+h2,figure+.h2,figure+h2,img+.h2,img+h2,ol+.h2,ol+h2,p+.h2,p+h2,table+.h2,table+h2,ul+.h2,ul+h2{margin-top:1.7307692308em}.h1+.h2,.h1+h2,.h3+.h2,.h3+h2,.h4+.h2,.h4+h2,.h5+.h2,.h5+h2,.h6+.h2,.h6+h2,h1+.h2,h1+h2,h3+.h2,h3+h2,h4+.h2,h4+h2,h5+.h2,h5+h2,h6+.h2,h6+h2{margin-top:1.1538461538em}@media only screen and (max-width:37.5em){blockquote+.h2,blockquote+h2,dl+.h2,dl+h2,figure+.h2,figure+h2,img+.h2,img+h2,ol+.h2,ol+h2,p+.h2,p+h2,table+.h2,table+h2,ul+.h2,ul+h2{margin-top:1.3636363636em}.h2,h2{font-size:1.375em;font-size-adjust:var(--font-adjust-h3);font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:.6818181818em;text-transform:inherit}.h1+.h2,.h1+h2,.h2+.h2,.h2+h2,.h4+.h2,.h4+h2,.h5+.h2,.h5+h2,.h6+.h2,.h6+h2,blockquote+.h2,blockquote+h2,dl+.h2,dl+h2,figure+.h2,figure+h2,h1+.h2,h1+h2,h2+.h2,h2+h2,h4+.h2,h4+h2,h5+.h2,h5+h2,h6+.h2,h6+h2,img+.h2,img+h2,ol+.h2,ol+h2,p+.h2,p+h2,table+.h2,table+h2,ul+.h2,ul+h2{margin-top:1.3636363636em}}.h3,h3{font-size:1.375em;font-size-adjust:var(--font-adjust-h3);font-weight:400;letter-spacing:inherit;line-height:1.25;margin-bottom:.6818181818em;text-transform:inherit}.h1+.h3,.h1+h3,.h2+.h3,.h2+h3,.h4+.h3,.h4+h3,.h5+.h3,.h5+h3,.h6+.h3,.h6+h3,blockquote+.h3,blockquote+h3,dl+.h3,dl+h3,figure+.h3,figure+h3,h1+.h3,h1+h3,h2+.h3,h2+h3,h4+.h3,h4+h3,h5+.h3,h5+h3,h6+.h3,h6+h3,img+.h3,img+h3,ol+.h3,ol+h3,p+.h3,p+h3,table+.h3,table+h3,ul+.h3,ul+h3{margin-top:1.3636363636em}@media only screen and (max-width:37.5em){.h3,h3{font-size:1.125em;font-size-adjust:var(--font-adjust-h4);font-weight:400;letter-spacing:inherit;line-height:1.25;margin-bottom:.8333333333em;text-transform:inherit}.h1+.h3,.h1+h3,.h2+.h3,.h2+h3,.h3+.h3,.h3+h3,.h5+.h3,.h5+h3,.h6+.h3,.h6+h3,blockquote+.h3,blockquote+h3,dl+.h3,dl+h3,figure+.h3,figure+h3,h1+.h3,h1+h3,h2+.h3,h2+h3,h3+.h3,h3+h3,h5+.h3,h5+h3,h6+.h3,h6+h3,img+.h3,img+h3,ol+.h3,ol+h3,p+.h3,p+h3,table+.h3,table+h3,ul+.h3,ul+h3{margin-top:1.6666666667em}}.h4,h4{font-size:1.125em;font-size-adjust:var(--font-adjust-h4);font-weight:500;letter-spacing:inherit;line-height:1.25;margin-bottom:.8333333333em;text-transform:inherit}.h1+.h4,.h1+h4,.h2+.h4,.h2+h4,.h3+.h4,.h3+h4,.h5+.h4,.h5+h4,.h6+.h4,.h6+h4,blockquote+.h4,blockquote+h4,dl+.h4,dl+h4,figure+.h4,figure+h4,h1+.h4,h1+h4,h2+.h4,h2+h4,h3+.h4,h3+h4,h5+.h4,h5+h4,h6+.h4,h6+h4,img+.h4,img+h4,ol+.h4,ol+h4,p+.h4,p+h4,table+.h4,table+h4,ul+.h4,ul+h4{margin-top:1.6666666667em}@media only screen and (max-width:37.5em){.h4,h4{font-size:1em;line-height:1.125;margin-bottom:.625em}}.h5,h5{font-size:.875em;font-size-adjust:var(--font-adjust-h5);font-weight:600;letter-spacing:1px;line-height:1.25;margin-bottom:1.0714285714em;text-transform:uppercase}.h1+.h5,.h1+h5,.h2+.h5,.h2+h5,.h3+.h5,.h3+h5,.h4+.h5,.h4+h5,.h6+.h5,.h6+h5,blockquote+.h5,blockquote+h5,dl+.h5,dl+h5,figure+.h5,figure+h5,h1+.h5,h1+h5,h2+.h5,h2+h5,h3+.h5,h3+h5,h4+.h5,h4+h5,h6+.h5,h6+h5,img+.h5,img+h5,ol+.h5,ol+h5,p+.h5,p+h5,table+.h5,table+h5,ul+.h5,ul+h5{margin-top:2.1428571429em}.h6,h6{font-size:.75em;font-size-adjust:var(--font-adjust-h6);font-weight:600;letter-spacing:1px;line-height:1.25;margin-bottom:1.25em;text-transform:uppercase}.h1+.h6,.h1+h6,.h2+.h6,.h2+h6,.h3+.h6,.h3+h6,.h4+.h6,.h4+h6,.h5+.h6,.h5+h6,blockquote+.h6,blockquote+h6,dl+.h6,dl+h6,figure+.h6,figure+h6,h1+.h6,h1+h6,h2+.h6,h2+h6,h3+.h6,h3+h6,h4+.h6,h4+h6,h5+.h6,h5+h6,img+.h6,img+h6,ol+.h6,ol+h6,p+.h6,p+h6,table+.h6,table+h6,ul+.h6,ul+h6{margin-top:2.5em}.lead-paragraph{font-size:1.375em;font-size-adjust:var(--font-adjust-h3);font-weight:400;letter-spacing:inherit;line-height:1.25;margin-bottom:15px;margin-top:0;text-transform:inherit}@media only screen and (max-width:37.5em){.lead-paragraph{font-size:1.125em;font-size-adjust:var(--font-adjust-h4);font-weight:400;letter-spacing:inherit;line-height:1.25;text-transform:inherit}}.superheading{font-size:3em;font-weight:400;line-height:1.25;margin-bottom:.4166666667em}blockquote,dl,figure,ol,p,table,ul{margin-bottom:.9375em;margin-top:0}blockquote:last-child,dl:last-child,figure:last-child,ol:last-child,p:last-child,table:last-child,ul:last-child{margin-bottom:0}p+ol,p+ul{margin-top:-.3125em}ol ol,ol ul,ul ol,ul ul{margin-top:.5em}li{margin-bottom:.5em}li:last-child,nav li{margin-bottom:0}a{color:var(--pacific);text-decoration-color:var(--pacific);text-decoration-line:underline;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:4.5px}a.visited,a:visited{color:var(--teal);text-decoration-color:var(--teal)}a.hover,a:hover{color:var(--pacific-dark);text-decoration-color:var(--pacific-dark);text-decoration-style:solid}a.focus,a:focus{outline:thin dotted;outline-offset:1px}a.active,a:active{color:var(--navy);text-decoration-color:var(--navy);text-decoration-style:solid}nav a{text-decoration-line:none}ul{list-style:square;padding-left:1.125em}ul ul{list-style-type:circle}ol{padding-left:1.3125em}ol li:nth-last-child(n+10),ol li:nth-last-child(n+10)~li{margin-left:.5625rem}ol ol{list-style-type:lower-alpha}ol ol li{margin-left:0!important}ol ol ol{list-style-type:lower-roman}nav ol,nav ol ol,nav ul,nav ul ul{list-style:none;list-style-image:none}caption{margin-bottom:.625em;text-align:left}td,th{padding:.625em}thead td,thead th{background:var(--gray-5);color:var(--black);font-size:1em;padding:.7142857143em;vertical-align:top}tbody tr,thead{border-bottom:1px solid var(--gray)}th{font-weight:600;text-align:left}thead th .h2,thead th .h3,thead th .h4,thead th .h5,thead th .h6,thead th h2,thead th h3,thead th h4,thead th h5,thead th h6{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;text-transform:inherit}blockquote{margin-left:.9375em;margin-right:.9375em}@media only screen and (min-width:37.5625em){blockquote{margin-left:1.875em;margin-right:1.875em}}img{max-width:100%}figure{margin-left:0;margin-right:0}figure img{vertical-align:middle}code,pre{background:var(--gray-5);border-radius:4px;color:var(--black);font-family:Input Mono,Consolas,Monaco,Courier New,monospace}code{font-size:.8125em;padding:.2307692308em .2307692308em 0}pre{display:block;overflow-wrap:break-word;padding:.625em .9375em;white-space:pre-wrap}pre code{background-color:initial;padding:0}
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
-/*# sourceMappingURL=index.css.map */