@vue-interface/dropdown-menu 2.0.0-beta.8 → 3.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Justin Kimbrell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,36 @@
+# Dropdown Menu
+
+The `dropdown-menu` component displays a list of actionable or informational items, similar to traditional dropdown lists. It supports headers, dividers, links, and plain text items.
+
+## Installation
+
+```bash
+pnpm i @vue-interface/dropdown-menu
+```
+
+```bash
+yarn add @vue-interface/dropdown-menu
+```
+
+```bash
+npm i @vue-interface/dropdown-menu
+```
+
+```bash
+bun i @vue-interface/dropdown-menu
+```
+
+## Basic Usage
+
+```html
+<div class="dropdown-menu show relative z-1">
+    <h3 class="dropdown-header">Vue Router</h3>
+    <a href="#" class="dropdown-item active">Item #2</a>
+    <a href="#" class="dropdown-item">Item #3</a>
+    <hr class="dropdown-divider" />
+    <a href="#" class="dropdown-item">Item #4</a>
+</div>
+```
+
+For more comprehensive documentation and examples, please visit the [online documentation](https://vue-interface.github.io/packages/dropdown-menu/).
+

package/dist/dropdown-menu.js

@@ -1,65 +1,50 @@
-import { h as a, Fragment as i, defineComponent as l, resolveComponent as c, openBlock as f, createElementBlock as m, normalizeClass as u, createVNode as w, withCtx as h, renderSlot as g } from "vue";
-function s(e, o) {
-  e.props.class = `${e.props.class || ""} ${o}`.trim();
+import { createElementBlock as o, openBlock as t, renderSlot as r, defineComponent as l, normalizeClass as i } from "vue";
+const d = (e, n) => {
+  const s = e.__vccOpts || e;
+  for (const [c, a] of n)
+    s[c] = a;
+  return s;
+}, _ = {}, f = { class: "dropdown-header" };
+function u(e, n) {
+  return t(), o("h3", f, [
+    r(e.$slots, "default")
+  ]);
 }
-function p(e) {
-  for (const o of e) {
-    o.type === i && p(o.children), o.props = Object.assign({ class: void 0 }, o.props), o.attrs = Object.assign({}, o.attrs), o.attrs.on || (o.attrs.on = {});
-    const t = o.props.class && o.props.class.match(/dropdown-item/), n = o.props.class && o.props.class.match(/dropdown-divider/);
-    typeof o.type == "string" && o.type.match(/^h\d$/) ? s(o, "dropdown-header") : o.type === "hr" && !n ? (o.type = "div", s(o, "dropdown-divider")) : !t && !n && s(o, "dropdown-item");
-  }
-  return e;
+const b = /* @__PURE__ */ d(_, [["render", u]]), m = {}, p = { class: "dropdown-item" };
+function h(e, n) {
+  return t(), o("div", p, [
+    r(e.$slots, "default")
+  ]);
 }
-const _ = (e, o) => a("div", {}, p(o.slots.default())), v = l({
-  name: "DropdownMenu",
-  components: {
-    DropdownMenuItems: _
-  },
+const y = /* @__PURE__ */ d(m, [["render", h]]), w = {}, $ = { class: "dropdown-item-text" };
+function g(e, n) {
+  return t(), o("div", $, [
+    r(e.$slots, "default")
+  ]);
+}
+const k = /* @__PURE__ */ d(w, [["render", g]]), v = ["aria-labelledby"], x = /* @__PURE__ */ l({
+  __name: "DropdownMenu",
   props: {
-    /**
-     * Display the dropdown menu aligned left or right
-     *
-     * @property String
-     */
-    align: {
-      type: String,
-      default: "left",
-      validate(e) {
-        return ["left", "right"].indexOf(e.toLowerCase()) !== -1;
-      }
-    },
-    /**
-     * The default visibility of the dropdown menu.
-     *
-     * @property Object
-     */
-    show: Boolean
+    align: { default: "left" },
+    show: { type: Boolean }
+  },
+  setup(e) {
+    return (n, s) => (t(), o("div", {
+      class: i(["dropdown-menu", {
+        "dropdown-menu-left": e.align === "left",
+        "dropdown-menu-right": e.align === "right",
+        show: e.show
+      }]),
+      "aria-labelledby": n.$attrs.id
+    }, [
+      r(n.$slots, "default")
+    ], 10, v));
   }
-}), y = (e, o) => {
-  const t = e.__vccOpts || e;
-  for (const [n, r] of o)
-    t[n] = r;
-  return t;
-}, $ = ["aria-labelledby"];
-function b(e, o, t, n, r, C) {
-  const d = c("dropdown-menu-items");
-  return f(), m("div", {
-    class: u(["dropdown-menu", {
-      "dropdown-menu-left": e.align === "left",
-      "dropdown-menu-right": e.align === "right",
-      show: e.show
-    }]),
-    "aria-labelledby": e.$attrs.id
-  }, [
-    w(d, null, {
-      default: h(() => [
-        g(e.$slots, "default")
-      ]),
-      _: 3
-    })
-  ], 10, $);
-}
-const M = /* @__PURE__ */ y(v, [["render", b]]);
+});
 export {
-  M as DropdownMenu
+  b as DropdownHeader,
+  y as DropdownItem,
+  k as DropdownItemText,
+  x as DropdownMenu
 };
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","sources":["../src/DropdownHeader.vue","../src/DropdownItem.vue","../src/DropdownItemText.vue","../src/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n\n</script>\n\n<template>\n    <h3 class=\"dropdown-header\">\n        <slot />\n    </h3>\n</template>","<script setup lang=\"ts\">\n\n</script>\n\n<template>\n    <div class=\"dropdown-item\">\n        <slot />\n    </div>\n</template>","<script setup lang=\"ts\">\n\n</script>\n\n<template>\n    <div class=\"dropdown-item-text\">\n        <slot />\n    </div>\n</template>","<script setup lang=\"ts\">\nexport type DropdownMenuProps = {\n    align?: 'left' | 'right',\n    show?: boolean\n};\n\nwithDefaults(defineProps<DropdownMenuProps>(), {\n    align: 'left'\n});\n</script>\n\n<template>\n    <div\n        class=\"dropdown-menu\"\n        :aria-labelledby=\"($attrs.id as string|undefined)\"\n        :class=\"{\n            'dropdown-menu-left': align === 'left',\n            'dropdown-menu-right': align === 'right',\n            'show': show\n        }\">\n        <slot />\n    </div>\n</template>"],"names":["_hoisted_1","_openBlock","_createElementBlock","_renderSlot","_ctx","__props","$attrs"],"mappings":";;;;;;WAKQA,IAAA,EAAA,OAAM,kBAAiB;;AAA3B,SAAAC,EAAA,GAAAC,EAEK,MAFLF,GAEK;AAAA,IADDG,EAAQC,EAAA,QAAA,SAAA;AAAA;;yDCDPJ,IAAA,EAAA,OAAM,gBAAe;;AAA1B,SAAAC,EAAA,GAAAC,EAEM,OAFNF,GAEM;AAAA,IADFG,EAAQC,EAAA,QAAA,SAAA;AAAA;;yDCDPJ,IAAA,EAAA,OAAM,qBAAoB;;AAA/B,SAAAC,EAAA,GAAAC,EAEM,OAFNF,GAEM;AAAA,IADFG,EAAQC,EAAA,QAAA,SAAA;AAAA;;;;;;;;;2BCMZF,EASM,OAAA;AAAA,MARF,UAAM,iBAAe;AAAA,8BAEuBG,EAAA,UAAK;AAAA,+BAAgDA,EAAA,UAAK;AAAA,cAAkCA,EAAA;AAAA,MAAA;MADvI,mBAAkBC,EAAAA,OAAO;AAAA,IAAA;MAM1BH,EAAQC,EAAA,QAAA,SAAA;AAAA,IAAA;;;"}

package/dist/dropdown-menu.umd.cjs

@@ -1 +1,2 @@
-(function(t,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(t=typeof globalThis<"u"?globalThis:t||self,n(t.DropdownMenu={},t.Vue))})(this,function(t,n){"use strict";function d(o,e){o.props.class=`${o.props.class||""} ${e}`.trim()}function p(o){for(const e of o){e.type===n.Fragment&&p(e.children),e.props=Object.assign({class:void 0},e.props),e.attrs=Object.assign({},e.attrs),e.attrs.on||(e.attrs.on={});const s=e.props.class&&e.props.class.match(/dropdown-item/),r=e.props.class&&e.props.class.match(/dropdown-divider/);typeof e.type=="string"&&e.type.match(/^h\d$/)?d(e,"dropdown-header"):e.type==="hr"&&!r?(e.type="div",d(e,"dropdown-divider")):!s&&!r&&d(e,"dropdown-item")}return o}const a=(o,e)=>n.h("div",{},p(e.slots.default())),l=n.defineComponent({name:"DropdownMenu",components:{DropdownMenuItems:a},props:{align:{type:String,default:"left",validate(o){return["left","right"].indexOf(o.toLowerCase())!==-1}},show:Boolean}}),c=(o,e)=>{const s=o.__vccOpts||o;for(const[r,i]of e)s[r]=i;return s},f=["aria-labelledby"];function u(o,e,s,r,i,h){const w=n.resolveComponent("dropdown-menu-items");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["dropdown-menu",{"dropdown-menu-left":o.align==="left","dropdown-menu-right":o.align==="right",show:o.show}]),"aria-labelledby":o.$attrs.id},[n.createVNode(w,null,{default:n.withCtx(()=>[n.renderSlot(o.$slots,"default")]),_:3})],10,f)}const m=c(l,[["render",u]]);t.DropdownMenu=m,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
+(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.DropdownMenu={},o.Vue))})(this,(function(o,e){"use strict";const r=(n,t)=>{const d=n.__vccOpts||n;for(const[B,D]of t)d[B]=D;return d},c={},s={class:"dropdown-header"};function l(n,t){return e.openBlock(),e.createElementBlock("h3",s,[e.renderSlot(n.$slots,"default")])}const i=r(c,[["render",l]]),a={},f={class:"dropdown-item"};function _(n,t){return e.openBlock(),e.createElementBlock("div",f,[e.renderSlot(n.$slots,"default")])}const p=r(a,[["render",_]]),m={},u={class:"dropdown-item-text"};function h(n,t){return e.openBlock(),e.createElementBlock("div",u,[e.renderSlot(n.$slots,"default")])}const w=r(m,[["render",h]]),$=["aria-labelledby"],k=e.defineComponent({__name:"DropdownMenu",props:{align:{default:"left"},show:{type:Boolean}},setup(n){return(t,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["dropdown-menu",{"dropdown-menu-left":n.align==="left","dropdown-menu-right":n.align==="right",show:n.show}]),"aria-labelledby":t.$attrs.id},[e.renderSlot(t.$slots,"default")],10,$))}});o.DropdownHeader=i,o.DropdownItem=p,o.DropdownItemText=w,o.DropdownMenu=k,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));
+//# sourceMappingURL=dropdown-menu.umd.cjs.map

