@celestia-island/hikari 0.40.23 → 0.40.25

package/package.json

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

package/src/components/HkAffixPicker.scss

@@ -179,6 +179,16 @@
   max-width: min(19rem, calc(100vw - 2rem));
 }
 
+/* Mobile sheet context (#424 pattern): inside the full-width select sheet
+ * the popup's designed measure becomes a centered cap instead of a
+ * left-glued clamp — the list reads as one designed block inside the
+ * viewport-wide sheet rather than hugging its left edge. */
+.hk-select-sheet-panel .hk-affix-scroll {
+  max-width: min(19rem, 100%);
+  margin-inline: auto;
+  width: 100%;
+}
+
 .hk-affix-list {
   display: flex;
   flex-direction: column;

package/src/components/HkAffixPicker.sheetcap.test.ts

@@ -0,0 +1,27 @@
+/**
+ * Source contract for the affix picker's measure inside the mobile select
+ * sheet (2026-09-08 scan wave 2, finding F2 — #424 pattern).
+ *
+ * The picker renders on phones inside the full-width `.hk-select-sheet-panel`;
+ * the base 19rem (304px) cap left-glued with ~92px dead space right. Pinned
+ * here so the sheet-context centering rule cannot be dropped in a refactor:
+ * the designed measure stays as a cap but the list reads as one centered
+ * block inside the viewport-wide sheet.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = readFileSync(join(here, "HkAffixPicker.scss"), "utf-8");
+
+describe("HkAffixPicker mobile sheet measure contract", () => {
+  it("caps and centers the list inside the full-width select sheet", () => {
+    const block =
+      src.match(/\.hk-select-sheet-panel \.hk-affix-scroll\s*{[^}]*}/)?.[0] ??
+      "";
+    expect(block).toContain("max-width: min(19rem, 100%)");
+    expect(block).toContain("margin-inline: auto");
+  });
+});

package/src/components/HkButton.scss

@@ -12,7 +12,15 @@
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: background-color, border-color, color, box-shadow, opacity, transform, filter var(--duration-normal) var(--ease-standard);
+  /* Longhand on purpose: the former comma-separated shorthand
+   * `transition: background-color, ..., filter var(--duration-normal) ...`
+   * declares one transition PER property where only the LAST carries the
+   * duration — every property but `filter` animated at 0s and hover states
+   * snapped (host overrides kept patching over it). One property LIST with
+   * one duration/easing animates them all. */
+  transition-property: background-color, border-color, color, box-shadow, opacity, transform, filter;
+  transition-duration: var(--duration-normal);
+  transition-timing-function: var(--ease-standard);
   white-space: nowrap;
   user-select: none;
   outline: none;

package/src/components/HkButton.transition.test.ts

@@ -0,0 +1,39 @@
+/**
+ * Source contract for the HkButton transition declaration (2026-09-08 scan
+ * wave 2, finding F5).
+ *
+ * The former comma-separated shorthand
+ * `transition: background-color, ..., filter var(--duration-normal) ...`
+ * declared one transition PER property where only the LAST carried the
+ * duration/easing — every property but `filter` animated at 0s and hover
+ * color/border/background snapped instead of fading (hosts kept patching
+ * over it; chest's deleted .hk-btn-ghost override was one). Pinned here so
+ * the malformed shorthand cannot silently return.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = readFileSync(join(here, "HkButton.scss"), "utf-8");
+// Comments stripped before the negative assertion: the explanatory comment
+// intentionally QUOTES the old malformed shorthand, and this contract is
+// about live CSS, not prose.
+const css = src
+  .replace(/\/\*[\s\S]*?\*\//g, "")
+  .replace(/^[ \t]*\/\/.*$/gm, "");
+
+describe("HkButton transition contract", () => {
+  it("declares the transition in longhand with one shared duration/easing", () => {
+    expect(src).toContain(
+      "transition-property: background-color, border-color, color, box-shadow, opacity, transform, filter;"
+    );
+    expect(src).toContain("transition-duration: var(--duration-normal);");
+    expect(src).toContain("transition-timing-function: var(--ease-standard);");
+  });
+
+  it("does not regress to the malformed comma-separated shorthand", () => {
+    expect(css).not.toMatch(/transition:\s*background-color,/);
+  });
+});

package/src/components/HkDrawer.scss

@@ -165,3 +165,58 @@
   border-top: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
   flex-shrink: 0;
 }
+
+// ------
+// Mobile bottom drawer = the sheet family (2026-09-08 scan wave 2).
+// HkAdaptiveDialog renders its mobile form as a bottom drawer, which
+// made it the ONLY bottom-docked window outside the HkModal / HkPopover /
+// HkSelectPanel sheet family contract: glued to `bottom: 0` (hosts lifting
+// --hk-sheet-bottom-gap saw no effect), capped by the inline `size` 70vh
+// with no top-inset reservation (a tall dialog covered the secondary-window
+// breadcrumb strip), 8px corners against the family's 12px, a footer that
+// ignored the home-bar safe area, and sm/md footer buttons without the
+// family's 44px touch lift. Same geometry, same tokens, one family.
+// ------
+@media (max-width: 767px) {
+  .hk-drawer-bottom {
+    bottom: var(--hk-sheet-bottom-gap, 0px);
+    border-radius: var(--hk-modal-radius, var(--hi-radius-lg, 12px))
+                   var(--hk-modal-radius, var(--hi-radius-lg, 12px))
+                   0 0;
+    // The inline maxHeight from the `size` prop must lose to the family cap
+    // (plain-vh fallback first for dvh-less engines, then dvh) — same
+    // inline-beating !important pattern as HkModal's mobile max-width.
+    max-height: calc(
+      100vh - var(--hk-sheet-top-inset, 4.25rem) - var(--hk-sheet-bottom-gap, 0px)
+    ) !important;
+    max-height: calc(
+      100dvh - var(--hk-sheet-top-inset, 4.25rem) - var(--hk-sheet-bottom-gap, 0px)
+    ) !important;
+  }
+
+  // Scoped to BOTTOM drawers only: side drawers (admin panels etc.) keep
+  // their desktop footer contract on phones — the sheet family is the
+  // bottom-docked form factor. Three-value padding keeps the axes right:
+  // the --hk-drawer-footer-padding hook owns the TOP, 1rem the sides, and
+  // the home-bar safe area lands on the BOTTOM where it belongs (a 2-value
+  // form would put the safe-area calc on the horizontal axis — and for
+  // hosts that zero the var it would strip the bottom protection entirely,
+  // the exact opposite of the intent).
+  .hk-drawer-bottom .hk-drawer-footer {
+    // Family baseline: home-bar safe area stacked on the base inset (same
+    // stacking as HkModal's mobile footer), on top of the existing
+    // --hk-drawer-footer-padding hook for menu-panel hosts.
+    padding: var(--hk-drawer-footer-padding, 0.625rem 1rem) 1rem
+      calc(0.375rem + var(--hk-sheet-footer-gap, 0.5rem) + env(safe-area-inset-bottom, 0px));
+
+    // Footer actions are the drawer's primary touch targets on phones:
+    // lift sm/md buttons to the 44px class, exactly like HkModal's mobile
+    // footer (padding/min-height only; font-size stays --text-base).
+    .hk-btn-sm,
+    .hk-btn-md {
+      min-height: 2.75rem;
+      padding: var(--space-8) var(--space-16);
+      font-size: var(--text-base);
+    }
+  }
+}

package/src/components/HkDrawer.sheetfamily.test.ts

@@ -0,0 +1,87 @@
+/**
+ * Source contract for the mobile bottom-drawer sheet family membership
+ * (2026-09-08 scan wave 2, finding F1).
+ *
+ * HkAdaptiveDialog renders its mobile form as a bottom drawer, which made
+ * it the ONLY bottom-docked window outside the HkModal / HkPopover /
+ * HkSelectPanel sheet family contract. Pinned here so a refactor cannot
+ * silently regress to the pre-family geometry:
+ *   - docks on the shared --hk-sheet-bottom-gap hook (was hard `bottom: 0`)
+ *   - capped by the family formula (top inset + bottom gap), NOT the inline
+ *     `size` 70vh — the inline maxHeight must lose via !important (same
+ *     inline-beating pattern as HkModal's mobile `max-width: 100%
+ *     !important`), with the plain-vh fallback ahead of the dvh twin
+ *   - 12px family corners (was 8px)
+ *   - footer stacks the home-bar safe area on the BOTTOM axis (3-value
+ *     padding: hook top / 1rem sides / safe-area bottom — a 2-value form
+ *     would put the safe-area calc on the horizontal axis and strip the
+ *     bottom protection for hosts that zero the hook) and is scoped to
+ *     BOTTOM drawers only (side drawers keep their desktop footer
+ *     contract on phones); sm/md buttons lift to the 44px class, like
+ *     HkModal's mobile footer
+ */
+import { beforeAll, describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = readFileSync(join(here, "HkDrawer.scss"), "utf-8");
+
+describe("HkDrawer mobile bottom sheet-family contract", () => {
+  let media = "";
+  let drawer = "";
+  let footer = "";
+  beforeAll(() => {
+    media = src.slice(src.indexOf("@media (max-width: 767px)"));
+    drawer = media.match(/\.hk-drawer-bottom\s*{[^}]*}/)?.[0] ?? "";
+    footer = media.match(/\.hk-drawer-bottom \.hk-drawer-footer\s*{[\s\S]*?^  }/m)?.[0] ?? "";
+  });
+
+  it("docks the bottom drawer on the shared --hk-sheet-bottom-gap hook", () => {
+    expect(drawer).toContain("bottom: var(--hk-sheet-bottom-gap");
+  });
+
+  it("caps the sheet with the family top-inset formula in both vh and dvh", () => {
+    expect(drawer).toContain("100vh - var(--hk-sheet-top-inset");
+    expect(drawer).toContain("100dvh - var(--hk-sheet-top-inset");
+    // dvh-less engines (older Android WebView / Tauri) drop the whole dvh
+    // calc — the plain-vh fallback must stay ahead of it.
+    expect(drawer.indexOf("100vh - var(")).toBeLessThan(
+      drawer.indexOf("100dvh - var(")
+    );
+  });
+
+  it("beats the inline `size` maxHeight with !important on both caps", () => {
+    // HkDrawer applies `maxHeight: props.size` (default 70vh) inline for
+    // horizontal drawers — inline beats stylesheet, so the family cap must
+    // carry !important on the vh fallback AND the dvh twin.
+    expect(drawer.match(/\) !important;/g)).toHaveLength(2);
+  });
+
+  it("adopts the 12px family corner radius", () => {
+    expect(drawer).toContain("border-radius: var(--hk-modal-radius, var(--hi-radius-lg, 12px))");
+  });
+
+  it("stacks the home-bar safe area on the mobile footer's BOTTOM axis", () => {
+    expect(footer).toContain("env(safe-area-inset-bottom");
+    expect(footer).toContain("--hk-sheet-footer-gap");
+    // 3-value padding: hook top / 1rem sides / safe-area calc bottom. The
+    // safe-area calc must be the THIRD value, not the second (2-value form
+    // puts it on the horizontal axis and zeroes the bottom for hook=0 hosts).
+    expect(footer).toMatch(
+      /padding: var\(--hk-drawer-footer-padding,[^)]*\) 1rem\s*\n?\s*calc\(0\.375rem \+ var\(--hk-sheet-footer-gap/
+    );
+  });
+
+  it("scopes the mobile footer rules to bottom drawers only", () => {
+    // Side drawers (admin panels) keep the desktop footer contract on
+    // phones — the media block must not carry an unscoped .hk-drawer-footer.
+    expect(media).not.toMatch(/@media[\s\S]*?\n  \.hk-drawer-footer\s*{/);
+  });
+
+  it("lifts sm/md footer buttons to the 44px touch-target class", () => {
+    expect(footer).toMatch(/\.hk-btn-sm,\s*\n\s*\.hk-btn-md/);
+    expect(footer).toContain("min-height: 2.75rem");
+  });
+});

package/src/components/HkImageLightbox.scss

@@ -102,9 +102,16 @@
     top: 0;
     bottom: auto;
     left: 0;
-    width: 100vw;
+    // Full-bleed width from the containing block, NOT 100vw and NOT the
+    // desktop rule's inherited `min(96vw, 80rem)`: that unconditional
+    // same-specificity width would persist into mobile and, over-constrained
+    // against the inherited `left: 0; right: 0` pair, drop `right` under
+    // LTR — a persistent ~4vw dead strip on the right edge (the exact gap
+    // class this wave hunts). 100vw itself also measures the ICB including
+    // classic scrollbar gutters.
     // Plain-vh fallback first for dvh-less engines (older Android
     // WebView / Tauri), then the dynamic-viewport height.
+    width: 100%;
     height: 100vh;
     height: 100dvh;
     max-height: none;

package/src/components/HkImageLightbox.width.test.ts

@@ -0,0 +1,48 @@
+/**
+ * Source contract for the mobile lightbox horizontal sizing (2026-09-08
+ * scan wave 2, finding F3 + round-3 fix).
+ *
+ * The fullscreen mobile block used to declare `width: 100vw`, but 100vw
+ * measures the ICB including classic scrollbar gutters — combined with the
+ * inherited `left: 0; right: 0` docking it over-constrained the box (LTR
+ * dropped `right`) and clipped the right edge under a classic scrollbar.
+ * Deleting the width alone was NOT enough (round-3 adversarial catch):
+ * the unconditional desktop rule `width: min(96vw, 80rem)` (same selector,
+ * same specificity) then persisted into mobile and, over-constrained
+ * against left/right, dropped `right` — a persistent ~4vw dead strip on
+ * the right edge. The mobile block must declare its OWN width: 100% so
+ * the containing block (not the viewport unit, not the desktop measure)
+ * owns the full-bleed. Pinned here so neither regression can return.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = readFileSync(join(here, "HkImageLightbox.scss"), "utf-8");
+
+describe("HkImageLightbox mobile width contract", () => {
+  let mobile = "";
+  it("declares its own full-bleed width in the mobile block", () => {
+    mobile = src.slice(src.indexOf("@media (max-width: 767px)"));
+    const panel = mobile.match(/\.hk-modal-content\.hk-image-lightbox\s*{[^}]*}/)?.[0] ?? "";
+    expect(panel).toContain("left: 0;");
+    expect(panel).toContain("width: 100%;");
+  });
+
+  it("keeps 100vw sizing out (scrollbar-gutter divergence)", () => {
+    expect(mobile).not.toContain("width: 100vw");
+  });
+
+  it("keeps the desktop 96vw measure out of the mobile block", () => {
+    // The unconditional desktop rule keeps min(96vw, 80rem) — only the
+    // mobile panel block's own width: 100% stops it from leaking in.
+    // Comments are stripped first: the rationale text legitimately quotes
+    // the desktop measure, and only live declarations are under contract.
+    const panel = (mobile.match(/\.hk-modal-content\.hk-image-lightbox\s*{[^}]*}/)?.[0] ?? "")
+      .replace(/\/\*[\s\S]*?\*\//g, "")
+      .replace(/^\s*\/\/.*$/gm, "");
+    expect(panel).not.toContain("96vw");
+  });
+});

package/src/components/HkModal.scss

@@ -393,8 +393,15 @@
     // sits off the very bottom edge (chest asked for a visibly narrower
     // gap than body bottom + safe area on phones). Safe area is added ON
     // TOP of the gap so home-bar devices never lose tappable chrome.
-    padding: 0.625rem 1rem
-      calc(0.375rem + var(--hk-sheet-footer-gap, 0.5rem) + env(safe-area-inset-bottom, 0px));
+    // --hk-modal-footer-padding-mobile is the host-tunable mobile footer
+    // inset: a host with edge-to-edge footer content (chest's report
+    // reply bar) sets it to 0 instead of repainting the rule and
+    // duplicating the formula — desktop keeps --hk-modal-padding-footer.
+    padding: var(
+      --hk-modal-footer-padding-mobile,
+      0.625rem 1rem
+        calc(0.375rem + var(--hk-sheet-footer-gap, 0.5rem) + env(safe-area-inset-bottom, 0px))
+    );
 
     // Footer actions are the sheet's primary touch targets: lift sm/md
     // buttons one size up to the 44px class regardless of the caller's

package/src/components/HkPopover.scss

@@ -109,6 +109,16 @@
    * rule's max-content width would over-constrain it (left+right+width
    * drops `right` in LTR) and dock it at content width instead. */
   width: auto;
+  /* The base .hk-popover-panel max-width clamp (calc(100vw - 16px), the
+   * anchored panel's ratchet guard) must NOT leak into the sheet: with
+   * the inline left:0 + right:0 docking the clamp over-constrains the
+   * used width and LTR drops the `right` constraint — the sheet docks
+   * flush left but stops 16px short of the right viewport edge (2026-09-08
+   * user report: a mysterious right-hand gap on the secondary windows,
+   * present on every popover-family sheet and never on the HkModal /
+   * HkSelectPanel sheets, hence "some have it, some don't"). The inline
+   * left/right pair alone owns the sheet's horizontal geometry. */
+  max-width: none;
   border-radius: var(--hk-modal-radius, var(--hi-radius-lg, 12px))
                  var(--hk-modal-radius, var(--hi-radius-lg, 12px))
                  0 0;
@@ -122,6 +132,16 @@
         var(--hk-sheet-bottom-gap, 0px)
     )
   );
