@ogds/elements 1.0.0-alpha.6 → 1.0.0-alpha.8

package/dist/components/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.cjs","sources":["../../src/shared/icons/add.svg","../../src/shared/icons/remove.svg","../../src/core/token-styles.ts","../../src/components/ogds-accordion/index.ts","../../src/components/ogds-accordion-toggle/index.ts"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%2013h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%2013H5v-2h14v2z'/%3e%3c/svg%3e\"","import colorTokens from \"@ogds/tokens/styles/css/colors.css\";\nimport spacingTokens from \"@ogds/tokens/styles/css/spacing.css\";\nimport typographyTokens from \"@ogds/tokens/styles/css/typography.css\";\nimport themeColorTokens from \"@ogds/tokens/styles/css/theme-color.css\";\nimport themeComponentTokens from \"@ogds/tokens/styles/css/theme-components.css\";\nimport themeSpacingTokens from \"@ogds/tokens/styles/css/theme-spacing.css\";\nimport themeTypographyTokens from \"@ogds/tokens/styles/css/theme-typography.css\";\n\nconst sheet = new CSSStyleSheet();\nsheet.replaceSync(\n  [\n    colorTokens,\n    spacingTokens,\n    typographyTokens,\n    themeColorTokens,\n    themeComponentTokens,\n    themeSpacingTokens,\n    themeTypographyTokens,\n  ]\n    .map((s) => s.cssText)\n    .join(\"\\n\"),\n);\n\nexport function adoptTokenStyles() {\n  if (!document.adoptedStyleSheets.includes(sheet)) {\n    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];\n  }\n}\n","import { LitElement, nothing } from \"lit\";\n\nimport styles from \"./ogds-accordion.css\";\nimport iconChevronDown from \"../../shared/icons/expand_more.svg\";\nimport iconChevronUp from \"../../shared/icons/expand_less.svg\";\nimport iconPlus from \"../../shared/icons/add.svg\";\nimport iconMinus from \"../../shared/icons/remove.svg\";\n\nimport { adoptTokenStyles } from \"../../core/token-styles\";\nimport { defineCustomElement } from \"../../utils\";\nimport { property } from \"lit/decorators.js\";\n\n/**\n * @summary The ogds-accordion component.\n *\n * Apply these classes to `<ogds-accordion>` to enable variants:\n * - `bordered` — adds a border to expanded content\n * - `with-icon` — shows a chevron icon on each summary\n * - `with-icon plus` — uses plus/minus icons instead of chevrons\n * - `with-icon right` — aligns the icon to the right\n *\n * @cssprop --ogds-accordion-border - Border used in the bordered variant.\n * @cssprop --ogds-accordion-content-padding - Padding for the expanded content area.\n * @cssprop --ogds-accordion-icon-closed - Icon shown when a panel is closed. Defaults to a chevron pointing down. CSS-only users must set this to a url() value pointing to their own icon asset.\n * @cssprop --ogds-accordion-icon-open - Icon shown when a panel is open. Defaults to a chevron pointing up. CSS-only users must set this to a url() value pointing to their own icon asset.\n * @attribute {boolean} use-list-semantics - Adds `role=\"list\"` to the component and `role=\"listitem\"` to each `<details>` child, conveying the accordion as a list to assistive technologies. Mutually exclusive with `heading-level`.\n * @attribute {number} heading-level - Sets a heading level for each accordion panel by adding `role=\"heading\"` and the corresponding `aria-level` to each `<summary>` element. Has no effect when set to `0` (the default). Mutually exclusive with `use-list-semantics`.\n *\n * @slot - The default (only) slot for the <ogds-accordion> expects one or more plain HTML <details> elements.\n * @element ogds-accordion\n */\nexport class OgdsAccordion extends LitElement {\n  /** @ignore */\n  private static _sheet: CSSStyleSheet | null = null;\n\n  @property({ type: Boolean, attribute: \"use-list-semantics\" })\n  useListSemantics = false;\n\n  @property({ type: Number, attribute: \"heading-level\" })\n  headingLevel = 0;\n\n  declare detailsChildren: HTMLCollectionOf<HTMLDetailsElement> | undefined;\n  declare childRoles: Map<HTMLDetailsElement, Set<string>>;\n\n  override createRenderRoot() {\n    return this;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    adoptTokenStyles();\n    if (!OgdsAccordion._sheet) {\n      OgdsAccordion._sheet = new CSSStyleSheet();\n      OgdsAccordion._sheet.replaceSync(\n        `ogds-accordion, .ogds-accordion {\n          --icon-chevron-pointing-down: url(\"${iconChevronDown}\");\n          --icon-chevron-pointing-up: url(\"${iconChevronUp}\");\n          --icon-plus: url(\"${iconPlus}\");\n          --icon-minus: url(\"${iconMinus}\");\n        }\\n` + styles.cssText,\n      );\n      document.adoptedStyleSheets = [\n        ...document.adoptedStyleSheets,\n        OgdsAccordion._sheet,\n      ];\n    }\n    this.detailsChildren = this.getDetailsChildren();\n    this.childRoles = new Map(\n      Array.from(this.detailsChildren ?? []).map((el) => [el, new Set()]),\n    );\n  }\n\n  override firstUpdated() {\n    if (this.useListSemantics && this.headingLevel !== 0) {\n      console.warn(\n        \"<ogds-accordion>: use-list-semantics and heading-level are mutually exclusive. \" +\n          \"Screen readers cannot reliably announce both list position and heading level \" +\n          \"on the same element. Remove one attribute.\",\n      );\n      return;\n    }\n    this.addListSemantics();\n    this.addHeadingSemantics();\n    this.applyChildRoles();\n  }\n\n  getDetailsChildren() {\n    const detailsEls = this.getElementsByTagName(\"details\");\n    if (detailsEls.length > 0) {\n      return detailsEls;\n    } else {\n      console.error(\n        \"<ogds-accordion>: This component expects to have at least one details element as a child\",\n      );\n    }\n  }\n\n  addListSemantics() {\n    if (this.useListSemantics && this.detailsChildren) {\n      Array.from(this.detailsChildren).forEach((el) =>\n        this.childRoles.get(el)?.add(\"listitem\"),\n      );\n      this.setAttribute(\"role\", \"list\");\n    }\n  }\n\n  addHeadingSemantics() {\n    const headingLevel = this.headingLevel;\n\n    if (headingLevel !== 0 && this.detailsChildren) {\n      Array.from(this.detailsChildren).forEach((el) => {\n        const summary = el.querySelector(\"summary\");\n        if (summary) {\n          summary.setAttribute(\"role\", \"heading\");\n          summary.setAttribute(\"aria-level\", String(headingLevel));\n        }\n      });\n    }\n  }\n\n  applyChildRoles() {\n    this.childRoles.forEach((roles, el) => {\n      if (roles.size > 0) el.setAttribute(\"role\", Array.from(roles).join(\" \"));\n    });\n  }\n\n  render() {\n    return nothing;\n  }\n}\n\ndefineCustomElement(\"ogds-accordion\", OgdsAccordion);\n","import { LitElement, html } from \"lit\";\nimport { adoptTokenStyles } from \"../../core/token-styles\";\nimport { defineCustomElement } from \"../../utils\";\n\nimport { property, state } from \"lit/decorators.js\";\nimport styles from \"./ogds-accordion-toggle.css\";\n\n/**\n * @summary A button that expands or collapses all panels in an associated `<ogds-accordion>`.\n *\n * @attribute {string} controls - The `id` of the `<ogds-accordion>` to control. Required.\n *\n * @slot expand-label - Button label when all panels are collapsed. Defaults to \"Expand All\".\n * @slot collapse-label - Button label when one or more panels are open. Defaults to \"Collapse All\".\n *\n * @csspart button - The toggle button.\n *\n * @element ogds-accordion-toggle\n */\nexport class OgdsAccordionToggle extends LitElement {\n  /** @ignore */\n  private static _sheet: CSSStyleSheet | null = null;\n\n  @property({ type: String, attribute: \"controls\" })\n  controls = \"\";\n\n  @state()\n  private _anyOpen = false;\n\n  private _observer: MutationObserver | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    adoptTokenStyles();\n    if (!OgdsAccordionToggle._sheet) {\n      OgdsAccordionToggle._sheet = new CSSStyleSheet();\n      OgdsAccordionToggle._sheet.replaceSync(styles.cssText);\n      document.adoptedStyleSheets = [\n        ...document.adoptedStyleSheets,\n        OgdsAccordionToggle._sheet,\n      ];\n    }\n    if (this.controls == \"\") {\n      console.error(\n        \"<ogds-accordion-toggle>: Component must have a controls attribute with the ID\" +\n          \"of an <ogds-accordion> component\",\n      );\n      return;\n    }\n    this._anyOpen = this.checkOpen();\n    this._observer = new MutationObserver(() => {\n      this._anyOpen = this.checkOpen();\n    });\n    const accordionEl = document.getElementById(this.controls);\n    if (accordionEl) {\n      this._observer.observe(accordionEl, {\n        subtree: true,\n        attributeFilter: [\"open\"],\n      });\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  checkOpen() {\n    const accordionEl = document.getElementById(this.controls);\n    const openDetails = accordionEl?.querySelector(\"details[open]\");\n    return !!openDetails;\n  }\n\n  toggleAll() {\n    const accordionEl = document.getElementById(this.controls);\n    if (!accordionEl) {\n      console.error(\n        \"<ogds-accordion-toggle>: Unable to get an accordion component with the ID\" +\n          \" specfied in the controls attribute\",\n      );\n      return;\n    }\n\n    const detailsEls = Array.from(accordionEl.getElementsByTagName(\"details\"));\n    const anyOpen = detailsEls.some((d) => d.hasAttribute(\"open\"));\n    if (!anyOpen) {\n      detailsEls.forEach((d) => d.toggleAttribute(\"open\", true));\n    } else {\n      detailsEls.forEach((d) => d.toggleAttribute(\"open\", false));\n    }\n    this._anyOpen = !anyOpen;\n  }\n\n  protected override render(): unknown {\n    return html`\n      <button @click=\"${this.toggleAll}\" part=\"button\">\n        <slot name=\"expand-label\" ?hidden=\"${this._anyOpen}\">Expand All</slot>\n        <slot name=\"collapse-label\" ?hidden=\"${!this._anyOpen}\"\n          >Collapse All</slot\n        >\n      </button>\n    `;\n  }\n}\n\ndefineCustomElement(\"ogds-accordion-toggle\", OgdsAccordionToggle);\n"],"names":["iconPlus","iconMinus","sheet","colorTokens","spacingTokens","typographyTokens","themeColorTokens","themeComponentTokens","themeSpacingTokens","themeTypographyTokens","s","adoptTokenStyles","_OgdsAccordion","_a","LitElement","iconChevronDown","iconChevronUp","styles","el","detailsEls","headingLevel","summary","roles","nothing","__decorateClass","property","OgdsAccordion","defineCustomElement","_OgdsAccordionToggle","accordionEl","anyOpen","d","html","state","OgdsAccordionToggle"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
-import { UsaLink } from './usa-link';
-import { UsaBanner } from './usa-banner';
-export { UsaLink, UsaBanner };
+import { OgdsBanner } from './ogds-banner';
+import { OgdsAccordion } from './ogds-accordion';
+import { OgdsAccordionToggle } from './ogds-accordion-toggle';
+export { OgdsBanner, OgdsAccordion, OgdsAccordionToggle };

package/dist/components/index.js

@@ -1,6 +1,164 @@
-import { UsaLink as a } from "./usa-link.js";
-import { UsaBanner as n } from "./usa-banner.js";
+import { c as v, s as k, i as S, a as w, d as p } from "../index-DDf2o6Dk.js";
+import { O as q } from "../index-DDf2o6Dk.js";
+import { css as c, LitElement as f, nothing as x, html as z } from "lit";
+import { property as g, state as C } from "lit/decorators.js";
+const A = c`@layer ogds.components{.ogds-accordion,ogds-accordion{--ogds-accordion-border:.25rem solid var(--ogds-theme-color-base-lightest);--ogds-accordion-content-padding:1rem 1.25rem .75rem ;--ogds-accordion-icon-closed:var(--icon-chevron-pointing-down);--ogds-accordion-icon-open:var(--icon-chevron-pointing-up)}:is(.ogds-accordion,ogds-accordion).plus{--ogds-accordion-icon-closed:var(--icon-plus);--ogds-accordion-icon-open:var(--icon-minus)}.ogds-accordion,ogds-accordion{--accordion-icon:var(--ogds-accordion-icon-closed)}:is(.ogds-accordion,ogds-accordion) details{color:var(--ogds-theme-color-base-ink);margin-block:.5rem}:is(.ogds-accordion,ogds-accordion) details[open]{--accordion-icon:var(--ogds-accordion-icon-open)}:is(.ogds-accordion,ogds-accordion) summary{background-color:var(--ogds-theme-color-base-lightest);padding:1rem 1.25rem;font-weight:700}:is(.ogds-accordion,ogds-accordion) summary:hover{background-color:var(--ogds-color-gray-10)}:is(.ogds-accordion,ogds-accordion) summary:focus{outline:.25rem solid #2491ff}:is(.ogds-accordion,ogds-accordion).with-icon summary{align-items:center;display:flex}:is(.ogds-accordion,ogds-accordion).with-icon summary::marker{display:none}:is(.ogds-accordion,ogds-accordion).with-icon summary::-webkit-details-marker{display:none}:is(.ogds-accordion,ogds-accordion).with-icon summary:before{content:\"\";height:1.25rem;-webkit-mask-image:var(--accordion-icon);mask-image:var(--accordion-icon);background-color:currentColor;flex-shrink:0;width:1.5rem;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}:is(.ogds-accordion,ogds-accordion).with-icon.right summary:before{order:2;margin-inline-start:auto}@supports selector(::details-content){:is(.ogds-accordion,ogds-accordion) details[open]::details-content{padding:var(--ogds-accordion-content-padding)}:is(.ogds-accordion,ogds-accordion).bordered details[open]::details-content{border-block-end:var(--ogds-accordion-border);border-inline-end:var(--ogds-accordion-border);border-inline-start:var(--ogds-accordion-border)}}@supports not selector(::details-content){:is(.ogds-accordion,ogds-accordion) .details-content{padding:var(--ogds-accordion-content-padding)}:is(.ogds-accordion,ogds-accordion).bordered .details-content{border-block-end:var(--ogds-accordion-border);border-inline-end:var(--ogds-accordion-border);border-inline-start:var(--ogds-accordion-border)}}}`, E = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%2013h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3e%3c/svg%3e", _ = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%2013H5v-2h14v2z'/%3e%3c/svg%3e", O = c`:root,:host{--ogds-font-family-system:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";--ogds-font-family-georgia:Georgia, Cambria, \"Times New Roman\", Times, serif;--ogds-font-family-helvetica:\"Helvetica Neue\", Helvetica, Roboto, Arial, sans-serif;--ogds-font-family-monospace:\"Bitstream Vera Sans Mono\", \"Consolas\", \"Courier\", monospace;--ogds-font-size-1:.75rem;--ogds-font-size-2:.8125rem;--ogds-font-size-3:.875rem;--ogds-font-size-4:.9375rem;--ogds-font-size-5:1rem;--ogds-font-size-6:1.0625rem;--ogds-font-size-7:1.125rem;--ogds-font-size-8:1.25rem;--ogds-font-size-9:1.375rem;--ogds-font-size-10:1.5rem;--ogds-font-size-11:1.75rem;--ogds-font-size-12:2rem;--ogds-font-size-13:2.25rem;--ogds-font-size-14:2.5rem;--ogds-font-size-15:3rem;--ogds-font-size-16:3.5rem;--ogds-font-size-17:4rem;--ogds-font-size-18:5rem;--ogds-font-size-19:7.5rem;--ogds-font-size-20:8.75rem;--ogds-font-size-micro:.625rem;--ogds-line-height-1:1;--ogds-line-height-2:1.2;--ogds-line-height-3:1.35;--ogds-line-height-4:1.5;--ogds-line-height-5:1.62;--ogds-line-height-6:1.75;--ogds-measure-smaller:44ex;--ogds-measure-small:60ex;--ogds-measure-base:64ex;--ogds-measure-large:68ex;--ogds-measure-larger:72ex;--ogds-measure-largest:88ex}`, T = c`:root,:host{--ogds-theme-color-base-lightest:#f0f0f0;--ogds-theme-color-base-lighter:#dfe1e2;--ogds-theme-color-base-light:#a9aeb1;--ogds-theme-color-base:#71767a;--ogds-theme-color-base-dark:#565c65;--ogds-theme-color-base-darker:#3d4551;--ogds-theme-color-base-darkest:#1b1b1b;--ogds-theme-color-base-ink:#1b1b1b;--ogds-theme-color-primary-lighter:#d9e8f6;--ogds-theme-color-primary-light:#73b3e7;--ogds-theme-color-primary:#005ea2;--ogds-theme-color-primary-vivid:#0050d8;--ogds-theme-color-primary-dark:#1a4480;--ogds-theme-color-primary-darker:#162e51;--ogds-theme-color-secondary-lighter:#f3e1e4;--ogds-theme-color-secondary-light:#f2938c;--ogds-theme-color-secondary:#d83933;--ogds-theme-color-secondary-vivid:#e41d3d;--ogds-theme-color-secondary-dark:#b50909;--ogds-theme-color-secondary-darker:#8b0a03;--ogds-theme-color-accent-warm-lighter:#f2e4d4;--ogds-theme-color-accent-warm-light:#ffbc78;--ogds-theme-color-accent-warm:#fa9441;--ogds-theme-color-accent-warm-dark:#c05600;--ogds-theme-color-accent-warm-darker:#775540;--ogds-theme-color-accent-cool-lighter:#e1f3f8;--ogds-theme-color-accent-cool-light:#97d4ea;--ogds-theme-color-accent-cool:#00bde3;--ogds-theme-color-accent-cool-dark:#28a0cb;--ogds-theme-color-accent-cool-darker:#07648d;--ogds-theme-color-error-lighter:#f4e3db;--ogds-theme-color-error-light:#f39268;--ogds-theme-color-error:#d54309;--ogds-theme-color-error-dark:#b50909;--ogds-theme-color-error-darker:#6f3331;--ogds-theme-color-warning-lighter:#faf3d1;--ogds-theme-color-warning-light:#fee685;--ogds-theme-color-warning:#ffbe2e;--ogds-theme-color-warning-dark:#e5a000;--ogds-theme-color-warning-darker:#936f38;--ogds-theme-color-success-lighter:#ecf3ec;--ogds-theme-color-success-light:#70e17b;--ogds-theme-color-success:#00a91c;--ogds-theme-color-success-dark:#008817;--ogds-theme-color-success-darker:#216e1f;--ogds-theme-color-info-lighter:#e7f6f8;--ogds-theme-color-info-light:#99deea;--ogds-theme-color-info:#00bde3;--ogds-theme-color-info-dark:#009ec1;--ogds-theme-color-info-darker:#2e6276;--ogds-theme-color-disabled-lighter:#c9c9c9;--ogds-theme-color-disabled-light:#919191;--ogds-theme-color-disabled:#757575;--ogds-theme-color-disabled-dark:#454545;--ogds-theme-color-disabled-darker:#1b1b1b;--ogds-theme-color-emergency:#9c3d10;--ogds-theme-color-emergency-dark:#332d29;--ogds-theme-body-background-color:#fff;--ogds-theme-text-color:#1b1b1b;--ogds-theme-text-reverse-color:#fff;--ogds-theme-link-color:#005ea2;--ogds-theme-link-visited-color:#54278f;--ogds-theme-link-hover-color:#1a4480;--ogds-theme-link-active-color:#162e51;--ogds-theme-link-reverse-color:#dfe1e2;--ogds-theme-link-reverse-hover-color:#f0f0f0;--ogds-theme-link-reverse-active-color:#fff;--ogds-theme-focus-color:#2491ff}`, B = c`:root,:host{--ogds-theme-button-border-radius:.25rem;--ogds-theme-button-fill-color:#005ea2;--ogds-theme-button-font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";--ogds-theme-button-icon-gap:.5rem;--ogds-theme-button-small-width:3rem;--ogds-theme-button-stroke-color:#005ea2;--ogds-theme-button-stroke-width:2px;--ogds-theme-button-text-color:#fff}`, L = c`:root,:host{--ogds-theme-border-radius-sm:2px;--ogds-theme-border-radius-md:.25rem;--ogds-theme-border-radius-lg:.5rem;--ogds-theme-column-gap-sm:2px;--ogds-theme-column-gap-md:1rem;--ogds-theme-column-gap-lg:1.5rem;--ogds-theme-column-gap-mobile:1rem;--ogds-theme-column-gap-desktop:2rem;--ogds-theme-grid-container-max-width:64rem;--ogds-theme-site-margins-breakpoint:64rem;--ogds-theme-site-margins-width:2rem;--ogds-theme-site-margins-mobile-width:1rem}`, R = c`:root,:host{--ogds-theme-type-scale-3xs:.8125rem;--ogds-theme-type-scale-2xs:.875rem;--ogds-theme-type-scale-xs:.9375rem;--ogds-theme-type-scale-sm:1rem;--ogds-theme-type-scale-md:1.0625rem;--ogds-theme-type-scale-lg:1.375rem;--ogds-theme-type-scale-xl:2rem;--ogds-theme-type-scale-2xl:2.5rem;--ogds-theme-type-scale-3xl:3rem;--ogds-theme-body-font-size:1rem;--ogds-theme-body-line-height:1.62;--ogds-theme-heading-line-height:1.2;--ogds-theme-display-font-size:3rem;--ogds-theme-h1-font-size:2.5rem;--ogds-theme-h2-font-size:2rem;--ogds-theme-h3-font-size:1.375rem;--ogds-theme-h4-font-size:1rem;--ogds-theme-h5-font-size:.9375rem;--ogds-theme-h6-font-size:.8125rem;--ogds-theme-lead-font-size:1.375rem;--ogds-theme-lead-line-height:1.75}`, l = new CSSStyleSheet();
+l.replaceSync(
+  [
+    v,
+    k,
+    O,
+    T,
+    B,
+    L,
+    R
+  ].map((n) => n.cssText).join(`
+`)
+);
+function u() {
+  document.adoptedStyleSheets.includes(l) || (document.adoptedStyleSheets = [...document.adoptedStyleSheets, l]);
+}
+var I = Object.defineProperty, b = (n, e, t, d) => {
+  for (var o = void 0, i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (o = a(e, t, o) || o);
+  return o && I(e, t, o), o;
+}, s;
+const m = (s = class extends f {
+  constructor() {
+    super(...arguments), this.useListSemantics = !1, this.headingLevel = 0;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), u(), s._sheet || (s._sheet = new CSSStyleSheet(), s._sheet.replaceSync(
+      `ogds-accordion, .ogds-accordion {
+          --icon-chevron-pointing-down: url("${S}");
+          --icon-chevron-pointing-up: url("${w}");
+          --icon-plus: url("${E}");
+          --icon-minus: url("${_}");
+        }
+` + A.cssText
+    ), document.adoptedStyleSheets = [
+      ...document.adoptedStyleSheets,
+      s._sheet
+    ]), this.detailsChildren = this.getDetailsChildren(), this.childRoles = new Map(
+      Array.from(this.detailsChildren ?? []).map((e) => [e, /* @__PURE__ */ new Set()])
+    );
+  }
+  firstUpdated() {
+    if (this.useListSemantics && this.headingLevel !== 0) {
+      console.warn(
+        "<ogds-accordion>: use-list-semantics and heading-level are mutually exclusive. Screen readers cannot reliably announce both list position and heading level on the same element. Remove one attribute."
+      );
+      return;
+    }
+    this.addListSemantics(), this.addHeadingSemantics(), this.applyChildRoles();
+  }
+  getDetailsChildren() {
+    const e = this.getElementsByTagName("details");
+    if (e.length > 0)
+      return e;
+    console.error(
+      "<ogds-accordion>: This component expects to have at least one details element as a child"
+    );
+  }
+  addListSemantics() {
+    this.useListSemantics && this.detailsChildren && (Array.from(this.detailsChildren).forEach(
+      (e) => this.childRoles.get(e)?.add("listitem")
+    ), this.setAttribute("role", "list"));
+  }
+  addHeadingSemantics() {
+    const e = this.headingLevel;
+    e !== 0 && this.detailsChildren && Array.from(this.detailsChildren).forEach((t) => {
+      const d = t.querySelector("summary");
+      d && (d.setAttribute("role", "heading"), d.setAttribute("aria-level", String(e)));
+    });
+  }
+  applyChildRoles() {
+    this.childRoles.forEach((e, t) => {
+      e.size > 0 && t.setAttribute("role", Array.from(e).join(" "));
+    });
+  }
+  render() {
+    return x;
+  }
+}, s._sheet = null, s);
+b([
+  g({ type: Boolean, attribute: "use-list-semantics" })
+], m.prototype, "useListSemantics");
+b([
+  g({ type: Number, attribute: "heading-level" })
+], m.prototype, "headingLevel");
+let $ = m;
+p("ogds-accordion", $);
+const U = c`@layer ogds.components{ogds-accordion-toggle::part(button){appearance:none;background-color:var(--ogds-theme-button-fill-color);border-radius:var(--ogds-theme-button-border-radius);border-color:#0000;border-width:var(--ogds-theme-button-stroke-width);color:var(--ogds-theme-button-text-color);cursor:pointer;font-family:var(--ogds-theme-button-font-family);font-size:var(--ogds-theme-type-scale-md);padding:var(--ogds-spacing-105) var(--ogds-spacing-205);font-weight:700}ogds-accordion-toggle::part(button):hover{background-color:color-mix(in srgb,var(--ogds-theme-button-fill-color),black 20%)}ogds-accordion-toggle::part(button):focus{outline-offset:.25rem;outline:.25rem solid #2491ff}}`;
+var j = Object.defineProperty, y = (n, e, t, d) => {
+  for (var o = void 0, i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (o = a(e, t, o) || o);
+  return o && j(e, t, o), o;
+}, r;
+const h = (r = class extends f {
+  constructor() {
+    super(...arguments), this.controls = "", this._anyOpen = !1, this._observer = null;
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), u(), r._sheet || (r._sheet = new CSSStyleSheet(), r._sheet.replaceSync(U.cssText), document.adoptedStyleSheets = [
+      ...document.adoptedStyleSheets,
+      r._sheet
+    ]), this.controls == "") {
+      console.error(
+        "<ogds-accordion-toggle>: Component must have a controls attribute with the IDof an <ogds-accordion> component"
+      );
+      return;
+    }
+    this._anyOpen = this.checkOpen(), this._observer = new MutationObserver(() => {
+      this._anyOpen = this.checkOpen();
+    });
+    const e = document.getElementById(this.controls);
+    e && this._observer.observe(e, {
+      subtree: !0,
+      attributeFilter: ["open"]
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._observer?.disconnect(), this._observer = null;
+  }
+  checkOpen() {
+    return !!document.getElementById(this.controls)?.querySelector("details[open]");
+  }
+  toggleAll() {
+    const e = document.getElementById(this.controls);
+    if (!e) {
+      console.error(
+        "<ogds-accordion-toggle>: Unable to get an accordion component with the ID specfied in the controls attribute"
+      );
+      return;
+    }
+    const t = Array.from(e.getElementsByTagName("details")), d = t.some((o) => o.hasAttribute("open"));
+    d ? t.forEach((o) => o.toggleAttribute("open", !1)) : t.forEach((o) => o.toggleAttribute("open", !0)), this._anyOpen = !d;
+  }
+  render() {
+    return z`
+      <button @click="${this.toggleAll}" part="button">
+        <slot name="expand-label" ?hidden="${this._anyOpen}">Expand All</slot>
+        <slot name="collapse-label" ?hidden="${!this._anyOpen}"
+          >Collapse All</slot
+        >
+      </button>
+    `;
+  }
+}, r._sheet = null, r);
+y([
+  g({ type: String, attribute: "controls" })
+], h.prototype, "controls");
+y([
+  C()
+], h.prototype, "_anyOpen");
+let H = h;
+p("ogds-accordion-toggle", H);
 export {
-  n as UsaBanner,
-  a as UsaLink
+  $ as OgdsAccordion,
+  H as OgdsAccordionToggle,
+  q as OgdsBanner
 };

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":["../../src/shared/icons/add.svg","../../src/shared/icons/remove.svg","../../src/core/token-styles.ts","../../src/components/ogds-accordion/index.ts","../../src/components/ogds-accordion-toggle/index.ts"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%2013h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%2013H5v-2h14v2z'/%3e%3c/svg%3e\"","import colorTokens from \"@ogds/tokens/styles/css/colors.css\";\nimport spacingTokens from \"@ogds/tokens/styles/css/spacing.css\";\nimport typographyTokens from \"@ogds/tokens/styles/css/typography.css\";\nimport themeColorTokens from \"@ogds/tokens/styles/css/theme-color.css\";\nimport themeComponentTokens from \"@ogds/tokens/styles/css/theme-components.css\";\nimport themeSpacingTokens from \"@ogds/tokens/styles/css/theme-spacing.css\";\nimport themeTypographyTokens from \"@ogds/tokens/styles/css/theme-typography.css\";\n\nconst sheet = new CSSStyleSheet();\nsheet.replaceSync(\n  [\n    colorTokens,\n    spacingTokens,\n    typographyTokens,\n    themeColorTokens,\n    themeComponentTokens,\n    themeSpacingTokens,\n    themeTypographyTokens,\n  ]\n    .map((s) => s.cssText)\n    .join(\"\\n\"),\n);\n\nexport function adoptTokenStyles() {\n  if (!document.adoptedStyleSheets.includes(sheet)) {\n    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];\n  }\n}\n","import { LitElement, nothing } from \"lit\";\n\nimport styles from \"./ogds-accordion.css\";\nimport iconChevronDown from \"../../shared/icons/expand_more.svg\";\nimport iconChevronUp from \"../../shared/icons/expand_less.svg\";\nimport iconPlus from \"../../shared/icons/add.svg\";\nimport iconMinus from \"../../shared/icons/remove.svg\";\n\nimport { adoptTokenStyles } from \"../../core/token-styles\";\nimport { defineCustomElement } from \"../../utils\";\nimport { property } from \"lit/decorators.js\";\n\n/**\n * @summary The ogds-accordion component.\n *\n * Apply these classes to `<ogds-accordion>` to enable variants:\n * - `bordered` — adds a border to expanded content\n * - `with-icon` — shows a chevron icon on each summary\n * - `with-icon plus` — uses plus/minus icons instead of chevrons\n * - `with-icon right` — aligns the icon to the right\n *\n * @cssprop --ogds-accordion-border - Border used in the bordered variant.\n * @cssprop --ogds-accordion-content-padding - Padding for the expanded content area.\n * @cssprop --ogds-accordion-icon-closed - Icon shown when a panel is closed. Defaults to a chevron pointing down. CSS-only users must set this to a url() value pointing to their own icon asset.\n * @cssprop --ogds-accordion-icon-open - Icon shown when a panel is open. Defaults to a chevron pointing up. CSS-only users must set this to a url() value pointing to their own icon asset.\n * @attribute {boolean} use-list-semantics - Adds `role=\"list\"` to the component and `role=\"listitem\"` to each `<details>` child, conveying the accordion as a list to assistive technologies. Mutually exclusive with `heading-level`.\n * @attribute {number} heading-level - Sets a heading level for each accordion panel by adding `role=\"heading\"` and the corresponding `aria-level` to each `<summary>` element. Has no effect when set to `0` (the default). Mutually exclusive with `use-list-semantics`.\n *\n * @slot - The default (only) slot for the <ogds-accordion> expects one or more plain HTML <details> elements.\n * @element ogds-accordion\n */\nexport class OgdsAccordion extends LitElement {\n  /** @ignore */\n  private static _sheet: CSSStyleSheet | null = null;\n\n  @property({ type: Boolean, attribute: \"use-list-semantics\" })\n  useListSemantics = false;\n\n  @property({ type: Number, attribute: \"heading-level\" })\n  headingLevel = 0;\n\n  declare detailsChildren: HTMLCollectionOf<HTMLDetailsElement> | undefined;\n  declare childRoles: Map<HTMLDetailsElement, Set<string>>;\n\n  override createRenderRoot() {\n    return this;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    adoptTokenStyles();\n    if (!OgdsAccordion._sheet) {\n      OgdsAccordion._sheet = new CSSStyleSheet();\n      OgdsAccordion._sheet.replaceSync(\n        `ogds-accordion, .ogds-accordion {\n          --icon-chevron-pointing-down: url(\"${iconChevronDown}\");\n          --icon-chevron-pointing-up: url(\"${iconChevronUp}\");\n          --icon-plus: url(\"${iconPlus}\");\n          --icon-minus: url(\"${iconMinus}\");\n        }\\n` + styles.cssText,\n      );\n      document.adoptedStyleSheets = [\n        ...document.adoptedStyleSheets,\n        OgdsAccordion._sheet,\n      ];\n    }\n    this.detailsChildren = this.getDetailsChildren();\n    this.childRoles = new Map(\n      Array.from(this.detailsChildren ?? []).map((el) => [el, new Set()]),\n    );\n  }\n\n  override firstUpdated() {\n    if (this.useListSemantics && this.headingLevel !== 0) {\n      console.warn(\n        \"<ogds-accordion>: use-list-semantics and heading-level are mutually exclusive. \" +\n          \"Screen readers cannot reliably announce both list position and heading level \" +\n          \"on the same element. Remove one attribute.\",\n      );\n      return;\n    }\n    this.addListSemantics();\n    this.addHeadingSemantics();\n    this.applyChildRoles();\n  }\n\n  getDetailsChildren() {\n    const detailsEls = this.getElementsByTagName(\"details\");\n    if (detailsEls.length > 0) {\n      return detailsEls;\n    } else {\n      console.error(\n        \"<ogds-accordion>: This component expects to have at least one details element as a child\",\n      );\n    }\n  }\n\n  addListSemantics() {\n    if (this.useListSemantics && this.detailsChildren) {\n      Array.from(this.detailsChildren).forEach((el) =>\n        this.childRoles.get(el)?.add(\"listitem\"),\n      );\n      this.setAttribute(\"role\", \"list\");\n    }\n  }\n\n  addHeadingSemantics() {\n    const headingLevel = this.headingLevel;\n\n    if (headingLevel !== 0 && this.detailsChildren) {\n      Array.from(this.detailsChildren).forEach((el) => {\n        const summary = el.querySelector(\"summary\");\n        if (summary) {\n          summary.setAttribute(\"role\", \"heading\");\n          summary.setAttribute(\"aria-level\", String(headingLevel));\n        }\n      });\n    }\n  }\n\n  applyChildRoles() {\n    this.childRoles.forEach((roles, el) => {\n      if (roles.size > 0) el.setAttribute(\"role\", Array.from(roles).join(\" \"));\n    });\n  }\n\n  render() {\n    return nothing;\n  }\n}\n\ndefineCustomElement(\"ogds-accordion\", OgdsAccordion);\n","import { LitElement, html } from \"lit\";\nimport { adoptTokenStyles } from \"../../core/token-styles\";\nimport { defineCustomElement } from \"../../utils\";\n\nimport { property, state } from \"lit/decorators.js\";\nimport styles from \"./ogds-accordion-toggle.css\";\n\n/**\n * @summary A button that expands or collapses all panels in an associated `<ogds-accordion>`.\n *\n * @attribute {string} controls - The `id` of the `<ogds-accordion>` to control. Required.\n *\n * @slot expand-label - Button label when all panels are collapsed. Defaults to \"Expand All\".\n * @slot collapse-label - Button label when one or more panels are open. Defaults to \"Collapse All\".\n *\n * @csspart button - The toggle button.\n *\n * @element ogds-accordion-toggle\n */\nexport class OgdsAccordionToggle extends LitElement {\n  /** @ignore */\n  private static _sheet: CSSStyleSheet | null = null;\n\n  @property({ type: String, attribute: \"controls\" })\n  controls = \"\";\n\n  @state()\n  private _anyOpen = false;\n\n  private _observer: MutationObserver | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    adoptTokenStyles();\n    if (!OgdsAccordionToggle._sheet) {\n      OgdsAccordionToggle._sheet = new CSSStyleSheet();\n      OgdsAccordionToggle._sheet.replaceSync(styles.cssText);\n      document.adoptedStyleSheets = [\n        ...document.adoptedStyleSheets,\n        OgdsAccordionToggle._sheet,\n      ];\n    }\n    if (this.controls == \"\") {\n      console.error(\n        \"<ogds-accordion-toggle>: Component must have a controls attribute with the ID\" +\n          \"of an <ogds-accordion> component\",\n      );\n      return;\n    }\n    this._anyOpen = this.checkOpen();\n    this._observer = new MutationObserver(() => {\n      this._anyOpen = this.checkOpen();\n    });\n    const accordionEl = document.getElementById(this.controls);\n    if (accordionEl) {\n      this._observer.observe(accordionEl, {\n        subtree: true,\n        attributeFilter: [\"open\"],\n      });\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  checkOpen() {\n    const accordionEl = document.getElementById(this.controls);\n    const openDetails = accordionEl?.querySelector(\"details[open]\");\n    return !!openDetails;\n  }\n\n  toggleAll() {\n    const accordionEl = document.getElementById(this.controls);\n    if (!accordionEl) {\n      console.error(\n        \"<ogds-accordion-toggle>: Unable to get an accordion component with the ID\" +\n          \" specfied in the controls attribute\",\n      );\n      return;\n    }\n\n    const detailsEls = Array.from(accordionEl.getElementsByTagName(\"details\"));\n    const anyOpen = detailsEls.some((d) => d.hasAttribute(\"open\"));\n    if (!anyOpen) {\n      detailsEls.forEach((d) => d.toggleAttribute(\"open\", true));\n    } else {\n      detailsEls.forEach((d) => d.toggleAttribute(\"open\", false));\n    }\n    this._anyOpen = !anyOpen;\n  }\n\n  protected override render(): unknown {\n    return html`\n      <button @click=\"${this.toggleAll}\" part=\"button\">\n        <slot name=\"expand-label\" ?hidden=\"${this._anyOpen}\">Expand All</slot>\n        <slot name=\"collapse-label\" ?hidden=\"${!this._anyOpen}\"\n          >Collapse All</slot\n        >\n      </button>\n    `;\n  }\n}\n\ndefineCustomElement(\"ogds-accordion-toggle\", OgdsAccordionToggle);\n"],"names":["iconPlus","iconMinus","sheet","colorTokens","spacingTokens","typographyTokens","themeColorTokens","themeComponentTokens","themeSpacingTokens","themeTypographyTokens","s","adoptTokenStyles","_OgdsAccordion","_a","LitElement","iconChevronDown","iconChevronUp","styles","el","detailsEls","headingLevel","summary","roles","nothing","__decorateClass","property","OgdsAccordion","defineCustomElement","_OgdsAccordionToggle","accordionEl","anyOpen","d","html","state","OgdsAccordionToggle"],"mappings":"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"}

