@department-of-veterans-affairs/component-library 46.0.3 → 46.2.3
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/1185.app.bundle.js +1 -1
- package/dist/1185.app.bundle.js.LICENSE.txt +4 -4
- package/dist/1279.app.bundle.js +1 -1
- package/dist/1652.app.bundle.js +1 -1
- package/dist/2108.app.bundle.js +1 -1
- package/dist/2108.app.bundle.js.LICENSE.txt +4 -4
- package/dist/2305.app.bundle.js +1 -1
- package/dist/2305.app.bundle.js.LICENSE.txt +4 -4
- package/dist/2843.app.bundle.js +1 -1
- package/dist/3389.app.bundle.js +1 -1
- package/dist/3389.app.bundle.js.LICENSE.txt +4 -4
- package/dist/3476.app.bundle.js +1 -1
- package/dist/3476.app.bundle.js.LICENSE.txt +4 -4
- package/dist/3499.app.bundle.js +1 -1
- package/dist/360.app.bundle.js +1 -1
- package/dist/360.app.bundle.js.LICENSE.txt +4 -4
- package/dist/3661.app.bundle.js +1 -1
- package/dist/383.app.bundle.js +1 -1
- package/dist/383.app.bundle.js.LICENSE.txt +4 -4
- package/dist/4104.app.bundle.js +1 -1
- package/dist/4181.app.bundle.js +1 -1
- package/dist/4181.app.bundle.js.LICENSE.txt +4 -4
- package/dist/4317.app.bundle.js +1 -1
- package/dist/4317.app.bundle.js.LICENSE.txt +4 -4
- package/dist/4437.app.bundle.js +1 -1
- package/dist/4818.app.bundle.js +1 -1
- package/dist/4818.app.bundle.js.LICENSE.txt +4 -4
- package/dist/4846.app.bundle.js +1 -1
- package/dist/4859.app.bundle.js +1 -1
- package/dist/5154.app.bundle.js +1 -1
- package/dist/5232.app.bundle.js +1 -1
- package/dist/5254.app.bundle.js +1 -0
- package/dist/529.app.bundle.js +1 -1
- package/dist/529.app.bundle.js.LICENSE.txt +4 -4
- package/dist/5434.app.bundle.js +1 -1
- package/dist/5669.app.bundle.js +1 -1
- package/dist/5669.app.bundle.js.LICENSE.txt +4 -4
- package/dist/569.app.bundle.js +1 -1
- package/dist/569.app.bundle.js.LICENSE.txt +4 -4
- package/dist/6166.app.bundle.js +1 -1
- package/dist/6171.app.bundle.js +1 -1
- package/dist/6171.app.bundle.js.LICENSE.txt +4 -4
- package/dist/6205.app.bundle.js +1 -1
- package/dist/6205.app.bundle.js.LICENSE.txt +4 -4
- package/dist/6391.app.bundle.js +1 -1
- package/dist/6391.app.bundle.js.LICENSE.txt +4 -4
- package/dist/6569.app.bundle.js +1 -1
- package/dist/6569.app.bundle.js.LICENSE.txt +4 -4
- package/dist/6596.app.bundle.js +1 -1
- package/dist/6596.app.bundle.js.LICENSE.txt +4 -4
- package/dist/6734.app.bundle.js +1 -1
- package/dist/6874.app.bundle.js +1 -1
- package/dist/6998.app.bundle.js +1 -1
- package/dist/6998.app.bundle.js.LICENSE.txt +4 -4
- package/dist/7061.app.bundle.js +1 -0
- package/dist/7375.app.bundle.js +1 -1
- package/dist/7454.app.bundle.js +1 -1
- package/dist/7454.app.bundle.js.LICENSE.txt +4 -4
- package/dist/7485.app.bundle.js +2 -0
- package/dist/7485.app.bundle.js.LICENSE.txt +5 -0
- package/dist/753.app.bundle.js +1 -1
- package/dist/753.app.bundle.js.LICENSE.txt +4 -4
- package/dist/783.app.bundle.js +1 -1
- package/dist/8214.app.bundle.js +1 -1
- package/dist/8509.app.bundle.js +1 -1
- package/dist/8509.app.bundle.js.LICENSE.txt +4 -4
- package/dist/8716.app.bundle.js +1 -1
- package/dist/8716.app.bundle.js.LICENSE.txt +4 -4
- package/dist/876.app.bundle.js +1 -1
- package/dist/9262.app.bundle.js +1 -1
- package/dist/9262.app.bundle.js.LICENSE.txt +4 -4
- package/dist/934.app.bundle.js +1 -1
- package/dist/934.app.bundle.js.LICENSE.txt +4 -4
- package/dist/9370.app.bundle.js +1 -1
- package/dist/9370.app.bundle.js.LICENSE.txt +4 -4
- package/dist/9398.app.bundle.js +1 -1
- package/dist/9727.app.bundle.js +1 -1
- package/dist/9727.app.bundle.js.LICENSE.txt +4 -4
- package/dist/9893.app.bundle.js +1 -1
- package/dist/app.bundle.js +1 -1
- package/dist/components/date-utils.js +1 -1
- package/dist/components/index.d.ts +6 -0
- package/dist/components/index.js +1 -1
- package/dist/components/index2.js +1 -1
- package/dist/components/types/components.d.ts +447 -0
- package/dist/components/types/contacts.d.ts +105 -105
- package/dist/components/types/stencil-public-runtime.d.ts +49 -15
- package/dist/components/va-accordion-item.d.ts +2 -2
- package/dist/components/va-accordion-item.js +1 -1
- package/dist/components/va-accordion.d.ts +2 -2
- package/dist/components/va-accordion.js +1 -1
- package/dist/components/va-additional-info.d.ts +2 -2
- package/dist/components/va-additional-info.js +1 -1
- package/dist/components/va-alert-expandable.d.ts +2 -2
- package/dist/components/va-alert-expandable.js +1 -1
- package/dist/components/va-alert.d.ts +2 -2
- package/dist/components/va-alert2.js +1 -1
- package/dist/components/va-back-to-top.d.ts +2 -2
- package/dist/components/va-back-to-top.js +1 -1
- package/dist/components/va-banner.d.ts +2 -2
- package/dist/components/va-banner.js +1 -1
- package/dist/components/va-breadcrumbs.d.ts +2 -2
- package/dist/components/va-breadcrumbs.js +1 -1
- package/dist/components/va-button-icon.d.ts +2 -2
- package/dist/components/va-button-icon2.js +1 -1
- package/dist/components/va-button-pair.d.ts +2 -2
- package/dist/components/va-button-pair.js +1 -1
- package/dist/components/va-button.d.ts +2 -2
- package/dist/components/va-button2.js +1 -1
- package/dist/components/va-card.d.ts +2 -2
- package/dist/components/va-card2.js +1 -1
- package/dist/components/va-checkbox-group.d.ts +2 -2
- package/dist/components/va-checkbox-group.js +1 -1
- package/dist/components/va-checkbox.d.ts +2 -2
- package/dist/components/va-checkbox2.js +1 -1
- package/dist/components/va-crisis-line-modal.d.ts +2 -2
- package/dist/components/va-crisis-line-modal2.js +1 -1
- package/dist/components/va-date.d.ts +2 -2
- package/dist/components/va-date.js +1 -1
- package/dist/components/va-file-input-multiple.d.ts +2 -2
- package/dist/components/va-file-input-multiple.js +1 -1
- package/dist/components/va-file-input.d.ts +2 -2
- package/dist/components/va-file-input2.js +1 -1
- package/dist/components/va-header-minimal.d.ts +2 -2
- package/dist/components/va-header-minimal.js +1 -1
- package/dist/components/va-icon.d.ts +2 -2
- package/dist/components/va-icon2.js +1 -1
- package/dist/components/va-link-action.d.ts +2 -2
- package/dist/components/va-link-action.js +1 -1
- package/dist/components/va-link.d.ts +2 -2
- package/dist/components/va-link2.js +1 -1
- package/dist/components/va-loading-indicator.d.ts +2 -2
- package/dist/components/va-loading-indicator.js +1 -1
- package/dist/components/va-maintenance-banner.d.ts +2 -2
- package/dist/components/va-maintenance-banner.js +1 -1
- package/dist/components/va-memorable-date.d.ts +2 -2
- package/dist/components/va-memorable-date.js +1 -1
- package/dist/components/va-minimal-footer.d.ts +2 -2
- package/dist/components/va-minimal-footer.js +1 -1
- package/dist/components/va-modal.d.ts +2 -2
- package/dist/components/va-modal2.js +1 -1
- package/dist/components/va-need-help.d.ts +2 -2
- package/dist/components/va-need-help.js +1 -1
- package/dist/components/va-notification.d.ts +2 -2
- package/dist/components/va-notification.js +1 -1
- package/dist/components/va-official-gov-banner.d.ts +2 -2
- package/dist/components/va-official-gov-banner2.js +1 -1
- package/dist/components/va-omb-info.d.ts +2 -2
- package/dist/components/va-omb-info.js +1 -1
- package/dist/components/va-on-this-page.d.ts +2 -2
- package/dist/components/va-on-this-page.js +1 -1
- package/dist/components/va-pagination.d.ts +2 -2
- package/dist/components/va-pagination.js +1 -1
- package/dist/components/va-privacy-agreement.d.ts +2 -2
- package/dist/components/va-privacy-agreement.js +1 -1
- package/dist/components/va-process-list-item.d.ts +2 -2
- package/dist/components/va-process-list-item.js +1 -1
- package/dist/components/va-process-list.d.ts +2 -2
- package/dist/components/va-process-list.js +1 -1
- package/dist/components/va-progress-bar.d.ts +2 -2
- package/dist/components/va-progress-bar.js +1 -1
- package/dist/components/va-promo-banner.d.ts +2 -2
- package/dist/components/va-promo-banner.js +1 -1
- package/dist/components/va-radio-option.d.ts +2 -2
- package/dist/components/va-radio-option.js +1 -1
- package/dist/components/va-radio.d.ts +2 -2
- package/dist/components/va-radio.js +1 -1
- package/dist/components/va-search-input.d.ts +2 -2
- package/dist/components/va-search-input.js +1 -1
- package/dist/components/va-segmented-progress-bar.d.ts +2 -2
- package/dist/components/va-segmented-progress-bar.js +1 -1
- package/dist/components/va-select.d.ts +2 -2
- package/dist/components/va-select2.js +1 -1
- package/dist/components/va-statement-of-truth.d.ts +2 -2
- package/dist/components/va-statement-of-truth.js +1 -1
- package/dist/components/va-summary-box.d.ts +2 -2
- package/dist/components/va-summary-box.js +1 -1
- package/dist/components/va-table-inner.d.ts +2 -2
- package/dist/components/va-table-inner2.js +1 -1
- package/dist/components/va-table-row.d.ts +2 -2
- package/dist/components/va-table-row.js +1 -1
- package/dist/components/va-table.d.ts +2 -2
- package/dist/components/va-table.js +1 -1
- package/dist/components/va-telephone.d.ts +2 -2
- package/dist/components/va-telephone2.js +1 -1
- package/dist/components/va-text-input.d.ts +2 -2
- package/dist/components/va-text-input2.js +1 -1
- package/dist/components/va-textarea.d.ts +2 -2
- package/dist/components/va-textarea.js +1 -1
- package/package.json +2 -2
- package/dist/265.app.bundle.js +0 -1
- package/dist/2963.app.bundle.js +0 -1
- package/dist/3270.app.bundle.js +0 -2
- package/dist/3270.app.bundle.js.LICENSE.txt +0 -11
- package/dist/5285.app.bundle.js +0 -2
- package/dist/5285.app.bundle.js.LICENSE.txt +0 -5
- package/dist/9452.app.bundle.js +0 -1
- package/dist/9970.app.bundle.js +0 -2
- package/dist/9970.app.bundle.js.LICENSE.txt +0 -17
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Build,proxyCustomElement,HTMLElement,createEvent,forceUpdate,h,Fragment,Host}from"@stencil/core/internal/client";import{v as validate,z as zeroPadStart,g as getErrorParameters,m as months}from"./date-utils.js";import{a as getHeaderLevel}from"./utils.js";import"./i18n-setup.js";import"./contacts.js";import{c as classnames}from"./index2.js";import{d as defineCustomElement$4}from"./va-icon2.js";import{d as defineCustomElement$3}from"./va-select2.js";import{d as defineCustomElement$2}from"./va-text-input2.js";import{i as instance}from"./i18next.js";const vaMemorableDateCss='/* From the USWDS styles: */\n/* https://github.com/uswds/uswds/blob/3dc296ec56cd621fe52d918701fd94621d96a198/src/stylesheets/core/mixins/_focus.scss#L12-L13 */\nbutton:not([disabled]):focus,\n:host([uswds=\'false\']) button:not([disabled]):active,\nselect:not([disabled]):focus,\na:not([disabled]):focus,\nh1:focus,\ninput:not([disabled]):focus,\ntextarea:not([disabled]):focus,\n#form-question\n[role=\'option\']:focus {\n outline: 2px solid var(--vads-color-action-focus-on-light);\n outline-offset: 2px;\n}\n\n#error-message {\n margin-bottom: 0.75rem;\n}\n\n#error-message,\n#input-error-message {\n color: var(--vads-color-secondary-dark);\n display: block;\n font-weight: 700;\n font-size: 1.06rem;\n}\n\n:host([error]:not([error=\'\'])) {\n border-left: 0.3rem solid var(--vads-color-secondary-dark);\n padding-left: 1.25rem;\n position: relative;\n}\n\n@media screen and (min-width: 1008px) {\n :host([error]:not([error=\'\'])) {\n margin-left: -1.4375rem; /* padding left + border left */\n }\n}\n\n:host([error]:not([error=\'\'])[uswds=\'false\']) {\n label {\n margin-top: 0;\n }\n\n input,\n textarea,\n select {\n border: 4px solid var(--vads-color-secondary-dark);\n }\n}\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (":") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nBroswer compatibility mode\n----------------------------------------\nWhen true, outputs woff and ttf font \nformats in addition to woff2\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n\'georgia\'\n\'helvetica\'\n\'merriweather\'\n\'open-sans\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\'system\'\n\'tahoma\'\n\'verdana\'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: \'example-font-token\';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n\'georgia\'\n\'helvetica\'\n\'merriweather\'\n\'open-sans\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\'system\'\n\'tahoma\'\n\'verdana\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don\'t need to include the\nfont\'s display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: \'source-sans-pro\';\n$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;\n\nOutput:\nfont-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n\'merriweather\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .woff2\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: \'custom/example-serif\',\n roman: (\n 100: false,\n 200: false,\n 300: \'ExampleSerif-Light\',\n 400: \'ExampleSerif-Normal\',\n 500: false,\n 600: false,\n 700: \'ExampleSerif-Bold\',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: \'ExampleSerif-LightItalic\',\n 400: \'ExampleSerif-Italic\',\n 500: false,\n 600: false,\n 700: \'ExampleSerif-BoldItalic\',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n\'cond\'\n\'icon\'\n\'lang\'\n\'mono\'\n\'sans\'\n\'serif\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project\'s type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n\'ui\'\n\'heading\'\n\'body\'\n\'code\'\n\'alt\'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default("bg-color")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin\'s props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) --\x3e\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family("accent-warm-vivid")\n> "accent-warm"\ncolor-token-family("red-50v")\n> "red"\ncolor-token-variant(("red", 50, "vivid"))\n> "red"\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return "vivid" as the\nvariant.\nIf neither grade nor variant exists,\nreturns \'null\'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family("accent-warm-vivid")\n> "accent-warm"\ncolor-token-family("red-50v")\n> "red"\ncolor-token-variant(("red", 50, "vivid"))\n> "red"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade("accent-warm")\n> "root"\ncolor-token-grade("accent-warm-vivid")\n> "root"\ncolor-token-grade("accent-warm-darker")\n> "darker"\ncolor-token-grade("red-50v")\n> 50\ncolor-token-variant(("red", 50, "vivid"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family("accent-warm-vivid")\n> "accent-warm"\ncolor-token-family("red-50v")\n> "red"\ncolor-token-variant(("red", 50, "vivid"))\n> "red"\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: "system" | "theme"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: "vivid" | false\ncolor-token-variant("accent-warm")\n> false\ncolor-token-variant("accent-warm-vivid")\n> "vivid"\ncolor-token-variant("red-50v")\n> "vivid"\ncolor-token-variant(("red", 50, "vivid"))\n> "vivid"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number("red-50", "red-10")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, "AA")\n> false\nis-accessible-magic-number(10, 60, "AA")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n"AA"\n"AA-Large"\n"AAA"\nwcag-magic-number("AA")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n "black",\n "red-60",\n "red-10",\n "AA")\n> "red-10", "red-5"\nget-link-tokens-from-bg(\n "black",\n "red-60v",\n "red-10v",\n "AA-large")\n> "red-60v", "red-50v"\nget-link-tokens-from-bg(\n "black",\n "red-5v",\n "red-60v",\n "AA")\n> "red-5v", "white"\nget-link-tokens-from-bg(\n "black",\n "white",\n "red-60v",\n "AA")\n> "white", "white"\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next "darker" or "lighter" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token("accent-warm", "lighter")\n> "accent-warm-light"\nnext-token("gray-10", "lighter")\n> "gray-5"\nnext-token("gray-5", "lighter")\n> "white"\nnext-token("white", "lighter")\n> false\nnext-token("red-50v", "darker")\n> "red-60v"\nnext-token("red-50", "darker")\n> "red-60"\nnext-token("red-80v", "darker")\n> "red-90"\nnext-token("red-90", "darker")\n> "black"\nnext-token("white", "darker")\n> "gray-5"\nnext-token("black", "lighter")\n> "gray-90"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-sources()\n----------------------------------------\nOutputs a list of font sources used in\na @font-face declaration.\n\n$theme-font-browser-compatibility: true - output woff2, woff, ttf\n$theme-font-browser-compatibility: false - output woff2\n\n@param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]]\n@output: string\n\nfiletypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face\'s optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --\x3e \'05\'\n -1px --\x3e \'neg-1px\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --\x3e 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\nh1 {\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 0;\n margin-top: 0;\n clear: both;\n}\n* + h1,\n* + h2,\n* + h3,\n* + h4,\n* + h5,\n* + h6 {\n margin-top: 1.5em;\n}\nh1 + *,\nh2 + *,\nh3 + *,\nh4 + *,\nh5 + *,\nh6 + * {\n margin-top: 1em;\n}\n\nh1 {\n font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;\n font-size: 2.44rem;\n line-height: 1.2;\n font-weight: 700;\n}\n\nh2 {\n font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;\n font-size: 1.95rem;\n line-height: 1.2;\n font-weight: 700;\n}\n\nh3 {\n font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;\n font-size: 1.34rem;\n line-height: 1.2;\n font-weight: 700;\n}\n\nh4 {\n font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;\n font-size: 0.98rem;\n line-height: 1.2;\n font-weight: 700;\n}\n\nh5 {\n font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;\n font-size: 0.91rem;\n line-height: 1.2;\n font-weight: 700;\n}\n\nh6 {\n font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;\n font-size: 0.87rem;\n line-height: 1.1;\n font-weight: normal;\n letter-spacing: 0.025em;\n text-transform: uppercase;\n}\n\nh1, h2, h3, h4, h5 {\n font-family: Bitter, Georgia, Cambria, "Times New Roman", Times, serif;\n font-weight: 700;\n}\n\nh6 {\n font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;\n font-weight: 700;\n}\n\nh1 {\n margin-top: 0;\n font-size: 2.5rem;\n}\n\nh2 {\n font-size: 1.875rem;\n}\n\nh3 {\n font-size: 1.25rem;\n}\n\nh4 {\n font-size: 1.0625rem;\n}\n\nh5 {\n font-size: 0.9375rem;\n}\n\nh6 {\n font-size: 0.9375rem;\n}\n\n@media (max-width: 481px) {\n h1 {\n font-size: 30px;\n }\n h2 {\n font-size: 24px;\n }\n}\nh6 {\n margin: 0.5em 0 0;\n text-transform: none;\n font-weight: 700;\n}\n\n@media (max-width: 481px) {\n h1 {\n font-size: 30px;\n }\n h2 {\n font-size: 24px;\n }\n}\nh6 {\n margin: 0.5em 0 0;\n text-transform: none;\n font-weight: 700;\n}\n\n\n:host legend :is(h1, h2, h3, h4, h5, h6),\n:host label :is(h1, h2, h3, h4, h5, h6) {\n display: inline;\n margin: 0px;\n}\n\n/* h6 remains as Source Sans Pro, everything else uses Bitter */\n:host legend :is(h1, h2, h3, h4, h5),\n:host label :is(h1, h2, h3, h4, h5) {\n font-family: var(--font-serif);\n}\n\n:host h1 + *, :host h2 + *, :host h3 + *, :host h4 + *, :host h5 + *, :host h6 + * {\n margin-top: unset;\n}\n\n:host #form-question {\n margin-bottom: 1rem;\n}\n\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nGENERAL SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n----------------------------------------\nImage path\n----------------------------------------\nRelative image file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nShow compile warnings\n----------------------------------------\nShow Sass warnings when functions and\nmixins use non-standard tokens.\nAND\nShow updates and notifications.\n----------------------------------------\n*/\n/*\n----------------------------------------\nNamespace\n----------------------------------------\n*/\n/*\n----------------------------------------\nPrefix separator\n----------------------------------------\nSet the character the separates\nresponsive and state prefixes from the\nmain class name.\nThe default (":") needs to be preceded\nby two backslashes to be properly\nescaped.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLayout grid\n----------------------------------------\nShould the layout grid classes output\nwith !important\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder box sizing\n----------------------------------------\nWhen set to true, sets the box-sizing\nproperty of all site elements to\n`border-box`.\n----------------------------------------\n*/\n/*\n----------------------------------------\nFocus styles\n----------------------------------------\n*/\n/*\n----------------------------------------\nIcons\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nTYPOGRAPHY SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS typography tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/typesetting/overview/\n----------------------------------------\n*/\n/*\n----------------------------------------\nRoot font size\n----------------------------------------\nSetting $theme-respect-user-font-size to\ntrue sets the root font size to 100% and\nuses ems for media queries\n----------------------------------------\n$theme-root-font-size only applies when\n$theme-respect-user-font-size is set to\nfalse.\n\nThis will set the root font size\nas a specific px value and use px values\nfor media queries.\n\nAccepts true or false\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal styles\n----------------------------------------\nAdds basic styling for the following\nunclassed elements:\n\n- paragraph: paragraph text\n- link: links\n- content: paragraph text, links,\n headings, lists, and tables\n----------------------------------------\n*/\n/*\n----------------------------------------\nBroswer compatibility mode\n----------------------------------------\nWhen true, outputs woff and ttf font \nformats in addition to woff2\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont path\n----------------------------------------\nRelative font file path\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom typeface tokens\n----------------------------------------\nAdd a new custom typeface token if\nyour project uses a typeface not already\ndefined by USWDS.\n----------------------------------------\nUSWDS defines the following tokens\nby default:\n----------------------------------------\n\'georgia\'\n\'helvetica\'\n\'merriweather\'\n\'open-sans\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\'system\'\n\'tahoma\'\n\'verdana\'\n----------------------------------------\nAdd as many new tokens as you have\ncustom typefaces. Reference your new\ntoken(s) in the type-based font settings\nusing the quoted name of the token.\n\nFor example:\n\n$theme-font-type-cond: \'example-font-token\';\n\ndisplay-name:\nThe display name of your font\n\ncap-height:\nThe height of a 500px `N` in Sketch\n----------------------------------------\nYou should change `example-[style]-token`\nnames to something more descriptive.\n----------------------------------------\n*/\n/*\n----------------------------------------\nType-based font settings\n----------------------------------------\nSet the type-based tokens for your\nproject from the following tokens,\nor from any new font tokens you added in\n$theme-typeface-tokens.\n----------------------------------------\n\'georgia\'\n\'helvetica\'\n\'merriweather\'\n\'open-sans\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\'system\'\n\'tahoma\'\n\'verdana\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nCustom font stacks\n----------------------------------------\nAdd custom font stacks to any of the\ntype-based fonts. Any USWDS typeface\ntoken already has a default stack.\n\nCustom stacks don\'t need to include the\nfont\'s display name. It will\nautomatically appear at the start of\nthe stack.\n----------------------------------------\nExample:\n$theme-font-type-sans: \'source-sans-pro\';\n$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;\n\nOutput:\nfont-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n----------------------------------------\n*/\n/*\n----------------------------------------\nAdd any custom font source files\n----------------------------------------\nIf you want USWDS to generate additional\n@font-face declarations, add your font\ndata below, following the example that\nfollows.\n----------------------------------------\nUSWDS automatically generates @font-face\ndeclarations for the following\n\n\'merriweather\'\n\'public-sans\'\n\'roboto-mono\'\n\'source-sans-pro\'\n\nThese typefaces not require custom\nsource files.\n----------------------------------------\nEXAMPLE\n\n- dir:\n Directory relative to $theme-font-path\n- This directory should include fonts saved as\n .woff2\n ExampleSerif-Normal.woff2\n\n$theme-font-serif-custom-src: (\n dir: \'custom/example-serif\',\n roman: (\n 100: false,\n 200: false,\n 300: \'ExampleSerif-Light\',\n 400: \'ExampleSerif-Normal\',\n 500: false,\n 600: false,\n 700: \'ExampleSerif-Bold\',\n 800: false,\n 900: false,\n ),\n italic: (\n 100: false,\n 200: false,\n 300: \'ExampleSerif-LightItalic\',\n 400: \'ExampleSerif-Italic\',\n 500: false,\n 600: false,\n 700: \'ExampleSerif-BoldItalic\',\n 800: false,\n 900: false,\n ),\n);\n----------------------------------------\n*/\n/*\n----------------------------------------\nRole-based font settings\n----------------------------------------\nSet the role-based tokens for your\nproject from the following font-type\ntokens.\n----------------------------------------\n\'cond\'\n\'icon\'\n\'lang\'\n\'mono\'\n\'sans\'\n\'serif\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nType scale\n----------------------------------------\nDefine your project\'s type scale using\nvalues from the USWDS system type scale\n\n1-20\n----------------------------------------\n*/\n/*\n----------------------------------------\nFont weights\n----------------------------------------\nAssign weights 100-900\nOr use `false` for unneeded weights.\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral typography settings\n----------------------------------------\nType scale tokens\n----------------------------------------\nmicro: 10px\n1: 12px\n2: 13px\n3: 14px\n4: 15px\n5: 16px\n6: 17px\n7: 18px\n8: 20px\n9: 22px\n10: 24px\n11: 28px\n12: 32px\n13: 36px\n14: 40px\n15: 48px\n16: 56px\n17: 64px\n18: 80px\n19: 120px\n20: 140px\n----------------------------------------\nLine height tokens\n----------------------------------------\n1: 1\n2: 1.15\n3: 1.35\n4: 1.5\n5: 1.62\n6: 1.75\n----------------------------------------\nFont role tokens\n----------------------------------------\n\'ui\'\n\'heading\'\n\'body\'\n\'code\'\n\'alt\'\n----------------------------------------\nMeasure (max-width) tokens\n----------------------------------------\n1: 44ex\n2: 60ex\n3: 64ex\n4: 68ex\n5: 74ex\n6: 88ex\nnone: none\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOLOR SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS color tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens/color\n----------------------------------------\n*/\n/*\n----------------------------------------\nTheme palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nState palette colors\n----------------------------------------\n*/\n/*\n----------------------------------------\nGeneral colors\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nSPACING SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS spacing units tokens in the\ndocumentation:\nhttps://designsystem.digital.gov/design-tokens/spacing-units\n----------------------------------------\n*/\n/*\n----------------------------------------\nBorder radius\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n1.5 12px\n2 16px\n2.5 20px\n3 24px\n4 32px\n5 40px\n6 48px\n7 56px\n8 64px\n9 72px\n----------------------------------------\n*/\n/*\n----------------------------------------\nColumn gap\n----------------------------------------\n2px 2px\n0.5 4px\n1 8px\n2 16px\n3 24px\n4 32px\n5 40px\n6 48px\n----------------------------------------\n*/\n/*\n----------------------------------------\nGrid container max-width\n----------------------------------------\nmobile\nmobile-lg\ntablet\ntablet-lg\ndesktop\ndesktop-lg\nwidescreen\n----------------------------------------\n*/\n/*\n----------------------------------------\nSite\n----------------------------------------\n*/\n/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUTILITIES SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS utilities in the documentation:\nhttps://designsystem.digital.gov/utilities\n----------------------------------------\n*/\n/*\n----------------------------------------\nUtility breakpoints\n----------------------------------------\nWhich breakpoints does your project\nneed? Select as `true` any breakpoint\nused by utilities or layout grid\n----------------------------------------\n*/\n/*\n----------------------------------------\nGlobal colors\n----------------------------------------\nThe following palettes will be added to\n- background-color\n- border-color\n- color\n- text-decoration-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nSettings\n----------------------------------------\n*/\n/*\n----------------------------------------\nValues\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-last()\n----------------------------------------\nReturn the last item of a list,\nReturn null if the value is null\n----------------------------------------\n*/\n/*\n----------------------------------------\nappend-important()\n----------------------------------------\nAppend `!important` to a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nde-list()\n----------------------------------------\nTransform a one-element list or arglist\ninto that single element.\n----------------------------------------\n(1) => 1\n((1)) => (1)\n----------------------------------------\n*/\n/*\n----------------------------------------\nuswds-error()\n----------------------------------------\nAllow the system to pass an error as text\nto test error states in unit testing\n----------------------------------------\n*/\n/*\n----------------------------------------\nerror-not-token()\n----------------------------------------\nReturns a common not-a-token error.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-default()\n----------------------------------------\nReturns the default value from a map\nof project defaults\nget-default("bg-color")\n> $theme-body-background-color\n----------------------------------------\n*/\n/*\n----------------------------------------\nhas-important()\n----------------------------------------\nCheck to see if `!important` is\nbeing passed in a mixin\'s props\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-collect()\n----------------------------------------\nCollect multiple maps into a single\nlarge map\nsource: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe\n----------------------------------------\n*/\n/*\n----------------------------------------\nmap-deep-get()\n----------------------------------------\n@author Hugo Giraudel\n@access public\n@param {Map} $map - Map\n@param {Arglist} $keys - Key chain\n@return {*} - Desired value\n----------------------------------------\n*/\n/*\n----------------------------------------\nmulti-cat()\n----------------------------------------\nConcatenate two lists\n----------------------------------------\n*/\n/*\n----------------------------------------\nremove()\n----------------------------------------\nRemove a value from a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nsmart-quote()\n----------------------------------------\nQuotes strings\nInspects `px`, `xs`, and `xl` numbers\nLeaves bools as is\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-replace()\n----------------------------------------\nReplace any substring with another\nstring\n----------------------------------------\n*/\n/*\n----------------------------------------\nstr-split()\n----------------------------------------\nSplit a string at a given separator\nand convert into a list of substrings\n----------------------------------------\n*/\n/*\n----------------------------------------\nstrip-unit()\n----------------------------------------\nRemove the unit of a length\n@author Hugo Giraudel\n@param {Number} $number - Number to remove unit from\n@return {Number} - Unitless number\n----------------------------------------\n*/\n/*\n----------------------------------------\nbase-to-map()\n@TODO: Deprecate and delete\n----------------------------------------\nConvert a single base to a USWDS\nvalue map.\n\nCandidate for deprecation if we remove\nisReadable\n----------------------------------------\n*/\n/*\n----------------------------------------\nto-number()\n----------------------------------------\nCasts a string into a number\n----------------------------------------\n@param {String | Number} $value - Value to be parsed\n@return {Number}\n----------------------------------------\n*/\n/*\n----------------------------------------\nunpack()\n----------------------------------------\nCreate lists of single items from lists\nof lists.\n----------------------------------------\n(1, (2.1, 2.2), 3) --\x3e\n(1, 2.1, 2.2, 3)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-system-color()\n----------------------------------------\nDerive a system color from its\nfamily, value, and vivid or a passed\nvariable that is, itself, a list\n----------------------------------------\n*/\n/*\n----------------------------------------\nset-theme-color()\n----------------------------------------\nDerive a color from a system color token\nor a hex value\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor()\n----------------------------------------\nDerive a color from a color shortcode\n----------------------------------------\n*/\n/*\n----------------------------------------\npx-to-rem()\n----------------------------------------\nConverts a value in px to a value in rem\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-px()\n----------------------------------------\nConverts a value in rem to a value in px\n----------------------------------------\n*/\n/*\n----------------------------------------\nrem-to-user-em()\n----------------------------------------\nConverts a value in rem to a value in\n[user-settings] em for use in media\nqueries\n----------------------------------------\n*/\n/*\n----------------------------------------\nspacing-multiple()\n----------------------------------------\nConverts a spacing unit multiple into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nnumber-to-token()\n----------------------------------------\nConverts an integer or numeric value\ninto a system value\n\nEx: 0.5 --\x3e \'05\'\n -1px --\x3e \'neg-1px\'\n----------------------------------------\n*/\n/*\n----------------------------------------\nunits()\n----------------------------------------\nConverts a spacing unit into\nthe desired final units (currently rem)\n----------------------------------------\n*/\n/*\n----------------------------------------\nProject fonts\n----------------------------------------\nCollects font settings in a map for\nlooping.\n----------------------------------------\n*/\n/*\n----------------------------------------\nLuminance ranges\n----------------------------------------\n*/\n/*\n----------------------------------------\nns()\n----------------------------------------\nAdd a namesspace of $type if that\nnamespace is set to output\n----------------------------------------\n*/\n/*\n----------------------------------------\nLine height\n----------------------------------------\n*/\n/*\n----------------------------------------\nMeasure\n----------------------------------------\n*/\n/*\n----------------------------------------\nvalidate-typeface-token()\n----------------------------------------\nCheck to see if a typeface-token exists.\nThrow an error if a passed token does\nnot exist in the typeface-token map.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncap-height()\n----------------------------------------\nGet the cap height of a valid typeface\n----------------------------------------\n*/\n/*\n----------------------------------------\nconvert-to-font-type()\n----------------------------------------\nConverts a font-role token into a\nfont-type token. Leaves font-type tokens\nunchanged.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-sources()\n----------------------------------------\nOutputs a list of font sources used in\na @font-face declaration.\n\n$theme-font-browser-compatibility: true - output woff2, woff, ttf\n$theme-font-browser-compatibility: false - output woff2\n\n@param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]]\n@output: string\n\nfiletypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf)\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-font-stack()\n----------------------------------------\nGet a font stack from a style- or\nrole-based font token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-typeface-token()\n----------------------------------------\nGet a typeface token from a font-type or\nfont-role token.\n----------------------------------------\n*/\n/*\n----------------------------------------\nnormalize-type-scale()\n----------------------------------------\nNormalizes a specific face\'s optical size\nto a set target\n----------------------------------------\n*/\n/*\n----------------------------------------\nsystem-type-scale()\n----------------------------------------\nGet a value from the system type scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nEasing\n----------------------------------------\n*/\n/* deprecated.scss\n ---\n Occasionally the design system will deprecate\n old variables or functionality. If we replace\n the old functionality with something new, this is a\n place to connect the old functionality to the\n new functionality, in the service of better\n continuity and backwards compatibility within a\n major release cycle.\n\n Note the USWDS version where we deprecated the\n old functionality in a comment.\n\n Be sure to update notifications.scss.\n\n This file should started fresh at each\n major version.\n*/\n/*\n----------------------------------------\nadvanced-color()\n----------------------------------------\nDerive a color from a color triplet:\n[family], [grade], [variant]\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-system-color-token()\n----------------------------------------\nReturn whether a token is a system\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-theme-color-token()\n----------------------------------------\nReturn whether a token is a theme\ncolor token\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-assignment()\n----------------------------------------\nGet the system token equivalent of any\ntheme color token\n----------------------------------------\n*/\n/*\n----------------------------------------\ndecompose()\n----------------------------------------\nConvert a color token into into a list\nof form [family], [grade], [variant]\nVivid variants return "vivid" as the\nvariant.\nIf neither grade nor variant exists,\nreturns \'null\'\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-family()\n----------------------------------------\nReturns the family of a color token.\nReturns: color-family\ncolor-token-family("accent-warm-vivid")\n> "accent-warm"\ncolor-token-family("red-50v")\n> "red"\ncolor-token-variant(("red", 50, "vivid"))\n> "red"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-grade()\n----------------------------------------\nReturns the grade of a USWDS color token.\nReturns: color-grade\ncolor-token-grade("accent-warm")\n> "root"\ncolor-token-grade("accent-warm-vivid")\n> "root"\ncolor-token-grade("accent-warm-darker")\n> "darker"\ncolor-token-grade("red-50v")\n> 50\ncolor-token-variant(("red", 50, "vivid"))\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-color-token()\n----------------------------------------\nReturns whether a given string is a\nUSWDS color token.\n----------------------------------------\n*/\n/*\n----------------------------------------\npow()\n----------------------------------------\nRaises a unitless number to the power\nof another unitless number\nIncludes helper functions\n----------------------------------------\n*/\n/*\n----------------------------------------\nHelper functions\n----------------------------------------\n*/\n/* factorial()\n----------------------------------------\n*/\n/* summation()\n----------------------------------------\n*/\n/* exp-maclaurin()\n----------------------------------------\n*/\n/* ln()\n----------------------------------------\n*/\n/*\n----------------------------------------\ncalculate-grade()\n----------------------------------------\nDerive the grade equivalent any color,\neven non-token colors\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-type()\n----------------------------------------\nReturns the type of a color token.\nReturns: "system" | "theme"\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolor-token-variant()\n----------------------------------------\nReturns the variant of color token.\nReturns: "vivid" | false\ncolor-token-variant("accent-warm")\n> false\ncolor-token-variant("accent-warm-vivid")\n> "vivid"\ncolor-token-variant("red-50v")\n> "vivid"\ncolor-token-variant(("red", 50, "vivid"))\n> "vivid"\n----------------------------------------\n*/\n/*\n----------------------------------------\nmagic-number()\n----------------------------------------\nReturns the magic number of two color\ngrades. Takes numbers or color tokens.\nmagic-number(50, 10)\nreturn: 40\nmagic-number("red-50", "red-10")\nreturn: 40\n----------------------------------------\n*/\n/*\n----------------------------------------\nwcag-magic-number()\n----------------------------------------\nReturns the magic number of a specific\nwcag grade:\n"AA"\n"AA-Large"\n"AAA"\nwcag-magic-number("AA")\n> 50\n----------------------------------------\n*/\n/*\n----------------------------------------\nis-accessible-magic-number()\n----------------------------------------\nReturns whether two grades achieve\nspecified target color contrast\nReturns: true | false\nis-accessible-magic-number(10, 50, "AA")\n> false\nis-accessible-magic-number(10, 60, "AA")\n> true\n----------------------------------------\n*/\n/*\n----------------------------------------\nnext-token()\n----------------------------------------\nReturns next "darker" or "lighter" color\ntoken of the same token type and variant.\nReturns: color-token | false\nnext-token("accent-warm", "lighter")\n> "accent-warm-light"\nnext-token("gray-10", "lighter")\n> "gray-5"\nnext-token("gray-5", "lighter")\n> "white"\nnext-token("white", "lighter")\n> false\nnext-token("red-50v", "darker")\n> "red-60v"\nnext-token("red-50", "darker")\n> "red-60"\nnext-token("red-80v", "darker")\n> "red-90"\nnext-token("red-90", "darker")\n> "black"\nnext-token("white", "darker")\n> "gray-5"\nnext-token("black", "lighter")\n> "gray-90"\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-link-tokens-from-bg()\n----------------------------------------\nGet accessible link colors for a given\nbackground color\nreturns: link-token, hover-token\nget-link-tokens-from-bg(\n "black",\n "red-60",\n "red-10",\n "AA")\n> "red-10", "red-5"\nget-link-tokens-from-bg(\n "black",\n "red-60v",\n "red-10v",\n "AA-large")\n> "red-60v", "red-50v"\nget-link-tokens-from-bg(\n "black",\n "red-5v",\n "red-60v",\n "AA")\n> "red-5v", "white"\nget-link-tokens-from-bg(\n "black",\n "white",\n "red-60v",\n "AA")\n> "white", "white"\n----------------------------------------\n*/\n/*\n----------------------------------------\ntest-colors()\n----------------------------------------\nCheck to see if all system colors\nfall between the proper relative\nluminance range for their grade.\nHas a couple quirks, as the luminance()\nfunction returns slightly different\nresults than expected.\n----------------------------------------\n*/\n/*\n----------------------------------------\ncolumns()\n----------------------------------------\noutputs a grid-col number based on\nthe number of desired columns in the\n12-column grid\n\nEx: columns(2) --\x3e 6\n grid-col(columns(2))\n----------------------------------------\n*/\n/*\n----------------------------------------\nUSWDS Properties\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-uswds-value()\n----------------------------------------\nFinds and outputs a value from the\nUSWDS standard values.\n\nUsed to build other standard utility\nfunctions and mixins.\n----------------------------------------\n*/\n/*\n----------------------------------------\nget-standard-values()\n----------------------------------------\nGets a map of USWDS standard values\nfor a property\n----------------------------------------\n*/\n/*\n----------------------------------------\nborder-radius()\n----------------------------------------\nGet a border-radius from the system\nborder-radii\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-weight()\nfw()\n----------------------------------------\nGet a font-weight value from the\nsystem font-weight\n----------------------------------------\n*/\n/*\n----------------------------------------\nfeature()\n----------------------------------------\nGets a valid USWDS font feature setting\n----------------------------------------\n*/\n/*\n----------------------------------------\nflex()\n----------------------------------------\nGets a valid USWDS flex value\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-family()\nfamily()\n----------------------------------------\nGet a font-family stack from a\nrole-based or type-based font family\n----------------------------------------\n*/\n/*\n----------------------------------------\nletter-spacing()\nls()\n----------------------------------------\nGet a letter-spacing value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nmeasure()\n----------------------------------------\nGets a valid USWDS reading line length\n----------------------------------------\n*/\n/*\n----------------------------------------\nopacity()\n----------------------------------------\nGet an opacity from the system\nopacities\n----------------------------------------\n*/\n/*\n----------------------------------------\norder()\n----------------------------------------\nGet an order value from the\nsystem orders\n----------------------------------------\n*/\n/*\n----------------------------------------\nradius()\n----------------------------------------\nGet a border-radius value from the\nsystem letter-spacing\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont-size()\n----------------------------------------\nGet type scale value from a [family] and\n[scale]\n----------------------------------------\n*/\n/*\n----------------------------------------\nz-index()\nz()\n----------------------------------------\nGet a z-index value from the\nsystem z-index\n----------------------------------------\n*/\n/*\n----------------------------------------\nutility-font()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\nNot the public-facing function.\nUsed for building the utilities and\nwithholds certain errors.\n----------------------------------------\n*/\n/*\n----------------------------------------\nfamily()\n----------------------------------------\nGet a font-family stack\n----------------------------------------\n*/\n/*\n----------------------------------------\nsize()\n----------------------------------------\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\nfont()\n----------------------------------------\nGet a font-family stack\nAND\nGet a normalized font-size in rem from\na family and a type size in either\nsystem scale or project scale\n----------------------------------------\n*/\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n/* stylelint-disable max-nesting-depth */\n/*\n----------------------------------------\n@render-pseudoclass\n----------------------------------------\nBuild a pseucoclass utiliy from values\ncalculated in the @render-utilities-in\nloop\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utility\n----------------------------------------\nBuild a utility from values calculated\nin the @render-utilities-in loop\n----------------------------------------\nTODO: Determine the proper use of\nunquote() in the following. Changed to\naccount for a \'interpolation near\noperators will be simplified in a\nfuture version of Sass\' warning.\n----------------------------------------\n*/\n/*\n----------------------------------------\n@render-utilities-in\n----------------------------------------\nThe master loop that sets the building\nblocks of utilities from the values\nin individual rule settings and loops\nthrough all possible variants\n----------------------------------------\n*/\n/* stylelint-enable */\n/* notifications.scss\n ---\n Adds a notification at the top of each USWDS\n compile. Use this file for important notifications\n and updates to the design system.\n\n This file should started fresh at each\n major version.\n\n*/\n/* prettier-ignore */\n/* prettier-ignore */\n.usa-hint, .usa-fieldset {\n font-family: Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.3;\n}\n\n.usa-sr-only {\n position: absolute;\n left: -999em;\n right: auto;\n}\n\n.usa-form {\n font-family: Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.3;\n}\n@media all and (min-width: 30em) {\n .usa-form {\n max-width: 20rem;\n }\n}\n.usa-form abbr[title=required] {\n text-decoration: none;\n}\n.usa-form .usa-input,\n.usa-form .usa-range,\n.usa-form .usa-select,\n.usa-form .usa-textarea {\n max-width: none;\n}\n.usa-form .usa-input--2xs,\n.usa-form .usa-input-group--2xs {\n max-width: 5ex;\n}\n.usa-form .usa-input--xs,\n.usa-form .usa-input-group--xs {\n max-width: 9ex;\n}\n.usa-form .usa-input--sm, .usa-form .usa-input--small,\n.usa-form .usa-input-group--sm,\n.usa-form .usa-input-group--small {\n max-width: 13ex;\n}\n.usa-form .usa-input--md, .usa-form .usa-input--medium,\n.usa-form .usa-input-group--md,\n.usa-form .usa-input-group--medium {\n max-width: 20ex;\n}\n.usa-form .usa-input--lg,\n.usa-form .usa-input-group--lg {\n max-width: 30ex;\n}\n.usa-form .usa-input--xl,\n.usa-form .usa-input-group--xl {\n max-width: 40ex;\n}\n.usa-form .usa-input--2xl,\n.usa-form .usa-input-group--2xl {\n max-width: 50ex;\n}\n.usa-form .usa-button {\n margin-top: 0.5rem;\n}\n@media all and (min-width: 30em) {\n .usa-form .usa-button {\n margin-top: 1.5rem;\n }\n}\n.usa-form a:where(:not(.usa-button)) {\n color: #005ea2;\n text-decoration: underline;\n}\n.usa-form a:where(:not(.usa-button)):visited {\n color: #54278f;\n}\n.usa-form a:where(:not(.usa-button)):hover {\n color: #1a4480;\n}\n.usa-form a:where(:not(.usa-button)):active {\n color: #162e51;\n}\n.usa-form a:where(:not(.usa-button)):focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0rem;\n}\n\n@media all and (min-width: 30em) {\n .usa-form--large {\n max-width: 30rem;\n }\n}\n\n.usa-show-password {\n color: #005ea2;\n text-decoration: underline;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n font-weight: normal;\n -ms-flex-pack: normal;\n justify-content: normal;\n text-align: left;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n.usa-show-password:visited {\n color: #54278f;\n}\n.usa-show-password:hover {\n color: #1a4480;\n}\n.usa-show-password:active {\n color: #162e51;\n}\n.usa-show-password:focus {\n outline: 0.25rem solid #2491ff;\n outline-offset: 0rem;\n}\n.usa-show-password:hover, .usa-show-password.usa-button--hover, .usa-show-password:disabled:hover, .usa-show-password[aria-disabled=true]:hover, .usa-show-password:disabled.usa-button--hover, .usa-show-password[aria-disabled=true].usa-button--hover, .usa-show-password:active, .usa-show-password.usa-button--active, .usa-show-password:disabled:active, .usa-show-password[aria-disabled=true]:active, .usa-show-password:disabled.usa-button--active, .usa-show-password[aria-disabled=true].usa-button--active, .usa-show-password:disabled:focus, .usa-show-password[aria-disabled=true]:focus, .usa-show-password:disabled.usa-focus, .usa-show-password[aria-disabled=true].usa-focus, .usa-show-password:disabled, .usa-show-password[aria-disabled=true], .usa-show-password.usa-button--disabled {\n background-color: transparent;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: underline;\n}\n.usa-show-password.usa-button--hover {\n color: #1a4480;\n}\n.usa-show-password.usa-button--active {\n color: #162e51;\n}\n.usa-show-password:disabled, .usa-show-password[aria-disabled=true], .usa-show-password:disabled:hover, .usa-show-password[aria-disabled=true]:hover, .usa-show-password[aria-disabled=true]:focus {\n color: #757575;\n}\n@media (forced-colors: active) {\n .usa-show-password:disabled, .usa-show-password[aria-disabled=true], .usa-show-password:disabled:hover, .usa-show-password[aria-disabled=true]:hover, .usa-show-password[aria-disabled=true]:focus {\n color: GrayText;\n }\n}\n\n.usa-form__note,\n.usa-show-password {\n font-family: Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n font-size: 0.93rem;\n line-height: 1.3;\n float: right;\n margin: 0.25rem 0 1rem;\n}\n\n.usa-fieldset {\n border: none;\n margin: 0;\n padding: 0;\n}\n\n.usa-legend {\n font-family: Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.3;\n display: block;\n font-weight: normal;\n margin-top: 1.5rem;\n max-width: 30rem;\n}\n\n.usa-legend--large {\n font-size: 2.13rem;\n font-weight: 700;\n margin-top: 1rem;\n}\n\n.usa-label {\n font-family: Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;\n font-size: 1.06rem;\n line-height: 1.3;\n display: block;\n font-weight: normal;\n margin-top: 1.5rem;\n max-width: 30rem;\n}\n\n.usa-label--error {\n font-weight: 700;\n margin-top: 0;\n}\n\n.usa-label--required {\n color: #b50909;\n}\n\n.usa-hint {\n color: #71767a;\n}\n\n.usa-hint--required {\n color: #b50909;\n}\n\n.usa-form-group {\n margin-top: 1.5rem;\n}\n.usa-form-group .usa-label:first-child {\n margin-top: 0;\n}\n\n.usa-form-group--error {\n border-left-width: 0.25rem;\n border-left-color: #b50909;\n border-left-style: solid;\n padding-left: 1rem;\n position: relative;\n}\n@media all and (min-width: 64em) {\n .usa-form-group--error {\n margin-left: -1.25rem;\n }\n}\n\n.usa-error-message {\n padding-bottom: 0.25rem;\n padding-top: 0.25rem;\n color: #b50909;\n display: block;\n font-weight: 700;\n}\n\n.usa-memorable-date {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n.usa-memorable-date [type=number] {\n -moz-appearance: textfield;\n}\n.usa-memorable-date [type=number]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n appearance: none;\n}\n.usa-memorable-date [type=number]::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n display: none !important;\n /* stylelint-disable-line declaration-no-important */\n pointer-events: none;\n height: 0;\n width: 0;\n margin: 0;\n}\n.usa-memorable-date .usa-form-group {\n margin-top: 1rem;\n}\n\n.usa-form-group--day,\n.usa-form-group--month,\n.usa-form-group--year {\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n margin-right: 1rem;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.usa-form-group--day input,\n.usa-form-group--month input {\n width: 3rem;\n}\n\n.usa-form-group--month select {\n width: 15rem;\n}\n\n.usa-form-group--year input {\n width: 4.5rem;\n}\n\n.usa-error-message {\n font-size: 1.06rem;\n}\n\n:host([error]:not([error=""]):not([uswds=false])) {\n border-left: 0.25rem solid #b50909;\n padding-left: 1rem;\n position: relative;\n}\n\n:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) {\n border-left: none;\n}\n\n:host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap {\n border-left: 0.25rem solid #b50909;\n padding-left: 1rem;\n position: relative;\n}\n\n@media screen and (min-width: 1008px) {\n :host([error]:not([error=""]):not([uswds=false])) {\n margin-left: -0.9rem;\n }\n\n :host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) .input-wrap {\n margin-left: -0.9rem;\n }\n}\n@media screen and (max-width: 1008px) {\n :host([error]:not([error=""]):not([uswds=false])[use-forms-pattern=multiple]) {\n padding-left: 0;\n }\n}\n:host {\n display: block;\n font-family: var(--font-source-sans);\n margin-top: 24px;\n}\n\n#error-message {\n margin-bottom: 0;\n}\n\n.usa-hint {\n display: block;\n}\n\nslot:not([name])::slotted(*) {\n margin-bottom: 0.5rem;\n}\n\nva-select::part(label),\nva-text-input::part(label) {\n margin-top: 0;\n margin-bottom: 12px;\n}\n\nva-text-input::part(validation) {\n display: none;\n}\n\n.usa-memorable-date {\n margin-top: 16px;\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n}\n\n.usa-memorable-date .usa-form-group {\n margin-top: 0px;\n}\n\n.usa-form-group--month {\n margin-right: 16px;\n}\n\n.usa-form-group--month-input {\n width: 48px;\n}\n\n.usa-form-group--month-select {\n width: 15rem;\n}\n\n.usa-form-group--day-input {\n width: 3rem;\n}\n\n.usa-form-group--year-input {\n width: 4.5rem;\n}\n\n@media (max-width: 480px) {\n .usa-form-group--month-select {\n width: 100%;\n }\n\n .usa-form-group--select {\n -ms-flex: 0 1 50%;\n flex: 0 1 50%;\n width: 50%;\n }\n}';Build.isTesting&&instance.init({lng:"cimode"});const VaMemorableDate$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.dateChange=createEvent(this,"dateChange",7),this.dateBlur=createEvent(this,"dateBlur",7),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.dayTouched=!1,this.monthTouched=!1,this.yearTouched=!1,this.handleDateBlur=n=>{const[e,t,a]=(this.value||"").split("-"),o=Number(e),s=Number(t),r=Number(a);if(validate({component:this,year:o,month:s,day:r,yearTouched:this.yearTouched,monthTouched:this.monthTouched,dayTouched:this.dayTouched}),!this.error&&(this.value=e||t||a?`${e}-${t?zeroPadStart(s):""}-${a?zeroPadStart(r):""}`:"",this.dateBlur.emit(n),this.enableAnalytics)){const n={componentName:"va-memorable-date",action:"blur",details:{label:this.label,year:o,month:s,day:r}};this.componentLibraryAnalytics.emit(n)}},this.handleMonthChange=n=>{this.handleDateChange(n)},this.handleDateChange=n=>{const e=n.target;let[t,a,o]=(this.value||"").split("-");(e.classList.contains("input-month")||e.classList.contains("usa-form-group--month-input")||e.classList.contains("usa-form-group--month-select"))&&(a=e.value),(e.classList.contains("input-day")||e.classList.contains("usa-form-group--day-input"))&&(o=e.value),(e.classList.contains("input-year")||e.classList.contains("usa-form-group--year-input"))&&(t=e.value),this.value=t||a||o?`${t}-${a||""}-${o||""}`:"",this.dateChange.emit(n)},this.handleMonthBlur=()=>{this.monthTouched=!0},this.handleDayBlur=()=>{this.dayTouched=!0},this.handleYearBlur=()=>{this.yearTouched=!0},this.required=!1,this.useFormsPattern=void 0,this.formHeadingLevel=3,this.formHeading=void 0,this.monthSelect=!1,this.label=void 0,this.name=void 0,this.hint=void 0,this.error=void 0,this.value=void 0,this.customDayErrorMessage=void 0,this.customMonthErrorMessage=void 0,this.customYearErrorMessage=void 0,this.invalidDay=!1,this.invalidMonth=!1,this.invalidYear=!1,this.enableAnalytics=!1}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}render(){const{required:n,label:e,name:t,hint:a,error:o,handleDateBlur:s,handleDateChange:r,value:i,monthSelect:l,useFormsPattern:m,formHeadingLevel:u,formHeading:d}=this,[c,f,p]=(i||"").split("-"),g=["dateHint",a?"hint":""].filter(Boolean).join(" "),y=l?instance.t("date-hint-with-select"):instance.t("date-hint"),v=n=>{let e=n;return l&&"month-range"===n&&(e="month-select"),instance.t(e,(n=>{const e=parseInt(c),t=parseInt(f);return getErrorParameters(n,e,t)})(n))},b=`${m&&d?"form-question":""} ${m?"form-description":""} ${m&&e?"input-label":""}`.trim()||null;let w=null;if("single"===m||"multiple"===m){const n=getHeaderLevel(u);w=h(Fragment,null,d&&h(n,{id:"form-question",part:"form-header"},d),h("div",{id:"form-description"},h("slot",{name:"form-description"})))}const k=l?h("div",{class:"usa-form-group usa-form-group--month usa-form-group--select"},h("va-select",{label:instance.t("month"),name:t?`${t}Month`:"Month","aria-describedby":g,"aria-labelledby":b,invalid:this.invalidMonth,onVaSelect:this.handleMonthChange,onBlur:this.handleMonthBlur,class:"usa-form-group--month-select",reflectInputError:"month-range"===o,value:f?String(parseInt(f)):f,error:this.invalidMonth?v(o):null},months&&months.map((n=>h("option",{value:n.value,selected:n.value===parseInt(f)},n.label))))):h("div",{class:"usa-form-group usa-form-group--month"},h("va-text-input",{label:instance.t("month"),name:t?`${t}Month`:"Month",maxlength:2,pattern:"[0-9]*","aria-describedby":g,"aria-labelledby":b,invalid:this.invalidMonth,value:null==f?void 0:f.toString(),onInput:r,onBlur:this.handleMonthBlur,class:"usa-form-group--month-input memorable-date-input",reflectInputError:"month-range"===o,inputmode:"numeric",type:"text",error:this.invalidMonth?v(o):null,"show-input-error":"false"})),x=classnames({"usa-legend":!0,"usa-label--error":o});return h(Host,{onBlur:s},w,h("div",{class:"input-wrap"},h("fieldset",{class:"usa-form usa-fieldset"},h("legend",{class:x,id:"input-label",part:"legend"},e,n&&h("span",{class:"usa-label--required"}," ",instance.t("required")),a&&h("div",{class:"usa-hint",id:"hint"},a),h("span",{class:"usa-hint",id:"dateHint"},y)),h("span",{id:"error-message",role:"alert"},o&&h(Fragment,null,h("span",{class:"usa-sr-only"},instance.t("error")),h("span",{class:"usa-error-message"},(n=>{let e="";return this.invalidDay?e=this.customDayErrorMessage:this.invalidMonth?e=this.customMonthErrorMessage:this.invalidYear&&(e=this.customYearErrorMessage),e||v(n)})(o)))),h("slot",null),h("div",{class:"usa-memorable-date"},k,h("div",{class:"usa-form-group usa-form-group--day"},h("va-text-input",{label:instance.t("day"),name:t?`${t}Day`:"Day",maxlength:2,pattern:"[0-9]*","aria-describedby":g,invalid:this.invalidDay,value:null==p?void 0:p.toString(),onInput:r,onBlur:this.handleDayBlur,class:"usa-form-group--day-input memorable-date-input",reflectInputError:"day-range"===o,inputmode:"numeric",type:"text",error:this.invalidDay?v(o):null,"show-input-error":"false"})),h("div",{class:"usa-form-group usa-form-group--year"},h("va-text-input",{label:instance.t("year"),name:t?`${t}Year`:"Year",maxlength:4,pattern:"[0-9]*","aria-describedby":g,invalid:this.invalidYear,value:null==c?void 0:c.toString(),onInput:r,onBlur:this.handleYearBlur,class:"usa-form-group--year-input memorable-date-input",reflectInputError:"year-range"===o,inputmode:"numeric",type:"text",error:this.invalidYear?v(o):null,"show-input-error":"false"}))))))}get el(){return this}static get style(){return vaMemorableDateCss}},[1,"va-memorable-date",{required:[4],useFormsPattern:[1,"use-forms-pattern"],formHeadingLevel:[2,"form-heading-level"],formHeading:[1,"form-heading"],monthSelect:[4,"month-select"],label:[1],name:[1],hint:[1],error:[1537],value:[1537],customDayErrorMessage:[1,"custom-day-error-message"],customMonthErrorMessage:[1,"custom-month-error-message"],customYearErrorMessage:[1,"custom-year-error-message"],invalidDay:[1028,"invalid-day"],invalidMonth:[1028,"invalid-month"],invalidYear:[1028,"invalid-year"],enableAnalytics:[4,"enable-analytics"]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-memorable-date","va-icon","va-select","va-text-input"].forEach((n=>{switch(n){case"va-memorable-date":customElements.get(n)||customElements.define(n,VaMemorableDate$1);break;case"va-icon":customElements.get(n)||defineCustomElement$4();break;case"va-select":customElements.get(n)||defineCustomElement$3();break;case"va-text-input":customElements.get(n)||defineCustomElement$2()}}))}const VaMemorableDate=VaMemorableDate$1,defineCustomElement=defineCustomElement$1;export{VaMemorableDate,defineCustomElement};
|
|
1
|
+
import{Build,proxyCustomElement,HTMLElement,createEvent,forceUpdate,h,Fragment,Host}from"@stencil/core/internal/client";import{v as validate,z as zeroPadStart,g as getErrorParameters,m as months}from"./date-utils.js";import{a as getHeaderLevel}from"./utils.js";import"./i18n-setup.js";import"./contacts.js";import{c as classnames}from"./index2.js";import{d as defineCustomElement$4}from"./va-icon2.js";import{d as defineCustomElement$3}from"./va-select2.js";import{d as defineCustomElement$2}from"./va-text-input2.js";import{i as instance}from"./i18next.js";const vaMemorableDateCss='button:not([disabled]):focus,select:not([disabled]):focus,a:not([disabled]):focus,h1:focus,input:not([disabled]):focus,textarea:not([disabled]):focus,#form-question [role=\'option\']:focus{outline:2px solid var(--vads-color-action-focus-on-light);outline-offset:2px}#error-message{margin-bottom:0.75rem}#error-message,#input-error-message{color:var(--vads-color-secondary-dark);display:block;font-weight:700;font-size:1.06rem}:host([error]:not([error=\'\'])){border-left:0.3rem solid var(--vads-color-secondary-dark);padding-left:1.25rem;position:relative}@media screen and (min-width: 1008px){:host([error]:not([error=\'\'])){margin-left:-1.4375rem;}}h1{margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:0;clear:both}*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-top:1.5em}h1+*,h2+*,h3+*,h4+*,h5+*,h6+*{margin-top:1em}h1{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:2.44rem;line-height:1.2;font-weight:700}h2{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.95rem;line-height:1.2;font-weight:700}h3{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.34rem;line-height:1.2;font-weight:700}h4{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.98rem;line-height:1.2;font-weight:700}h5{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:0.91rem;line-height:1.2;font-weight:700}h6{font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;font-size:0.87rem;line-height:1.1;font-weight:normal;letter-spacing:0.025em;text-transform:uppercase}h1,h2,h3,h4,h5{font-family:Bitter, Georgia, Cambria, "Times New Roman", Times, serif;font-weight:700}h6{font-family:"Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;font-weight:700}h1{margin-top:0;font-size:2.5rem}h2{font-size:1.875rem}h3{font-size:1.25rem}h4{font-size:1.0625rem}h5{font-size:0.9375rem}h6{font-size:0.9375rem}@media (max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}@media (max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:0.5em 0 0;text-transform:none;font-weight:700}:host legend :is(h1,h2,h3,h4,h5,h6),:host label :is(h1,h2,h3,h4,h5,h6){display:inline;margin:0px}:host legend :is(h1,h2,h3,h4,h5),:host label :is(h1,h2,h3,h4,h5){font-family:var(--font-serif)}:host h1+*,:host h2+*,:host h3+*,:host h4+*,:host h5+*,:host h6+*{margin-top:unset}:host #form-question{margin-bottom:1rem}.usa-hint,.usa-fieldset{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}.usa-sr-only{position:absolute;left:-999em;right:auto}.usa-form{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3}@media all and (min-width: 30em){.usa-form{max-width:20rem}}.usa-form abbr[title=required]{text-decoration:none}.usa-form .usa-input,.usa-form .usa-range,.usa-form .usa-select,.usa-form .usa-textarea{max-width:none}.usa-form .usa-input--2xs,.usa-form .usa-input-group--2xs{max-width:5ex}.usa-form .usa-input--xs,.usa-form .usa-input-group--xs{max-width:9ex}.usa-form .usa-input--sm,.usa-form .usa-input--small,.usa-form .usa-input-group--sm,.usa-form .usa-input-group--small{max-width:13ex}.usa-form .usa-input--md,.usa-form .usa-input--medium,.usa-form .usa-input-group--md,.usa-form .usa-input-group--medium{max-width:20ex}.usa-form .usa-input--lg,.usa-form .usa-input-group--lg{max-width:30ex}.usa-form .usa-input--xl,.usa-form .usa-input-group--xl{max-width:40ex}.usa-form .usa-input--2xl,.usa-form .usa-input-group--2xl{max-width:50ex}.usa-form .usa-button{margin-top:0.5rem}@media all and (min-width: 30em){.usa-form .usa-button{margin-top:1.5rem}}.usa-form a:where(:not(.usa-button)){color:#005ea2;text-decoration:underline}.usa-form a:where(:not(.usa-button)):visited{color:#54278f}.usa-form a:where(:not(.usa-button)):hover{color:#1a4480}.usa-form a:where(:not(.usa-button)):active{color:#162e51}.usa-form a:where(:not(.usa-button)):focus{outline:0.25rem solid #2491ff;outline-offset:0rem}@media all and (min-width: 30em){.usa-form--large{max-width:30rem}}.usa-show-password{color:#005ea2;text-decoration:underline;background-color:transparent;border:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none;font-weight:normal;-ms-flex-pack:normal;justify-content:normal;text-align:left;margin:0;padding:0;cursor:pointer}.usa-show-password:visited{color:#54278f}.usa-show-password:hover{color:#1a4480}.usa-show-password:active{color:#162e51}.usa-show-password:focus{outline:0.25rem solid #2491ff;outline-offset:0rem}.usa-show-password:hover,.usa-show-password.usa-button--hover,.usa-show-password:disabled:hover,.usa-show-password[aria-disabled=true]:hover,.usa-show-password:disabled.usa-button--hover,.usa-show-password[aria-disabled=true].usa-button--hover,.usa-show-password:active,.usa-show-password.usa-button--active,.usa-show-password:disabled:active,.usa-show-password[aria-disabled=true]:active,.usa-show-password:disabled.usa-button--active,.usa-show-password[aria-disabled=true].usa-button--active,.usa-show-password:disabled:focus,.usa-show-password[aria-disabled=true]:focus,.usa-show-password:disabled.usa-focus,.usa-show-password[aria-disabled=true].usa-focus,.usa-show-password:disabled,.usa-show-password[aria-disabled=true],.usa-show-password.usa-button--disabled{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;text-decoration:underline}.usa-show-password.usa-button--hover{color:#1a4480}.usa-show-password.usa-button--active{color:#162e51}.usa-show-password:disabled,.usa-show-password[aria-disabled=true],.usa-show-password:disabled:hover,.usa-show-password[aria-disabled=true]:hover,.usa-show-password[aria-disabled=true]:focus{color:#757575}@media (forced-colors: active){.usa-show-password:disabled,.usa-show-password[aria-disabled=true],.usa-show-password:disabled:hover,.usa-show-password[aria-disabled=true]:hover,.usa-show-password[aria-disabled=true]:focus{color:GrayText}}.usa-form__note,.usa-show-password{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:0.93rem;line-height:1.3;float:right;margin:0.25rem 0 1rem}.usa-fieldset{border:none;margin:0;padding:0}.usa-legend{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3;display:block;font-weight:normal;margin-top:1.5rem;max-width:30rem}.usa-legend--large{font-size:2.13rem;font-weight:700;margin-top:1rem}.usa-label{font-family:Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;font-size:1.06rem;line-height:1.3;display:block;font-weight:normal;margin-top:1.5rem;max-width:30rem}.usa-label--error{font-weight:700;margin-top:0}.usa-label--required{color:#b50909}.usa-hint{color:#71767a}.usa-hint--required{color:#b50909}.usa-form-group{margin-top:1.5rem}.usa-form-group .usa-label:first-child{margin-top:0}.usa-form-group--error{border-left-width:0.25rem;border-left-color:#b50909;border-left-style:solid;padding-left:1rem;position:relative}@media all and (min-width: 64em){.usa-form-group--error{margin-left:-1.25rem}}.usa-error-message{padding-bottom:0.25rem;padding-top:0.25rem;color:#b50909;display:block;font-weight:700}.usa-memorable-date{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.usa-memorable-date [type=number]{-moz-appearance:textfield}.usa-memorable-date [type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none}.usa-memorable-date [type=number]::-webkit-contacts-auto-fill-button{visibility:hidden;display:none !important;pointer-events:none;height:0;width:0;margin:0}.usa-memorable-date .usa-form-group{margin-top:1rem}.usa-form-group--day,.usa-form-group--month,.usa-form-group--year{-ms-flex:0 1 auto;flex:0 1 auto;margin-right:1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.usa-form-group--day input,.usa-form-group--month input{width:3rem}.usa-form-group--month select{width:15rem}.usa-form-group--year input{width:4.5rem}.usa-error-message{font-size:1.06rem}:host([error]:not([error=""])){border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}:host([error]:not([error=""])[use-forms-pattern=multiple]){border-left:none}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap{border-left:0.25rem solid #b50909;padding-left:1rem;position:relative}@media screen and (min-width: 1008px){:host([error]:not([error=""])){margin-left:-0.9rem}:host([error]:not([error=""])[use-forms-pattern=multiple]) .input-wrap{margin-left:-0.9rem}}@media screen and (max-width: 1008px){:host([error]:not([error=""])[use-forms-pattern=multiple]){padding-left:0}}:host{display:block;font-family:var(--font-source-sans);margin-top:24px}#error-message{margin-bottom:0}.usa-hint{display:block}slot:not([name])::slotted(*){margin-bottom:0.5rem}va-select::part(label),va-text-input::part(label){margin-top:0;margin-bottom:12px}va-text-input::part(validation){display:none}.usa-memorable-date{margin-top:16px;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.usa-memorable-date .usa-form-group{margin-top:0px}.usa-form-group--month{margin-right:16px}.usa-form-group--month-input{width:48px}.usa-form-group--month-select{width:15rem}.usa-form-group--day-input{width:3rem}.usa-form-group--year-input{width:4.5rem}@media (max-width: 480px){.usa-form-group--month-select{width:100%}.usa-form-group--select{-ms-flex:0 1 50%;flex:0 1 50%;width:50%}}',VaMemorableDateStyle0=vaMemorableDateCss;Build.isTesting&&instance.init({lng:"cimode"});const VaMemorableDate$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.dateChange=createEvent(this,"dateChange",7),this.dateBlur=createEvent(this,"dateBlur",7),this.componentLibraryAnalytics=createEvent(this,"component-library-analytics",7),this.dayTouched=!1,this.monthTouched=!1,this.yearTouched=!1,this.handleDateBlur=e=>{const[a,t,r]=(this.value||"").split("-"),o=Number(a),s=Number(t),i=Number(r);if(validate({component:this,year:o,month:s,day:i,yearTouched:this.yearTouched,monthTouched:this.monthTouched,dayTouched:this.dayTouched,monthSelect:this.monthSelect}),!this.error&&(this.value=a||t||r?`${a}-${t?zeroPadStart(s):""}-${r?zeroPadStart(i):""}`:"",this.dateBlur.emit(e),this.enableAnalytics)){const e={componentName:"va-memorable-date",action:"blur",details:{label:this.label,year:o,month:s,day:i}};this.componentLibraryAnalytics.emit(e)}},this.handleMonthChange=e=>{this.handleDateChange(e)},this.handleDateChange=e=>{const a=e.target;let[t,r,o]=(this.value||"").split("-");(a.classList.contains("input-month")||a.classList.contains("usa-form-group--month-input")||a.classList.contains("usa-form-group--month-select"))&&(r=a.value),(a.classList.contains("input-day")||a.classList.contains("usa-form-group--day-input"))&&(o=a.value),(a.classList.contains("input-year")||a.classList.contains("usa-form-group--year-input"))&&(t=a.value),this.value=t||r||o?`${t}-${r||""}-${o||""}`:"",this.dateChange.emit(e)},this.handleMonthBlur=()=>{this.monthTouched=!0},this.handleDayBlur=()=>{this.dayTouched=!0},this.handleYearBlur=()=>{this.yearTouched=!0},this.required=!1,this.useFormsPattern=void 0,this.formHeadingLevel=3,this.formHeading=void 0,this.monthSelect=!1,this.label=void 0,this.name=void 0,this.hint=void 0,this.error=void 0,this.value=void 0,this.customDayErrorMessage=void 0,this.customMonthErrorMessage=void 0,this.customYearErrorMessage=void 0,this.invalidDay=!1,this.invalidMonth=!1,this.invalidYear=!1,this.enableAnalytics=!1}connectedCallback(){instance.on("languageChanged",(()=>{forceUpdate(this.el)}))}disconnectedCallback(){instance.off("languageChanged")}render(){const{required:e,label:a,name:t,hint:r,error:o,handleDateBlur:s,handleDateChange:i,value:n,monthSelect:l,useFormsPattern:u,formHeadingLevel:m,formHeading:d}=this,[p,f,c]=(n||"").split("-"),g=["dateHint",r?"hint":""].filter(Boolean).join(" "),b=l?instance.t("date-hint-with-select"):instance.t("date-hint"),w=e=>instance.t(e,(e=>{const a=parseInt(p),t=parseInt(f);return getErrorParameters(e,a,t)})(e)),v=`${u&&d?"form-question":""} ${u?"form-description":""} ${u&&a?"input-label":""}`.trim()||null;let y=null;if("single"===u||"multiple"===u){const e=getHeaderLevel(m);y=h(Fragment,null,d&&h(e,{id:"form-question",part:"form-header"},d),h("div",{id:"form-description"},h("slot",{name:"form-description"})))}const x=l?h("div",{class:"usa-form-group usa-form-group--month usa-form-group--select"},h("va-select",{label:instance.t("month"),name:t?`${t}Month`:"Month","aria-describedby":g,"aria-labelledby":v,invalid:this.invalidMonth,onVaSelect:this.handleMonthChange,onBlur:this.handleMonthBlur,class:"usa-form-group--month-select",reflectInputError:"month-range"===o,value:f?String(parseInt(f)):f,error:this.invalidMonth?w(o):null,showError:!1},months&&months.map((e=>h("option",{value:e.value,selected:e.value===parseInt(f)},e.label))))):h("div",{class:"usa-form-group usa-form-group--month"},h("va-text-input",{label:instance.t("month"),name:t?`${t}Month`:"Month",maxlength:2,pattern:"[0-9]*","aria-describedby":g,"aria-labelledby":v,invalid:this.invalidMonth,value:null==f?void 0:f.toString(),onInput:i,onBlur:this.handleMonthBlur,class:"usa-form-group--month-input memorable-date-input",reflectInputError:"month-range"===o,inputmode:"numeric",type:"text",error:this.invalidMonth?w(o):null,"show-input-error":"false"})),M=classnames({"usa-legend":!0,"usa-label--error":o});return h(Host,{onBlur:s},y,h("div",{class:"input-wrap"},h("fieldset",{class:"usa-form usa-fieldset"},h("legend",{class:M,id:"input-label",part:"legend"},a,e&&h("span",{class:"usa-label--required"}," ",instance.t("required")),r&&h("div",{class:"usa-hint",id:"hint"},r),h("span",{class:"usa-hint",id:"dateHint"},b)),h("span",{id:"error-message",role:"alert"},o&&h(Fragment,null,h("span",{class:"usa-sr-only"},instance.t("error")),h("span",{class:"usa-error-message"},(e=>{let a="";return this.invalidDay?a=this.customDayErrorMessage:this.invalidMonth?a=this.customMonthErrorMessage:this.invalidYear&&(a=this.customYearErrorMessage),a||w(e)})(o)))),h("slot",null),h("div",{class:"usa-memorable-date"},x,h("div",{class:"usa-form-group usa-form-group--day"},h("va-text-input",{label:instance.t("day"),name:t?`${t}Day`:"Day",maxlength:2,pattern:"[0-9]*","aria-describedby":g,invalid:this.invalidDay,value:null==c?void 0:c.toString(),onInput:i,onBlur:this.handleDayBlur,class:"usa-form-group--day-input memorable-date-input",reflectInputError:"day-range"===o,inputmode:"numeric",type:"text",error:this.invalidDay?w(o):null,"show-input-error":"false"})),h("div",{class:"usa-form-group usa-form-group--year"},h("va-text-input",{label:instance.t("year"),name:t?`${t}Year`:"Year",maxlength:4,pattern:"[0-9]*","aria-describedby":g,invalid:this.invalidYear,value:null==p?void 0:p.toString(),onInput:i,onBlur:this.handleYearBlur,class:"usa-form-group--year-input memorable-date-input",reflectInputError:"year-range"===o,inputmode:"numeric",type:"text",error:this.invalidYear?w(o):null,"show-input-error":"false"}))))))}get el(){return this}static get style(){return VaMemorableDateStyle0}},[1,"va-memorable-date",{required:[4],useFormsPattern:[1,"use-forms-pattern"],formHeadingLevel:[2,"form-heading-level"],formHeading:[1,"form-heading"],monthSelect:[4,"month-select"],label:[1],name:[1],hint:[1],error:[1537],value:[1537],customDayErrorMessage:[1,"custom-day-error-message"],customMonthErrorMessage:[1,"custom-month-error-message"],customYearErrorMessage:[1,"custom-year-error-message"],invalidDay:[1028,"invalid-day"],invalidMonth:[1028,"invalid-month"],invalidYear:[1028,"invalid-year"],enableAnalytics:[4,"enable-analytics"]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["va-memorable-date","va-icon","va-select","va-text-input"].forEach((e=>{switch(e){case"va-memorable-date":customElements.get(e)||customElements.define(e,VaMemorableDate$1);break;case"va-icon":customElements.get(e)||defineCustomElement$4();break;case"va-select":customElements.get(e)||defineCustomElement$3();break;case"va-text-input":customElements.get(e)||defineCustomElement$2()}}))}const VaMemorableDate=VaMemorableDate$1,defineCustomElement=defineCustomElement$1;export{VaMemorableDate,defineCustomElement};
|
|
@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
|
|
|
2
2
|
|
|
3
3
|
interface VaMinimalFooter extends Components.VaMinimalFooter, HTMLElement {}
|
|
4
4
|
export const VaMinimalFooter: {
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
prototype: VaMinimalFooter;
|
|
6
|
+
new (): VaMinimalFooter;
|
|
7
7
|
};
|
|
8
8
|
/**
|
|
9
9
|
* Used to define this component and all nested components recursively.
|