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

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,23 @@
-> [!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 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. This project leverages the modern web platform to deliver the same level of reliability and accessibility as USWDS with less code.
 
-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.
+You can (and should!) use both OGDS components and traditional USWDS components in your project. Some of our OGDS components are **enhanced** versions of USWDS components, such as the accordion and banner components. Some of our components are entirely **new**, such as the Task List component.
 
-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).
+The components developed in OGDS Elements use [the same design tokens as USWDS](https://designsystem.digital.gov/design-tokens/), such as colors and spacing values. These are imported from the [OGDS Tokens project](https://github.com/open-government-design-system/ogds-tokens), which makes the USWDS design tokens available in multiple formats. In this project, we use [CSS Custom Properties (CSS Variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), which means we can benefit from this feature of modern browsers. CSS Custom Properties have been [widely available in all major browsers since 2017](https://caniuse.com/css-variables)). This approach helps us to avoid a css compiler (like SASS), it helps us to manage themes and overrides, and it helps us style components in a simpler way.
 
-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.
+## Component Documentation on Storybook
 
-- [More on our decision to use Web Components](https://github.com/uswds/uswds-proposals/blob/main/decisions/0001-use-web-components.md)
+Where can I see exapmles of the OGDS Elements components? How do I set this up?
 
-## Upgrading to Web Components
+For more detailed documentation, see the [OGDS Elements Storybook](https://ogds-elements.jbhutch01.workers.dev/).
 
-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.
+## Using OGDS Elements
 
-## Installation using node and npm
+### 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,171 +30,75 @@ 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
+### 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.
-
-## Publishing
-
-This repository is automatically published to NPM when a new release is created.
-
-We use Changesets to manage changelogs, version bumps, pre-releases (alpha/beta), and automated publishing via GitHub Actions. The repository includes a pre-configured Changesets setup so you can create pre-releases (for example, `alpha`) and standard releases.
-
-### Pre-release flow
-
-If you're working on a pre-release version, enter pre-release mode:
-
-```bash
-   npx @changesets/cli pre enter <tag> # for example, npx @changesets/cli pre enter alpha
-```
-
-This will write a `.changeset/pre.json` that configures the pre-release tag and initial version. This file should be committed to the repository.
-
-**Note:** Once you're in pre-release mode, you don't have to enter it every time. When you're ready to exit pre-release mode, run:
-
-```bash
-npx @changesets/cli pre exit
-```
-
-### Version bumps, and publishing (Changesets)
-
-1. Create a changeset describing your change(s)
-    - Run the interactive prompt and follow the questions:
-
-        ```bash
-        npx @changesets/cli
-        ```
-
-    - The command creates a file under the `.changeset/` directory that describes the packages and the release type (patch/minor/major). You can edit this file to add more details, such as a link to the issue or pull request that the change addresses. The file will automatically get a nonsensical name like `fire-penguin-annex.md`, and that's normal. These files are only in the repository for a short time, to generate changelogs and version bumps. They aren't published to NPM and are cleaned up after the release is published.
-
-2. Bump versions locally (optional)
-    - To update package.json versions and changelogs locally before publishing:
-
-        ```bash
-        npx @changesets/cli version
-        ```
-
-    - Commit the resulting changes (package.json updates and generated changelog files):
-
-        ```bash
-        git add .
-        git commit -m "chore(release): version packages and changelogs"
-        ```
-
-3. Publish
-    - Option A — Let the repository automation handle publishing (recommended):
-        - Push your branch to GitHub and open a PR. The CI / release automation will run and, depending on the configuration and merged changesets, will publish releases when merged to `main`.
-    - Option B — Publish locally (requires NPM credentials and appropriate tokens):
+## Contributing to OGDS Elements
 
-        ```bash
-        npm run release
-        ```
+OGDS is run by contributors, including folks from many government agencies, departments, states, and more. If you have ideas for what to contribute, we would love your support!
 
-        This script typically runs your tokenized publish flow (it may run builds and then `changeset publish`).
+### Code of Conduct
 
-#### How the automation works (GitHub Actions)
+Everyone who participates in this project is expected to follow the OGDS Code of Conduct (TK CoC Link)
 
-- There's a CI workflow configured to automate release and publish:
-    - The workflow runs on pushes to `main` and uses the Changesets GitHub Action.
-    - The action can either create a release PR or publish directly to NPM depending on repository and action settings.
-    - The workflow uses repository secrets:
-        - `GITHUB_TOKEN` — standard workflow permission for the action to create PRs/commits.
-    - The action is configured to run the project’s release script (for example `npm run release`) and is run in a controlled environment; it will also disable Husky hooks during automated runs (HUSKY=0) to avoid local commit hooks blocking automation.
+### Join the Mailing List and Slack
 
-#### Notes, tips, and troubleshooting
+If you'd like to [join the People's Design System mailing list and Slack](https://docs.google.com/document/d/10XN6ZsRt9aAOH1PUmtfcCCEBZQUSgs1cCI5krYBOoi4/edit?tab=t.0), that is where we discuss these topics.
 
-- Ensure your changeset accurately reflects the semantic change (patch/minor/major). Changesets drives the version bump and changelog generation.
-- Pre-release flows:
-    - The repository includes a `.changeset/pre.json` configuration that sets a default pre-release tag (e.g., `alpha`) and initial versions for pre-release packages. Use `npx @changesets/cli pre enter  <tag>` to begin a pre-release cycle.
-    - When in pre mode, version bumps will produce pre-release identifiers (for example, `1.0.0-alpha.1`).
-- CI vs local publish:
-    - For most contributors, pushing a properly authored changeset and opening a PR is the recommended route—automation will create the release or open the release PR for maintainers to review.
-    - If you must publish locally, make sure `NPM_TOKEN` is configured in your environment or use a CI/protected account to run the publish steps.
-- If releases aren't being published as expected:
-    - Verify `NPM_TOKEN` exists in repository secrets and has publish scope.
-    - Ensure the commit/push to `main` contains a changeset (or the automation has been triggered by the Changesets action).
-    - Review the release workflow logs in GitHub Actions for details (it'll show the changesets step and any publishing errors).
-- If you want to change the default pre-release tag (for example, from `alpha` to `beta`), update the `.changeset/pre.json` file and follow the pre-mode steps above.
+### Filing a bug report
 
-Example quick flow (pre-release -> publish via automation)
+If you discovered a bug that no one else has reported in our [issues backlog](https://github.com/open-government-design-system/ogds-elements/issues), let us know by [submitting an issue](https://github.com/open-government-design-system/ogds-elements/issues/new).
 
-1. On a feature branch, implement changes.
-2. Enter pre mode if you want pre-release tagging:
-    - `npx @changesets/cli pre enter --tag alpha`
-3. Run `npx @changesets/cli` and follow the prompts (choose the appropriate release type).
-4. Commit the changeset file(s), push the branch, and open a PR.
-5. Once the PR is merged to `main`, the repository release workflow will pick up the changeset and publish the pre-release to NPM (provided `NPM_TOKEN` and workflow permissions are set).
+### Starting a discussion
 
-If you have questions about changing the pre-release tag or the release automation behavior, or if you want a walkthrough of creating a test release in a fork, please open an issue or ask in the PR review comments.
+To share ideas, questions, or concerns with the OGDS core team and community, you can join any of our [open discussions](https://github.com/open-government-design-system/ogds-elements/discussions) or [start a new one](https://github.com/open-government-design-system/ogds-elements/discussions/new/choose).
 
-## Component Versions
+### Contributing Code
 
-| Component    | Status    |
-| ------------ | --------- |
-| `usa-banner` | Beta      |
-| `usa-link`   | Pre-alpha |
+See Contributing.md

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { UsaLink as UsaLinkElement } from "../../usa-link.js";
+import { OGDSAlert as OGDSAlertElement } from "../../ogds-alert.js";
 
-export type { UsaLinkElement };
+export type { OGDSAlertElement };
 
-export interface UsaLinkProps extends Pick<
+export interface OGDSAlertProps extends Pick<
   React.AllHTMLAttributes<HTMLElement>,
   | "children"
   | "dir"
@@ -18,8 +18,14 @@ export interface UsaLinkProps extends Pick<
   | "onFocus"
   | "onBlur"
 > {
-  /** The url for the link */
-  href?: UsaLinkElement["href"];
+  /** undefined */
+  noIcon?: boolean;
+
+  /** The type of alert (info, warning, etc) */
+  type?: OGDSAlertElement["type"];
+
+  /** Use this attribute to hide the icon */
+  undefined?: OGDSAlertElement["undefined"];
 
   /** 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 +50,12 @@ export interface UsaLinkProps extends Pick<
 }
 
 /**
- * The usa-link component.
+ * The ogds-alert 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)_
+ *  - **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).
  */
-export const UsaLink: React.ForwardRefExoticComponent<UsaLinkProps>;
+export const OGDSAlert: React.ForwardRefExoticComponent<OGDSAlertProps>;

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

@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+import "../../ogds-alert.js";
+
+export const OGDSAlert = forwardRef((props, forwardedRef) => {
+  const { noIcon, type, ...filteredProps } = props;
+
+  return React.createElement(
+    "ogds-alert",
+    {
+      ...filteredProps,
+      type: props.type,
+      noIcon: props.undefined,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      "no-icon": props.noIcon ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

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

@@ -21,12 +21,6 @@ export interface OgdsAccordionToggleProps extends Pick<
   /** The `id` of the `<ogds-accordion>` to control. Required. */
   controls?: OgdsAccordionToggleElement["controls"];
 
-  /** Button label when all panels are collapsed. Defaults to "Expand All". */
-  expandLabel?: OgdsAccordionToggleElement["expandLabel"];
-
-  /** Button label when one or more panels are open. Defaults to "Collapse All". */
-  collapseLabel?: OgdsAccordionToggleElement["collapseLabel"];
-
   /** 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;
 
@@ -54,6 +48,10 @@ export interface OgdsAccordionToggleProps extends Pick<
  * ---
  *
  *
+ * ### **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.
  */

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

@@ -2,15 +2,13 @@ import React, { forwardRef } from "react";
 import "../../ogds-accordion-toggle.js";
 
 export const OgdsAccordionToggle = forwardRef((props, forwardedRef) => {
-  const { controls, expandLabel, collapseLabel, ...filteredProps } = props;
+  const { controls, ...filteredProps } = props;
 
   return React.createElement(
     "ogds-accordion-toggle",
     {
       ...filteredProps,
       controls: props.controls,
-      "expand-label": props.expandLabel || props["expand-label"],
-      "collapse-label": props.collapseLabel || props["collapse-label"],
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,

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/OgdsTaskList.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import { OgdsTaskList as OgdsTaskListElement } from "../../ogds-task-list.js";
+
+export type { OgdsTaskListElement };
+
+export interface OgdsTaskListProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** 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;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ * ---
+ *
+ */
+export const OgdsTaskList: React.ForwardRefExoticComponent<OgdsTaskListProps>;

package/dist/components/frameworks/react/{UsaLink.js → OgdsTaskList.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 "../../ogds-task-list.js";
 
+export const OgdsTaskList = forwardRef((props, forwardedRef) => {
   return React.createElement(
-    "usa-link",
+    "ogds-task-list",
     {
-      ...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,5 @@
 export * from "./OgdsAccordion.js";
 export * from "./OgdsAccordionToggle.js";
-export * from "./UsaBanner.js";
-export * from "./UsaLink.js";
+export * from "./OGDSAlert.js";
+export * from "./OgdsBanner.js";
+export * from "./OgdsTaskList.js";

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

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

package/dist/components/index.cjs

@@ -1 +1,15 @@
-"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 a=require("../index-CC1QRihN.cjs"),s=require("lit"),g=require("lit/decorators.js"),k=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)}}}`,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%2013h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3e%3c/svg%3e",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%2013H5v-2h14v2z'/%3e%3c/svg%3e",x=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}`,z=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}`,C=s.css`:root,:host{--ogds-theme-button-border-radius:.25rem;--ogds-theme-button-fill-color:#005ea2;--ogds-theme-button-font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";--ogds-theme-button-icon-gap:.5rem;--ogds-theme-button-small-width:3rem;--ogds-theme-button-stroke-color:#005ea2;--ogds-theme-button-stroke-width:2px;--ogds-theme-button-text-color:#fff}`,A=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}`,E=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}`,m=new CSSStyleSheet;m.replaceSync([a.colorTokens,a.spacingTokens,x,z,C,A,E].map(i=>i.cssText).join(`
+`));function u(){document.adoptedStyleSheets.includes(m)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,m])}var _=Object.defineProperty,f=(i,e,t,n)=>{for(var o=void 0,c=i.length-1,l;c>=0;c--)(l=i[c])&&(o=l(e,t,o)||o);return o&&_(e,t,o),o},r;const h=(r=class extends s.LitElement{constructor(){super(...arguments),this.useListSemantics=!1,this.headingLevel=0}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),u(),r._sheet||(r._sheet=new CSSStyleSheet,r._sheet.replaceSync(`ogds-accordion, .ogds-accordion {
+          --icon-chevron-pointing-down: url("${a.iconChevronDown}");
+          --icon-chevron-pointing-up: url("${a.iconChevronUp}");
+          --icon-plus: url("${S}");
+          --icon-minus: url("${w}");
+        }
+`+k.cssText),document.adoptedStyleSheets=[...document.adoptedStyleSheets,r._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(t=>{const n=t.querySelector("summary");n&&(n.setAttribute("role","heading"),n.setAttribute("aria-level",String(e)))})}applyChildRoles(){this.childRoles.forEach((e,t)=>{e.size>0&&t.setAttribute("role",Array.from(e).join(" "))})}render(){return s.nothing}},r._sheet=null,r);f([g.property({type:Boolean,attribute:"use-list-semantics"})],h.prototype,"useListSemantics");f([g.property({type:Number,attribute:"heading-level"})],h.prototype,"headingLevel");let b=h;a.defineCustomElement("ogds-accordion",b);const O=s.css`@layer ogds.components{ogds-accordion-toggle::part(button){appearance:none;background-color:var(--ogds-theme-button-fill-color);border-radius:var(--ogds-theme-button-border-radius);border-color:#0000;border-width:var(--ogds-theme-button-stroke-width);color:var(--ogds-theme-button-text-color);cursor:pointer;font-family:var(--ogds-theme-button-font-family);font-size:var(--ogds-theme-type-scale-md);padding:var(--ogds-spacing-105) var(--ogds-spacing-205);font-weight:700}ogds-accordion-toggle::part(button):hover{background-color:color-mix(in srgb,var(--ogds-theme-button-fill-color),black 20%)}ogds-accordion-toggle::part(button):focus{outline-offset:.25rem;outline:.25rem solid #2491ff}}`;var T=Object.defineProperty,y=(i,e,t,n)=>{for(var o=void 0,c=i.length-1,l;c>=0;c--)(l=i[c])&&(o=l(e,t,o)||o);return o&&T(e,t,o),o},d;const p=(d=class extends s.LitElement{constructor(){super(...arguments),this.controls="",this._anyOpen=!1,this._observer=null}connectedCallback(){if(super.connectedCallback(),u(),d._sheet||(d._sheet=new CSSStyleSheet,d._sheet.replaceSync(O.cssText),document.adoptedStyleSheets=[...document.adoptedStyleSheets,d._sheet]),this.controls==""){console.error("<ogds-accordion-toggle>: Component must have a controls attribute with the IDof an <ogds-accordion> component");return}this._anyOpen=this.checkOpen(),this._observer=new MutationObserver(()=>{this._anyOpen=this.checkOpen()});const e=document.getElementById(this.controls);e&&this._observer.observe(e,{subtree:!0,attributeFilter:["open"]})}disconnectedCallback(){super.disconnectedCallback(),this._observer?.disconnect(),this._observer=null}checkOpen(){return!!document.getElementById(this.controls)?.querySelector("details[open]")}toggleAll(){const e=document.getElementById(this.controls);if(!e){console.error("<ogds-accordion-toggle>: Unable to get an accordion component with the ID specfied in the controls attribute");return}const t=Array.from(e.getElementsByTagName("details")),n=t.some(o=>o.hasAttribute("open"));n?t.forEach(o=>o.toggleAttribute("open",!1)):t.forEach(o=>o.toggleAttribute("open",!0)),this._anyOpen=!n}render(){return s.html`
+      <button @click="${this.toggleAll}" part="button">
+        <slot name="expand-label" ?hidden="${this._anyOpen}">Expand All</slot>
+        <slot name="collapse-label" ?hidden="${!this._anyOpen}"
+          >Collapse All</slot
+        >
+      </button>
+    `}},d._sheet=null,d);y([g.property({type:String,attribute:"controls"})],p.prototype,"controls");y([g.state()],p.prototype,"_anyOpen");let v=p;a.defineCustomElement("ogds-accordion-toggle",v);exports.OgdsBanner=a.OgdsBanner;exports.OgdsAccordion=b;exports.OgdsAccordionToggle=v;