package/dist/components/ogds-accordion/index.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/**
+ * @summary The ogds-accordion component.
+ *
+ * Apply these classes to `<ogds-accordion>` to enable variants:
+ * - `bordered` — adds a border to expanded content
+ * - `with-icon` — shows a chevron icon on each summary
+ * - `with-icon plus` — uses plus/minus icons instead of chevrons
+ * - `with-icon right` — aligns the icon to the right
+ *
+ * @cssprop --ogds-accordion-border - Border used in the bordered variant.
+ * @cssprop --ogds-accordion-content-padding - Padding for the expanded content area.
+ * @cssprop --ogds-accordion-icon-closed - Icon shown when a panel is closed. Defaults to a chevron pointing down. CSS-only users must set this to a url() value pointing to their own icon asset.
+ * @cssprop --ogds-accordion-icon-open - Icon shown when a panel is open. Defaults to a chevron pointing up. CSS-only users must set this to a url() value pointing to their own icon asset.
+ * @attribute {boolean} use-list-semantics - Adds `role="list"` to the component and `role="listitem"` to each `<details>` child, conveying the accordion as a list to assistive technologies. Mutually exclusive with `heading-level`.
+ * @attribute {number} heading-level - Sets a heading level for each accordion panel by adding `role="heading"` and the corresponding `aria-level` to each `<summary>` element. Has no effect when set to `0` (the default). Mutually exclusive with `use-list-semantics`.
+ *
+ * @slot - The default (only) slot for the <ogds-accordion> expects one or more plain HTML <details> elements.
+ * @element ogds-accordion
+ */
+export declare class OgdsAccordion extends LitElement {
+    /** @ignore */
+    private static _sheet;
+    useListSemantics: boolean;
+    headingLevel: number;
+    detailsChildren: HTMLCollectionOf<HTMLDetailsElement> | undefined;
+    childRoles: Map<HTMLDetailsElement, Set<string>>;
+    createRenderRoot(): this;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    getDetailsChildren(): HTMLCollectionOf<HTMLDetailsElement> | undefined;
+    addListSemantics(): void;
+    addHeadingSemantics(): void;
+    applyChildRoles(): void;
+    render(): symbol;
+}

