@celestia-island/hikari 0.55.205 → 0.55.207

package/package.json

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

package/src/components/HkCrossfade.scss

@@ -39,12 +39,20 @@
  * the composite never dips toward the background (the classic
  * double-exposure artifact of symmetric linear fades). The leaving item
  * also drops pointer events: it is dead content and must not intercept
- * clicks while it dissolves under the incoming one. */
+ * clicks while it dissolves under the incoming one.
+ *
+ * The enter side additionally honours --hk-crossfade-enter-delay (default
+ * 0): the sequencing hook HkTransitionContainer sets per swap (2026-10-27
+ * user direction — a height-changing swap holds the new content at
+ * opacity 0 until the box is ready, so nothing is clipped by the morph).
+ * Declared as a LONGHAND after the shorthand: the `transition` shorthand
+ * resets transition-delay to 0, so the order here is load-bearing. */
 .hk-crossfade-enter-active {
   transition:
     opacity
     var(--duration-normal, 0.3s)
     var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
+  transition-delay: var(--hk-crossfade-enter-delay, 0ms);
 }
 
 .hk-crossfade-leave-active {

package/src/components/HkCrossfade.test.tsx

@@ -30,6 +30,7 @@ function mountCrossfade(opts: {
   initial?: string;
   appear?: boolean;
   disabled?: boolean;
+  enterDelay?: number;
 } = {}): Harness {
   const container = document.createElement("div");
   document.body.appendChild(container);
@@ -45,6 +46,7 @@ function mountCrossfade(opts: {
             swapKey: current.value,
             appear: opts.appear ?? false,
             disabled: opts.disabled ?? false,
+            enterDelay: opts.enterDelay ?? 0,
           },
           {
             default: () => h("p", { class: "body" }, `body-${current.value}`),
@@ -181,6 +183,27 @@ describe("HkCrossfade — DOM contract", () => {
     assertNoFrozenClasses(settled[0]!);
   });
 
+  it("enterDelay widens the watchdog budget: a delayed enter mid-flight is not 'stalled'", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    // 300ms choreographed hold: the enter fade starts at 300 and runs to
+    // 600, so the BASE budget (450) expires mid-enter — the sweep must
+    // NOT fire there, or it would strip a live transition's classes.
+    const DELAY = 300;
+    const { container, set } = mountCrossfade({ enterDelay: DELAY });
+    await set("b");
+    await vi.advanceTimersByTimeAsync(CROSSFADE_WATCHDOG_MS + 100); // past the base, inside the extended
+    // Both generations still held by the (rAF-frozen) engine: no sweep
+    // has stripped anything.
+    expect(keys(container)).toEqual(["a", "b"]);
+    // Past the extended budget the stall sweep bites as usual.
+    await vi.advanceTimersByTimeAsync(DELAY + 200);
+    const list = items(container);
+    expect(list).toHaveLength(1);
+    expect(list[0]!.dataset.crossfadeKey).toBe("b");
+    assertNoFrozenClasses(list[0]!);
+  });
+
   it("appear dissolves the first item in; the watchdog un-freezes it under rAF starvation", async () => {
     vi.useFakeTimers();
     freezeRaf();
@@ -235,6 +258,15 @@ describe("HkCrossfade — stylesheet contract", () => {
     const enter = css.match(/\.hk-crossfade-enter-active[^{]*\{[^}]*\}/)?.[0] ?? "";
     expect(enter).toContain("transition: opacity");
     expect(enter).toContain("var(--duration-normal, 0.3s)");
+    // The choreography hook (2026-10-27): the enter side honours the
+    // per-swap delay property — as a LONGHAND declared after the
+    // shorthand (the `transition` shorthand resets transition-delay, so
+    // the order in the rule is load-bearing).
+    const enterIdx = css.indexOf(".hk-crossfade-enter-active");
+    const delayIdx = css.indexOf("transition-delay: var(--hk-crossfade-enter-delay", enterIdx);
+    const shorthandIdx = css.indexOf("transition:", enterIdx);
+    expect(delayIdx).toBeGreaterThan(-1);
+    expect(delayIdx).toBeGreaterThan(shorthandIdx);
     for (const phase of ["enter-from", "leave-to"]) {
       const block = css.match(new RegExp(`\\.hk-crossfade-${phase}[^{]*\\{[^}]*\\}`))?.[0] ?? "";
       expect(block, `hk-crossfade-${phase} rule missing`).toContain("opacity: 0");
@@ -267,7 +299,9 @@ describe("HkCrossfade — wiring contract", () => {
     expect(src).toContain("export const CROSSFADE_WATCHDOG_MS = 450;");
     expect(src).toContain("suppress.value = true;");
     expect(src).toContain("el.remove();");
-    expect(src).toContain("useReportedTransition(REPORT_MS)");
+    // The report window is a per-arm provider so a choreographed enter
+    // (delayed by the host) re-reads the window wide enough each arm.
+    expect(src).toContain("const report = useReportedTransition(reportWindow);");
     expect(src).toContain("armReport(); armWatchdog();");
   });
 });

package/src/components/HkCrossfade.tsx

@@ -62,7 +62,20 @@ const REPORT_MS = CROSSFADE_WATCHDOG_MS;
  *   the sweep fires into an already-settled DOM and is a no-op. After a
  *   real stall it strips the frozen transition classes, removes the stale
  *   item Vue can no longer unmount, and degrades to synchronous rendering
- *   until the next `swapKey` change re-arms the Transition fresh.
+ *   until the next `swapKey` change re-arms the Transition fresh. The
+ *   budget scales by `enterDelay` (below) so a choreographed swap whose
+ *   enter starts late never looks stalled.
+ * - `enterDelay` (ms, default 0) holds the ENTER side at opacity 0 for a
+ *   beat before its fade runs — the sequencing hook HkTransitionContainer
+ *   drives (2026-10-27 user direction: a height-changing swap fades the
+ *   old content out first; the new content only fades in once the box is
+ *   ready, so nothing is ever clipped by the animating size). The delay
+ *   itself travels as the `--hk-crossfade-enter-delay` custom property on
+ *   an ancestor (consumed by the enter-active rule), so it can be set per
+ *   swap after the incoming content is measured; the prop exists so the
+ *   watchdog and animation-bus windows KNOW the worst case and arm wide
+ *   enough. Direct consumers who never touch the property keep the
+ *   byte-identical concurrent dissolve.
  */
 export default defineComponent({
   name: "HkCrossfade",
@@ -71,6 +84,10 @@ export default defineComponent({
     tag: { type: String, default: "div" },
     appear: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
+    /** Enter-side hold (ms) the watchdog/report budgets must cover; the
+     *  applied delay is the CSS custom property, this only widens the
+     *  budgets. Keep it at the worst case the host can set. */
+    enterDelay: { type: Number, default: 0 },
   },
   setup(props, { slots }) {
     const hostRef = ref<HTMLElement | null>(null);
@@ -83,8 +100,11 @@ export default defineComponent({
     // ── Animation-bus participation ──────────────────────────────────
     // One swap runs an enter AND a leave concurrently; refcount them so
     // the shared track stays armed until BOTH settle (HkListTransition
-    // pattern).
-    const report = useReportedTransition(REPORT_MS);
+    // pattern). The window widens by the choreographed enter hold — read
+    // per arm, so a host that raises `enterDelay` mid-life is covered
+    // without a re-setup.
+    const reportWindow = () => REPORT_MS + Math.max(props.enterDelay, 0);
+    const report = useReportedTransition(reportWindow);
     let pending = 0;
     const armReport = () => {
       pending++;
@@ -96,13 +116,20 @@ export default defineComponent({
     };
 
     // ── Swap-stall watchdog ──────────────────────────────────────────
+    /** Budget for one arm: the base sweep window plus the choreographed
+     *  enter hold — a delayed enter is mid-flight, not stalled, when the
+     *  base budget expires. */
+    function budget(): number {
+      return CROSSFADE_WATCHDOG_MS + Math.max(props.enterDelay, 0);
+    }
+
     let watchdog: ReturnType<typeof setTimeout> | null = null;
 
     function armWatchdog(): void {
       // Re-arm per swap event (enter or leave start); a healthy swap lets
       // the timer fire into a settled DOM, where the sweep is a no-op.
       if (watchdog !== null) clearTimeout(watchdog);
-      watchdog = setTimeout(onWatchdog, CROSSFADE_WATCHDOG_MS);
+      watchdog = setTimeout(onWatchdog, budget());
     }
 
     function sweepFrozenClasses(el: Element): boolean {

package/src/components/HkFilterTrigger.test.tsx

@@ -32,11 +32,16 @@ const triggerButton = (c: HTMLElement) =>
   c.querySelector<HTMLButtonElement>(".hk-filter-trigger .hk-icon-button")!;
 
 describe("HkFilterTrigger", () => {
-  it("renders the filter affordance as a ghost/28 icon button (the theme toggle's step)", () => {
+  it("renders the filter affordance on the chrome action ladder (ghost class, ladder step)", () => {
     const c = mount(h(HkFilterTrigger, { fields: FIELDS, modelValue: [] }));
     const btn = triggerButton(c);
     expect(btn).toBeTruthy();
-    expect(btn.className).toContain("hk-icon-button-28");
+    // The ladder rung is viewport-driven (useChromeActionSize): the test
+    // environment's width lands on one of the two rungs — the contract
+    // is "the ladder's class", never a hard-coded step.
+    expect(
+      btn.className.includes("hk-icon-button-28") || btn.className.includes("hk-icon-button-32"),
+    ).toBe(true);
     expect(btn.className).toContain("hk-icon-button-ghost");
     expect(btn.getAttribute("aria-haspopup")).toBe("dialog");
     // No active dot on an untouched state.

package/src/components/HkFilterTrigger.tsx

@@ -12,12 +12,14 @@ import HkIconButton from "./HkIconButton";
 import HkPopover, { type PopupPlacement } from "./HkPopover";
 import "./HkFilterTrigger.scss";
 import { useBreakpoint } from "../runtime/useBreakpoint";
+import { useChromeActionSize } from "../composables/useChromeActionSize";
 import { useI18n } from "../i18n/context";
 
 /**
- * HkFilterTrigger — the header filter affordance: a ghost/28 icon button
- * (the same step as the theme toggle and the page refresh — the whole
- * top-right cluster reads as one row of chrome) anchoring the
+ * HkFilterTrigger — the header filter affordance: a ghost icon button on
+ * the chrome action ladder (useChromeActionSize: ghost/32 wide, ghost/28
+ * narrow — the same step as the global search and settings buttons, so
+ * the whole top-right cluster reads as one row of chrome) anchoring the
  * HkFilterPanel in a popover on desktop and a bottom sheet on mobile
  * (HkPopover sheetOnMobile).
  *
@@ -50,6 +52,11 @@ export default defineComponent({
   setup(props, { emit }) {
     const { t } = useI18n();
     const { isMobile } = useBreakpoint();
+    // The chrome ladder (2026-10-24 ruling, one source): wide screens
+    // wear ghost/32 like the header's search and settings buttons — a
+    // flat 28 here read as a different button family from its own
+    // neighbors on desktop (2026-10-27 report).
+    const chromeSize = useChromeActionSize();
     const open = ref(false);
     const anchorRef = ref<HTMLElement | null>(null);
 
@@ -63,7 +70,7 @@ export default defineComponent({
         <span ref={anchorRef} class="hk-filter-trigger">
           <HkCornerBadge dot={active.value} variant="success" corner="bottom-right" offset={1}>
             <HkIconButton
-              size={28}
+              size={chromeSize.value}
               variant="ghost"
               aria-label={label}
               aria-haspopup="dialog"

package/src/components/HkIconButtonVars.scss

@@ -74,14 +74,15 @@
 
 .hk-icon-button-28 {
   --hi-icon-button-size: 28px;
-  /* The header-chrome step carries the sm glyph (16px): its consumers are
-   * the header clusters — global search, the pages' refresh, the filter
-   * trigger — whose visual sibling is HkThemeToggle's own trigger (one
-   * 28px box with a direct 16px lucide glyph). The xs mapping (12px)
-   * rendered those glyphs visibly smaller than the glyphs beside them
-   * (user report 2026-09-29: 不像一个尺寸的图标按钮) — the `.svg` rule
-   * in HkIconButton.scss forces ANY slotted glyph to this var, so the
-   * slot's size-16 attribute never reached the screen. */
+  /* The narrow header-chrome step carries the sm glyph (16px): its
+   * consumers are header clusters whose visual sibling is a compact
+   * trigger (one 28px box with a direct 16px lucide glyph). The xs
+   * mapping (12px) rendered those glyphs visibly smaller than the glyphs
+   * beside them (user report 2026-09-29: 不像一个尺寸的图标按钮) — the
+   * `.svg` rule in HkIconButton.scss forces ANY slotted glyph to this
+   * var, so the slot's size-16 attribute never reached the screen. The
+   * wide-rung sibling is the 32px block below (the 2026-10-24 chrome
+   * ladder; useChromeActionSize picks the rung). */
   --hi-icon-button-icon-size: var(--hi-icon-size-sm);
 }
 

package/src/components/HkSearchTrigger.tsx

@@ -8,6 +8,7 @@ import HkPopover, { type PopupPlacement } from "./HkPopover";
 import HkSearchInput from "./HkSearchInput";
 import { useBreakpoint } from "../runtime/useBreakpoint";
 import { useI18n } from "../i18n/context";
+import { useChromeActionSize } from "../composables/useChromeActionSize";
 import "./HkSearchTrigger.scss";
 
 /**
@@ -56,6 +57,7 @@ const HkSearchTrigger = defineComponent({
   },
   setup(props, { emit }) {
     const { t } = useI18n();
+    const chromeSize = useChromeActionSize();
     const { isMobile } = useBreakpoint();
     const open = ref(false);
     const anchorRef = ref<HTMLElement | null>(null);
@@ -96,7 +98,7 @@ const HkSearchTrigger = defineComponent({
            * (2026-10-15: was a hand-rolled primary dot, top-right). */}
           <HkCornerBadge dot={active.value} variant="success" corner="bottom-right" offset={1}>
           <HkIconButton
-            size={28}
+            size={chromeSize.value}
             variant="ghost"
             aria-label={label}
             aria-haspopup="dialog"

package/src/components/HkSegmentedRadio.scss

@@ -0,0 +1,60 @@
+/**
+ * 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

@@ -0,0 +1,259 @@
+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);
+  });
+});