Skip to content

Add CSS-only nested dropdown submenu primitives#84

Draft
developit wants to merge 22 commits into
mainfrom
codex/implement-nested-dropdown-menus
Draft

Add CSS-only nested dropdown submenu primitives#84
developit wants to merge 22 commits into
mainfrom
codex/implement-nested-dropdown-menus

Conversation

@developit

Copy link
Copy Markdown
Owner

Motivation

  • Provide a lightweight way to author nested/child dropdown menus while adhering to the toolkit's CSS-first, low-JS philosophy.

Description

  • Add three new submenu primitives: DropdownMenuSub, DropdownMenuSubTrigger, and DropdownMenuSubContent implemented with the existing createSimpleComponent pattern so they incur no runtime overhead.
  • Extend public types (src/components/dropdown-menu/types.ts) and export the new components from the package entrypoint so consumers can use the API.
  • Implement pure-CSS behavior in src/components/dropdown-menu/style.css using :hover and :focus-within to show/hide positioned child panels and support to="left" alignment for constrained layouts.
  • Add a demo NestedDropdownDemo in demo/src/routes/home.tsx to exercise two-level nested menus (including a left-flipped second-level submenu) without introducing new command wiring or runtime logic.

Testing

  • Ran pnpm -s build which completed successfully.
  • Ran pnpm -s build && pnpm -s build:demo which completed successfully and produced a demo build.
  • Executed an automated Playwright snippet to open the demo and capture a screenshot to validate nested hover/focus behavior which succeeded and produced nested-dropdown.png.
  • Ran pnpm -s exec biome check on the changed files which reported formatting suggestions (formatter output) and flagged a check failure; the functional builds and demo verification remained successful.

Codex Task

@netlify

This comment has been minimized.

@github-actions

github-actions Bot commented Feb 24, 2026

Copy link
Copy Markdown
Contributor

Size Change: +274 B (+1.98%)

Total Size: 14.1 kB

Filename Size Change
dist/index.css 8.53 kB +140 B (+1.67%)
dist/index.js 5.56 kB +134 B (+2.47%)

compressed-size-action

@developit

Copy link
Copy Markdown
Owner Author

@copilot resolve the merge conflicts in this pull request

Copilot AI and others added 2 commits April 21, 2026 11:43
…d-dropdown-menus

# Conflicts:
#	demo/src/routes/home.tsx
#	src/components/dropdown-menu/index.tsx
#	src/components/dropdown-menu/style.css
#	src/components/dropdown-menu/types.ts
#	src/components/popover/style.css
#	src/index.ts
#	src/lib/commands.ts

Co-authored-by: developit <105127+developit@users.noreply.github.com>
@netlify

netlify Bot commented Apr 21, 2026

Copy link
Copy Markdown

Deploy Preview for kinu-sh ready!

Name Link
🔨 Latest commit 28e6d9d
🔍 Latest deploy log https://app.netlify.com/projects/kinu-sh/deploys/69e76382f1180d0008aa1f97
😎 Deploy Preview https://deploy-preview-84--kinu-sh.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot AI commented Apr 21, 2026

Copy link
Copy Markdown

@copilot resolve the merge conflicts in this pull request

Resolved. The merge conflicts with origin/main have been fixed in commit 856850e.

The main branch had refactored attribute selectors from [p="..."] to [k="..."], unified dropdown items into a shared Item component, and added installAdaptiveCommands + mobile drawer support. Key resolutions:

  • dropdown-menu/index.tsx — adopted k= selectors and Item; DropdownMenuSubTrigger now uses createSimpleComponent('item', ...) so it participates in keyboard navigation with [k="item"] selectors
  • dropdown-menu/style.css — updated submenu CSS to k= selectors; added @position-try --k-submenu-left fallback rule and anchor-based submenu positioning inside the @supports block
  • dropdown-menu/types.ts — kept DropdownMenuSubTriggerOwnProps/DropdownMenuSubTriggerProps; item types now re-exported from ../item/types
  • demo/src/routes/home.tsxNestedDropdownDemo updated to use kinu imports and Item component
  • commands.ts / popover/style.css — accepted main's versions in full

Library builds successfully (npm run build). CodeQL scan: 0 alerts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants