custom-elements.json

{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "scripts/rmrf.js",
      "declarations": [],
      "exports": []
    },
    {
      "kind": "javascript-module",
      "path": "dist/components/index.js",
      "declarations": [],
      "exports": [
        {
          "kind": "js",
          "name": "UsaBanner",
          "declaration": {
            "name": "n",
            "module": "dist/components/index.js"
          }
        },
        {
          "kind": "js",
          "name": "UsaLink",
          "declaration": {
            "name": "a",
            "module": "dist/components/index.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "dist/components/usa-banner.js",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "I",
          "members": [
            {
              "kind": "method",
              "name": "toggle"
            },
            {
              "kind": "field",
              "name": "_bannerText",
              "readonly": true
            },
            {
              "kind": "field",
              "name": "_actionText",
              "readonly": true
            },
            {
              "kind": "method",
              "name": "domainTemplate",
              "parameters": [
                {
                  "name": "e"
                }
              ]
            },
            {
              "kind": "method",
              "name": "lockIcon"
            },
            {
              "kind": "method",
              "name": "httpsTemplate",
              "parameters": [
                {
                  "name": "e"
                }
              ]
            },
            {
              "kind": "field",
              "name": "lang",
              "type": {
                "text": "string"
              },
              "default": "\"en\""
            },
            {
              "kind": "field",
              "name": "isOpen",
              "type": {
                "text": "boolean"
              },
              "default": "!1"
            },
            {
              "kind": "field",
              "name": "tld",
              "type": {
                "text": "string"
              },
              "default": "\"gov\""
            },
            {
              "kind": "field",
              "name": "data",
              "type": {
                "text": "object"
              },
              "default": "{ en: { banner: { label: \"Official website of the United States government\", text: \"An official website of the United States government\", action: \"Here's how you know\" }, domain: { heading: \"Official websites use\", text1: \"A\", text2: \"website belongs to an official government organization in the United States.\" }, https: { heading1: \"Secure\", heading2: \"websites use HTTPS\", text1: \"A <strong>lock</strong>\", text2: \"or <strong>https://</strong> means you’ve safely connected to the\", text3: \"website. Share sensitive information only on official, secure websites.\" } }, es: { banner: { label: \"Un sitio oficial del Gobierno de Estados Unidos\", text: \"Un sitio oficial del Gobierno de Estados Unidos\", action: \"Así es como usted puede verificarlo\" }, domain: { heading: \"Los sitios web oficiales usan\", text1: \"Un sitio web\", text2: \"pertenece a una organización oficial del Gobierno de Estados Unidos.\" }, https: { heading1: \"Los sitios web seguros\", heading2: \"usan HTTPS\", text1: \"Un <strong>candado</strong>\", text2: \"o <strong>https://</strong> significa que usted se conectó de forma segura a un sitio web\", text3: \"Comparta información sensible sólo en sitios web oficiales y seguros.\" } } }"
            }
          ],
          "superclass": {
            "name": "re",
            "package": "lit"
          },
          "tagName": "usa-banner",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "custom-element-definition",
          "name": "usa-banner",
          "declaration": {
            "name": "I",
            "module": "dist/components/usa-banner.js"
          }
        },
        {
          "kind": "js",
          "name": "UsaBanner",
          "declaration": {
            "name": "I",
            "module": "dist/components/usa-banner.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "dist/components/usa-link.js",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "i",
          "members": [
            {
              "kind": "method",
              "name": "hasLinkChild"
            },
            {
              "kind": "method",
              "name": "templateWithChildren"
            },
            {
              "kind": "method",
              "name": "templateWithSlots"
            }
          ],
          "superclass": {
            "name": "n",
            "package": "lit"
          },
          "tagName": "usa-link",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "custom-element-definition",
          "name": "usa-link",
          "declaration": {
            "name": "i",
            "module": "dist/components/usa-link.js"
          }
        },
        {
          "kind": "js",
          "name": "UsaLink",
          "declaration": {
            "name": "i",
            "module": "dist/components/usa-link.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/index.js",
      "declarations": [],
      "exports": [
        {
          "kind": "js",
          "name": "UsaLink",
          "declaration": {
            "name": "UsaLink",
            "module": "src/components/index.js"
          }
        },
        {
          "kind": "js",
          "name": "UsaBanner",
          "declaration": {
            "name": "UsaBanner",
            "module": "src/components/index.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/usa-banner/banner.spec.js",
      "declarations": [],
      "exports": []
    },
    {
      "kind": "javascript-module",
      "path": "src/components/usa-banner/banner.stories.js",
      "declarations": [
        {
          "kind": "variable",
          "name": "Default",
          "type": {
            "text": "object"
          },
          "default": "{}"
        },
        {
          "kind": "variable",
          "name": "CustomContent",
          "type": {
            "text": "object"
          },
          "default": "{ argTypes: { tld: { table: { disable: true } }, lang: { table: { disable: true } }, }, args: { label: \"Un site Web officiel du gouvernement américain\", bannerText: \"Un site Web officiel du gouvernement américain\", bannerAction: \"Voici comment vous le savez\", domainHeading: \"Les sites Web officiels utilisent\", domainText: \"Un site Web .gov appartient à une organisation gouvernementale officielle aux États-Unis.\", httpsHeading: \"Les sites Web .gov sécurisés utilisent HTTPS\", httpsText: `Un <strong>verrou</strong> (<span class=\"usa-banner__icon-lock\" role=\"img\" aria-label=\"Locked padlock icon\"></span>) ou <strong>https://</strong> signifie que vous êtes connecté(e) en toute sécurité au site Web .gov. Assurez-vous de ne partager des informations sensibles que sur des sites Web officiels et sécurisés.`, tld: \"mil\", }, render: ({ label, bannerText, bannerAction, domainHeading, domainText, httpsHeading, httpsText, }) => html` <usa-banner label=${label || nothing}> <span slot=\"banner-text\">${bannerText}</span> <span slot=\"banner-action\">${bannerAction}</span> <span slot=\"domain-heading\">${domainHeading}</span> <span slot=\"domain-text\">${domainText}</span> <span slot=\"https-heading\">${httpsHeading}</span> <span slot=\"https-text\">${unsafeHTML(httpsText)}</span> </usa-banner> `, }"
        },
        {
          "kind": "variable",
          "name": "Mil",
          "type": {
            "text": "object"
          },
          "default": "{ args: { tld: \"mil\", }, }"
        },
        {
          "kind": "variable",
          "name": "EspañolGov",
          "type": {
            "text": "object"
          },
          "default": "{ args: { lang: \"es\", }, }"
        },
        {
          "kind": "variable",
          "name": "EspañolMil",
          "type": {
            "text": "object"
          },
          "default": "{ args: { lang: \"es\", tld: \"mil\", }, }"
        },
        {
          "kind": "variable",
          "name": "ToggleBanner",
          "type": {
            "text": "object"
          },
          "default": "{ play: async ({ canvasElement }) => { const canvas = within(canvasElement); const button = canvas.getByShadowRole(\"button\"); const dotGovText = canvas.getByShadowText(\"Official websites use .gov\"); userEvent.click(button); await waitFor(() => { expect(dotGovText).toBeVisible(); }); userEvent.click(button); await waitFor(() => { expect(dotGovText).not.toBeVisible(); }); }, }"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "default",
          "declaration": {
            "module": "src/components/usa-banner/banner.stories.js"
          }
        },
        {
          "kind": "js",
          "name": "Default",
          "declaration": {
            "name": "Default",
            "module": "src/components/usa-banner/banner.stories.js"
          }
        },
        {
          "kind": "js",
          "name": "CustomContent",
          "declaration": {
            "name": "CustomContent",
            "module": "src/components/usa-banner/banner.stories.js"
          }
        },
        {
          "kind": "js",
          "name": "Mil",
          "declaration": {
            "name": "Mil",
            "module": "src/components/usa-banner/banner.stories.js"
          }
        },
        {
          "kind": "js",
          "name": "EspañolGov",
          "declaration": {
            "name": "EspañolGov",
            "module": "src/components/usa-banner/banner.stories.js"
          }
        },
        {
          "kind": "js",
          "name": "EspañolMil",
          "declaration": {
            "name": "EspañolMil",
            "module": "src/components/usa-banner/banner.stories.js"
          }
        },
        {
          "kind": "js",
          "name": "ToggleBanner",
          "declaration": {
            "name": "ToggleBanner",
            "module": "src/components/usa-banner/banner.stories.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/usa-banner/index.js",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "UsaBanner",
          "cssProperties": [
            {
              "description": "Sets banner background color.",
              "name": "--theme-banner-background-color"
            },
            {
              "description": "Sets banner font family.",
              "name": "--theme-banner-font-family"
            },
            {
              "description": "Sets the default link color.",
              "name": "--theme-banner-link-color"
            },
            {
              "description": "Sets the default link color.",
              "name": "--theme-banner-link-hover-color"
            }
          ],
          "slots": [
            {
              "description": "The text for official government website text.",
              "name": "banner-text"
            },
            {
              "description": "Action text label \"Here's how you know.\"",
              "name": "banner-action"
            },
            {
              "description": "Heading text for the domain section.",
              "name": "domain-heading"
            },
            {
              "description": "Body text for domain section.",
              "name": "domain-text"
            },
            {
              "description": "Heading for HTTPs section.",
              "name": "https-heading"
            },
            {
              "description": "Body text for HTTPs section.",
              "name": "https-text"
            }
          ],
          "members": [
            {
              "kind": "method",
              "name": "toggle"
            },
            {
              "kind": "field",
              "name": "_bannerText",
              "readonly": true
            },
            {
              "kind": "field",
              "name": "_actionText",
              "readonly": true
            },
            {
              "kind": "method",
              "name": "domainTemplate",
              "parameters": [
                {
                  "name": "tld"
                }
              ]
            },
            {
              "kind": "method",
              "name": "lockIcon"
            },
            {
              "kind": "method",
              "name": "httpsTemplate",
              "parameters": [
                {
                  "name": "tld"
                }
              ]
            },
            {
              "kind": "field",
              "name": "lang",
              "privacy": "public",
              "type": {
                "text": "string"
              },
              "default": "\"en\"",
              "attribute": "lang",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "isOpen",
              "privacy": "public",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "attribute": "isOpen"
            },
            {
              "kind": "field",
              "name": "tld",
              "privacy": "public",
              "type": {
                "text": "string"
              },
              "default": "\"gov\"",
              "attribute": "tld",
              "reflects": true
            },
            {
              "kind": "field",
              "name": "data",
              "privacy": "public",
              "type": {
                "text": "object"
              },
              "default": "{ en: { banner: { label: \"Official website of the United States government\", text: \"An official website of the United States government\", action: \"Here's how you know\", }, domain: { heading: \"Official websites use\", text1: \"A\", text2: \"website belongs to an official government organization in the United States.\", }, https: { heading1: \"Secure\", heading2: \"websites use HTTPS\", text1: \"A <strong>lock</strong>\", text2: \"or <strong>https://</strong> means you’ve safely connected to the\", text3: \"website. Share sensitive information only on official, secure websites.\", }, }, es: { banner: { label: \"Un sitio oficial del Gobierno de Estados Unidos\", text: \"Un sitio oficial del Gobierno de Estados Unidos\", action: \"Así es como usted puede verificarlo\", }, domain: { heading: \"Los sitios web oficiales usan\", text1: \"Un sitio web\", text2: \"pertenece a una organización oficial del Gobierno de Estados Unidos.\", }, https: { heading1: \"Los sitios web seguros\", heading2: \"usan HTTPS\", text1: \"Un <strong>candado</strong>\", text2: \"o <strong>https://</strong> significa que usted se conectó de forma segura a un sitio web\", text3: \"Comparta información sensible sólo en sitios web oficiales y seguros.\", }, }, }"
            },
            {
              "kind": "field",
              "name": "classes",
              "privacy": "public",
              "attribute": "classes"
            },
            {
              "kind": "field",
              "name": "label",
              "privacy": "public",
              "type": {
                "text": "string"
              },
              "attribute": "label"
            }
          ],
          "attributes": [
            {
              "type": {
                "text": "string"
              },
              "description": "The element's language.",
              "name": "lang",
              "default": "\"en\"",
              "fieldName": "lang"
            },
            {
              "type": {
                "text": "string"
              },
              "description": "The custom aria label users can override.",
              "name": "label",
              "fieldName": "label"
            },
            {
              "type": {
                "text": "string"
              },
              "description": "The top level domain for the site.",
              "name": "tld",
              "default": "\"gov\"",
              "fieldName": "tld"
            },
            {
              "name": "isOpen",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "fieldName": "isOpen"
            },
            {
              "name": "classes",
              "fieldName": "classes"
            }
          ],
          "superclass": {
            "name": "LitElement",
            "package": "lit"
          },
          "tagName": "usa-banner",
          "summary": "The usa-banner component.",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "UsaBanner",
          "declaration": {
            "name": "UsaBanner",
            "module": "src/components/usa-banner/index.js"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "usa-banner",
          "declaration": {
            "name": "UsaBanner",
            "module": "src/components/usa-banner/index.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/usa-banner/usa-banner.scss.js",
      "declarations": [
        {
          "kind": "variable",
          "name": "bannerStyles",
          "type": {
            "text": "array"
          },
          "default": "[ unsafeCSS(usaBannerStyle), css` :host { --theme-banner-background-color: var(--usa-base-lightest, #f0f0f0); --theme-banner-font-family: var(--usa-font-ui, system-ui, sans-serif); --theme-banner-link-color: var(--theme-link-color, #005ea2); --theme-banner-link-color-hover: var(--theme-link-hover-color, #1a4480); // Missing theme-banner-max-width because we can't pass custom property to media queries. } * { box-sizing: border-box; } .usa-banner { background-color: var(--theme-banner-background-color); font-family: var(--theme-banner-font-family); } .usa-banner__inner { flex-wrap: nowrap; } /* Allows banner action to inherit font variable. */ .usa-banner .usa-accordion { font-family: inherit; } .usa-banner__button { color: var(--theme-banner-link-color); cursor: pointer; font-family: inherit; } .usa-banner__button:hover { color: var(--theme-banner-link-hover-color); } /* In USWDS close icon is set via max-width media query, flipped it here. */ .usa-banner__button::after, .usa-banner__header-action::after { background-image: url(\"${unsafeCSS(expandMore)}\"); mask-image: url(\"${unsafeCSS(expandMore)}\"); } .usa-banner__button[aria-expanded=\"true\"]::after { background-image: url(\"${unsafeCSS(close)}\"); mask-image: url(\"${unsafeCSS(close)}\"); } /** * HTTPS section lock icon. * * Rewrote styles to avoid reliance of SASS mixins & functions. * * Height and width taken from calculated output in USWDS 3 banner. */ .usa-banner__icon-lock { background-image: url(\"${unsafeCSS(lock)}\"); background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; height: 1.5ex; mask-image: url(\"${unsafeCSS(lock)}\"); mask-position: center; mask-repeat: no-repeat; mask-size: cover; vertical-align: middle; width: 1.21875ex; } @media all and (min-width: 40em) { .usa-banner__button[aria-expanded=\"true\"]::after { background-image: url(\"${unsafeCSS(expandLess)}\"); mask-image: url(\"${unsafeCSS(expandLess)}\"); } } `, ]"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "bannerStyles",
          "declaration": {
            "name": "bannerStyles",
            "module": "src/components/usa-banner/usa-banner.scss.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/usa-link/index.js",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "UsaLink",
          "cssProperties": [
            {
              "description": "Sets the link color",
              "name": "--theme-link-color"
            },
            {
              "description": "Sets the color for visited links",
              "name": "--theme-link-visited-color"
            },
            {
              "description": "Sets the hover state link color",
              "name": "--theme-link-hover-color"
            },
            {
              "description": "Sets the active state link color",
              "name": "--theme-link-active-color"
            }
          ],
          "slots": [
            {
              "description": "This element has a slot",
              "name": ""
            }
          ],
          "members": [
            {
              "kind": "method",
              "name": "hasLinkChild"
            },
            {
              "kind": "method",
              "name": "templateWithChildren"
            },
            {
              "kind": "method",
              "name": "templateWithSlots"
            },
            {
              "kind": "field",
              "name": "href",
              "privacy": "public",
              "attribute": "href"
            }
          ],
          "attributes": [
            {
              "type": {
                "text": "String"
              },
              "description": "The url for the link",
              "name": "href",
              "fieldName": "href"
            }
          ],
          "superclass": {
            "name": "LitElement",
            "package": "lit"
          },
          "tagName": "usa-link",
          "summary": "The usa-link component.",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "UsaLink",
          "declaration": {
            "name": "UsaLink",
            "module": "src/components/usa-link/index.js"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "usa-link",
          "declaration": {
            "name": "UsaLink",
            "module": "src/components/usa-link/index.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/usa-link/link.stories.js",
      "declarations": [
        {
          "kind": "variable",
          "name": "Default",
          "type": {
            "text": "object"
          },
          "default": "{}"
        },
        {
          "kind": "variable",
          "name": "ChildLink",
          "type": {
            "text": "object"
          },
          "default": "{ parameters: { a11y: { config: { rules: [ { // It seems like this is just an issue with the test not // knowing about shadow DOM content projecting into the slot // but this should be verified manually id: \"link-name\", reviewOnFail: true, }, ], }, }, }, render: ({ href, label }) => html` <usa-link> <a href=\"${href}\">${label}</a> </usa-link> `, }"
        },
        {
          "kind": "variable",
          "name": "Inverse",
          "type": {
            "text": "object"
          },
          "default": "{ parameters: { backgrounds: { default: \"dark\" }, }, }"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "default",
          "declaration": {
            "module": "src/components/usa-link/link.stories.js"
          }
        },
        {
          "kind": "js",
          "name": "Default",
          "declaration": {
            "name": "Default",
            "module": "src/components/usa-link/link.stories.js"
          }
        },
        {
          "kind": "js",
          "name": "ChildLink",
          "declaration": {
            "name": "ChildLink",
            "module": "src/components/usa-link/link.stories.js"
          }
        },
        {
          "kind": "js",
          "name": "Inverse",
          "declaration": {
            "name": "Inverse",
            "module": "src/components/usa-link/link.stories.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/usa-link/usa-link.css.js",
      "declarations": [],
      "exports": [
        {
          "kind": "js",
          "name": "default",
          "declaration": {
            "module": "src/components/usa-link/usa-link.css.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/usa-link/usa-link.spec.js",
      "declarations": [],
      "exports": []
    }
  ]
}