@ogds/elements 1.0.0-alpha.6

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

@@ -0,0 +1,185 @@
+import type { JSX } from "solid-js";
+
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "my-app/solid";
+ *
+ * declare module "solid-js" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'prefix-', '-suffix'> {}
+ *   }
+ * }
+ * ```
+ *
+ */
+export type ScopedElements<Prefix extends string = "", Suffix extends string = ""> = {
+  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+};
+
+type BaseProps = {
+  /** Content added between the opening and closing tags of the element */
+  children?: JSX.Element;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Sets the HTML or XML markup contained within the element. */
+  innerHTML?: string;
+  /** Specifies the language of the element. */
+  lang?: 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;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: unknown | ((e: unknown) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: JSX.CSSProperties;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Sets the text content of the element */
+  textContent?: string;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+} & JSX.DirectiveAttributes &
+  JSX.PropAttributes &
+  JSX.AttrAttributes;
+
+type BaseEvents = {};
+
+type OgdsAccordionProps = {
+  /** 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`. */
+  "use-list-semantics"?: boolean;
+  /** 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`. */
+  "heading-level"?: number;
+  /**  */
+  "prop:detailsChildren"?: HTMLCollectionOf<HTMLDetailsElement> | undefined;
+  /**  */
+  "prop:childRoles"?: Map<HTMLDetailsElement, Set<string>>;
+} & JSX.DirectiveFunctionAttributes<OgdsAccordion> &
+  JSX.OnAttributes<OgdsAccordion> &
+  JSX.OnCaptureAttributes<OgdsAccordion>;
+
+type OgdsAccordionToggleProps = {
+  /** The `id` of the `<ogds-accordion>` to control. Required. */
+  controls?: string;
+  /** Button label when all panels are collapsed. Defaults to "Expand All". */
+  "expand-label"?: string;
+  /** Button label when one or more panels are open. Defaults to "Collapse All". */
+  "collapse-label"?: string;
+} & JSX.DirectiveFunctionAttributes<OgdsAccordionToggle> &
+  JSX.OnAttributes<OgdsAccordionToggle> &
+  JSX.OnCaptureAttributes<OgdsAccordionToggle>;
+
+type UsaBannerProps = {
+  /** The element's language. */
+  lang?: "en" | "es";
+  /** The custom aria label users can override. */
+  label?: string;
+  /** The top level domain for the site. */
+  tld?: "gov" | "mil";
+  /**  */
+  flagSrc?: string;
+  /**  */
+  isOpen?: boolean;
+} & JSX.DirectiveFunctionAttributes<UsaBanner> &
+  JSX.OnAttributes<UsaBanner> &
+  JSX.OnCaptureAttributes<UsaBanner>;
+
+type UsaLinkProps = {
+  /** The url for the link */
+  href?: string | undefined;
+} & JSX.DirectiveFunctionAttributes<UsaLink> &
+  JSX.OnAttributes<UsaLink> &
+  JSX.OnCaptureAttributes<UsaLink>;
+
+export type CustomElements = {
+  /**
+   * 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
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default (only) slot for the <ogds-accordion> expects one or more plain HTML <details> elements.
+   *
+   * ### **CSS Properties:**
+   *  - **--ogds-accordion-border** - Border used in the bordered variant. _(default: undefined)_
+   * - **--ogds-accordion-content-padding** - Padding for the expanded content area. _(default: undefined)_
+   * - **--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. _(default: undefined)_
+   * - **--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. _(default: undefined)_
+   */
+  "ogds-accordion": Partial<OgdsAccordionProps & BaseProps & BaseEvents>;
+
+  /**
+   * A button that expands or collapses all panels in an associated `<ogds-accordion>`.
+   * ---
+   *
+   *
+   * ### **CSS Parts:**
+   *  - **button** - The toggle button.
+   */
+  "ogds-accordion-toggle": Partial<OgdsAccordionToggleProps & BaseProps & BaseEvents>;
+
+  /**
+   * The usa-banner component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **banner-text** - The text for official government website text.
+   * - **banner-action** - Action text label "Here's how you know."
+   * - **domain-heading** - Heading text for the domain section.
+   * - **domain-text** - Body text for domain section.
+   * - **https-heading** - Heading for HTTPs section.
+   * - **https-text** - Body text for HTTPs section.
+   *
+   * ### **CSS Properties:**
+   *  - **--ogds-banner-background-color** - Sets banner background color. _(default: undefined)_
+   * - **--ogds-banner-button-close-background-color** - Sets the background color for the close control on smaller viewports. _(default: undefined)_
+   * - **--ogds-banner-focus-outline-color** - Sets banner focus outline color. _(default: undefined)_
+   * - **--ogds-banner-font-family** - Sets banner font family. _(default: undefined)_
+   * - **--ogds-banner-icon-gov-color** - Sets the color for the official government domain icon in the expanded state of the banner. _(default: undefined)_
+   * - **--ogds-banner-icon-https-color** - Sets the color for the https icon in the expanded state of the banner. _(default: undefined)_
+   * - **--ogds-banner-link-color** - Sets the default link color. _(default: undefined)_
+   * - **--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>;
+
+  /**
+   * 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>;
+};

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

@@ -0,0 +1,157 @@
+type BaseProps = {
+  /** Content added between the opening and closing tags of the element */
+  children?: JSX.Element;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Sets the HTML or XML markup contained within the element. */
+  innerHTML?: string;
+  /** Specifies the language of the element. */
+  lang?: 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;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: unknown | ((e: unknown) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: JSX.CSSProperties;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Sets the text content of the element */
+  textContent?: string;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+};
+
+type BaseEvents = {};
+
+type OgdsAccordionProps = {
+  /** 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`. */
+  "use-list-semantics"?: boolean;
+  /** 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`. */
+  "heading-level"?: number;
+  /**  */
+  "bind:detailsChildren"?: HTMLCollectionOf<HTMLDetailsElement> | undefined;
+  /**  */
+  "bind:childRoles"?: Map<HTMLDetailsElement, Set<string>>;
+};
+
+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 = {
+  /** The element's language. */
+  lang?: "en" | "es";
+  /** The custom aria label users can override. */
+  label?: string;
+  /** The top level domain for the site. */
+  tld?: "gov" | "mil";
+  /**  */
+  flagSrc?: string;
+  /**  */
+  isOpen?: boolean;
+};
+
+type UsaLinkProps = {
+  /** The url for the link */
+  href?: string | undefined;
+};
+
+export type CustomElements = {
+  /**
+   * 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
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default (only) slot for the <ogds-accordion> expects one or more plain HTML <details> elements.
+   *
+   * ### **CSS Properties:**
+   *  - **--ogds-accordion-border** - Border used in the bordered variant. _(default: undefined)_
+   * - **--ogds-accordion-content-padding** - Padding for the expanded content area. _(default: undefined)_
+   * - **--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. _(default: undefined)_
+   * - **--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. _(default: undefined)_
+   */
+  "ogds-accordion": Partial<OgdsAccordionProps & BaseProps & BaseEvents>;
+
+  /**
+   * A button that expands or collapses all panels in an associated `<ogds-accordion>`.
+   * ---
+   *
+   *
+   * ### **CSS Parts:**
+   *  - **button** - The toggle button.
+   */
+  "ogds-accordion-toggle": Partial<OgdsAccordionToggleProps & BaseProps & BaseEvents>;
+
+  /**
+   * The usa-banner component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **banner-text** - The text for official government website text.
+   * - **banner-action** - Action text label "Here's how you know."
+   * - **domain-heading** - Heading text for the domain section.
+   * - **domain-text** - Body text for domain section.
+   * - **https-heading** - Heading for HTTPs section.
+   * - **https-text** - Body text for HTTPs section.
+   *
+   * ### **CSS Properties:**
+   *  - **--ogds-banner-background-color** - Sets banner background color. _(default: undefined)_
+   * - **--ogds-banner-button-close-background-color** - Sets the background color for the close control on smaller viewports. _(default: undefined)_
+   * - **--ogds-banner-focus-outline-color** - Sets banner focus outline color. _(default: undefined)_
+   * - **--ogds-banner-font-family** - Sets banner font family. _(default: undefined)_
+   * - **--ogds-banner-icon-gov-color** - Sets the color for the official government domain icon in the expanded state of the banner. _(default: undefined)_
+   * - **--ogds-banner-icon-https-color** - Sets the color for the https icon in the expanded state of the banner. _(default: undefined)_
+   * - **--ogds-banner-link-color** - Sets the default link color. _(default: undefined)_
+   * - **--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>;
+
+  /**
+   * 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>;
+};
+
+declare namespace svelteHTML {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface IntrinsicElements extends CustomElements {}
+}

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

@@ -0,0 +1,127 @@
+import type { DefineComponent } from "vue";
+
+type OgdsAccordionProps = {
+  /** 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`. */
+  "use-list-semantics"?: boolean;
+  /** 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`. */
+  "heading-level"?: number;
+  /**  */
+  detailsChildren?: HTMLCollectionOf<HTMLDetailsElement> | undefined;
+  /**  */
+  childRoles?: Map<HTMLDetailsElement, Set<string>>;
+};
+
+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 = {
+  /** The element's language. */
+  lang?: "en" | "es";
+  /** The custom aria label users can override. */
+  label?: string;
+  /** The top level domain for the site. */
+  tld?: "gov" | "mil";
+  /**  */
+  flagSrc?: string;
+  /**  */
+  isOpen?: boolean;
+};
+
+type UsaLinkProps = {
+  /** The url for the link */
+  href?: string | undefined;
+};
+
+export type CustomElements = {
+  /**
+   * 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
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default (only) slot for the <ogds-accordion> expects one or more plain HTML <details> elements.
+   *
+   * ### **CSS Properties:**
+   *  - **--ogds-accordion-border** - Border used in the bordered variant. _(default: undefined)_
+   * - **--ogds-accordion-content-padding** - Padding for the expanded content area. _(default: undefined)_
+   * - **--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. _(default: undefined)_
+   * - **--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. _(default: undefined)_
+   */
+  "ogds-accordion": DefineComponent<OgdsAccordionProps>;
+
+  /**
+   * A button that expands or collapses all panels in an associated `<ogds-accordion>`.
+   * ---
+   *
+   *
+   * ### **CSS Parts:**
+   *  - **button** - The toggle button.
+   */
+  "ogds-accordion-toggle": DefineComponent<OgdsAccordionToggleProps>;
+
+  /**
+   * The usa-banner component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **banner-text** - The text for official government website text.
+   * - **banner-action** - Action text label "Here's how you know."
+   * - **domain-heading** - Heading text for the domain section.
+   * - **domain-text** - Body text for domain section.
+   * - **https-heading** - Heading for HTTPs section.
+   * - **https-text** - Body text for HTTPs section.
+   *
+   * ### **CSS Properties:**
+   *  - **--ogds-banner-background-color** - Sets banner background color. _(default: undefined)_
+   * - **--ogds-banner-button-close-background-color** - Sets the background color for the close control on smaller viewports. _(default: undefined)_
+   * - **--ogds-banner-focus-outline-color** - Sets banner focus outline color. _(default: undefined)_
+   * - **--ogds-banner-font-family** - Sets banner font family. _(default: undefined)_
+   * - **--ogds-banner-icon-gov-color** - Sets the color for the official government domain icon in the expanded state of the banner. _(default: undefined)_
+   * - **--ogds-banner-icon-https-color** - Sets the color for the https icon in the expanded state of the banner. _(default: undefined)_
+   * - **--ogds-banner-link-color** - Sets the default link color. _(default: undefined)_
+   * - **--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>;
+
+  /**
+   * 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>;
+};
+
+declare module "vue" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface GlobalComponents extends CustomElements {}
+}
+
+declare global {
+  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IntrinsicElements extends CustomElements {}
+  }
+}

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const defineCustomElement: (tag: string, className: CustomElementConstructor) => void;

package/dist/utils/index.test.d.ts

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

package/package.json

@@ -0,0 +1,119 @@
+{
+  "name": "@ogds/elements",
+  "version": "1.0.0-alpha.6",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/open-government-design-system/ogds-elements.git"
+  },
+  "files": [
+    ".storybook",
+    "storybook",
+    "build",
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
+    "./components/*": "./dist/components/*.js",
+    "./components/frameworks/react/*": "./dist/components/frameworks/react/*.js",
+    "./src/components/*": "./src/components/*/index.js",
+    "./core/*": "./src/core/*",
+    "./styles/*": "./build/*",
+    "./components/ogds-accordion/styles": "./src/components/ogds-accordion/ogds-accordion.css"
+  },
+  "scripts": {
+    "build": "tsc -p ./config/tsconfig.json && vite build --config ./config/vite.config.ts && npm run manifest:build",
+    "build:watch": "vite build --config ./config/vite.config.ts --watch",
+    "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",
+    "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",
+    "start": "npm run storybook & npm run manifest:watch",
+    "storybook:build": "storybook build",
+    "storybook": "storybook dev -p 8008",
+    "prestorybook:serve": "npm run storybook:build --quiet",
+    "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",
+    "release": "npm run build && changeset publish",
+    "test": "vitest --config ./config/vitest.config.js",
+    "test:ci": "vitest run --config ./config/vitest.config.js",
+    "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npm run storybook:serve\" \"wait-on tcp:127.0.0.1:3000 && npx test-storybook --url http://localhost:3000\"",
+    "vite:preview": "vite preview --config ./config/vite.config.ts"
+  },
+  "dependencies": {
+    "@ogds/tokens": "^1.0.0-alpha.2",
+    "@uswds/uswds": "^3.13.0",
+    "lit": "^3.3.2",
+    "sass": "^1.97.3"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.8",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@eslint/css": "^1.1.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",
+    "@types/express": "^5.0.6",
+    "@types/node": "^25.3.3",
+    "@types/serve-static": "^2.2.0",
+    "@vitest/eslint-plugin": "^1.6.10",
+    "@vitest/ui": "^4.0.18",
+    "@wc-toolkit/storybook-helpers": "^10.2.0",
+    "axe-playwright": "^2.2.2",
+    "browserslist": "^4.28.1",
+    "concurrently": "^9.2.1",
+    "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-config-prettier": "^10.1.8",
+    "eslint-plugin-storybook": "10.2.10",
+    "express": "^5.2.1",
+    "husky": "^9.1.7",
+    "jsdom": "^28.1.0",
+    "lightningcss": "^1.31.1",
+    "prettier": "^3.8.1",
+    "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",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-order": "^8.0.0",
+    "typescript": "^5.9.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"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.59.0"
+  }
+}

package/src/components/index.ts

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

package/src/components/ogds-accordion/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git -C /Users/matthenry/Code/ogds/ogds-elements remote -v)"
+    ]
+  }
+}