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

package/.storybook/{UswdsTheme.js → OgdsTheme.js}

@@ -2,7 +2,7 @@ import { create } from "storybook/theming/create";
 
 export default create({
   base: "light",
-  brandTitle: "USWDS Web components",
+  brandTitle: "OGDS Elements",
   fontBase:
     '"Public Sans Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
   colorPrimary: "#0050d8",

package/.storybook/manager.js

@@ -1,6 +1,6 @@
 import { addons } from "storybook/manager-api";
-import UswdsTheme from "./UswdsTheme";
+import OgdsTheme from "./OgdsTheme";
 
 addons.setConfig({
-  theme: UswdsTheme,
+  theme: OgdsTheme,
 });

package/.storybook/preview.js

@@ -4,7 +4,7 @@
 import { setCustomElementsManifest } from "@storybook/web-components-vite";
 import { setStorybookHelpersConfig } from "@wc-toolkit/storybook-helpers";
 import customElements from "../custom-elements.json";
-import UswdsTheme from "./UswdsTheme";
+import OgdsTheme from "./OgdsTheme";
 import "../storybook/index.css";
 import "../src/core/index.css";
 
@@ -24,7 +24,7 @@ const preview = {
     },
     docs: {
       toc: true, // Autogenerate table of contents.
-      theme: UswdsTheme,
+      theme: OgdsTheme,
       codePanel: true,
       canvas: {
         sourceState: "shown",

package/.storybook/worker.js

@@ -0,0 +1,5 @@
+export default {
+  async fetch(request, env) {
+    return env.ASSETS.fetch(request);
+  },
+};

package/README.md

@@ -1,24 +1,11 @@
-> [!IMPORTANT]
-> This is a work-in-progress fork of USWDS Elements, hence the README saying what it says. Updated docs coming soon!
+# OGDS Elements
 
-# USWDS Elements
-
-The [United States Web Design System](https://designsystem.digital.gov) is a toolkit of principles, guidance, and code that includes a library of open source user interface components and a visual style guide for U.S. federal government websites.
-
-This repository contains the code for the Web Component-based version of the design system, which is currently in pre-release status. We maintain other repositories for the [current version of the design system](https://github.com/uswds/uswds), which we call USWDS Core, as well as [its documentation and website](https://github.com/uswds/uswds-site). For USWDS Core and its documentation, visit [https://designsystem.digital.gov](https://designsystem.digital.gov).
-
-We're working on incrementally building new [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)-based implementations of USWDS Core components. As we ship new USWDS Elements Web Components, our intent is that you'll be able to use them alongside existing USWDS code.
-
-- [More on our decision to use Web Components](https://github.com/uswds/uswds-proposals/blob/main/decisions/0001-use-web-components.md)
-
-## Upgrading to Web Components
-
-We're releasing these Web Components (USWDS Elements) incrementally with the intent that they can also be added gradually to existing sites that are currently using USWDS Core. If you aren't currently using USWDS or you're using a version older than the current USWDS 3, we recommend adopting version 3 in the near term rather than waiting until all of USWDS Elements is production-ready.
+The Open Government Design System (OGDS) is a complement to and reimagining of the [United States Web Design System](https://designsystem.digital.gov) (USWDS). OGDS aims to ship components and styles that will feel at home in any site using USWDS while leveraging the modern web platform to deliver the same level of reliability and accessibility as USWDS with less code.
 
 ## Installation using node and npm
 
 1. Install `node/npm`. In the link below you can find the install method that coincides with your operating system:
-    - Node (see [.nvmrc](https://github.com/uswds/uswds-elements/blob/develop/.nvmrc) for version number), [Installation guides](https://nodejs.org/en/download)
+    - Node (see [.nvmrc](https://github.com/open-government-design-system/ogds-elements/blob/develop/.nvmrc) for version number), [Installation guides](https://nodejs.org/en/download)
 
     **Note for Windows users:** If you are using Windows and are unfamiliar with Node or npm, we recommend following [Team Treehouse's tutorial](http://blog.teamtreehouse.com/install-node-js-npm-windows) for more information or [installing and running your project from Windows Subsystem for Linux (WSL)](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl#install-nvm-nodejs-and-npm).
 
@@ -31,74 +18,58 @@ We're releasing these Web Components (USWDS Elements) incrementally with the int
 
 3. Create a `package.json` file. You can do this manually, but an easier method is to use the `npm init` command. This command will prompt you with a few questions to create your `package.json` file.
 
-4. Add `@uswds/uswds` to your project’s `package.json`:
+4. Add `@ogds/elements` to your project’s `package.json`:
 
     ```shell
-    npm install -S @uswds/elements
+    npm install -S @ogds/elements
     ```
 
-The `@uswds/elements` module is now installed as a dependency.
+The `@ogds/elements` module is now installed as a dependency.
 
 **Note:** We do _not_ recommend directly editing the design system files in `node_modules`. One of the benefits of using a package manager is its ease of upgrade and installation. If you make customizations to the files in the package, any upgrade or re-installation will wipe them out.
 
-## Using USWDS Elements in your project
+## Using OGDS Elements in your project
 
-How you add a USWDS Elements component to a page might vary depending on your tools. If you use Vite, you can add components by importing them into a script that's imported elsewhere into a page:
+How you add a OGDS Elements component to a page might vary depending on your tools. If you use Vite, you can add components by importing them into a script that's imported elsewhere into a page:
 
 ```js
 // Importing into a javascript file, like index.js
-import { UsaBanner } from "@uswds/elements";
+import { OgdsAccordion } from "@ogds/elements";
 ```
 
 ```html
 <!-- importing directly into an HTML page -->
 <script type="module">
-    import { UsaBanner } from "@uswds/elements";
+    import { OgdsAccordion } from "@ogds/elements";
 </script>
-<usa-banner></usa-banner>
+<ogds-accordion>
+    <!--Refer to the accordion documentation for the code that actually goes in here -->
+</ogds-accordion>
 ```
 
 ## Style theming and tokens
 
-Each USWDS Element provides support for theming by exposing CSS custom properties (CSS variables) that can be used to control the appearance of the component.
+Each OGDS Element provides support for theming by exposing CSS custom properties (CSS variables) that can be used to control the appearance of the component.
 
 Interactive form controls in our Storybook instance can demonstrate how to use the theming variables, provide custom text, and otherwise customize the components.
 
-For example, the `usa-banner` component can be customized by setting the `--usa-banner-background-color` CSS variable to a color of your choosing:
+For example, the `ogds-banner` component can be customized by setting the `--ogds-banner-background-color` CSS variable to a color of your choosing:
 
 ```html
 <style>
-    usa-banner {
-        --usa-banner-background-color: #d9e8f6; /** equivalent to `primary-lighter` from USWDS - https://designsystem.digital.gov/design-tokens/color/theme-tokens/#theme-color-tokens-table-2 */
-        --usa-banner-button-close-background-color: #d6f3ff;
+    ogds-banner {
+        --ogds-banner-background-color: #d9e8f6; /** equivalent to `primary-lighter` from USWDS - https://designsystem.digital.gov/design-tokens/color/theme-tokens/#theme-color-tokens-table-2 */
+        --ogds-banner-button-close-background-color: #d6f3ff;
     }
 </style>
-<usa-banner></usa-banner>
+<ogds-banner></ogds-banner>
 ```
 
-You can see this in the demo on the [USWDS Elements Storybook](<https://federalist-ab6c0bdb-eccd-4b26-bb5f-b0154661e999.sites.pages.cloud.gov/site/uswds/web-components/?path=/story/components-banner--default&args=--usa-banner-background-color:!hex(e4f7ff)>).
-
 **Note:** Please be mindful of the accessibility implications of customizing component appearance. It's **your** responsibility to ensure that your customizations meet the [accessibility requirements](https://designsystem.digital.gov/accessibility/) of the design system and pass any [WCAG 2.2](https://www.w3.org/TR/WCAG22/) or [Section 508](https://www.section508.gov/) accessibility tests.
 
 ## Documentation
 
-For more detailed documentation, refer to the Storybook for USWDS Elements. You can visit the most up-to-date Storybook documentation on [Cloud.gov Pages](https://federalist-ab6c0bdb-eccd-4b26-bb5f-b0154661e999.sites.pages.cloud.gov/site/uswds/web-components/?path=/docs/readme--docs).
-
-## Browser support
-
-We’ve designed the design system to support older and newer browsers through [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement). The current major version of USWDS Elements (v1) follows the [2% rule](https://gds.blog.gov.uk/2012/01/25/support-for-browsers/): we officially support any browser above 2% usage as observed by [analytics.usa.gov](https://analytics.usa.gov/). Currently, this means support for the newest versions of Chrome, Firefox, and Safari.
-
-## Accessibility
-
-The design system also meets the [WCAG 2.0 AA accessibility guidelines](https://www.w3.org/TR/WCAG20/) and conforms to the standards of [Section 508 of the Rehabilitation Act](http://www.section508.gov/). Additionally, we try to meet the requirements of [WCAG 2.2](https://www.w3.org/TR/WCAG22/).
-
-We use the following tools to ensure USWDS is accessible:
-
-- [ANDI](https://www.ssa.gov/accessibility/andi/help/install.html).
-- [Axe core](https://www.deque.com/axe/).
-- [Axe dev tools](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US).
-
-If you find any issues with our accessibility conformance, please create an issue in our GitHub repo or send us an email at [uswds@gsa.gov](mailto:uswds@gsa.gov). We prioritize accessibility issues. See [the Accessibility page of our website](https://designsystem.digital.gov/documentation/accessibility/) for more information.
+For more detailed documentation, refer to the Storybook for OGDS Elements. The Storybook isn't currently available online, but you can see it either by cloning this repo and running `npm run start` or by installing the package and running the same command at the package root inside of your `node_modules` folder.
 
 ## Publishing
 
@@ -195,7 +166,7 @@ If you have questions about changing the pre-release tag or the release automati
 
 ## Component Versions
 
-| Component    | Status    |
-| ------------ | --------- |
-| `usa-banner` | Beta      |
-| `usa-link`   | Pre-alpha |
+| Component        | Status |
+| ---------------- | ------ |
+| `ogds-banner`    | Beta   |
+| `ogds-accordion` | Alpha  |

package/dist/components/frameworks/react/{UsaBanner.d.ts → OgdsBanner.d.ts}

@@ -1,9 +1,9 @@
 import React from "react";
-import { UsaBanner as UsaBannerElement } from "../../usa-banner.js";
+import { OgdsBanner as OgdsBannerElement } from "../../ogds-banner.js";
 
-export type { UsaBannerElement };
+export type { OgdsBannerElement };
 
-export interface UsaBannerProps extends Pick<
+export interface OgdsBannerProps extends Pick<
   React.AllHTMLAttributes<HTMLElement>,
   | "children"
   | "dir"
@@ -22,16 +22,16 @@ export interface UsaBannerProps extends Pick<
   isOpen?: boolean;
 
   /** The element's language. */
-  lang?: UsaBannerElement["lang"];
+  lang?: OgdsBannerElement["lang"];
 
   /** The custom aria label users can override. */
-  label?: UsaBannerElement["label"];
+  label?: OgdsBannerElement["label"];
 
   /** The top level domain for the site. */
-  tld?: UsaBannerElement["tld"];
+  tld?: OgdsBannerElement["tld"];
 
   /** undefined */
-  flagSrc?: UsaBannerElement["flagSrc"];
+  flagSrc?: OgdsBannerElement["flagSrc"];
 
   /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
   className?: string;
@@ -56,7 +56,7 @@ export interface UsaBannerProps extends Pick<
 }
 
 /**
- * The usa-banner component.
+ * The ogds-banner component.
  * ---
  *
  *
@@ -79,4 +79,4 @@ export interface UsaBannerProps extends Pick<
  * - **--ogds-banner-link-hover-color** - Sets the default link color. _(default: undefined)_
  * - **--ogds-banner-text-color** - Sets the default text color. _(default: undefined)_
  */
-export const UsaBanner: React.ForwardRefExoticComponent<UsaBannerProps>;
+export const OgdsBanner: React.ForwardRefExoticComponent<OgdsBannerProps>;

package/dist/components/frameworks/react/{UsaBanner.js → OgdsBanner.js}

@@ -1,11 +1,11 @@
 import React, { forwardRef } from "react";
-import "../../usa-banner.js";
+import "../../ogds-banner.js";
 
-export const UsaBanner = forwardRef((props, forwardedRef) => {
+export const OgdsBanner = forwardRef((props, forwardedRef) => {
   const { isOpen, lang, label, tld, flagSrc, ...filteredProps } = props;
 
   return React.createElement(
-    "usa-banner",
+    "ogds-banner",
     {
       ...filteredProps,
       lang: props.lang,

package/dist/components/frameworks/react/{UsaLink.d.ts → UsaHeader.d.ts}

@@ -1,9 +1,9 @@
 import React from "react";
-import { UsaLink as UsaLinkElement } from "../../usa-link.js";
+import { UsaHeader as UsaHeaderElement } from "../../undefined.js";
 
-export type { UsaLinkElement };
+export type { UsaHeaderElement };
 
-export interface UsaLinkProps extends Pick<
+export interface UsaHeaderProps extends Pick<
   React.AllHTMLAttributes<HTMLElement>,
   | "children"
   | "dir"
@@ -18,9 +18,6 @@ export interface UsaLinkProps extends Pick<
   | "onFocus"
   | "onBlur"
 > {
-  /** The url for the link */
-  href?: UsaLinkElement["href"];
-
   /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
   className?: string;
 
@@ -44,17 +41,8 @@ export interface UsaLinkProps extends Pick<
 }
 
 /**
- * The usa-link component.
- * ---
  *
+ * ---
  *
- * ### **Slots:**
- *  - _default_ - This element has a slot
- *
- * ### **CSS Properties:**
- *  - **--theme-link-color** - Sets the link color _(default: undefined)_
- * - **--theme-link-visited-color** - Sets the color for visited links _(default: undefined)_
- * - **--theme-link-hover-color** - Sets the hover state link color _(default: undefined)_
- * - **--theme-link-active-color** - Sets the active state link color _(default: undefined)_
  */
-export const UsaLink: React.ForwardRefExoticComponent<UsaLinkProps>;
+export const UsaHeader: React.ForwardRefExoticComponent<UsaHeaderProps>;

package/dist/components/frameworks/react/{UsaLink.js → UsaHeader.js}

@@ -1,14 +1,11 @@
 import React, { forwardRef } from "react";
-import "../../usa-link.js";
-
-export const UsaLink = forwardRef((props, forwardedRef) => {
-  const { href, ...filteredProps } = props;
+import "../../undefined.js";
 
+export const UsaHeader = forwardRef((props, forwardedRef) => {
   return React.createElement(
-    "usa-link",
+    "undefined",
     {
-      ...filteredProps,
-      href: props.href,
+      ...props,
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,

package/dist/components/frameworks/react/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./OgdsAccordion.js";
 export * from "./OgdsAccordionToggle.js";
-export * from "./UsaBanner.js";
-export * from "./UsaLink.js";
+export * from "./OgdsBanner.js";
+export * from "./UsaHeader.js";

package/dist/components/frameworks/react/index.js

@@ -1,4 +1,4 @@
 export * from "./OgdsAccordion.js";
 export * from "./OgdsAccordionToggle.js";
-export * from "./UsaBanner.js";
-export * from "./UsaLink.js";
+export * from "./OgdsBanner.js";
+export * from "./UsaHeader.js";

package/dist/components/index.cjs

@@ -1 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./usa-link.cjs"),e=require("./usa-banner.cjs");exports.UsaLink=n.UsaLink;exports.UsaBanner=e.UsaBanner;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../index-DTiLuJoA.cjs"),s=require("lit"),m=require("lit/decorators.js"),p=s.css`@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)}}}`,b="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",u="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",y=s.css`: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}`,v=s.css`: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}`,k=s.css`: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}`,w=s.css`: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}`,a=new CSSStyleSheet;a.replaceSync([d.colorTokens,d.spacingTokens,y,v,k,w].map(i=>i.cssText).join(`
+`));function S(){document.adoptedStyleSheets.includes(a)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,a])}var z=Object.defineProperty,h=(i,e,r,c)=>{for(var t=void 0,n=i.length-1,l;n>=0;n--)(l=i[n])&&(t=l(e,r,t)||t);return t&&z(e,r,t),t},o;const g=(o=class extends s.LitElement{constructor(){super(...arguments),this.useListSemantics=!1,this.headingLevel=0}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),S(),o._sheet||(o._sheet=new CSSStyleSheet,o._sheet.replaceSync(`ogds-accordion, .ogds-accordion {
+          --icon-chevron-pointing-down: url("${d.iconChevronDown}");
+          --icon-chevron-pointing-up: url("${d.iconChevronUp}");
+          --icon-plus: url("${b}");
+          --icon-minus: url("${u}");
+        }
+`+p.cssText),document.adoptedStyleSheets=[...document.adoptedStyleSheets,o._sheet]),this.detailsChildren=this.getDetailsChildren(),this.childRoles=new Map(Array.from(this.detailsChildren??[]).map(e=>[e,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(r=>{const c=r.querySelector("summary");c&&(c.setAttribute("role","heading"),c.setAttribute("aria-level",String(e)))})}applyChildRoles(){this.childRoles.forEach((e,r)=>{e.size>0&&r.setAttribute("role",Array.from(e).join(" "))})}render(){return s.nothing}},o._sheet=null,o);h([m.property({type:Boolean,attribute:"use-list-semantics"})],g.prototype,"useListSemantics");h([m.property({type:Number,attribute:"heading-level"})],g.prototype,"headingLevel");let f=g;d.defineCustomElement("ogds-accordion",f);exports.OgdsBanner=d.OgdsBanner;exports.OgdsAccordion=f;

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"],"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 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    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"],"names":["iconPlus","iconMinus","sheet","colorTokens","spacingTokens","typographyTokens","themeColorTokens","themeSpacingTokens","themeTypographyTokens","s","adoptTokenStyles","_OgdsAccordion","_a","LitElement","iconChevronDown","iconChevronUp","styles","el","detailsEls","headingLevel","summary","roles","nothing","__decorateClass","property","OgdsAccordion","defineCustomElement"],"mappings":"0lFAAAA,EAAe,4LCAfC,EAAe,g2KCOTC,EAAQ,IAAI,cAClBA,EAAM,YACJ,CACEC,EAAAA,YACAC,EAAAA,cACAC,EACAC,EACAC,EACAC,CAAA,EAEC,IAAKC,GAAMA,EAAE,OAAO,EACpB,KAAK;AAAA,CAAI,CACd,EAEO,SAASC,GAAmB,CAC5B,SAAS,mBAAmB,SAASR,CAAK,IAC7C,SAAS,mBAAqB,CAAC,GAAG,SAAS,mBAAoBA,CAAK,EAExE,sICMO,MAAMS,GAANC,EAAA,cAA4BC,YAAW,CAAvC,aAAA,CAAA,MAAA,GAAA,SAAA,EAKL,KAAA,iBAAmB,GAGnB,KAAA,aAAe,CAAA,CAKN,kBAAmB,CAC1B,OAAO,IACT,CAES,mBAAoB,CAC3B,MAAM,kBAAA,EACNH,EAAA,EACKE,EAAc,SACjBA,EAAc,OAAS,IAAI,cAC3BA,EAAc,OAAO,YACnB;AAAA,+CACuCE,iBAAe;AAAA,6CACjBC,eAAa;AAAA,8BAC5Bf,CAAQ;AAAA,+BACPC,CAAS;AAAA;AAAA,EACzBe,EAAO,OAAA,EAEhB,SAAS,mBAAqB,CAC5B,GAAG,SAAS,mBACZJ,EAAc,MAAA,GAGlB,KAAK,gBAAkB,KAAK,mBAAA,EAC5B,KAAK,WAAa,IAAI,IACpB,MAAM,KAAK,KAAK,iBAAmB,CAAA,CAAE,EAAE,IAAKK,GAAO,CAACA,EAAI,IAAI,GAAK,CAAC,CAAA,CAEtE,CAES,cAAe,CACtB,GAAI,KAAK,kBAAoB,KAAK,eAAiB,EAAG,CACpD,QAAQ,KACN,wMAAA,EAIF,MACF,CACA,KAAK,iBAAA,EACL,KAAK,oBAAA,EACL,KAAK,gBAAA,CACP,CAEA,oBAAqB,CACnB,MAAMC,EAAa,KAAK,qBAAqB,SAAS,EACtD,GAAIA,EAAW,OAAS,EACtB,OAAOA,EAEP,QAAQ,MACN,0FAAA,CAGN,CAEA,kBAAmB,CACb,KAAK,kBAAoB,KAAK,kBAChC,MAAM,KAAK,KAAK,eAAe,EAAE,QAASD,GACxC,KAAK,WAAW,IAAIA,CAAE,GAAG,IAAI,UAAU,CAAA,EAEzC,KAAK,aAAa,OAAQ,MAAM,EAEpC,CAEA,qBAAsB,CACpB,MAAME,EAAe,KAAK,aAEtBA,IAAiB,GAAK,KAAK,iBAC7B,MAAM,KAAK,KAAK,eAAe,EAAE,QAASF,GAAO,CAC/C,MAAMG,EAAUH,EAAG,cAAc,SAAS,EACtCG,IACFA,EAAQ,aAAa,OAAQ,SAAS,EACtCA,EAAQ,aAAa,aAAc,OAAOD,CAAY,CAAC,EAE3D,CAAC,CAEL,CAEA,iBAAkB,CAChB,KAAK,WAAW,QAAQ,CAACE,EAAOJ,IAAO,CACjCI,EAAM,KAAO,GAAGJ,EAAG,aAAa,OAAQ,MAAM,KAAKI,CAAK,EAAE,KAAK,GAAG,CAAC,CACzE,CAAC,CACH,CAEA,QAAS,CACP,OAAOC,EAAAA,OACT,CACF,EAhGEV,EAAe,OAA+B,KAFzCA,GAKLW,EAAA,CADCC,EAAAA,SAAS,CAAE,KAAM,QAAS,UAAW,qBAAsB,CAAA,EAJjDb,EAKX,UAAA,kBAAA,EAGAY,EAAA,CADCC,EAAAA,SAAS,CAAE,KAAM,OAAQ,UAAW,gBAAiB,CAAA,EAP3Cb,EAQX,UAAA,cAAA,EARK,IAAMc,EAANd,EAoGPe,EAAAA,oBAAoB,iBAAkBD,CAAa"}

package/dist/components/index.d.ts

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

package/dist/components/index.js

@@ -1,6 +1,97 @@
-import { UsaLink as a } from "./usa-link.js";
-import { UsaBanner as n } from "./usa-banner.js";
+import { c as h, s as f, i as p, a as b, d as u } from "../index-Bl2KLDbH.js";
+import { O } from "../index-Bl2KLDbH.js";
+import { css as t, LitElement as y, nothing as v } from "lit";
+import { property as l } from "lit/decorators.js";
+const k = t`@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)}}}`, w = "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", S = "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", z = t`: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}`, x = t`: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}`, C = t`: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}`, T = t`: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}`, a = new CSSStyleSheet();
+a.replaceSync(
+  [
+    h,
+    f,
+    z,
+    x,
+    C,
+    T
+  ].map((d) => d.cssText).join(`
+`)
+);
+function A() {
+  document.adoptedStyleSheets.includes(a) || (document.adoptedStyleSheets = [...document.adoptedStyleSheets, a]);
+}
+var L = Object.defineProperty, m = (d, e, s, i) => {
+  for (var r = void 0, c = d.length - 1, g; c >= 0; c--)
+    (g = d[c]) && (r = g(e, s, r) || r);
+  return r && L(e, s, r), r;
+}, o;
+const n = (o = class extends y {
+  constructor() {
+    super(...arguments), this.useListSemantics = !1, this.headingLevel = 0;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), A(), o._sheet || (o._sheet = new CSSStyleSheet(), o._sheet.replaceSync(
+      `ogds-accordion, .ogds-accordion {
+          --icon-chevron-pointing-down: url("${p}");
+          --icon-chevron-pointing-up: url("${b}");
+          --icon-plus: url("${w}");
+          --icon-minus: url("${S}");
+        }
+` + k.cssText
+    ), document.adoptedStyleSheets = [
+      ...document.adoptedStyleSheets,
+      o._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((s) => {
+      const i = s.querySelector("summary");
+      i && (i.setAttribute("role", "heading"), i.setAttribute("aria-level", String(e)));
+    });
+  }
+  applyChildRoles() {
+    this.childRoles.forEach((e, s) => {
+      e.size > 0 && s.setAttribute("role", Array.from(e).join(" "));
+    });
+  }
+  render() {
+    return v;
+  }
+}, o._sheet = null, o);
+m([
+  l({ type: Boolean, attribute: "use-list-semantics" })
+], n.prototype, "useListSemantics");
+m([
+  l({ type: Number, attribute: "heading-level" })
+], n.prototype, "headingLevel");
+let R = n;
+u("ogds-accordion", R);
 export {
-  n as UsaBanner,
-  a as UsaLink
+  R as OgdsAccordion,
+  O 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"],"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 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    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"],"names":["iconPlus","iconMinus","sheet","colorTokens","spacingTokens","typographyTokens","themeColorTokens","themeSpacingTokens","themeTypographyTokens","s","adoptTokenStyles","_OgdsAccordion","_a","LitElement","iconChevronDown","iconChevronUp","styles","el","detailsEls","headingLevel","summary","roles","nothing","__decorateClass","property","OgdsAccordion","defineCustomElement"],"mappings":";;;;s7EAAAA,IAAe,6LCAfC,IAAe,61KCOTC,IAAQ,IAAI,cAAA;AAClBA,EAAM;AAAA,EACJ;AAAA,IACEC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA,EAEC,IAAI,CAACC,MAAMA,EAAE,OAAO,EACpB,KAAK;AAAA,CAAI;AACd;AAEO,SAASC,IAAmB;AACjC,EAAK,SAAS,mBAAmB,SAASR,CAAK,MAC7C,SAAS,qBAAqB,CAAC,GAAG,SAAS,oBAAoBA,CAAK;AAExE;;;;;;ACMO,MAAMS,KAANC,IAAA,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAKL,KAAA,mBAAmB,IAGnB,KAAA,eAAe;AAAA,EAAA;AAAA,EAKN,mBAAmB;AAC1B,WAAO;AAAA,EACT;AAAA,EAES,oBAAoB;AAC3B,UAAM,kBAAA,GACNH,EAAA,GACKE,EAAc,WACjBA,EAAc,SAAS,IAAI,cAAA,GAC3BA,EAAc,OAAO;AAAA,MACnB;AAAA,+CACuCE,CAAe;AAAA,6CACjBC,CAAa;AAAA,8BAC5Bf,CAAQ;AAAA,+BACPC,CAAS;AAAA;AAAA,IACzBe,EAAO;AAAA,IAAA,GAEhB,SAAS,qBAAqB;AAAA,MAC5B,GAAG,SAAS;AAAA,MACZJ,EAAc;AAAA,IAAA,IAGlB,KAAK,kBAAkB,KAAK,mBAAA,GAC5B,KAAK,aAAa,IAAI;AAAA,MACpB,MAAM,KAAK,KAAK,mBAAmB,CAAA,CAAE,EAAE,IAAI,CAACK,MAAO,CAACA,GAAI,oBAAI,IAAA,CAAK,CAAC;AAAA,IAAA;AAAA,EAEtE;AAAA,EAES,eAAe;AACtB,QAAI,KAAK,oBAAoB,KAAK,iBAAiB,GAAG;AACpD,cAAQ;AAAA,QACN;AAAA,MAAA;AAIF;AAAA,IACF;AACA,SAAK,iBAAA,GACL,KAAK,oBAAA,GACL,KAAK,gBAAA;AAAA,EACP;AAAA,EAEA,qBAAqB;AACnB,UAAMC,IAAa,KAAK,qBAAqB,SAAS;AACtD,QAAIA,EAAW,SAAS;AACtB,aAAOA;AAEP,YAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EAGN;AAAA,EAEA,mBAAmB;AACjB,IAAI,KAAK,oBAAoB,KAAK,oBAChC,MAAM,KAAK,KAAK,eAAe,EAAE;AAAA,MAAQ,CAACD,MACxC,KAAK,WAAW,IAAIA,CAAE,GAAG,IAAI,UAAU;AAAA,IAAA,GAEzC,KAAK,aAAa,QAAQ,MAAM;AAAA,EAEpC;AAAA,EAEA,sBAAsB;AACpB,UAAME,IAAe,KAAK;AAE1B,IAAIA,MAAiB,KAAK,KAAK,mBAC7B,MAAM,KAAK,KAAK,eAAe,EAAE,QAAQ,CAACF,MAAO;AAC/C,YAAMG,IAAUH,EAAG,cAAc,SAAS;AAC1C,MAAIG,MACFA,EAAQ,aAAa,QAAQ,SAAS,GACtCA,EAAQ,aAAa,cAAc,OAAOD,CAAY,CAAC;AAAA,IAE3D,CAAC;AAAA,EAEL;AAAA,EAEA,kBAAkB;AAChB,SAAK,WAAW,QAAQ,CAACE,GAAOJ,MAAO;AACrC,MAAII,EAAM,OAAO,KAAGJ,EAAG,aAAa,QAAQ,MAAM,KAAKI,CAAK,EAAE,KAAK,GAAG,CAAC;AAAA,IACzE,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA,EACT;AACF,GAhGEV,EAAe,SAA+B,MAFzCA;AAKLW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,sBAAsB;AAAA,GAJjDb,EAKX,WAAA,kBAAA;AAGAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GAP3Cb,EAQX,WAAA,cAAA;AARK,IAAMc,IAANd;AAoGPe,EAAoB,kBAAkBD,CAAa;"}

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,22 @@
+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.
+ * @attribute {string} expand-label - Button label when all panels are collapsed. Defaults to "Expand All".
+ * @attribute {string} 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 {
+    controls: string;
+    expandLabel: string;
+    collapseLabel: string;
+    private _anyOpen;
+    connectedCallback(): void;
+    checkOpen(): boolean;
+    toggleAll(): void;
+    protected render(): unknown;
+}