@bspk/ui 1.1.34 → 1.3.0

package/.scripts/index.ts

@@ -0,0 +1,110 @@
+#!/usr/bin/env npx tsx
+/* eslint-disable @cspell/spellchecker */
+/* eslint-disable no-console */
+/**
+ * A simple CLI script to run development tasks.
+ *
+ * After you run `npm link` to install dependencies, you can run this script with: $ ui {task} [args]
+ *
+ * For example to create a new component, you can run:
+ *
+ * $ ui newc Dropdown
+ *
+ * To see a list of available tasks, run:
+ *
+ * $ ui
+ *
+ * This will show an arrow-navigable menu of available tasks.
+ *
+ * You can add new tasks by creating a new TypeScript file in the `.scripts/tasks` directory.
+ *
+ * Each task file should execute be able to be run directly with:
+ *
+ * $ npx tsx .scripts/tasks/{task-file}.ts [args]
+ *
+ * Each task file should have a comment block at the top with the following format:
+ *
+ * // UI: {tag} - {description}
+ *
+ * Where `{tag}` is the command you want to use to run the task, and `{description}` is a brief description of what the
+ * task does.
+ *
+ * For example:
+ *
+ * // UI: newc - Create a new component
+ *
+ * This will allow you to run the task with:
+ *
+ * $ ui newc [args]
+ *
+ * The script will pass any additional arguments to the task file.
+ */
+
+// look for tasks with the pattern "UI: {tag} - {description}" in a comment block near the top of the file
+
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import inquirer from 'inquirer';
+
+const tasksDir = path.resolve('./.scripts/tasks');
+
+const tasks: { [key: string]: { description: string; filePath: string } } = {};
+
+fs.readdirSync(tasksDir).forEach((file) => {
+    if (file.endsWith('.ts')) {
+        const filePath = path.join(tasksDir, file);
+        const content = fs.readFileSync(filePath, 'utf-8');
+        const match = content.match(/UI:\s*(\S+)\s*-\s*(.+)/);
+        if (match) {
+            const [, tag, description] = match;
+            tasks[tag] = { description, filePath };
+        }
+    }
+});
+
+const [taskTag, ...args] = process.argv.slice(2);
+
+function runTask(taskKey?: string) {
+    const task = taskKey && tasks[taskKey];
+    if (!task) return;
+
+    console.log(`Running task: ${taskKey} - ${task.description}`);
+    try {
+        execSync(`npx tsx ${task.filePath} ${args.join(' ')}`, { stdio: 'inherit' });
+        process.exit(0);
+    } catch (error) {
+        console.error(`Task "${taskKey}" failed:`, error);
+        process.exit(1);
+    }
+}
+
+runTask(taskTag);
+// List available tasks if no valid task is provided make it a arrow navigable menu
+
+async function createArrowKeyMenu() {
+    const questions = [
+        {
+            type: 'list',
+            name: 'selectedOption',
+            message: 'Choose an task:',
+            choices: [
+                ...Object.keys(tasks),
+                new inquirer.Separator(), // Optional separator
+                'Exit',
+            ],
+        },
+    ];
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const answers = await inquirer.prompt(questions as any);
+    console.log('You selected:', answers.selectedOption);
+    runTask(answers.selectedOption);
+
+    if (answers.selectedOption === 'Exit') {
+        process.exit(); // Exit the process if 'Exit' is chosen
+    }
+    // You can add logic here based on the selected option
+}
+
+createArrowKeyMenu();

package/README.md

