iter(g166): 下拉选项支持分组标题

apps/demo/main.ts

@@ -162,6 +162,7 @@ const sheetOpen = signal(false); // 底部抽屉开合
 const stickyOpen = signal(false); // 防误关弹窗开合
 const sound = signal(true); // 无可见文案的开关演示
 const city = signal('');
+const stackPick = signal(''); // 分组下拉的选中值
 const size = signal('m');
 const bio = signal('');
 
@@ -323,6 +324,18 @@ const content = h(
     h('div', { class: 'row' }, switchButton({ label: '夜间模式', checked: nightMode }), h('span', { class: 'out' }, () => (nightMode() ? '开' : '关'))),
     h('div', { class: 'row' }, switchButton({ checked: sound, ariaLabel: '通知声音' }), h('span', { class: 'out' }, () => `无可见文案的开关（ariaLabel 兜底，读屏念「通知声音」）：${sound() ? '开' : '关'}`)),
     h('div', { class: 'row' }, select({ options: cities.map((c) => ({ value: c, label: c })), value: city, placeholder: '选择城市…', clearable: true }), h('span', { class: 'out' }, () => (city() ? `城市：${city()}（点 × 或按 Delete 清空）` : '未选择'))),
+    h('div', { class: 'row' }, select({ // 分组选项：相邻同组合成一段，过滤后空组标题自动隐藏
+      options: [
+        { value: 'vue', label: 'Vue 3', group: '前端框架' },
+        { value: 'react', label: 'React 19', group: '前端框架' },
+        { value: 'svelte', label: 'Svelte 5', group: '前端框架' },
+        { value: 'node', label: 'Node.js 22', group: '服务端运行时' },
+        { value: 'deno', label: 'Deno 2', group: '服务端运行时' },
+        { value: 'bun', label: 'Bun 1.2', group: '服务端运行时' },
+      ],
+      value: stackPick,
+      placeholder: '按分类选技术栈…',
+    }), h('span', { class: 'out' }, () => (stackPick() ? `技术栈：${stackPick()}` : '分组下拉：试试搜索「d」'))),
     h('div', { class: 'row' }, radioGroup({ options: [{ value: 's', label: '小' }, { value: 'm', label: '中' }, { value: 'l', label: '大' }], value: size })),
     textarea({ placeholder: '一句话介绍…', value: bio, rows: 2, maxCount: 30 }),
     h('span', { class: 'out' }, () => `简介 ${bio().length} 字`),