@bspk/ui 1.1.34 → 1.2.0

package/dist/components/Combobox/ListItems.d.ts

@@ -0,0 +1,26 @@
+type Item = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    trailing?: React.ReactNode;
+};
+export type ListItemsProps<I extends Item> = {
+    /** Whether the listbox allows multiple selections. */
+    isMulti?: boolean;
+    /** The items to display in the listbox. */
+    items?: I[];
+    /** The index of the currently active item. */
+    activeIndex?: number;
+    /** The values that are currently selected. */
+    selectedValues?: string[];
+    /** Callback function when the selected values change. */
+    onChange?: (nextSelectedValues: string[], event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** The label for the "Select All" option. */
+    selectAll?: string | false;
+    /** The ID of the menu for accessibility purposes. */
+    menuId?: string;
+    /** Whether all items are selected in a multi-select scenario. */
+    allSelected?: boolean;
+};
+export declare function ListItems<I extends Item>({ isMulti, items, activeIndex, selectedValues, onChange, selectAll, menuId, allSelected, }: ListItemsProps<I>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Combobox/ListItems.js

@@ -0,0 +1,22 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from '../Checkbox';
+import { ListItem } from '../ListItem';
+export function ListItems({ isMulti = false, items = [], activeIndex, selectedValues = [], onChange, selectAll = false, menuId = '', allSelected = false, }) {
+    const multiSelectValue = (selected, itemValue) => {
+        return selected ? selectedValues.filter((value) => value !== itemValue) : [...selectedValues, itemValue];
+    };
+    return (_jsxs(_Fragment, { children: [isMulti && selectAll && (_jsx(ListItem, { as: "label", "data-selected": allSelected || undefined, label: selectAll, onClick: (event) => {
+                    onChange?.(allSelected ? [] : items.map((item) => item.value), event);
+                }, tabIndex: -1, trailing: _jsx(Checkbox, { "aria-label": selectAll, checked: !!allSelected, indeterminate: !allSelected && selectedValues.length > 0, name: "", onChange: (checked) => {
+                        onChange?.(checked ? items.map((item) => item.value) : []);
+                    }, value: "" }) }, "select-all")), items.map((item, index) => {
+                const selected = Boolean(Array.isArray(selectedValues) && selectedValues.includes(item.value));
+                return (_createElement(ListItem, { ...item, active: activeIndex === index || undefined, "aria-disabled": item.disabled || undefined, "aria-selected": selected || undefined, as: isMulti ? 'label' : 'button', disabled: item.disabled || undefined, id: `${menuId}-item-${index}`, key: `${menuId}-item-${index}`, label: item.label, onClick: (event) => {
+                        onChange?.(isMulti ? multiSelectValue(selected, item.value) : [item.value], event);
+                    }, tabIndex: -1, trailing: isMulti ? (_jsx(Checkbox, { "aria-label": item.label, checked: selected, name: item.value, onChange: (checked) => {
+                            onChange?.(multiSelectValue(checked, item.value));
+                        }, value: item.value })) : (item.trailing || undefined) }));
+            })] }));
+}
+//# sourceMappingURL=ListItems.js.map

package/dist/components/Combobox/ListItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItems.js","sourceRoot":"","sources":["../../../src/components/Combobox/ListItems.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AA4BjD,MAAM,UAAU,SAAS,CAAiB,EACtC,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,EAAE,EACV,WAAW,EACX,cAAc,GAAG,EAAE,EACnB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,EAAE,EACX,WAAW,GAAG,KAAK,GACH;IAChB,MAAM,gBAAgB,GAAG,CAAC,QAAiB,EAAE,SAAiB,EAAE,EAAE;QAC9D,OAAO,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,SAAS,CAAC,CAAC;IAC7G,CAAC,CAAC;IAEF,OAAO,CACH,8BACK,OAAO,IAAI,SAAS,IAAI,CACrB,KAAC,QAAQ,IACL,EAAE,EAAC,OAAO,mBACK,WAAW,IAAI,SAAS,EAEvC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,CAAC,KAAgD,EAAE,EAAE;oBAC1D,QAAQ,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;gBAC1E,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,EACZ,QAAQ,EACJ,KAAC,QAAQ,kBACO,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,WAAW,EACtB,aAAa,EAAE,CAAC,WAAW,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EACxD,IAAI,EAAC,EAAE,EACP,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;wBAClB,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;oBAC/D,CAAC,EACD,KAAK,EAAC,EAAE,GACV,IAhBF,YAAY,CAkBlB,CACL,EACA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACvB,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC/F,OAAO,CACH,eAAC,QAAQ,OACD,IAAI,EACR,MAAM,EAAE,WAAW,KAAK,KAAK,IAAI,SAAS,mBAC3B,IAAI,CAAC,QAAQ,IAAI,SAAS,mBAC1B,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAE,GAAG,MAAM,SAAS,KAAK,EAAE,EAC7B,GAAG,EAAE,GAAG,MAAM,SAAS,KAAK,EAAE,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,KAAsD,EAAE,EAAE;wBAChE,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;oBACvF,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,EACZ,QAAQ,EACJ,OAAO,CAAC,CAAC,CAAC,CACN,KAAC,QAAQ,kBACO,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;4BAClB,QAAQ,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;wBACtD,CAAC,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,GACnB,CACL,CAAC,CAAC,CAAC,CACA,IAAI,CAAC,QAAQ,IAAI,SAAS,CAC7B,GAEP,CACL,CAAC;YACN,CAAC,CAAC,IACH,CACN,CAAC;AACN,CAAC"}

package/dist/components/Dialog/Dialog.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
-import { CommonProps, ElementProps, SetRef } from '../../index.js';
+import { PortalProps } from '-/components/Portal';
+import { CommonProps, ElementProps, SetRef } from '-/types/common';
 import './dialog.scss';
-export type DialogProps = CommonProps<'data-bspk-owner' | 'id'> & {
+export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'container'> & {
     /** The content of the dialog. */
     children?: ReactNode;
     /** A ref to the dialog element. */
@@ -9,9 +10,6 @@ export type DialogProps = CommonProps<'data-bspk-owner' | 'id'> & {
     /**
      * If the dialog should appear.
      *
-     * @example
-     *     false;
-     *
      * @default false
      */
     open?: boolean;
@@ -61,9 +59,5 @@ export type DialogProps = CommonProps<'data-bspk-owner' | 'id'> & {
  * @name Dialog
  * @phase Utility
  */
-declare function Dialog({ children, innerRef, onClose, open, placement, showScrim, id: idProp, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("react/jsx-runtime").JSX.Element;
-declare namespace Dialog {
-    var bspkName: string;
-}
-export { Dialog };
+export declare function Dialog({ children, innerRef, onClose, open, placement, showScrim, id: idProp, owner, container, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Dialog/Dialog.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FocusTrap } from 'focus-trap-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { Portal } from '../Portal';
 import { Scrim } from '../Scrim';
 import { useId } from '../../hooks/useId';
-import { useOutsideClick } from '../../hooks/useOutsideClick';
 import './dialog.css.js';
 /**
  * Dialogs display important information that users need to acknowledge. They appear over the interface and block
@@ -32,59 +31,23 @@ import './dialog.css.js';
  * @name Dialog
  * @phase Utility
  */
-function Dialog({ 
-//
-children, innerRef, onClose, open, placement = 'center', showScrim = true, id: idProp, ...containerProps }) {
+export function Dialog({ children, innerRef, onClose, open = false, placement = 'center', showScrim = true, id: idProp, owner, container, ...containerProps }) {
     const id = useId(idProp);
     const boxRef = useRef(null);
-    const [visibility, setVisibilityState] = useState(open ? 'show' : 'hidden');
-    const prevVisibility = useRef(visibility);
-    const setVisibility = useCallback((next) => {
-        setVisibilityState((prev) => {
-            prevVisibility.current = prev;
-            return next;
-        });
-    }, []);
     const handleKeyDown = useCallback((e) => e.key === 'Escape' && onClose(), [onClose]);
     useEffect(() => {
-        if (open) {
-            if (prevVisibility.current.startsWith('show'))
-                return;
-            setVisibility('showing');
-            return;
-        }
-        if (prevVisibility.current.startsWith('hid'))
-            return;
-        setVisibility('hiding');
-    }, [open, setVisibility]);
-    useEffect(() => {
-        if (prevVisibility.current === visibility)
-            return;
-        if (visibility === 'showing') {
-            document.body.style.overflow = 'hidden';
-            setTimeout(() => setVisibility('show'), 10);
-        }
-        if (visibility === 'hiding') {
-            document.body.style.overflow = '';
-            setTimeout(() => setVisibility('hidden'), 10);
-        }
-    }, [setVisibility, visibility]);
-    useEffect(() => {
-        if (visibility.startsWith('hid'))
-            return;
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [handleKeyDown, visibility]);
-    useOutsideClick([boxRef.current], onClose, !open);
-    return (visibility !== 'hidden' && (_jsxs(Portal, { children: [_jsx(Scrim, { "data-bspk-owner": "dialog", onClick: onClose, variant: "dialog", visible: showScrim !== false }), _jsx("div", { ...containerProps, "data-bspk": "dialog", "data-placement": placement, "data-visibility": visibility, id: id, ref: innerRef, role: "presentation", children: _jsx(FocusTrap, { focusTrapOptions: {
+        document.documentElement.style.overflow = open ? 'hidden' : '';
+        if (open)
+            document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [handleKeyDown, open]);
+    return (open && (_jsxs(Portal, { container: container, children: [_jsx("div", { ...containerProps, "data-bspk": "dialog", "data-bspk-owner": owner || undefined, "data-placement": placement, id: id, ref: innerRef, role: "presentation", children: _jsx(FocusTrap, { focusTrapOptions: {
                         fallbackFocus: () => boxRef.current,
                         clickOutsideDeactivates: true,
                     }, children: _jsx("div", { "data-dialog-box": true, ref: (node) => {
                             boxRef.current = node;
-                        }, tabIndex: -1, children: children }) }) })] })));
+                        }, tabIndex: -1, children: children }) }) }), _jsx(Scrim, { onClick: () => {
+                    onClose();
+                }, owner: "dialog", visible: showScrim !== false })] })));
 }
-Dialog.bspkName = 'Dialog';
-export { Dialog };
 //# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,OAAO,eAAe,CAAC;AAmCvB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,IAAI,EAChB,EAAE,EAAE,MAAM,EACV,KAAK,EACL,SAAS,EACT,GAAG,cAAc,EACc;IAC/B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpG,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,IAAI,IAAI;YAAE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC9D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,IAAI,IAAI,CACJ,MAAC,MAAM,IAAC,SAAS,EAAE,SAAS,aACxB,iBACQ,cAAc,eACR,QAAQ,qBACD,KAAK,IAAI,SAAS,oBACnB,SAAS,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,cAAc,YAEnB,KAAC,SAAS,IACN,gBAAgB,EAAE;wBACd,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;wBACpC,uBAAuB,EAAE,IAAI;qBAChC,YAED,uCAEI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;4BACV,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,YAEX,QAAQ,GACP,GACE,GACV,EACN,KAAC,KAAK,IACF,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,EAAE,CAAC;gBACd,CAAC,EACD,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,SAAS,KAAK,KAAK,GAC9B,IACG,CACZ,CACJ,CAAC;AACN,CAAC"}

package/dist/components/Dialog/DialogExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { DialogProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const DialogExample: ComponentExample<DialogProps>;

package/dist/components/Dialog/DialogExample.js

@@ -1,11 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '../Button';
 export const DialogExample = {
     render: ({ props, setState, Component }) => {
         const label = 'Open Dialog';
-        const { children, ...modalProps } = props;
-        return (_jsxs(_Fragment, { children: [_jsx(Button, { label: label, onClick: () => setState({ open: true }) }), _jsx(Component, { "data-example-component": true, id: "exampleId", ...modalProps, onClose: () => setState({ open: false }), children: children })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { label: label, onClick: () => setState({ open: true }) }), _jsx(Component, { "data-example-component": true, ...props, id: "exampleId", onClose: () => setState({ open: false }), children: _jsxs("div", { style: { padding: 'var(--spacing-sizing-04)' }, children: ["Hello, I am a (", props.placement, ") dialog!"] }) })] }));
     },
-    hideVariants: true,
+    variants: false,
 };
 //# sourceMappingURL=DialogExample.js.map

package/dist/components/Dialog/DialogExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogExample.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAK7C,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,aAAa,CAAC;QAE5B,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QAE1C,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,SAAS,oCAEN,EAAE,EAAC,WAAW,KACV,UAAU,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAEvC,QAAQ,GACD,IACb,CACN,CAAC;IACN,CAAC;IACD,YAAY,EAAE,IAAI;CACrB,CAAC"}
+{"version":3,"file":"DialogExample.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,aAAa,CAAC;QAC5B,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,SAAS,uCAA4B,KAAK,EAAE,EAAE,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAChG,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,0BAA0B,EAAE,gCAAkB,KAAK,CAAC,SAAS,iBAAgB,GAC5F,IACb,CACN,CAAC;IACN,CAAC;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC"}

package/dist/components/Dialog/dialog.css

@@ -1,18 +1,67 @@
 [data-bspk=dialog] {
+  --width: 600px;
   position: fixed;
   inset: 0;
   z-index: var(--z-index-dialog);
+  pointer-events: none;
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+@keyframes placement-left {
+  0% {
+    transform: translateX(-100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes placement-right {
+  0% {
+    transform: translateX(100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes placement-top {
+  0% {
+    transform: translateY(-100vh);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes placement-bottom {
+  0% {
+    transform: translateY(100vh);
+  }
+  100% {
+    transform: translateY(0);
+  }
 }
 [data-bspk=dialog] [data-dialog-box] {
+  pointer-events: all;
   text-align: start;
   position: relative;
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-lg);
   box-shadow: var(--drop-shadow-float);
   background: var(--surface-neutral-t1-base);
   color: var(--foreground-neutral-on-surface);
   max-height: calc(100vh - var(--spacing-sizing-24));
   z-index: 2;
   width: calc(100% - var(--spacing-sizing-08));
+  animation-name: var(--box-animation-name);
+  animation-duration: 0.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
 }
 [data-bspk=dialog] [data-dialog-box] > :first-of-type {
   margin-top: 0;
@@ -40,55 +89,41 @@
     width: 50%;
   }
 }
-[data-bspk=dialog] [data-dialog-backdrop] {
-  z-index: 1;
-  position: fixed;
-  inset: 0;
-  background-color: var(--background-scrim);
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-[data-bspk=dialog][data-visibility=show] [data-dialog-backdrop] {
-  opacity: 1;
-}
 [data-bspk=dialog][data-placement=center] {
+  --box-animation-name: fade-in;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 [data-bspk=dialog][data-placement=center] [data-dialog-box] {
-  transition: opacity 1s;
-  opacity: 0;
+  position: absolute;
 }
-[data-bspk=dialog][data-placement=center][data-visibility=show] [data-dialog-box] {
-  opacity: 1;
+[data-bspk=dialog][data-placement=bottom] {
+  --box-animation-name: placement-bottom;
 }
 [data-bspk=dialog][data-placement=bottom] [data-dialog-box] {
   position: absolute;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  width: 600px;
-  left: 50%;
+  width: var(--width);
+  left: calc(50% - var(--width) / 2);
   transform: translateX(-50%);
-  bottom: -100vh;
-  transition: bottom 0.3s;
-}
-[data-bspk=dialog][data-placement=bottom][data-visibility=show] [data-dialog-box] {
   bottom: 0;
 }
+[data-bspk=dialog][data-placement=top] {
+  --box-animation-name: placement-top;
+}
 [data-bspk=dialog][data-placement=top] [data-dialog-box] {
   position: absolute;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  width: 600px;
-  left: 50%;
-  transform: translateX(-50%);
-  top: -100vh;
-  transition: top 0.3s;
-}
-[data-bspk=dialog][data-placement=top][data-visibility=show] [data-dialog-box] {
+  width: var(--width);
+  left: calc(50% - var(--width) / 2);
   top: 0;
 }
+[data-bspk=dialog][data-placement=left] {
+  --box-animation-name: placement-left;
+}
 [data-bspk=dialog][data-placement=left] [data-dialog-box] {
   position: absolute;
   max-height: unset;
@@ -96,12 +131,11 @@
   height: 100vh;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  left: -100vw;
-  transition: left 0.3s;
-}
-[data-bspk=dialog][data-placement=left][data-visibility=show] [data-dialog-box] {
   left: 0;
 }
+[data-bspk=dialog][data-placement=right] {
+  --box-animation-name: placement-right;
+}
 [data-bspk=dialog][data-placement=right] [data-dialog-box] {
   position: absolute;
   max-height: unset;
@@ -109,10 +143,6 @@
   height: 100vh;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
-  right: -100vw;
-  transition: right 0.3s;
-}
-[data-bspk=dialog][data-placement=right][data-visibility=show] [data-dialog-box] {
   right: 0;
 }
 

package/dist/components/Dialog/dialog.css.js

@@ -2,20 +2,69 @@
 * Do not edit this file directly. */
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=dialog] {
+  --width: 600px;
   position: fixed;
   inset: 0;
   z-index: var(--z-index-dialog);
+  pointer-events: none;
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+@keyframes placement-left {
+  0% {
+    transform: translateX(-100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes placement-right {
+  0% {
+    transform: translateX(100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes placement-top {
+  0% {
+    transform: translateY(-100vh);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes placement-bottom {
+  0% {
+    transform: translateY(100vh);
+  }
+  100% {
+    transform: translateY(0);
+  }
 }
 [data-bspk=dialog] [data-dialog-box] {
+  pointer-events: all;
   text-align: start;
   position: relative;
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-lg);
   box-shadow: var(--drop-shadow-float);
   background: var(--surface-neutral-t1-base);
   color: var(--foreground-neutral-on-surface);
   max-height: calc(100vh - var(--spacing-sizing-24));
   z-index: 2;
   width: calc(100% - var(--spacing-sizing-08));
+  animation-name: var(--box-animation-name);
+  animation-duration: 0.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
 }
 [data-bspk=dialog] [data-dialog-box] > :first-of-type {
   margin-top: 0;
@@ -43,55 +92,41 @@ style.appendChild(document.createTextNode(`[data-bspk=dialog] {
     width: 50%;
   }
 }
-[data-bspk=dialog] [data-dialog-backdrop] {
-  z-index: 1;
-  position: fixed;
-  inset: 0;
-  background-color: var(--background-scrim);
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-[data-bspk=dialog][data-visibility=show] [data-dialog-backdrop] {
-  opacity: 1;
-}
 [data-bspk=dialog][data-placement=center] {
+  --box-animation-name: fade-in;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 [data-bspk=dialog][data-placement=center] [data-dialog-box] {
-  transition: opacity 1s;
-  opacity: 0;
+  position: absolute;
 }
-[data-bspk=dialog][data-placement=center][data-visibility=show] [data-dialog-box] {
-  opacity: 1;
+[data-bspk=dialog][data-placement=bottom] {
+  --box-animation-name: placement-bottom;
 }
 [data-bspk=dialog][data-placement=bottom] [data-dialog-box] {
   position: absolute;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  width: 600px;
-  left: 50%;
+  width: var(--width);
+  left: calc(50% - var(--width) / 2);
   transform: translateX(-50%);
-  bottom: -100vh;
-  transition: bottom 0.3s;
-}
-[data-bspk=dialog][data-placement=bottom][data-visibility=show] [data-dialog-box] {
   bottom: 0;
 }
+[data-bspk=dialog][data-placement=top] {
+  --box-animation-name: placement-top;
+}
 [data-bspk=dialog][data-placement=top] [data-dialog-box] {
   position: absolute;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  width: 600px;
-  left: 50%;
-  transform: translateX(-50%);
-  top: -100vh;
-  transition: top 0.3s;
-}
-[data-bspk=dialog][data-placement=top][data-visibility=show] [data-dialog-box] {
+  width: var(--width);
+  left: calc(50% - var(--width) / 2);
   top: 0;
 }
+[data-bspk=dialog][data-placement=left] {
+  --box-animation-name: placement-left;
+}
 [data-bspk=dialog][data-placement=left] [data-dialog-box] {
   position: absolute;
   max-height: unset;
@@ -99,12 +134,11 @@ style.appendChild(document.createTextNode(`[data-bspk=dialog] {
   height: 100vh;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  left: -100vw;
-  transition: left 0.3s;
-}
-[data-bspk=dialog][data-placement=left][data-visibility=show] [data-dialog-box] {
   left: 0;
 }
+[data-bspk=dialog][data-placement=right] {
+  --box-animation-name: placement-right;
+}
 [data-bspk=dialog][data-placement=right] [data-dialog-box] {
   position: absolute;
   max-height: unset;
@@ -112,14 +146,9 @@ style.appendChild(document.createTextNode(`[data-bspk=dialog] {
   height: 100vh;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
-  right: -100vw;
-  transition: right 0.3s;
-}
-[data-bspk=dialog][data-placement=right][data-visibility=show] [data-dialog-box] {
   right: 0;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/Divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import { ElementProps } from '../../index.js';
+import { ElementProps } from '-/types/common';
 import './divider.scss';
 export type DividerProps = {
     /**
@@ -48,11 +48,7 @@ export type DividerProps = {
  *     }
  *
  * @name Divider
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Divider({ padding, orientation, thickness, inset, ...props }: ElementProps<DividerProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Divider {
-    var bspkName: string;
-}
-export { Divider };
+export declare function Divider({ padding, orientation, thickness, inset, ...props }: ElementProps<DividerProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Divider/Divider.js

@@ -27,14 +27,12 @@ const insetToVariable = (insetProp) => {
  *     }
  *
  * @name Divider
- * @phase DesignReview
+ * @phase UXReview
  */
-function Divider({ padding = true, orientation = 'horizontal', thickness = 'light', inset = 0, ...props }) {
-    return (_jsx("div", { ...props, "aria-orientation": orientation, "data-bspk": "divider", "data-hide-padding": !padding || undefined, "data-orientation": orientation, "data-thickness": thickness, role: "separator", style: cssWithVars({
+export function Divider({ padding = true, orientation = 'horizontal', thickness = 'light', inset = 0, ...props }) {
+    return (_jsx("div", { ...props, "aria-hidden": true, "aria-orientation": orientation, "data-bspk": "divider", "data-hide-padding": !padding || undefined, "data-orientation": orientation, "data-thickness": thickness, role: "separator", style: cssWithVars({
             ...props.style,
             '--inset': insetToVariable(inset),
         }) }));
 }
-Divider.bspkName = 'Divider';
-export { Divider };
 //# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,gBAAgB,CAAC;AA+BxB,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,SAAS,OAAO,CAAC,EACb,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,sBACS,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,WAAW,CAAC;YACf,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACpC,CAAC,GACJ,CACL,CAAC;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAE7B,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AA+BxB,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,OAAO,CAAC,EACpB,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,2CAES,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,WAAW,CAAC;YACf,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACpC,CAAC,GACJ,CACL,CAAC;AACN,CAAC"}

package/dist/components/Divider/DividerExample.d.ts

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

package/dist/components/Divider/divider.css

@@ -16,19 +16,15 @@
 [data-bspk=divider][data-thickness=heavy] {
   --line-thickness: 2px;
   --padding: var(--spacing-sizing-04);
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
 }
 [data-bspk=divider], [data-bspk=divider][data-orientation=horizontal] {
-  width: unset;
-  min-height: unset;
-  height: var(--line-thickness);
+  min-height: var(--line-thickness);
   min-width: var(--length);
   margin: var(--padding) var(--inset);
 }
 [data-bspk=divider][data-orientation=vertical] {
-  height: unset;
-  min-width: unset;
-  width: var(--line-thickness);
+  min-width: var(--line-thickness);
   min-height: var(--length);
   margin: var(--inset) var(--padding);
 }

package/dist/components/Divider/divider.css.js

@@ -19,19 +19,15 @@ style.appendChild(document.createTextNode(`[data-bspk=divider] {
 [data-bspk=divider][data-thickness=heavy] {
   --line-thickness: 2px;
   --padding: var(--spacing-sizing-04);
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
 }
 [data-bspk=divider], [data-bspk=divider][data-orientation=horizontal] {
-  width: unset;
-  min-height: unset;
-  height: var(--line-thickness);
+  min-height: var(--line-thickness);
   min-width: var(--length);
   margin: var(--padding) var(--inset);
 }
 [data-bspk=divider][data-orientation=vertical] {
-  height: unset;
-  min-width: unset;
-  width: var(--line-thickness);
+  min-width: var(--line-thickness);
   min-height: var(--length);
   margin: var(--inset) var(--padding);
 }
@@ -42,4 +38,3 @@ style.appendChild(document.createTextNode(`[data-bspk=divider] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-