@vibe-labs/design-components-dropdowns

Dropdown menu component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-dropdowns";

import { DropdownAlignments, DropdownItemVariants } from "@vibe-labs/design-components-dropdowns/types";
import type { DropdownMenuStyleProps, DropdownItemStyleProps } from "@vibe-labs/design-components-dropdowns/types";

Contents

Tokens (dropdown.css)

CSS custom properties defined in @layer vibe.tokens:

Menu

Token	Default	Description
--dropdown-bg	--surface-elevated	Menu background
--dropdown-border-color	--border-subtle	Menu border
--dropdown-border-width	--border-width-1	Border width
--dropdown-radius	--radius-lg	Border radius
--dropdown-shadow	--shadow-lg	Box shadow
--dropdown-padding	--space-1	Inner padding
--dropdown-min-width	10rem	Minimum width
--dropdown-max-height	20rem	Max height (scrollable)
--dropdown-z	--z-dropdown (100)	Z-index

Items

Token	Default	Description
--dropdown-item-height	2rem	Minimum item height
--dropdown-item-px	--space-2	Horizontal padding
--dropdown-item-radius	--radius-sm	Item border radius
--dropdown-item-font-size	--text-sm	Font size
--dropdown-item-color	--text-primary	Text color
--dropdown-item-hover-bg	--surface-hover-overlay	Hover background
--dropdown-item-active-bg	--surface-active-overlay	Active background
--dropdown-item-disabled-opacity	--input-disabled-opacity	Disabled state opacity

Groups

Token	Default	Description
--dropdown-group-label-font-size	--text-xs	Group label size
--dropdown-group-label-color	--text-muted	Group label color
--dropdown-divider-color	--border-subtle	Divider color

Generated Styles (dropdown.g.css)

Component classes generated into @layer vibe.components.

Elements

• dropdown — relative positioned inline-flex wrapper
• dropdown-menu — absolutely positioned panel (hidden by default, flex column when open)
• dropdown-item — full-width interactive row with hover/active/focus/disabled states
• dropdown-item-icon — leading icon slot (1rem, muted)
• dropdown-item-trail — trailing content (auto margin-left, muted, xs text)
• dropdown-item-desc — description text below item (xs, muted, wraps)
• dropdown-group — flex column container for grouped items
• dropdown-group-label — uppercase section label
• dropdown-divider — horizontal rule between sections

Menu Alignment

Variant	Position
bottom-start	Below, left-aligned
bottom-end	Below, right-aligned
bottom-center	Below, centered
top-start	Above, left-aligned
top-end	Above, right-aligned

Item Variants

• danger — red text with danger-subtle hover background

Selection States

Items with aria-selected="true" or aria-checked="true" get a hover overlay background and semibold weight.

Modifiers

• open — shows menu with fade-in animation
• full — menu matches trigger width

TypeScript Types (types/)

DropdownAlignments  // ["bottom-start", "bottom-end", "bottom-center", "top-start", "top-end"]
DropdownItemVariants // ["danger"]

type DropdownAlignment
type DropdownItemVariant

interface DropdownStyleProps {}
interface DropdownMenuStyleProps { align?: DropdownAlignment; open?: boolean; full?: boolean }
interface DropdownItemStyleProps { variant?: DropdownItemVariant; disabled?: boolean }
interface DropdownItemIconStyleProps {}
interface DropdownItemTrailStyleProps {}
interface DropdownItemDescStyleProps {}
interface DropdownGroupStyleProps {}
interface DropdownGroupLabelStyleProps {}
interface DropdownDividerStyleProps {}

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
dropdown.css	Token definitions
dropdown.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (surfaces, borders, spacing, typography, elevation, transitions, z-index).

Build

npm run build