@bspk/ui 1.1.33 → 1.2.0

package/dist/components/Combobox/Combobox.js

@@ -1,8 +1,6 @@
-import { createElement as _createElement } from "react";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react/no-multi-comp */ import { useMemo } from 'react';
-import { Checkbox } from '../Checkbox';
-import { ListItem } from '../ListItem';
+import { useMemo } from 'react';
+import { ListItems } from './ListItems';
 import { Menu } from '../Menu';
 import { Modal } from '../Modal';
 import { useCombobox } from '../../hooks/useCombobox';
@@ -20,7 +18,7 @@ export const MAX_ITEM_COUNT = 10;
  * @name Combobox
  * @phase Utility
  */
-function Combobox({ itemDisplayCount, items = [], onChange, value: selectedValues = [], disabled, id: idProp, isMulti, selectAll: selectAllProp, children, invalid, readOnly, errorMessage, refWidth, offsetOptions = 4, header, description, ...props }) {
+export function Combobox({ itemDisplayCount, items = [], onChange, value: selectedValues = [], disabled, id: idProp, isMulti, selectAll: selectAllProp, children, readOnly, refWidth, offsetOptions = 4, description, owner, label, ...props }) {
     const menuId = useId(idProp);
     const { isMobile } = useUIContext();
     const { toggleProps, activeIndex, menuProps, closeMenu, isOpen, elements } = useCombobox({
@@ -28,9 +26,7 @@ function Combobox({ itemDisplayCount, items = [], onChange, value: selectedValue
         refWidth,
         placement: 'bottom-start',
         disabled,
-        invalid,
         readOnly,
-        errorMessage,
         offsetOptions,
     });
     const selectAll = useMemo(() => {
@@ -44,11 +40,11 @@ function Combobox({ itemDisplayCount, items = [], onChange, value: selectedValue
     if (!isOpen)
         return _jsx(_Fragment, { children: children({ toggleProps, setReference: elements.setReference }) });
     /* data-bspk="combobox" -- I don't need a wrapper here and this passes lint. :) */
-    return (_jsxs(_Fragment, { children: [children({ toggleProps, setReference: elements.setReference }), isMobile ? (_jsx(Modal, { "data-bspk-owner": props['data-bspk-owner'] || undefined, description: description, header: header, onClose: closeMenu, open: isOpen, children: _jsx(ListItems, { activeIndex: activeIndex, allSelected: allSelected, "data-testid": "listbox-items", isMulti: isMulti, items: items, menuId: menuId, onChange: (next) => {
-                        onChange(next);
-                        if (!isMulti)
-                            closeMenu();
-                    }, selectAll: selectAll, selectedValues: selectedValues }) })) : (_jsx(Menu, { "aria-multiselectable": isMulti || undefined, "data-bspk": "listbox", "data-disabled": disabled || undefined, "data-no-items": !items.length || undefined, id: menuId, innerRef: (node) => {
+    return (_jsxs(_Fragment, { children: [children({ toggleProps, setReference: elements.setReference }), isMobile ? (_jsx(Modal, { description: description, header: label, onClose: closeMenu, open: isOpen, owner: owner || undefined, children: _jsx("div", { "aria-multiselectable": isMulti || undefined, id: menuId, role: "listbox", style: { display: 'contents' }, children: _jsx(ListItems, { activeIndex: activeIndex, allSelected: allSelected, "data-testid": "listbox-items", isMulti: isMulti, items: items, menuId: menuId, onChange: (next) => {
+                            onChange(next);
+                            if (!isMulti)
+                                closeMenu();
+                        }, selectAll: selectAll, selectedValues: selectedValues }) }) })) : (_jsx(Menu, { "aria-multiselectable": isMulti || undefined, "data-bspk": "listbox", "data-disabled": disabled || undefined, "data-no-items": !items.length || undefined, id: menuId, innerRef: (node) => {
                     elements.setFloating(node);
                 }, itemCount: items.length, itemDisplayCount: itemDisplayCount, onOutsideClick: closeMenu, role: "listbox", style: cssWithVars({
                     ...props.style,
@@ -59,25 +55,4 @@ function Combobox({ itemDisplayCount, items = [], onChange, value: selectedValue
                             closeMenu();
                     }, selectAll: selectAll, selectedValues: selectedValues }) }))] }));
 }
-Combobox.bspkName = 'Combobox';
-export { Combobox };
-// ListItems component to render the items in the listbox or modal.
-// This is a separate component to keep the Combobox component clean and focused on its main functionality
-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, { "data-selected": allSelected || undefined, label: selectAll, onClick: (event) => {
-                    onChange?.(allSelected ? [] : items.map((item) => item.value), event);
-                }, role: "option", 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-posinset": index + 1, as: "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);
-                    }, role: "option", selected: selected || undefined, 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=Combobox.js.map

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

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

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":"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"}

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);
-