@bspk/ui 1.1.34 → 1.3.0

package/dist/components/Card/Card.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import './card.scss';
+import { ReactNode } from 'react';
 export type CardProps = {
     /**
      * The content of the card.
@@ -7,18 +7,12 @@ export type CardProps = {
      * @required
      */
     children: ReactNode;
-    /**
-     * Determines if the padding should be hidden.
-     *
-     * @default true
-     */
-    showPadding?: boolean;
     /**
      * Determines how the card border will appear.
      *
      * @default elevated
      */
-    variant?: 'elevated' | 'filled' | 'outlined';
+    variant?: 'elevated' | 'outlined';
 };
 /**
  * Cards are often rectangular and contain various content, such as text, images, icons, multimedia, and interactive
@@ -40,11 +34,7 @@ export type CardProps = {
  *     }
  *
  * @name Card
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Card({ children, showPadding, variant }: CardProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Card {
-    var bspkName: string;
-}
-export { Card };
+export declare function Card({ children, variant }: CardProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Card/Card.js

@@ -20,11 +20,9 @@ import './card.css.js';
  *     }
  *
  * @name Card
- * @phase DesignReview
+ * @phase UXReview
  */
-function Card({ children, showPadding, variant = 'elevated' }) {
-    return (_jsx("div", { "data-bspk": "card", "data-hide-padding": showPadding === false || undefined, "data-variant": variant, children: children }));
+export function Card({ children, variant = 'elevated' }) {
+    return (_jsx("div", { "data-bspk": "card", "data-variant": variant, children: children }));
 }
-Card.bspkName = 'Card';
-export { Card };
 //# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,CAAC;AAuBrB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,GAAG,UAAU,EAAa;IACpE,OAAO,CACH,2BAAe,MAAM,uBAAoB,WAAW,KAAK,KAAK,IAAI,SAAS,kBAAgB,OAAO,YAC7F,QAAQ,GACP,CACT,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAkBrB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,UAAU,EAAa;IAC9D,OAAO,CACH,2BAAe,MAAM,kBAAe,OAAO,YACtC,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}

package/dist/components/Card/CardExample.d.ts

@@ -1,2 +1,2 @@
-import { ComponentExample } from '../../utils/demo';
+import { ComponentExample } from '-/utils/demo';
 export declare const CardExample: ComponentExample;

package/dist/components/Card/CardExample.js

@@ -5,6 +5,7 @@ export const CardExample = {
                 height: '200px',
                 width: '100%',
                 minWidth: '250px',
+                backgroundColor: 'unset',
             } }) })),
 };
 //# sourceMappingURL=CardExample.js.map

package/dist/components/Card/CardExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardExample.js","sourceRoot":"","sources":["../../../src/components/Card/CardExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,WAAW,GAAqB;IACzC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC9B,KAAC,SAAS,OAAK,KAAK,YAChB,KAAC,kBAAkB,IACf,KAAK,EAAE;gBACH,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,MAAM;gBACb,QAAQ,EAAE,OAAO;aACpB,GACH,GACM,CACf;CACJ,CAAC"}
+{"version":3,"file":"CardExample.js","sourceRoot":"","sources":["../../../src/components/Card/CardExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,WAAW,GAAqB;IACzC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC9B,KAAC,SAAS,OAAK,KAAK,YAChB,KAAC,kBAAkB,IACf,KAAK,EAAE;gBACH,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,MAAM;gBACb,QAAQ,EAAE,OAAO;gBACjB,eAAe,EAAE,OAAO;aAC3B,GACH,GACM,CACf;CACJ,CAAC"}

package/dist/components/Card/card.css

@@ -1,13 +1,9 @@
 [data-bspk=card] {
   display: block;
   background: var(--surface-neutral-t1-base);
-  padding: var(--spacing-sizing-03);
   border-radius: var(--radius-md);
   overflow: hidden;
 }
-[data-bspk=card][data-hide-padding] {
-  padding: 0;
-}
 [data-bspk=card][data-variant=outlined] {
   border: solid 1px var(--stroke-neutral-low);
 }

package/dist/components/Card/card.css.js

@@ -4,13 +4,9 @@ const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=card] {
   display: block;
   background: var(--surface-neutral-t1-base);
-  padding: var(--spacing-sizing-03);
   border-radius: var(--radius-md);
   overflow: hidden;
 }
-[data-bspk=card][data-hide-padding] {
-  padding: 0;
-}
 [data-bspk=card][data-variant=outlined] {
   border: solid 1px var(--stroke-neutral-low);
 }
