@pathscale/ui 1.2.1 → 1.2.2

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

@@ -1 +1 @@
-export { default, DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerContent, DrawerDialog, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, DrawerHandle, DrawerCloseTrigger, DrawerClose, type DrawerPlacement, type DrawerBackdropVariant, type DrawerRootProps, type DrawerTriggerProps, type DrawerBackdropProps, type DrawerContentProps, type DrawerDialogProps, type DrawerHeaderProps, type DrawerHeadingProps, type DrawerBodyProps, type DrawerFooterProps, type DrawerHandleProps, type DrawerCloseTriggerProps, type DrawerCloseProps, } from "./Drawer";
+export { default, DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerContent, DrawerDialog, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, DrawerHandle, DrawerCloseTrigger, DrawerClose, type DrawerPlacement, type DrawerSize, type DrawerBackdropVariant, type DrawerDialogSide, type DrawerScrollBehavior, type DrawerRootProps, type DrawerTriggerProps, type DrawerBackdropProps, type DrawerContentProps, type DrawerDialogProps, type DrawerHeaderProps, type DrawerHeadingProps, type DrawerBodyProps, type DrawerFooterProps, type DrawerHandleProps, type DrawerCloseTriggerProps, type DrawerCloseProps, } from "./Drawer";

package/dist/components/dropdown/Dropdown.classes.d.ts

@@ -0,0 +1,11 @@
+export declare const CLASSES: {
+    readonly base: "dropdown";
+    readonly slot: {
+        readonly trigger: "dropdown__trigger";
+        readonly popover: "dropdown__popover";
+        readonly menu: "dropdown__menu";
+        readonly item: "dropdown__item";
+        readonly group: "dropdown__group";
+        readonly separator: "dropdown__separator";
+    };
+};

package/dist/components/dropdown/Dropdown.classes.js

@@ -0,0 +1,12 @@
+const CLASSES = {
+    base: "dropdown",
+    slot: {
+        trigger: "dropdown__trigger",
+        popover: "dropdown__popover",
+        menu: "dropdown__menu",
+        item: "dropdown__item",
+        group: "dropdown__group",
+        separator: "dropdown__separator"
+    }
+};
+export { CLASSES };

package/dist/components/dropdown/Dropdown.css

@@ -15,7 +15,7 @@
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
-    border-radius: 1.5rem;
+    border-radius: 0.5rem;
     border: 1px solid transparent;
     padding: 0.5rem 0.875rem;
     font-size: 0.875rem;
