@neovici/cosmoz-dropdown

Dropdown components for Neovici applications.

Installation

npm install @neovici/cosmoz-dropdown

Components

cosmoz-dropdown-next

Modern dropdown using the Popover API and CSS Anchor Positioning.

Usage

<script type="module">
	import '@neovici/cosmoz-dropdown';
</script>

<cosmoz-dropdown-next placement="bottom span-right">
	<button slot="button">Open Menu</button>
	<div>Dropdown content</div>
</cosmoz-dropdown-next>

Properties

Property	Type	Default	Description
placement	string	'bottom span-right'	CSS anchor position-area value. See MDN for options.
disabled	boolean	false	Prevents the dropdown from opening.
passthrough	boolean	false	When disabled + passthrough, render default slot content inline instead of inside the popover.
open-on-hover	boolean	false	Open on pointer hover.
open-on-focus	boolean	false	Open when the trigger receives focus.

Auto-open Modes

The open-on-hover and open-on-focus attributes can be used independently or together:

<!-- Open on hover only -->
<cosmoz-dropdown-next open-on-hover>
	<button slot="button">Hover me</button>
	<div>Content appears on hover</div>
</cosmoz-dropdown-next>

<!-- Open on focus only -->
<cosmoz-dropdown-next open-on-focus>
	<button slot="button">Focus me</button>
	<div>Content appears on focus</div>
</cosmoz-dropdown-next>

<!-- Open on hover or focus -->
<cosmoz-dropdown-next open-on-hover open-on-focus>
	<button slot="button">Hover or focus</button>
	<div>Content appears on either</div>
</cosmoz-dropdown-next>

When auto-open is enabled:

• The dropdown closes with a 100ms delay to allow moving between trigger and content
• When open-on-focus is active, clicking the button only opens (does not toggle)
• Otherwise, click works as a toggle

Disabled + Passthrough

When disabled and passthrough are both set, the default slot content renders in normal document flow (outside the popover). This enables using the dropdown as a conditional wrapper — popover mode when enabled, inline mode when disabled:

<!-- Dropdown mode (enabled) -->
<cosmoz-dropdown-next placement="bottom span-right">
	<button slot="button">Menu</button>
	<div>Popover content</div>
</cosmoz-dropdown-next>

<!-- Inline mode (disabled + passthrough) -->
<cosmoz-dropdown-next disabled passthrough>
	<button slot="button">Menu</button>
	<div>Rendered inline, not inside a popover</div>
</cosmoz-dropdown-next>

Slots

Slot	Description
button	The trigger element that opens the dropdown
(default)	The dropdown content

Events

The dropdown listens for a select event on its content and automatically closes when triggered. This allows menu items to close the dropdown when selected:

menuItem.dispatchEvent(new Event('select', { bubbles: true }));

The dropdown dispatches a dropdown-toggle event (a ToggleEvent) when the popover opens or closes, allowing parent components across shadow boundaries to observe state changes:

dropdown.addEventListener('dropdown-toggle', (e) => {
	console.log(e.oldState, '->', e.newState); // 'closed' -> 'open' or 'open' -> 'closed'
});

Development

npm install
npm run storybook:start

Testing

npm test

License

Apache-2.0