package/dist/dropdown-menu.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.umd.cjs","sources":["../src/DropdownHeader.vue","../src/DropdownItem.vue","../src/DropdownItemText.vue","../src/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n\n</script>\n\n<template>\n    <h3 class=\"dropdown-header\">\n        <slot />\n    </h3>\n</template>","<script setup lang=\"ts\">\n\n</script>\n\n<template>\n    <div class=\"dropdown-item\">\n        <slot />\n    </div>\n</template>","<script setup lang=\"ts\">\n\n</script>\n\n<template>\n    <div class=\"dropdown-item-text\">\n        <slot />\n    </div>\n</template>","<script setup lang=\"ts\">\nexport type DropdownMenuProps = {\n    align?: 'left' | 'right',\n    show?: boolean\n};\n\nwithDefaults(defineProps<DropdownMenuProps>(), {\n    align: 'left'\n});\n</script>\n\n<template>\n    <div\n        class=\"dropdown-menu\"\n        :aria-labelledby=\"($attrs.id as string|undefined)\"\n        :class=\"{\n            'dropdown-menu-left': align === 'left',\n            'dropdown-menu-right': align === 'right',\n            'show': show\n        }\">\n        <slot />\n    </div>\n</template>"],"names":["_hoisted_1","_openBlock","_createElementBlock","_renderSlot","_ctx","__props","$attrs"],"mappings":"kVAKQA,EAAA,CAAA,MAAM,iBAAiB,kBAA3B,OAAAC,YAAA,EAAAC,qBAEK,KAFLF,EAEK,CADDG,aAAQC,EAAA,OAAA,SAAA,qCCDPJ,EAAA,CAAA,MAAM,eAAe,kBAA1B,OAAAC,YAAA,EAAAC,qBAEM,MAFNF,EAEM,CADFG,aAAQC,EAAA,OAAA,SAAA,qCCDPJ,EAAA,CAAA,MAAM,oBAAoB,kBAA/B,OAAAC,YAAA,EAAAC,qBAEM,MAFNF,EAEM,CADFG,aAAQC,EAAA,OAAA,SAAA,yLCMZF,EAAAA,mBASM,MAAA,CARF,wBAAM,gBAAe,sBAEuBG,EAAA,QAAK,6BAAgDA,EAAA,QAAK,aAAkCA,EAAA,IAAA,IADvI,kBAAkBC,EAAAA,OAAO,EAAA,GAM1BH,aAAQC,EAAA,OAAA,SAAA,CAAA"}