package/dist/components/ogds-accordion/ogds-accordion.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ogds-accordion-toggle/index.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * @summary A button that expands or collapses all panels in an associated `<ogds-accordion>`.
+ *
+ * @attribute {string} controls - The `id` of the `<ogds-accordion>` to control. Required.
+ *
+ * @slot expand-label - Button label when all panels are collapsed. Defaults to "Expand All".
+ * @slot collapse-label - Button label when one or more panels are open. Defaults to "Collapse All".
+ *
+ * @csspart button - The toggle button.
+ *
+ * @element ogds-accordion-toggle
+ */
+export declare class OgdsAccordionToggle extends LitElement {
+    /** @ignore */
+    private static _sheet;
+    controls: string;
+    private _anyOpen;
+    private _observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    checkOpen(): boolean;
+    toggleAll(): void;
+    protected render(): unknown;
+}

package/dist/components/ogds-accordion-toggle/ogds-accordion-toggle.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ogds-alert/index.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * @summary The ogds-alert component.
+ *
+ * @attribute {string} type - The type of alert (info, warning, etc)
+ * @attribute {string} noIcon - Use this attribute to hide the icon
+ *
+ * @slot heading - Text for the heading. Make sure to specify the correct heading level (h2, h3, etc)
+ * @slot body - Body content for the alert. Can contain HTML (links, etc).
+ *
+ * @tagname ogds-alert
+ */
+export declare class OGDSAlert extends LitElement {
+    type: string;
+    noIcon: boolean;
+    accessor _headingNodes: Node[];
+    private accessor _hasHeader;
+    slotChange(): void;
+    static styles: any[];
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/{usa-banner → ogds-banner}/index.d.ts

@@ -1,5 +1,5 @@
-import { OgdsElement } from '../../core/OgdsElement';
-interface UsaBannerTranslations {
+import { LitElement } from 'lit';
+interface OgdsBannerTranslations {
     banner: {
         label: string;
         text: string;
@@ -19,7 +19,7 @@ interface UsaBannerTranslations {
     };
 }
 /**
- * @summary The usa-banner component.
+ * @summary The ogds-banner component.
  *
  * @attribute {string} lang - The element's language.
  * @attribute {string} label - The custom aria label users can override.
@@ -42,9 +42,9 @@ interface UsaBannerTranslations {
  * @slot https-heading - Heading for HTTPs section.
  * @slot https-text - Body text for HTTPs section.
  *
- * @element usa-banner
+ * @element ogds-banner
  */
-export declare class UsaBanner extends OgdsElement {
+export declare class OgdsBanner extends LitElement {
     static properties: {
         flagSrc: {
             type: StringConstructor;
@@ -71,12 +71,12 @@ export declare class UsaBanner extends OgdsElement {
     tld: "gov" | "mil";
     toggle(): void;
     constructor();
-    protected get _bannerText(): UsaBannerTranslations;
+    protected get _bannerText(): OgdsBannerTranslations;
     protected get _actionText(): string | undefined;
     domainTemplate(tld: string): import('lit-html').TemplateResult<1>;
     lockIcon(): import('lit-html').TemplateResult<1>;
     httpsTemplate(tld: string): import('lit-html').TemplateResult<1>;
-    static styles: import('lit').CSSResult[];
+    static styles: any[];
     render(): import('lit-html').TemplateResult<1>;
 }
 export {};

package/dist/components/ogds-banner.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("lit");require("lit/directives/unsafe-html.js");require("lit/directives/class-map.js");const e=require("../index-CC1QRihN.cjs");exports.OgdsBanner=e.OgdsBanner;

package/dist/components/ogds-banner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ogds-banner.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/ogds-banner.js

@@ -0,0 +1,7 @@
+import "lit";
+import "lit/directives/unsafe-html.js";
+import "lit/directives/class-map.js";
+import { O as i } from "../index-DDf2o6Dk.js";
+export {
+  i as OgdsBanner
+};

package/dist/components/ogds-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ogds-banner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/task-list/index.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * @summary The ogds-task-list component. For now, this is intended for non-sequential task lists (order doesn't matter).
+ * @element ogds-task-list
+ */
+interface TaskStep {
+    title: string;
+    description: string;
+    status: StepStatus;
+    url?: string;
+}
+type StepStatus = "not-started" | "in-progress" | "completed";
+export declare class OgdsTaskList extends LitElement {
+    /** @ignore */
+    steps: TaskStep[];
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    renderAction(step: TaskStep): import('lit-html').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};

package/dist/core/token-styles.d.ts

@@ -0,0 +1 @@
+export declare function adoptTokenStyles(): void;

package/dist/index-CC1QRihN.cjs

@@ -0,0 +1,95 @@
+"use strict";const o=require("lit"),s=require("lit/directives/unsafe-html.js"),m=require("lit/directives/class-map.js"),l=o.css`:root,:host{--ogds-color-black-transparent-5:#00000003;--ogds-color-black-transparent-10:#0000001a;--ogds-color-black-transparent-20:#0003;--ogds-color-black-transparent-30:#0000004d;--ogds-color-black-transparent-40:#0006;--ogds-color-black-transparent-50:#00000080;--ogds-color-black-transparent-60:#0009;--ogds-color-black-transparent-70:#000000b3;--ogds-color-black-transparent-80:#000c;--ogds-color-black-transparent-90:#000000e6;--ogds-color-blue-cool-5:#e7f2f5;--ogds-color-blue-cool-10:#dae9ee;--ogds-color-blue-cool-20:#adcfdc;--ogds-color-blue-cool-30:#82b4c9;--ogds-color-blue-cool-40:#6499af;--ogds-color-blue-cool-50:#3a7d95;--ogds-color-blue-cool-60:#2e6276;--ogds-color-blue-cool-70:#224a58;--ogds-color-blue-cool-80:#14333d;--ogds-color-blue-cool-90:#0f191c;--ogds-color-blue-cool-vivid-5:#e1f3f8;--ogds-color-blue-cool-vivid-10:#c3ebfa;--ogds-color-blue-cool-vivid-20:#97d4ea;--ogds-color-blue-cool-vivid-30:#59b9de;--ogds-color-blue-cool-vivid-40:#28a0cb;--ogds-color-blue-cool-vivid-50:#0d7ea2;--ogds-color-blue-cool-vivid-60:#07648d;--ogds-color-blue-cool-vivid-70:#074b69;--ogds-color-blue-cool-vivid-80:#002d3f;--ogds-color-blue-warm-5:#ecf1f7;--ogds-color-blue-warm-10:#e1e7f1;--ogds-color-blue-warm-20:#bbcae4;--ogds-color-blue-warm-30:#98afd2;--ogds-color-blue-warm-40:#7292c7;--ogds-color-blue-warm-50:#4a77b4;--ogds-color-blue-warm-60:#345d96;--ogds-color-blue-warm-70:#2f4668;--ogds-color-blue-warm-80:#252f3e;--ogds-color-blue-warm-90:#13171f;--ogds-color-blue-warm-vivid-5:#edf5ff;--ogds-color-blue-warm-vivid-10:#d4e5ff;--ogds-color-blue-warm-vivid-20:#adcdff;--ogds-color-blue-warm-vivid-30:#81aefc;--ogds-color-blue-warm-vivid-40:#5994f6;--ogds-color-blue-warm-vivid-50:#2672de;--ogds-color-blue-warm-vivid-60:#0050d8;--ogds-color-blue-warm-vivid-70:#1a4480;--ogds-color-blue-warm-vivid-80:#162e51;--ogds-color-blue-5:#eff6fb;--ogds-color-blue-10:#d9e8f6;--ogds-color-blue-20:#aacdec;--ogds-color-blue-30:#73b3e7;--ogds-color-blue-40:#4f97d1;--ogds-color-blue-50:#2378c3;--ogds-color-blue-60:#2c608a;--ogds-color-blue-70:#274863;--ogds-color-blue-80:#1f303e;--ogds-color-blue-90:#11181d;--ogds-color-blue-vivid-5:#e8f5ff;--ogds-color-blue-vivid-10:#cfe8ff;--ogds-color-blue-vivid-20:#a1d3ff;--ogds-color-blue-vivid-30:#58b4ff;--ogds-color-blue-vivid-40:#2491ff;--ogds-color-blue-vivid-50:#0076d6;--ogds-color-blue-vivid-60:#005ea2;--ogds-color-blue-vivid-70:#0b4778;--ogds-color-blue-vivid-80:#112f4e;--ogds-color-cyan-5:#e7f6f8;--ogds-color-cyan-10:#ccecf2;--ogds-color-cyan-20:#99deea;--ogds-color-cyan-30:#5dc0d1;--ogds-color-cyan-40:#449dac;--ogds-color-cyan-50:#168092;--ogds-color-cyan-60:#2a646d;--ogds-color-cyan-70:#2c4a4e;--ogds-color-cyan-80:#203133;--ogds-color-cyan-90:#111819;--ogds-color-cyan-vivid-5:#e5faff;--ogds-color-cyan-vivid-10:#a8f2ff;--ogds-color-cyan-vivid-20:#52daf2;--ogds-color-cyan-vivid-30:#00bde3;--ogds-color-cyan-vivid-40:#009ec1;--ogds-color-cyan-vivid-50:#0081a1;--ogds-color-cyan-vivid-60:#00687d;--ogds-color-cyan-vivid-70:#0e4f5c;--ogds-color-cyan-vivid-80:#093b44;--ogds-color-transparent:#0000;--ogds-color-black:#000;--ogds-color-white:#fff;--ogds-color-gold-5:#f5f0e6;--ogds-color-gold-10:#f1e5cd;--ogds-color-gold-20:#dec69a;--ogds-color-gold-30:#c7a97b;--ogds-color-gold-40:#ad8b65;--ogds-color-gold-50:#8e704f;--ogds-color-gold-60:#6b5947;--ogds-color-gold-70:#4d4438;--ogds-color-gold-80:#322d26;--ogds-color-gold-90:#191714;--ogds-color-gold-vivid-5:#fef0c8;--ogds-color-gold-vivid-10:#ffe396;--ogds-color-gold-vivid-20:#ffbe2e;--ogds-color-gold-vivid-30:#e5a000;--ogds-color-gold-vivid-40:#c2850c;--ogds-color-gold-vivid-50:#936f38;--ogds-color-gold-vivid-60:#7a591a;--ogds-color-gold-vivid-70:#5c410a;--ogds-color-gold-vivid-80:#3b2b15;--ogds-color-gray-cool-1:#fbfcfd;--ogds-color-gray-cool-2:#f7f9fa;--ogds-color-gray-cool-3:#f5f6f7;--ogds-color-gray-cool-4:#f1f3f6;--ogds-color-gray-cool-5:#edeff0;--ogds-color-gray-cool-10:#dfe1e2;--ogds-color-gray-cool-20:#c6cace;--ogds-color-gray-cool-30:#a9aeb1;--ogds-color-gray-cool-40:#8d9297;--ogds-color-gray-cool-50:#71767a;--ogds-color-gray-cool-60:#565c65;--ogds-color-gray-cool-70:#3d4551;--ogds-color-gray-cool-80:#2d2e2f;--ogds-color-gray-cool-90:#1c1d1f;--ogds-color-gray-warm-1:#fcfcfb;--ogds-color-gray-warm-2:#f9f9f7;--ogds-color-gray-warm-3:#f6f6f2;--ogds-color-gray-warm-4:#f5f5f0;--ogds-color-gray-warm-5:#f0f0ec;--ogds-color-gray-warm-10:#e6e6e2;--ogds-color-gray-warm-20:#cac9c0;--ogds-color-gray-warm-30:#afaea2;--ogds-color-gray-warm-40:#929285;--ogds-color-gray-warm-50:#76766a;--ogds-color-gray-warm-60:#5d5d52;--ogds-color-gray-warm-70:#454540;--ogds-color-gray-warm-80:#2e2e2a;--ogds-color-gray-warm-90:#171716;--ogds-color-gray-1:#fcfcfc;--ogds-color-gray-2:#f9f9f9;--ogds-color-gray-3:#f6f6f6;--ogds-color-gray-4:#f3f3f3;--ogds-color-gray-5:#f0f0f0;--ogds-color-gray-10:#e6e6e6;--ogds-color-gray-20:#c9c9c9;--ogds-color-gray-30:#adadad;--ogds-color-gray-40:#919191;--ogds-color-gray-50:#757575;--ogds-color-gray-60:#5c5c5c;--ogds-color-gray-70:#454545;--ogds-color-gray-80:#2e2e2e;--ogds-color-gray-90:#1b1b1b;--ogds-color-gray-100:#000;--ogds-color-green-cool-5:#ecf3ec;--ogds-color-green-cool-10:#dbebde;--ogds-color-green-cool-20:#b4d0b9;--ogds-color-green-cool-30:#86b98e;--ogds-color-green-cool-40:#5e9f69;--ogds-color-green-cool-50:#4d8055;--ogds-color-green-cool-60:#446443;--ogds-color-green-cool-70:#37493b;--ogds-color-green-cool-80:#28312a;--ogds-color-green-cool-90:#1a1f1a;--ogds-color-green-cool-vivid-5:#e3f5e1;--ogds-color-green-cool-vivid-10:#b7f5bd;--ogds-color-green-cool-vivid-20:#70e17b;--ogds-color-green-cool-vivid-30:#21c834;--ogds-color-green-cool-vivid-40:#00a91c;--ogds-color-green-cool-vivid-50:#008817;--ogds-color-green-cool-vivid-60:#216e1f;--ogds-color-green-cool-vivid-70:#154c21;--ogds-color-green-cool-vivid-80:#19311e;--ogds-color-green-warm-5:#f1f4d7;--ogds-color-green-warm-10:#e7eab7;--ogds-color-green-warm-20:#cbd17a;--ogds-color-green-warm-30:#a6b557;--ogds-color-green-warm-40:#8a984b;--ogds-color-green-warm-50:#6f7a41;--ogds-color-green-warm-60:#5a5f38;--ogds-color-green-warm-70:#45472f;--ogds-color-green-warm-80:#2d2f21;--ogds-color-green-warm-90:#171712;--ogds-color-green-warm-vivid-5:#f5fbc1;--ogds-color-green-warm-vivid-10:#e7f434;--ogds-color-green-warm-vivid-20:#c5d30a;--ogds-color-green-warm-vivid-30:#a3b72c;--ogds-color-green-warm-vivid-40:#7e9c1d;--ogds-color-green-warm-vivid-50:#6a7d00;--ogds-color-green-warm-vivid-60:#5a6613;--ogds-color-green-warm-vivid-70:#4b4e10;--ogds-color-green-warm-vivid-80:#38380b;--ogds-color-green-5:#eaf4dd;--ogds-color-green-10:#dfeacd;--ogds-color-green-20:#b8d293;--ogds-color-green-30:#9bb672;--ogds-color-green-40:#7d9b4e;--ogds-color-green-50:#607f35;--ogds-color-green-60:#4c6424;--ogds-color-green-70:#3c4a29;--ogds-color-green-80:#293021;--ogds-color-green-90:#161814;--ogds-color-green-vivid-5:#ddf9c7;--ogds-color-green-vivid-10:#c5ee93;--ogds-color-green-vivid-20:#98d035;--ogds-color-green-vivid-30:#7fb135;--ogds-color-green-vivid-40:#719f2a;--ogds-color-green-vivid-50:#538200;--ogds-color-green-vivid-60:#466c04;--ogds-color-green-vivid-70:#2f4a0b;--ogds-color-green-vivid-80:#243413;--ogds-color-indigo-cool-5:#eef0f9;--ogds-color-indigo-cool-10:#e1e6f9;--ogds-color-indigo-cool-20:#bbc8f5;--ogds-color-indigo-cool-30:#96abee;--ogds-color-indigo-cool-40:#6b8ee8;--ogds-color-indigo-cool-50:#496fd8;--ogds-color-indigo-cool-60:#3f57a6;--ogds-color-indigo-cool-70:#374274;--ogds-color-indigo-cool-80:#292d42;--ogds-color-indigo-cool-90:#151622;--ogds-color-indigo-cool-vivid-5:#edf0ff;--ogds-color-indigo-cool-vivid-10:#dee5ff;--ogds-color-indigo-cool-vivid-20:#b8c8ff;--ogds-color-indigo-cool-vivid-30:#94adff;--ogds-color-indigo-cool-vivid-40:#628ef4;--ogds-color-indigo-cool-vivid-50:#4866ff;--ogds-color-indigo-cool-vivid-60:#3e4ded;--ogds-color-indigo-cool-vivid-70:#222fbf;--ogds-color-indigo-cool-vivid-80:#1b2b85;--ogds-color-indigo-warm-5:#f1eff7;--ogds-color-indigo-warm-10:#e7e3fa;--ogds-color-indigo-warm-20:#cbc4f2;--ogds-color-indigo-warm-30:#afa5e8;--ogds-color-indigo-warm-40:#9287d8;--ogds-color-indigo-warm-50:#7665d1;--ogds-color-indigo-warm-60:#5e519e;--ogds-color-indigo-warm-70:#453c7b;--ogds-color-indigo-warm-80:#2e2c40;--ogds-color-indigo-warm-90:#18161d;--ogds-color-indigo-warm-vivid-5:#f5f2ff;--ogds-color-indigo-warm-vivid-10:#e4deff;--ogds-color-indigo-warm-vivid-20:#cfc4fd;--ogds-color-indigo-warm-vivid-30:#b69fff;--ogds-color-indigo-warm-vivid-40:#967efb;--ogds-color-indigo-warm-vivid-50:#745fe9;--ogds-color-indigo-warm-vivid-60:#5942d2;--ogds-color-indigo-warm-vivid-70:#3d2c9d;--ogds-color-indigo-warm-vivid-80:#261f5b;--ogds-color-indigo-5:#efeff8;--ogds-color-indigo-10:#e5e4fa;--ogds-color-indigo-20:#c5c5f3;--ogds-color-indigo-30:#a5a8eb;--ogds-color-indigo-40:#8889db;--ogds-color-indigo-50:#676cc8;--ogds-color-indigo-60:#4d52af;--ogds-color-indigo-70:#3d4076;--ogds-color-indigo-80:#2b2c40;--ogds-color-indigo-90:#16171f;--ogds-color-indigo-vivid-5:#f0f0ff;--ogds-color-indigo-vivid-10:#e0e0ff;--ogds-color-indigo-vivid-20:#ccceff;--ogds-color-indigo-vivid-30:#a3a7fa;--ogds-color-indigo-vivid-40:#8289ff;--ogds-color-indigo-vivid-50:#656bd7;--ogds-color-indigo-vivid-60:#4a50c4;--ogds-color-indigo-vivid-70:#3333a3;--ogds-color-indigo-vivid-80:#212463;--ogds-color-magenta-5:#f9f0f2;--ogds-color-magenta-10:#f6e1e8;--ogds-color-magenta-20:#f0bbcc;--ogds-color-magenta-30:#e895b3;--ogds-color-magenta-40:#e0699f;--ogds-color-magenta-50:#c84281;--ogds-color-magenta-60:#8b4566;--ogds-color-magenta-70:#66364b;--ogds-color-magenta-80:#402731;--ogds-color-magenta-90:#1b1617;--ogds-color-magenta-vivid-5:#fff2f5;--ogds-color-magenta-vivid-10:#ffddea;--ogds-color-magenta-vivid-20:#ffb4cf;--ogds-color-magenta-vivid-30:#ff87b2;--ogds-color-magenta-vivid-40:#fd4496;--ogds-color-magenta-vivid-50:#d72d79;--ogds-color-magenta-vivid-60:#ab2165;--ogds-color-magenta-vivid-70:#731f44;--ogds-color-magenta-vivid-80:#4f172e;--ogds-color-mint-cool-5:#e0f7f6;--ogds-color-mint-cool-10:#c4eeeb;--ogds-color-mint-cool-20:#9bd4cf;--ogds-color-mint-cool-30:#6fbab3;--ogds-color-mint-cool-40:#4f9e99;--ogds-color-mint-cool-50:#40807e;--ogds-color-mint-cool-60:#376462;--ogds-color-mint-cool-70:#2a4b45;--ogds-color-mint-cool-80:#203131;--ogds-color-mint-cool-90:#111818;--ogds-color-mint-cool-vivid-5:#d5fbf3;--ogds-color-mint-cool-vivid-10:#7efbe1;--ogds-color-mint-cool-vivid-20:#29e1cb;--ogds-color-mint-cool-vivid-30:#1dc2ae;--ogds-color-mint-cool-vivid-40:#00a398;--ogds-color-mint-cool-vivid-50:#008480;--ogds-color-mint-cool-vivid-60:#0f6460;--ogds-color-mint-cool-vivid-70:#0b4b3f;--ogds-color-mint-cool-vivid-80:#123131;--ogds-color-mint-5:#dbf6ed;--ogds-color-mint-10:#c7efe2;--ogds-color-mint-20:#92d9bb;--ogds-color-mint-30:#5abf95;--ogds-color-mint-40:#34a37e;--ogds-color-mint-50:#2e8367;--ogds-color-mint-60:#286846;--ogds-color-mint-70:#204e34;--ogds-color-mint-80:#193324;--ogds-color-mint-90:#0d1a12;--ogds-color-mint-vivid-5:#c9fbeb;--ogds-color-mint-vivid-10:#83fcd4;--ogds-color-mint-vivid-20:#0ceda6;--ogds-color-mint-vivid-30:#04c585;--ogds-color-mint-vivid-40:#00a871;--ogds-color-mint-vivid-50:#008659;--ogds-color-mint-vivid-60:#146947;--ogds-color-mint-vivid-70:#0c4e29;--ogds-color-mint-vivid-80:#0d351e;--ogds-color-orange-warm-5:#faeee5;--ogds-color-orange-warm-10:#fbe0d0;--ogds-color-orange-warm-20:#f7bca2;--ogds-color-orange-warm-30:#f3966d;--ogds-color-orange-warm-40:#e17141;--ogds-color-orange-warm-50:#bd5727;--ogds-color-orange-warm-60:#914734;--ogds-color-orange-warm-70:#633a32;--ogds-color-orange-warm-80:#3d2925;--ogds-color-orange-warm-90:#1c1615;--ogds-color-orange-warm-vivid-5:#fff3ea;--ogds-color-orange-warm-vivid-10:#ffe2d1;--ogds-color-orange-warm-vivid-20:#fbbaa7;--ogds-color-orange-warm-vivid-30:#fc906d;--ogds-color-orange-warm-vivid-40:#ff580a;--ogds-color-orange-warm-vivid-50:#cf4900;--ogds-color-orange-warm-vivid-60:#a72f10;--ogds-color-orange-warm-vivid-70:#782312;--ogds-color-orange-warm-vivid-80:#3d231d;--ogds-color-orange-5:#f6efe9;--ogds-color-orange-10:#f2e4d4;--ogds-color-orange-20:#f3bf90;--ogds-color-orange-30:#f09860;--ogds-color-orange-40:#dd7533;--ogds-color-orange-50:#a86437;--ogds-color-orange-60:#775540;--ogds-color-orange-70:#524236;--ogds-color-orange-80:#332d27;--ogds-color-orange-90:#1b1614;--ogds-color-orange-vivid-5:#fef2e4;--ogds-color-orange-vivid-10:#fce2c5;--ogds-color-orange-vivid-20:#ffbc78;--ogds-color-orange-vivid-30:#fa9441;--ogds-color-orange-vivid-40:#e66f0e;--ogds-color-orange-vivid-50:#c05600;--ogds-color-orange-vivid-60:#8c471c;--ogds-color-orange-vivid-70:#5f3617;--ogds-color-orange-vivid-80:#352313;--ogds-color-red-cool-5:#f8eff1;--ogds-color-red-cool-10:#f3e1e4;--ogds-color-red-cool-20:#ecbec6;--ogds-color-red-cool-30:#e09aa6;--ogds-color-red-cool-40:#e16b80;--ogds-color-red-cool-50:#cd425b;--ogds-color-red-cool-60:#9e394b;--ogds-color-red-cool-70:#68363f;--ogds-color-red-cool-80:#40282c;--ogds-color-red-cool-90:#1e1517;--ogds-color-red-cool-vivid-5:#fff2f5;--ogds-color-red-cool-vivid-10:#f8dfe2;--ogds-color-red-cool-vivid-20:#f8b9c5;--ogds-color-red-cool-vivid-30:#fd8ba0;--ogds-color-red-cool-vivid-40:#f45d79;--ogds-color-red-cool-vivid-50:#e41d3d;--ogds-color-red-cool-vivid-60:#b21d38;--ogds-color-red-cool-vivid-70:#822133;--ogds-color-red-cool-vivid-80:#4f1c24;--ogds-color-red-warm-5:#f6efea;--ogds-color-red-warm-10:#f4e3db;--ogds-color-red-warm-20:#ecc0a7;--ogds-color-red-warm-30:#dca081;--ogds-color-red-warm-40:#d27a56;--ogds-color-red-warm-50:#c3512c;--ogds-color-red-warm-60:#805039;--ogds-color-red-warm-70:#524236;--ogds-color-red-warm-80:#332d29;--ogds-color-red-warm-90:#1f1c18;--ogds-color-red-warm-vivid-5:#fff5ee;--ogds-color-red-warm-vivid-10:#fce1d4;--ogds-color-red-warm-vivid-20:#f6bd9c;--ogds-color-red-warm-vivid-30:#f39268;--ogds-color-red-warm-vivid-40:#ef5e25;--ogds-color-red-warm-vivid-50:#d54309;--ogds-color-red-warm-vivid-60:#9c3d10;--ogds-color-red-warm-vivid-70:#63340f;--ogds-color-red-warm-vivid-80:#3e2a1e;--ogds-color-red-5:#f9eeee;--ogds-color-red-10:#f8e1de;--ogds-color-red-20:#f7bbb1;--ogds-color-red-30:#f2938c;--ogds-color-red-40:#e9695f;--ogds-color-red-50:#d83933;--ogds-color-red-60:#a23737;--ogds-color-red-70:#6f3331;--ogds-color-red-80:#3e2927;--ogds-color-red-90:#1b1616;--ogds-color-red-vivid-5:#fff3f2;--ogds-color-red-vivid-10:#fde0db;--ogds-color-red-vivid-20:#fdb8ae;--ogds-color-red-vivid-30:#ff8d7b;--ogds-color-red-vivid-40:#fb5a47;--ogds-color-red-vivid-50:#e52207;--ogds-color-red-vivid-60:#b50909;--ogds-color-red-vivid-70:#8b0a03;--ogds-color-red-vivid-80:#5c1111;--ogds-color-violet-warm-5:#f8f0f9;--ogds-color-violet-warm-10:#f6dff8;--ogds-color-violet-warm-20:#e2bee4;--ogds-color-violet-warm-30:#d29ad8;--ogds-color-violet-warm-40:#bf77c8;--ogds-color-violet-warm-50:#b04abd;--ogds-color-violet-warm-60:#864381;--ogds-color-violet-warm-70:#5c395a;--ogds-color-violet-warm-80:#382936;--ogds-color-violet-warm-90:#1b151b;--ogds-color-violet-warm-vivid-5:#fef2ff;--ogds-color-violet-warm-vivid-10:#fbdcff;--ogds-color-violet-warm-vivid-20:#f4b2ff;--ogds-color-violet-warm-vivid-30:#ee83ff;--ogds-color-violet-warm-vivid-40:#d85bef;--ogds-color-violet-warm-vivid-50:#be32d0;--ogds-color-violet-warm-vivid-60:#93348c;--ogds-color-violet-warm-vivid-70:#711e6c;--ogds-color-violet-warm-vivid-80:#481441;--ogds-color-violet-5:#f4f1f9;--ogds-color-violet-10:#ebe3f9;--ogds-color-violet-20:#d0c3e9;--ogds-color-violet-30:#b8a2e3;--ogds-color-violet-40:#9d84d2;--ogds-color-violet-50:#8168b3;--ogds-color-violet-60:#665190;--ogds-color-violet-70:#4c3d69;--ogds-color-violet-80:#312b3f;--ogds-color-violet-90:#18161d;--ogds-color-violet-vivid-5:#f7f2ff;--ogds-color-violet-vivid-10:#ede3ff;--ogds-color-violet-vivid-20:#d5bfff;--ogds-color-violet-vivid-30:#c39deb;--ogds-color-violet-vivid-40:#ad79e9;--ogds-color-violet-vivid-50:#9355dc;--ogds-color-violet-vivid-60:#783cb9;--ogds-color-violet-vivid-70:#54278f;--ogds-color-violet-vivid-80:#39215e;--ogds-color-white-transparent-5:#ffffff03;--ogds-color-white-transparent-10:#ffffff1a;--ogds-color-white-transparent-20:#fff3;--ogds-color-white-transparent-30:#ffffff4d;--ogds-color-white-transparent-40:#fff6;--ogds-color-white-transparent-50:#ffffff80;--ogds-color-white-transparent-60:#fff9;--ogds-color-white-transparent-70:#ffffffb3;--ogds-color-white-transparent-80:#fffc;--ogds-color-white-transparent-90:#ffffffe6;--ogds-color-yellow-5:#faf3d1;--ogds-color-yellow-10:#f5e6af;--ogds-color-yellow-20:#e6c74c;--ogds-color-yellow-30:#c9ab48;--ogds-color-yellow-40:#a88f48;--ogds-color-yellow-50:#8a7237;--ogds-color-yellow-60:#6b5a39;--ogds-color-yellow-70:#504332;--ogds-color-yellow-80:#332d27;--ogds-color-yellow-90:#1a1614;--ogds-color-yellow-vivid-5:#fff5c2;--ogds-color-yellow-vivid-10:#fee685;--ogds-color-yellow-vivid-20:#face00;--ogds-color-yellow-vivid-30:#ddaa01;--ogds-color-yellow-vivid-40:#b38c00;--ogds-color-yellow-vivid-50:#947100;--ogds-color-yellow-vivid-60:#776017;--ogds-color-yellow-vivid-70:#5c4809;--ogds-color-yellow-vivid-80:#422d19}`,n=o.css`:root,:host{--ogds-column-gap-0:0px;--ogds-column-gap-1:.5rem;--ogds-column-gap-2:1rem;--ogds-column-gap-3:1.5rem;--ogds-column-gap-4:2rem;--ogds-column-gap-5:2.5rem;--ogds-column-gap-6:3rem;--ogds-column-gap-2px:2px;--ogds-column-gap-05:.25rem;--ogds-grid-base:8px;--ogds-input-width-2xs:5ex;--ogds-input-width-xs:9ex;--ogds-input-width-sm:13ex;--ogds-input-width-md:20ex;--ogds-input-width-lg:30ex;--ogds-input-width-xl:40ex;--ogds-input-width-2xl:50ex;--ogds-spacing-1:.5rem;--ogds-spacing-2:1rem;--ogds-spacing-3:1.5rem;--ogds-spacing-4:2rem;--ogds-spacing-5:2.5rem;--ogds-spacing-6:3rem;--ogds-spacing-7:3.5rem;--ogds-spacing-8:4rem;--ogds-spacing-9:4.5rem;--ogds-spacing-10:5rem;--ogds-spacing-15:7.5rem;--ogds-spacing-105:.75rem;--ogds-spacing-205:1.25rem;--ogds-spacing-05:.25rem;--ogds-spacing-neg-05:-.25rem;--ogds-spacing-neg-1:-.5rem;--ogds-spacing-neg-105:-.75rem;--ogds-spacing-neg-2:-1rem;--ogds-spacing-neg-205:-1.25rem;--ogds-spacing-neg-3:-1.5rem;--ogds-spacing-neg-4:-2rem;--ogds-spacing-neg-5:-2.5rem;--ogds-spacing-neg-6:-3rem;--ogds-spacing-neg-7:-3.5rem;--ogds-spacing-neg-8:-4rem;--ogds-spacing-neg-9:-4.5rem;--ogds-spacing-neg-10:-5rem;--ogds-spacing-neg-15:-7.5rem;--ogds-site-margins-mobile-width:1rem;--ogds-site-margins-width:2rem;--ogds-size-touch-target:3rem}`,b=o.css`:root,:host{--ogds-breakpoint-card:10rem;--ogds-breakpoint-card-lg:15rem;--ogds-breakpoint-mobile:20rem;--ogds-breakpoint-mobile-lg:30rem;--ogds-breakpoint-tablet:40rem;--ogds-breakpoint-tablet-lg:55rem;--ogds-breakpoint-desktop:64rem;--ogds-breakpoint-desktop-lg:75rem;--ogds-breakpoint-widescreen:87.5rem}`,p=o.css`:host{--ogds-banner-background-color:var(--ogds-color-base-lightest,#f0f0f0);--ogds-banner-button-close-background-color:var(--ogds-color-base-lighter,#dfe1e2);--ogds-banner-focus-outline-color:var(--ogds-color-blue-vivid-40,#2491ff);--ogds-banner-font-family:system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;--ogds-banner-font-size-xs:.75rem;--ogds-banner-font-size-sm:.875rem;--ogds-banner-font-size-base:.94rem;--ogds-banner-icon-gov-color:var(--ogds-color-blue-50,#2378c3);--ogds-banner-icon-https-color:var(--ogds-color-green-vivid-40,#719f2a);--ogds-banner-line-height-sm:1.2;--ogds-banner-line-height-base:1.6;--ogds-banner-link-color:var(--ogds-color-blue-vivid-60,#005ea2);--ogds-banner-link-hover-color:var(--ogds-color-blue-warm-vivid-70,#1a4480);--ogds-banner-max-width:var(--ogds-breakpoint-desktop);--ogds-banner-text-color:var(--ogds-color-base-darkest,#1b1b1b);--ogds-icon-lock:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='64' viewBox='0 0 52 64' class='usa-banner__lock-image' role='img' aria-labelledby='banner-lock-description-default' focusable='false'%3E%3Ctitle id='banner-lock-title-default'%3ELock%3C/title%3E%3Cdesc id='banner-lock-description-default'%3ELocked padlock icon%3C/desc%3E%3Cpath fill='%23000000' fill-rule='evenodd' d='M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z'%3E%3C/path%3E%3C/svg%3E\")}*{box-sizing:border-box}section{background-color:var(--ogds-banner-background-color);box-sizing:border-box;font-family:var(--ogds-banner-font-family);font-size:var(--ogds-banner-font-size-xs);text-align:start}section *,section :before,section :after{box-sizing:border-box}@media(min-width:40em){section{font-size:var(--ogds-banner-font-size-xs);padding-block-end:0}}section .usa-accordion{font-family:inherit}section .grid-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--ogds-breakpoint-tablet) / 2)),1fr));display:grid}@media(min-width:40em){section .grid-row{gap:var(--ogds-spacing-2)}}@media(min-width:64em){section .grid-row{gap:calc(var(--ogds-spacing-05) / 2)}}.grid-col-auto{flex:0 auto}.grid-col-fill{flex:1 1 0;width:auto;min-width:1px;max-width:100%}@media(min-width:40em){.tablet\\:grid-col-auto{flex:0 auto;width:auto;max-width:100%}}section .tablet\\:grid-col-6{gap:var(--ogds-spacing-1);flex:none;width:100%}header,.content{color:var(--ogds-banner-text-color)}.content{font-size:var(--ogds-banner-font-size-base);line-height:var(--ogds-banner-line-height-base);max-width:var(--ogds-banner-max-width);padding-block-start:var(--ogds-spacing-05);padding-block-end:var(--ogds-spacing-2);padding-inline:var(--ogds-spacing-1);width:100%;margin-inline:auto;overflow:hidden}@media(min-width:40em){.content{padding-block:var(--ogds-spacing-3)}}@media(min-width:64em){.content{padding-inline:var(--ogds-spacing-4)}}.content p:first-child{margin:0}.inner{max-width:var(--ogds-banner-max-width);flex-wrap:nowrap;align-items:flex-start;margin-inline:auto;padding-inline-start:var(--ogds-spacing-2);padding-inline-end:var(--ogds-spacing-05);display:flex}@media(min-width:40em){.inner{align-items:center}}@media(min-width:64em){.inner{padding-inline:var(--ogds-spacing-4)}}header{font-size:var(--ogds-banner-font-size-xs);min-height:var(--ogds-size-touch-target);padding-block:var(--ogds-spacing-1);font-weight:400;position:relative}@media(min-width:40em){header{min-height:0;padding-block:var(--ogds-spacing-05)}}.header-text{font-size:var(--ogds-banner-font-size-xs);line-height:var(--ogds-banner-line-height-sm);margin-block:0}.header-flag{float:left;width:var(--ogds-spacing-2);margin-inline-end:var(--ogds-spacing-1);padding-block-start:0}.header-action{color:var(--ogds-banner-link-color);cursor:pointer;font:inherit;line-height:var(--ogds-banner-line-height-sm);background:0 0;border:none;margin-block:2px 0;padding:0;text-decoration:underline}.header-action:hover{color:var(--ogds-banner-link-hover-color)}.header-action:after{content:\"\";height:1rem;-webkit-mask-image:var(--ogds-icon-expand-more);mask-image:var(--ogds-icon-expand-more);vertical-align:middle;background-color:currentColor;width:1rem;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1rem 1rem;mask-size:1rem 1rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.expanded .header-action{display:none}@media(min-width:40em){.header-action{display:none}}@media(forced-colors:active){.header-action{color:linktext}.header-action:after{background-color:buttontext}}header.expanded{padding-inline-end:calc(var(--ogds-size-touch-target) + var(--ogds-spacing-1))}@media(min-width:40em){header.expanded{font-size:var(--ogds-banner-font-size-sm);min-height:0;padding-inline-end:0;font-weight:400;display:block}}header.expanded .inner{margin-inline-start:0}@media(min-width:40em){header.expanded .inner{margin-inline-start:auto}}header.expanded .header-action{display:none}button{color:var(--ogds-banner-link-color);cursor:pointer;font:inherit;font-size:var(--ogds-banner-font-size-xs);height:auto;line-height:var(--ogds-banner-line-height-sm);outline:inherit;background:0 0;border:none;width:auto;padding:0;padding-block-start:0;padding-inline-start:0;text-decoration:none;display:block;position:absolute;top:0;bottom:0;left:0}button:hover{color:var(--ogds-banner-link-hover-color)}@media(max-width:39.99em){button{width:100%}button:enabled:focus{outline-offset:-.25rem}}button:not([disabled]):focus{outline:var(--ogds-spacing-05) solid var(--ogds-banner-focus-outline-color)}@media(min-width:40em){button{margin-inline-start:var(--ogds-spacing-1);display:inline;position:relative;top:auto;bottom:auto;left:auto}button:after{content:\"\";height:1rem;-webkit-mask-image:var(--ogds-icon-expand-more);mask-image:var(--ogds-icon-expand-more);background-color:currentColor;width:1rem;margin-block:0;display:inline-block;position:absolute;top:0;right:-18px;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}button:hover{text-decoration:none}}@media(forced-colors:active){button:after,button:hover:after{background-color:buttontext}}button[aria-expanded=false],button[aria-expanded=false]:hover,button[aria-expanded=true],button[aria-expanded=true]:hover{background-image:none}@media(forced-colors:active){button[aria-expanded=false]:before,button[aria-expanded=false]:hover:before,button[aria-expanded=true]:before,button[aria-expanded=true]:hover:before{content:none}}@media(max-width:39.99em){button[aria-expanded=true]:before{background-color:var(--ogds-banner-button-close-background-color);content:\"\";height:var(--ogds-size-touch-target);width:var(--ogds-size-touch-target);display:block;position:absolute;top:0;bottom:0;right:0}button[aria-expanded=true]:after{background-color:var(--ogds-banner-link-color);content:\"\";height:var(--ogds-size-touch-target);-webkit-mask-image:var(--ogds-icon-close);mask-image:var(--ogds-icon-close);width:var(--ogds-size-touch-target);display:block;position:absolute;top:0;bottom:0;right:0;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1.5rem 1.5rem;mask-size:1.5rem 1.5rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}@media(min-width:40em){button[aria-expanded=true]{height:auto;padding:0;position:relative}button[aria-expanded=true]:after,button[aria-expanded=true]:hover:after{-webkit-mask-image:var(--ogds-icon-expand-less);mask-image:var(--ogds-icon-expand-less);position:absolute}}@media(forced-colors:active){button[aria-expanded=true]:after,button[aria-expanded=true]:hover:after{background-color:buttontext}}.button-text{text-decoration:underline;position:absolute;left:-999em;right:auto}@media(min-width:40em){.button-text{display:inline;position:static;left:auto;right:auto}}@media(forced-colors:active){.button-text{color:linktext}}.guidance{max-width:62ex;align-items:flex-start;padding-block-start:var(--ogds-spacing-2);display:flex}@media(max-width:39.99em){.guidance{padding-inline-end:.75rem}}@media(min-width:40em){.guidance{padding-block-start:0;padding-inline-end:var(--ogds-spacing-1)}}.icon{width:var(--ogds-spacing-5)}.icon-lock,::slotted(.usa-banner__icon-lock){height:1.5ex;-webkit-mask-image:var(--ogds-icon-lock);mask-image:var(--ogds-icon-lock);background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:cover;width:1.21875ex;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-gov,.icon-https{padding-inline-start:calc(var(--ogds-spacing-5) + var(--ogds-spacing-1));position:relative}:is(.icon-gov,.icon-https):before{content:\"\";height:var(--ogds-spacing-5);width:var(--ogds-spacing-5);display:inline-block;position:absolute;top:0;left:0;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-gov:before{background-color:var(--ogds-banner-icon-gov-color);-webkit-mask-image:var(--ogds-icon-gov);mask-image:var(--ogds-icon-gov)}.icon-https:before{background-color:var(--ogds-banner-icon-https-color);-webkit-mask-image:var(--ogds-icon-https);mask-image:var(--ogds-icon-https)}`,h="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAsBAMAAAAncaPMAAAAAXNSR0IArs4c6QAAABtQTFRF////4EAg2z8g2z8f2z4f2j4fHjSyHjOxHTOxQEYPwgAAAIdJREFUeNrNkUENxDAMBEOhFJaCKZiCKZhCKBj2ebV3rdR71+pIq+Qxj1GyqjJ3U8VlHkc07hFm0awBYe91juq6MSI0yhSAEgkzJ4TMKiXyzFw3pgR9lmIBJlqj2AmBedf+IycExmlKZVzvZEJ4A0oBrjBl/m6PCy95B3fFAN6YuQPxhbcB4QMkEj04wQXD5wAAAABJRU5ErkJggg==",w="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-dot-gov%3c/title%3e%3cpath%20fill='%232378C3'%20fill-rule='evenodd'%20d='m32%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032-32-14.3-32-32%2014.3-32%2032-32zm0%201.2c-17%200-30.8%2013.8-30.8%2030.8s13.8%2030.8%2030.8%2030.8%2030.8-13.8%2030.8-30.8-13.8-30.8-30.8-30.8zm11.4%2038.9c.5%200%20.9.4.9.8v1.6h-24.6v-1.6c0-.5.4-.8.9-.8zm-17.1-12.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h.8c.5%200%20.9.4.9.8v.8h-21.4v-.8c0-.5.4-.8.9-.8h.8v-9.8zm5.7-8.2%2012.3%204.9v1.6h-1.6c0%20.5-.4.8-.9.8h-19.6c-.5%200-.9-.4-.9-.8h-1.6v-1.6s12.3-4.9%2012.3-4.9z'/%3e%3c/svg%3e",u="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-https%3c/title%3e%3cpath%20fill='%23719F2A'%20fill-rule='evenodd'%20d='M32%200c17.673%200%2032%2014.327%2032%2032%200%2017.673-14.327%2032-32%2032C14.327%2064%200%2049.673%200%2032%200%2014.327%2014.327%200%2032%200zm0%201.208C14.994%201.208%201.208%2014.994%201.208%2032S14.994%2062.792%2032%2062.792%2062.792%2049.006%2062.792%2032%2049.006%201.208%2032%201.208zm0%2018.886a7.245%207.245%200%200%201%207.245%207.245v3.103h.52c.86%200%201.557.698%201.557%201.558v9.322c0%20.86-.697%201.558-1.557%201.558h-15.53c-.86%200-1.557-.697-1.557-1.558V32c0-.86.697-1.558%201.557-1.558h.52V27.34A7.245%207.245%200%200%201%2032%2020.094zm0%203.103a4.142%204.142%200%200%200-4.142%204.142v3.103h8.284V27.34A4.142%204.142%200%200%200%2032%2023.197z'/%3e%3c/svg%3e",k="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'/%3e%3c/svg%3e",t="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M16.59%208.59%2012%2013.17%207.41%208.59%206%2010l6%206%206-6z'/%3e%3c/svg%3e",v="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='m12%208-6%206%201.41%201.41L12%2010.83l4.59%204.58L18%2014z'/%3e%3c/svg%3e",f=(c,e)=>{!customElements||customElements.get(c)||customElements.define(c,e)},g={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 solo en sitios web oficiales y seguros."}}},a=class a extends o.LitElement{toggle(){this.isOpen=!this.isOpen;const e=this.shadowRoot?.querySelector(".content");e&&e.toggleAttribute("hidden")}constructor(){super(),this.flagSrc=h,this.lang="en",this.isOpen=!1,this.tld="gov"}get _bannerText(){return g[this.lang]||g.en}get _actionText(){return this.querySelector('[slot="banner-action"]')?.textContent}domainTemplate(e){const{domain:d}=this._bannerText;return o.html`
+      <div class="icon-gov">
+        <p>
+          <strong>
+            <slot name="domain-heading"> ${d.heading} .${e} </slot>
+          </strong>
+          <br />
+          <slot name="domain-text">
+            ${d.text1} <strong>.${e}</strong> ${d.text2}
+          </slot>
+        </p>
+      </div>
+    `}lockIcon(){return o.html`
+      <span
+        class="icon-lock"
+        role="img"
+        aria-label="Locked padlock icon"
+      ></span>
+    `}httpsTemplate(e){const{https:d}=this._bannerText;return o.html`
+      <div class="icon-https">
+        <p>
+          <strong>
+            <slot name="https-heading">
+              ${d.heading1} .${e} ${d.heading2}
+            </slot> </strong
+          ><br />
+          <slot name="https-text">
+            ${s.unsafeHTML(d.text1)} (${this.lockIcon()})
+            ${s.unsafeHTML(d.text2)} .${e}${d.text3}
+          </slot>
+        </p>
+      </div>
+    `}render(){const e={expanded:this.isOpen},d=this.tld==="mil"?"mil":"gov",{banner:r}=this._bannerText;return o.html`
+      <section aria-label=${this.label||r.label}>
+        <div class="usa-accordion">
+          <header class="${m.classMap(e)}">
+            <div class="inner">
+              <div class="grid-col-auto">
+                <img
+                  aria-hidden="true"
+                  class="header-flag"
+                  src=${this.flagSrc}
+                  alt=""
+                />
+              </div>
+              <div
+                class="grid-col-fill tablet:grid-col-auto"
+                aria-hidden="true"
+              >
+                <p class="header-text">
+                  <slot name="banner-text">${r.text}</slot>
+                </p>
+                <!-- 
+                  Since the header-action text below is underlined, the slot and p 
+                  need to be on the same line to avoid one extra space of underline 
+                  before the expand icon.
+                -->
+                <!-- prettier-ignore -->
+                <p class="header-action"><slot name="banner-action">${r.action}</slot></p>
+              </div>
+              <button
+                type="button"
+                class="usa-accordion__button"
+                aria-expanded="${this.isOpen}"
+                aria-controls="gov-banner-default"
+                @click="${this.toggle}"
+              >
+                <span class="button-text">
+                  ${this._actionText||r.action}
+                </span>
+              </button>
+            </div>
+          </header>
+          <div class="content usa-accordion__content" hidden>
+            <div class="grid-row grid-gap-lg">
+              <div class="guidance tablet:grid-col-6">
+                ${this.domainTemplate(d)}
+              </div>
+              <div class="guidance tablet:grid-col-6">
+                ${this.httpsTemplate(d)}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    `}};a.properties={flagSrc:{type:String},lang:{type:String,reflect:!0},isOpen:{state:!0},label:{type:String},tld:{type:String,reflect:!0}},a.styles=[o.css`
+      :host {
+        /** Icons */
+        --ogds-icon-close: url("${o.unsafeCSS(k)}");
+        --ogds-icon-expand-less: url("${o.unsafeCSS(v)}");
+        --ogds-icon-expand-more: url("${o.unsafeCSS(t)}");
+        --ogds-icon-gov: url("${o.unsafeCSS(w)}");
+        --ogds-icon-https: url("${o.unsafeCSS(u)}");
+      }
+    `,b,l,n,p];let i=a;f("ogds-banner",i);exports.OgdsBanner=i;exports.colorTokens=l;exports.defineCustomElement=f;exports.iconChevronDown=t;exports.iconChevronUp=v;exports.spacingTokens=n;