dropdown · 下拉菜单

依据 APG Menu Button:↑↓ 移动 · Esc 关闭并把焦点还给按钮 · Tab 关闭 · Enter/Space 激活 · Home/End 跳首末。
⚠️ 菜单项 tabindex="-1":不参与 Tab 序列, 因为 Tab 的语义是「关闭菜单」。

1 · 基本用法(试试键盘)

(选中项会显示在这里)

菜单里的那条分隔线只写 data-dd-sep 就行: role="separator" 与 .dd__sep 由组件补。 方向键会跳过它 —— 分隔线不是可选项,让它能被"选中"是错的。

2 · 带勾选(选中性不只靠颜色)

3 · 靠右对齐(窄屏不出屏)

对比:错写法 vs 本库写法

❌ 常见写法:菜单项只有 24px

下拉菜单 · 每项高度

24px 一行:手指点下去会压到隔壁,触屏用户每点错一次就得重来。本库在这块踩过更隐蔽的坑 —— 写 min-height: 44px,量出来只有 24px(<li> 是 display:list-item),所以现在用的是显式 height。

✅ 本库:显式 height: 44px

下拉菜单 · 每项高度

同一个 44,min-height 与 height 在列表项上是两回事。桌面小屏看不出来,只有量了才发现 —— 所以这里把两种结果并排摆出来。