@@ -71,24 +71,22 @@
   }
 
   .dropdown__popover {
-    position: absolute;
+    position: fixed;
     z-index: 80;
-    top: calc(100% + var(--dropdown-offset, 6px));
-    inset-inline-start: 0;
     min-width: min(13.75rem, calc(100vw - 2rem));
     max-width: min(48svw, calc(100vw - 2rem));
     max-height: min(24rem, 70vh);
     overflow-y: auto;
     overscroll-behavior: contain;
-    border-radius: 1.5rem;
-    border: 1px solid color-mix(in oklab, var(--color-base-content), transparent 90%);
+    border-radius: 0.75rem;
+    border: 1px solid color-mix(in oklab, var(--color-base-content), transparent 94%);
     background-color: var(--color-base-100);
     box-shadow:
-      0 24px 48px oklch(0% 0 0 / 0.2),
-      0 8px 18px oklch(0% 0 0 / 0.14);
+      0 4px 16px oklch(0% 0 0 / 0.08),
+      0 1px 4px oklch(0% 0 0 / 0.05);
     visibility: hidden;
     opacity: 0;
-    transform: translateY(-4px) scale(0.9);
+    transform: translateY(-4px) scale(0.96);
     transform-origin: top;
     pointer-events: none;
     will-change: opacity, transform;
@@ -101,13 +99,44 @@
   .dropdown__popover[data-open="true"] {
     visibility: visible;
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: scale(1);
     pointer-events: auto;
   }
 
-  .dropdown__popover[data-align="end"] {
-    inset-inline-start: auto;
-    inset-inline-end: 0;
+  .dropdown__popover[data-placement="top"] {
+    transform: translateY(4px) scale(0.96);
+    transform-origin: bottom;
+  }
+
+  .dropdown__popover[data-placement="top"][data-open="true"] {
+    transform: translateY(0) scale(1);
+  }
+
+  .dropdown__popover[data-placement="bottom"] {
+    transform: translateY(-4px) scale(0.96);
+    transform-origin: top;
+  }
+
+  .dropdown__popover[data-placement="bottom"][data-open="true"] {
+    transform: translateY(0) scale(1);
+  }
+
+  .dropdown__popover[data-placement="left"] {
+    transform: translateX(4px) scale(0.96);
+    transform-origin: right;
+  }
+
+  .dropdown__popover[data-placement="left"][data-open="true"] {
+    transform: translateX(0) scale(1);
+  }
+
+  .dropdown__popover[data-placement="right"] {
+    transform: translateX(-4px) scale(0.96);
+    transform-origin: left;
+  }
+
+  .dropdown__popover[data-placement="right"][data-open="true"] {
+    transform: translateX(0) scale(1);
   }
 
   .dropdown__menu {
@@ -117,7 +146,7 @@
     flex-direction: column;
     gap: 0.125rem;
     overflow: clip;
-    padding: 0.375rem;
+    padding: 0.25rem;
     outline: none;
   }
 
@@ -134,19 +163,18 @@
     width: 100%;
     align-items: center;
     justify-content: flex-start;
-    gap: 0.75rem;
+    gap: 0.625rem;
     border: 0;
-    border-radius: 1rem;
+    border-radius: 0.5rem;
     background: transparent;
     color: var(--color-base-content);
-    padding: 0.375rem 0.625rem;
+    padding: 0.5rem 0.75rem;
     text-align: start;
     font-size: 0.875rem;
-    line-height: 1.2;
+    line-height: 1.25;
     cursor: pointer;
     outline: none;
     transition:
-      transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
       background-color 150ms ease,
       color 120ms ease,
       opacity 120ms ease;
@@ -164,7 +192,6 @@
   }
 
   .dropdown__item:active:not(:disabled):not([data-disabled="true"]) {
-    transform: scale(0.98);
     background-color: var(--color-base-300);
   }
 

package/dist/components/dropdown/Dropdown.d.ts

@@ -1,11 +1,15 @@
 import "./Dropdown.css";
 import { type JSX } from "solid-js";
+import { type OverlayPlacement } from "../_shared/overlayPosition";
 type DropdownAlign = "start" | "end";
+type DropdownPlacement = OverlayPlacement;
 type DropdownRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & {
     children: JSX.Element;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    placement?: DropdownPlacement;
+    autoFlip?: boolean;
     disabled?: boolean;
     dataTheme?: string;
     className?: string;
@@ -15,6 +19,8 @@ type DropdownTriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement>;
 declare const DropdownTrigger: (props: DropdownTriggerProps) => JSX.Element;
 type DropdownMenuProps = JSX.HTMLAttributes<HTMLDivElement> & {
     align?: DropdownAlign;
+    placement?: DropdownPlacement;
+    autoFlip?: boolean;
     sideOffset?: number;
 };
 declare const DropdownMenu: (props: DropdownMenuProps) => JSX.Element;
@@ -35,4 +41,4 @@ declare const Dropdown: ((props: DropdownRootProps) => JSX.Element) & {
     Separator: (props: DropdownSeparatorProps) => JSX.Element;
 };
 export { Dropdown as default, Dropdown, DropdownRoot, DropdownTrigger, DropdownMenu, DropdownItem, DropdownGroup, DropdownSeparator, };
-export type { DropdownAlign, DropdownRootProps, DropdownTriggerProps, DropdownMenuProps, DropdownItemProps, DropdownGroupProps, DropdownSeparatorProps, };
+export type { DropdownAlign, DropdownPlacement, DropdownRootProps, DropdownTriggerProps, DropdownMenuProps, DropdownItemProps, DropdownGroupProps, DropdownSeparatorProps, };

package/dist/components/dropdown/Dropdown.js

@@ -2,7 +2,9 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Dropdown.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=dropdown__menu>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=dropdown__menu data-slot=dropdown-menu>");
+import * as __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__ from "../_shared/overlayPosition.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__ from "./Dropdown.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div>");
 const DropdownContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -24,6 +26,8 @@ const DropdownRoot = (props)=>{
         "open",
         "defaultOpen",
         "onOpenChange",
+        "placement",
+        "autoFlip",
         "disabled",
         "dataTheme",
         "className",
@@ -37,10 +41,13 @@ const DropdownRoot = (props)=>{
     const [focusedKey, setFocusedKey] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
     const [focusRequest, setFocusRequest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
     const [triggerRef, setTriggerRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
+    const [menuRef, setMenuRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
     const [rootRef, setRootRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
     const isControlled = ()=>void 0 !== local.open;
     const isDisabled = ()=>Boolean(local.disabled);
     const open = ()=>isControlled() ? Boolean(local.open) : internalOpen();
+    const placement = ()=>local.placement ?? "bottom";
+    const autoFlip = ()=>local.autoFlip ?? true;
     const setRootRef = (el)=>{
         setRootRefSignal(el);
         if ("function" == typeof local.ref) local.ref(el);
@@ -48,6 +55,9 @@ const DropdownRoot = (props)=>{
     const setTriggerRef = (el)=>{
         setTriggerRefSignal(el);
     };
+    const setMenuRef = (el)=>{
+        setMenuRefSignal(el);
+    };
     const getEnabledItems = ()=>items().filter((item)=>!item.disabled);
     const focusItem = (item)=>{
         if (!item) return;
@@ -113,9 +123,10 @@ const DropdownRoot = (props)=>{
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
         const handlePointerDown = (event)=>{
             if (!open()) return;
-            const root = rootRef();
-            if (!root) return;
-            if (root.contains(event.target)) return;
+            const target = event.target;
+            if (rootRef()?.contains(target)) return;
+            if (menuRef()?.contains(target)) return;
+            if (triggerRef()?.contains(target)) return;
             setOpen(false);
         };
         document.addEventListener("pointerdown", handlePointerDown);
@@ -129,6 +140,10 @@ const DropdownRoot = (props)=>{
             disabled: isDisabled,
             triggerId,
             menuId,
+            placement,
+            autoFlip,
+            triggerRef,
+            menuRef,
             focusedKey,
             setFocusedKey,
             setOpen,
@@ -139,15 +154,15 @@ const DropdownRoot = (props)=>{
             registerItem,
             unregisterItem,
             setTriggerRef,
+            setMenuRef,
             setRootRef
         },
         get children () {
             var _el$ = _tmpl$();
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRootRef, _el$);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                get ["class"] () {
-                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown", local.class, local.className);
-                },
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.base, local.class, local.className)
+                }), {
                 get ["data-theme"] () {
                     return local.dataTheme;
                 },
@@ -174,10 +189,9 @@ const DropdownTrigger = (props)=>{
     ]);
     if (!ctx) return (()=>{
         var _el$2 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__trigger", local.class);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.trigger, local.class)
+            }), {
             get type () {
                 return local.type ?? "button";
             }
@@ -240,10 +254,10 @@ const DropdownTrigger = (props)=>{
             },
             get type () {
                 return local.type ?? "button";
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__trigger", local.class);
-            },
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.trigger, local.class)
+            }), {
             "data-slot": "dropdown-trigger",
             "aria-haspopup": "menu",
             get ["aria-expanded"] () {
@@ -268,6 +282,8 @@ const DropdownMenu = (props)=>{
         "class",
         "children",
         "align",
+        "placement",
+        "autoFlip",
         "sideOffset",
         "onKeyDown",
         "style",
@@ -275,14 +291,24 @@ const DropdownMenu = (props)=>{
     ]);
     if (!ctx) return (()=>{
         var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__popover", local.class);
-            }
-        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.popover, local.class)
+            })), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.menu
+            })), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
         return _el$4;
     })();
+    const overlayPosition = (0, __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__.createOverlayPosition)({
+        open: ctx.open,
+        triggerRef: ctx.triggerRef,
+        overlayRef: ctx.menuRef,
+        placement: ()=>local.placement ?? ctx.placement(),
+        offset: ()=>local.sideOffset ?? 6,
+        autoFlip: ()=>local.autoFlip ?? ctx.autoFlip(),
+        align: ()=>"end" === local.align ? "end" : "start"
+    });
     const handleKeyDown = (event)=>{
         invokeEventHandler(local.onKeyDown, event);
         if (event.defaultPrevented) return;
@@ -317,42 +343,65 @@ const DropdownMenu = (props)=>{
         }
     };
     const menuStyle = ()=>{
-        if ("string" == typeof local.style) return `${local.style}; --dropdown-offset: ${local.sideOffset ?? 6}px;`;
+        const overlayStyle = overlayPosition.style();
+        if ("string" == typeof local.style) return [
+            local.style,
+            Object.entries(overlayStyle).map(([key, value])=>`${key}: ${String(value)}`).join("; ")
+        ].filter(Boolean).join("; ");
         return {
             ...local.style ?? {},
-            "--dropdown-offset": `${local.sideOffset ?? 6}px`
+            ...overlayStyle
         };
     };
-    return (()=>{
-        var _el$6 = _tmpl$4(), _el$7 = _el$6.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get id () {
-                return ctx.menuId;
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__popover", local.class);
-            },
-            get role () {
-                return local.role ?? "menu";
-            },
-            "data-slot": "dropdown-popover",
-            get ["data-open"] () {
-                return ctx.open() ? "true" : "false";
-            },
-            get ["data-align"] () {
-                return local.align ?? "start";
-            },
-            get ["aria-hidden"] () {
-                return ctx.open() ? "false" : "true";
-            },
-            get style () {
-                return menuStyle();
-            },
-            onKeyDown: handleKeyDown
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
-        return _el$6;
-    })();
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return ctx.open();
+        },
+        get children () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
+                get children () {
+                    var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild;
+                    var _ref$ = ctx.setMenuRef;
+                    "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$6) : ctx.setMenuRef = _el$6;
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                        get id () {
+                            return ctx.menuId;
+                        }
+                    }, ()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.popover, local.class)
+                        }), {
+                        get role () {
+                            return local.role ?? "menu";
+                        },
+                        "data-slot": "dropdown-popover",
+                        get ["data-open"] () {
+                            return ctx.open() ? "true" : "false";
+                        },
+                        get ["data-align"] () {
+                            return local.align ?? "start";
+                        },
+                        get ["data-placement"] () {
+                            return overlayPosition.placement();
+                        },
+                        get ["aria-hidden"] () {
+                            return ctx.open() ? "false" : "true";
+                        },
+                        get style () {
+                            return menuStyle();
+                        },
+                        onKeyDown: handleKeyDown
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.menu
+                        }), {
+                        "data-slot": "dropdown-menu"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+                    return _el$6;
+                }
+            });
+        }
+    });
 };
 const DropdownItem = (props)=>{
     const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DropdownContext);
