@bspk/ui 1.2.0 → 1.3.1

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

@@ -49,7 +49,7 @@ async function main() {
 
     await exec(`rm -rf ${distPath} && mkdir -p ${distStylesPath}`);
 
-    await exec('npx 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(
@@ -146,7 +146,7 @@ function cssImportsInjected(fileContent: string) {
 }
 
 async function componentExports() {
-    const nextExports = { ...packageData['static-exports'] };
+    const nextExports: Record<string, string> = { ...packageData['static-exports'] };
 
     (await readDir(path.resolve('./dist/components'), { withFileTypes: true }))
         .filter((dirent) => dirent.isDirectory() && !dirent.name.startsWith('.'))

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

@@ -1,14 +1,53 @@
-import { AccordionSectionProps } from './AccordionSection';
 import './accordion.scss';
-export type AccordionItem = Omit<AccordionSectionProps, 'toggleOpen'>;
+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.
+     *
+     * This is ignored if the accordion section disabled property is true.
+     *
+     * @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<AccordionItem>
+     * @type Array<AccordionSection>
      * @required
      */
-    items: AccordionItem[];
+    items: AccordionSection[];
     /**
      * If true only one accordion section can be opened at a time
      *
@@ -30,5 +69,5 @@ export type AccordionProps = {
  * @name Accordion
  * @phase UXReview
  */
-export declare function Accordion({ items, singleOpen }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { useEffect, useState } from 'react';
-import { AccordionSection } from './AccordionSection';
+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.
@@ -17,26 +18,30 @@ import './accordion.css.js';
  * @name Accordion
  * @phase UXReview
  */
-export function Accordion({ items, singleOpen = true }) {
-    const [activeItems, setActiveItems] = useState(() => {
+export function Accordion({ items: itemsProp, singleOpen = true }) {
+    const items = useMemo(() => itemsProp.map((item) => ({
+        ...item,
+        id: item.id || `accordion-item-${randomString(8)}`,
+        isOpen: item.disabled ? false : item.isOpen || false,
+    })), [itemsProp]);
+    const [openSections, setOpenSections] = useState(() => {
         return items.filter((item) => item.isOpen).map((item) => item.id);
     });
     useEffect(() => {
-        // Update active items based on the items prop
-        setActiveItems(items.filter((item) => item.isOpen).map((item) => item.id));
+        // Update open sections based on the items prop
+        setOpenSections(items.filter((item) => item.isOpen).map((item) => item.id));
     }, [items]);
-    const toggleOpen = (itemId) => {
-        setActiveItems((prevItems) => {
-            const isItemActive = prevItems.includes(itemId);
-            // If singleOpen is true, reset activeItems to only include the clicked item or empty if it was already active
-            if (singleOpen)
-                return isItemActive ? [] : [itemId];
-            // If singleOpen is false, toggle the clicked item and keep others active
-            return isItemActive ? prevItems.filter((activeItemId) => activeItemId !== itemId) : [...prevItems, itemId];
-        });
-    };
-    return (_jsx("div", { "data-bspk": "accordion", children: items.map((item, index) => {
-            return (_createElement(AccordionSection, { ...item, isOpen: activeItems.includes(item.id), key: `${item.id}-${index}`, toggleOpen: () => toggleOpen(item.id) }, item.children));
+    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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAyB,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,kBAAkB,CAAC;AAoB1B;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,EAAkB;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAsB,GAAG,EAAE;QACrE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACX,8CAA8C;QAC9C,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,UAAU,GAAG,CAAC,MAAuB,EAAE,EAAE;QAC3C,cAAc,CAAC,CAAC,SAAS,EAAE,EAAE;YACzB,MAAM,YAAY,GAAG,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;YAEhD,8GAA8G;YAC9G,IAAI,UAAU;gBAAE,OAAO,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAEpD,yEAAyE;YACzE,OAAO,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,MAAM,CAAC,CAAC;QAC/G,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,OAAO,CACH,2BAAe,WAAW,YACrB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACvB,OAAO,CACH,eAAC,gBAAgB,OACT,IAAI,EACR,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACrC,GAAG,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,KAAK,EAAE,EAC1B,UAAU,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,IAEpC,IAAI,CAAC,QAAQ,CACC,CACtB,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC"}
+{"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

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

package/dist/components/Accordion/AccordionExample.js

@@ -1,72 +1,85 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { createExampleChildElement } from '../../utils/createExampleChildElement';
+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 AccordionExample = ({ action, setState }) => ({
-    containerStyle: { minHeight: 225 },
-    render: ({ props, Component, id, preset }) => {
-        const trailing = createExampleChildElement({
-            exampleState: props,
-            name: 'trailing',
-            setState,
-            action,
-            id,
-        });
-        const leading = createExampleChildElement({
-            exampleState: props,
-            name: 'leading',
-            setState,
-            action,
-            id,
-        });
-        return (_jsx(_Fragment, { children: _createElement(Component, { ...props, items: [
-                    {
-                        id: '1',
-                        title: `Section 1`,
-                        leading: leading.element,
-                        trailing: trailing.element,
-                        children: _jsx(AccordionContent, {}),
-                    },
-                    ...(props.items ?? []),
-                ], key: preset?.label }) }));
+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, {}),
+                },
+            ],
+        },
     },
-    presets: [
-        {
-            label: 'Multiple Sections',
-            propState: {
-                items: [
-                    {
-                        id: '2',
-                        title: 'Section 2',
-                        children: _jsx(AccordionContent, {}),
-                    },
-                    {
-                        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',
-            propState: {
-                items: [
-                    { 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, {}) },
+            ],
         },
-        {
-            label: 'Multiple Sections with 1 disabled and open',
-            propState: {
-                items: [
-                    { 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

@@ -1 +1 @@
-{"version":3,"file":"AccordionExample.js","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionExample.tsx"],"names":[],"mappings":";;AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC3B,0JAGI,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAuC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3F,cAAc,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE;IAClC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QACzC,MAAM,QAAQ,GAAG,yBAAyB,CAAC;YACvC,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,UAAU;YAChB,QAAQ;YACR,MAAM;YACN,EAAE;SACL,CAAC,CAAC;QACH,MAAM,OAAO,GAAG,yBAAyB,CAAC;YACtC,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,SAAS;YACf,QAAQ;YACR,MAAM;YACN,EAAE;SACL,CAAC,CAAC;QAEH,OAAO,CACH,4BACI,eAAC,SAAS,OACF,KAAK,EACT,KAAK,EAAE;oBACH;wBACI,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,WAAW;wBAClB,OAAO,EAAE,OAAO,CAAC,OAAO;wBACxB,QAAQ,EAAE,QAAQ,CAAC,OAAO;wBAC1B,QAAQ,EAAE,KAAC,gBAAgB,KAAG;qBACjC;oBACD,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;iBACzB,EACD,GAAG,EAAE,MAAM,EAAE,KAAK,GACpB,GACH,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH;wBACI,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,WAAW;wBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;qBACjC;oBACD;wBACI,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,WAAW;wBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;qBACjC;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,mCAAmC;YAC1C,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;oBAC/E,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;iBAClE;aACJ;SACJ;QACD;YACI,KAAK,EAAE,4CAA4C;YACnD,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;oBAC7F,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;iBAClE;aACJ;SACJ;KACJ;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC"}
+{"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

@@ -1,74 +1,77 @@
 [data-bspk=accordion] {
   width: 100%;
+  padding: var(--spacing-sizing-02);
 }
-[data-bspk=accordion] [data-accordion-section] {
+[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] [data-accordion-section][data-divider] [data-not-a-divider-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);
-}
-[data-bspk=accordion] [data-accordion-section][data-disabled] {
+[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] [data-accordion-section] [data-accordion-header] {
+[data-bspk=accordion] > section button[data-header] {
   display: flex;
   flex-direction: row;
   align-items: center;
   background: none;
   color: inherit;
   border: none;
-  padding: var(--spacing-sizing-02);
-  gap: var(--spacing-sizing-04);
+  padding: 0 var(--spacing-sizing-02);
+  gap: var(--spacing-sizing-02);
   font: inherit;
-  outline: inherit;
   cursor: pointer;
+  outline: none;
+  min-height: var(--spacing-sizing-12);
 }
-[data-bspk=accordion] [data-accordion-section] [data-accordion-header] [data-accordion-header-body] {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  flex: 1;
-  gap: var(--spacing-sizing-03);
-}
-[data-bspk=accordion] [data-accordion-section] [data-accordion-header] [data-accordion-title-wrapper] {
+[data-bspk=accordion] > section button[data-header] [data-title-subtitle] {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   flex: 1;
 }
-[data-bspk=accordion] [data-accordion-section] [data-accordion-header] [data-accordion-title-wrapper] [data-bspk=txt] {
-  text-align: left;
+[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] [data-accordion-section] [data-accordion-header]:not(:disabled):hover {
+[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] [data-accordion-section] [data-accordion-header]:not(:disabled):active {
+[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] [data-accordion-section] [data-accordion-header]:not(:disabled):focus-visible {
-  outline: 2px solid var(--stroke-neutral-focus);
-  border-color: var(--stroke-neutral-focus);
-  margin-bottom: 1px;
-}
-[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:disabled {
+[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] [data-accordion-section] [data-accordion-content] {
+[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-accordion-section] [data-not-a-divider-divider] {
-  display: none;
+[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 */