@celestia-island/hikari 0.55.209 → 0.55.211

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.209",
+  "version": "0.55.211",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkTabs.test.ts

@@ -255,6 +255,44 @@ describe("HkTabs segmented variant", () => {
     expect(container.querySelector(".hk-tabs-panel")).toBeNull();
   });
 
+  it("names the track for assistive tech (ariaLabel rides the group)", () => {
+    // The former HkSegmentedRadio carried its hosts' dimension names on
+    // the radiogroup; the converged control must not lose that.
+    const { container } = mountLive({ variant: "segmented", ariaLabel: "Node status" });
+    const list = container.querySelector(".hk-tabs-list")!;
+    expect(list.getAttribute("aria-label")).toBe("Node status");
+    // Pill mode names its tablist the same way.
+    const pill = mountLive({ ariaLabel: "Views" });
+    expect(pill.container.querySelector(".hk-tabs-list")!.getAttribute("aria-label")).toBe("Views");
+    // Negative pin: no ariaLabel → the attribute is absent everywhere; an
+    // EMPTY string must not sneak in as a fake name either (R3 M4).
+    const bare = mountLive({ variant: "segmented" });
+    expect(bare.container.querySelector(".hk-tabs-list")!.getAttribute("aria-label")).toBeNull();
+    expect(bare.container.querySelector("[aria-label]")).toBeNull();
+    const empty = mountLive({ variant: "segmented", ariaLabel: "" });
+    expect(empty.container.querySelector(".hk-tabs-list")!.getAttribute("aria-label")).toBeNull();
+  });
+
+  it("collapses duplicate tab keys to the first occurrence (one control per value)", () => {
+    // Ported from the deleted HkSegmentedRadio's guard (R2 2026-10-28):
+    // identical ORDERED keys never trip Vue's own duplicate-key warning,
+    // so without the collapse a duplicated key renders two aria-checked
+    // radios with roving tabindex broken — silently, even in DEV.
+    const { container } = mountLive({
+      variant: "segmented",
+      tabs: [
+        { key: "a", label: "Alpha" },
+        { key: "a", label: "Alpha again (dup)" },
+        { key: "b", label: "Beta" },
+      ],
+    });
+    const triggers = [...container.querySelectorAll<HTMLButtonElement>(".hk-tabs-trigger")];
+    expect(triggers.map((t) => t.textContent?.trim())).toEqual(["Alpha", "Beta"]);
+    expect(container.querySelectorAll('[role="radio"][aria-checked="true"]')).toHaveLength(1);
+    // Roving tabindex stays single.
+    expect(triggers.filter((t) => t.getAttribute("tabindex") !== "-1")).toHaveLength(1);
+  });
+
   it("keeps tab semantics for pill (the default)", () => {
     const { container } = mountLive({});
     const list = container.querySelector(".hk-tabs-list")!;

package/src/components/HkTabs.tsx

@@ -111,6 +111,12 @@ export default defineComponent({
     block: { type: Boolean, default: false },
     /** Disable the whole strip (every trigger). */
     disabled: { type: Boolean, default: false },
+    /** Accessible name of the track (the tablist's / radiogroup's
+     *  aria-label). A segmented strip is a form control — its filter
+     *  hosts label the DIMENSION ("Running state", "Node status"), and
+     *  an unnamed radiogroup inside a named popover is what the former
+     *  HkSegmentedRadio's `label` prop existed to prevent. */
+    ariaLabel: { type: String, default: undefined },
     /** Render tab panel slots below the strip. Segmented mode pickers
      *  have no panels — panels are skipped for that variant. */
     renderPanels: { type: Boolean, default: true },
@@ -172,15 +178,41 @@ export default defineComponent({
     const isSegmented = computed(() => props.variant === "segmented");
     const isBlock = computed(() => isSegmented.value && props.block);
     const mergeSet = computed(() => new Set(props.mergeKeys ?? []));
+    /** First-wins collapse of duplicate keys plus a DEV alarm. The
+     *  contract says keys are unique; a duplicate renders TWO
+     *  aria-checked controls for one value with roving tabindex broken,
+     *  and Vue's own keyed-patch warning never fires for identical
+     *  ORDERED keys (they sync 1:1), so the alarm lives here. Ported
+     *  from the deleted HkSegmentedRadio with its pin tests when the
+     *  duplicate component was removed (R2, 2026-10-28). Every index —
+     *  merged runs, slot units, refs map, keyboard nav, the indicator —
+     *  derives from THIS list, so the collapse keeps them all
+     *  consistent. */
+    const tabs = computed(() => {
+      const seen = new Set<string>();
+      const list = props.tabs.filter((tb) => {
+        if (seen.has(tb.key)) return false;
+        seen.add(tb.key);
+        return true;
+      });
+      if (import.meta.env.DEV && list.length !== props.tabs.length) {
+        // eslint-disable-next-line no-console -- dev-only drift alarm
+        console.warn(
+          "[HkTabs] duplicate tab keys dropped:",
+          props.tabs.map((tb) => tb.key).join(", "),
+        );
+      }
+      return list;
+    });
     /** Merged keys actually present in `tabs`, in tab order. */
     const mergedRun = computed(() =>
-      props.tabs.filter((tb) => mergeSet.value.has(tb.key)).map((tb) => tb.key),
+      tabs.value.filter((tb) => mergeSet.value.has(tb.key)).map((tb) => tb.key),
     );
     /** The contract is ONE contiguous run; a scattered selection would
      *  silently swallow the middle options, so degrade to plain
      *  triggers instead. */
     const mergedContiguous = computed(() => {
-      const idxs = props.tabs
+      const idxs = tabs.value
         .map((tb, i) => (mergeSet.value.has(tb.key) ? i : -1))
         .filter((i) => i >= 0);
       return idxs.length <= 1 || idxs[idxs.length - 1] - idxs[0] === idxs.length - 1;
@@ -213,7 +245,7 @@ export default defineComponent({
     const slotMode = computed(
       () =>
         hasMergedCell.value ||
-        props.tabs.some((tb) => slotSpan(tb) !== 1),
+        tabs.value.some((tb) => slotSpan(tb) !== 1),
     );
     /** Total slot units the strip is divided into while in slot mode:
      *  every rendered option contributes its clamped span, and the
@@ -221,7 +253,7 @@ export default defineComponent({
      *  those triggers). Matches the grid track count in HkTabs.scss. */
     const slotUnits = computed(() => {
       let units = 0;
-      for (const tb of props.tabs) {
+      for (const tb of tabs.value) {
         if (isMergedTab(tb)) continue;
         units += slotSpan(tb);
       }
@@ -236,11 +268,11 @@ export default defineComponent({
     // merged): keep the first enabled trigger tabbable so the group
     // stays reachable — otherwise every trigger would be tabindex=-1.
     const fallbackTabbableIdx = computed(() => {
-      const hasActive = props.tabs.some(
+      const hasActive = tabs.value.some(
         (tb) => tb.key === props.modelValue && isNavigable(tb),
       );
       if (hasActive) return -1;
-      return props.tabs.findIndex((tb) => isNavigable(tb));
+      return tabs.value.findIndex((tb) => isNavigable(tb));
     });
 
     function resolvedActionLabel(action: TabsEndAction): string {
@@ -264,9 +296,9 @@ export default defineComponent({
      *  (falling back to the first option's render — trigger OR cell —
      *  while no geometry exists). */
     function activeFrameEl(): HTMLElement | undefined {
-      const idx = props.tabs.findIndex((tb) => tb.key === props.modelValue);
+      const idx = tabs.value.findIndex((tb) => tb.key === props.modelValue);
       const i = idx >= 0 ? idx : 0;
-      const tab = props.tabs[i];
+      const tab = tabs.value[i];
       if (tab && isMergedTab(tab)) {
         return mergedCellRef.value ?? undefined;
       }
@@ -387,18 +419,18 @@ export default defineComponent({
       void nextTick(() => triggerRefs.value.get(idx)?.focus());
     }
     function selectIndex(idx: number) {
-      const tb = props.tabs[idx];
+      const tb = tabs.value[idx];
       if (!tb || !isNavigable(tb) || props.disabled || tb.key === props.modelValue) return;
       emit("update:modelValue", tb.key);
       focusTrigger(idx);
     }
     function moveSelection(from: number, delta: number) {
-      const n = props.tabs.length;
+      const n = tabs.value.length;
       if (n === 0) return;
       let idx = from;
       for (let step = 0; step < n; step += 1) {
         idx = (idx + delta + n) % n;
-        if (isNavigable(props.tabs[idx])) {
+        if (isNavigable(tabs.value[idx])) {
           selectIndex(idx);
           return;
         }
@@ -410,7 +442,7 @@ export default defineComponent({
       // its keys.
       const target = e.target as HTMLElement | null;
       if (!target || !target.closest(".hk-tabs-trigger")) return;
-      const current = Math.max(0, props.tabs.findIndex((tb) => tb.key === props.modelValue));
+      const current = Math.max(0, tabs.value.findIndex((tb) => tb.key === props.modelValue));
       switch (e.key) {
         case "ArrowRight":
         case "ArrowDown":
@@ -421,13 +453,13 @@ export default defineComponent({
           moveSelection(current, -1);
           break;
         case "Home": {
-          const first = props.tabs.findIndex((tb) => isNavigable(tb));
+          const first = tabs.value.findIndex((tb) => isNavigable(tb));
           if (first >= 0) selectIndex(first);
           break;
         }
         case "End": {
-          for (let i = props.tabs.length - 1; i >= 0; i -= 1) {
-            if (isNavigable(props.tabs[i])) {
+          for (let i = tabs.value.length - 1; i >= 0; i -= 1) {
+            if (isNavigable(tabs.value[i])) {
               selectIndex(i);
               break;
             }
@@ -447,7 +479,7 @@ export default defineComponent({
        *  cell — merged options' panels are not rendered while merged
        *  (unchanged contract; the whole container drops out instead). */
       const panelTab = props.renderPanels && !isSegmented.value
-        ? props.tabs.find((tb) => tb.key === props.modelValue && !isMergedTab(tb))
+        ? tabs.value.find((tb) => tb.key === props.modelValue && !isMergedTab(tb))
         : undefined;
       const listChildren = [
         <div
@@ -457,7 +489,7 @@ export default defineComponent({
           data-ready={indicatorReady.value || undefined}
         />,
       ];
-      props.tabs.forEach((tab, idx) => {
+      tabs.value.forEach((tab, idx) => {
         if (isMergedTab(tab)) {
           // The merged run renders as ONE combined cell at its first
           // option's position — a real in-flow child of the track (joins
@@ -530,6 +562,7 @@ export default defineComponent({
               : undefined
           }
           role={isSegmented.value ? "radiogroup" : "tablist"}
+          aria-label={props.ariaLabel || undefined}
           onKeydown={onKeydown}
         >
           {/* Tagless group: the track stays a plain element (ref/CSS/

package/src/components/HkTreemap.scss

@@ -79,7 +79,7 @@
   border-radius: var(--radius-xs, 0.1875rem);
   color: var(--hk-treemap-fg, white);
   /* The 1px gutter between cells is the theme mortar showing through. */
-  outline: 1px solid rgb(var(--color-bg, 255 255 255) / 55%);
+  outline: 1px solid rgb(var(--color-background, 255 255 255) / 55%);
   outline-offset: -1px;
 }
 

package/src/components/HkTreemap.test.tsx

@@ -404,7 +404,7 @@ describe("HkTreemap chrome contract (SCSS pins)", () => {
 
   it("the cell mortar reads the theme — no fixed white gutters (the dark-mode glare)", () => {
     expect(css).not.toContain("#fff");
-    expect(css).toMatch(/--color-bg/);
+    expect(css).toMatch(/--color-background/);
     expect(css).toMatch(/--color-muted/);
   });
 });

package/src/index.ts

@@ -673,8 +673,6 @@ export { default as HkPopupSelect } from "./components/HkPopupSelect";
 export { default as HkProgressBar } from "./components/HkProgressBar";
 export { default as HkProgressDialog } from "./components/HkProgressDialog";
 export { default as HkRadio } from "./components/HkRadio";
-export { default as HkSegmentedRadio } from "./components/HkSegmentedRadio";
-export type { HkSegmentedRadioOption } from "./components/HkSegmentedRadio";
 export { default as HkScrollContainer } from "./components/HkScrollContainer";
 export { default as HkSearchInput } from "./components/HkSearchInput";
 export { default as HkSplash } from "./components/HkSplash";

package/src/components/HkSegmentedRadio.scss

@@ -1,60 +0,0 @@
-/**
- * HkSegmentedRadio chrome — the single-choice joined strip. One chrome
- * for every filter-popover option group: the two chest popovers this
- * component converges styled their borders, paddings and hover tints
- * independently and drifted apart within one release week. Tokens only
- * (hikari vars with px fallbacks), per the component SCSS convention.
- */
-
-.hk-segmented-radio {
-  display: flex;
-  width: 100%;
-  overflow: hidden;
-  border: 1px solid rgb(var(--color-border));
-  border-radius: var(--radius-sm, 4px);
-
-  &[data-disabled] {
-    opacity: 0.5;
-  }
-}
-
-.hk-segmented-radio-option {
-  flex: 1 1 0;
-  min-width: 0;
-  appearance: none;
-  border: 0;
-  border-inline-end: 1px solid rgb(var(--color-border));
-  padding: var(--space-6, 0.375rem) var(--space-10, 10px);
-  background: transparent;
-  color: rgb(var(--color-text) / 78%);
-  font-size: var(--text-xs, 12px);
-  line-height: 1.4;
-  white-space: nowrap;
-  cursor: pointer;
-  transition:
-    background var(--duration-short, 0.15s),
-    color var(--duration-short, 0.15s);
-
-  &:last-child {
-    border-inline-end: 0;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  &[data-on] {
-    background: rgb(var(--color-primary) / 14%);
-    color: rgb(var(--color-primary));
-    font-weight: 600;
-  }
-
-  &:not([data-on]):not(:disabled):hover {
-    background: rgb(var(--color-primary) / 6%);
-  }
-
-  &:focus-visible {
-    outline: 2px solid rgb(var(--color-primary) / 60%);
-    outline-offset: -2px;
-  }
-}

package/src/components/HkSegmentedRadio.test.tsx

@@ -1,259 +0,0 @@
-import { afterEach, describe, expect, it } from "vitest";
-import { createApp, h, nextTick, ref } from "vue";
-
-import HkSegmentedRadio from "./HkSegmentedRadio";
-
-const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
-
-function mount(node: ReturnType<typeof h>) {
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-  const app = createApp({ render: () => node });
-  app.mount(container);
-  mounts.push({ app, container });
-  return container;
-}
-
-afterEach(() => {
-  for (const { app, container } of mounts.splice(0)) {
-    app.unmount();
-    container.remove();
-  }
-});
-
-const OPTIONS = [
-  { value: "active", label: "Active only" },
-  { value: "ended", label: "Ended only" },
-  { value: "all", label: "Show all" },
-];
-
-describe("HkSegmentedRadio", () => {
-  it("renders one radio segment per option with radiogroup semantics", () => {
-    const c = mount(
-      h(HkSegmentedRadio, {
-        label: "Node status",
-        options: OPTIONS,
-        modelValue: "ended",
-      }),
-    );
-    const radios = [...c.querySelectorAll<HTMLButtonElement>(".hk-segmented-radio-option")];
-    expect(radios.map((r) => r.textContent?.trim())).toEqual([
-      "Active only",
-      "Ended only",
-      "Show all",
-    ]);
-    const group = c.querySelector(".hk-segmented-radio")!;
-    expect(group.getAttribute("role")).toBe("radiogroup");
-    expect(group.getAttribute("aria-label")).toBe("Node status");
-    // Radio semantics: aria-checked + roving tabindex on the picked one.
-    expect(radios[1].getAttribute("aria-checked")).toBe("true");
-    expect(radios[1].getAttribute("tabindex")).toBe("0");
-    expect(radios[0].getAttribute("aria-checked")).toBe("false");
-    expect(radios[0].getAttribute("tabindex")).toBe("-1");
-    expect(radios[1].hasAttribute("data-on")).toBe(true);
-    expect(radios[0].hasAttribute("data-on")).toBe(false);
-  });
-
-  it("clicking another segment emits exactly its value (host feeds it back)", async () => {
-    const emitted: string[] = [];
-    // A REACTIVE host: the component is controlled, so the test host
-    // must apply what it emits (the real popover does the same).
-    const c = mount(
-      h({
-        setup() {
-          const value = ref("active");
-          return () =>
-            h(HkSegmentedRadio, {
-              label: "Node status",
-              options: OPTIONS,
-              modelValue: value.value,
-              "onUpdate:modelValue": (v: string) => {
-                emitted.push(v);
-                value.value = v;
-              },
-            });
-        },
-      }),
-    );
-    const radios = () => [...c.querySelectorAll<HTMLButtonElement>(".hk-segmented-radio-option")];
-    radios()[2].click();
-    // Vue re-renders asynchronously: the controlled contract needs the
-    // host's modelValue writeback flushed before the next interaction.
-    await nextTick();
-    radios()[0].click();
-    await nextTick();
-    expect(emitted).toEqual(["all", "active"]);
-    expect(radios()[0].hasAttribute("data-on")).toBe(true);
-  });
-
-  it("keyboard arrows move the pick with wrapping and refocus the new segment", async () => {
-    const emitted: string[] = [];
-    const c = mount(
-      h(
-        {
-          setup() {
-            const value = ref("ended");
-            return () =>
-              h(HkSegmentedRadio, {
-                label: "Node status",
-                options: OPTIONS,
-                modelValue: value.value,
-                "onUpdate:modelValue": (v: string) => {
-                  emitted.push(v);
-                  value.value = v;
-                },
-              });
-          },
-        },
-      ),
-    );
-    const group = c.querySelector<HTMLElement>(".hk-segmented-radio")!;
-    group.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }),
-    );
-    expect(emitted).toEqual(["all"]);
-    await nextTick();
-    group.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
-    );
-    await nextTick();
-    expect(emitted).toEqual(["all", "active"]);
-    // Home/End jump to the ends.
-    group.dispatchEvent(new KeyboardEvent("keydown", { key: "End", bubbles: true }));
-    await nextTick();
-    expect(emitted).toEqual(["all", "active", "all"]);
-    group.dispatchEvent(new KeyboardEvent("keydown", { key: "Home", bubbles: true }));
-    await nextTick();
-    expect(emitted).toEqual(["all", "active", "all", "active"]);
-  });
-
-  it("disabled disables every segment and the group carries the mark", () => {
-    const emitted: string[] = [];
-    const c = mount(
-      h(HkSegmentedRadio, {
-        label: "Node status",
-        options: OPTIONS,
-        modelValue: "active",
-        disabled: true,
-        "onUpdate:modelValue": (v: string) => emitted.push(v),
-      }),
-    );
-    const group = c.querySelector(".hk-segmented-radio")!;
-    expect(group.hasAttribute("data-disabled")).toBe(true);
-    const radios = [...c.querySelectorAll<HTMLButtonElement>(".hk-segmented-radio-option")];
-    for (const r of radios) expect(r.disabled).toBe(true);
-    radios[1].click();
-    expect(emitted).toEqual([]);
-  });
-
-  it("an unpicked model keeps the FIRST segment tabbable (roving entry point)", () => {
-    const c = mount(
-      h(HkSegmentedRadio, {
-        label: "Node status",
-        options: OPTIONS,
-        modelValue: "",
-      }),
-    );
-    const radios = [...c.querySelectorAll<HTMLButtonElement>(".hk-segmented-radio-option")];
-    expect(radios[0].getAttribute("tabindex")).toBe("0");
-    expect(radios[1].getAttribute("tabindex")).toBe("-1");
-  });
-
-  it("an unpicked model reads honest edges (ArrowLeft → LAST, ArrowRight → FIRST)", async () => {
-    // R3 pin: the index === -1 branches had no coverage — a plain modulo
-    // wrap would send ArrowLeft-from-unpicked to the MIDDLE option
-    // ((-1 - 1 + 3) % 3 === 1), not the honest last edge.
-    const press = (root: HTMLElement, key: string) =>
-      root
-        .querySelector<HTMLElement>(".hk-segmented-radio")!
-        .dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true }));
-    const host = (push: (v: string) => void) =>
-      h({
-        setup() {
-          const value = ref("");
-          return () =>
-            h(HkSegmentedRadio, {
-              label: "Node status",
-              options: OPTIONS,
-              modelValue: value.value,
-              "onUpdate:modelValue": (v: string) => {
-                push(v);
-                value.value = v;
-              },
-            });
-        },
-      });
-
-    // ArrowLeft from unpicked lands on the LAST option.
-    const fromLeft: string[] = [];
-    const leftRoot = mount(h(host((v) => fromLeft.push(v))));
-    press(leftRoot, "ArrowLeft");
-    await nextTick();
-    expect(fromLeft).toEqual(["all"]);
-
-    // ArrowRight from unpicked lands on the FIRST option.
-    const fromRight: string[] = [];
-    const rightRoot = mount(h(host((v) => fromRight.push(v))));
-    press(rightRoot, "ArrowRight");
-    await nextTick();
-    expect(fromRight).toEqual(["active"]);
-  });
-
-  it("keyboard nav over duplicate-bearing options walks the DEDUPED list", async () => {
-    // Delta-review S2 pin: the onGroupKeydown index math must run over
-    // dedupedOptions (raw options with duplicates make the honest-edge
-    // math land on a NON-rendered occurrence — ArrowLeft-from-unpicked
-    // over [A, A2, B] would emit "A" (hidden), not "B" (visually last)).
-    const emitted: string[] = [];
-    const c = mount(
-      h({
-        setup() {
-          const value = ref("");
-          return () =>
-            h(HkSegmentedRadio, {
-              label: "Node status",
-              options: [
-                { value: "active", label: "Active only" },
-                { value: "active", label: "Active again (dup)" },
-                { value: "all", label: "Show all" },
-              ],
-              modelValue: value.value,
-              "onUpdate:modelValue": (v: string) => {
-                emitted.push(v);
-                value.value = v;
-              },
-            });
-        },
-      }),
-    );
-    const group = c.querySelector<HTMLElement>(".hk-segmented-radio")!;
-    group.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }),
-    );
-    await nextTick();
-    // The last RENDERED segment, not the hidden duplicate.
-    expect(emitted).toEqual(["all"]);
-  });
-
-  it("duplicate option values collapse to one radio (first wins, one tabbable)", () => {
-    // R3 pin: the dedupe filter had no coverage — without it a
-    // duplicated value renders two aria-checked radios for one value.
-    const c = mount(
-      h(HkSegmentedRadio, {
-        label: "Node status",
-        options: [
-          { value: "active", label: "Active only" },
-          { value: "ended", label: "Ended only" },
-          { value: "active", label: "Active again (dup)" },
-        ],
-        modelValue: "",
-      }),
-    );
-    const radios = [...c.querySelectorAll<HTMLButtonElement>(".hk-segmented-radio-option")];
-    // Exactly two segments render — the duplicate "active" is dropped.
-    expect(radios.map((r) => r.textContent?.trim())).toEqual(["Active only", "Ended only"]);
-    expect(c.querySelectorAll('[data-option="active"]')).toHaveLength(1);
-    // And the roving tabindex stays single (unpicked → first segment only).
-    expect(radios.filter((r) => r.getAttribute("tabindex") === "0")).toHaveLength(1);
-  });
-});

package/src/components/HkSegmentedRadio.tsx

@@ -1,141 +0,0 @@
-import { computed, defineComponent, nextTick, ref, type PropType } from "vue";
-
-import "./HkSegmentedRadio.scss";
-
-/** One joined segment of the single-choice strip. */
-export interface HkSegmentedRadioOption {
-  /** Stable identity — emitted back through `update:modelValue`. */
-  value: string;
-  label: string;
-}
-
-/**
- * HkSegmentedRadio — the single-choice joined strip for filter popovers
- * and compact pickers: a flat bordered track of full-label segments, the
- * picked one carrying the primary tint (multi-select's sibling is
- * HkPillToggleGroup, whose toggle semantics cannot express "exactly
- * one"; HkTabs owns the view-switching indicator strip — this component
- * is the FORM control in that gap, radio semantics throughout).
- *
- * Grammar ported from the two chest filter popovers that hand-rolled
- * this control independently (history TopicFilterMenu 2026-10-21, cruise
- * CruiseNodeFilterMenu 2026-10-26) with DIFFERENT paddings and hover
- * tints — the point of the component is that they converge on one
- * chrome (#demiurge.673 follow-up, 2026-10-27).
- *
- * Keyboard: a true radiogroup — roving tabindex on the picked segment,
- * Arrow/Home/End to move (wrapping), Enter/Space to pick.
- */
-export default defineComponent({
-  name: "HkSegmentedRadio",
-  props: {
-    /** Accessible name of the group (the radiogroup's aria-label). */
-    label: { type: String, required: true },
-    options: {
-      type: Array as PropType<HkSegmentedRadioOption[]>,
-      default: () => [],
-    },
-    /** The picked value — single source of truth, never mutated here. */
-    modelValue: { type: String, default: "" },
-    disabled: { type: Boolean, default: false },
-  },
-  emits: {
-    "update:modelValue": (_value: string) => true,
-  },
-  setup(props, { emit }) {
-    const groupRef = ref<HTMLElement | null>(null);
-    const picked = computed(() =>
-      props.options.find((item) => item.value === props.modelValue),
-    );
-    // Duplicate values would render two aria-checked radios (two
-    // tabbable segments) and hazard the keyed patch — keep the first
-    // occurrence and say so in dev.
-    const dedupedOptions = computed(() => {
-      const seen = new Set<string>();
-      return props.options.filter((item) => {
-        if (seen.has(item.value)) return false;
-        seen.add(item.value);
-        return true;
-      });
-    });
-    if (import.meta.env.DEV && dedupedOptions.value.length !== props.options.length) {
-      // eslint-disable-next-line no-console -- dev-only drift alarm
-      console.warn(
-        "[HkSegmentedRadio] duplicate option values dropped:",
-        props.options.map((o) => o.value).join(", "),
-      );
-    }
-
-    function choose(value: string): void {
-      if (value !== props.modelValue) emit("update:modelValue", value);
-    }
-
-    function onGroupKeydown(event: KeyboardEvent): void {
-      // Walk the DEDUPED list: index math over raw options counts
-      // non-rendered duplicates and can land on a hidden occurrence.
-      const items = dedupedOptions.value;
-      if (items.length === 0) return;
-      const index = items.findIndex((item) => item.value === props.modelValue);
-      let next: number;
-      if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-        // Nothing picked yet: the edges are honest neighbors (last /
-        // first), not the element at the wrap of index -1.
-        next = index === -1
-          ? items.length - 1
-          : (index - 1 + items.length) % items.length;
-      } else if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-        next = index === -1 ? 0 : (index + 1) % items.length;
-      } else if (event.key === "Home") {
-        next = 0;
-      } else if (event.key === "End") {
-        next = items.length - 1;
-      } else {
-        return;
-      }
-      event.preventDefault();
-      const value = items[next]!.value;
-      choose(value);
-      void nextTick(() => {
-        // Walk the rendered buttons comparing dataset — a quoted
-        // attribute selector with CSS.escape throws on quote-bearing
-        // values in happy-dom and misses NUL-bearing ones, which would
-        // kill the refocus as an unhandled rejection.
-        const target = Array.from(
-          groupRef.value?.querySelectorAll<HTMLElement>("[data-option]") ?? [],
-        ).find((el) => el.dataset.option === value);
-        target?.focus();
-      });
-    }
-
-    return () => (
-      <div
-        ref={groupRef}
-        class="hk-segmented-radio"
-        role="radiogroup"
-        aria-label={props.label}
-        data-disabled={props.disabled || undefined}
-        onKeydown={onGroupKeydown}
-      >
-        {dedupedOptions.value.map((item) => {
-          const active = item.value === props.modelValue;
-          return (
-            <button
-              key={item.value}
-              type="button"
-              role="radio"
-              aria-checked={active}
-              tabindex={picked.value ? (active ? 0 : -1) : item === props.options[0] ? 0 : -1}
-              class="hk-segmented-radio-option"
-              data-option={item.value}
-              data-on={active || undefined}
-              disabled={props.disabled}
-              onClick={() => choose(item.value)}
-            >
-              {item.label}
-            </button>
-          );
-        })}
-      </div>
-    );
-  },
-});