@celestia-island/hikari 0.40.19 → 0.40.22

package/package.json

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

package/src/components/HkPopover.scss

@@ -10,6 +10,20 @@
 .hk-popover-panel {
   min-width: 0;
   max-height: min(70vh, calc(100vh - 2 * 8px));
+  /* Width MUST be position-independent (max-content, viewport-capped).
+   * The anchored panel is fixed-positioned with shrink-to-fit sizing,
+   * and computePosition places it as `left = anchorEnd - panelWidth`
+   * (bottom-end). With shrink-to-fit the width itself derives from the
+   * available space (`viewport - left`) — so any elastically-wide
+   * content (percentage-width rows) creates a geometric feedback: every
+   * ResizeObserver → rAF reposition adds (viewport - anchorEnd) px of
+   * width until the clamp saturates, and the menu visibly ratchets
+   * wider frame by frame (demo.dev field report 2026-09-07). Pinning
+   * the width to max-content breaks the loop: the panel sizes to its
+   * content wherever it sits, and positioning converges in one pass.
+   * VIEWPORT_PAD is 8 (script side). */
+  width: max-content;
+  max-width: calc(100vw - 2 * 8px);
 }
 
 /* Pop motion family tokens (--hk-pop-* in theme.scss) — the reference
@@ -91,6 +105,10 @@
 }
 
 .hk-popover-panel.hk-is-sheet {
+  /* The sheet spans the viewport via inline left/right — the anchored
+   * 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;
   border-radius: var(--hk-modal-radius, var(--hi-radius-lg, 12px))
                  var(--hk-modal-radius, var(--hi-radius-lg, 12px))
                  0 0;

package/src/components/HkPopover.surfacevars.test.ts

@@ -17,4 +17,18 @@ describe("HkPopover glass layer surface hooks", () => {
     expect(block).toContain("var(--hk-popover-bg, rgb(var(--color-surface)))");
     expect(block).toContain("var(--hk-popover-blur,");
   });
+
+  // Width must stay position-independent: computePosition places the
+  // anchored panel at `left = anchorEnd - panelWidth` (bottom-end), so
+  // a shrink-to-fit (position-dependent) width creates a ResizeObserver
+  // feedback that ratchets the menu wider every frame with elastically-
+  // wide content (demo.dev field report 2026-09-07). The sheet branch
+  // must keep spanning via its inline left/right (width: auto).
+  it("pins the anchored panel width to max-content and resets the sheet", () => {
+    const base = src.match(/\.hk-popover-panel\s*{[^}]*}/)![0];
+    expect(base).toContain("width: max-content");
+    expect(base).toContain("max-width: calc(100vw - 2 * 8px)");
+    const sheet = src.match(/\.hk-popover-panel\.hk-is-sheet\s*{[^}]*}/)![0];
+    expect(sheet).toContain("width: auto");
+  });
 });

package/src/components/HkThemeToggle.scss

@@ -47,9 +47,24 @@
   flex-direction: column;
   gap: var(--space-4, 0.25rem);
   min-width: 13rem;
+  max-width: 22rem;
   padding: var(--space-8, 0.5rem);
 }
 
+/*
+ * The anchored popover panel is shrink-to-fit (width: max-content, #421),
+ * so any long-form prose in a host slot (mode-extra hint paragraphs) would
+ * otherwise set the panel's PREFERRED width — the menu once opened at the
+ * hint's single-line ideal width (~870px), stretching the segmented mode
+ * group full-bleed and leaving a wide void right of every row. The cap
+ * above clamps the menu's max-content contribution instead. The sheet
+ * branch is excluded: it stretches to the viewport by design, and its
+ * width never derives from content.
+ */
+.hk-popover-panel.hk-is-sheet .s-theme-menu {
+  max-width: none;
+}
+
 .s-theme-menu-label {
   font-size: var(--text-xs, 0.75rem);
   font-weight: 600;

package/src/components/HkThemeToggle.tsx

@@ -1,5 +1,5 @@
 import { computed, defineComponent, onUnmounted, ref, watch, type PropType } from "vue";
-import { Check, ChevronDown, Monitor, Moon, Palette, Sun, Trash as Trash2 } from "lucide-vue-next";
+import { Check, ChevronDown, Monitor, MoonStar, Palette, Sun, Trash as Trash2 } from "lucide-vue-next";
 import {
   HDivider,
   HPopover,
@@ -159,9 +159,9 @@ export const HkThemeToggle = defineComponent({
     function modeOptions(): TabItem[] {
       const auto = isAutoMode.value;
       return [
-        { key: "system", label: t("hikari::theme.modeAuto"), icon: <Monitor size={14} /> },
-        { key: "light", label: t("hikari::theme.modeLight"), icon: <Sun size={14} />, disabled: auto },
-        { key: "dark", label: t("hikari::theme.modeDark"), icon: <Moon size={14} />, disabled: auto },
+        { key: "system", label: t("hikari::theme.modeAuto"), icon: <Monitor size={16} /> },
+        { key: "light", label: t("hikari::theme.modeLight"), icon: <Sun size={16} />, disabled: auto },
+        { key: "dark", label: t("hikari::theme.modeDark"), icon: <MoonStar size={16} />, disabled: auto },
       ];
     }
 
@@ -205,11 +205,11 @@ export const HkThemeToggle = defineComponent({
           aria-label={t("hikari::theme.mode")}
         >
           {currentMode.value === "system" ? (
-            <Monitor size={14} />
+            <Monitor size={16} />
           ) : effectiveMode.value === "dark" ? (
-            <Moon size={14} />
+            <MoonStar size={16} />
           ) : (
-            <Sun size={14} />
+            <Sun size={16} />
           )}
         </button>
         <button
@@ -252,7 +252,7 @@ export const HkThemeToggle = defineComponent({
                       aria-label={t("hikari::theme.autoAltitudeTip")}
                       onClick={resolveAutoToManual}
                     >
-                      {altitudeNight.value ? <Moon size={14} /> : <Sun size={14} />}
+                      {altitudeNight.value ? <MoonStar size={16} /> : <Sun size={16} />}
                       <span class="s-theme-mode-autoalt-value">{altitudeText.value}</span>
                     </button>
                   ),