+  /* Dynamic-viewport pairing (HkModal parity): the dvh twin follows the
+   * vh cap so a maxed sheet cannot extend under the URL bar on
+   * dynamic-toolbar browsers. */
+  max-height: min(
+    72vh,
+    calc(
+      100dvh - var(--hk-sheet-top-inset, 4.25rem) -
+        var(--hk-sheet-bottom-gap, 0px)
+    )
+  );
   display: flex;
   flex-direction: column;
   overflow-y: auto;

package/src/components/HkPopover.sheet-maxwidth.test.ts

@@ -0,0 +1,41 @@
+/**
+ * Source contract for the popover sheet viewport width (2026-09-08 user
+ * report: the mobile bottom sheets showed a mysterious right-hand gap —
+ * the sheet docked flush left but stopped 16px short of the right
+ * viewport edge, on every popover-family sheet and never on the HkModal
+ * / HkSelectPanel sheets, hence "some have it, some don't").
+ *
+ * Root cause: the base `.hk-popover-panel` rule sets
+ * `max-width: calc(100vw - 2 * 8px)` (the anchored panel's
+ * anti-ratchet clamp, #421). The mobile sheet branch overrides
+ * `width: auto` but inherited the max-width, over-constraining the
+ * inline `left: 0; right: 0` docking — the used width resolved to
+ * 100vw - 16px and LTR dropped the `right` constraint. Pinned here so
+ * a refactor cannot silently reintroduce the leak.
+ */
+import { beforeAll, describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const scss = readFileSync(join(here, "HkPopover.scss"), "utf-8");
+
+describe("HkPopover sheet viewport width contract", () => {
+  let block = "";
+  beforeAll(() => {
+    block = scss.match(/\.hk-popover-panel\.hk-is-sheet\s*{[\s\S]*?^\}/m)?.[0] ?? "";
+  });
+
+  it("neutralizes the base max-width clamp inside the sheet block", () => {
+    expect(block).toContain("max-width: none;");
+  });
+
+  it("keeps the sheet width content-independent (width: auto)", () => {
+    expect(block).toContain("width: auto;");
+  });
+
+  it("declares max-width: none after the width override (ordering sanity)", () => {
+    expect(block.indexOf("max-width: none")).toBeGreaterThan(block.indexOf("width: auto"));
+  });
+});

package/src/components/HkSelect.scss

@@ -271,6 +271,16 @@
         var(--hk-sheet-bottom-gap, 0px)
     )
   );