@@ -414,10 +463,10 @@ const DropdownItem = (props)=>{
             },
             get role () {
                 return local.role ?? "menuitem";
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__item", local.class);
-            },
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.item, local.class)
+            }), {
             "data-slot": "menu-item",
             get ["data-disabled"] () {
                 return isDisabled() ? "true" : "false";
@@ -450,10 +499,10 @@ const DropdownGroup = (props)=>{
     return (()=>{
         var _el$9 = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            role: "group",
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__group", local.class);
-            },
+            role: "group"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.group, local.class)
+            }), {
             "data-slot": "dropdown-group"
         }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
@@ -467,10 +516,10 @@ const DropdownSeparator = (props)=>{
     return (()=>{
         var _el$0 = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            role: "separator",
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__separator", local.class);
-            },
+            role: "separator"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.separator, local.class)
+            }), {
             "data-slot": "separator",
             "aria-orientation": "horizontal"
         }), false, false);

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

@@ -1,2 +1,2 @@
 export { default, Dropdown } from "./Dropdown";
-export type { DropdownAlign, DropdownRootProps, DropdownTriggerProps, DropdownMenuProps, DropdownItemProps, DropdownGroupProps, DropdownSeparatorProps, } from "./Dropdown";
+export type { DropdownAlign, DropdownPlacement, DropdownRootProps, DropdownTriggerProps, DropdownMenuProps, DropdownItemProps, DropdownGroupProps, DropdownSeparatorProps, } from "./Dropdown";

