@adobe-commerce/elsie 2.0.0 → 2.0.1-alpha-20260728135101

package/config/storybook/components/Variants/index.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 export * from '@adobe-commerce/elsie/config/storybook/components/Variants/Variants';

package/config/storybook/manager.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { addons } from 'storybook/manager-api';

package/config/storybook/preview.jsx

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { UIProvider } from '../../src/components';

package/config/storybook/theming/fonts.css

@@ -10,7 +10,9 @@
 /* Light */
 @font-face {
   font-family: 'adobe-clean';
-  src: local('Adobe Clean Light'), local('AdobeClean-Light'),
+  src:
+    local('Adobe Clean Light'),
+    local('AdobeClean-Light'),
     url('https://use.typekit.net/af/40207f/0000000000000000000176ff/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3')
       format('woff2'),
     url('https://use.typekit.net/af/40207f/0000000000000000000176ff/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3')
@@ -25,7 +27,9 @@
 /* Normal */
 @font-face {
   font-family: 'adobe-clean';
-  src: local('Adobe Clean'), local('AdobeClean-Regular'),
+  src:
+    local('Adobe Clean'),
+    local('AdobeClean-Regular'),
     url('https://use.typekit.net/af/cb695f/000000000000000000017701/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
       format('woff2'),
     url('https://use.typekit.net/af/cb695f/000000000000000000017701/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
@@ -40,7 +44,9 @@
 /* Bold */
 @font-face {
   font-family: 'adobe-clean';
-  src: local('Adobe Clean Bold'), local('AdobeClean-Bold'),
+  src:
+    local('Adobe Clean Bold'),
+    local('AdobeClean-Bold'),
     url('https://use.typekit.net/af/eaf09c/000000000000000000017703/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
       format('woff2'),
     url('https://use.typekit.net/af/eaf09c/000000000000000000017703/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
@@ -55,7 +61,9 @@
 /* Italic */
 @font-face {
   font-family: 'adobe-clean';
-  src: local('Adobe Clean Italic'), local('AdobeClean-It'),
+  src:
+    local('Adobe Clean Italic'),
+    local('AdobeClean-It'),
     url('https://use.typekit.net/af/74ffb1/000000000000000000017702/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3')
       format('woff2'),
     url('https://use.typekit.net/af/74ffb1/000000000000000000017702/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3')

package/config/storybook/theming/preview.css

@@ -10,7 +10,9 @@
 @import './fonts.css';
 
 .sbdocs .sbdocs-content {
-  font: normal normal 400 16px/24px adobe-clean, sans-serif;
+  font:
+    normal normal 400 16px/24px adobe-clean,
+    sans-serif;
   max-width: 1200px !important;
   width: 100%;
 }

package/config/storybook/theming/theme.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { create } from 'storybook/theming';

package/config/vite.mjs

@@ -31,10 +31,14 @@ const env = loadEnv('', process.cwd());
 // Load Elsie Config — prefer .elsie.cjs (always CJS regardless of package "type")
 const toFileUrl = (p) =>
   p.startsWith('file://') ? p : `file://${p.replace(/\\/g, '/')}`;
-const elsieConfigPath = fs.existsSync(path.resolve(process.cwd(), './.elsie.cjs'))
+const elsieConfigPath = fs.existsSync(
+  path.resolve(process.cwd(), './.elsie.cjs'),
+)
   ? path.resolve(process.cwd(), './.elsie.cjs')
   : path.resolve(process.cwd(), './.elsie.js');
-const elsieConfig = await import(toFileUrl(elsieConfigPath)).then((m) => m.default);
+const elsieConfig = await import(toFileUrl(elsieConfigPath)).then(
+  (m) => m.default,
+);
 
 // Read package.json using createRequire (compatible with Node 20 and 22)
 const require = createRequire(import.meta.url);
@@ -54,12 +58,12 @@ const paths = {
     ? path.resolve(
         process.cwd(),
         elsieConfig.api.root,
-        elsieConfig.api.fragments
+        elsieConfig.api.fragments,
       )
     : undefined,
 
   components: elsieConfig.components?.map((component) =>
-    path.resolve(process.cwd(), component.root)
+    path.resolve(process.cwd(), component.root),
   ),
 };
 
@@ -76,7 +80,7 @@ const input = {
         .sync(path.resolve(paths.containers, '**/*/index.ts'))
         .reduce((entries, entry) => {
           const containerRegEx = new RegExp(
-            `${paths.containers}/(.*)/index.ts`
+            `${paths.containers}/(.*)/index.ts`,
           );
           const key = RegExp(containerRegEx).exec(entry)[1];
 
@@ -114,7 +118,9 @@ function isReachableFrom(targetPath, id, getModuleInfo, visited = new Set()) {
   visited.add(id);
   const info = getModuleInfo(id);
   return info?.importers?.some(
-    (imp) => imp === targetPath || isReachableFrom(targetPath, imp, getModuleInfo, visited)
+    (imp) =>
+      imp === targetPath ||
+      isReachableFrom(targetPath, imp, getModuleInfo, visited),
   );
 }
 
@@ -151,7 +157,10 @@ function fragmentImportRedirectPlugin(paths, elsieConfig) {
   // values without re-reading elsieConfig and without unsafe property access
   // inside hook callbacks (where elsieConfig.api could be undefined).
   const apiAliasRoot = elsieConfig.api?.importAliasRoot;
-  const apiRoot = path.resolve(process.cwd(), elsieConfig.api?.root ?? 'src/api');
+  const apiRoot = path.resolve(
+    process.cwd(),
+    elsieConfig.api?.root ?? 'src/api',
+  );
   // Alias specifier for the barrel itself, e.g. '@/cart/api/fragments'
   const barrelAlias = apiAliasRoot
     ? `${apiAliasRoot}/${path.basename(paths.fragments, path.extname(paths.fragments))}`
@@ -178,7 +187,10 @@ function fragmentImportRedirectPlugin(paths, elsieConfig) {
         // Resolve alias-prefixed specifiers (e.g. '@/cart/api/graphql/CartFragment')
         // using the dropin's importAliasRoot config before probing the filesystem.
         if (apiAliasRoot && specifier.startsWith(`${apiAliasRoot}/`)) {
-          specifier = path.join(apiRoot, specifier.slice(apiAliasRoot.length + 1));
+          specifier = path.join(
+            apiRoot,
+            specifier.slice(apiAliasRoot.length + 1),
+          );
         } else if (specifier.startsWith('.')) {
           specifier = path.resolve(barrelDir, specifier);
         } else {
@@ -200,7 +212,8 @@ function fragmentImportRedirectPlugin(paths, elsieConfig) {
       if (!importer || fragmentSourceFiles.size === 0) return null;
       // Allow the barrel to import fragment files (its own re-exports) and
       // allow fragment files to import each other (shared helper fragments).
-      if (importer === paths.fragments || fragmentSourceFiles.has(importer)) return null;
+      if (importer === paths.fragments || fragmentSourceFiles.has(importer))
+        return null;
 
       // Delegate to subsequent plugins (including tsconfigPaths) so alias
       // specifiers are fully resolved to an absolute path before we check.
@@ -209,7 +222,8 @@ function fragmentImportRedirectPlugin(paths, elsieConfig) {
       if (!resolved || !fragmentSourceFiles.has(resolved.id)) return null;
 
       // Track the violation for the buildEnd warning.
-      if (!fragmentViolations.has(resolved.id)) fragmentViolations.set(resolved.id, []);
+      if (!fragmentViolations.has(resolved.id))
+        fragmentViolations.set(resolved.id, []);
       fragmentViolations.get(resolved.id).push(importer);
 
       // Redirect to the barrel. Rollup treats the barrel as the resolved module,
@@ -221,15 +235,21 @@ function fragmentImportRedirectPlugin(paths, elsieConfig) {
       for (const [fragmentFile, importers] of fragmentViolations) {
         // Derive the wrong specifier from the actual fragment file path so the
         // suggestion shows the real import, not a generic placeholder.
-        const relFragment = path.relative(apiRoot, fragmentFile).replace(/\.(ts|tsx|js)$/, '');
-        const wrongSpecifier = apiAliasRoot ? `${apiAliasRoot}/${relFragment}` : relFragment;
+        const relFragment = path
+          .relative(apiRoot, fragmentFile)
+          .replace(/\.(ts|tsx|js)$/, '');
+        const wrongSpecifier = apiAliasRoot
+          ? `${apiAliasRoot}/${relFragment}`
+          : relFragment;
 
         this.warn(
           `\n"${path.relative(process.cwd(), fragmentFile)}" belongs to the fragments barrel ` +
-          `but was directly imported by:\n${ 
-          importers.map((imp) => `    - ${path.relative(process.cwd(), imp)}`).join('\n') 
-          }\n\nThe import was automatically redirected through the fragments barrel. ` +
-          `\nUpdate the import in source to silence this warning: '${wrongSpecifier}' → '${barrelAlias}'\n`
+            `but was directly imported by:\n${importers
+              .map((imp) => `    - ${path.relative(process.cwd(), imp)}`)
+              .join(
+                '\n',
+              )}\n\nThe import was automatically redirected through the fragments barrel. ` +
+            `\nUpdate the import in source to silence this warning: '${wrongSpecifier}' → '${barrelAlias}'\n`,
         );
       }
     },
@@ -267,7 +287,7 @@ function rewriteSourcemapSourcesPlugin(packageJSON) {
                 // the package name so the path is stable and globally unique.
                 return input.replace(
                   /(?:\.\.?\/)+src\//,
-                  `/${packageJSON.name}/src/`
+                  `/${packageJSON.name}/src/`,
                 );
               });
 
@@ -309,7 +329,7 @@ function generateDistPackageJsonPlugin(packageJSON) {
             license: packageJSON.license,
           },
           null,
-          2
+          2,
         ),
       });
 
@@ -372,21 +392,26 @@ export default {
         chunkFileNames: 'chunks/[name].js',
         manualChunks: (id, { getModuleInfo }) => {
           // Fragments barrel entry does not accept chunking
-          if (paths.fragments && id.includes(paths.fragments)) return 'no-chunk';
+          if (paths.fragments && id.includes(paths.fragments))
+            return 'no-chunk';
 
           // API functions → chunks/api.js
           // All modules under paths.api go to the api chunk, except those imported
           // by the fragments barrel — those must stay in the fragments output so the
           // boilerplate GraphQL override mechanism can replace them independently.
           if (paths.api && id.includes(paths.api)) {
-            if (paths.fragments && isReachableFrom(paths.fragments, id, getModuleInfo)) {
+            if (
+              paths.fragments &&
+              isReachableFrom(paths.fragments, id, getModuleInfo)
+            ) {
               return undefined;
             }
             return 'api';
           }
 
           // components → chunks/components.js
-          if (paths.components?.some((component) => id.includes(component))) return 'components';
+          if (paths.components?.some((component) => id.includes(component)))
+            return 'components';
 
           return undefined;
         },
@@ -456,7 +481,8 @@ export default {
       name: 'inject-dropin-metadata',
       transform(code, id) {
         if (!paths.containers) return null;
-        if (!id.startsWith(paths.containers) || !id.endsWith('/index.ts')) return null;
+        if (!id.startsWith(paths.containers) || !id.endsWith('/index.ts'))
+          return null;
 
         const name = path.relative(paths.containers, path.dirname(id));
         const ast = this.parse(code);
@@ -466,10 +492,11 @@ export default {
             node.type !== 'ExportNamedDeclaration' ||
             !node.source ||
             !node.specifiers
-          ) continue;
+          )
+            continue;
 
           const defaultSpec = node.specifiers.find(
-            (s) => s.exported.name === 'default'
+            (s) => s.exported.name === 'default',
           );
           if (!defaultSpec) continue;
 
@@ -515,7 +542,7 @@ export default {
 
       injectCodeFunction: function injectCodeCustomRunTimeFunction(
         cssCode,
-        options
+        options,
       ) {
         try {
           if (typeof document != 'undefined') {
@@ -539,7 +566,7 @@ export default {
             } else {
               // Inject in head before the first <link> or <style> tag.
               const base = document.querySelector(
-                'link[rel="stylesheet"], style'
+                'link[rel="stylesheet"], style',
               );
 
               if (base) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "2.0.0",
+  "version": "2.0.1-alpha-20260728135101",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -12,30 +12,14 @@
   "bin": {
     "elsie": "./bin/index.js"
   },
-  "scripts": {
-    "dev": "elsie concurrently 'yarn storybook' 'yarn serve'",
-    "storybook": "elsie storybook",
-    "serve": "elsie serve --config vite.config.mjs",
-    "lint": "elsie lint",
-    "test": "elsie test",
-    "test:ci": "jest --config jest.config.mjs --passWithNoTests --coverage",
-    "build": "yarn cleanup && yarn build:js",
-    "build:js": "elsie build --config vite.config.mjs",
-    "analyze": "yarn cleanup && ANALYZE=true yarn build:js",
-    "build-storybook": "storybook build --disable-telemetry",
-    "test-storybook": "test-storybook",
-    "test-storybook-ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npx http-server storybook-static --port 6006 --silent\" \"elsie wait-on tcp:127.0.0.1:6006 && test-storybook\"",
-    "cleanup": "rimraf dist",
-    "prepack": "cp ../../LICENSE.md ./LICENSE.md",
-    "postpublish": "node ./scripts/publish-tools.mjs"
-  },
   "devDependencies": {
     "@adobe-commerce/event-bus": "~1.1.1",
     "@adobe-commerce/fetch-graphql": "~1.3.1",
     "@adobe-commerce/recaptcha": "1.2.1",
     "@adobe-commerce/storefront-design": "~1.1.1",
     "@chromatic-com/storybook": "^5",
-    "@dropins/build-tools": "~1.2.1"
+    "@dropins/build-tools": "~1.2.1",
+    "@adobe-commerce/elsie": "2.0.1-alpha-20260728135101"
   },
   "peerDependencies": {
     "eslint-plugin-cypress": ">=3.0.0"
@@ -51,16 +35,16 @@
     "@babel/preset-env": "^7.29.7",
     "@babel/preset-typescript": "^7.24.7",
     "@babel/traverse": "^7.24.0",
-    "@changesets/cli": "^2.30.0",
+    "@changesets/cli": "^2.31.1",
     "@graphql-codegen/cli": "^5.0.0",
-    "@graphql-codegen/client-preset": "^6.0.1",
+    "@graphql-codegen/client-preset": "^6.1.0",
     "@graphql-codegen/typescript-operations": "^4.0.1",
-    "@preact/preset-vite": "^2.8.2",
+    "@preact/preset-vite": "^2.10.6",
     "@preact/signals": "1.3.0",
-    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-a11y": "^10.5.3",
     "@storybook/addon-coverage": "^3.0.2",
-    "@storybook/addon-docs": "^10.4.6",
-    "@storybook/preact-vite": "^10.4.6",
+    "@storybook/addon-docs": "^10.5.3",
+    "@storybook/preact-vite": "^10.5.3",
     "@storybook/test-runner": "^0.24.4",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/preact": "^3.2.4",
@@ -69,15 +53,15 @@
     "axe-playwright": "^2.0.1",
     "babel-jest": "^30.4.1",
     "common-tags": "^1.8.2",
-    "concurrently": "^7.3.0",
+    "concurrently": "^10.0.3",
     "core-js": "^3.24.0",
     "deepmerge": "^4.2.2",
-    "dotenv": "^16.0.1",
+    "dotenv": "^17.4.2",
     "eslint": "^9.39.5",
     "eslint-config-preact": "^2.0.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-mdx": "^3.8.1",
-    "eslint-plugin-storybook": "^10.4.6",
+    "eslint-plugin-storybook": "^10.5.3",
     "glob": "^13.0.6",
     "globals": "^15.0.0",
     "graphql": "^16.14.2",
@@ -86,18 +70,19 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.4.2",
     "jest-environment-jsdom": "^30.0.0",
-    "preact": "~10.22.1",
+    "playwright": "1.60.0",
+    "preact": "~10.29.7",
     "preact-i18n": "2.4.0-preactx",
     "preact-render-to-string": "^5.1.4",
-    "prettier": "^2.7.1",
+    "prettier": "^3.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^6.1.3",
     "rollup-plugin-visualizer": "^7.0.1",
-    "storybook": "^10.4.6",
-    "tsc-alias": "^1.8.17",
+    "storybook": "^10.5.3",
+    "tsc-alias": "^1.9.1",
     "typescript": "^6.0.0",
-    "typescript-eslint": "^8.0.0",
+    "typescript-eslint": "^8.63.0",
     "vite": "^5.2.10",
     "vite-plugin-banner": "^0.8.0",
     "vite-plugin-css-injected-by-js": "^3.5.1",
@@ -105,5 +90,22 @@
     "vite-tsconfig-paths": "^4.3.2",
     "wait-on": "^9.0.10",
     "yargs": "^17.5.1"
+  },
+  "scripts": {
+    "dev": "pnpm run dev:all",
+    "dev:all": "elsie concurrently \"pnpm run dev:storybook\" \"pnpm run dev:serve\"",
+    "dev:storybook": "elsie storybook",
+    "dev:serve": "elsie serve --config vite.config.mjs",
+    "lint": "elsie lint",
+    "test": "elsie test",
+    "test:ci": "jest --config jest.config.mjs --passWithNoTests --coverage",
+    "test:storybook": "test-storybook",
+    "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npx http-server storybook-static --port 6006 --silent\" \"elsie wait-on tcp:127.0.0.1:6006 && test-storybook\"",
+    "build": "pnpm run build:js",
+    "build:js": "pnpm run cleanup && elsie build --config vite.config.mjs",
+    "build:storybook": "storybook build --disable-telemetry",
+    "build:storybook:ci": "storybook build --disable-telemetry --quiet",
+    "analyze": "pnpm run cleanup && ANALYZE=true pnpm run build:js",
+    "cleanup": "rimraf dist"
   }
-}
+}

package/src/components/Accordion/Accordion.css

@@ -85,4 +85,4 @@
 /* @media only screen and (min-width: 1366px) { } */
 
 /* XXlarge (large laptops and desktops, 1920px and up) */
-/* @media only screen and (min-width: 1920px) { } */
+/* @media only screen and (min-width: 1920px) { } */

package/src/components/Accordion/Accordion.stories.tsx

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
@@ -150,22 +150,22 @@ export const SingleSection: Story = {
   ),
   play: async () => {
     const canvasElement = document.querySelector(
-      '#storybook-root'
+      '#storybook-root',
     ) as HTMLElement;
     const canvas = within(canvasElement);
 
     const loaderIcon = document.querySelector(
-      'div[class*="dropin-accordion"]'
+      'div[class*="dropin-accordion"]',
     ) as HTMLElement;
     await expect(loaderIcon).toBeVisible();
     const header = document.querySelector(
-      '.dropin-accordion-section__heading'
+      '.dropin-accordion-section__heading',
     ) as HTMLElement;
     await expect(header).toHaveTextContent('Title');
 
     await userEvent.click(canvas.getByRole('button'));
     const content = document.querySelector(
-      '.dropin-accordion-section__content-container'
+      '.dropin-accordion-section__content-container',
     ) as HTMLElement;
     await expect(content).toBeVisible();
   },
@@ -216,11 +216,11 @@ export const SingleSectionWithLeftIcon: Story = {
   ),
   play: async () => {
     const loaderIcon = document.querySelector(
-      'div[class*="dropin-accordion"]'
+      'div[class*="dropin-accordion"]',
     ) as HTMLElement;
     await expect(loaderIcon).toBeVisible();
     const leftHeader = document.querySelector(
-      '.dropin-accordion-section__title-container'
+      '.dropin-accordion-section__title-container',
     ) as HTMLElement;
     await expect(leftHeader).toBeVisible();
     await expect(leftHeader).toContainHTML('<svg');
@@ -271,11 +271,11 @@ export const SingleSectionWithOptionalText: Story = {
   ),
   play: async () => {
     const loaderIcon = document.querySelector(
-      'div[class*="dropin-accordion"]'
+      'div[class*="dropin-accordion"]',
     ) as HTMLElement;
     await expect(loaderIcon).toBeVisible();
     const secondaryText = document.querySelector(
-      '.dropin-accordion-section__secondary-text'
+      '.dropin-accordion-section__secondary-text',
     ) as HTMLElement;
     await expect(secondaryText).toBeVisible();
     await expect(secondaryText).toHaveTextContent('Optional Text');
@@ -319,11 +319,11 @@ export const SingleSectionWithPrice: Story = {
   ),
   play: async () => {
     const loaderIcon = document.querySelector(
-      'div[class*="dropin-accordion"]'
+      'div[class*="dropin-accordion"]',
     ) as HTMLElement;
     await expect(loaderIcon).toBeVisible();
     const secondaryText = document.querySelector(
-      '.dropin-accordion-section__secondary-text'
+      '.dropin-accordion-section__secondary-text',
     ) as HTMLElement;
     await expect(secondaryText).toBeVisible();
     await expect(secondaryText).toHaveTextContent('$9.99');
@@ -401,7 +401,7 @@ export const SingleSectionWithLinkAndCartItem: Story = {
   ),
   play: async () => {
     const accordionElement = document.querySelector(
-      '.dropin-accordion'
+      '.dropin-accordion',
     ) as HTMLElement;
     const link = accordionElement.querySelector('.dropin-accordion a');
 
@@ -511,11 +511,11 @@ export const MultipleSection: Story = {
   ),
   play: async () => {
     const loaderIcon = document.querySelector(
-      'div[class*="dropin-accordion"]'
+      'div[class*="dropin-accordion"]',
     ) as HTMLElement;
     await expect(loaderIcon).toBeVisible();
     const section = document.querySelector(
-      '.dropin-accordion-section'
+      '.dropin-accordion-section',
     ) as HTMLElement;
     await expect(section).toBeVisible();
     const divider = document.querySelector('.dropin-divider') as HTMLElement;
@@ -570,11 +570,11 @@ export const SingleSection_ToggleBehavior: Story = {
   ),
   play: async () => {
     const loaderIcon = document.querySelector(
-      'div[class*="dropin-accordion"]'
+      'div[class*="dropin-accordion"]',
     ) as HTMLElement;
     await expect(loaderIcon).toBeVisible();
     const secondaryText = document.querySelector(
-      '.dropin-accordion-section__secondary-text'
+      '.dropin-accordion-section__secondary-text',
     ) as HTMLElement;
     await expect(secondaryText).toBeVisible();
     await expect(secondaryText).toHaveTextContent('$9.99');

package/src/components/Accordion/Accordion.tsx

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { FunctionComponent, VNode } from 'preact';
@@ -14,8 +14,10 @@ import { Divider, Icon, IconNode } from '@adobe-commerce/elsie/components';
 import { Add, Minus } from '@adobe-commerce/elsie/icons';
 import { useText } from '@adobe-commerce/elsie/i18n';
 import '@adobe-commerce/elsie/components/Accordion/Accordion.css';
-export interface AccordionSectionProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {
+export interface AccordionSectionProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'icon'
+> {
   defaultOpen?: boolean;
   actionIconPosition?: 'left' | 'right';
   ariaLabelTitle: string;
@@ -60,7 +62,7 @@ export const AccordionSection: FunctionComponent<AccordionSectionProps> = ({
   }, [defaultOpen]);
 
   const buttonLabel = useText(
-    `Dropin.Accordion.${open ? 'close' : 'open'}.label`
+    `Dropin.Accordion.${open ? 'close' : 'open'}.label`,
   ).label;
 
   const openIcon = (
@@ -129,8 +131,10 @@ export const AccordionSection: FunctionComponent<AccordionSectionProps> = ({
   );
 };
 
-export interface AccordionProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {
+export interface AccordionProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'icon'
+> {
   actionIconPosition?: 'left' | 'right';
   iconOpen?: IconNode;
   iconClose?: IconNode;

package/src/components/Accordion/index.ts

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 export * from '@adobe-commerce/elsie/components/Accordion/Accordion';