@@ -14,5 +14,18 @@ npm install @bspk/ui
 npm install --peer @bspk/icons react react-dom
 ```
 
+## Testing
+
+To test all components
+
+```bash
+npm run test
+```
+
+To test a specific component
+
+```bash
+npm run test -t <componentname>
+```
 
 <!--- Copyright 2025 Anywhere Real Estate - CC BY 4.0 -->

package/build.ts

@@ -6,30 +6,32 @@
  *
  * It performs the following tasks:
  *
- * 1. Compiles TypeScript files using `tsc` and `tsc-alias`.
+ * 1. Compiles TypeScript files using `tsc`
  * 2. Processes SASS files using `npm run sass`.
  * 3. Copies styles from `@bspk/styles` to a temporary directory.
  * 4. Creates importable CSS files for each @bspk/styles brand.
  * 5. Creates importable CSS files for each component.
- * 6. Fixes scss and css import paths in JavaScript files.
+ * 6. Translates import paths from aliases to relative paths.
  * 7. Moves the temporary build directory to the final distribution directory.
  * 8. Updates the package exports to include component directories.
  *
  * $ npx tsx build.ts
  */
 import child_process from 'child_process';
-import fs_ from 'fs';
+import fs from 'fs';
 import path from 'path';
 import util from 'util';
 
 import packageData from './package.json';
 
+import { compilerOptions } from './tsconfig.json';
+
 const BRANDS = packageData.brands;
 
 const exec = util.promisify(child_process.exec);
-const writeFile = util.promisify(fs_.writeFile);
-const readDir = util.promisify(fs_.readdir);
-const readFile = (filePath: string) => util.promisify(fs_.readFile)(filePath, 'utf-8');
+const writeFile = util.promisify(fs.writeFile);
+const readDir = util.promisify(fs.readdir);
+const readFile = (filePath: string) => util.promisify(fs.readFile)(filePath, 'utf-8');
 
 const STYLES_SOURCE_DIR = path.dirname(import.meta.resolve('@bspk/styles/package.json').split('file:')[1]);
 
@@ -47,7 +49,7 @@ async function main() {
 
     await exec(`rm -rf ${distPath} && mkdir -p ${distStylesPath}`);
 
-    await exec('npm run tsc && npm run sass');
+    await exec('tsc --project ./tsconfig.build.json && npm run sass');
 
     // copy the styles from @bspk/styles to the temp styles directory
     await Promise.all(
@@ -57,9 +59,7 @@ async function main() {
         }),
     );
 
-    await fileProcessing();
-
-    await componentExports();
+    await Promise.all([fileProcessing(), componentExports()]);
 
     // copy dist to dist
 
@@ -73,7 +73,7 @@ main();
 async function fileProcessing() {
     const allFiles = await readDir(distPath, { encoding: 'utf-8', recursive: true, withFileTypes: true });
 
-    return Promise.all(
+    Promise.all(
         allFiles.map(async (dirent) => {
             if (!dirent.isFile()) return;
 
@@ -81,32 +81,81 @@ async function fileProcessing() {
 
             // make importable .css files
             if (filePath.endsWith('.css')) {
-                await createImportableCss(await readFile(filePath), filePath.replace(/\.css$/, '.css.js'));
+                return createImportableCss(await readFile(filePath), filePath.replace(/\.css$/, '.css.js'));
             }
 
             // fix import paths in .js files
             if (filePath.endsWith('.js')) {
-                const newFileContent = (await readFile(filePath)).replace(
-                    /import ['"]([^'"]+\/)?([^.]+)\.(s?css)['"];?/g,
-                    (_match, importPath = '', name) => {
-                        const nextImportPath = (importPath || '').replace('@bspk/styles/', '../../styles/');
-                        return `import '${nextImportPath}${name}.css.js';`;
-                    },
-                );
-                await writeFile(filePath, newFileContent, 'utf-8');
+                let newFileContent = await readFile(filePath);
+
+                // fix import paths for styles
+                newFileContent = cssImportsInjected(newFileContent);
+
+                // fix import paths for '@bspk/styles. The css files are now in the dist/styles directory.
+                newFileContent = newFileContent.replace("import '@bspk/styles/", "import '-/styles/");
+
+                // translate alias imports to relative paths
+                newFileContent = aliasToRelative(newFileContent, filePath);
+
+                return writeFile(filePath, newFileContent, 'utf-8');
             }
         }),
     );
 }
 
-async function componentExports() {
-    const nextExports = { ...packageData['static-exports'] };
+// Create a mapping of TypeScript alias paths to relative paths
+const tsConfigPathsToRelative = Object.fromEntries(
+    Object.entries(compilerOptions.paths).map(([aliasPath, relativePaths]) => {
+        // Convert the alias path to a relative path
+        const relativePath = relativePaths[0].replace(/\/\*$/, '/');
+        return [
+            aliasPath.replace(/\/\*$/, '/'),
+            path.resolve(compilerOptions.baseUrl, relativePath.replace('/src/', '/dist/')),
+        ];
+    }),
+);
+
+/**
+ * This function converts TypeScript alias paths to relative paths based on the current file's location. It reads the
+ * tsConfigPathsToRelative object to find the corresponding relative path for each alias import in the file content.
+ */
+function aliasToRelative(fileContent: string, filePath: string) {
+    const aliasImportMatches = fileContent.matchAll(
+        new RegExp(`import (.*)'(${Object.keys(tsConfigPathsToRelative).join('|')})([^']+)';`, 'g'),
+    );
+
+    for (const match of aliasImportMatches) {
+        const [fullMatch, importedValue, aliasPathMatched, actualImportedFile] = match;
+
+        const relativePath = tsConfigPathsToRelative[aliasPathMatched] || '';
+        const relativeFilePath =
+            path.relative(path.dirname(filePath), path.resolve(relativePath, actualImportedFile)) || '.';
+        const newImport = `import ${importedValue}'${relativeFilePath}';`;
+
+        fileContent = fileContent.replace(fullMatch, newImport);
+    }
+
+    return fileContent;
+}
 
