@celestia-island/hikari 0.55.8 → 0.55.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.8",
+  "version": "0.55.10",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkCheckbox.scss

@@ -5,6 +5,11 @@
 .hk-checkbox {
   display: inline-flex;
   align-items: center;
+  /* When the control sits INLINE among text (not in a host flex row), the
+   * default `vertical-align: baseline` parks the inline-flex's bottom edge
+   * on the text baseline and rides the box ~4px above the text's visual
+   * center. `middle` is the house parity value (HkSwitch/HkRadio). */
+  vertical-align: middle;
   gap: var(--space-8, 0.5rem);
   cursor: pointer;
   user-select: none;
@@ -28,9 +33,34 @@
   background: var(--hi-color-surface, rgba(240,244,248,0.95));
   transition:
     border-color var(--duration-normal, 0.3s) ease,
-    background var(--duration-normal, 0.3s) ease;
+    background var(--duration-normal, 0.3s) ease,
+    scale var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
   flex-shrink: 0;
   position: relative;
+
+  /* Box scales with the size modifier — it previously ignored `size`
+   * entirely (an lg row carried an md box, floating 2px high next to
+   * 16px text). sm/md/lg now match HkRadio's box scale. */
+  .hk-checkbox-sm & {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .hk-checkbox-lg & {
+    width: 1.375rem;
+    height: 1.375rem;
+  }
+}
+
+/* Press feedback (house parity: HkSwitch thumb squish). */
+.hk-checkbox:not([data-disabled]):active .hk-checkbox-box {
+  scale: 0.9;
+}
+
+/* Hover parity with HkRadio: an unchecked box picks up the primary edge
+   under the pointer. Checked/indeterminate keep their solid fill. */
+.hk-checkbox:not([data-disabled]):hover .hk-checkbox-box:not([data-checked]):not([data-indeterminate]) {
+  border-color: var(--hi-color-primary, #7aa2f7);
 }
 
 .hk-checkbox[data-type="radio"] .hk-checkbox-box {
@@ -74,6 +104,16 @@
   color: rgb(var(--color-on-solid-icon, 255 255 255));
   width: 14px;
   height: 14px;
+
+  .hk-checkbox-sm & {
+    width: 11px;
+    height: 11px;
+  }
+
+  .hk-checkbox-lg & {
+    width: 16px;
+    height: 16px;
+  }
 }
 
 .hk-checkbox-dot {
@@ -82,6 +122,16 @@
   border-radius: 50%;
   background: rgb(var(--color-on-solid-icon, 255 255 255));
   z-index: var(--hi-z-above, 1);
+
+  .hk-checkbox-sm & {
+    width: 5px;
+    height: 5px;
+  }
+
+  .hk-checkbox-lg & {
+    width: 8px;
+    height: 8px;
+  }
 }
 
 .hk-checkbox-indeterminate {
@@ -90,6 +140,14 @@
   border-radius: 1px;
   background: rgb(var(--color-on-solid-icon, 255 255 255));
   z-index: var(--hi-z-above, 1);
+
+  .hk-checkbox-sm & {
+    width: 6px;
+  }
+
+  .hk-checkbox-lg & {
+    width: 10px;
+  }
 }
 
 /* ---------- label ---------- */
@@ -97,3 +155,11 @@
 .hk-checkbox[data-animating] .hk-checkbox-box {
   will-change: border-color, background;
 }
+
+/* Reduced motion: the press squish snaps instead of tweening (house
+   pattern: HkSwitch.scss / HkSlider.scss). */
+@media (prefers-reduced-motion: reduce) {
+  .hk-checkbox-box {
+    transition: none;
+  }
+}

package/src/components/HkRadio.scss

@@ -23,6 +23,10 @@
 .hk-radio {
   display: inline-flex;
   align-items: center;
+  /* House parity (HkCheckbox/HkSwitch): keeps the box on the text's
+   * visual midline when a radio row is lifted out of the group into an
+   * inline text context. No-op inside the flex group. */
+  vertical-align: middle;
   gap: var(--space-8, 0.5rem);
   cursor: pointer;
   user-select: none;
@@ -44,7 +48,8 @@
   background: var(--hi-color-surface);
   transition:
     border-color var(--duration-normal, 0.3s) ease,
-    background var(--duration-normal, 0.3s) ease;
+    background var(--duration-normal, 0.3s) ease,
+    scale var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
   flex-shrink: 0;
   position: relative;
 
@@ -73,6 +78,11 @@
   border-color: var(--hi-color-primary);
 }
 
+/* Press feedback (house parity: HkCheckbox box / HkSwitch thumb). */
+.hk-radio:not([data-disabled]):active .hk-radio-box {
+  scale: 0.9;
+}
+
 /* --- Hidden input --- */
 
 .hk-radio-input {
@@ -111,3 +121,11 @@
     height: 5px;
   }
 }
+
+/* Reduced motion: the press squish snaps instead of tweening (house
+   pattern: HkSwitch.scss / HkSlider.scss). */
+@media (prefers-reduced-motion: reduce) {
+  .hk-radio-box {
+    transition: none;
+  }
+}

package/src/components/HkSelectionControls.styles.test.ts

@@ -0,0 +1,283 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { compile } from "sass";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Compiled-stylesheet guard for the three selection controls
+ * (HkCheckbox / HkRadio / HkSwitch).
+ *
+ * Vitest stubs CSS, so the behavioral suites can never catch a geometry or
+ * alignment fact drifting. This guard compiles the three sheets and pins
+ * the facts the 2026-09 alignment/size fix introduced:
+ *
+ *   1. inline-in-text alignment: every control root declares
+ *      `vertical-align: middle` (baseline parked the inline-flex's bottom
+ *      edge on the text baseline, riding the box ~4–7px above the text's
+ *      visual center — measured in headless Chrome).
+ *   2. checkbox box scale: the box follows the sm/md/lg size modifiers
+ *      (it previously ignored `size` entirely and rendered an md box in
+ *      lg rows), matching HkRadio's box scale.
+ *   3. switch geometry: the track/thumb grew (md 44×24 track, 20px thumb)
+ *      and the checked travel stays exactly `track − 2×inset − thumb` per
+ *      size, so the thumb can never detach from either pill edge.
+ *   4. interaction faces: hover/press feedback exists on all three
+ *      (checkbox hover was missing entirely; radio hover had no press
+ *      twin) and the off track is a filled neutral, not a bare surface.
+ *
+ * The rules below are parsed out of the COMPILED css (not the .scss
+ * source) so a rule that fails to compile can never count as present.
+ */
+
+const componentDir = resolve(dirname(fileURLToPath(import.meta.url)));
+
+interface Rule {
+  selector: string;
+  body: string;
+}
+
+/** Flat-rule splitter for the expanded output of these leaf sheets. */
+function rules(css: string): Rule[] {
+  // Expanded output keeps loud comments, and sheets containing non-ASCII
+  // text get a braille-less `@charset "UTF-8";` statement — both would glue
+  // onto the next selector and shift every rule pair, so strip them first.
+  const bare = css
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/@charset[^;]*;/g, "")
+    .trim();
+  const out: Rule[] = [];
+  for (const match of bare.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const selector = match[1]!.trim();
+    // Keep control rules; the rtl mirrors lead with an attribute selector.
+    if (!selector.startsWith(".hk-") && !selector.startsWith("[dir=")) continue;
+    out.push({ selector, body: match[2]! });
+  }
+  return out;
+}
+
+function find(all: Rule[], selector: string): Rule {
+  const hit = all.find((r) => r.selector === selector);
+  expect(hit, `compiled rule for \`${selector}\``).toBeDefined();
+  return hit!;
+}
+
+/**
+ * The R2 adversarial round smuggled a `.hk-switch-md &` override past the
+ * per-size assertions (the render picked it up, the tests kept reading the
+ * base rule — a 0,2,0 selector beats the 0,1,0 base at runtime). Any
+ * geometry face pinned here must therefore pin its WHOLE selector set:
+ * a reader can only trust the values below when no unlisted, more
+ * specific rule also touches the class.
+ */
+function expectSelectorSet(all: Rule[], classSuffix: string, expected: string[]) {
+  const present = all
+    .map((r) => r.selector)
+    .filter((s) => {
+      const last = s.split(/\s+>/).pop()!.trim().split(" ").pop()!;
+      return last === classSuffix && !s.startsWith("[dir=");
+    })
+    .sort();
+  expect(present, `selector set touching \`${classSuffix}\``).toEqual(expected.sort());
+}
+
+/** `2.25rem` / `14px` / `-1rem` → signed px number (1rem = 16px; bare numbers = rem). */
+function toPx(decl: string): number {
+  const m = decl.match(/(-?[\d.]+)(rem|px)?$/);
+  expect(m, `length in "${decl}"`).not.toBeNull();
+  const value = parseFloat(m![1]!);
+  return m![2] === "px" ? value : value * 16;
+}
+
+function valueOf(body: string, prop: string): string {
+  const m = body.match(new RegExp(`(?:^|;)\\s*${prop}\\s*:\\s*([^;]+)`));
+  expect(m, `declaration \`${prop}\``).not.toBeNull();
+  return m![1]!.trim();
+}
+
+const checkbox = rules(compile(resolve(componentDir, "HkCheckbox.scss"), { style: "expanded" }).css);
+const radio = rules(compile(resolve(componentDir, "HkRadio.scss"), { style: "expanded" }).css);
+const sw = rules(compile(resolve(componentDir, "HkSwitch.scss"), { style: "expanded" }).css);
+
+describe("selection controls inline alignment", () => {
+  it.each([
+    ["HkCheckbox", checkbox, ".hk-checkbox"],
+    ["HkRadio", radio, ".hk-radio"],
+    ["HkSwitch", sw, ".hk-switch"],
+  ])("%s root declares vertical-align: middle", (_name, all, selector) => {
+    expect(valueOf(find(all, selector).body, "vertical-align")).toBe("middle");
+  });
+});
+
+describe("HkCheckbox box scale follows the size modifier", () => {
+  const cases: Array<[string, string, number]> = [
+    ["base (md)", ".hk-checkbox-box", 18],
+    ["sm", ".hk-checkbox-sm .hk-checkbox-box", 14],
+    ["lg", ".hk-checkbox-lg .hk-checkbox-box", 22],
+  ];
+  it.each(cases)("%s box is %ipx", (_name, selector, px) => {
+    const body = find(checkbox, selector).body;
+    expect(toPx(valueOf(body, "width"))).toBe(px);
+    expect(toPx(valueOf(body, "height"))).toBe(px);
+  });
+
+  it.each([
+    ["sm", ".hk-checkbox-sm .hk-checkbox-icon", 11],
+    ["md base", ".hk-checkbox-icon", 14],
+    ["lg", ".hk-checkbox-lg .hk-checkbox-icon", 16],
+  ])("%s check icon is %ipx", (_name, selector, px) => {
+    const body = find(checkbox, selector).body;
+    expect(toPx(valueOf(body, "width"))).toBe(px);
+  });
+
+  it("hover paints the primary edge on an unchecked box (HkRadio parity)", () => {
+    const body = find(
+      checkbox,
+      ".hk-checkbox:not([data-disabled]):hover .hk-checkbox-box:not([data-checked]):not([data-indeterminate])",
+    ).body;
+    expect(valueOf(body, "border-color")).toContain("--hi-color-primary");
+  });
+
+  it("press squish on the box via the independent scale property", () => {
+    const body = find(checkbox, ".hk-checkbox:not([data-disabled]):active .hk-checkbox-box").body;
+    expect(valueOf(body, "scale")).toBe("0.9");
+    // The squish only composes cleanly if the box transitions `scale`.
+    expect(valueOf(find(checkbox, ".hk-checkbox-box").body, "transition")).toContain("scale");
+  });
+});
+
+describe("HkRadio interaction parity", () => {
+  it("press squish on the box via the independent scale property", () => {
+    const body = find(radio, ".hk-radio:not([data-disabled]):active .hk-radio-box").body;
+    expect(valueOf(body, "scale")).toBe("0.9");
+    expect(valueOf(find(radio, ".hk-radio-box").body, "transition")).toContain("scale");
+  });
+});
+
+describe("HkSwitch geometry", () => {
+  const geometry: Array<[string, number, number, number]> = [
+    // [size, track width, track height, thumb width]
+    ["sm", 36, 20, 16],
+    ["md", 44, 24, 20],
+    ["lg", 52, 28, 24],
+  ];
+
+  it.each(geometry)("%s track is %ipx wide", (size, w, h) => {
+    const body = find(sw, `.hk-switch-${size} .hk-switch-track`).body;
+    expect(toPx(valueOf(body, "width"))).toBe(w);
+    expect(toPx(valueOf(body, "height"))).toBe(h);
+  });
+
+  it.each(geometry)("%s thumb is %ipx", (size, _w, _h, thumb) => {
+    const body = find(sw, `.hk-switch-${size} .hk-switch-thumb`).body;
+    expect(toPx(valueOf(body, "width"))).toBe(thumb);
+    expect(toPx(valueOf(body, "height"))).toBe(thumb);
+  });
+
+  it.each(geometry)(
+    "%s checked travel keeps the thumb inside both pill edges",
+    (size, trackW, _trackH, thumb) => {
+      const body = find(sw, `.hk-switch-${size}[data-checked] .hk-switch-thumb`).body;
+      const inset = toPx(valueOf(find(sw, ".hk-switch-thumb").body, "inset-inline-start"));
+      const border = toPx(valueOf(find(sw, ".hk-switch-track").body, "border").split(" ")[0]!);
+      const travel = toPx(valueOf(body, "transform").replace("translateX(", "").replace(")", ""));
+      // travel = track − 2×(border + inset) − thumb: inset-inline-start
+      // resolves against the padding box, so the 1px border counts on BOTH
+      // sides — the checked gap then equals the resting gap (3px) exactly.
+      expect(travel).toBe(trackW - 2 * (border + inset) - thumb);
+    },
+  );
+
+  it.each(geometry)(
+    "%s off/on content anchors clear of the covering thumb",
+    (size, trackW, _trackH, thumb) => {
+      // md carries the base declaration; sm/lg get size overrides.
+      const scoped = (base: string) =>
+        find(sw, `.hk-switch-${size} ${base}`.replace(".hk-switch-md ", "")).body;
+      const offBody = scoped(".hk-switch-content-off");
+      const onBody = scoped(".hk-switch-content-on");
+      // off face: starts after the resting thumb (2px inset + thumb + 2px gap).
+      expect(toPx(valueOf(offBody, "inset-inline-start"))).toBe(2 + thumb + 2);
+      // on face: ends before the checked thumb — the checked thumb starts
+      // `2 + travel` from the padding-box start, i.e. (track−2−travel) from
+      // the end, plus the 2px gap.
+      const travel = toPx(
+        valueOf(find(sw, `.hk-switch-${size}[data-checked] .hk-switch-thumb`).body, "transform")
+          .replace("translateX(", "").replace(")", ""),
+      );
+      expect(toPx(valueOf(onBody, "inset-inline-end"))).toBe(trackW - 2 - travel);
+    },
+  );
+
+  it("pins the whole selector set of each caption face (R2 M7 blind spot)", () => {
+    // A more specific override (e.g. `.hk-switch-md .hk-switch-content-off`)
+    // wins at runtime but is invisible to the per-size assertions above,
+    // which read the base rule — the ONLY sanctioned scoped faces are the
+    // sm/lg ones; anything else must fail here first.
+    for (const face of [".hk-switch-content-off", ".hk-switch-content-on"]) {
+      expectSelectorSet(sw, face, [
+        face,
+        `.hk-switch-sm ${face}`,
+        `.hk-switch-lg ${face}`,
+      ]);
+    }
+  });
+
+  it("resting off track is a filled neutral, not a bare surface", () => {
+    const body = find(sw, ".hk-switch-track").body;
+    expect(valueOf(body, "background")).toContain("color-mix");
+    expect(valueOf(body, "border")).toContain("color-mix");
+  });
+
+  it("hover recolors the off track and brightens the checked track", () => {
+    expect(
+      valueOf(
+        find(sw, ".hk-switch:not([data-disabled]):not([data-checked]):hover .hk-switch-track").body,
+        "background",
+      ),
+    ).toContain("color-mix");
+    expect(
+      valueOf(find(sw, ".hk-switch:not([data-disabled])[data-checked]:hover .hk-switch-track").body, "filter"),
+    ).toContain("brightness");
+  });
+
+  it("press squish on the thumb via the independent scale property", () => {
+    const body = find(sw, ".hk-switch:not([data-disabled]):active .hk-switch-thumb").body;
+    expect(valueOf(body, "scale")).toBe("0.88");
+    expect(valueOf(find(sw, ".hk-switch-thumb").body, "transition")).toContain("scale");
+  });
+
+  it("rtl mirrors the checked slide for every size", () => {
+    for (const size of ["sm", "md", "lg"]) {
+      const ltr = toPx(
+        valueOf(find(sw, `.hk-switch-${size}[data-checked] .hk-switch-thumb`).body, "transform").replace(
+          "translateX(",
+          "",
+        ).replace(")", ""),
+      );
+      const rtl = find(sw, `[dir=rtl] .hk-switch-${size}[data-checked] .hk-switch-thumb`).body;
+      expect(toPx(valueOf(rtl, "transform").replace("translateX(", "").replace(")", ""))).toBe(-ltr);
+    }
+  });
+
+  it.each([
+    ["HkCheckbox", "HkCheckbox", ".hk-checkbox-box"],
+    ["HkRadio", "HkRadio", ".hk-radio-box"],
+    ["HkSwitch", "HkSwitch", ".hk-switch-thumb"],
+  ])("%s press feedback is disabled under prefers-reduced-motion", (_name, sheet, selector) => {
+    // Parse ONLY the reduced-motion block (the flat splitter would read the
+    // base rule and make this pass vacuously).
+    const css = compile(resolve(componentDir, `${sheet}.scss`), { style: "expanded" }).css;
+    const marker = css.match(/@media[^{]*prefers-reduced-motion[^{]*{/);
+    expect(marker, `reduced-motion block in ${sheet}.scss`).not.toBeNull();
+    const blockRules = rules(css.slice(marker!.index! + marker![0]!.length));
+    // The switch block groups `.hk-switch-thumb, .hk-switch-content` in one
+    // rule — compare per selector in the list, whitespace-normalized.
+    const hit = blockRules.find((r) =>
+      r.selector.replace(/\s+/g, " ").split(", ").includes(selector),
+    );
+    expect(hit, `${selector} inside the reduced-motion block`).toBeDefined();
+    expect(valueOf(hit!.body, "transition")).toBe("none");
+  });
+});

package/src/components/HkSwitch.scss

@@ -1,6 +1,11 @@
 .hk-switch {
   display: inline-flex;
   align-items: center;
+  /* When the switch sits INLINE among text (not in a host flex row), the
+   * default `vertical-align: baseline` parks the inline-flex's bottom edge
+   * on the text baseline and rides the track ~5px above the text's visual
+   * center. `middle` is the house parity value (HkCheckbox/HkRadio). */
+  vertical-align: middle;
   gap: var(--space-8, 0.5rem);
   cursor: pointer;
   user-select: none;
@@ -24,8 +29,8 @@
    the label; house pattern: HkButton double ring). */
 .hk-switch-input:focus-visible ~ .hk-switch-track {
   box-shadow:
-    0 0 0 2px rgb(var(--color-surface)),
-    0 0 0 4px rgb(var(--color-primary));
+    0 0 0 2px var(--hi-color-surface, rgba(240, 244, 248, 0.95)),
+    0 0 0 4px var(--hi-color-primary, #7aa2f7);
 }
 
 /* --- Track --- */
@@ -35,27 +40,32 @@
   display: flex;
   align-items: center;
   border-radius: 9999px;
-  border: 1px solid var(--hi-color-border);
-  background: var(--hi-color-surface);
+  /* Resting state is a softly FILLED neutral track (iOS-style) rather
+   * than a bare surface sliver: the off state must read as a control
+   * even on a same-colored card. The border rides one step ahead of the
+   * fill so the pill keeps its edge on tinted host surfaces too. */
+  border: 1px solid color-mix(in srgb, var(--hi-color-text-secondary, rgb(120 130 150)) 26%, transparent);
+  background: color-mix(in srgb, var(--hi-color-text-secondary, rgb(120 130 150)) 14%, transparent);
   transition:
-    background-color 0.2s ease,
-    border-color 0.2s ease;
+    background-color var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+    border-color var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+    filter var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
   flex-shrink: 0;
   overflow: hidden;
 
   .hk-switch-sm & {
-    width: 2rem;
-    height: 1.125rem;
+    width: 2.25rem;
+    height: 1.25rem;
   }
 
   .hk-switch-md & {
-    width: 2.5rem;
-    height: 1.375rem;
+    width: 2.75rem;
+    height: 1.5rem;
   }
 
   .hk-switch-lg & {
-    width: 3rem;
-    height: 1.625rem;
+    width: 3.25rem;
+    height: 1.75rem;
   }
 
   .hk-switch-primary[data-checked] & {
@@ -79,6 +89,19 @@
   }
 }
 
+/* Hover / press feedback (house parity: HkRadio box hover). The checked
+   track brightens a touch instead of recoloring, so the four state colors
+   keep their exact resting identity. Note the state markers live on the
+   ROOT label, not the track, so the :not() rides there too. */
+.hk-switch:not([data-disabled]):not([data-checked]):hover .hk-switch-track {
+  background: color-mix(in srgb, var(--hi-color-text-secondary, rgb(120 130 150)) 22%, transparent);
+  border-color: color-mix(in srgb, var(--hi-color-text-secondary, rgb(120 130 150)) 34%, transparent);
+}
+
+.hk-switch:not([data-disabled])[data-checked]:hover .hk-switch-track {
+  filter: brightness(1.07) saturate(1.05);
+}
+
 /* --- Thumb --- */
 
 .hk-switch-thumb {
@@ -91,31 +114,46 @@
      the luminance-computed on-primary that went near-black on bright
      primaries (synthwave pink) while HkButton labels stayed white. */
   background: rgb(var(--color-on-solid-icon, 255 255 255));
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  transition: transform 0.2s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.2),
+    0 2px 8px rgba(0, 0, 0, 0.12);
+  transition:
+    transform var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+    scale var(--duration-short, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
   z-index: 1;
 
   .hk-switch-sm & {
-    width: 0.75rem;
-    height: 0.75rem;
+    width: 1rem;
+    height: 1rem;
   }
 
   .hk-switch-md & {
-    width: 0.9375rem;
-    height: 0.9375rem;
+    width: 1.25rem;
+    height: 1.25rem;
   }
 
   .hk-switch-lg & {
-    width: 1.125rem;
-    height: 1.125rem;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  /* Press squish composes with the slide via the independent `scale`
+     property (transform owns the translation only). */
+  .hk-switch:not([data-disabled]):active & {
+    scale: 0.88;
   }
 
+  /* Travel = track − 2×(1px border + 2px inset) − thumb width, so the
+     checked thumb clears the border by the same 3px as the resting one
+     (inset-inline-start resolves against the padding box — the 1px border
+     must count twice or the two gaps render asymmetric):
+     sm 36−6−16=14 · md 44−6−20=18 · lg 52−6−24=22. */
   .hk-switch-sm[data-checked] & {
-    transform: translateX(0.813rem);
+    transform: translateX(0.875rem);
   }
 
   .hk-switch-md[data-checked] & {
-    transform: translateX(1.12rem);
+    transform: translateX(1.125rem);
   }
 
   .hk-switch-lg[data-checked] & {
@@ -125,11 +163,11 @@
   /* RTL: the checked slide mirrors — the thumb travels back toward the
      inline-start (physically leftward) edge. */
   [dir="rtl"] .hk-switch-sm[data-checked] & {
-    transform: translateX(-0.813rem);
+    transform: translateX(-0.875rem);
   }
 
   [dir="rtl"] .hk-switch-md[data-checked] & {
-    transform: translateX(-1.12rem);
+    transform: translateX(-1.125rem);
   }
 
   [dir="rtl"] .hk-switch-lg[data-checked] & {
@@ -141,7 +179,7 @@
 
 .hk-switch-content {
   position: absolute;
-  font-size: 0.5625rem;
+  font-size: 0.625rem;
   font-weight: 700;
   line-height: 1;
   white-space: nowrap;
@@ -149,21 +187,46 @@
   transition: opacity 0.2s ease;
 
   .hk-switch-sm & {
-    font-size: 0.4375rem;
+    font-size: 0.5rem;
   }
 
   .hk-switch-lg & {
-    font-size: 0.625rem;
-  }
-
+    font-size: 0.6875rem;
+  }
+
+  /* Both faces anchor AWAY from the thumb that would cover them (content
+   * sits at z-index 0, the thumb at 1): the off face starts clear of the
+   * resting thumb (2px inset + thumb + 2px gap = 20/24/28), the on face
+   * ends clear of the checked one (thumb + 4 = 20/24/28: with travel =
+   * track − 2×(border+inset) − thumb, the checked thumb starts
+   * thumb + 4 from the padding-box end). A label longer
+   * than its free zone clips at the far seam instead of sliding under the
+   * thumb — the R1 verification measured 3–5px of coverage with the old
+   * far-edge anchors once the track grew. */
   &-off {
-    inset-inline-end: 4px;
+    inset-inline-start: 24px;
     color: var(--hi-color-text-secondary);
+
+    .hk-switch-sm & {
+      inset-inline-start: 20px;
+    }
+
+    .hk-switch-lg & {
+      inset-inline-start: 28px;
+    }
   }
 
   &-on {
-    inset-inline-start: 4px;
+    inset-inline-end: 24px;
     color: rgb(var(--color-on-solid-text, 255 255 255));
+
+    .hk-switch-sm & {
+      inset-inline-end: 20px;
+    }
+
+    .hk-switch-lg & {
+      inset-inline-end: 28px;
+    }
   }
 }