package/dist/index.d.ts

@@ -1,2 +1,5 @@
-import DropdownMenu from './src/DropdownMenu.vue';
-export { DropdownMenu };
+import { default as DropdownHeader } from './src/DropdownHeader.vue';
+import { default as DropdownItem } from './src/DropdownItem.vue';
+import { default as DropdownItemText } from './src/DropdownItemText.vue';
+import { default as DropdownMenu } from './src/DropdownMenu.vue';
+export { DropdownHeader, DropdownItem, DropdownItemText, DropdownMenu };

package/dist/src/DropdownHeader.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLHeadingElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLHeadingElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/DropdownItem.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/DropdownItemText.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/DropdownMenu.vue.d.ts

@@ -1,39 +1,23 @@
-declare const _sfc_main: import("vue").DefineComponent<{
-    /**
-     * Display the dropdown menu aligned left or right
-     *
-     * @property String
-     */
-    align: {
-        type: StringConstructor;
-        default: string;
-        validate(value: any): boolean;
+export type DropdownMenuProps = {
+    align?: 'left' | 'right';
+    show?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
     };
-    /**
-     * The default visibility of the dropdown menu.
-     *
-     * @property Object
-     */
-    show: BooleanConstructor;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Display the dropdown menu aligned left or right
-     *
-     * @property String
-     */
-    align: {
-        type: StringConstructor;
-        default: string;
-        validate(value: any): boolean;
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<DropdownMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DropdownMenuProps> & Readonly<{}>, {
+    align: "left" | "right";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
     };
-    /**
-     * The default visibility of the dropdown menu.
-     *
-     * @property Object
-     */
-    show: BooleanConstructor;
-}>>, {
-    align: string;
-    show: boolean;
-}>;
-export default _sfc_main;
+};

package/index.css

@@ -0,0 +1,220 @@
+@import "tailwindcss";
+
+@theme {
+	--dropdown-menu-position: absolute;
+	--dropdown-menu-top: 100%;
+	--dropdown-menu-left: 0;
+	--dropdown-menu-z-index: 1000;
+	--dropdown-menu-display: none;
+	--dropdown-menu-min-width: 10rem;
+	--dropdown-menu-padding: 0.5rem 0;
+	--dropdown-menu-font-size: 1rem;
+	--dropdown-menu-text-align: left;
+	--dropdown-menu-list-style: none;
+	--dropdown-menu-bg: var(--color-white, #fff);
+	--dropdown-menu-bg-dark: var(--color-neutral-800, oklch(26.9% 0 0));
+	--dropdown-menu-bg-clip: padding-box;
+	--dropdown-menu-border: 1px solid var(--color-neutral-400, oklch(70.8% 0 0));
+	--dropdown-menu-border-dark: 1px solid var(--color-neutral-600, oklch(43.9% 0 0));
+	--dropdown-menu-border-radius: 0.25rem;
+	--dropdown-menu-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5);
+    --dropdown-menu-text-decoration: none;
+	--dropdown-menu-white-space: nowrap;
+
+	--dropdown-menu-item-display: flex;
+	--dropdown-menu-item-width: 100%;
+	--dropdown-menu-item-padding: 0.25rem 1rem;
+	--dropdown-menu-item-font-weight: normal;
+	--dropdown-menu-item-color: var(--color-neutral-800, oklch(26.9% 0 0));
+	--dropdown-menu-item-color-dark: var(--color-neutral-200, oklch(92.2% 0 0));
+	--dropdown-menu-item-text-align: inherit;
+	--dropdown-menu-item-bg: transparent;
+	--dropdown-menu-item-border: 0;
+	--dropdown-menu-item-hover-color: var(--color-neutral-900, oklch(20.5% 0 0));
+	--dropdown-menu-item-hover-color-dark: var(--color-neutral-100, oklch(97% 0 0));
+	--dropdown-menu-item-hover-bg: var(--color-neutral-100, oklch(97% 0 0));
+	--dropdown-menu-item-hover-bg-dark: var(--color-neutral-700, oklch(37.1% 0 0));
+	--dropdown-menu-item-active-color: var(--color-white, #fff);
+	--dropdown-menu-item-active-color-dark: var(--dropdown-menu-item-active-color);
+	--dropdown-menu-item-active-bg: var(--color-blue-500, oklch(62.3% 0.214 259.815));
+	--dropdown-menu-item-active-bg-dark: var(--dropdown-menu-item-active-bg);
+	--dropdown-menu-item-disabled-color: var(--color-neutral-500, oklch(55.6% 0 0));
+	--dropdown-menu-item-disabled-pointer-events: none;
+	--dropdown-menu-item-disabled-bg: transparent;
+
+	--dropdown-menu-header-display: block;
+	--dropdown-menu-header-padding: 0.5rem;
+	--dropdown-menu-header-font-size: 0.875rem;
+	--dropdown-menu-header-font-weight: bold;
+	--dropdown-menu-header-color: var(--color-neutral-500, oklch(55.6% 0 0));
+	--dropdown-menu-header-color-dark: var(--color-neutral-400, oklch(70.8% 0 0));
+
+	--dropdown-menu-divider-height: 0;
+	--dropdown-menu-divider-margin: 0.25rem 0;
+	--dropdown-menu-divider-overflow: hidden;
+	--dropdown-menu-divider-border-top: 1px solid var(--color-neutral-200, oklch(92.2% 0 0));
+	--dropdown-menu-divider-border-top-dark: 1px solid var(--color-neutral-700, oklch(37.1% 0 0));
+
+	--dropdown-menu-text-padding: 0.25rem 1rem;
+	--dropdown-menu-text-color: var(--color-neutral-800, oklch(26.9% 0 0));
+	--dropdown-menu-text-color-dark: var(--color-neutral-200, oklch(92.2% 0 0));
+
+	--dropdown-menu-show-display: inline-block;
+
+	--dropdown-menu-left-right: auto;
+	--dropdown-menu-left-left: 0;
+	--dropdown-menu-right-right: 0;
+	--dropdown-menu-right-left: auto;
+	--dropdown-menu-reset-right: auto;
+	--dropdown-menu-reset-bottom: auto;
+}
+
+
+@utility dropdown-menu {
+	position: var(--dropdown-menu-position);
+	top: var(--dropdown-menu-top);
+	left: var(--dropdown-menu-left);
+	z-index: var(--dropdown-menu-z-index);
+	display: var(--dropdown-menu-display);
+	min-width: var(--dropdown-menu-min-width);
+	padding: var(--dropdown-menu-padding);
+	font-size: var(--dropdown-menu-font-size);
+	text-align: var(--dropdown-menu-text-align);
+	list-style: var(--dropdown-menu-list-style);
+	background-color: var(--dropdown-menu-bg);
+	background-clip: var(--dropdown-menu-bg-clip);
+	border: var(--dropdown-menu-border);
+	border-radius: var(--dropdown-menu-border-radius);
+	box-shadow: var(--dropdown-menu-box-shadow);
+
+	@variant dark {
+		background-color: var(--dropdown-menu-bg-dark) !important;
+		border: var(--dropdown-menu-border-dark);
+	}
+
+	.dropup:has(&),
+	.dropright:has(&),
+	.dropdown:has(&),
+	.dropleft:has(&) {
+		position: relative;
+	}
+
+	&[x-placement^="top"],
+	&[x-placement^="right"],
+	&[x-placement^="bottom"],
+	&[x-placement^="left"] {
+		right: auto;
+		bottom: auto;
+	}
+
+	.dropdown-item,
+	& > :not(hr, .dropdown-header, .dropdown-item-text, .dropdown-item-plain, .dropdown-divider) {
+		display: var(--dropdown-menu-item-display);
+		width: var(--dropdown-menu-item-width);
+		padding: var(--dropdown-menu-item-padding);
+		clear: both;
+		font-weight: var(--dropdown-menu-item-font-weight);
+		color: var(--dropdown-menu-item-color);
+		text-align: var(--dropdown-menu-item-text-align);
+		text-decoration: var(--dropdown-menu-text-decoration);
+		white-space: var(--dropdown-menu-white-space);
+		background-color: var(--dropdown-menu-item-bg);
+		border: var(--dropdown-menu-item-border);
+
+		@variant dark {
+			color: var(--dropdown-menu-item-color-dark);
+		}
+
+		&:hover,
+		&:focus {
+			color: var(--dropdown-menu-item-hover-color);
+			background-color: var(--dropdown-menu-item-hover-bg);
+			text-decoration: var(--dropdown-menu-text-decoration);
+
+			@variant dark {
+				color: var(--dropdown-menu-item-hover-color-dark);
+				background-color: var(--dropdown-menu-item-hover-bg-dark);
+			}
+		}
+
+		&.active,
+		&:active {
+			color: var(--dropdown-menu-item-active-color);
+			background-color: var(--dropdown-menu-item-active-bg);
+			text-decoration: var(--dropdown-menu-text-decoration);
+
+			@variant dark {
+				color: var(--dropdown-menu-item-active-color-dark);
+				background-color: var(--dropdown-menu-item-active-bg-dark);
+			}
+		}
+
+		&.disabled,
+		&:disabled {
+			color: var(--dropdown-menu-item-disabled-color);
+			pointer-events: var(--dropdown-menu-item-disabled-pointer-events);
+			background-color: var(--dropdown-menu-item-disabled-bg);
+			background-image: none;
+		}
+	}
+
+	.dropdown-item sub, .dropdown-item sup {
+		line-height: inherit;
+	}
+
+	.dropdown-header,
+	& > h1,
+	& > h2,
+	& > h3,
+	& > h4,
+	& > h5,
+	& > h6 {
+		display: block;
+		padding: var(--dropdown-menu-header-padding);
+		margin-bottom: 0;
+		font-size: var(--dropdown-menu-header-font-size);
+		font-weight: var(--dropdown-menu-header-font-weight);
+		color: var(--dropdown-menu-header-color);
+		white-space: var(--dropdown-menu-white-space);
+
+		@variant dark {
+			color: var(--dropdown-menu-header-color-dark);
+		}
+	}
+
+	.dropdown-divider,
+	& > hr {
+		height: 0;
+		margin: var(--dropdown-menu-divider-margin);
+		overflow: var(--dropdown-menu-divider-overflow);
+		border-top: var(--dropdown-menu-divider-border-top);
+
+		@variant dark {
+			border-top: var(--dropdown-menu-divider-border-top-dark);
+		}
+	}
+
+	.dropdown-item-text {
+		display: block;
+		padding: var(--dropdown-menu-text-padding);
+		color: var(--dropdown-menu-text-color);
+
+		@variant dark {
+			color: var(--dropdown-menu-text-color-dark);
+		}
+	}
+
+	&.show {
+		display: var(--dropdown-menu-show-display);
+	}
+
+	&.dropdown-menu-left {
+		right: var(--dropdown-menu-left-right);
+		left: var(--dropdown-menu-left-left);
+	}
+
+	&.dropdown-menu-right {
+		right: var(--dropdown-menu-right-right);
+		left: var(--dropdown-menu-right-left);
+	}
+}

package/package.json

@@ -1,77 +1,51 @@
 {
   "name": "@vue-interface/dropdown-menu",
-  "version": "2.0.0-beta.8",
+  "version": "3.0.1",
   "description": "A Vue dropdown menu component.",
-  "files": [
-    "dist",
-    "tailwindcss"
-  ],
   "type": "module",
   "main": "./dist/dropdown-menu.umd.cjs",
   "module": "./dist/dropdown-menu.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "source": "./index.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/dropdown-menu.js",
-      "require": "./dist/dropdown-menu.umd.cjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/dropdown-menu.umd.js"
     },
-    "./tailwindcss": "./tailwindcss/index.cjs",
-    "./tailwindcss/safelist": "./tailwindcss/safelist.cjs"
+    "./css": "./demo.css"
   },
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
-    "release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
-    "release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
-    "release-major": "npm run pre-release && npm version major -m \"%s\" && npm run release;",
-    "release": "git add . -A; git commit; git push --tags origin; npm publish;"
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vue-interface/dropdown-menu.git"
+    "url": "git+https://github.com/vue-interface/vue-interface.github.io"
   },
   "keywords": [
-    "Dropdown",
-    "Menu",
+    "Button",
+    "Control",
     "Vue",
-    "Component",
     "Tailwind",
     "Bootstrap"
   ],
   "author": "Justin Kimbrell",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/vue-interface/dropdown-menu/issues"
