@celestia-island/hikari 0.55.206 → 0.55.207

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.206",
+  "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/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);
+  });
+});

package/src/components/HkSegmentedRadio.tsx

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

package/src/components/HkThemeToggle.test.ts

@@ -113,13 +113,18 @@ describe("HkThemeToggle trigger", () => {
     // single button (user direction 2026-09-30) must be chrome-identical
     // to the functional HkIconButtons hosts place beside it — the ghost
     // variant's shared rest/hover/press paint, not a bespoke block. The
-    // 28 step is the header chrome step (user report 2026-09-28: the
-    // cluster reads as one row only at ghost/28, sm 16px glyph).
+    // size step is the chrome action ladder (2026-10-24 ruling via
+    // useChromeActionSize): ghost/32 wide, ghost/28 narrow — the rung is
+    // viewport-driven, so the test pins "the ladder's class", never one
+    // hard-coded step.
     const triggers = container.querySelectorAll(".s-theme-toggle-btn");
     expect(triggers).toHaveLength(1);
     const trigger = triggers[0] as HTMLElement;
     expect(trigger.classList.contains("hk-icon-button")).toBe(true);
-    expect(trigger.classList.contains("hk-icon-button-28")).toBe(true);
+    expect(
+      trigger.classList.contains("hk-icon-button-28")
+      || trigger.classList.contains("hk-icon-button-32"),
+    ).toBe(true);
     expect(trigger.classList.contains("hk-icon-button-ghost")).toBe(true);
     // The retired main/arrow data hooks must never come back.
     expect(trigger.hasAttribute("data-variant")).toBe(false);

package/src/components/HkThemeToggle.tsx

@@ -6,6 +6,7 @@ import HkIconButton from "./HkIconButton";
 import { HkThemePanelContent } from "./HkThemePanelContent";
 import type { HCustomTheme } from "./HkColorSchemeDialog";
 import "./HkThemeToggle.scss";
+import { useChromeActionSize } from "../composables/useChromeActionSize";
 
 export { type ThemeItemScope } from "./HkThemePanelContent";
 
@@ -80,6 +81,7 @@ export const HkThemeToggle = defineComponent({
   },
   setup(props, { emit, slots, expose }) {
     const { t } = useI18n();
+    const chromeSize = useChromeActionSize();
     const menuOpen = ref(false);
     const triggerRef = ref<HTMLElement | null>(null);
 
@@ -104,7 +106,7 @@ export const HkThemeToggle = defineComponent({
          * its own. */}
         <HkIconButton
           class="s-theme-toggle-btn"
-          size={28}
+          size={chromeSize.value}
           variant="ghost"
           aria-haspopup="menu"
           aria-expanded={menuOpen.value ? "true" : "false"}

package/src/composables/useChromeActionSize.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import { useChromeActionSize } from "./useChromeActionSize";
+
+/**
+ * The ladder's VALUES are viewport-dependent (useBreakpoint reads the
+ * real window width, and a jsdom default falls outside the wide rung),
+ * so this suite pins the CONTRACT — one source, both rungs reachable,
+ * never anything else — rather than a hard-coded mapping.
+ */
+describe("useChromeActionSize", () => {
+  it("returns a computed ref resolving to one of the two ladder rungs", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      setup() {
+        const size = useChromeActionSize();
+        // Render the resolved value into the DOM (setupState proxies are
+        // unwrapped — rendering is the honest read path).
+        return () => h("span", { "data-size": String(size.value) });
+      },
+    });
+    app.mount(container);
+    const span = container.querySelector("span")!;
+    expect(["28", "32"]).toContain(span.dataset.size!);
+    app.unmount();
+    container.remove();
+  });
+
+  it("maps the viewport onto the ladder rungs (wide→32, narrow→28) and follows a flip", async () => {
+    // R3 S2 pin: nothing else pins WHICH rung a width maps to — a
+    // regression to a frozen constant passed the whole suite. Drive the
+    // REAL useBreakpoint (it listens to resize; no mock split needed).
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      setup() {
+        const size = useChromeActionSize();
+        return () => h("span", { "data-size": String(size.value) });
+      },
+    });
+    app.mount(container);
+    const read = () => container.querySelector("span")!.dataset.size!;
+
+    window.innerWidth = 1280;
+    window.dispatchEvent(new Event("resize"));
+    await new Promise((r) => setTimeout(r, 20));
+    expect(read()).toBe("32");
+
+    window.innerWidth = 800;
+    window.dispatchEvent(new Event("resize"));
+    await new Promise((r) => setTimeout(r, 20));
+    expect(read()).toBe("28");
+
+    // And back: the flip is followed, not frozen at first read.
+    window.innerWidth = 1280;
+    window.dispatchEvent(new Event("resize"));
+    await new Promise((r) => setTimeout(r, 20));
+    expect(read()).toBe("32");
+
+    app.unmount();
+    container.remove();
+  });
+});

package/src/composables/useChromeActionSize.ts

@@ -0,0 +1,25 @@
+import { computed, type ComputedRef } from "vue";
+
+import { useBreakpoint } from "../runtime/useBreakpoint";
+
+/**
+ * The top-right chrome action size ladder (user ruling 2026-10-24):
+ * wide screens (≥1024) wear the generous ghost/32 cluster; narrower
+ * viewports tighten to ghost/28 so the row fits. ONE source for every
+ * header-chrome icon button — the global search and settings buttons,
+ * the page filter trigger, the refresh — so the cluster reads as one
+ * row of identical chrome on every face.
+ *
+ * This is the single authority; hand-rolled `isDesktop ? 32 : 28`
+ * copies in consumers drifted exactly the way this helper exists to
+ * prevent (2026-10-27: the filter triggers stayed at the old flat 28
+ * while the header moved to the ladder, and the funnel read as a
+ * different button family from its own neighbors).
+ */
+export function useChromeActionSize(): ComputedRef<28 | 32> {
+  const { isDesktop } = useBreakpoint();
+  // `?.` — partial breakpoint surfaces exist (test mocks, embedders that
+  // pass only what they use); an absent isDesktop reads as the NARROW
+  // rung, the safe-fitting choice for an unknown viewport.
+  return computed(() => (isDesktop?.value ? 32 : 28));
+}

package/src/index.ts

@@ -511,6 +511,7 @@ export {
 export { usePageTitle, useRouteTitle } from "./composables/usePageTitle";
 export { provideActionBar, useActionBar } from "./composables/useActionBar";
 export type { ActionBarRenderer } from "./composables/useActionBar";
+export { useChromeActionSize } from "./composables/useChromeActionSize";
 export { leadingZeroBits, sha256, solvePow, solvePowSync, verifyPow } from "./utils/pow";
 export type { PowChallenge, PowSolution } from "./utils/pow";
 export { HkLocalePicker as HLocalePicker } from "./components/HkLocalePicker";
@@ -670,6 +671,8 @@ 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";