@celestia-island/hikari 0.40.1 → 0.40.2

package/package.json

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

@@ -167,15 +167,32 @@
 }
 
 /* ── option rows ────────────────────────────────────────────────────── */
+/* Positioned host for the overlay scrollbar tracks: wraps ONLY the
+ * scrolling list viewport (the menu body also contains the header/
+ * search band), carries the popup's width constraints so the geometry
+ * is unchanged by the wrapper. */
+.hk-affix-scroll {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 13rem;
+  max-width: min(19rem, calc(100vw - 2rem));
+}
+
 .hk-affix-list {
   display: flex;
   flex-direction: column;
   gap: 1px;
   padding: 4px 6px 8px;
-  min-width: 13rem;
-  max-width: min(19rem, calc(100vw - 2rem));
   max-height: 17rem;
   overflow-y: auto;
+  /* Overlay scrollbar (useOverlayScrollbar) — the native chrome is
+   * always hidden, never styled. */
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .hk-affix-row {

package/src/components/HkAffixPicker.test.tsx

@@ -176,6 +176,30 @@ describe("HkAffixPicker", () => {
     expect(document.querySelector(".hk-affix-empty")?.textContent).toContain("No matches");
   });
 
+  it("re-attaches the row list when the empty-state query is cleared", async () => {
+    const { container } = mountPicker();
+    await openPopup(container);
+    // A no-match query swaps the default slot to the empty branch —
+    // the scrolling list (and its overlay-scrollbar host) unmounts.
+    await typeQuery("zzz-none");
+    expect(document.querySelector(".hk-affix-empty")).toBeTruthy();
+    expect(document.querySelector(".hk-affix-scroll")).toBeNull();
+    // Clearing the query remounts a FRESH list — the row list must come
+    // back and the overlay host must be remounted for the scrollbar.
+    await typeQuery("");
+    expect(document.querySelector(".hk-affix-empty")).toBeNull();
+    expect(rows().map((r) => r.textContent)).toEqual([
+      expect.stringContaining("China"),
+      expect.stringContaining("Japan"),
+      expect.stringContaining("United States"),
+    ]);
+    expect(document.querySelector(".hk-affix-scroll")).toBeTruthy();
+    expect(document.querySelector(".hk-affix-list")).toBeTruthy();
+    // Re-filtering after the remount keeps working on the live list.
+    await typeQuery("+86");
+    expect(rows().map((r) => r.textContent)).toEqual([expect.stringContaining("China")]);
+  });
+
   it("multi mode renders selected tags and offers only the remaining rows", async () => {
     const { container } = mountPicker({ mode: "multi", selected: ["cn", "jp"], activeKey: "cn" });
     await openPopup(container);

package/src/components/HkAffixPicker.tsx

@@ -1,8 +1,21 @@
-import { computed, defineComponent, ref, watch, type PropType, type SlotsType } from "vue";
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  watch,
+  type PropType,
+  type SlotsType,
+} from "vue";
 
 import { ChevronDown, Plus, Search, X } from "lucide-vue-next";
 
 import { useI18n } from "../i18n/context";
+import {
+  attachOverlayScrollbars,
+  type OverlayScrollbarHandle,
+} from "../composables/useOverlayScrollbar";
 
 import HkInput from "./HkInput";
 import HkListTransition from "./HkListTransition";
@@ -116,15 +129,58 @@ export const HkAffixPicker = defineComponent({
      *  are outside THIS popup, and the panel's outside-close must not
      *  tear the tag list down mid-decision. */
     const confirmHeld = ref(false);
+    /** The scrolling option list and its overlay-scrollbar host (see the
+     *  default slot — the host wraps ONLY the list viewport, not the
+     *  header/search band). */
+    const listRef = ref<HTMLElement | null>(null);
+    const scrollHostRef = ref<HTMLElement | null>(null);
+    /** Live overlay-scrollbar handle for the open popup; null when the
+     *  popup is closed (content not mounted). */
+    let scrollbar: OverlayScrollbarHandle | null = null;
+    /** The viewport element `scrollbar` is currently attached to, so a
+     *  remounted list (the empty-state swap) can be told apart from the
+     *  same in-flight list across content-size updates. */
+    let scrollbarViewport: HTMLElement | null = null;
+
+    function detachScrollbar() {
+      scrollbar?.detach();
+      scrollbar = null;
+      scrollbarViewport = null;
+    }
+
+    function attachScrollbar() {
+      detachScrollbar();
+      if (listRef.value && scrollHostRef.value) {
+        scrollbarViewport = listRef.value;
+        scrollbar = attachOverlayScrollbars(listRef.value, {
+          axis: "vertical",
+          host: scrollHostRef.value,
+        });
+      }
+    }
 
     // A fresh open starts calm: empty filter.
     watch(open, (v) => {
       if (!v) {
         query.value = "";
       }
+      if (v) {
+        // The list mounts on this very render — attach the overlay
+        // scrollbar once the DOM has landed. A same-tick open→close
+        // must not arm it on the leaving popup (the close branch
+        // already detached it).
+        void nextTick(() => {
+          if (!open.value) return;
+          attachScrollbar();
+        });
+      } else {
+        detachScrollbar();
+      }
       emit("update:open", v);
     });
 
+    onBeforeUnmount(detachScrollbar);
+
     const selectedKeys = computed<readonly string[]>(() =>
       Array.isArray(props.selected) ? props.selected : props.selected ? [props.selected] : [],
     );
@@ -150,6 +206,29 @@ export const HkAffixPicker = defineComponent({
       });
     });
 
+    // Content-size changes from the search filter change the thumb
+    // geometry without resizing the viewport — keep it in sync on the
+    // live scrollbar (no-op while the popup is closed). Post-flush so
+    // the DOM (esp. a remounted list after the empty-state swap) has
+    // landed and the template refs point at the live nodes before we
+    // decide whether to attach, re-attach or update.
+    watch(
+      [filteredRows, query],
+      () => {
+        if (!open.value) return;
+        if (!listRef.value) {
+          detachScrollbar();
+          return;
+        }
+        if (listRef.value !== scrollbarViewport) {
+          attachScrollbar();
+          return;
+        }
+        scrollbar?.update();
+      },
+      { flush: "post" },
+    );
+
     /** Exact label match suppresses the custom row while the user is
      *  simply re-typing an existing entry. */
     const exactMatch = computed(
@@ -394,8 +473,9 @@ export const HkAffixPicker = defineComponent({
               ),
               default: () =>
                 rows.length > 0 || customVisible.value ? (
-                  <div class="hk-affix-list">
-                    {rows.map((option) => {
+                  <div class="hk-affix-scroll" ref={scrollHostRef}>
+                    <div class="hk-affix-list" ref={listRef}>
+                      {rows.map((option) => {
                       const active =
                         props.mode === "single"
                           ? selectedKeys.value.includes(option.key)
@@ -443,6 +523,7 @@ export const HkAffixPicker = defineComponent({
                         </span>
                       </button>
                     )}
+                    </div>
                   </div>
                 ) : (
                   <div class="hk-affix-empty">{emptyText}</div>

package/src/components/HkPhoneInput.scss

@@ -4,25 +4,15 @@
   width: 100%;
 }
 
-/* The dial-code chip riding the field's LEFT edge — flag glyph + "+86"
- * + caret, layered on the shared .hk-affix-chip base (hover, disabled,
- * focus handling live there). A button so it is focusable and
- * AT-reachable; mousedown is suppressed in the shared picker so
- * clicking it never steals focus from the number field. */
+/* The dial-code chip riding the field's LEFT edge — dial code + caret,
+ * layered on the shared .hk-affix-chip base (hover, disabled, focus
+ * handling live there). A button so it is focusable and AT-reachable;
+ * mousedown is suppressed in the shared picker so clicking it never
+ * steals focus from the number field. */
 .hk-phone-chip {
   max-width: 11rem;
 }
 
-.hk-phone-chip-flag {
-  flex: none;
-  font-size: calc(var(--text-sm, 14px) * 1.05);
-  line-height: 1;
-  /* Windows has no color flag font — the regional-indicator letters it
-   * substitutes are tiny; nudge them to the visible size. */
-  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
-    sans-serif;
-}
-
 .hk-phone-chip-dial {
   font-weight: 600;
   font-size: var(--text-sm, 14px);

package/src/components/HkPhoneInput.test.tsx

@@ -101,7 +101,7 @@ describe("HkPhoneInput", () => {
     expect(events.change.at(-1)).toBe("+8613812345678");
   });
 
-  it("lists catalog rows with flags and codes when opened", async () => {
+  it("lists catalog rows with names and codes when opened", async () => {
     const { container } = mountPhone();
     await openPicker(container);
     const rows = pickerRows();
@@ -109,6 +109,12 @@ describe("HkPhoneInput", () => {
     const first = rows[0];
     expect(first.textContent).toContain("China");
     expect(first.textContent).toContain("+86");
+    // Flags are deliberately absent — Windows has no color flag font, so
+    // the emoji would degrade to bare regional-indicator letters.
+    expect(first.querySelector(".hk-affix-row-flag")).toBeNull();
+    for (const row of rows) {
+      expect(row.querySelector(".hk-affix-row-flag")).toBeNull();
+    }
   });
 
   it("picks a country from the list and refocuses the number field", async () => {

package/src/components/HkPhoneInput.tsx

@@ -7,7 +7,6 @@ import { useI18n } from "../i18n/context";
 import {
   DIAL_CODES,
   dialCodeName,
-  flagEmoji,
   formatE164,
   normalizeDial,
   resolveDial,
@@ -21,20 +20,19 @@ import "./HkPhoneInput.scss";
 /**
  * HkPhoneInput — phone-number field with a country dial-code picker.
  *
- * A leading chip inside the field (flag glyph + "+86" + caret) opens
- * the shared HkAffixPicker (single-select, searchable): flag + country
- * name + dial code per row, live filter on top. The chip rides the
- * LEFT edge of the field — the natural reading order for "which
- * country, then which number" — while the number itself is typed after
- * it.
+ * A leading chip inside the field (dial code + caret) opens the shared
+ * HkAffixPicker (single-select, searchable): country name + dial code
+ * per row, live filter on top. The chip rides the LEFT edge of the
+ * field — the natural reading order for "which country, then which
+ * number" — while the number itself is typed after it.
  *
  *   - `modelValue` is the NATIONAL number only ("13812345678"); the
  *     country selection lives in `dialCode` ("+86" shape, normalized on
  *     emit). Splitting the two keeps callers free to store whatever
  *     they already store (a bare "86" works too — matched by dial).
- *   - The chip shows the resolved country's flag plus the dial code in
- *     canonical "+…" shape. Unknown dial codes fall back to showing
- *     the normalized code alone (no flag).
+ *   - The chip shows the resolved country's dial code in canonical "+…"
+ *     shape. Unknown dial codes fall back to showing the normalized
+ *     code alone.
  *   - Picking a row emits `update:dialCode` ("+…"), `dialchange`
  *     (same value) and refocuses the number field. Blurring the field
  *     emits `change` with the composed E.164 — use it to validate or
@@ -111,7 +109,6 @@ export const HkPhoneInput = defineComponent({
         key: c.iso,
         label: dialCodeName(c, locale),
         meta: `+${c.dial}`,
-        flag: flagEmoji(c.iso),
         keywords: `${c.en} ${c.zh} ${c.iso} +${c.dial} 00${c.dial}`,
       })),
     );
@@ -203,9 +200,6 @@ export const HkPhoneInput = defineComponent({
                   {{
                     chip: () => (
                       <>
-                        <span class="hk-phone-chip-flag" aria-hidden="true">
-                          {active ? flagEmoji(active.iso) : ""}
-                        </span>
                         <span class="hk-phone-chip-dial">{chipLabel()}</span>
                         <ChevronDown size={12} class="hk-phone-chip-caret" aria-hidden="true" />
                       </>