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

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

@@ -51,13 +51,20 @@ type OgdsAccordionProps = {
 type OgdsAccordionToggleProps = {
   /** The `id` of the `<ogds-accordion>` to control. Required. */
   controls?: string;
-  /** Button label when all panels are collapsed. Defaults to "Expand All". */
-  "expand-label"?: string;
-  /** Button label when one or more panels are open. Defaults to "Collapse All". */
-  "collapse-label"?: string;
 };
 
-type UsaBannerProps = {
+type OGDSAlertProps = {
+  /** The type of alert (info, warning, etc) */
+  type?: string;
+  /** Use this attribute to hide the icon */
+  noIcon?: string;
+  /**  */
+  "no-icon"?: boolean;
+  /**  */
+  "bind:_headingNodes"?: Node[];
+};
+
+type OgdsBannerProps = {
   /** The element's language. */
   lang?: "en" | "es";
   /** The custom aria label users can override. */
@@ -70,10 +77,7 @@ type UsaBannerProps = {
   isOpen?: boolean;
 };
 
-type UsaLinkProps = {
-  /** The url for the link */
-  href?: string | undefined;
-};
+type OgdsTaskListProps = {};
 
 export type CustomElements = {
   /**
@@ -103,13 +107,28 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Slots:**
+   *  - **expand-label** - Button label when all panels are collapsed. Defaults to "Expand All".
+   * - **collapse-label** - Button label when one or more panels are open. Defaults to "Collapse All".
+   *
    * ### **CSS Parts:**
    *  - **button** - The toggle button.
    */
   "ogds-accordion-toggle": Partial<OgdsAccordionToggleProps & BaseProps & BaseEvents>;
 
   /**
-   * The usa-banner component.
+   * The ogds-alert component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **heading** - Text for the heading. Make sure to specify the correct heading level (h2, h3, etc)
+   * - **body** - Body content for the alert. Can contain HTML (links, etc).
+   */
+  "ogds-alert": Partial<OGDSAlertProps & BaseProps & BaseEvents>;
+
+  /**
+   * The ogds-banner component.
    * ---
    *
    *
@@ -132,23 +151,14 @@ export type CustomElements = {
    * - **--ogds-banner-link-hover-color** - Sets the default link color. _(default: undefined)_
    * - **--ogds-banner-text-color** - Sets the default text color. _(default: undefined)_
    */
-  "usa-banner": Partial<UsaBannerProps & BaseProps & BaseEvents>;
+  "ogds-banner": Partial<OgdsBannerProps & BaseProps & BaseEvents>;
 
   /**
-   * 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)_
    */
-  "usa-link": Partial<UsaLinkProps & BaseProps & BaseEvents>;
+  "ogds-task-list": Partial<OgdsTaskListProps & BaseProps & BaseEvents>;
 };
 
 declare namespace svelteHTML {

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

@@ -14,13 +14,20 @@ type OgdsAccordionProps = {
 type OgdsAccordionToggleProps = {
   /** The `id` of the `<ogds-accordion>` to control. Required. */
   controls?: string;
-  /** Button label when all panels are collapsed. Defaults to "Expand All". */
-  "expand-label"?: string;
-  /** Button label when one or more panels are open. Defaults to "Collapse All". */
-  "collapse-label"?: string;
 };
 
-type UsaBannerProps = {
+type OGDSAlertProps = {
+  /** The type of alert (info, warning, etc) */
+  type?: string;
+  /** Use this attribute to hide the icon */
+  noIcon?: string;
+  /**  */
+  "no-icon"?: boolean;
+  /**  */
+  _headingNodes?: Node[];
+};
+
+type OgdsBannerProps = {
   /** The element's language. */
   lang?: "en" | "es";
   /** The custom aria label users can override. */
@@ -33,10 +40,7 @@ type UsaBannerProps = {
   isOpen?: boolean;
 };
 
-type UsaLinkProps = {
-  /** The url for the link */
-  href?: string | undefined;
-};
+type OgdsTaskListProps = {};
 
 export type CustomElements = {
   /**
@@ -66,13 +70,28 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Slots:**
+   *  - **expand-label** - Button label when all panels are collapsed. Defaults to "Expand All".
+   * - **collapse-label** - Button label when one or more panels are open. Defaults to "Collapse All".
+   *
    * ### **CSS Parts:**
    *  - **button** - The toggle button.
    */
   "ogds-accordion-toggle": DefineComponent<OgdsAccordionToggleProps>;
 
   /**
-   * The usa-banner component.
+   * The ogds-alert component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **heading** - Text for the heading. Make sure to specify the correct heading level (h2, h3, etc)
+   * - **body** - Body content for the alert. Can contain HTML (links, etc).
+   */
+  "ogds-alert": DefineComponent<OGDSAlertProps>;
+
+  /**
+   * The ogds-banner component.
    * ---
    *
    *
@@ -95,23 +114,14 @@ export type CustomElements = {
    * - **--ogds-banner-link-hover-color** - Sets the default link color. _(default: undefined)_
    * - **--ogds-banner-text-color** - Sets the default text color. _(default: undefined)_
    */
-  "usa-banner": DefineComponent<UsaBannerProps>;
+  "ogds-banner": DefineComponent<OgdsBannerProps>;
 
   /**
-   * 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)_
    */
-  "usa-link": DefineComponent<UsaLinkProps>;
+  "ogds-task-list": DefineComponent<OgdsTaskListProps>;
 };
 
 declare module "vue" {

package/package.json

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

package/src/Globals.d.ts

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

package/src/components/index.ts

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+import { Meta, Title, Primary, Stories } from "@storybook/addon-docs/blocks";
+
+<Meta isTemplate />
+
+<Title />
+
+The accordion toggle provides a single button to expand or collapse all panels in an associated `<ogds-accordion>`.
+
+---
+
+## Default
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+## Guidance
+
+### When to use the accordion toggle
+
+_When accordions have many items._ The toggle is most useful when an accordion has more than two or three items, where expanding each individually would be tedious and users may want to scan all of the content at once.
+
+_For cross-browser in-page search._ `Cmd-/Ctrl-F` will find content in collapsed accordion sections and open the relevant sections in Chrome and Chromium-based browsers. However, as of now this behavior is limited to only those browsers (see ["Auto-opens when matched via page search"](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details#browser_compatibility)). Adding the toggle button will allow users to search all of the accordion content in any browser.
+
+_To support users looking to print the page content._ Let users display all of the page's content so it can be printed.
+
+### Usage
+
+Connect the toggle to an accordion using the `controls` attribute, which must match the `id` of the target `<ogds-accordion>`:
+
+```html
+<ogds-accordion-toggle controls="my-accordion"></ogds-accordion-toggle>
+<ogds-accordion id="my-accordion">
+  <details>
+    <summary>Item One</summary>
+    <p>Content</p>
+  </details>
+</ogds-accordion>
+```
+
+### Customizing labels
+
+By default, the button reads "Expand All" when all panels are collapsed and "Collapse All" when any panel is open. Override these with the `expand-label` and `collapse-label` named slots:
+
+```html
+<ogds-accordion-toggle controls="my-accordion">
+  <span slot="expand-label">Show All</span>
+  <span slot="collapse-label">Hide All</span>
+</ogds-accordion-toggle>
+```

package/src/components/ogds-accordion-toggle/index.ts

@@ -3,34 +3,43 @@ import { adoptTokenStyles } from "../../core/token-styles";
 import { defineCustomElement } from "../../utils";
 
 import { property, state } from "lit/decorators.js";
+import styles from "./ogds-accordion-toggle.css";
 
 /**
  * @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".
+ *
+ * @slot expand-label - Button label when all panels are collapsed. Defaults to "Expand All".
+ * @slot collapse-label - Button label when one or more panels are open. Defaults to "Collapse All".
  *
  * @csspart button - The toggle button.
  *
  * @element ogds-accordion-toggle
  */
 export class OgdsAccordionToggle extends LitElement {
+  /** @ignore */
+  private static _sheet: CSSStyleSheet | null = null;
+
   @property({ type: String, attribute: "controls" })
   controls = "";
 
-  @property({ type: String, attribute: "expand-label" })
-  expandLabel = "Expand All";
-
-  @property({ type: String, attribute: "collapse-label" })
-  collapseLabel = "Collapse All";
-
   @state()
   private _anyOpen = false;
 
+  private _observer: MutationObserver | null = null;
+
   override connectedCallback() {
     super.connectedCallback();
-
+    adoptTokenStyles();
+    if (!OgdsAccordionToggle._sheet) {
+      OgdsAccordionToggle._sheet = new CSSStyleSheet();
+      OgdsAccordionToggle._sheet.replaceSync(styles.cssText);
+      document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        OgdsAccordionToggle._sheet,
+      ];
+    }
     if (this.controls == "") {
       console.error(
         "<ogds-accordion-toggle>: Component must have a controls attribute with the ID" +
@@ -39,7 +48,22 @@ export class OgdsAccordionToggle extends LitElement {
       return;
     }
     this._anyOpen = this.checkOpen();
-    adoptTokenStyles();
+    this._observer = new MutationObserver(() => {
+      this._anyOpen = this.checkOpen();
+    });
+    const accordionEl = document.getElementById(this.controls);
+    if (accordionEl) {
+      this._observer.observe(accordionEl, {
+        subtree: true,
+        attributeFilter: ["open"],
+      });
+    }
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this._observer?.disconnect();
+    this._observer = null;
   }
 
   checkOpen() {
@@ -71,7 +95,10 @@ export class OgdsAccordionToggle extends LitElement {
   protected override render(): unknown {
     return html`
       <button @click="${this.toggleAll}" part="button">
-        ${this._anyOpen ? this.collapseLabel : this.expandLabel}
+        <slot name="expand-label" ?hidden="${this._anyOpen}">Expand All</slot>
+        <slot name="collapse-label" ?hidden="${!this._anyOpen}"
+          >Collapse All</slot
+        >
       </button>
     `;
   }

package/src/components/ogds-accordion-toggle/ogds-accordion-toggle.css

@@ -0,0 +1,31 @@
+@layer ogds.components;
+
+@layer ogds.components {
+  ogds-accordion-toggle::part(button) {
+    appearance: none;
+    background-color: var(--ogds-theme-button-fill-color);
+    border-color: transparent;
+    border-radius: var(--ogds-theme-button-border-radius);
+    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);
+    font-weight: 700;
+    padding: var(--ogds-spacing-105) var(--ogds-spacing-205);
+
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--ogds-theme-button-fill-color),
+        black 20%
+      );
+    }
+
+    &:focus {
+      /* :not([disabled]) doesn't seem to be supported on shadow parts */
+      outline: rgb(36 145 255) solid 0.25rem;
+      outline-offset: 0.25rem;
+    }
+  }
+}