package/dist/components/empty-state/EmptyState.classes.d.ts

@@ -0,0 +1,9 @@
+export declare const CLASSES: {
+    readonly base: "empty-state";
+    readonly slot: {
+        readonly icon: "empty-state__icon";
+        readonly title: "empty-state__title";
+        readonly description: "empty-state__description";
+        readonly actions: "empty-state__actions";
+    };
+};

package/dist/components/empty-state/EmptyState.classes.js

@@ -0,0 +1,10 @@
+const CLASSES = {
+    base: "empty-state",
+    slot: {
+        icon: "empty-state__icon",
+        title: "empty-state__title",
+        description: "empty-state__description",
+        actions: "empty-state__actions"
+    }
+};
+export { CLASSES };

package/dist/components/empty-state/EmptyState.js

@@ -2,6 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./EmptyState.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__EmptyState_classes_js_726ce366__ from "./EmptyState.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h3>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>");
 const EmptyStateRoot = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -14,10 +15,10 @@ const EmptyStateRoot = (props)=>{
     return (()=>{
         var _el$ = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            role: "status",
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("empty-state", local.class, local.className);
-            },
+            role: "status"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__EmptyState_classes_js_726ce366__.CLASSES.base, local.class, local.className)
+            }), {
             "data-slot": "empty-state",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -40,10 +41,9 @@ const EmptyStateIcon = (props)=>{
     ]);
     return (()=>{
         var _el$2 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("empty-state__icon", local.class, local.className);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__EmptyState_classes_js_726ce366__.CLASSES.slot.icon, local.class, local.className)
+            }), {
             "data-slot": "empty-state-icon",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -67,10 +67,9 @@ const EmptyStateTitle = (props)=>{
     ]);
     return (()=>{
         var _el$3 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("empty-state__title", local.class, local.className);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__EmptyState_classes_js_726ce366__.CLASSES.slot.title, local.class, local.className)
+            }), {
             "data-slot": "empty-state-title",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -93,10 +92,9 @@ const EmptyStateDescription = (props)=>{
     ]);
     return (()=>{
         var _el$4 = _tmpl$3();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("empty-state__description", local.class, local.className);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__EmptyState_classes_js_726ce366__.CLASSES.slot.description, local.class, local.className)
+            }), {
             "data-slot": "empty-state-description",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -119,10 +117,9 @@ const EmptyStateActions = (props)=>{
     ]);
     return (()=>{
         var _el$5 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("empty-state__actions", local.class, local.className);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__EmptyState_classes_js_726ce366__.CLASSES.slot.actions, local.class, local.className)
+            }), {
             "data-slot": "empty-state-actions",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -135,12 +132,12 @@ const EmptyStateActions = (props)=>{
         return _el$5;
     })();
 };
