@frankhoodbs/dropdown-cmp - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

dist/DropdownCmp.css

@@ -1,1 +0,1 @@
-.DropdownCmp[data-v-821c3509]{position:relative;width:var(--dropdown-width, 100%)}.button[data-v-821c3509]{position:relative;width:100%;background:var(--dropdown-button-background, transparent);color:var(--dropdown-button-color, black);border:var(--dropdown-button-border-width, 0px) solid var(--dropdown-button-border-color, transparent);border-radius:var(--dropdown-button-border-radius, 0px);-webkit-user-select:none;user-select:none;z-index:var(--dropdown-button-z-index, 1)}.expanded .button[data-v-821c3509]{outline:none!important}.disabled .button[data-v-821c3509]{opacity:var(--dropdown-disabled-opacity, .5);cursor:not-allowed;outline:0!important}.menu[data-v-821c3509]{width:var(--dropdown-menu-width, 100%);max-width:var(--dropdown-menu-max-width, none);min-width:var(--dropdown-menu-min-width, 0);max-height:var(--dropdown-menu-max-height, 200px);background:var(--dropdown-menu-background, white);color:var(--dropdown-menu-color, black);border:var(--dropdown-menu-border-width, 1px) solid var(--dropdown-menu-border-color, black);border-radius:var(--dropdown-menu-border-radius, 4px);overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:var(--dropdown-menu-z-index, 2)}.menuitem[data-v-821c3509] .option{display:block;width:100%}.menuitem[data-v-821c3509] .option.active,.menuitem[data-v-821c3509] .option:hover{background-color:var(--dropdown-option-active-background, grey)}.menuitem[data-v-821c3509] .option.active{outline:var(--dropdown-option-color-outline, red) solid var(--dropdown-option-size-outline, 3px);outline-offset:var(--dropdown-option-size-outline-offset, 1px)}.expand-enter-active[data-v-821c3509],.expand-leave-active[data-v-821c3509]{transition-property:opacity,transform;transition-duration:var(--dropdown-transition-duration, .3s),var(--dropdown-transition-duration, .3s);transition-timing-function:var(--dropdown-transition-timing-function, ease-in-out),var(--dropdown-transition-timing-function, ease-in-out)}.expand-enter-from[data-v-821c3509],.expand-leave-to[data-v-821c3509]{opacity:0;transform:translateY(-16px)}
+.DropdownCmp[data-v-cda7e45c]{position:relative;width:var(--dropdown-width, 100%)}.DropdownCmp .dropdown-trigger[data-v-cda7e45c]{position:var(--dropdown-button-position);width:var(--dropdown-button-width);padding:var(--dropdown-button-padding);background-color:var(--dropdown-button-bg-color);color:var(--dropdown-button-color);border:var(--dropdown-button-border-width) var(--dropdown-button-border-style) var(--dropdown-button-border-color);border-radius:var(--dropdown-button-border-radius);box-shadow:var(--dropdown-button-box-shadow);opacity:var(--dropdown-button-opacity);-webkit-user-select:none;user-select:none;z-index:var(--dropdown-button-z-index)}.DropdownCmp .dropdown-trigger[aria-expanded=true][data-v-cda7e45c]{background-color:var(--dropdown-button-expanded-bg-color, var(--dropdown-button-bg-color));color:var(--dropdown-button-expanded-color, var(--dropdown-button-color));border:var(--dropdown-button-expanded-border-width, var(--dropdown-button-border-width)) var(--dropdown-button-expanded-border-style, var(--dropdown-button-border-style)) var(--dropdown-button-expanded-border-color, var(--dropdown-button-border-color));box-shadow:var(--dropdown-button-expanded-box-shadow, var(--dropdown-button-box-shadow));outline:var(--dropdown-button-expanded-outline);outline-offset:var(--dropdown-button-expanded-outline-offset)}.DropdownCmp .dropdown-trigger[data-v-cda7e45c]:disabled{background-color:var(--dropdown-button-disabled-bg-color, var(--dropdown-button-bg-color));color:var(--dropdown-button-disabled-color, var(--dropdown-button-color));border:var(--dropdown-button-disabled-border-width, var(--dropdown-button-border-width)) var(--dropdown-button-disabled-border-style, var(--dropdown-button-border-style)) var(--dropdown-button-disabled-border-color, var(--dropdown-button-border-color));box-shadow:var(--dropdown-button-disabled-box-shadow, var(--dropdown-button-box-shadow));opacity:var(--dropdown-disabled-opacity, .333);cursor:var(--dropdown-button-disabled-cursor, not-allowed)}.DropdownCmp .dropdown-trigger[data-v-cda7e45c]:not(:disabled):hover{background-color:var(--dropdown-button-hover-bg-color, var(--dropdown-button-bg-color));color:var(--dropdown-button-hover-color, var(--dropdown-button-color));border:var(--dropdown-button-hover-border-width, var(--dropdown-button-border-width)) var(--dropdown-button-hover-border-style, var(--dropdown-button-border-style)) var(--dropdown-button-hover-border-color, var(--dropdown-button-border-color));box-shadow:var(--dropdown-button-hover-box-shadow, var(--dropdown-button-box-shadow));opacity:var(--dropdown-button-hover-opacity)}.DropdownCmp .dropdown-menu[data-v-cda7e45c]{width:var(--dropdown-menu-width, 100%);max-width:var(--dropdown-menu-max-width);min-width:var(--dropdown-menu-min-width);max-height:var(--dropdown-menu-max-height);padding:var(--dropdown-menu-padding);background-color:var(--dropdown-menu-bg-color, white);color:var(--dropdown-menu-color);border:var(--dropdown-menu-border-width, 1px) var(--dropdown-menu-border-style, solid) var(--dropdown-menu-border-color);border-radius:var(--dropdown-menu-border-radius, .25rem);box-shadow:var(--dropdown-menu-box-shadow);overflow:hidden;overflow-y:auto;z-index:var(--dropdown-menu-z-index, 1);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.DropdownCmp .dropdown-menu li[data-v-cda7e45c] .dropdown-menuitem{display:var(--dropdown-menuitem-display, block);width:var(--dropdown-menuitem-width, 100%)}.DropdownCmp .dropdown-menu li[data-v-cda7e45c] .dropdown-menuitem:hover{background-color:var(--dropdown-menuitem-hover-bg-color)}.DropdownCmp .dropdown-menu li[data-v-cda7e45c] .dropdown-menuitem:focus{background-color:var(--dropdown-menuitem-focus-bg-color)}.DropdownCmp .dropdown-menu li[data-v-cda7e45c] .dropdown-menuitem:focus-visible{outline:var(--dropdown-menuitem-focus-outline)!important;outline-offset:var(--dropdown-menuitem-focus-outline-offset)!important}.DropdownCmp .expand-enter-active[data-v-cda7e45c],.DropdownCmp .expand-leave-active[data-v-cda7e45c]{transition-property:opacity,transform;transition-duration:var(--dropdown-transition-duration, .3s),var(--dropdown-transition-duration, .3s);transition-timing-function:var(--dropdown-transition-timing-function, ease-in-out),var(--dropdown-transition-timing-function, ease-in-out)}.DropdownCmp .expand-enter-from[data-v-cda7e45c],.DropdownCmp .expand-leave-to[data-v-cda7e45c]{opacity:0;transform:translateY(var(--dropdown-translate-y, -.5rem))}

dist/DropdownCmp.d.ts

 import { VNode } from 'vue';
 import { Placement } from '@floating-ui/vue';
-export interface LinkItem {
+export interface MenuItem {
     label: string;
+    href?: string;
     [key: string]: any;
 }
 export interface Props {
-    dataOptions: LinkItem[];
-    dataIdPrefix: string;
+    dataMenuItems: MenuItem[];
+    dataId: string;
     dataDisabled?: boolean;
@@ -18,7 +19,7 @@ dataPlacement?: Placement;
     slots: Readonly<{
-        button?: (props: {
+        button: (props: {
             expanded: boolean;
         }) => VNode[];
-        link: (props: {
-            option: LinkItem;
+        menuitem: (props: {
+            option: MenuItem;
             index: number;
@@ -28,7 +29,7 @@ attr: Record<string, any>;
     }> & {
-        button?: (props: {
+        button: (props: {
             expanded: boolean;
         }) => VNode[];
-        link: (props: {
-            option: LinkItem;
+        menuitem: (props: {
+            option: MenuItem;
             index: number;
@@ -39,5 +40,4 @@ attr: Record<string, any>;
     refs: {
-        reference: HTMLButtonElement;
-        floating: HTMLUListElement;
-        items: HTMLLIElement[];
+        $button: HTMLButtonElement;
+        $menu: HTMLUListElement;
     };
@@ -48,2 +48,3 @@ rootEl: HTMLDivElement;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    dataId: string;
     dataDisabled: boolean;
@@ -53,5 +54,4 @@ dataPlacement: Placement;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    reference: HTMLButtonElement;
-    floating: HTMLUListElement;
-    items: HTMLLIElement[];
+    $button: HTMLButtonElement;
+    $menu: HTMLUListElement;
 }, HTMLDivElement>;
@@ -58,0 +58,0 @@ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

dist/DropdownCmp.js

@@ -1,1 +0,1 @@
-import{defineComponent as e,ref as t,toRef as O,createElementBlock as P,openBlock as _,normalizeClass as C,unref as I,createElementVNode as S,createVNode as T,withKeys as F,withModifiers as B,renderSlot as K,createTextVNode as E,Transition as V,withCtx as L,withDirectives as N,normalizeStyle as U,Fragment as z,renderList as M,toDisplayString as $,vShow as q,nextTick as A}from"vue";import{boolToString as H}from"@frankhoodbs/a11y-support";import{useFloating as R,flip as j,offset as G,autoUpdate as J}from"@floating-ui/vue";import"./DropdownCmp.css";let Q=["id","aria-controls","aria-expanded","tabindex","aria-disabled","onKeydown"],W=["id","aria-labelledby"],X=["onFocusin"],Y=["href","tabindex"],a=e({__name:"DropdownCmp",props:{dataOptions:{},dataIdPrefix:{},dataDisabled:{type:Boolean,default:!1},dataPlacement:{default:"bottom-start"},dataFallbackPlacements:{},dataOffset:{default:0}},setup(l){let s=l,i=t(!1),r=t(0),o=t(null),a=t(null),n=t(null),{floatingStyles:d,placement:u}=R(a,n,{whileElementsMounted:J,transform:!1,placement:O(()=>s.dataPlacement),middleware:[j({fallbackAxisSideDirection:"end",fallbackPlacements:s.dataFallbackPlacements}),G(s.dataOffset||0)],open:i}),p=e=>{s.dataDisabled||(r.value=e,setTimeout(()=>{o.value&&o.value[e]&&o.value[e].scrollIntoView({block:"nearest"})},50))},f=e=>{s.dataDisabled||(i.value=!0,A(()=>{p(e)}))},c=()=>{s.dataDisabled||(i.value=!1)},v=()=>{i.value?c():f(0)},m=()=>{if(i.value){let e=r.value-1;e<0&&(e=s.dataOptions.length-1),p(e)}else f(s.dataOptions.length-1)},b=()=>{if(i.value){let e=r.value+1;e>s.dataOptions.length-1&&(e=0),p(e)}else f(0)},x=()=>{i.value?o.value[r.value]&&o.value[r.value].querySelector("a, button").click():f(0)},y=e=>{i.value&&(e.preventDefault(),e.stopPropagation(),c())},w=a=>{if(!s.dataDisabled){var{key:t,altKey:e,ctrlKey:l,metaKey:o}=a;if("Home"===t)n=a,i.value&&(n.preventDefault(),n.stopPropagation(),p(0));else if("End"===t)n=a,i.value&&(n.preventDefault(),n.stopPropagation(),p(s.dataOptions.length-1));else if(!i.value||"PageUp"!==t&&"PageDown"!==t)"Backspace"!==t&&"Clear"!==t&&(1!==t.length||" "===t||e||l||o)||(e=>{typeof g=="number"&&window.clearTimeout(g),g=window.setTimeout(()=>{D=""},500),D+=e;const a=h();a>=0?f(a):(typeof g=="number"&&window.clearTimeout(g),D="")})(t);else{a.preventDefault(),a.stopPropagation();let e;"PageUp"===t?(e=r.value-10)<0&&(e=0):(e=r.value+10)>s.dataOptions.length-1&&(e=s.dataOptions.length-1),p(e)}}var n},g=null,D="",h=()=>{var a,e=[...s.dataOptions.slice(r.value+1),...s.dataOptions.slice(0,r.value+1)],t=k(e,D)[0];return t?s.dataOptions.indexOf(t):(a=D.split("")).every(e=>e===a[0])?(t=k(e,D[0]),s.dataOptions.indexOf(t[0])):-1},k=(e=[],a)=>e.filter(e=>0==e.label.toLowerCase().indexOf(a.toLowerCase()));return(t,e)=>(_(),P("div",{class:C(["DropdownCmp",I(u),{expanded:i.value,disabled:l.dataDisabled}])},[S("button",{type:"button",ref_key:"reference",ref:a,class:"button",id:l.dataIdPrefix+"-button","aria-controls":l.dataIdPrefix+"-menu","aria-haspopup":"true","aria-expanded":I(H)(i.value),tabindex:l.dataDisabled?"-1":"0","aria-disabled":I(H)(l.dataDisabled),onClick:B(v,["prevent","stop"]),onKeydown:[F(B(b,["prevent","stop"]),["down"]),F(B(m,["prevent","stop"]),["up"]),F(B(x,["prevent","stop"]),["enter"]),F(B(x,["prevent","stop"]),["space"]),F(y,["esc"]),w],onBlur:c},[K(t.$slots,"button",{expanded:i.value},()=>[e[0]||(e[0]=E("Button",-1))],!0)],40,Q),T(V,{name:"expand"},{default:L(()=>[N(S("ul",{ref_key:"floating",ref:n,id:l.dataIdPrefix+"-menu",class:"menu",role:"menu","aria-labelledby":l.dataIdPrefix+"-button",style:U(I(d)),onFocusout:c},[(_(!0),P(z,null,M(l.dataOptions,(e,a)=>(_(),P("li",{key:l.dataIdPrefix+"-menu-"+a,class:"menuitem",role:"none",ref_for:!0,ref_key:"items",ref:o,onFocusin:e=>f(a)},[K(t.$slots,"link",{option:e,index:a,attr:{role:"menuitem",class:["option",{active:r.value===a}],tabindex:r.value===a?"0":"-1"}},()=>[S("a",{href:e.href||"#",role:"menuitem",class:C(["option",{active:r.value===a}]),tabindex:r.value===a?"0":"-1"},$(e.label),11,Y)],!0)],40,X))),128))],44,W),[[q,i.value]])]),_:3})],2))}}),l=(e,a)=>{var t,l,o=e.__vccOpts||e;for([t,l]of a)o[t]=l;return o},o=l(a,[["__scopeId","data-v-821c3509"]]);export{o as default};
+import{defineComponent as e,useTemplateRef as x,ref as I,toRef as C,createElementBlock as A,openBlock as E,normalizeClass as M,unref as T,createElementVNode as P,createBlock as S,createCommentVNode as _,withModifiers as O,renderSlot as F,Transition as $,withCtx as B,withDirectives as L,normalizeStyle as K,Fragment as q,renderList as H,toDisplayString as V,vShow as z,nextTick as N}from"vue";import{useFloating as R,flip as U,offset as j,autoUpdate as G}from"@floating-ui/vue";import{boolToString as J}from"@frankhoodbs/a11y-support";import{onClickOutside as Q}from"@vueuse/core";import"./DropdownCmp.css";let W=["id","disabled","aria-controls","aria-expanded","aria-haspopup"],X=["id","aria-labelledby"],Y=["href"],a=e({__name:"DropdownCmp",props:{dataMenuItems:{},dataId:{default:"DropdownCmp"},dataDisabled:{type:Boolean,default:!1},dataPlacement:{default:"bottom-start"},dataFallbackPlacements:{},dataOffset:{default:0}},setup(l){let s=l,a=x("$button"),o=x("$menu"),r=I(!1),i=I([]),{floatingStyles:n,placement:d}=R(a,o,{whileElementsMounted:G,transform:!1,placement:C(()=>s.dataPlacement),middleware:[U({fallbackAxisSideDirection:"end",fallbackPlacements:s.dataFallbackPlacements}),j(s.dataOffset||0)],open:r}),u=async(e="first")=>{r.value=!0,await N(),("first"===e?g:D)(!0)},m=(e=!0)=>{r.value=!1,i.value[w()]?.setAttribute("tabindex","-1"),e&&a.value?.focus()},p=e=>{if(!s.dataDisabled){var a,{key:t,altKey:l,ctrlKey:o,metaKey:n}=e;if("ArrowDown"===t)a=e,r.value?(a.preventDefault(),a.stopPropagation(),h(w())):u("first");else if("ArrowUp"===t)a=e,r.value?(a.preventDefault(),a.stopPropagation(),k(w())):u("last");else if("Enter"===t||" "===t)(e=>{if(r.value){e.preventDefault(),e.stopPropagation();const a=w();(i.value[a]instanceof HTMLAnchorElement||i.value[a]instanceof HTMLButtonElement)&&i.value[a].click()}else u("first")})(e);else if(r.value&&"Tab"===t)m(!1);else if(r.value)switch(e.preventDefault(),e.stopPropagation(),t){case"Home":g();break;case"End":D();break;case"Escape":m();break;default:"Clear"!==t&&(1!==t.length||" "===t||l||o||n)||(e=>{typeof f=="number"&&window.clearTimeout(f),f=window.setTimeout(()=>{c=""},500),c+=e;const a=v();a>=0?y(a):(typeof f=="number"&&window.clearTimeout(f),c="")})(t)}}},f=null,c="",v=()=>{var a,e=[...s.dataMenuItems.slice(w()+1),...s.dataMenuItems.slice(0,w()+1)],t=b(e,c)[0];return t?s.dataMenuItems.indexOf(t):(a=c.split("")).every(e=>e===a[0])?(t=b(e,c[0]),s.dataMenuItems.indexOf(t[0])):-1},b=(e=[],a)=>e.filter(e=>0==e.label.toLowerCase().indexOf(a.toLowerCase())),t=()=>{i.value=Array.from(o.value?.querySelectorAll('[role="menuitem"]')??[])},w=()=>i.value.findIndex(e=>document.activeElement===e),y=t=>{let e=i.value[t];e&&(i.value.forEach((e,a)=>{e.setAttribute("tabindex",a===t?"0":"-1")}),e.focus({preventScroll:!0}),requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.scrollIntoView({block:"nearest",inline:"nearest",behavior:"smooth"})})}))},g=(e=!1)=>{e&&t(),y(0)},D=(e=!1)=>{e&&t(),y(i.value.length-1)},h=e=>{e=(e+1)%i.value.length;y(e)},k=e=>{e=(e-1+i.value.length)%i.value.length;y(e)};return Q(o,e=>{e=e,!r.value||a.value&&a.value.contains(e.target)||m()}),(t,e)=>(E(),A("div",{class:M(["DropdownCmp",T(d)]),onKeydown:e[1]||(e[1]=e=>l.dataDisabled?void 0:p(e))},[P("button",{ref_key:"$button",ref:a,type:"button",id:l.dataId+"-trigger",class:"dropdown-trigger",disabled:l.dataDisabled,"aria-controls":l.dataDisabled?void 0:l.dataId+"-menu","aria-expanded":l.dataDisabled?void 0:T(J)(r.value),"aria-haspopup":l.dataDisabled?void 0:"true",onClick:e[0]||(e[0]=O(e=>l.dataDisabled?void 0:void(s.dataDisabled||(r.value?m:u)()),["prevent","stop"]))},[F(t.$slots,"button",{expanded:r.value},void 0,!0)],8,W),l.dataDisabled?_("",!0):(E(),S($,{key:0,name:"expand"},{default:B(()=>[L(P("ul",{ref_key:"$menu",ref:o,id:l.dataId+"-menu",class:"dropdown-menu",role:"menu","aria-labelledby":l.dataId+"-trigger",style:K(T(n))},[(E(!0),A(q,null,H(l.dataMenuItems,(e,a)=>(E(),A("li",{key:l.dataId+"-menu-"+a,role:"presentation"},[F(t.$slots,"menuitem",{option:e,index:a,attr:{role:"menuitem",class:"dropdown-menuitem",tabindex:"-1"}},()=>[P("a",{href:e.href,role:"menuitem",class:"dropdown-menuitem",tabindex:"-1"},V(e.label),9,Y)],!0)]))),128))],12,X),[[z,r.value]])]),_:3}))],34))}}),t=(e,a)=>{var t,l,o=e.__vccOpts||e;for([t,l]of a)o[t]=l;return o},l=t(a,[["__scopeId","data-v-cda7e45c"]]);export{l as default};

dist/lib.d.ts

 import { App } from 'vue';
 declare const DropdownCmp: {
     new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./DropdownCmp').Props> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        dataId: string;
         dataDisabled: boolean;
@@ -8,5 +9,4 @@ dataPlacement: import('@floating-ui/utils').Placement;
     }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
-        reference: HTMLButtonElement;
-        floating: HTMLUListElement;
-        items: HTMLLIElement[];
+        $button: HTMLButtonElement;
+        $menu: HTMLUListElement;
     }, HTMLDivElement, import('vue').ComponentProvideOptions, {
@@ -20,2 +20,3 @@ P: {};
     }, Readonly<import('./DropdownCmp').Props> & Readonly<{}>, {}, {}, {}, {}, {
+        dataId: string;
         dataDisabled: boolean;
@@ -29,2 +30,3 @@ dataPlacement: import('@floating-ui/utils').Placement;
 } & import('vue').ComponentOptionsBase<Readonly<import('./DropdownCmp').Props> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    dataId: string;
     dataDisabled: boolean;
@@ -35,7 +37,7 @@ dataPlacement: import('@floating-ui/utils').Placement;
     $slots: Readonly<{
-        button?: (props: {
+        button: (props: {
             expanded: boolean;
         }) => import('vue').VNode[];
-        link: (props: {
-            option: import('./DropdownCmp').LinkItem;
+        menuitem: (props: {
+            option: import('./DropdownCmp').MenuItem;
             index: number;
@@ -45,7 +47,7 @@ attr: Record<string, any>;
     }> & {
-        button?: (props: {
+        button: (props: {
             expanded: boolean;
         }) => import('vue').VNode[];
-        link: (props: {
-            option: import('./DropdownCmp').LinkItem;
+        menuitem: (props: {
+            option: import('./DropdownCmp').MenuItem;
             index: number;
@@ -52,0 +54,0 @@ attr: Record<string, any>;

package.json

@@ -13,3 +13,3 @@ {
   "license": "ISC",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "type": "module",
@@ -68,5 +68,6 @@ "exports": {
     "@frankhoodbs/a11y-support": "^4.0.0",
+    "@vueuse/core": "^14.0.0",
     "vue": "^3.5.22"
   },
-  "gitHead": "34fcf1fe1db0b3082b0ab19242908d11ff87d683"
+  "gitHead": "431763c99afe6aac1bad97ae28abe4a1aad7ba55"
 }

README.md

@@ -12,4 +12,4 @@ # Dropdown Component
 |----------------------------|----------------|-----------------------------------------------------------------------------------------------------|
-| `data-options`             | -              | An array of link items for the dropdown menu                                                        |
-| `data-id-prefix`           | -              | **required** Prefix for all the id attributes                                                       |
+| `data-menu-items`          | -              | **required** An array of items for the dropdown menu                                                |
+| `data-id`                  | -              | **required** Prefix for all the id attributes                                                       |
 | `data-disabled`            | false          | Boolean indicating if the dropdown is disabled                                                      |
@@ -22,31 +22,68 @@ | `data-placement`           | 'bottom-start' | Initial placement for the floating menu                                                             |
 
-| Slot Name | Description                                        | Context Props                                                                                                                                                                             |
-|-----------|----------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `button`  | Slot for custom content of the dropdown button     | `expanded`: Boolean indicating if the dropdown menu is expanded                                                                                                                           |
-| `link`    | Slot for custom content of each dropdown menu item | `option`: The current option object from `options` prop<br>`index`: The current index of the option in the `options` array<br>`attr`: Object with predefined attributes for the menu item |
+| Slot Name  | Description                                       | Context Props                                                                                                                                                                                            |
+|------------|---------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `button`   | Slot for custom content of the dropdown button    | `expanded`: Boolean indicating if the dropdown menu is expanded                                                                                                                                          |
+| `menuitem` | Slot for custom content of each dropdown menuitem | `option`: The current option object from `data-menu-items` prop<br>`index`: The current index of the option in the `data-menu-items` array<br>`attr`: Object with predefined attributes for the menuitem |
 
 ## CSS Custom Properties
 
-| Custom Property                         | Default Value | Description                                            |
-|-----------------------------------------|---------------|--------------------------------------------------------|
-| `--dropdown-button-background`          | `transparent` | Background color of the dropdown button.               |
-| `--dropdown-button-color`               | `black`       | Text color of the dropdown button.                     |
-| `--dropdown-button-border-width`        | `0px`         | Width of the dropdown button border.                   |
-| `--dropdown-button-border-color`        | `transparent` | Color of the dropdown button border.                   |
-| `--dropdown-button-border-radius`       | `0px`         | Border radius of the dropdown button.                  |
-| `--dropdown-disabled-opacity`           | `0.5`         | Opacity for the disabled state of the dropdown button. |
-| `--dropdown-menu-width`                 | `100%`        | Width of the dropdown menu.                            |
-| `--dropdown-menu-min-width`             | `0`           | Minimum width of the dropdown menu.                    |
-| `--dropdown-menu-max-width`             | `none`        | Maximum width of the dropdown menu.                    |
-| `--dropdown-menu-background`            | `white`       | Background color of the dropdown menu.                 |
-| `--dropdown-menu-color`                 | `black`       | Text color of the dropdown menu.                       |
-| `--dropdown-menu-border-width`          | `1px`         | Width of the dropdown menu border.                     |
-| `--dropdown-menu-border-color`          | `black`       | Color of the dropdown menu border.                     |
-| `--dropdown-menu-border-radius`         | `4px`         | Border radius of the dropdown menu.                    |
-| `--dropdown-menu-max-height`            | `200px`       | Maximum height of the dropdown menu.                   |
-| `--dropdown-option-active-background`   | `grey`        | Background color for active/hovered dropdown option.   |
-| `--dropdown-option-color-outline`       | `red`         | Outline color for the active dropdown option.          |
-| `--dropdown-option-size-outline`        | `3px`         | Width of the outline for the active dropdown option.   |
-| `--dropdown-option-size-outline-offset` | `1px`         | Offset of the outline for the active dropdown option.  |
-| `--dropdown-transition-duration`        | `0.3s`        | Transition duration for dropdown animations.           |
-| `--dropdown-transition-timing-function` | `ease-in-out` | Transition timing function for dropdown animations.    |
+| Custom Property                             | Default Value | Description                                                     |
+|---------------------------------------------|---------------|-----------------------------------------------------------------|
+| `--dropdown-width`                          | `100%`        | Width of the dropdown wrapper.                                  |
+| `--dropdown-button-position`                |               | Background color of the dropdown button.                        |
+| `--dropdown-button-width`                   |               | Width of the dropdown button.                                   |
+| `--dropdown-button-padding`                 |               | Padding of the dropdown button.                                 |
+| `--dropdown-button-bg-color`                |               | Background color of the dropdown button.                        |
+| `--dropdown-button-color`                   |               | Text color of the dropdown button.                              |
+| `--dropdown-button-border-width`            |               | Width of the dropdown button border.                            |
+| `--dropdown-button-border-style`            |               | Style of the dropdown button border.                            |
+| `--dropdown-button-border-color`            |               | Color of the dropdown button border.                            |
+| `--dropdown-button-border-radius`           |               | Border radius of the dropdown button.                           |
+| `--dropdown-button-box-shadow`              |               | Box shadow of the dropdown button.                              |
+| `--dropdown-button-opacity`                 |               | Opacity of the dropdown button.                                 |
+| `--dropdown-button-z-index`                 |               | Z-index of the dropdown button.                                 |
+| `--dropdown-button-expanded-bg-color`       |               | Background color for the expanded state of the dropdown button. |
+| `--dropdown-button-expanded-color`          |               | Text color for the expanded state of the dropdown button.       |
+| `--dropdown-button-expanded-border-width`   |               | Width for the expanded state of the dropdown button border.     |
+| `--dropdown-button-expanded-border-style`   |               | Style for the expanded state of the dropdown button border.     |
+| `--dropdown-button-expanded-border-color`   |               | Color for the expanded state of the dropdown button border.     |
+| `--dropdown-button-expanded-box-shadow`     |               | Box shadow for the expanded state of the dropdown button.       |
+| `--dropdown-button-expanded-outline`        |               | Outline for the expanded state of the dropdown button.          |
+| `--dropdown-button-expanded-outline-offset` |               | Outline offset for the expanded state of the dropdown button.   |
+| `--dropdown-button-disabled-bg-color`       |               | Background color for the disabled state of the dropdown button. |
+| `--dropdown-button-disabled-color`          |               | Text color for the disabled state of the dropdown button.       |
+| `--dropdown-button-disabled-border-width`   |               | Width for the disabled state of the dropdown button border.     |
+| `--dropdown-button-disabled-border-style`   |               | Style for the disabled state of the dropdown button border.     |
+| `--dropdown-button-disabled-border-color`   |               | Color for the disabled state of the dropdown button border.     |
+| `--dropdown-button-disabled-box-shadow`     |               | Box shadow for the disabled state of the dropdown button.       |
+| `--dropdown-button-disabled-opacity`        | `0.333`       | Opacity for the disabled state of the dropdown button.          |
+| `--dropdown-button-disabled-cursor`         | `not-allowed` | Cursor for the disabled state of the dropdown button.           |
+| `--dropdown-button-hover-bg-color`          |               | Background color for the hover state of the dropdown button.    |
+| `--dropdown-button-hover-color`             |               | Text color for the hover state of the dropdown button.          |
+| `--dropdown-button-hover-border-width`      |               | Width for the hover state of the dropdown button border.        |
+| `--dropdown-button-hover-border-style`      |               | Style for the hover state of the dropdown button border.        |
+| `--dropdown-button-hover-border-color`      |               | Color for the hover state of the dropdown button border.        |
+| `--dropdown-button-hover-box-shadow`        |               | Box shadow for the hover state of the dropdown button.          |
+| `--dropdown-button-hover-opacity`           |               | Opacity for the hover state of the dropdown button.             |
+| `--dropdown-menu-width`                     | `100%`        | Width of the dropdown menu.                                     |
+| `--dropdown-menu-max-width`                 |               | Maximum width of the dropdown menu.                             |
+| `--dropdown-menu-min-width`                 |               | Minimum width of the dropdown menu.                             |
+| `--dropdown-menu-max-height`                |               | Maximum height of the dropdown menu.                            |
+| `--dropdown-menu-padding`                   |               | Padding of the dropdown menu.                                   |
+| `--dropdown-menu-bg-color`                  | `white`       | Background color of the dropdown menu.                          |
+| `--dropdown-menu-color`                     |               | Text color of the dropdown menu.                                |
+| `--dropdown-menu-border-width`              | `1px`         | Width of the dropdown menu border.                              |
+| `--dropdown-menu-border-style`              | `solid`       | Style of the dropdown menu border.                              |
+| `--dropdown-menu-border-color`              |               | Color of the dropdown menu border.                              |
+| `--dropdown-menu-border-radius`             | `0.25rem`     | Border radius of the dropdown menu.                             |
+| `--dropdown-menu-box-shadow`                |               | Box shadow of the dropdown menu.                                |
+| `--dropdown-menu-z-index`                   | `1`           | Z-index of the dropdown menu.                                   |
+| `--dropdown-menuitem-display`               | `block`       | Display of the dropdown menuitems.                              |
+| `--dropdown-menuitem-width`                 | `100%`        | Width of the dropdown menuitems.                                |
+| `--dropdown-menuitem-hover-bg-color`        |               | Background color for the hover state of the dropdown menuitems. |
+| `--dropdown-menuitem-focus-bg-color`        |               | Background color for the focused dropdown menuitems.            |
+| `--dropdown-menuitem-focus-outline`         |               | Outline for the focused dropdown menuitems.                     |
+| `--dropdown-menuitem-focus-outline-offset`  |               | Outline offset for the focused dropdown menuitems.              |
+| `--dropdown-transition-duration`            | `0.3s`        | Transition duration for dropdown animations.                    |
+| `--dropdown-transition-timing-function`     | `ease-in-out` | Transition timing function for dropdown animations.             |
+| `--dropdown-translate-y`                    | `-0.5rem`     | Translate-y for dropdown animations.                            |

No alert changes

Improved metrics

Total package byte prevSize

25828

42.91%

Lines of code

139

8.59%

Number of lines in readme file

88

72.55%

Worsened metrics

Dependency count

4

33.33%

Dependency changes

• + Added

  @vueuse/core@^14.0.0

• + Added

  @types/web-bluetooth@0.0.21
  (transitive)

• + Added

  @vueuse/core@14.2.1
  (transitive)

• + Added

  @vueuse/metadata@14.2.1
  (transitive)

• + Added

  @vueuse/shared@14.2.1
  (transitive)