-    (await readDir(path.resolve('./dist/components'), { withFileTypes: true })).forEach((dirent) => {
-        if (!dirent.isDirectory() || dirent.name.startsWith('.')) return;
-        nextExports[`./${dirent.name}/*`] = `./dist/components/${dirent.name}/*.js`;
-        nextExports[`./${dirent.name}`] = `./dist/components/${dirent.name}/index.js`;
+function cssImportsInjected(fileContent: string) {
+    return fileContent.replace(/import ['"]([^'"]+\/)?([^.]+)\.(s?css)['"];?/g, (_match, importPath = '', name) => {
+        const nextImportPath = importPath || '';
+        return `import '${nextImportPath}${name}.css.js';`;
     });
+}
+
+async function componentExports() {
+    const nextExports: Record<string, string> = { ...packageData['static-exports'] };
+
+    (await readDir(path.resolve('./dist/components'), { withFileTypes: true }))
+        .filter((dirent) => dirent.isDirectory() && !dirent.name.startsWith('.'))
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .forEach((dirent) => {
+            if (!dirent.isDirectory() || dirent.name.startsWith('.')) return;
+            nextExports[`./${dirent.name}`] = `./dist/components/${dirent.name}/index.js`;
+            nextExports[`./${dirent.name}/*`] = `./dist/components/${dirent.name}/*.js`;
+        });
 
     (packageData.exports as Record<string, string>) = nextExports as Record<string, string>;
     return writeFile(path.resolve('./package.json'), `${JSON.stringify(packageData, null, 4)}\n`, 'utf-8');
@@ -120,7 +169,6 @@ async function createImportableCss(cssContent: string, destPath: string, id?: st
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(\`${cssContent}\`));
 document.head.appendChild(style);
-${id ? `\ndocument.querySelector('#${id}')?.remove(); style.id = '${id}';` : ''}
-`,
+${id ? `\ndocument.querySelector('#${id}')?.remove(); style.id = '${id}';` : ''}`,
     );
 }

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,71 @@
+import './accordion.scss';
+import { ReactNode } from 'react';
+export type AccordionSection = {
+    /**
+     * The content of the accordion.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The title of the accordion.
+     *
+     * @required
+     */
+    title: string;
+    /** The subtitle of the accordion. */
+    subtitle?: string;
+    /** The leading element to display in the accordion header. */
+    leading?: ReactNode;
+    /** The trailing element to display in the accordion header. */
+    trailing?: ReactNode;
+    /**
+     * If the accordion is initially open.
+     *
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Indicates whether the accordion is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The unique identifier for the accordion item.
+     *
+     * If not provided it will be generated automatically.
+     */
+    id?: string;
+};
+export type AccordionProps = {
+    /**
+     * Array of accordion sections
+     *
+     * @type Array<AccordionSection>
+     * @required
+     */
+    items: AccordionSection[];
+    /**
+     * If true only one accordion section can be opened at a time
+     *
+     * @default true
+     */
+    singleOpen?: boolean;
+};
+/**
+ * A vertical stack of collapsible panels or that allows customers to expand or collapse each panel individually to
+ * reveal or hide their content.
+ *
+ * @example
+ *     import { Accordion } from '@bspk/ui/Accordion';
+ *
+ *     function Example() {
+ *         return <Accordion items={[{ id: 1, title: 'Section', children: 'Example content' }]} />;
+ *     }
+ *
+ * @name Accordion
+ * @phase UXReview
+ */
+export declare function Accordion({ items: itemsProp, singleOpen }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './accordion.css.js';
+import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
+import { SvgKeyboardArrowUp } from '@bspk/icons/KeyboardArrowUp';
+import { useEffect, useMemo, useState } from 'react';
+import { randomString } from '../../utils/random';
+/**
+ * A vertical stack of collapsible panels or that allows customers to expand or collapse each panel individually to
+ * reveal or hide their content.
+ *
+ * @example
+ *     import { Accordion } from '@bspk/ui/Accordion';
+ *
+ *     function Example() {
+ *         return <Accordion items={[{ id: 1, title: 'Section', children: 'Example content' }]} />;
+ *     }
+ *
+ * @name Accordion
+ * @phase UXReview
+ */
+export function Accordion({ items: itemsProp, singleOpen = true }) {
+    const items = useMemo(() => itemsProp.map((item) => ({
+        ...item,
+        id: item.id || `accordion-item-${randomString(8)}`,
+    })), [itemsProp]);
+    const [openSections, setOpenSections] = useState(() => {
+        return items.filter((item) => item.isOpen).map((item) => item.id);
+    });
+    useEffect(() => {
+        // Update open sections based on the items prop
+        setOpenSections(items.filter((item) => item.isOpen).map((item) => item.id));
+    }, [items]);
+    const toggleOpen = (itemId) => () => setOpenSections((prev) => {
+        const isSectionOpen = prev.includes(itemId);
+        // If singleOpen is true, reset activeItems to only include the clicked item or empty if it was already active
+        if (singleOpen)
+            return isSectionOpen ? [] : [itemId];
+        // If singleOpen is false, toggle the clicked item and keep others active
+        return isSectionOpen ? prev.filter((activeItemId) => activeItemId !== itemId) : [...prev, itemId];
+    });
+    return (_jsx("div", { "data-bspk": "accordion", children: items.map(({ children, title, subtitle: subtitle, leading, trailing, disabled, id }, index) => {
+            const isOpen = openSections.includes(id);
+            return (_jsxs("section", { "data-disabled": disabled || undefined, id: id, children: [_jsxs("button", { "aria-controls": `${id}-content`, "aria-expanded": isOpen, "data-header": true, disabled: disabled || undefined, onClick: !disabled ? toggleOpen(id) : undefined, children: [leading && _jsx("span", { "data-leading": true, children: leading }), _jsxs("span", { "data-title-subtitle": true, children: [_jsx("span", { "data-title": true, children: title }), subtitle && _jsx("span", { "data-subtitle": true, children: subtitle })] }), trailing && _jsx("span", { "data-trailing": true, children: trailing }), _jsx("span", { "data-arrow": true, children: isOpen ? _jsx(SvgKeyboardArrowUp, {}) : _jsx(SvgKeyboardArrowDown, {}) })] }), isOpen && (_jsx("div", { "data-content": true, "data-hidden": !isOpen || undefined, id: `${id}-content`, children: children })), _jsx("span", { "data-divider": true })] }, id || index));
+        }) }));
+}
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}

package/dist/components/Accordion/AccordionExample.d.ts

@@ -0,0 +1,4 @@
+import { AccordionProps } from '.';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+export declare const presets: Preset<AccordionProps>[];
+export declare const AccordionExample: ComponentExampleFn<AccordionProps>;

package/dist/components/Accordion/AccordionExample.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar } from '../Avatar';
+const AccordionContent = () => (_jsx("p", { children: "Actualize the plan and markets. Going forward, we should harness the asset. Leverage skillsets to achieve maximum market share." }));
+export const presets = [
+    {
+        label: 'Multiple Sections',
+        propState: {
+            items: [
+                {
+                    id: '1',
+                    title: `Section 1`,
+                    subtitle: 'Subtitle',
+                    children: _jsx(AccordionContent, {}),
+                },
+                {
+                    id: '2',
+                    title: 'Section 2',
+                    children: _jsx(AccordionContent, {}),
+                    leading: _jsx(Avatar, { name: "Avatar", size: "small" }),
+                    trailing: _jsx("span", { children: "Trailing" }),
+                },
+                {
+                    id: '3',
+                    title: 'Section 3',
+                    children: _jsx(AccordionContent, {}),
+                },
+            ],
+        },
+    },
+    {
+        label: 'Multiple Sections with 1 disabled',
+        propState: {
+            items: [
+                {
+                    id: '1',
+                    title: `Section 1`,
+                    children: _jsx(AccordionContent, {}),
+                },
+                { id: '2', title: 'Section 2', disabled: true, children: _jsx(AccordionContent, {}) },
+                { id: '3', title: 'Section 3', children: _jsx(AccordionContent, {}) },
+            ],
+        },
+    },
+    {
+        label: 'Multiple Sections with 1 disabled and open',
+        propState: {
+            items: [
+                {
+                    id: '1',
+                    title: `Section 1`,
+                    children: _jsx(AccordionContent, {}),
+                },
+                { id: '2', title: 'Section 2', disabled: true, isOpen: true, children: _jsx(AccordionContent, {}) },
+                { id: '3', title: 'Section 3', children: _jsx(AccordionContent, {}) },
+            ],
+        },
+    },
+];
+export const AccordionExample = () => ({
+    containerStyle: { minHeight: 225 },
+    defaultState: {
+        items: [
+            {
+                id: '1',
+                title: `Section 1`,
+                children: _jsx(AccordionContent, {}),
+            },
+            {
+                id: '2',
+                title: 'Section 2',
+                children: _jsx(AccordionContent, {}),
+                leading: _jsx(Avatar, { name: "Avatar", size: "small" }),
+                trailing: _jsx("span", { children: "Trailing" }),
+            },
+            {
+                id: '3',
+                title: 'Section 3',
+                children: _jsx(AccordionContent, {}),
+            },
+        ],
+    },
+    presets,
+    variants: false,
+});
+//# sourceMappingURL=AccordionExample.js.map

package/dist/components/Accordion/AccordionExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionExample.js","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC3B,0JAGI,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA6B;IAC7C;QACI,KAAK,EAAE,mBAAmB;QAC1B,SAAS,EAAE;YACP,KAAK,EAAE;gBACH;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;iBACjC;gBACD;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;oBAC9B,OAAO,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAG;oBAC9C,QAAQ,EAAE,sCAAqB;iBAClC;gBACD;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;iBACjC;aACJ;SACJ;KACJ;IACD;QACI,KAAK,EAAE,mCAAmC;QAC1C,SAAS,EAAE;YACP,KAAK,EAAE;gBACH;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;iBACjC;gBACD,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;gBAC/E,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;aAClE;SACJ;KACJ;IACD;QACI,KAAK,EAAE,4CAA4C;QACnD,SAAS,EAAE;YACP,KAAK,EAAE;gBACH;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;iBACjC;gBACD,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;gBAC7F,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;aAClE;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAuC,GAAG,EAAE,CAAC,CAAC;IACvE,cAAc,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE;IAClC,YAAY,EAAE;QACV,KAAK,EAAE;YACH;gBACI,EAAE,EAAE,GAAG;gBACP,KAAK,EAAE,WAAW;gBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;aACjC;YACD;gBACI,EAAE,EAAE,GAAG;gBACP,KAAK,EAAE,WAAW;gBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;gBAC9B,OAAO,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAG;gBAC9C,QAAQ,EAAE,sCAAqB;aAClC;YACD;gBACI,EAAE,EAAE,GAAG;gBACP,KAAK,EAAE,WAAW;gBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;aACjC;SACJ;KACJ;IACD,OAAO;IACP,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC"}

package/dist/components/Accordion/accordion.css

@@ -0,0 +1,77 @@
+[data-bspk=accordion] {
+  width: 100%;
+  padding: var(--spacing-sizing-02);
+}
+[data-bspk=accordion] > section {
+  --border-bottom-color: var(--stroke-neutral-base);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--foreground-neutral-on-surface);
+}
+[data-bspk=accordion] > section[data-disabled] {
+  --border-bottom-color: var(--stroke-neutral-disabled-light);
+  background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=accordion] > section button[data-header] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0 var(--spacing-sizing-02);
+  gap: var(--spacing-sizing-02);
+  font: inherit;
+  cursor: pointer;
+  outline: none;
+  min-height: var(--spacing-sizing-12);
+}
+[data-bspk=accordion] > section button[data-header] [data-title-subtitle] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+}
+[data-bspk=accordion] > section button[data-header] [data-title-subtitle] [data-title] {
+  font: var(--labels-base);
+}
+[data-bspk=accordion] > section button[data-header] [data-title-subtitle] [data-subtitle] {
+  font: var(--body-x-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+}
+[data-bspk=accordion] > section button[data-header] [data-arrow] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--spacing-sizing-02);
+}
+[data-bspk=accordion] > section button[data-header]:not(:disabled):hover {
+  background-image: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=accordion] > section button[data-header]:not(:disabled):active {
+  background-image: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=accordion] > section button[data-header]:disabled {
+  cursor: not-allowed;
+  color: var(--foreground-neutral-disabled-on-surface);
+  border-color: var(--stroke-neutral-disabled-light);
+}
+[data-bspk=accordion] > section:has(:focus-visible) {
+  outline: 2px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+  margin-bottom: 1px;
+}
+[data-bspk=accordion] > section [data-content] {
+  padding: var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04);
+}
+[data-bspk=accordion] [data-divider] {
+  display: block;
+  height: 1px;
+  width: calc(100% - var(--spacing-sizing-04));
+  margin: -1px var(--spacing-sizing-02) 0;
+  background-color: var(--border-bottom-color);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */