@pathscale/ui 0.0.161 → 0.0.163

package/dist/components/dropdown/Dropdown.js

@@ -0,0 +1,133 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./dropdown.css";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+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__DropdownDetails_js_6799984e__ from "./DropdownDetails.js";
+import * as __WEBPACK_EXTERNAL_MODULE__DropdownItem_js_59043e9f__ from "./DropdownItem.js";
+import * as __WEBPACK_EXTERNAL_MODULE__DropdownMenu_js_e90669e2__ from "./DropdownMenu.js";
+import * as __WEBPACK_EXTERNAL_MODULE__DropdownToggle_js_8f4ce6e3__ from "./DropdownToggle.js";
+import * as __WEBPACK_EXTERNAL_MODULE__dropdownContext_js_3e61b2e4__ from "./dropdownContext.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label tabindex=0>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const Dropdown = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "item",
+        "horizontal",
+        "vertical",
+        "end",
+        "hover",
+        "open",
+        "fullWidth",
+        "dataTheme",
+        "style",
+        "role",
+        "aria-label",
+        "aria-describedby",
+        "aria-expanded",
+        "aria-haspopup",
+        "aria-labelledby"
+    ]);
+    const dropdownCtx = (0, __WEBPACK_EXTERNAL_MODULE__dropdownContext_js_3e61b2e4__.useDropdown)(local.hover ? "hover" : "click");
+    const fallbackToggleId = `dropdown-toggle-${(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)()}`;
+    const fallbackMenuId = `dropdown-menu-${(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)()}`;
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const isOpen = local.open ?? dropdownCtx.open();
+        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "w-full": local.fullWidth,
+            "dropdown-left": "left" === local.horizontal,
+            "dropdown-right": "right" === local.horizontal,
+            "dropdown-top": "top" === local.vertical,
+            "dropdown-bottom": "bottom" === local.vertical,
+            "dropdown-end": local.end,
+            "dropdown-hover": local.hover,
+            "dropdown-open": isOpen
+        }));
+    });
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdownContext_js_3e61b2e4__.DropdownContext.Provider, {
+        value: dropdownCtx,
+        get children () {
+            var _el$ = _tmpl$2();
+            var _ref$ = dropdownCtx.ref;
+            "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : dropdownCtx.ref = _el$;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                get role () {
+                    return void 0 !== local.role ? local.role : local.item ? "combobox" : "listbox";
+                }
+            }, others, {
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get ["class"] () {
+                    return classes();
+                },
+                get style () {
+                    return local.style;
+                },
+                get onClick () {
+                    return dropdownCtx.toggle;
+                },
+                get onMouseEnter () {
+                    return dropdownCtx.onEnter;
+                },
+                get onMouseLeave () {
+                    return dropdownCtx.onLeave;
+                },
+                get ["aria-label"] () {
+                    return local["aria-label"];
+                },
+                get ["aria-describedby"] () {
+                    return local["aria-describedby"];
+                },
+                get ["aria-expanded"] () {
+                    return local["aria-expanded"] ?? dropdownCtx.open();
+                },
+                get ["aria-haspopup"] () {
+                    return true === local["aria-haspopup"] ? "true" : false === local["aria-haspopup"] ? "false" : local["aria-haspopup"] || (local.item ? "listbox" : "true");
+                },
+                get ["aria-labelledby"] () {
+                    return local["aria-labelledby"];
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return local.item;
+                },
+                get fallback () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>local.children);
+                },
+                get children () {
+                    return [
+                        (()=>{
+                            var _el$2 = _tmpl$();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "id", fallbackToggleId);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+                            return _el$2;
+                        })(),
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__DropdownMenu_js_e90669e2__["default"], {
+                            id: fallbackMenuId,
+                            "aria-labelledby": fallbackToggleId,
+                            role: "listbox",
+                            hideOverflow: false,
+                            get children () {
+                                return local.item;
+                            }
+                        })
+                    ];
+                }
+            }));
+            return _el$;
+        }
+    });
+};
+const dropdown_Dropdown = Object.assign(Dropdown, {
+    Details: __WEBPACK_EXTERNAL_MODULE__DropdownDetails_js_6799984e__["default"],
+    Toggle: __WEBPACK_EXTERNAL_MODULE__DropdownToggle_js_8f4ce6e3__["default"],
+    Menu: __WEBPACK_EXTERNAL_MODULE__DropdownMenu_js_e90669e2__["default"],
+    Item: __WEBPACK_EXTERNAL_MODULE__DropdownItem_js_59043e9f__["default"]
+});
+var __webpack_exports__DropdownContext = __WEBPACK_EXTERNAL_MODULE__dropdownContext_js_3e61b2e4__.DropdownContext;
+var __webpack_exports__classesFn = __WEBPACK_EXTERNAL_MODULE__dropdownContext_js_3e61b2e4__.classesFn;
+export { dropdown_Dropdown as default, __webpack_exports__DropdownContext as DropdownContext, __webpack_exports__classesFn as classesFn };

package/dist/components/dropdown/DropdownDetails.js

@@ -0,0 +1,44 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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__dropdownContext_js_3e61b2e4__ from "./dropdownContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__DropdownToggle_js_8f4ce6e3__ from "./DropdownToggle.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<details role=listbox>");
+const Details = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "className",
+        "horizontal",
+        "vertical",
+        "end",
+        "dataTheme",
+        "open"
+    ]);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE__dropdownContext_js_3e61b2e4__.classesFn)({
+            className: local.className,
+            horizontal: local.horizontal,
+            vertical: local.vertical,
+            end: local.end,
+            open: local.open
+        });
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(classes());
+            },
+            get open () {
+                return local.open;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const DropdownDetails = Object.assign(Details, {
+    Toggle: __WEBPACK_EXTERNAL_MODULE__DropdownToggle_js_8f4ce6e3__.Summary
+});
+export { DropdownDetails as default };

package/dist/components/dropdown/DropdownItem.js

@@ -0,0 +1,60 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE__dropdownContext_js_3e61b2e4__ from "./dropdownContext.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
+const DropdownItem = (props)=>{
+    const dropdownContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(__WEBPACK_EXTERNAL_MODULE__dropdownContext_js_3e61b2e4__.DropdownContext);
+    const defaultProps = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        closeOnClick: true
+    }, props);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(defaultProps, [
+        "anchor",
+        "children",
+        "id",
+        "aria-selected",
+        "role",
+        "closeOnClick"
+    ]);
+    const handleClick = (e)=>{
+        e.stopPropagation();
+        const originalOnClick = others.onClick;
+        if ("function" == typeof originalOnClick) originalOnClick(e);
+        if (dropdownContext && local.closeOnClick) dropdownContext.setOpen(false);
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.anchor);
+            return ()=>_c$() ? (()=>{
+                    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, {
+                        onClick: handleClick
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+                    return _el$2;
+                })() : (()=>{
+                    var _el$3 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                        onClick: handleClick,
+                        type: "button"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+                    return _el$3;
+                })();
+        })());
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = local.id, _v$2 = local.role ?? "menuitem", _v$3 = local["aria-selected"];
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "id", _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "role", _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-selected", _p$.a = _v$3);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+        });
+        return _el$;
+    })();
+};
+const dropdown_DropdownItem = DropdownItem;
+export { dropdown_DropdownItem as default };

package/dist/components/dropdown/DropdownMenu.js

@@ -0,0 +1,44 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__menu_index_js_49febd2e__ from "../menu/index.js";
+const DropdownMenu_DropdownMenu = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "id",
+        "hideOverflow",
+        "role",
+        "aria-labelledby"
+    ]);
+    const hideOverflowMemo = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.hideOverflow ?? true);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown-content p-2 shadow bg-base-100 overflow-y-auto flex-nowrap w-full rounded-box", (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "max-h-50": hideOverflowMemo()
+        }), local.class, local.className));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__menu_index_js_49febd2e__.Menu, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get id () {
+            return local.id;
+        },
+        get ["aria-labelledby"] () {
+            return local["aria-labelledby"];
+        },
+        tabIndex: 0,
+        get dataTheme () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        },
+        get role () {
+            return local.role ?? "menu";
+        }
+    }));
+};
+const DropdownMenu = DropdownMenu_DropdownMenu;
+export { DropdownMenu as default };

package/dist/components/dropdown/DropdownToggle.js

@@ -0,0 +1,92 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__ from "../button/Button.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label tabindex=0>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<summary>");
+const DropdownToggle = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "color",
+        "size",
+        "button",
+        "disabled",
+        "dataTheme",
+        "class",
+        "className",
+        "id",
+        "role",
+        "aria-haspopup",
+        "aria-expanded",
+        "aria-controls",
+        "aria-activedescendant"
+    ]);
+    const normalizeAriaHaspopup = (value)=>"boolean" == typeof value ? String(value) : value;
+    const commonAriaProps = {
+        id: local.id,
+        role: local.role,
+        "aria-haspopup": local["aria-haspopup"],
+        "aria-expanded": local["aria-expanded"],
+        "aria-controls": local["aria-controls"],
+        "aria-activedescendant": local["aria-activedescendant"]
+    };
+    const buttonAriaProps = {
+        ...commonAriaProps,
+        "aria-haspopup": normalizeAriaHaspopup(local["aria-haspopup"])
+    };
+    const wrapperClass = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.button ? void 0 : [
+            local.class,
+            local.className
+        ].filter(Boolean).join(" "));
+    const buttonClass = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.button ? [
+            local.class,
+            local.className
+        ].filter(Boolean).join(" ") : void 0);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, commonAriaProps, {
+            get ["class"] () {
+                return wrapperClass();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.button;
+            },
+            get fallback () {
+                return local.children;
+            },
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                    type: "button",
+                    get dataTheme () {
+                        return local.dataTheme;
+                    },
+                    get color () {
+                        return local.color;
+                    },
+                    get size () {
+                        return local.size;
+                    },
+                    get disabled () {
+                        return local.disabled;
+                    },
+                    get ["class"] () {
+                        return buttonClass();
+                    }
+                }, buttonAriaProps, {
+                    get children () {
+                        return local.children;
+                    }
+                }));
+            }
+        }));
+        return _el$;
+    })();
+};
+const Summary = (props)=>(()=>{
+        var _el$2 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, props, false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>props.children);
+        return _el$2;
+    })();
+const dropdown_DropdownToggle = DropdownToggle;
+export { Summary, dropdown_DropdownToggle as default };

package/dist/components/dropdown/dropdown.css