+  /* Dynamic-viewport pairing (HkModal parity): the dvh twin follows the
+   * vh cap so a maxed sheet cannot extend under the URL bar on
+   * dynamic-toolbar browsers. */
+  max-height: min(
+    72vh,
+    calc(
+      100dvh - var(--hk-sheet-top-inset, 4.25rem) -
+        var(--hk-sheet-bottom-gap, 0px)
+    )
+  );
   background: rgb(var(--color-surface));
   border-radius: var(--hk-modal-radius, var(--hi-radius-lg, 12px))
                  var(--hk-modal-radius, var(--hi-radius-lg, 12px))

package/src/components/HkThemeToggle.ghost-chrome.test.ts

@@ -0,0 +1,41 @@
+/**
+ * Source contract for the theme-toggle trigger chrome (2026-09-08 user
+ * report: the bordered surface box read as a mystery outline in the
+ * header and fought the host themes — the faint border, the host
+ * override layer and the `--hk-theme-toggle-btn-border` var never
+ * agreed). The trigger is now the STANDARD ghost icon-button chrome
+ * (same as `.hk-btn-ghost` / the HkIconButton ghost variant beside it):
+ * transparent at rest, primary wash on hover, no border, no surface,
+ * no shadow. Pinned here so the bordered-box chrome cannot silently
+ * return.
+ */
+import { beforeAll, describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = readFileSync(join(here, "HkThemeToggle.scss"), "utf-8");
+
+describe("HkThemeToggle ghost trigger chrome contract", () => {
+  let block = "";
+  beforeAll(() => {
+    block = src.match(/\.s-theme-toggle-btn\s*{[^}]*}/)?.[0] ?? "";
+  });
+
+  it("paints no border on the trigger (border: none)", () => {
+    expect(block).toContain("border: none;");
+  });
+
+  it("keeps the rest state transparent (no surface box)", () => {
+    expect(block).toContain("background: transparent;");
+  });
+
+  it("removes the per-theme border var entirely", () => {
+    expect(src).not.toContain("--hk-theme-toggle-btn-border");
+  });
+
+  it("retains a visible focus ring via :focus-visible", () => {
+    expect(src).toMatch(/\.s-theme-toggle-btn:focus-visible\s*{[^}]*}/);
+  });
+});

