refactor(ui-inputs): extract buildGroupRows into group-rows.ts

GroupSelect and GroupCombobox held the identical GroupRow-derivation loop
(header/boundary + option-index pushing), so the header:false boundary fix
had to land in both copies. Move the encoding to a single buildGroupRows()
helper in src/internal/group-rows.ts and call it from both -- the GroupRow
invariant is now single-site. The empty-group skip guard is a no-op on the
GroupCombobox path (filteredData already drops empty groups). Behaviour and
DOM unchanged; 100% coverage + browser suites held.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Elenyan-Script

packages/ui-inputs/src/components/GroupCombobox.vue

@@ -77,10 +77,10 @@
 <script setup lang="ts" generic="T extends SelectItem">
 import {computed, ref, useTemplateRef, watch} from 'vue';
 
-import type {GroupRow} from '../internal/group-rows';
 import type {LabelKey, SelectItem} from '../types';
 
 import {useListbox} from '../composables/useListbox';
+import {buildGroupRows} from '../internal/group-rows';
 import {ensureRefValueExists} from '../internal/reactivity';
 import OptionList from './OptionList.vue';
 
@@ -171,21 +171,10 @@ const filteredOptions = computed(() => filteredData.value.flatMap((g) => g.optio
 // Stable `v-for` keys for OptionList, indexed by the flat (filtered) option index `rows` navigates.
 const optionKeys = computed(() => filteredOptions.value.map((option) => String(option.id)));
 
-// Build the mixed header/option row sequence from the filtered groups. Empty groups are already
-// excluded by filteredData, so we never emit a header row for a group with no visible options.
-const filteredRows = computed(() => {
-    const result: GroupRow[] = [];
-    let index = 0;
-    for (const group of filteredData.value) {
-        // A named group emits its header; a headerless group emits a boundary so its options
-        // never fold into the preceding group's role="group".
-        result.push(group.header !== false ? {type: 'header', text: group.text} : {type: 'boundary'});
-        for (const _ of group.options) {
-            result.push({type: 'option', index: index++});
-        }
-    }
-    return result;
-});
+// The mixed header/boundary/option row sequence over the filtered groups — same single-site
+// `buildGroupRows` encoding GroupSelect uses (filteredData has already dropped empty groups,
+// so its empty-group guard is a no-op here).
+const filteredRows = computed(() => buildGroupRows(filteredData.value));
 
 /** `aria-selected` marks the COMMITTED value — OptionList only asks about rendered indices. */
 const isSelected = (index: number): boolean => filteredOptions.value[index].id === model.value;

packages/ui-inputs/src/components/GroupSelect.vue

@@ -78,10 +78,10 @@
 <script setup lang="ts" generic="T extends SelectItem">
 import {computed, useTemplateRef} from 'vue';
 
-import type {GroupRow} from '../internal/group-rows';
 import type {LabelKey, SelectItem} from '../types';
 
 import {useListbox} from '../composables/useListbox';
+import {buildGroupRows} from '../internal/group-rows';
 import OptionList from './OptionList.vue';
 
 const {
@@ -145,22 +145,9 @@ const selected = computed(() => flatOptions.value.find((option) => option.id ===
 // Stable `v-for` keys for OptionList, indexed by the flat option index `rows` navigates.
 const optionKeys = computed(() => flatOptions.value.map((option) => String(option.id)));
 
-// Build the mixed header/option row sequence. Groups with no options get no header row —
-// an empty group whose header renders would confuse users and violate the constraint.
-const rows = computed(() => {
-    const result: GroupRow[] = [];
-    let index = 0;
-    for (const group of groups) {
-        if (!group.options.length) continue;
-        // A named group emits its header; a headerless group emits a boundary so its options
-        // never fold into the preceding group's role="group".
-        result.push(group.header !== false ? {type: 'header', text: group.text} : {type: 'boundary'});
-        for (const _ of group.options) {
-            result.push({type: 'option', index: index++});
-        }
-    }
-    return result;
-});
+// The mixed header/boundary/option row sequence — the encoding lives once in `buildGroupRows`
+// (shared with GroupCombobox), so the boundary/empty-group rules stay a single-site invariant.
+const rows = computed(() => buildGroupRows(groups));
 
 /** `aria-selected` marks the COMMITTED value — OptionList only asks about rendered indices. */
 const isSelected = (index: number): boolean => flatOptions.value[index].id === model.value;

packages/ui-inputs/src/internal/group-rows.ts

@@ -5,3 +5,33 @@
  * group's `role="group"`.
  */
 export type GroupRow = {type: 'header'; text: string} | {type: 'boundary'} | {type: 'option'; index: number};
+
+/**
+ * Turn caller-ordered groups into the flat header/boundary/option row sequence `OptionList`
+ * lays out — the single-site encoding of the `GroupRow` invariant, shared by `GroupSelect`
+ * (raw `groups`) and `GroupCombobox` (its filtered groups) so the boundary rule can never
+ * drift between the two again.
+ *
+ * Only `options.length`, `text`, and `header` are read — never an option's contents — so the
+ * caller keeps ownership of the option type. Option `index` runs across ALL groups in order,
+ * matching the flat index every consumer (`pointer`, `isSelected`, the `#option` slot) keys on.
+ *
+ * A group with no options emits NOTHING: an empty group whose header rendered would confuse
+ * users. (`GroupCombobox` pre-filters empty groups, so that guard is a no-op on its path.)
+ */
+export const buildGroupRows = (
+    groups: readonly {options: readonly unknown[]; text: string; header?: boolean}[],
+): GroupRow[] => {
+    const rows: GroupRow[] = [];
+    let index = 0;
+    for (const group of groups) {
+        if (!group.options.length) continue;
+        // A named group emits its header; a headerless group emits a boundary so its options
+        // never fold into the preceding group's role="group".
+        rows.push(group.header !== false ? {type: 'header', text: group.text} : {type: 'boundary'});
+        for (const _ of group.options) {
+            rows.push({type: 'option', index: index++});
+        }
+    }
+    return rows;
+};