@@ -0,0 +1,253 @@
+@layer components {
+  .dropdown {
+      position: relative;
+      display: inline-block;
+      position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
+    }
+
+  .dropdown > *:not(:has(~ [class*="dropdown-content"])):focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .dropdown > *:not(:has(~ [class*="dropdown-content"])):focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .dropdown .dropdown-content {
+      position: absolute;
+    }
+
+  .dropdown.dropdown-close .dropdown-content,
+    .dropdown:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content,
+    .dropdown.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content {
+      display: none;
+      transform-origin: top;
+      opacity: 0%;
+      scale: 95%;
+    }
+
+  .dropdown[popover],
+    .dropdown .dropdown-content {
+      z-index: 999;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .dropdown[popover],
+    .dropdown .dropdown-content {
+      animation: dropdown 0.2s;
+      transition-property: opacity, scale, display;
+      transition-behavior: allow-discrete;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    }
+
+  @starting-style {
+    .dropdown[popover],
+    .dropdown .dropdown-content {
+      scale: 95%;
+      opacity: 0;
+    }
+    }
+
+  .dropdown:not(.dropdown-close).dropdown-open > [tabindex]:first-child,
+    .dropdown:not(.dropdown-close):not(.dropdown-hover):focus > [tabindex]:first-child,
+    .dropdown:not(.dropdown-close):focus-within > [tabindex]:first-child {
+      pointer-events: none;
+    }
+
+  .dropdown:not(.dropdown-close).dropdown-open .dropdown-content,
+    .dropdown:not(.dropdown-close):not(.dropdown-hover):focus .dropdown-content,
+    .dropdown:not(.dropdown-close):focus-within .dropdown-content {
+      opacity: 100%;
+      scale: 100%;
+    }
+
+  .dropdown:not(.dropdown-close).dropdown-hover:hover .dropdown-content {
+      opacity: 100%;
+      scale: 100%;
+    }
+
+  .dropdown:is(details) summary::-webkit-details-marker {
+      display: none;
+    }
+
+  .dropdown:where([popover]) {
+      background: #0000;
+    }
+
+  .dropdown[popover] {
+      position: fixed;
+      color: inherit;
+    }
+
+  @supports not (position-area: bottom) {
+    .dropdown[popover].dropdown-close,
+    .dropdown[popover].dropdown-open:not(:popover-open) {
+      display: none;
+      transform-origin: top;
+      opacity: 0%;
+      scale: 95%;
+    }
+    .dropdown[popover]::backdrop {
+      background-color: color-mix(in oklab, #000 30%, #0000);
+    }
+    }
+
+  .dropdown[popover].dropdown-close,
+    .dropdown[popover]:not(.dropdown-open, :popover-open) {
+      display: none;
+      transform-origin: top;
+      opacity: 0%;
+      scale: 95%;
+    }
+
+  .dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-bottom;
+    }
+
+  .dropdown-right .dropdown-content {
+      inset-inline-start: 100%;
+      top: calc(0.25rem * 0);
+      bottom: auto;
+      transform-origin: 0;
+    }
+
+  .dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-bottom;
+    }
+
+  .dropdown-left .dropdown-content {
+      inset-inline-end: 100%;
+      top: calc(0.25rem * 0);
+      bottom: auto;
+      transform-origin: 100%;
+    }
+
+  .dropdown-center {
+      --anchor-h: center;
+    }
+
+  .dropdown-center :where(.dropdown-content) {
+      inset-inline-end: calc(1/2 * 100%);
+      translate: 50% 0;
+    }
+
+  [dir="rtl"] .dropdown-center :where(.dropdown-content) {
+      translate: -50% 0;
+    }
+
+  .dropdown-center.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: center;
+    }
+
+  .dropdown-center.dropdown-left .dropdown-content {
+      top: auto;
+      bottom: calc(1/2 * 100%);
+      translate: 0 50%;
+    }
+
+  .dropdown-center.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: center;
+    }
+
+  .dropdown-center.dropdown-right .dropdown-content {
+      top: auto;
+      bottom: calc(1/2 * 100%);
+      translate: 0 50%;
+    }
+
+  .dropdown-end {
+      --anchor-h: span-left;
+    }
+
+  .dropdown-end :where(.dropdown-content) {
+      inset-inline-end: calc(0.25rem * 0);
+      translate: 0 0;
+    }
+
+  [dir="rtl"] .dropdown-end :where(.dropdown-content) {
+      translate: 0 0;
+    }
+
+  .dropdown-end.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-top;
+    }
+
+  .dropdown-end.dropdown-left .dropdown-content {
+      top: auto;
+      bottom: calc(0.25rem * 0);
+    }
+
+  .dropdown-end.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-top;
+    }
+
+  .dropdown-end.dropdown-right .dropdown-content {
+      top: auto;
+      bottom: calc(0.25rem * 0);
+    }
+
+  .dropdown-start {
+      --anchor-h: span-right;
+    }
+
+  .dropdown-start :where(.dropdown-content) {
+      inset-inline-end: auto;
+      translate: 0 0;
+    }
+
+  [dir="rtl"] .dropdown-start :where(.dropdown-content) {
+      translate: 0 0;
+    }
+
+  .dropdown-start.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-bottom;
+    }
+
+  .dropdown-start.dropdown-left .dropdown-content {
+      top: calc(0.25rem * 0);
+      bottom: auto;
+    }
+
+  .dropdown-start.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-bottom;
+    }
+
+  .dropdown-start.dropdown-right .dropdown-content {
+      top: calc(0.25rem * 0);
+      bottom: auto;
+    }
+
+  .dropdown-bottom {
+      --anchor-v: bottom;
+    }
+
+  .dropdown-bottom .dropdown-content {
+      top: 100%;
+      bottom: auto;
+      transform-origin: top;
+    }
+
+  .dropdown-top {
+      --anchor-v: top;
+    }
+
+  .dropdown-top .dropdown-content {
+      top: auto;
+      bottom: 100%;
+      transform-origin: bottom;
+    }
+}

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

@@ -7,3 +7,13 @@ export type DropdownContextType = {
     onLeave: () => void;
 };
 export declare function useDropdown(trigger: "click" | "hover", disabled?: boolean): DropdownContextType;
+export declare const DropdownContext: import("solid-js").Context<DropdownContextType | undefined>;
+export type ClassesFnProps = {
+    className?: string;
+    horizontal?: "left" | "right";
+    vertical?: "top" | "bottom";
+    end?: boolean;
+    hover?: boolean;
+    open?: boolean;
+};
+export declare const classesFn: ({ className, horizontal, vertical, end, hover, open, }: ClassesFnProps) => string;