@@ -21,4 +17,3 @@ style.appendChild(document.createTextNode(`[data-bspk=card] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/Carousel/Carousel.d.ts

@@ -0,0 +1,63 @@
+import './carousel.scss';
+import { CSSProperties, ReactNode } from 'react';
+export type CarouselProps = {
+    /**
+     * A label for the carousel for screen readers.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The content of the carousel.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The width of each item/child.
+     *
+     * If number is provided, it is treated as pixels.
+     *
+     * If string is provided, it is treated as a CSS width value (%, px, em, rem, etc).
+     *
+     * If a percentage (%) is provided, the item is sized based on the carousel container's width
+     *
+     * @default 80%
+     *
+     * @type string
+     */
+    itemWidth?: number | string;
+    /**
+     * The gap between items in pixels.
+     *
+     * @default 16
+     */
+    gap?: number;
+    /** Additional styles to apply to the carousel container. */
+    style?: CSSProperties;
+};
+/**
+ * A carousel component for displaying a horizontal list of items with navigation controls.
+ *
+ * @example
+ *     import { Carousel } from '@bspk/ui/Carousel';
+ *
+ *     function Example() {
+ *         return (
+ *             <Carousel label="Example Carousel" width="1/2">
+ *                 <div>child 1</div>
+ *                 <div>child 2</div>
+ *                 <div>child 3</div>
+ *                 <div>child 4</div>
+ *                 <div>child 5</div>
+ *                 <div>child 6</div>
+ *                 <div>child 7</div>
+ *             </Carousel>
+ *         );
+ *     }
+ *
+ * @name Carousel
+ * @phase UXReview
+ */
+export declare function Carousel({ label, children, itemWidth: widthProp, gap: gapProp, style, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './carousel.css.js';
+import { SvgChevronLeft } from '@bspk/icons/ChevronLeft';
+import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import { Children, useMemo, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { PageControl } from '../PageControl';
+import { useSwipe } from '../../hooks/useSwipe';
+import { cssWithVars } from '../../utils/cwv';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+/**
+ * A carousel component for displaying a horizontal list of items with navigation controls.
+ *
+ * @example
+ *     import { Carousel } from '@bspk/ui/Carousel';
+ *
+ *     function Example() {
+ *         return (
+ *             <Carousel label="Example Carousel" width="1/2">
+ *                 <div>child 1</div>
+ *                 <div>child 2</div>
+ *                 <div>child 3</div>
+ *                 <div>child 4</div>
+ *                 <div>child 5</div>
+ *                 <div>child 6</div>
+ *                 <div>child 7</div>
+ *             </Carousel>
+ *         );
+ *     }
+ *
+ * @name Carousel
+ * @phase UXReview
+ */
+export function Carousel({ label = 'carousel', children, itemWidth: widthProp = '80%', gap: gapProp, style, }) {
+    const gap = gapProp || 16;
+    const widthValue = typeof widthProp === 'number' ? `${widthProp}px` : widthProp;
+    const containerRef = useRef(null);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const { items, total } = useMemo(() => {
+        const nextItems = Children.toArray(children);
+        return {
+            items: nextItems,
+            total: nextItems.length,
+        };
+    }, [children]);
+    const setCurrent = (dir) => () => {
+        setCurrentIndex((prev) => {
+            const nextVal = Math.max(0, Math.min(total - 1, dir === 'next' ? prev + 1 : prev - 1));
+            const nextElement = containerRef.current?.children[nextVal];
+            nextElement?.focus();
+            nextElement?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+            return nextVal;
+        });
+    };
+    const swipeProps = useSwipe(setCurrent('next'), setCurrent('prev'));
+    return (_jsxs("div", { "aria-label": label, "aria-roledescription": "carousel", "data-bspk": "carousel", role: "region", style: cssWithVars({
+            ...style,
+            '--gap': gap ? `${gap}px` : 'var(--spacing-sizing-04)',
+            '--item-width': widthValue,
+        }), children: [_jsx("div", { "data-items-container": true, children: _jsx("div", { "data-items-track": true, ...swipeProps, onKeyDownCapture: handleKeyDown({
+                        ArrowLeft: setCurrent('prev'),
+                        ArrowRight: setCurrent('next'),
+                    }, {
+                        preventDefault: true,
+                        stopPropagation: true,
+                    }), ref: (node) => (containerRef.current = node), children: items.map((child, index) => (_jsx("div", { "aria-label": `Slide ${index + 1} of ${total}`, "aria-roledescription": "slide", "data-active": currentIndex === index || undefined, "data-item-wrapper": true, role: "tabpanel", tabIndex: currentIndex === index ? 0 : -1, children: child }, index))) }) }), _jsxs("div", { "data-controls": true, children: [_jsx(Button, { "aria-label": "Previous Slide", disabled: currentIndex === 0, icon: _jsx(SvgChevronLeft, { "aria-hidden": true }), iconOnly: true, label: "Previous", onClick: setCurrent('prev'), variant: "tertiary" }), _jsx(PageControl, { currentPage: currentIndex + 1, numPages: total }), _jsx(Button, { "aria-label": "Next Slide", disabled: currentIndex === total - 1, icon: _jsx(SvgChevronRight, { "aria-hidden": true }), iconOnly: true, label: "Next", onClick: setCurrent('next'), variant: "tertiary" })] }), _jsx("span", { "aria-live": "polite", "data-sr-only": true, children: `Slide ${currentIndex + 1} of ${total}` })] }));
+}
+//# sourceMappingURL=Carousel.js.map

package/dist/components/Carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAA4B,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAuCtD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,UAAU,QAAQ,CAAC,EACrB,KAAK,GAAG,UAAU,EAClB,QAAQ,EACR,SAAS,EAAE,SAAS,GAAG,KAAK,EAC5B,GAAG,EAAE,OAAO,EACZ,KAAK,GACO;IACZ,MAAM,GAAG,GAAG,OAAO,IAAI,EAAE,CAAC;IAC1B,MAAM,UAAU,GAAG,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhF,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEzD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAC7C,OAAO;YACH,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS,CAAC,MAAM;SAC1B,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,UAAU,GAAG,CAAC,GAAoB,EAAE,EAAE,CAAC,GAAG,EAAE;QAC9C,eAAe,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC;YACvF,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAA4B,CAAC;YACvF,WAAW,EAAE,KAAK,EAAE,CAAC;YACrB,WAAW,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;YACxF,OAAO,OAAO,CAAC;QACnB,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;IAEpE,OAAO,CACH,6BACgB,KAAK,0BACI,UAAU,eACrB,UAAU,EACpB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;YACf,GAAG,KAAK;YACR,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,0BAA0B;YACtD,cAAc,EAAE,UAAU;SAC7B,CAAC,aAEF,sDACI,2CAEQ,UAAU,EACd,gBAAgB,EAAE,aAAa,CAC3B;wBACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC;wBAC7B,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC;qBACjC,EACD;wBACI,cAAc,EAAE,IAAI;wBACpB,eAAe,EAAE,IAAI;qBACxB,CACJ,EACD,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,YAE3C,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,4BACgB,SAAS,KAAK,GAAG,CAAC,OAAO,KAAK,EAAE,0BACvB,OAAO,iBACf,YAAY,KAAK,KAAK,IAAI,SAAS,6BAGhD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAExC,KAAK,IAJD,KAAK,CAKR,CACT,CAAC,GACA,GACJ,EACN,iDACI,KAAC,MAAM,kBACQ,gBAAgB,EAC3B,QAAQ,EAAE,YAAY,KAAK,CAAC,EAC5B,IAAI,EAAE,KAAC,cAAc,0BAAe,EACpC,QAAQ,QACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,UAAU,CAAC,MAAM,CAAC,EAC3B,OAAO,EAAC,UAAU,GACpB,EACF,KAAC,WAAW,IAAC,WAAW,EAAE,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAI,EAC/D,KAAC,MAAM,kBACQ,YAAY,EACvB,QAAQ,EAAE,YAAY,KAAK,KAAK,GAAG,CAAC,EACpC,IAAI,EAAE,KAAC,eAAe,0BAAe,EACrC,QAAQ,QACR,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,UAAU,CAAC,MAAM,CAAC,EAC3B,OAAO,EAAC,UAAU,GACpB,IACA,EACN,4BAAgB,QAAQ,kCACnB,SAAS,YAAY,GAAG,CAAC,OAAO,KAAK,EAAE,GACrC,IACL,CACT,CAAC;AACN,CAAC"}

package/dist/components/Carousel/CarouselExample.d.ts

@@ -0,0 +1,5 @@
+import { CarouselProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
+export declare const CarouselExample: ComponentExampleFn<CarouselProps & {
+    slideCount: number;
+}>;

package/dist/components/Carousel/CarouselExample.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button';
+import { COLOR_VARIANTS } from '../../utils/colorVariants';
+function ExampleSlide({ number, onClick }) {
+    return (_jsxs("div", { "data-color": COLOR_VARIANTS[(number + 3) % COLOR_VARIANTS.length], style: {
+            backgroundColor: 'var(--background)',
+            color: 'var(--foreground)',
+            borderRadius: '8px',
+            minHeight: '180px',
+            padding: 20,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: ["Slide ", number, onClick && (_jsx(Button, { label: "Click me", onClick: () => onClick(`Slide ${number} clicked`), variant: "tertiary" }))] }));
+}
+export const CarouselExample = ({ action }) => {
+    return {
+        containerStyle: { width: '100%', padding: '16px', overflow: 'hidden' },
+        render: ({ props, Component }) => (_jsx(Component, { ...props, children: Array.from({ length: props.slideCount || 7 }, (_, i) => i + 1).map((num) => (_jsx(ExampleSlide, { number: num, onClick: action }, num))) })),
+        sections: [],
+        variants: false,
+        presets: [
+            {
+                label: 'Mobile',
+                propState: { style: { width: '375px' }, slideCount: 7, itemWidth: '90%' },
+            },
+            {
+                label: '300px Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '300px' },
+            },
+            {
+                label: 'Full Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '100%' },
+            },
+            {
+                label: '3/4 Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '75%' },
+            },
+            {
+                label: '1/2 Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '50%' },
+            },
+            {
+                label: '1/4 Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '25%' },
+            },
+        ],
+    };
+};
+//# sourceMappingURL=CarouselExample.js.map

package/dist/components/Carousel/CarouselExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselExample.js","sourceRoot":"","sources":["../../../src/components/Carousel/CarouselExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,SAAS,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,EAA2D;IAC9F,OAAO,CACH,6BACgB,cAAc,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,EAChE,KAAK,EAAE;YACH,eAAe,EAAE,mBAAmB;YACpC,KAAK,EAAE,mBAAmB;YAC1B,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,OAAO;YAClB,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;SAC3B,uBAEM,MAAM,EACZ,OAAO,IAAI,CACR,KAAC,MAAM,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,MAAM,UAAU,CAAC,EAAE,OAAO,EAAC,UAAU,GAAG,CACpG,IACC,CACT,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAA+D,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACtG,OAAO;QACH,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE;QACtE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC9B,KAAC,SAAS,OAAK,KAAK,YACf,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACzE,KAAC,YAAY,IAAW,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,IAAjC,GAAG,CAAkC,CAC3D,CAAC,GACM,CACf;QACD,QAAQ,EAAE,EAAE;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE;YACL;gBACI,KAAK,EAAE,QAAQ;gBACf,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAEtE;aACJ;YACD;gBACI,KAAK,EAAE,aAAa;gBACpB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAEvE;aACJ;YACD;gBACI,KAAK,EAAE,YAAY;gBACnB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAEtE;aACJ;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAErE;aACJ;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAErE;aACJ;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAErE;aACJ;SACJ;KACJ,CAAC;AACN,CAAC,CAAC"}

package/dist/components/Carousel/carousel.css

@@ -0,0 +1,34 @@
+[data-bspk=carousel] {
+  /*! 
+  --gap: is set via inline style
+  --item-width: is set via inline style
+  */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  background: #fff;
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=carousel] [data-items-container] {
+  width: 100%;
+  overflow: hidden;
+}
+[data-bspk=carousel] [data-items-track] {
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+  min-width: 0;
+}
+[data-bspk=carousel] [data-item-wrapper] {
+  min-width: var(--item-width);
+  overflow: hidden;
+}
+[data-bspk=carousel] [data-controls] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sizing-02);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Carousel/carousel.css.js

@@ -0,0 +1,39 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=carousel] {
+  /*! 
+  --gap: is set via inline style
+  --item-width: is set via inline style
+  */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  background: #fff;
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=carousel] [data-items-container] {
+  width: 100%;
+  overflow: hidden;
+}
+[data-bspk=carousel] [data-items-track] {
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+  min-width: 0;
+}
+[data-bspk=carousel] [data-item-wrapper] {
+  min-width: var(--item-width);
+  overflow: hidden;
+}
+[data-bspk=carousel] [data-controls] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sizing-02);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

package/dist/components/Carousel/index.d.ts

@@ -0,0 +1 @@
+export * from './Carousel';

package/dist/components/Carousel/index.js

@@ -0,0 +1,2 @@
+export * from './Carousel';
+//# sourceMappingURL=index.js.map

package/dist/components/Carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Carousel/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,11 +1,13 @@
-import { ChangeEvent } from 'react';
-import { CommonProps, ElementProps, InvalidPropsLibrary } from '../../index.js';
 import './checkbox.scss';
-export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> & InvalidPropsLibrary & Required<CommonProps<'value'>> & {
+import { ChangeEvent } from 'react';
+import { CommonProps, ElementProps, FormFieldControlProps, RequiredCommonProps } from '-/types/common';
+export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> & FormFieldControlProps & RequiredCommonProps<'value'> & {
     /**
      * If the checkbox is partially checked or
      * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
      *
+     * This will override the `checked` prop.
+     *
      * @default false
      */
     indeterminate?: boolean;
@@ -51,11 +53,7 @@ export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> & In
  * @element
  *
  * @name Checkbox
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, errorMessage, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Checkbox {
-    var bspkName: string;
-}
-export { Checkbox };
+export declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
 import './checkbox.css.js';
+import { useEffect, useRef } from 'react';
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off. This is the base
  * element and if used directly you must wrap it with a label. This will more often be used in the CheckboxOption or
@@ -30,9 +30,9 @@ import './checkbox.css.js';
  * @element
  *
  * @name Checkbox
- * @phase DesignReview
+ * @phase UXReview
  */
-function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, errorMessage, ...props }) {
+export function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, ...props }) {
     const indeterminate = !!indeterminateProp;
     const checked = !!checkedProp && !indeterminate;
     const inputRef = useRef();
@@ -41,13 +41,11 @@ function Checkbox({ checked: checkedProp = false, indeterminate: indeterminatePr
             return;
         inputRef.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    return (_jsxs("span", { "data-bspk": "checkbox", children: [_jsx("input", { ...props, "aria-errormessage": errorMessage || undefined, "aria-invalid": invalid || undefined, checked: checked, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), ref: (node) => {
+    return (_jsxs("span", { "data-bspk": "checkbox", children: [_jsx("input", { ...props, "aria-describedby": props['aria-describedby'] || undefined, "aria-errormessage": props['aria-errormessage'] || undefined, "aria-invalid": invalid || undefined, checked: checked, "data-indeterminate": indeterminate || undefined, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), ref: (node) => {
                     if (!node)
                         return;
                     inputRef.current = node;
                     node.indeterminate = indeterminate;
-                }, type: "checkbox" }), _jsxs("span", { "aria-hidden": true, children: [_jsx("svg", { "data-checked": true, fill: "none", viewBox: "0 0 14 11", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z", fill: "currentColor" }) }), _jsx("svg", { "data-indeterminate": true, fill: "none", viewBox: "0 0 12 4", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z", fill: "currentColor" }) })] })] }));
+                }, type: "checkbox" }), _jsxs("span", { "aria-hidden": true, children: [checked && (_jsx("svg", { "data-checked": true, fill: "none", viewBox: "0 0 14 11", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z", fill: "currentColor" }) })), indeterminate && (_jsx("svg", { "data-indeterminate": true, fill: "none", viewBox: "0 0 12 4", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z", fill: "currentColor" }) }))] })] }));
 }
-Checkbox.bspkName = 'Checkbox';
-export { Checkbox };
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,iBAAiB,CAAC;AA0BzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,YAAY,EAEZ,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAEc,UAAU,aAEpB,mBACQ,KAAK,uBACU,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,IAAI,EAAC,UAAU,GACjB,EACF,gDACI,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,EACN,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,IACH,IACJ,CACV,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA6BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAEc,UAAU,aAEpB,mBACQ,KAAK,sBACS,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS,uBACrC,KAAK,CAAC,mBAAmB,CAAC,IAAI,SAAS,kBAC5C,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,wBACI,aAAa,IAAI,SAAS,EAC9C,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,IAAI,EAAC,UAAU,GACjB,EACF,gDACK,OAAO,IAAI,CACR,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,CACT,EACA,aAAa,IAAI,CACd,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,CACT,IACE,IACJ,CACV,CAAC;AACN,CAAC"}

package/dist/components/Checkbox/checkbox.css

@@ -35,42 +35,36 @@
 }
 [data-bspk=checkbox] span svg[data-checked] {
   width: 14px;
-  display: none;
 }
 [data-bspk=checkbox] span svg[data-indeterminate] {
   width: 12px;
-  display: none;
 }
-[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, :disabled):hover + span {
+[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, [disabled]):hover + span {
   background-color: var(--interactions-neutral-hover-opacity);
 }
-[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, :disabled):active + span {
+[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, [disabled]):active + span {
   background-color: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=checkbox] input[type=checkbox]:checked + span svg[data-checked],
-[data-bspk=checkbox] input[type=checkbox]:indeterminate + span svg[data-indeterminate] {
-  display: block;
-}
 [data-bspk=checkbox] input[type=checkbox]:checked + span,
 [data-bspk=checkbox] input[type=checkbox]:indeterminate + span {
   --stroke: var(--stroke-brand-primary);
   --background: var(--surface-brand-primary);
 }
-[data-bspk=checkbox] input[type=checkbox]:disabled {
-  pointer-events: none;
+[data-bspk=checkbox] input[type=checkbox][disabled] {
+  cursor: not-allowed;
 }
-[data-bspk=checkbox] input[type=checkbox]:disabled + span {
+[data-bspk=checkbox] input[type=checkbox][disabled] + span {
   --stroke: var(--stroke-neutral-interactions-disabled-light);
 }
-[data-bspk=checkbox] input[type=checkbox]:disabled:is(:checked, :indeterminate) + span {
+[data-bspk=checkbox] input[type=checkbox][disabled]:is(:checked, :indeterminate) + span {
   --stroke: transparent;
   --background: var(--interactions-disabled-opacity);
   --color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):checked + span, [data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):indeterminate + span {
+[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled]):checked + span, [data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled]):indeterminate + span {
   --background: var(--status-error);
 }
-[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled) + span {
+[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled]) + span {
   --stroke: var(--status-error);
 }
 

package/dist/components/Checkbox/checkbox.css.js

@@ -38,46 +38,39 @@ style.appendChild(document.createTextNode(`[data-bspk=checkbox] {
 }
 [data-bspk=checkbox] span svg[data-checked] {
   width: 14px;
-  display: none;
 }
 [data-bspk=checkbox] span svg[data-indeterminate] {
   width: 12px;
-  display: none;
 }
-[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, :disabled):hover + span {
+[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, [disabled]):hover + span {
   background-color: var(--interactions-neutral-hover-opacity);
 }
-[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, :disabled):active + span {
+[data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, [disabled]):active + span {
   background-color: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=checkbox] input[type=checkbox]:checked + span svg[data-checked],
-[data-bspk=checkbox] input[type=checkbox]:indeterminate + span svg[data-indeterminate] {
-  display: block;
-}
 [data-bspk=checkbox] input[type=checkbox]:checked + span,
 [data-bspk=checkbox] input[type=checkbox]:indeterminate + span {
   --stroke: var(--stroke-brand-primary);
   --background: var(--surface-brand-primary);
 }
-[data-bspk=checkbox] input[type=checkbox]:disabled {
-  pointer-events: none;
+[data-bspk=checkbox] input[type=checkbox][disabled] {
+  cursor: not-allowed;
 }
-[data-bspk=checkbox] input[type=checkbox]:disabled + span {
+[data-bspk=checkbox] input[type=checkbox][disabled] + span {
   --stroke: var(--stroke-neutral-interactions-disabled-light);
 }
-[data-bspk=checkbox] input[type=checkbox]:disabled:is(:checked, :indeterminate) + span {
+[data-bspk=checkbox] input[type=checkbox][disabled]:is(:checked, :indeterminate) + span {
   --stroke: transparent;
   --background: var(--interactions-disabled-opacity);
   --color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):checked + span, [data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):indeterminate + span {
+[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled]):checked + span, [data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled]):indeterminate + span {
   --background: var(--status-error);
 }
-[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled) + span {
+[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled]) + span {
   --stroke: var(--status-error);
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,7 +1,7 @@
-import { ElementProps, CommonProps } from '../../index.js';
-import { ToggleOptionProps } from '../ToggleOption';
-export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOnly'> & {
+import { ToggleOptionProps } from '-/components/ToggleOption';
+import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
+export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'disabled' | 'label'> & Required<CommonProps<'value'>>;
+export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOnly'> & FormFieldControlProps & {
     /**
      * The function to call when the checkboxes are changed.
      *
@@ -73,11 +73,7 @@ export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOn
  *     }
  *
  * @name CheckboxGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function CheckboxGroup({ onChange, options, name, values, selectAll, selectAllProps, disabled, readOnly, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace CheckboxGroup {
-    var bspkName: string;
-}
-export { CheckboxGroup };
+export declare function CheckboxGroup({ onChange, options, name, values, selectAll, selectAllProps, disabled: disabledGroup, readOnly, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */