@celestia-island/hikari 0.40.21 → 0.40.22

package/package.json

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