-  },
-  "homepage": "https://github.com/vue-interface/dropdown-menu",
-  "dependencies": {
-    "@vue-interface/variant": "^2.0.0-beta.0",
-    "color": "^4.2.0"
+    "url": "https://github.com/vue-interface/vue-interface.github.io"
   },
+  "homepage": "https://github.com/vue-interface/vue-interface",
+  "readme": "README.md",
+  "files": [
+    "dist",
+    "index.css",
+    "README.md",
+    "LICENSE"
+  ],
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.3.4"
   },
-  "devDependencies": {
-    "@rollup/plugin-babel": "^6.0.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "autoprefixer": "^10.4.2",
-    "babel-eslint": "^10.1.0",
-    "babel-preset-vue": "^2.0.2",
-    "change-case": "^4.1.2",
-    "eslint": "^8.25.0",
-    "eslint-plugin-vue": "^9.6.0",
-    "pascalcase": "^2.0.0",
-    "postcss": "^8.4.6",
-    "tailwindcss": "^3.1.0",
-    "ts-vue": "^0.1.0",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.0",
-    "vite-plugin-dts": "^1.7.1",
-    "vue": "^3.2.41"
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
   }
-}
+}

package/dist/src/DropdownMenuItems.vue.d.ts

@@ -1,4 +0,0 @@
-declare const _sfc_main: (props: any, context: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>;
-export default _sfc_main;

package/tailwindcss/index.cjs

@@ -1,302 +0,0 @@
-const Color = require('color');
-const plugin = require('tailwindcss/plugin');
-const colors = require('tailwindcss/colors');
-const variations = require('@vue-interface/variant/tailwindcss/variations');
-
-module.exports = plugin(function({ addComponents, theme }) {
-    const component = {
-        // ':root': {
-        //     '--dropdown-menu-z-index': theme('dropdownMenu.zIndex'),
-        //     '--dropdown-menu-min-width': theme('dropdownMenu.minWidth'),
-        //     '--dropdown-menu-padding-y': theme('dropdownMenu.paddingY'),
-        //     '--dropdown-menu-spacer': theme('dropdownMenu.spacer'),
-        //     '--dropdown-menu-font-size': theme('dropdownMenu.fontSize'),
-        //     '--dropdown-menu-color': theme('dropdownMenu.color'),
-        //     '--dropdown-menu-background-color': theme('dropdownMenu.backgroundColor'),
-        //     '--dropdown-menu-border-color': theme('dropdownMenu.borderColor'),
-        //     '--dropdown-menu-border-radius': theme('dropdownMenu.borderRadius'),
-        //     '--dropdown-menu-border-width': theme('dropdownMenu.borderWidth'),
-        //     '--dropdown-menu-box-shadow': theme('dropdownMenu.boxShadow'),
-            
-        //     '--dropdown-menu-inner-border-radius': theme('dropdownMenu.inner.borderRadius'),
-
-        //     '--dropdown-menu-divider-background-color': theme('dropdownMenu.divider.backgroundColor'),
-            
-        //     '--dropdown-menu-link-color': theme('dropdownMenu.link.color'),
-
-        //     '--dropdown-menu-link-hover-color': theme('dropdownMenu.link.hover.color'),
-        //     '--dropdown-menu-link-hover-background-color': theme('dropdownMenu.link.hover.backgroundColor'),
-                
-        //     '--dropdown-menu-link-active-color': theme('dropdownMenu.link.active.color'),
-        //     '--dropdown-menu-link-active-background-color': theme('dropdownMenu.link.active.backgroundColor'),
-
-        //     '--dropdown-menu-link-disabled-color': theme('dropdownMenu.link.disabled.color'),
-            
-        //     '--dropdown-menu-item-padding-x': theme('dropdownMenu.item.paddingX'),
-
-        //     '--dropdown-menu-header-color': theme('dropdownMenu.header.color'),
-        //     '--dropdown-menu-header-padding-y': theme('dropdownMenu.header.paddingY')
-        // },
-
-        // The dropdown wrapper (`<div>`)
-        '.dropup, .dropright, .dropdown, .dropleft': {
-            position: 'relative'
-        },
-
-        '.dropdown-toggle': {
-            whiteSpace: 'nowrap',
-        },
-            
-        '.dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
-            display: 'inline-block',
-            marginLeft: '.3em',
-            verticalAlign: 'calc(.3em * .85)',
-            content: '""',
-            borderTop: '.3em solid',
-            borderRight: '.3em solid transparent',
-            borderBottom: 0,
-            borderLeft: '.3em solid transparent'
-        } : undefined,
-
-        // The dropdown menu
-        '.dropdown-menu': {
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            zIndex: theme('dropdownMenu.zIndex'),
-            display: 'none', // none by default, but block on "open" of the menu
-            minWidth: theme('dropdownMenu.minWidth'),
-            padding: `${theme('dropdownMenu.paddingY')} 0`,
-            // margin: `${theme('dropdownMenu.spacer')} 0 0`, // override default ul
-            fontSize: theme('dropdownMenu.fontSize'),
-            color: theme('dropdownMenu.color'),
-            textAlign: 'left', // Ensures proper alignment if parent has it changed (e.g., modal footer)
-            listStyle: 'none',
-            backgroundColor: theme('dropdownMenu.backgroundColor'),
-            backgroundClip: 'padding-box',
-            border: `${theme('dropdownMenu.borderWidth')} solid ${theme('dropdownMenu.borderColor')}`,
-            borderRadius: `${theme('dropdownMenu.borderRadius')}`,
-            boxShadow: theme('dropdownMenu.enableShadows') ? theme('dropdownMenu.boxShadow') : undefined,
-
-            // When enabled Popper.js, reset basic dropdown position
-            // stylelint-disable-next-line no-duplicate-selectors
-            '&[x-placement^="top"], &[x-placement^="right"], &[x-placement^="bottom"], &[x-placement^="left"]': {
-                right: 'auto',
-                bottom: 'auto'
-            }
-        },
-
-        // Allow for dropdowns to go bottom up (aka, dropup-menu)
-        // Just add .dropup after the standard .dropdown class and you're set.
-        '.dropup .dropdown-menu': {
-            top: 'auto',
-            bottom: '100%',
-            marginTop: 0,
-            // marginBottom: theme('dropdownMenu.spacer')
-        },
-    
-        '.dropup .dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
-            display: 'inline-block',
-            marginLeft: '.3em',
-            verticalAlign: 'calc(.3em * .85)',
-            content: '""',
-            borderTop: 0,
-            borderRight: '.3em solid transparent',
-            borderBottom: '.3em solid',
-            borderLeft: '.3em solid transparent'
-        } : undefined,
-        
-        '.dropright .dropdown-menu': {
-            top: 0,
-            right: 'auto',
-            left: '100%',
-            marginTop: 0,
-            // marginLeft: theme('dropdownMenu.spacer')
-        },
-    
-        '.dropright .dropdown-toggle::after': theme('dropdownMenu.enableCarets') ? {
-            display: 'inline-block',
-            marginLeft: '.3em',
-            verticalAlign: 'calc(.3em * .85)',
-            content: '""',
-            borderTop: '.3em solid transparent',
-            borderRight: 0,
-            borderBottom: '.3em solid transparent',
-            borderLeft: '.3em solid',
-            verticalAlign: 0
-        } : undefined,
-        
-        '.dropleft .dropdown-menu': {
-            top: 0,
-            right: '100%',
-            left: 'auto',
-            marginTop: 0,
-            // marginRight: theme('dropdownMenu.spacer')
-        },
-          
-        '.dropleft .dropdown-toggle::after': {
-            display: 'none'
-        }, 
-
-        '.dropleft .dropdown-toggle::before': {
-            display: 'inline-block',
-            marginRight: '.3em',
-            verticalAlign: 'calc(.3em * .85)',
-            content: '""',
-            borderTop: '.3em solid transparent',
-            borderLeft: 0,
-            borderBottom: '.3em solid transparent',
-            borderRight: '.3em solid',
-            verticalAlign: 0
-        },
-
-        // Dividers (basically an `<hr>`) within the dropdown
-        '.dropdown-divider': {
-            height: 0,
-            margin: `calc(${theme('dropdownMenu.spacer')} / 2) 0`,
-            overflow: 'hidden',
-            borderTop: `1px solid ${theme('dropdownMenu.divider.backgroundColor')}`,
-        },
-
-        // Links, buttons, and more within the dropdown menu
-        //
-        // `<button>`-specific styles are denoted with `// For <button>s`
-        '.dropdown-item': {
-            display: 'block',
-            width: '100%', // For `<button>`s
-            padding: `${theme('dropdownMenu.item.paddingY')} ${theme('dropdownMenu.item.paddingX')}`,
-            clear: 'both',
-            fontWeight: 'normal',
-            color: theme('dropdownMenu.link.color'),
-            textAlign: 'inherit', // For `<button>`s
-            textDecoration: 'none',
-            whiteSpace: 'nowrap', // prevent links from randomly breaking onto new lines
-            backgroundColor: 'transparent', // For `<button>`s
-            border: 0, // For `<button>`s
-        },
-    
-        '.dropdown-item:hover, .dropdown-item:focus': {
-            color: theme('dropdownMenu.link.hover.color'),
-            textDecoration: 'none',
-            backgroundColor: theme('dropdownMenu.link.hover.backgroundColor')
-        },
-        
-        '.dropdown-item.active, .dropdown-item:active': {
-            color: theme('dropdownMenu.link.active.color'),
-            textDecoration: 'none',
-            backgroundColor: theme('dropdownMenu.link.active.backgroundColor')
-        },
-        
-        '.dropdown-item.disabled, .dropdown-item:disabled': {
-            color: theme('dropdownMenu.link.disabled.color'),
-            pointerEvents: 'none',
-            backgroundColor: 'transparent',
-            backgroundImage: 'none'
-        },
-        
-        '.dropdown-menu.show': {
-            display: 'block'
-        },
-        
-        // Dropdown section headers
-        '.dropdown-header': {
-            display: theme('dropdownMenu.header.display'),
-            padding: `${theme('dropdownMenu.header.paddingY')} ${theme('dropdownMenu.header.paddingX')}`,
-            marginBottom: 0, // for use with heading elements
-            fontSize: theme('dropdownMenu.header.fontSize'),
-            fontWeight: theme('dropdownMenu.header.fontWeight'),
-            color: theme('dropdownMenu.header.color'),
-            whiteSpace: 'nowrap' // as with > li > a
-        },
-        
-        // Dropdown text
-        '.dropdown-item-text': {
-            display: theme('dropdownMenu.item.display'),
-            padding: `${theme('dropdownMenu.item.paddingY')} ${theme('dropdownMenu.item.paddingX')}`,
-            color: theme('dropdownMenu.link.color'),
-        },
-
-        '.dropdown-menu-left': {
-            right: 'auto',
-            left: 0
-        },
-
-        '.dropdown-menu-right': {
-            // right: 0,
-            left: 'auto'
-        }
-    };
-
-    if(theme('dropdownMenu.paddingY') === 0) {
-        component['.dropdown-item']['&:first-child'] = {
-            borderTopLeftRadius: theme('dropdownMenu.inner.borderRadius'),
-            borderTopRightRadius: theme('dropdownMenu.inner.borderRadius'),
-        };
-
-        component['.dropdown-item']['&:last-child'] = {
-            borderBottomLeftRadius: theme('dropdownMenu.inner.borderRadius'),
-            borderBottomRightRadius: theme('dropdownMenu.inner.borderRadius'),
-        };
-    }
-
-    addComponents(component);
-}, {
-    theme: {
-        dropdownMenu: theme => ({
-            enableShadows: true,
-            enableCarets: true,
-            zIndex: 1000,
-            minWidth: '10rem',
-            paddingY: '.5rem',
-            spacer: '.125rem',
-            fontSize: '1rem',
-            color: 'inherit',
-            backgroundColor: theme('colors.white', colors.white),
-            borderColor: Color(theme('colors.black', colors.black)).fade(.85),
-            borderRadius: '.25rem',
-            borderWidth: '1px',
-            boxShadow: `0 .5rem 1rem ${Color(theme('colors.black', colors.black)).fade(.85)}`,
-            
-            inner: {
-                borderRadius: 'calc(.25rem - 1px)'
-            },
-            
-            divider: {
-                backgroundColor: theme('colors.gray.100', colors.gray[100]),
-            },
-
-            link: {
-                color: theme('colors.gray.800', colors.gray[800]),
-                
-                hover: {
-                    color: Color(theme('colors.gray.800', colors.gray[800])).darken(.5).hex(),
-                    backgroundColor: theme('colors.gray.100', colors.gray[100])
-                },
-
-                active: {
-                    color: theme('colors.white', colors.white),
-                    backgroundColor: theme('variations.primary', variations.primary),
-                },
-
-                disabled: {
-                    color: theme('colors.gray.500', colors.gray[500])
-                }
-            },
-
-            item: {
-                display: 'block',
-                paddingY: '.25rem',
-                paddingX: '1rem',
-            },
-
-            header: {
-                color: theme('colors.gray.500', colors.gray[500]),
-                display: 'block',
-                fontSize: '.875rem',
-                fontWeight: 'bold',
-                paddingX: '.5rem',
-                paddingY: '.5rem'
-            }
-        })
-    }
-});

package/tailwindcss/safelist.cjs

@@ -1,15 +0,0 @@
-module.exports = () => ([
-    'dropdown-divider',
-    'dropdown-header',
-    'dropdown-item',
-    'dropdown-item-text',
-    'dropdown-menu',
-    'dropdown-menu-left',
-    'dropdown-menu-right',
-    'dropdown-toggle',
-    'dropdown-toggle-split',
-    'dropup',
-    'dropdown',
-    'dropright',
-    'dropleft',
-]);