-const EmptyState_EmptyState = Object.assign(EmptyStateRoot, {
+const EmptyState = Object.assign(EmptyStateRoot, {
     Root: EmptyStateRoot,
     Icon: EmptyStateIcon,
     Title: EmptyStateTitle,
     Description: EmptyStateDescription,
     Actions: EmptyStateActions
 });
-const EmptyState = EmptyState_EmptyState;
-export { EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, EmptyStateTitle, EmptyState as default };
+const empty_state_EmptyState = EmptyState;
+export { EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, EmptyStateTitle, empty_state_EmptyState as default };

package/dist/components/error-message/ErrorMessage.classes.d.ts

@@ -0,0 +1,3 @@
+export declare const CLASSES: {
+    readonly base: "error-message";
+};

package/dist/components/error-message/ErrorMessage.classes.js

@@ -0,0 +1,4 @@
+const CLASSES = {
+    base: "error-message"
+};
+export { CLASSES };

package/dist/components/error-message/ErrorMessage.css

@@ -0,0 +1,20 @@
+@layer components {
+  .error-message {
+    height: auto;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    text-wrap: wrap;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    color: var(--color-danger);
+    transition:
+      opacity 150ms var(--ease-out),
+      height 350ms var(--ease-smooth);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .error-message {
+      transition: none;
+    }
+  }
+}