package/src/components/HkThemeToggle.scss

@@ -13,15 +13,26 @@
   height: 1.75rem;
   min-width: 1.75rem;
   padding: 0 var(--space-6, 0.375rem);
-  /* Host/theme-tunable: borderless chrome sets --hk-theme-toggle-btn-border:
-   * transparent (e.g. the BA brand look). */
-  border: 1px solid var(--hk-theme-toggle-btn-border, var(--border-faint, rgb(var(--color-border) / 12%)));
-  background: rgb(var(--color-surface));
-  color: rgb(var(--color-text-secondary, var(--color-muted)));
+  /* Standard ghost icon-button chrome (2026-09-08 user report: the
+   * bordered surface box read as a mystery outline in the header and
+   * fought the host themes — the faint border, the host override layer
+   * and the border-var never agreed). The trigger now matches the
+   * standard ghost buttons beside it (same chrome as .hk-btn-ghost and
+   * the HkIconButton ghost variant): transparent at rest, primary wash
+   * on hover, no border, no surface, no shadow, no per-theme border var. */
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-text, var(--color-text-secondary, var(--color-muted))));
   cursor: pointer;
   transition: background 0.15s ease, color 0.15s ease;
 }
 
+.s-theme-toggle-btn:focus-visible {
+  outline: 2px solid rgb(var(--color-primary));
+  outline-offset: 1px;
+}
+
 /* Host strip under the mode group (mode-extra slot). */
 .s-theme-mode-extra {
   margin-top: var(--space-8, 0.5rem);
@@ -33,15 +44,6 @@
   color: rgb(var(--color-text));
 }
 
-.s-theme-toggle-btn[data-variant="main"] {
-  border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px);
-  border-right: none;
-}
-
-.s-theme-toggle-btn[data-variant="arrow"] {
-  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
-}
-
 .s-theme-menu {
   display: flex;
   flex-direction: column;