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

package/dist/{index-Bl2KLDbH.js → index-DDf2o6Dk.js}

@@ -20,26 +20,26 @@ const f = r`:root,:host{--ogds-color-black-transparent-5:#00000003;--ogds-color-
       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."
+      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",
+      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."
+      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."
+      text3: ". Comparta información sensible solo en sitios web oficiales y seguros."
     }
   }
 }, c = class c extends t {
@@ -97,7 +97,7 @@ const f = r`:root,:host{--ogds-color-black-transparent-5:#00000003;--ogds-color-
           ><br />
           <slot name="https-text">
             ${l(e.text1)} (${this.lockIcon()})
-            ${l(e.text2)} .${o} ${e.text3}
+            ${l(e.text2)} .${o}${e.text3}
           </slot>
         </p>
       </div>

package/dist/index-DDf2o6Dk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-DDf2o6Dk.js","sources":["../node_modules/@uswds/uswds/dist/img/us_flag_small.png","../node_modules/@uswds/uswds/dist/img/icon-dot-gov.svg","../node_modules/@uswds/uswds/dist/img/icon-https.svg","../src/shared/icons/close.svg","../src/shared/icons/expand_more.svg","../src/shared/icons/expand_less.svg","../src/utils/index.ts","../src/components/ogds-banner/index.ts"],"sourcesContent":["export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAsBAMAAAAncaPMAAAAAXNSR0IArs4c6QAAABtQTFRF////4EAg2z8g2z8f2z4f2j4fHjSyHjOxHTOxQEYPwgAAAIdJREFUeNrNkUENxDAMBEOhFJaCKZiCKZhCKBj2ebV3rdR71+pIq+Qxj1GyqjJ3U8VlHkc07hFm0awBYe91juq6MSI0yhSAEgkzJ4TMKiXyzFw3pgR9lmIBJlqj2AmBedf+IycExmlKZVzvZEJ4A0oBrjBl/m6PCy95B3fFAN6YuQPxhbcB4QMkEj04wQXD5wAAAABJRU5ErkJggg==\"","export default \"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\"","export default \"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\"","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%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\"","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='M16.59%208.59%2012%2013.17%207.41%208.59%206%2010l6%206%206-6z'/%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='m12%208-6%206%201.41%201.41L12%2010.83l4.59%204.58L18%2014z'/%3e%3c/svg%3e\"","export const defineCustomElement = (\n  tag: string,\n  className: CustomElementConstructor,\n) => {\n  if (!customElements || customElements.get(tag)) return;\n\n  customElements.define(tag, className);\n};\n","import { LitElement, html, css, unsafeCSS } from \"lit\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport colorTokens from \"@ogds/tokens/styles/css/colors.css\";\nimport spacingTokens from \"@ogds/tokens/styles/css/spacing.css\";\nimport breakpointTokens from \"@ogds/tokens/styles/css/breakpoints.css\";\nimport styles from \"./ogds-banner.css\";\n\nimport usFlagSmall from \"@uswds/uswds/img/us_flag_small.png\";\nimport iconDotGov from \"@uswds/uswds/img/icon-dot-gov.svg\";\nimport iconHttps from \"@uswds/uswds/img/icon-https.svg\";\nimport iconClose from \"../../shared/icons/close.svg\";\nimport iconExpandMore from \"../../shared/icons/expand_more.svg\";\nimport iconExpandLess from \"../../shared/icons/expand_less.svg\";\nimport { defineCustomElement } from \"../../utils\";\n\ninterface OgdsBannerTranslations {\n  banner: {\n    label: string;\n    text: string;\n    action: string;\n  };\n  domain: {\n    heading: string;\n    text1: string;\n    text2: string;\n  };\n  https: {\n    heading1: string;\n    heading2: string;\n    text1: string;\n    text2: string;\n    text3: string;\n  };\n}\n\ntype SupportedLanguage = \"en\" | \"es\";\n\nconst OGDS_BANNER_TRANSLATIONS: Record<\n  SupportedLanguage,\n  OgdsBannerTranslations\n> = {\n  en: {\n    banner: {\n      label: \"Official website of the United States government\",\n      text: \"An official website of the United States government\",\n      action: \"Here’s how you know\",\n    },\n    domain: {\n      heading: \"Official websites use\",\n      text1: \"A\",\n      text2:\n        \"website belongs to an official government organization in the United States.\",\n    },\n    https: {\n      heading1: \"Secure\",\n      heading2: \"websites use HTTPS\",\n      text1: \"A <strong>lock</strong>\",\n      text2:\n        \"or <strong>https://</strong> means you’ve safely connected to the\",\n      text3:\n        \" website. Share sensitive information only on official, secure websites.\",\n    },\n  },\n  es: {\n    banner: {\n      label: \"Un sitio oficial del gobierno de Estados Unidos\",\n      text: \"Un sitio oficial del gobierno de Estados Unidos\",\n      action: \"Así es como usted puede verificarlo\",\n    },\n    domain: {\n      heading: \"Los sitios web oficiales usan\",\n      text1: \"Un sitio web\",\n      text2:\n        \"pertenece a una organización oficial del gobierno de Estados Unidos.\",\n    },\n    https: {\n      heading1: \"Los sitios web seguros\",\n      heading2: \"usan HTTPS\",\n      text1: \"Un <strong>candado</strong>\",\n      text2:\n        \"o <strong>https://</strong> significa que usted se conectó de forma segura a un sitio web\",\n      text3:\n        \". Comparta información sensible solo en sitios web oficiales y seguros.\",\n    },\n  },\n};\n\n/**\n * @summary The ogds-banner component.\n *\n * @attribute {string} lang - The element's language.\n * @attribute {string} label - The custom aria label users can override.\n * @attribute {string} tld - The top level domain for the site.\n *\n * @cssprop --ogds-banner-background-color - Sets banner background color.\n * @cssprop --ogds-banner-button-close-background-color - Sets the background color for the close control on smaller viewports.\n * @cssprop --ogds-banner-focus-outline-color - Sets banner focus outline color.\n * @cssprop --ogds-banner-font-family - Sets banner font family.\n * @cssprop --ogds-banner-icon-gov-color - Sets the color for the official government domain icon in the expanded state of the banner.\n * @cssprop --ogds-banner-icon-https-color - Sets the color for the https icon in the expanded state of the banner.\n * @cssprop --ogds-banner-link-color - Sets the default link color.\n * @cssprop --ogds-banner-link-hover-color - Sets the default link color.\n * @cssprop --ogds-banner-text-color - Sets the default text color.\n *\n * @slot banner-text - The text for official government website text.\n * @slot banner-action - Action text label \"Here's how you know.\"\n * @slot domain-heading - Heading text for the domain section.\n * @slot domain-text - Body text for domain section.\n * @slot https-heading - Heading for HTTPs section.\n * @slot https-text - Body text for HTTPs section.\n *\n * @element ogds-banner\n */\nexport class OgdsBanner extends LitElement {\n  static properties = {\n    flagSrc: { type: String },\n    lang: { type: String, reflect: true },\n    isOpen: { state: true },\n    label: { type: String },\n    tld: { type: String, reflect: true },\n  };\n\n  // Property declarations\n  flagSrc!: string;\n  lang!: \"en\" | \"es\";\n  isOpen!: boolean;\n  label!: string;\n  tld!: \"gov\" | \"mil\";\n\n  toggle() {\n    this.isOpen = !this.isOpen;\n    const contentElement = this.shadowRoot?.querySelector(\".content\");\n    if (contentElement) {\n      contentElement.toggleAttribute(\"hidden\");\n    }\n  }\n\n  constructor() {\n    super();\n    this.flagSrc = usFlagSmall;\n    this.lang = \"en\";\n    this.isOpen = false;\n    this.tld = \"gov\";\n  }\n\n  // Get English or Spanish strings. Default to English if an unknown `lang` is passed.\n  // Ex: <usa-banner lang=\"zy\"></usa-banner>\n  protected get _bannerText() {\n    return (\n      OGDS_BANNER_TRANSLATIONS[this.lang] || OGDS_BANNER_TRANSLATIONS[\"en\"]\n    );\n  }\n\n  // Get the action text and use for both mobile & desktop buttons.\n  protected get _actionText() {\n    const bannerActionText = this.querySelector('[slot=\"banner-action\"]');\n\n    return bannerActionText?.textContent;\n  }\n\n  domainTemplate(tld: string) {\n    const { domain } = this._bannerText;\n\n    return html`\n      <div class=\"icon-gov\">\n        <p>\n          <strong>\n            <slot name=\"domain-heading\"> ${domain.heading} .${tld} </slot>\n          </strong>\n          <br />\n          <slot name=\"domain-text\">\n            ${domain.text1} <strong>.${tld}</strong> ${domain.text2}\n          </slot>\n        </p>\n      </div>\n    `;\n  }\n\n  lockIcon() {\n    return html`\n      <span\n        class=\"icon-lock\"\n        role=\"img\"\n        aria-label=\"Locked padlock icon\"\n      ></span>\n    `;\n  }\n\n  httpsTemplate(tld: string) {\n    const { https } = this._bannerText;\n\n    return html`\n      <div class=\"icon-https\">\n        <p>\n          <strong>\n            <slot name=\"https-heading\">\n              ${https.heading1} .${tld} ${https.heading2}\n            </slot> </strong\n          ><br />\n          <slot name=\"https-text\">\n            ${unsafeHTML(https.text1)} (${this.lockIcon()})\n            ${unsafeHTML(https.text2)} .${tld}${https.text3}\n          </slot>\n        </p>\n      </div>\n    `;\n  }\n\n  static styles = [\n    css`\n      :host {\n        /** Icons */\n        --ogds-icon-close: url(\"${unsafeCSS(iconClose)}\");\n        --ogds-icon-expand-less: url(\"${unsafeCSS(iconExpandLess)}\");\n        --ogds-icon-expand-more: url(\"${unsafeCSS(iconExpandMore)}\");\n        --ogds-icon-gov: url(\"${unsafeCSS(iconDotGov)}\");\n        --ogds-icon-https: url(\"${unsafeCSS(iconHttps)}\");\n      }\n    `,\n    breakpointTokens,\n    colorTokens,\n    spacingTokens,\n    styles,\n  ];\n\n  render() {\n    const classes = { [\"expanded\"]: this.isOpen };\n    // ? Is there a better way to fallback to a default value is passed value doesn't match?\n    // Example: User passes `tld=\"zzz\"` --> uses \"gov\" domain instead of `zzz`.\n    const tld = this.tld === \"mil\" ? \"mil\" : \"gov\";\n    const { banner } = this._bannerText;\n\n    return html`\n      <section aria-label=${this.label || banner.label}>\n        <div class=\"usa-accordion\">\n          <header class=\"${classMap(classes)}\">\n            <div class=\"inner\">\n              <div class=\"grid-col-auto\">\n                <img\n                  aria-hidden=\"true\"\n                  class=\"header-flag\"\n                  src=${this.flagSrc}\n                  alt=\"\"\n                />\n              </div>\n              <div\n                class=\"grid-col-fill tablet:grid-col-auto\"\n                aria-hidden=\"true\"\n              >\n                <p class=\"header-text\">\n                  <slot name=\"banner-text\">${banner.text}</slot>\n                </p>\n                <!-- \n                  Since the header-action text below is underlined, the slot and p \n                  need to be on the same line to avoid one extra space of underline \n                  before the expand icon.\n                -->\n                <!-- prettier-ignore -->\n                <p class=\"header-action\"><slot name=\"banner-action\">${banner.action}</slot></p>\n              </div>\n              <button\n                type=\"button\"\n                class=\"usa-accordion__button\"\n                aria-expanded=\"${this.isOpen}\"\n                aria-controls=\"gov-banner-default\"\n                @click=\"${this.toggle}\"\n              >\n                <span class=\"button-text\">\n                  ${this._actionText || banner.action}\n                </span>\n              </button>\n            </div>\n          </header>\n          <div class=\"content usa-accordion__content\" hidden>\n            <div class=\"grid-row grid-gap-lg\">\n              <div class=\"guidance tablet:grid-col-6\">\n                ${this.domainTemplate(tld)}\n              </div>\n              <div class=\"guidance tablet:grid-col-6\">\n                ${this.httpsTemplate(tld)}\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n}\n\ndefineCustomElement(\"ogds-banner\", OgdsBanner);\n"],"names":["usFlagSmall","iconDotGov","iconHttps","iconClose","iconChevronDown","iconChevronUp","defineCustomElement","tag","className","OGDS_BANNER_TRANSLATIONS","_OgdsBanner","LitElement","contentElement","tld","domain","html","https","unsafeHTML","classes","banner","classMap","css","unsafeCSS","iconExpandLess","iconExpandMore","breakpointTokens","colorTokens","spacingTokens","styles","OgdsBanner"],"mappings":"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","x_google_ignoreList":[0,1,2]}

package/dist/types/custom-element-jsx.d.ts

@@ -74,10 +74,17 @@ export type OgdsAccordionProps = {
 export type OgdsAccordionToggleProps = {
   /** The `id` of the `<ogds-accordion>` to control. Required. */
   controls?: string;
-  /** Button label when all panels are collapsed. Defaults to "Expand All". */
-  "expand-label"?: string;
-  /** Button label when one or more panels are open. Defaults to "Collapse All". */
-  "collapse-label"?: string;
+};
+
+export type OGDSAlertProps = {
+  /** The type of alert (info, warning, etc) */
+  type?: string;
+  /** Use this attribute to hide the icon */
+  noIcon?: string;
+  /**  */
+  "no-icon"?: boolean;
+  /**  */
+  _headingNodes?: Node[];
 };
 
 export type OgdsBannerProps = {
@@ -93,6 +100,8 @@ export type OgdsBannerProps = {
   isOpen?: boolean;
 };
 
+export type OgdsTaskListProps = {};
+
 export type CustomElements = {
   /**
    * The ogds-accordion component.
@@ -121,11 +130,26 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Slots:**
+   *  - **expand-label** - Button label when all panels are collapsed. Defaults to "Expand All".
+   * - **collapse-label** - Button label when one or more panels are open. Defaults to "Collapse All".
+   *
    * ### **CSS Parts:**
    *  - **button** - The toggle button.
    */
   "ogds-accordion-toggle": Partial<OgdsAccordionToggleProps & BaseProps & BaseEvents>;
 
+  /**
+   * The ogds-alert component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **heading** - Text for the heading. Make sure to specify the correct heading level (h2, h3, etc)
+   * - **body** - Body content for the alert. Can contain HTML (links, etc).
+   */
+  "ogds-alert": Partial<OGDSAlertProps & BaseProps & BaseEvents>;
+
   /**
    * The ogds-banner component.
    * ---
@@ -151,4 +175,11 @@ export type CustomElements = {
    * - **--ogds-banner-text-color** - Sets the default text color. _(default: undefined)_
    */
   "ogds-banner": Partial<OgdsBannerProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "ogds-task-list": Partial<OgdsTaskListProps & BaseProps & BaseEvents>;
 };

package/dist/types/custom-element-solidjs.d.ts

@@ -78,14 +78,23 @@ type OgdsAccordionProps = {
 type OgdsAccordionToggleProps = {
   /** The `id` of the `<ogds-accordion>` to control. Required. */
   controls?: string;
-  /** Button label when all panels are collapsed. Defaults to "Expand All". */
-  "expand-label"?: string;
-  /** Button label when one or more panels are open. Defaults to "Collapse All". */
-  "collapse-label"?: string;
 } & JSX.DirectiveFunctionAttributes<OgdsAccordionToggle> &
   JSX.OnAttributes<OgdsAccordionToggle> &
   JSX.OnCaptureAttributes<OgdsAccordionToggle>;
 
+type OGDSAlertProps = {
+  /** The type of alert (info, warning, etc) */
+  type?: string;
+  /** Use this attribute to hide the icon */
+  noIcon?: string;
+  /**  */
+  "no-icon"?: boolean;
+  /**  */
+  "prop:_headingNodes"?: Node[];
+} & JSX.DirectiveFunctionAttributes<OGDSAlert> &
+  JSX.OnAttributes<OGDSAlert> &
+  JSX.OnCaptureAttributes<OGDSAlert>;
+
 type OgdsBannerProps = {
   /** The element's language. */
   lang?: "en" | "es";
@@ -101,6 +110,10 @@ type OgdsBannerProps = {
   JSX.OnAttributes<OgdsBanner> &
   JSX.OnCaptureAttributes<OgdsBanner>;
 
+type OgdsTaskListProps = {} & JSX.DirectiveFunctionAttributes<OgdsTaskList> &
+  JSX.OnAttributes<OgdsTaskList> &
+  JSX.OnCaptureAttributes<OgdsTaskList>;
+
 export type CustomElements = {
   /**
    * The ogds-accordion component.
@@ -129,11 +142,26 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Slots:**
+   *  - **expand-label** - Button label when all panels are collapsed. Defaults to "Expand All".
+   * - **collapse-label** - Button label when one or more panels are open. Defaults to "Collapse All".
+   *
    * ### **CSS Parts:**
    *  - **button** - The toggle button.
    */
   "ogds-accordion-toggle": Partial<OgdsAccordionToggleProps & BaseProps & BaseEvents>;
 
+  /**
+   * The ogds-alert component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **heading** - Text for the heading. Make sure to specify the correct heading level (h2, h3, etc)
+   * - **body** - Body content for the alert. Can contain HTML (links, etc).
+   */
+  "ogds-alert": Partial<OGDSAlertProps & BaseProps & BaseEvents>;
+
   /**
    * The ogds-banner component.
    * ---
@@ -159,4 +187,11 @@ export type CustomElements = {
    * - **--ogds-banner-text-color** - Sets the default text color. _(default: undefined)_
    */
   "ogds-banner": Partial<OgdsBannerProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "ogds-task-list": Partial<OgdsTaskListProps & BaseProps & BaseEvents>;
 };

package/dist/types/custom-element-svelte.d.ts

@@ -51,10 +51,17 @@ type OgdsAccordionProps = {
 type OgdsAccordionToggleProps = {
   /** The `id` of the `<ogds-accordion>` to control. Required. */
   controls?: string;
-  /** Button label when all panels are collapsed. Defaults to "Expand All". */
-  "expand-label"?: string;
-  /** Button label when one or more panels are open. Defaults to "Collapse All". */
-  "collapse-label"?: string;
+};
+
+type OGDSAlertProps = {
+  /** The type of alert (info, warning, etc) */
+  type?: string;
+  /** Use this attribute to hide the icon */
+  noIcon?: string;
+  /**  */
+  "no-icon"?: boolean;
+  /**  */
+  "bind:_headingNodes"?: Node[];
 };
 
 type OgdsBannerProps = {
@@ -70,6 +77,8 @@ type OgdsBannerProps = {
   isOpen?: boolean;
 };
 
+type OgdsTaskListProps = {};
+
 export type CustomElements = {
   /**
    * The ogds-accordion component.
@@ -98,11 +107,26 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Slots:**
+   *  - **expand-label** - Button label when all panels are collapsed. Defaults to "Expand All".
+   * - **collapse-label** - Button label when one or more panels are open. Defaults to "Collapse All".
+   *
    * ### **CSS Parts:**
    *  - **button** - The toggle button.
    */
   "ogds-accordion-toggle": Partial<OgdsAccordionToggleProps & BaseProps & BaseEvents>;
 
+  /**
+   * The ogds-alert component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **heading** - Text for the heading. Make sure to specify the correct heading level (h2, h3, etc)
+   * - **body** - Body content for the alert. Can contain HTML (links, etc).
+   */
+  "ogds-alert": Partial<OGDSAlertProps & BaseProps & BaseEvents>;
+
   /**
    * The ogds-banner component.
    * ---
@@ -128,6 +152,13 @@ export type CustomElements = {
    * - **--ogds-banner-text-color** - Sets the default text color. _(default: undefined)_
    */
   "ogds-banner": Partial<OgdsBannerProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "ogds-task-list": Partial<OgdsTaskListProps & BaseProps & BaseEvents>;
 };
 
 declare namespace svelteHTML {

package/dist/types/custom-element-vuejs.d.ts

@@ -14,10 +14,17 @@ type OgdsAccordionProps = {
 type OgdsAccordionToggleProps = {
   /** The `id` of the `<ogds-accordion>` to control. Required. */
   controls?: string;
-  /** Button label when all panels are collapsed. Defaults to "Expand All". */
-  "expand-label"?: string;
-  /** Button label when one or more panels are open. Defaults to "Collapse All". */
-  "collapse-label"?: string;
+};
+
+type OGDSAlertProps = {
+  /** The type of alert (info, warning, etc) */
+  type?: string;
+  /** Use this attribute to hide the icon */
+  noIcon?: string;
+  /**  */
+  "no-icon"?: boolean;
+  /**  */
+  _headingNodes?: Node[];
 };
 
 type OgdsBannerProps = {
@@ -33,6 +40,8 @@ type OgdsBannerProps = {
   isOpen?: boolean;
 };
 
+type OgdsTaskListProps = {};
+
 export type CustomElements = {
   /**
    * The ogds-accordion component.
@@ -61,11 +70,26 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Slots:**
+   *  - **expand-label** - Button label when all panels are collapsed. Defaults to "Expand All".
+   * - **collapse-label** - Button label when one or more panels are open. Defaults to "Collapse All".
+   *
    * ### **CSS Parts:**
    *  - **button** - The toggle button.
    */
   "ogds-accordion-toggle": DefineComponent<OgdsAccordionToggleProps>;
 
+  /**
+   * The ogds-alert component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **heading** - Text for the heading. Make sure to specify the correct heading level (h2, h3, etc)
+   * - **body** - Body content for the alert. Can contain HTML (links, etc).
+   */
+  "ogds-alert": DefineComponent<OGDSAlertProps>;
+
   /**
    * The ogds-banner component.
    * ---
@@ -91,6 +115,13 @@ export type CustomElements = {
    * - **--ogds-banner-text-color** - Sets the default text color. _(default: undefined)_
    */
   "ogds-banner": DefineComponent<OgdsBannerProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "ogds-task-list": DefineComponent<OgdsTaskListProps>;
 };
 
 declare module "vue" {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogds/elements",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "type": "module",
   "customElements": "custom-elements.json",
   "types": "./dist/index.d.ts",
@@ -37,11 +37,16 @@
     "dev": "vite --config ./config/vite.config.ts",
     "fix-permissions": "sudo chown -R $(id -u):$(id -g) .",
     "pages": "npm run storybook:build && cp -r storybook-static _site",
+    "playwright:install": "playwright install --with-deps",
+    "playwright:test": "playwright test --config=./config/playwright.config.ts",
+    "playwright:update-screenshots": "playwright test --config=./config/playwright.config.ts --update-snapshots",
     "prepare": "husky",
-    "prettier:js": "npx prettier --check '**/*.{cjs,css,js,json,jsx,mjs,ts,tsx}' --config ./config/.prettierrc",
-    "prettier:js:fix": "npx prettier --write '**/*.{cjs,css,js,json,jsx,mjs,ts,tsx}' --config ./config/.prettierrc",
-    "prettier:md": "npx prettier --check '**/*.{md,mdx}' --config ./config/.prettierrc",
-    "prettier:md:fix": "npx prettier --write '**/*.{md,mdx}' --config ./config/.prettierrc",
+    "prettier:js": "prettier --check '**/*.{cjs,css,js,json,jsx,mjs,ts,tsx}' --config ./config/.prettierrc",
+    "prettier:js:fix": "prettier --write '**/*.{cjs,css,js,json,jsx,mjs,ts,tsx}' --config ./config/.prettierrc",
+    "prettier:md": "prettier --check '**/*.{md,mdx}' --config ./config/.prettierrc",
+    "prettier:md:fix": "prettier --write '**/*.{md,mdx}' --config ./config/.prettierrc",
+    "prettier:github": "prettier --check '.github' --config ./config/.prettierrc",
+    "prettier:github:fix": "prettier --write '.github' --config ./config/.prettierrc",
     "start": "npm run storybook & npm run manifest:watch",
     "storybook:build": "storybook build",
     "storybook": "storybook dev -p 8008",
@@ -49,8 +54,8 @@
     "storybook:serve": "node ./internals/scripts/serve-storybook.js",
     "stylelint": "stylelint './src/components/**/*.{css,css.js,css.ts}' --config=./config/stylelint.config.mjs",
     "stylelint:fix": "stylelint './src/components/**/*.{css,css.js,css.ts}' --fix --config=./config/stylelint.config.mjs",
-    "manifest:build": "npx cem analyze --config ./config/custom-elements-manifest.config.js",
-    "manifest:watch": "npx cem analyze --config ./config/custom-elements-manifest.config.js --watch --dev",
+    "manifest:build": "cem analyze --config ./config/custom-elements-manifest.config.js",
+    "manifest:watch": "cem analyze --config ./config/custom-elements-manifest.config.js --watch --dev",
     "release": "npm run build && changeset publish",
     "test": "vitest --config ./config/vitest.config.js",
     "test:ci": "vitest run --config ./config/vitest.config.js",
@@ -66,42 +71,42 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@eslint/css": "^1.1.0",
+    "@eslint/css": "^1.2.0",
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.58.2",
-    "@storybook/addon-a11y": "^10.3.5",
-    "@storybook/addon-docs": "^10.3.5",
-    "@storybook/addon-links": "^10.3.5",
+    "@playwright/test": "^1.60.0",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-links": "^10.3.6",
     "@storybook/test-runner": "^0.24.3",
-    "@storybook/web-components-vite": "^10.3.5",
+    "@storybook/web-components-vite": "^10.3.6",
     "@types/express": "^5.0.6",
     "@types/node": "^25.6.0",
     "@types/serve-static": "^2.2.0",
     "@vitest/eslint-plugin": "^1.6.16",
-    "@vitest/ui": "^4.0.18",
+    "@vitest/ui": "^4.1.8",
     "@wc-toolkit/storybook-helpers": "^10.3.0",
     "axe-playwright": "^2.2.2",
     "browserslist": "^4.28.1",
-    "concurrently": "^9.2.1",
+    "concurrently": "^10.0.3",
     "custom-element-jsx-integration": "^1.6.0",
     "custom-element-react-wrappers": "^1.7.3",
     "custom-element-solidjs-integration": "^1.9.0",
     "custom-element-svelte-integration": "^1.2.0",
     "custom-element-vuejs-integration": "^1.4.0",
     "custom-elements-manifest": "^2.1.0",
-    "eslint": "^10.2.1",
+    "eslint": "^10.3.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "10.3.5",
+    "eslint-plugin-storybook": "10.3.6",
     "express": "^5.2.1",
     "husky": "^9.1.7",
-    "jsdom": "^28.1.0",
+    "jsdom": "^29.1.1",
     "lightningcss": "^1.31.1",
     "prettier": "^3.8.3",
     "serve-static": "^2.2.1",
     "shadow-dom-testing-library": "^1.13.1",
     "storybook": "^10.0.7",
     "storybook-addon-tag-badges": "^3.1.0",
-    "stylelint": "^17.8.0",
+    "stylelint": "^17.10.0",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-order": "^8.1.1",
     "typescript": "^6.0.3",
@@ -110,10 +115,20 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lit-css": "^2.2.2",
     "vitest": "^4.0.8",
-    "wait-on": "^9.0.4",
-    "web-vitals": "^5.1.0"
+    "wait-on": "^9.0.10",
+    "web-vitals": "^5.3.0"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.59.0"
+  },
+  "allowScripts": {
+    "esbuild@0.25.9": true,
+    "esbuild@0.27.3": true,
+    "@parcel/watcher@2.5.1": true,
+    "@swc/core@1.13.5": true,
+    "fsevents@2.3.3": true,
+    "fsevents@2.3.2": true,
+    "unrs-resolver@1.11.1": true,
+    "rs-module-lexer@2.6.0": true
   }
 }

package/src/Globals.d.ts

@@ -0,0 +1,3 @@
+declare module "*.css";
+declare module "*.png";
+declare module "*.svg";

package/src/components/index.ts

@@ -1,4 +1,5 @@
 import { OgdsBanner } from "./ogds-banner";
 import { OgdsAccordion } from "./ogds-accordion";
+import { OgdsAccordionToggle } from "./ogds-accordion-toggle";
 
-export { OgdsBanner, OgdsAccordion };
+export { OgdsBanner, OgdsAccordion, OgdsAccordionToggle };

package/src/components/ogds-accordion/docs.mdx

@@ -4,41 +4,41 @@ import { Meta, Title, Primary, Stories } from "@storybook/addon-docs/blocks";
 
 <Title />
 
-Accordions show and hide sections of related content on a page.
+See also: [USWDS Accessibility Checklist for Accordion](https://designsystem.digital.gov/components/accordion/accessibility-tests/).
 
----
-
-## Default
+Accordions show and hide sections of related content on a page. This component can be used without JavaScript (see [Fallbacks Without JavaScript](#fallbacks-without-javascript)).
 
-<Primary />
+## Differences between the OGDS Accordion and USWDS Accordion
 
----
+- The OGDS implementation uses [the browser-native `<details>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details), which works even when JavaScript is not available.
+- The OGDS implementation allows for the icon to be on the left or the right.
+- The OGDS implementation allows for the icon itself to be customized.
 
-## Variations
+## Example Accordion
 
-<Stories />
+<Primary />
 
 ## Guidance
 
 ### When to use the accordion component
 
-_To organize related content._ Accordions can help reduce page length when there are multiple sections of content that users may not need to read in full.
+**To organize related content.** Accordions can help reduce page length when there are multiple sections of content that users may not need to read in full.
 
-_To let users get to relevant content faster._ Accordions keep a page focused by allowing users to choose what they read rather than having to scroll past large amounts of content.
+**To let users get to relevant content faster.** Accordions keep a page focused by allowing users to choose what they read rather than having to scroll past large amounts of content.
 
 ### When to consider something else
 
-_If users need most or all of the content._ If users are likely to need most of the content on a page, showing it all at once may be more helpful than hiding it behind an accordion.
+**If users need most or all of the content.** If users are likely to need most of the content on a page, showing it all at once may be more helpful than hiding it behind an accordion.
 
-_For critical information._ Avoid using accordions to hide important content that all users should see, as users may miss it.
+**For critical information.** Avoid using accordions to hide important content that all users should see, as users may miss it.
 
 ### Usability guidance
 
-_Use clear, descriptive labels._ The summary text should clearly describe the content within. Users should be able to decide whether to expand a section based on the label alone.
+**Use clear, descriptive labels.** The summary text should clearly describe the content within. Users should be able to decide whether to expand a section based on the label alone.
 
-_Use icons to reinforce state._ Add the `with-icon` class to provide a visual indicator of open and closed state. Use `with-icon right` to align the icon to the trailing edge of the summary, or `with-icon plus` to use plus/minus icons instead of chevrons.
+**Use icons to reinforce state.** Add the `with-icon` class to provide a visual indicator of open and closed state. Use `with-icon right` to align the icon to the trailing edge of the summary, or `with-icon plus` to use plus/minus icons instead of chevrons.
 
-_Use `bordered` for visual separation._ Add the `bordered` class when the accordion needs stronger visual separation from surrounding content.
+**Use `bordered` for visual separation.** Add the `bordered` class when the accordion needs stronger visual separation from surrounding content.
 
 #### Built-in `<details>` element functionality
 
@@ -71,13 +71,20 @@ Depending on the kind of content in the accordion, you may want to add some ARIA
 1. **Heading semantics.** The USWDS accordion uses heading elements inside the buttons that toggle the sections. If you want to follow this pattern, you can add a `heading-level=<Number>` attribute to the opening `<ogds-accordion>` tag, and it will automatically set the correct ARIA attributes on each of the child `<summary>` tags to set the heading at the level you tell it. As always, it is important to use the right heading level to preserve the document outline. Even if you are not using the web component version of the component, you can achieve this same effect by including a heading element inside the summary tag, though this may require a little extra CSS to keep the visual appearance consistent.
 2. **List semantics.** If the content in the accordion makes more sense as a list, adding a `use-list-semantics` attribute to the `<ogds-accordion>` tag will add the correct ARIA.
 
-### Web component usage
+## Custom Element vs CSS-Only Versions
 
-The stories above show how to use the accordion web component. This component uses all light DOM (no shadow DOM). That means that it's up to you to add the required markup inside the `<ogds-accordion>` tag. As shown, it only needs at least one `details` element.
+### Custom Element Behavior
 
-### CSS-only usage
+The examples on this page use the cusom element `<ogds-accordion></ogds-accordion>`. This custom element uses all light DOM (no [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM)). This custom element is used for styling, and it makes it easy to access the icon variations. [Custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) have been [widely supported since 2020](https://caniuse.com/wf-autonomous-custom-elements), but do require JavaScript for some of their functionality.
 
-The accordion component can be used without JavaScript by applying the styles in `ogds-accordion.css` directly to your page. If using the icon variants, you must set the following custom properties to point to your own icon assets:
+### Fallbacks without JavaScript
+
+If a user does not have JavaScript for any reason, this component will still generally work.
+
+1. **Native details component.** This approach uses the browser-native `<details>` component, these can be opened in closed without JavaScript in all browsers that support this feature ([widely available since January 2020](https://caniuse.com/details)). In an even older browser, the accordions would all be open by default, so content would not be hidden.
+2. **Styles.** As long as you have the accordion styles pulled into your application's styles, the visual styling will still work without JavaScript.
+3. **Class-based equivalent.** You can optionally substitute `<div class="ogds-accordion">` in place of `<ogds-accordion>`. These are equivalent, and will not affect styling or behavior for this component.
+4. **Icons.** If you are using non-default icons and you also want those to work witohut JavaScript, then you can update your project's CSS styles to point to the svg files:
 
 ```css
 ogds-accordion,
@@ -87,4 +94,8 @@ ogds-accordion,
 }
 ```
 
-Even if you are not using the web component JavaScript, the CSS will work on a `<ogds-accordion>` tag. However, if you'd prefer to stick with built-in elements, all of the above will also work on a `<div class="ogds-accordion">`.
+---
+
+## More Examples
+
+<Stories />

package/src/components/ogds-accordion/ogds-accordion.stories.ts

@@ -75,3 +75,15 @@ export const WithPlusIconsBordered = {
       >${items}</ogds-accordion
     >`,
 };
+
+export const WithPlusIconsRight = {
+  render: () =>
+    html`<ogds-accordion class="with-icon plus right"
+      >${items}</ogds-accordion
+    >`,
+};
+
+export const WithPlusIconsRightWithoutCustomElement = {
+  render: () =>
+    html`<div class="ogds-accordion with-icon plus right">${items}</div>`,
+};