Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@frankhoodbs/dropdown-cmp

Package Overview
Dependencies
Maintainers
4
Versions
55
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@frankhoodbs/dropdown-cmp - npm Package Compare versions

Comparing version
4.0.1
 to
4.0.2
+1
-1
dist/DropdownCmp.css

@@ -1,1 +0,1 @@

.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))}
.DropdownCmp[data-v-1fb5fcf4]{position:relative;width:var(--dropdown-width, 100%)}.DropdownCmp .dropdown-trigger[data-v-1fb5fcf4]{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-1fb5fcf4]{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-1fb5fcf4]: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-1fb5fcf4]: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-1fb5fcf4]{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-1fb5fcf4] .dropdown-menuitem{display:var(--dropdown-menuitem-display, block);width:var(--dropdown-menuitem-width, 100%);background-color:var(--dropdown-menuitem-bg-color);color:var(--dropdown-menuitem-color);text-decoration:var(--dropdown-menuitem-text-decoration);text-underline-offset:var(--dropdown-menuitem-text-underline-offset)}.DropdownCmp .dropdown-menu li[data-v-1fb5fcf4] .dropdown-menuitem:hover{background-color:var(--dropdown-menuitem-hover-bg-color);color:var(--dropdown-menuitem-hover-color);text-decoration:var(--dropdown-menuitem-hover-text-decoration)}.DropdownCmp .dropdown-menu li[data-v-1fb5fcf4] .dropdown-menuitem:focus{background-color:var(--dropdown-menuitem-focus-bg-color);color:var(--dropdown-menuitem-focus-color);text-decoration:var(--dropdown-menuitem-focus-text-decoration)}.DropdownCmp .dropdown-menu li[data-v-1fb5fcf4] .dropdown-menuitem:focus-visible{outline:var(--dropdown-menuitem-focus-visible-outline)!important;outline-offset:var(--dropdown-menuitem-focus-visible-outline-offset)!important}.DropdownCmp .expand-enter-active[data-v-1fb5fcf4],.DropdownCmp .expand-leave-active[data-v-1fb5fcf4]{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-1fb5fcf4],.DropdownCmp .expand-leave-to[data-v-1fb5fcf4]{opacity:0;transform:translateY(var(--dropdown-translate-y, -.5rem))}
+1
-1
dist/DropdownCmp.js

@@ -1,1 +0,1 @@

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};
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()},f=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 p=="number"&&window.clearTimeout(p),p=window.setTimeout(()=>{c=""},500),c+=e;const a=v();a>=0?y(a):(typeof p=="number"&&window.clearTimeout(p),c="")})(t)}}},p=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:f(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-1fb5fcf4"]]);export{l as default};
+2
-2
package.json

@@ -13,3 +13,3 @@ {

"license": "ISC",
"version": "4.0.1",
"version": "4.0.2",
"type": "module",

@@ -71,3 +71,3 @@ "exports": {

},
"gitHead": "431763c99afe6aac1bad97ae28abe4a1aad7ba55"
"gitHead": "65d0d8fb2fd2aea84feccf30f17e5710465a864a"
}
+68
-60
README.md

@@ -28,61 +28,69 @@ # Dropdown Component

| 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. |
| 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-bg-color` | | Background color of the dropdown menuitems. |
| `--dropdown-menuitem-color` | | Text color of the dropdown menuitems. |
| `--dropdown-menuitem-text-decoration` | | Text decoration of the dropdown menuitems. |
| `--dropdown-menuitem-text-underline-offset` | | Text underline offset of the dropdown menuitems. |
| `--dropdown-menuitem-hover-bg-color` | | Background color for the hover state of the dropdown menuitems. |
| `--dropdown-menuitem-hover-color` | | Text color for the hover state of the dropdown menuitems. |
| `--dropdown-menuitem-hover-text-decoration` | | Text decoration for the hover state of the dropdown menuitems. |
| `--dropdown-menuitem-focus-bg-color` | | Background color for the focus state of the dropdown menuitems. |
| `--dropdown-menuitem-focus-color` | | Text color for the focus state of the dropdown menuitems. |
| `--dropdown-menuitem-focus-text-decoration` | | Text decoration for the focus state of the dropdown menuitems. |
| `--dropdown-menuitem-focus-visible-outline` | | Outline for the focused dropdown menuitems. |
| `--dropdown-menuitem-focus-visible-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. |