@celestia-island/hikari 0.43.2 → 0.43.4

package/package.json

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

package/src/components/HkAffixPicker.test.tsx

@@ -444,4 +444,33 @@ describe("HkAffixPicker", () => {
     // CSS/text half of the contract is pinned by the contract test.
     expect(document.querySelector(".hk-affix-list .hk-scrollbar-track")).toBeNull();
   });
+
+  it("caps its popup surface with the tag editor's own measure", async () => {
+    const { container } = mountPicker({ mode: "multi", selected: ["cn"] });
+    await openPopup(container);
+
+    // The picker renders through HkMenu, which forwards a cap to the shared
+    // panel surface: the popup scrolls inside min(18rem, 45dvh) instead of
+    // stretching to the panel's 36rem ceiling — the same measure HkTagInput
+    // uses, so the two sibling chip pickers read consistently.
+    const popout = document.querySelector<HTMLElement>(".hk-select-popout");
+    expect(popout, "the popup renders as the shared popout").toBeTruthy();
+    expect(popout!.style.getPropertyValue("--hk-select-panel-max-height")).toBe(
+      "min(18rem, 45dvh)",
+    );
+    // The cap is the SURFACE's: the popout carries the hook and no inline
+    // max-height of its own…
+    expect(popout!.style.maxHeight).toBe("");
+    // …and the picker still opts out of matching the chip's width.
+    expect(document.querySelector<HTMLElement>(".hk-select-popout-host")!.style.minWidth).toBe(
+      "",
+    );
+
+    // The popup's designed measure is untouched: the content wrapper stays a
+    // plain width container with no cap or scroll region of its own.
+    const content = document.querySelector<HTMLElement>(".hk-affix-scroll");
+    expect(content, "the content wrapper renders").toBeTruthy();
+    expect(content!.hasAttribute("style"), "no inline style on the content").toBe(false);
+    expect(document.querySelector(".hk-affix-list .hk-scrollbar-track")).toBeNull();
+  });
 });

package/src/components/HkAffixPicker.tsx

@@ -72,6 +72,11 @@ function isSubsequence(query: string, text: string): boolean {
  * as one. The row list deliberately carries no max-height/overflow; a
  * nested second scrollbar inside the same window is a contract
  * violation (2026-09-08 user report: the language sheet scrolled twice).
+ * The surface itself is capped at `min(18rem, 45dvh)` through HkMenu's
+ * `maxHeight` forwarding (the HkTagInput measure, so the family reads
+ * consistently), which bounds the one scroll region instead of letting it
+ * stretch to the shared panel's 36rem ceiling. The popup's own designed
+ * measure (13–19rem wide) is unchanged: the cap bounds HEIGHT only.
  *
  * With `tagValues`, the multi picker's TAG LIST switches to
  * value-driven primary text: a selected key renders its mapped value
@@ -368,6 +373,10 @@ export const HkAffixPicker = defineComponent({
             anchorRef={chipRef.value}
             placement={placement}
             matchAnchorWidth={false}
+            // The same cap the tag editor's catalog uses: the popup hugs its
+            // own designed measure instead of stretching to the shared
+            // panel's 36rem ceiling, and a long catalog scrolls inside it.
+            maxHeight="min(18rem, 45dvh)"
             title={title}
           >
             {{

package/src/components/HkMenu.test.ts

@@ -345,6 +345,75 @@ describe("HkMenu on the HkSelectPanel surface", () => {
   });
 });
 
+describe("HkMenu surface cap (maxHeight)", () => {
+  const CAP = "min(18rem, 45dvh)";
+
+  it("renders no cap at all when the prop is absent (the additive no-op)", async () => {
+    // Pinned at the DOM level rather than in source text: with no
+    // `maxHeight` the shared panel forwards nothing, so the popout
+    // publishes no hook and carries no inline max-height — every existing
+    // consumer (theme switchers, cascades, the menubar) is untouched.
+    mountMenu(ref(true));
+    await settle();
+    const popout = popouts()[0];
+    expect(popout.style.getPropertyValue("--hk-select-panel-max-height")).toBe("");
+    expect(popout.style.maxHeight).toBe("");
+    expect(popout.hasAttribute("style"), "no inline style at all").toBe(false);
+  });
+
+  it("publishes the cap on the root popout and on every cascade level", async () => {
+    mountMenu(ref(true), siblingItems, {}, { props: { maxHeight: CAP } });
+    await settle();
+    expect(popouts()[0].style.getPropertyValue("--hk-select-panel-max-height")).toBe(CAP);
+
+    // A cascade level is its own scroll surface, so it is capped too.
+    rowByLabel("Branch One")!.click();
+    await settle();
+    expect(popouts().length).toBe(2);
+    expect(popouts()[1].style.getPropertyValue("--hk-select-panel-max-height")).toBe(CAP);
+
+    // …and the cap follows the cascade to whichever level is open.
+    rowByLabel("Branch Two")!.click();
+    await settle();
+    expect(popouts().length).toBe(2);
+    expect(popouts()[1].textContent).toContain("Two A");
+    expect(popouts()[1].style.getPropertyValue("--hk-select-panel-max-height")).toBe(CAP);
+
+    // Height only: the cap never touches the popout's width contract.
+    expect(popoutHosts()[0].style.minWidth).toBe("");
+  });
+
+  it("caps the mobile sheet path — on the band that actually scrolls", async () => {
+    window.innerWidth = 390;
+    mountMenu(ref(true), siblingItems, {}, { props: { maxHeight: CAP } });
+    await settle();
+    expect(sheets().length).toBe(1);
+
+    // In sheet mode the element the panel caps (and the one that scrolls) is
+    // the list band inside the sheet, not the sheet panel itself.
+    const band = sheets()[0].querySelector<HTMLElement>(".hk-select-sheet-list");
+    expect(band, "the sheet list band renders").toBeTruthy();
+    expect(band!.style.getPropertyValue("--hk-select-panel-max-height")).toBe(CAP);
+
+    rowByLabel("Branch One")!.click();
+    await settle();
+    expect(sheets().length).toBe(2);
+    const subBand = sheets()[1].querySelector<HTMLElement>(".hk-select-sheet-list");
+    expect(subBand, "the pushed sheet's band renders").toBeTruthy();
+    expect(subBand!.style.getPropertyValue("--hk-select-panel-max-height")).toBe(CAP);
+  });
+
+  it("leaves the mobile sheet band uncapped when the prop is absent", async () => {
+    window.innerWidth = 390;
+    mountMenu(ref(true), siblingItems);
+    await settle();
+    const band = sheets()[0].querySelector<HTMLElement>(".hk-select-sheet-list");
+    expect(band, "the sheet list band renders").toBeTruthy();
+    expect(band!.style.getPropertyValue("--hk-select-panel-max-height")).toBe("");
+    expect(band!.hasAttribute("style"), "no inline style at all").toBe(false);
+  });
+});
+
 describe("HkMenu check column (selectMode)", () => {
   const checkedItems: HkMenuItem[] = [
     { key: "a", label: "Alpha", checked: true },

package/src/components/HkMenu.tsx

@@ -142,6 +142,20 @@ export default defineComponent({
      * shrink to fit.
      */
     matchAnchorWidth: { type: Boolean, default: false },
+    /**
+     * Cap for the panel surface of EVERY level, as any CSS length
+     * (`min(18rem, 45dvh)`, `24rem`, …): it is forwarded to each
+     * HkSelectPanel this menu renders — the root desktop popout, every
+     * cascade level and each mobile sheet layer (every level is its own
+     * scroll surface, so each one is capped).
+     *
+     * Undefined (the default) forwards nothing at all, so the shared panel
+     * keeps its own ceilings and every existing consumer — theme switchers,
+     * cascades, the menubar, popups — renders exactly as before. See
+     * HkSelectPanel's own `maxHeight` for the value contract: any CSS
+     * length, applied on the `dvh`-capable branch, never sanitized.
+     */
+    maxHeight: { type: String, default: undefined },
   },
   emits: ["update:open", "select"],
   setup(props, { emit, slots }) {
@@ -549,6 +563,7 @@ export default defineComponent({
           placement={cfg.placement}
           offset={cfg.offset}
           matchAnchorWidth={cfg.match}
+          maxHeight={props.maxHeight}
           onUpdate:open={(v: boolean) => {
             if (!v) onRootCloseRequest();
           }}
@@ -576,6 +591,7 @@ export default defineComponent({
               title={branch?.label ?? props.title}
               placement="bottom-start"
               offset={0}
+              maxHeight={props.maxHeight}
               onUpdate:open={(v: boolean) => {
                 if (!v) onSubCloseRequest(level);
               }}
@@ -598,6 +614,7 @@ export default defineComponent({
           open={props.open}
           anchorRef={props.anchorRef}
           title={props.title}
+          maxHeight={props.maxHeight}
           onUpdate:open={(v: boolean) => {
             if (!v) onRootCloseRequest();
           }}
@@ -616,6 +633,7 @@ export default defineComponent({
             // Sub-levels carry no title of their own — the parent item's
             // label names the sheet.
             title={entry.item.label}
+            maxHeight={props.maxHeight}
             onUpdate:open={(v: boolean) => {
               if (!v) onStackCloseRequest(i);
             }}

package/src/components/HkTagInput.scss

@@ -101,10 +101,14 @@
 
 /* A disabled field reorders nothing: the chips drop the grab affordance
  * (and the gesture reservation with it) — the box's own not-allowed
- * cursor takes over. */
+ * cursor takes over — and they become plain TEXT: with no drag left to
+ * lose, the press is free to select, so the chips are selectable here
+ * (the one state where selection and reordering cannot compete). */
 .hk-tag-input-box[data-disabled] .hk-tag-input-tag {
   cursor: default;
   touch-action: auto;
+  user-select: text;
+  -webkit-user-select: text;
 }
 
 /* ── inline typing input / placeholder ────────────────────────────── */
@@ -318,14 +322,50 @@
 }
 
 /* ── reordering ───────────────────────────────────────────────────── */
-/* Live drag (both lists): the item being moved dims, the slot it would
- * land in is ringed. Chips carry the state as classes (HkTag takes no
- * arbitrary attributes), panel rows as data attributes — both are
- * assertable hooks that never collide with the pointer/hover faces. */
+/* Live drag (both lists): the item being moved LIFTS — a touch larger and
+ * raised off the surface — while the slot it would land in is ringed. The
+ * lift is what makes the drag read on touch, where the finger covers the
+ * chip, the cursor is invisible and dimming alone looks like nothing
+ * happened. The dimming stays LIGHT on purpose (0.85, the value of the
+ * HkDraggableList/HkDraggableGrid drag ghost): the item must still read as
+ * the one being moved, not fade out. `transform` reflows nothing — no
+ * neighbour ever moves for it — and the axis rules below keep it out of the
+ * drag's own geometry too. The raised shadow replaces the row's own
+ * box-shadow faces for as long as the drag lasts (the keyboard cursor's
+ * inset ring included: the lift is the live state).
+ *
+ * Chips carry the state as classes (HkTag takes no arbitrary attributes),
+ * panel rows as data attributes — both are assertable hooks that never
+ * collide with the pointer/hover faces. */
 .hk-tag-input-tag-dragging,
 .hk-tag-input-row[data-dragging] {
-  opacity: 0.55;
+  opacity: 0.85;
   cursor: grabbing;
+  box-shadow:
+    0 6px 18px rgb(0 0 0 / 24%),
+    0 2px 6px rgb(0 0 0 / 16%);
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+
+/* The scale runs ALONG each list's own drag axis, never across it. A drag
+ * resolves its landing slot from the items' LIVE rects (usePointerReorder
+ * .indexAt): the item's MIDPOINT on the drag axis picks the slot, and on
+ * the axis ACROSS it every item's span decides which line the pointer is
+ * on — a filter that started out a no-op precisely because every row spans
+ * the list's full width. A scale is symmetric about the item's centre, so
+ * scaling along the drag axis leaves both readings exactly as they were;
+ * growing ACROSS it widens one item's band, and a pointer a few pixels
+ * outside the strip (the row list's own padding is 6px) would then match
+ * that item ALONE — every sibling falls out of the line filter, the slot
+ * collapses back onto the item's own index, and the drag ends as a silent
+ * no-op with no drop ring anywhere. Chips therefore scale on X (a
+ * horizontal strip), rows on Y (a vertical list). */
+.hk-tag-input-tag-dragging {
+  transform: scaleX(1.03);
+}
+
+.hk-tag-input-row[data-dragging] {
+  transform: scaleY(1.03);
 }
 
 .hk-tag-input-tag-drop {
@@ -384,7 +424,13 @@
   .hk-tag-input-box,
   .hk-tag-input-chevron,
   .hk-tag-input-grip,
-  .hk-tag-input-row {
+  .hk-tag-input-row,
+  /* The lift itself is KEPT without its ramp: the scale and the raised
+   * shadow are a static state marker, not motion, and dropping them would
+   * take the drag feedback away from exactly the users who cannot rely on
+   * the cursor following the pointer — only the 0.12s transition goes. */
+  .hk-tag-input-tag-dragging,
+  .hk-tag-input-row[data-dragging] {
     transition: none;
   }
 }

package/src/components/HkTagInput.test.tsx

@@ -1,4 +1,7 @@
 import { afterEach, describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkModal from "./HkModal";
@@ -1494,6 +1497,92 @@ describe("HkTagInput panel geometry and drag reordering", () => {
     expect(tagTexts(container)).toEqual(["gitee.com", "Technology", "News"]);
   });
 
+  it("lifts the dragged chip and drops the lift on release", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech", "de"] });
+    const strip = tags(container);
+    pinStrip(strip, 60, "x");
+
+    // Mid-gesture (still held): exactly the item being moved carries the
+    // drag state — the hook the stylesheet lifts — and the slot it would
+    // land in keeps its own ring. Nothing else is marked.
+    holdPointer({ x: 10, y: 10 }, { x: 200, y: 10 }, strip[0]);
+    await nextTick();
+    const dragging = tags(container).filter((t) =>
+      t.classList.contains("hk-tag-input-tag-dragging"),
+    );
+    expect(dragging).toHaveLength(1);
+    expect(dragging[0]).toBe(strip[0]);
+    expect(tags(container).filter((t) => t.classList.contains("hk-tag-input-tag-drop"))).toHaveLength(
+      1,
+    );
+
+    releasePointer({ x: 200, y: 10 });
+    await settle();
+    // The lift is a LIVE-drag state: the release clears it in both lists.
+    expect(container.querySelectorAll(".hk-tag-input-tag-dragging")).toHaveLength(0);
+    expect(container.querySelectorAll(".hk-tag-input-tag-drop")).toHaveLength(0);
+    expect(events.modelValue.at(-1)).toEqual(["tech", "de", "news"]);
+  });
+
+  it("drops the chip's lift when the gesture is cancelled without a drop", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech"] });
+    pinStrip(tags(container), 60, "x");
+
+    holdPointer({ x: 10, y: 10 }, { x: 200, y: 10 }, tags(container)[0]);
+    await nextTick();
+    expect(container.querySelectorAll(".hk-tag-input-tag-dragging")).toHaveLength(1);
+
+    // The browser takes the gesture back (a vertical scroll on touch): the
+    // drag is abandoned — no reorder, and no lift left behind.
+    window.dispatchEvent(
+      new PointerEvent("pointercancel", { bubbles: true, pointerId: 1, pointerType: "touch" }),
+    );
+    await settle();
+    expect(container.querySelectorAll(".hk-tag-input-tag-dragging")).toHaveLength(0);
+    expect(container.querySelectorAll(".hk-tag-input-tag-drop")).toHaveLength(0);
+    expect(events.modelValue).toEqual([]);
+  });
+
+  it("lifts the dragged panel row too, and drops the lift on release", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech", "de"] });
+    await openPanel(container);
+    const selected = reorderableRows();
+    pinStrip(selected, 40, "y");
+
+    // The row face of the same lift is the data attribute the stylesheet
+    // keys off (rows carry no classes of their own).
+    holdPointer({ x: 10, y: 10 }, { x: 10, y: 130 }, grip(selected[0]));
+    await nextTick();
+    const draggingRows = rows().filter((row) => row.hasAttribute("data-dragging"));
+    expect(draggingRows).toHaveLength(1);
+    expect(draggingRows[0]).toBe(selected[0]);
+    expect(rows().filter((row) => row.hasAttribute("data-drop"))).toHaveLength(1);
+
+    releasePointer({ x: 10, y: 130 });
+    await settle();
+    expect(rows().filter((row) => row.hasAttribute("data-dragging"))).toHaveLength(0);
+    expect(rows().filter((row) => row.hasAttribute("data-drop"))).toHaveLength(0);
+    expect(events.modelValue.at(-1)).toEqual(["tech", "de", "news"]);
+  });
+
+  it("hands a disabled field's chips to text selection instead of a drag", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech"], disabled: true });
+
+    // The stylesheet restores selection (and drops the grab cursor) through
+    // the box's OWN disabled hook — happy-dom has no layout, so the pin is
+    // on that attribute, which is exactly what the rule keys off.
+    expect(field(container).hasAttribute("data-disabled")).toBe(true);
+    expect(tags(container)).toHaveLength(2);
+
+    // Nothing can be reordered here, so a press that travels the whole strip
+    // must not be spent on a drag: no state, no emission, no lifted chip.
+    pinStrip(tags(container), 60, "x");
+    dragPointer({ x: 10, y: 10 }, { x: 200, y: 10 }, tags(container)[0]);
+    await settle();
+    expect(events.modelValue).toEqual([]);
+    expect(container.querySelectorAll(".hk-tag-input-tag-dragging")).toHaveLength(0);
+  });
+
   it("keeps a sub-threshold press a click — and never drags from the ×", async () => {
     const { events, container } = mountTagInput({ modelValue: ["news", "tech"] });
     pinStrip(tags(container), 60, "x");
@@ -1924,3 +2013,97 @@ describe("HkTagInput panel geometry and drag reordering", () => {
     expect(tagTexts(container)).toEqual(["Technology"]);
   });
 });
+
+/* The stylesheet half of the states asserted above: happy-dom has no layout
+ * engine, so the DOM tests can only pin the HOOKS — these assertions pin
+ * what those hooks actually buy (the lift, the selection restore, and the
+ * reduced-motion handling), the way the sibling contract tests in this
+ * directory pin the scroll and panel-geometry contracts. */
+const scss = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "HkTagInput.scss"), "utf-8");
+
+/** The declaration block of the rule whose selector list starts at the
+ *  FIRST `selector` occurrence — braces balanced, so a nested block cannot
+ *  let properties appended after it evade the pin. */
+function styleBlock(selector: string): string {
+  const at = scss.indexOf(selector);
+  expect(at, `${selector} is styled`).toBeGreaterThanOrEqual(0);
+  const open = scss.indexOf("{", at);
+  let depth = 0;
+  for (let i = open; i < scss.length; i += 1) {
+    if (scss[i] === "{") depth += 1;
+    else if (scss[i] === "}") {
+      depth -= 1;
+      if (depth === 0) return scss.slice(open, i + 1);
+    }
+  }
+  return "";
+}
+
+describe("HkTagInput drag feedback and text selection", () => {
+  it("lifts the dragged item in both lists instead of only dimming it", () => {
+    const lift = styleBlock(".hk-tag-input-tag-dragging,");
+    // ONE rule body serves both lists: the chip's class and the row's data
+    // attribute — the very hooks the DOM tests above assert.
+    expect(scss).toMatch(
+      /\.hk-tag-input-tag-dragging,\s*\n\.hk-tag-input-row\[data-dragging\]\s*\{/,
+    );
+    expect(lift).toMatch(/box-shadow:/);
+    // Subtle dimming on purpose: the lifted item must stay readable as the
+    // one being moved, not fade away (the pre-wave 0.55 did).
+    expect(lift).toMatch(/opacity:\s*0\.85/);
+    // The lift is a state, never layout: no width/height/margin edits, and
+    // no isotropic scale smuggled into the shared body.
+    expect(lift).not.toMatch(/(^|[^-])(width|height|margin|padding)\s*:/);
+    expect(lift).not.toMatch(/transform\s*:/);
+  });
+
+  it("scales each list ALONG its drag axis and never across it", () => {
+    // The drop slot is resolved from the items' live rects
+    // (usePointerReorder.indexAt): the item's midpoint on the drag axis
+    // picks the slot, and every item's span on the axis ACROSS it decides
+    // which line the pointer is on. A scale is symmetric about the centre,
+    // so scaling along the drag axis changes neither — while growing across
+    // it widens the dragged item's band, and a pointer a few pixels outside
+    // the strip would then match that item alone: every sibling falls out of
+    // the line filter and the drag silently collapses to a no-op. CSS is the
+    // only place this can regress, so each hook's own transform is pinned.
+    const axisTransform = (hook: string): string | undefined =>
+      scss.match(
+        new RegExp(`${hook.replace(/[[\]]/g, "\\$&")}\\s*\\{\\s*transform:\\s*([^;]+);`),
+      )?.[1];
+    expect(axisTransform(".hk-tag-input-tag-dragging"), "the chip strip is horizontal").toBe(
+      "scaleX(1.03)",
+    );
+    expect(axisTransform(".hk-tag-input-row[data-dragging]"), "the row list is vertical").toBe(
+      "scaleY(1.03)",
+    );
+  });
+
+  it("keeps the lift's state marker under reduced motion and drops only its ramp", () => {
+    const reduce = scss.slice(scss.indexOf("@media (prefers-reduced-motion: reduce)"));
+    expect(reduce, "the reduced-motion block exists").toContain(".hk-tag-input-tag-dragging");
+    expect(reduce).toContain(".hk-tag-input-row[data-dragging]");
+    expect(reduce).toMatch(/transition:\s*none/);
+    // The scale and the shadow survive — a reduced-motion user gets the
+    // same affordance, just without the 0.12s motion.
+    expect(reduce).not.toMatch(/transform:\s*none/);
+    expect(reduce).not.toMatch(/box-shadow:\s*none/);
+  });
+
+  it("restores text selection on a disabled field's chips only", () => {
+    const disabled = styleBlock(".hk-tag-input-box[data-disabled] .hk-tag-input-tag");
+    expect(disabled).toContain("user-select: text");
+    expect(disabled).toContain("-webkit-user-select: text");
+    expect(disabled).toContain("cursor: default");
+    // The editable chip keeps the gesture reservation: its press is the
+    // reorder gesture, so it stays non-selectable (the documented trade-off).
+    const chip = styleBlock(".hk-tag-input-tag {");
+    expect(chip).toContain("user-select: none");
+    expect(chip).toContain("cursor: grab");
+    // The panel rows' LABELS are never selection-blocked — only the grip,
+    // which is the drag handle, reserves the gesture.
+    expect(styleBlock(".hk-tag-input-grip {")).toContain("user-select: none");
+    const row = styleBlock(".hk-tag-input-row {");
+    expect(row).not.toMatch(/user-select/);
+  });
+});

package/src/components/HkTagInput.tsx

@@ -130,8 +130,11 @@ type HkTagStop =
  *     a plain click/tap still clicks:
  *       * a CHIP is dragged by its BODY (its × never starts a drag, and
  *         pressing any control inside a chip is not a drag at all); the
- *         chip follows no ghost — the drop slot is highlighted and the
- *         release emits the reordered array;
+ *         chip follows no ghost — it LIFTS in place (a touch larger,
+ *         raised off the surface, only lightly dimmed so it stays legible
+ *         as the item being moved) while the drop slot is ringed and the
+ *         release emits the reordered array. The lift is what makes the
+ *         gesture readable under a finger, where the cursor is invisible;
  *       * in the PANEL only the SELECTED rows move, and only through the
  *         explicit GRIP HANDLE at the row's trailing edge (the handle is
  *         the one element that claims touch, so the sheet keeps scrolling
@@ -142,10 +145,17 @@ type HkTagStop =
  *         of the (capped) surface in one gesture; nothing is scrolled
  *         without a live drag. A row drag is CLAMPED to the selected
  *         group: unselected rows are not drop targets and never move, and
- *         a release past the group's end lands on its last position;
+ *         a release past the group's end lands on its last position. A
+ *         dragged row lifts exactly like a dragged chip;
  *     both lists are keyed HkListTransition groups (FLIP `move`), so the
  *     moved chip/row and its neighbours animate into their new places,
- *     with the library's usual reduced-motion opt-outs;
+ *     with the library's usual reduced-motion opt-outs (the lift's scale
+ *     and shadow stay — only their 0.12s ramp is dropped, so a
+ *     reduced-motion user keeps the state marker without the motion). The
+ *     lift scales ALONG each list's drag axis and never across it: the drop
+ *     slot is resolved from the items' live rects, so a span grown across
+ *     that axis would hide every sibling from the pointer and silently
+ *     collapse the gesture into a no-op;
  *   - a key in `modelValue` that the catalog does not carry (a custom
  *     tag, or an option deleted since) degrades to its raw key as the
  *     tag label — the same rule as HkAffixPicker.tagEntries. Such a key
@@ -188,6 +198,21 @@ type HkTagStop =
  * row). The grip handle is a pointer affordance; the field and the panel
  * are otherwise pointer-only for reordering.
  *
+ * CHIP TEXT IS NOT SELECTABLE WHILE THE FIELD IS EDITABLE — the chip is an
+ * interactive control, and its press is the reorder gesture, exactly as a
+ * `<button>`'s label is not selectable because its press is the activation.
+ * The two cannot be had at once: a press allowed to start a text selection
+ * is a press the browser has already claimed, so it can no longer become a
+ * ~6px drag (on touch the long press raises the selection callout and the
+ * drag dies on `pointercancel`; on a mouse the two gestures run together
+ * and neither reads). The threshold therefore wins by design, and the
+ * trade-off is paid where it costs nothing instead: a DISABLED field
+ * reorders nothing, so its chips ARE selectable text — the stylesheet
+ * flips their `user-select` back to `text` (and drops the grab cursor)
+ * under the box's own disabled hook. The panel rows keep their LABELS
+ * selectable even while editable: only the grip handle reserves the
+ * gesture there, and it — not the label — is the drag target.
+ *
  * `maxTags` freezes ADDS only. Reordering stays available at the cap:
  * the order is host state, and a reorder adds nothing (nor removes
  * anything).

package/src/components/HkThemeToggle.contract.test.ts

@@ -6,6 +6,13 @@
  * layout engine, so the geometry contract is pinned as an scss-text
  * assertion: the theme-row lead cell must carry an explicit size that
  * fits the widest host lead mark, not just the mixin's generic box.
+ *
+ * The widened cell must stay scoped to the lead slot (2026-09-12 field
+ * report): shipped first as a bare `.s-theme-item-btn .hk-menu-item-icon`
+ * rule, it also matched the 自定义 row and every host row reusing
+ * s-theme-item-btn (chest's mode-extra DPI entry) — and mi.icon
+ * normalizes those cells' svg to the cell, so their 14px glyphs rendered
+ * 28px wide.
  */
 import { describe, expect, it } from "vitest";
 import { readFileSync } from "node:fs";
@@ -19,10 +26,18 @@ describe("HkThemeToggle row lead-cell contract", () => {
   it("sizes the theme-row lead cell to fit a 28px swatch mark", () => {
     const css = read("HkThemeToggle.scss");
     const block = css.match(
-      /\.s-theme-item-btn \.hk-menu-item-icon\s*\{[^}]*\}/,
+      /\.s-theme-item-btn \.hk-menu-item-icon\.s-theme-item-lead\s*\{[^}]*\}/,
     );
     expect(block).not.toBeNull();
     expect(block![0]).toContain("width: 28px");
     expect(block![0]).toContain("height: 28px");
   });
+
+  it("does not widen icon cells outside the leading slot", () => {
+    const css = read("HkThemeToggle.scss");
+    // A bare `.s-theme-item-btn .hk-menu-item-icon {` rule also hits the
+    // customize row and host mode-extra rows; the widened cell may only
+    // target the lead slot class.
+    expect(css).not.toMatch(/\.s-theme-item-btn \.hk-menu-item-icon\s*\{/);
+  });
 });

package/src/components/HkThemeToggle.scss

@@ -188,15 +188,22 @@
   @include mi.label;
 }
 
-/* Leading check / customize glyphs share the spec's fixed icon cell —
- * sized for the WIDEST lead mark hosts render there, not the generic
- * 16px box: chest's three-dot palette swatch is 28px (3×8px dots + 2px
- * gaps), and a mark wider than its cell bleeds symmetrically out of the
- * cell into the row gap — at fractional zoom rounding the dots visually
- * overlap the name (2026-09-11 field report). A uniform 28px cell keeps
- * every row's name starting at the same x (swatch rows and icon rows
- * stay aligned) and leaves the bleed zero room at any zoom. */
-.s-theme-item-btn .hk-menu-item-icon {
+/* Leading slot glyphs share the spec's fixed icon cell — sized for the
+ * WIDEST lead mark hosts render there, not the generic 16px box: chest's
+ * three-dot palette swatch is 28px (3×8px dots + 2px gaps), and a mark
+ * wider than its cell bleeds symmetrically out of the cell into the row
+ * gap — at fractional zoom rounding the dots visually overlap the name
+ * (2026-09-11 field report). A uniform 28px cell keeps every row's name
+ * starting at the same x (swatch rows and icon rows stay aligned) and
+ * leaves the bleed zero room at any zoom.
+ *
+ * The widened cell is scoped to the LEAD slot only (2026-09-12 field
+ * report): the bare `.s-theme-item-btn .hk-menu-item-icon` this shipped
+ * as also matched the 自定义 row and every host row reusing
+ * s-theme-item-btn (chest's mode-extra DPI entry), where mi.icon
+ * normalizes the svg to the cell — their 14px glyphs rendered 28px
+ * wide. Rows without a leading slot keep the standard menu metrics. */
+.s-theme-item-btn .hk-menu-item-icon.s-theme-item-lead {
   @include mi.icon;
 
   width: 28px;