@celestia-island/hikari 0.55.143 → 0.55.145

package/package.json

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

package/src/components/HkAdaptiveDialog.tsx

@@ -48,6 +48,9 @@ export default defineComponent({
     closable: { type: Boolean, default: true },
     /** Desktop modal width (HkModal `width`). */
     width: { type: String as PropType<ModalWidth>, default: "32rem" },
+    /** Desktop-only: the modal header becomes a drag handle (see
+     * HkModal `draggable`); the mobile sheet never drags. */
+    draggable: { type: Boolean, default: false },
     /** Mobile drawer height (HkDrawer `size`). HkDrawer's bottom-side CSS
      *  clamps panels at maxHeight 70vh, so the default equals the cap;
      *  pass `panelClass` with a custom max-height for taller sheets. */
@@ -153,6 +156,7 @@ export default defineComponent({
           title={props.title}
           closable={props.closable}
           width={props.width}
+          draggable={props.draggable}
           footerActions={props.footerActions}
         >
           {{

package/src/components/HkDatePicker.test.ts

@@ -194,7 +194,7 @@ describe("HkDatePicker", () => {
   });
 
   it("disables days outside the inclusive min/max bounds", async () => {
-    const p = mountPicker({ modelValue: "2026-08-16", min: "2026-08-10", max: "2026-08-20" });
+    const p = mountPicker({ modelValue: "2026-08-16", min: "2026-08-10", max: "2026-08-20", nativeOnMobile: true });
     openViaEnter(p);
     await nextTick();
     const byDay = new Map(
@@ -453,22 +453,12 @@ describe("HkDatePicker", () => {
     expect(stage?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell:not([data-variant])").length).toBe(42);
   });
 
-  // ── Mobile pass-through to the native OS control ────────────────
+  // ── Mobile: the CALENDAR is the default; the native input is the
+  // ── explicit opt-out (2026-10-11 direction: no native controls) ──
 
-  it("renders a native date input instead of the calendar on mobile", () => {
+  it("keeps the calendar on mobile by default (no native input)", async () => {
     useMobileViewport();
     const p = mountPicker({ modelValue: "2026-08-16" });
-    const input = nativeInput(p.container);
-    expect(input).not.toBeNull();
-    expect(input?.type).toBe("date");
-    expect(input?.value).toBe("2026-08-16");
-    expect(p.container.querySelector(".hk-dp-trigger")).toBeNull();
-    expect(p.container.querySelector(".hk-dp-panel")).toBeNull();
-  });
-
-  it("keeps the custom calendar on mobile when nativeOnMobile is false", async () => {
-    useMobileViewport();
-    const p = mountPicker({ modelValue: "2026-08-16", nativeOnMobile: false });
     expect(p.container.querySelector(".hk-dp-trigger")).not.toBeNull();
     expect(nativeInput(p.container)).toBeNull();
     openViaEnter(p);
@@ -479,17 +469,28 @@ describe("HkDatePicker", () => {
     expect(panel()?.classList.contains("is-touch")).toBe(true);
   });
 
-  it("passes min/max through to the native input", () => {
+  it("renders a native date input on mobile only when nativeOnMobile opts in", () => {
+    useMobileViewport();
+    const p = mountPicker({ modelValue: "2026-08-16", nativeOnMobile: true });
+    const input = nativeInput(p.container);
+    expect(input).not.toBeNull();
+    expect(input?.type).toBe("date");
+    expect(input?.value).toBe("2026-08-16");
+    expect(p.container.querySelector(".hk-dp-trigger")).toBeNull();
+    expect(p.container.querySelector(".hk-dp-panel")).toBeNull();
+  });
+
+  it("passes min/max through to the native input (explicit opt-in)", () => {
     useMobileViewport();
-    const p = mountPicker({ modelValue: "2026-08-16", min: "2026-08-10", max: "2026-08-20" });
+    const p = mountPicker({ modelValue: "2026-08-16", min: "2026-08-10", max: "2026-08-20", nativeOnMobile: true });
     const input = nativeInput(p.container);
     expect(input?.min).toBe("2026-08-10");
     expect(input?.max).toBe("2026-08-20");
   });
 
-  it("native input edits emit the ISO date and clearing emits null", async () => {
+  it("native input edits emit the ISO date and clearing emits null (explicit opt-in)", async () => {
     useMobileViewport();
-    const p = mountPicker({ modelValue: "2026-08-16" });
+    const p = mountPicker({ modelValue: "2026-08-16", nativeOnMobile: true });
     const input = nativeInput(p.container);
     input!.value = "2026-08-20";
     input!.dispatchEvent(new Event("input", { bubbles: true }));
@@ -503,9 +504,9 @@ describe("HkDatePicker", () => {
     expect(p.emitted).toEqual(["2026-08-20", null]);
   });
 
-  it("native input edits outside the bounds are rejected and re-synced", async () => {
+  it("native input edits outside the bounds are rejected and re-synced (explicit opt-in)", async () => {
     useMobileViewport();
-    const p = mountPicker({ modelValue: "2026-08-16", max: "2026-08-20" });
+    const p = mountPicker({ modelValue: "2026-08-16", max: "2026-08-20", nativeOnMobile: true });
     const input = nativeInput(p.container);
     input!.value = "2026-09-01";
     input!.dispatchEvent(new Event("input", { bubbles: true }));

package/src/components/HkDatePicker.tsx

@@ -73,8 +73,12 @@ export default defineComponent({
     min: { type: String as PropType<string | undefined>, default: undefined },
     /** Inclusive upper bound as an ISO date; later days render disabled. */
     max: { type: String as PropType<string | undefined>, default: undefined },
-    /** Render the OS native `<input type="date">` on touch-sized viewports. */
-    nativeOnMobile: { type: Boolean, default: true },
+    /** Render the OS native `<input type="date">` on touch-sized viewports.
+     *  DEFAULTS FALSE since 2026-10-11 (user direction: no native controls
+     *  anywhere) — the calendar serves phones as a bottom sheet with the
+     *  enlarged touch chrome. The prop stays for one-off hosts that truly
+     *  want the OS picker; new callers should not set it. */
+    nativeOnMobile: { type: Boolean, default: false },
   },
   emits: {
     "update:modelValue": (_value: string | null) => true,

package/src/components/HkDateTimePicker.test.ts

@@ -324,11 +324,12 @@ describe("HkDateTimePicker", () => {
     expect(document.querySelectorAll(".hk-dtp-popup .hk-dtp-cell").length).toBe(42);
   });
 
-  // ── Mobile pass-through to the native OS control ────────────────
+  // ── Mobile: the calendar is the default; native is the explicit ──
+  // ── opt-out (2026-10-11 direction: no native controls) ───────────
 
-  it("renders a native datetime-local input instead of the calendar on mobile", () => {
+  it("renders a native datetime-local input on mobile only when nativeOnMobile opts in", () => {
     useMobileViewport();
-    const p = mountPicker();
+    const p = mountPicker({ nativeOnMobile: true });
     const input = nativeInput(p.container);
     expect(input).not.toBeNull();
     expect(input?.type).toBe("datetime-local");
@@ -337,9 +338,9 @@ describe("HkDateTimePicker", () => {
     expect(p.container.querySelector(".hk-dtp-grid")).toBeNull();
   });
 
-  it("uses a native date input when showTime is false", () => {
+  it("uses a native date input when showTime is false (explicit opt-in)", () => {
     useMobileViewport();
-    const p = mountPicker({ showTime: false });
+    const p = mountPicker({ showTime: false, nativeOnMobile: true });
     const input = nativeInput(p.container);
     expect(input?.type).toBe("date");
     expect(input?.value).toBe(isoDay(BASE));
@@ -347,15 +348,15 @@ describe("HkDateTimePicker", () => {
 
   it("passes min/max through to the native input in its wire format", () => {
     useMobileViewport();
-    const p = mountPicker({ min: dayOf(10, 8, 0), max: dayOf(20, 18, 30) });
+    const p = mountPicker({ min: dayOf(10, 8, 0), max: dayOf(20, 18, 30), nativeOnMobile: true });
     const input = nativeInput(p.container);
     expect(input?.min).toBe(isoMinute(dayOf(10, 8, 0)));
     expect(input?.max).toBe(isoMinute(dayOf(20, 18, 30)));
   });
 
-  it("keeps the custom calendar on mobile when nativeOnMobile is false", () => {
+  it("keeps the custom calendar on mobile by default", () => {
     useMobileViewport();
-    const p = mountPicker({ nativeOnMobile: false });
+    const p = mountPicker();
     expect(p.container.querySelector(".hk-dtp")).not.toBeNull();
     expect(dayCells().length).toBe(42);
     expect(nativeInput(p.container)).toBeNull();
@@ -365,7 +366,7 @@ describe("HkDateTimePicker", () => {
 
   it("native input edits update the model as a local-time Date", async () => {
     useMobileViewport();
-    const p = mountPicker();
+    const p = mountPicker({ nativeOnMobile: true });
     const input = nativeInput(p.container);
     input!.value = isoMinute(dayOf(20, 14, 5));
     input!.dispatchEvent(new Event("input", { bubbles: true }));
@@ -377,7 +378,7 @@ describe("HkDateTimePicker", () => {
 
   it("native date edits preserve the clock time when showTime is false", async () => {
     useMobileViewport();
-    const p = mountPicker({ showTime: false });
+    const p = mountPicker({ showTime: false, nativeOnMobile: true });
     const input = nativeInput(p.container);
     input!.value = isoDay(dayOf(20));
     input!.dispatchEvent(new Event("input", { bubbles: true }));
@@ -387,7 +388,7 @@ describe("HkDateTimePicker", () => {
 
   it("native input edits outside the bounds are rejected and re-synced", async () => {
     useMobileViewport();
-    const p = mountPicker({ max: dayOf(20, 23, 59) });
+    const p = mountPicker({ max: dayOf(20, 23, 59), nativeOnMobile: true });
     const input = nativeInput(p.container);
     // Next month, past the max bound.
     input!.value = isoMinute(new Date(BASE.getFullYear(), BASE.getMonth() + 1, 1, 10, 0));
@@ -399,7 +400,7 @@ describe("HkDateTimePicker", () => {
 
   it("clearing the native input falls back to the model value", async () => {
     useMobileViewport();
-    const p = mountPicker();
+    const p = mountPicker({ nativeOnMobile: true });
     const input = nativeInput(p.container);
     input!.value = "";
     input!.dispatchEvent(new Event("input", { bubbles: true }));
@@ -408,9 +409,9 @@ describe("HkDateTimePicker", () => {
     expect(input?.value).toBe(isoMinute(BASE));
   });
 
-  it("native input replaces even the popup chrome on mobile", () => {
+  it("native input replaces even the popup chrome on mobile (explicit opt-in)", () => {
     useMobileViewport();
-    const p = mountPicker({ mode: "popup", confirmLabel: "Confirm" });
+    const p = mountPicker({ mode: "popup", confirmLabel: "Confirm", nativeOnMobile: true });
     expect(nativeInput(p.container)).not.toBeNull();
     expect(p.container.querySelector(".hk-dtp-trigger")).toBeNull();
   });

package/src/components/HkDateTimePicker.tsx

@@ -95,7 +95,7 @@ export default defineComponent({
     confirmLabel: { type: String, default: undefined },
     showTime: { type: Boolean, default: true },
     /** Render the OS native `<input type="datetime-local">` on touch-sized viewports. */
-    nativeOnMobile: { type: Boolean, default: true },
+    nativeOnMobile: { type: Boolean, default: false }, // 2026-10-11: no native controls — the picker sheet serves phones
   },
   emits: {
     "update:modelValue": (_d: Date) => true,

package/src/components/HkFilterBar.tsx

@@ -99,6 +99,7 @@ export default defineComponent({
               anchorRef={anchorRef.value}
               placement={props.placement}
               offset={6}
+              sheetOnMobile
               title={label}
             >
               <div class="hk-filter-bar-panel" data-testid="hk-filter-bar-panel">

package/src/components/HkFilterPanel.tsx

@@ -1,5 +1,6 @@
 import { computed, defineComponent, type PropType } from "vue";
 
+import HkDatePicker from "./HkDatePicker";
 import HkInput from "./HkInput";
 import HkPopupSelect, { type HkPopupSelectOption } from "./HkPopupSelect";
 import { useI18n } from "../i18n/context";
@@ -168,9 +169,20 @@ export default defineComponent({
                       disabled={props.disabled}
                       options={selectOptions(field)}
                     />
+                  ) : field.kind === "date" ? (
+                    // The calendar picker — never the OS native input
+                    // (2026-10-11 direction); the wire format is the same
+                    // ISO YYYY-MM-DD the native input spoke.
+                    <HkDatePicker
+                      modelValue={condition.value || null}
+                      onUpdate:modelValue={(v: string | null) =>
+                        emitCondition(field, { value: v ?? "" })
+                      }
+                      disabled={props.disabled}
+                    />
                   ) : (
                     <HkInput
-                      type={field.kind === "date" ? "date" : "text"}
+                      type="text"
                       variant={field.kind === "number" ? "number" : "text"}
                       modelValue={condition.value}
                       onUpdate:modelValue={(v: string) =>

package/src/components/HkModal.draggable.styles.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+/** The drag affordance contract: the grab cursor/touch lock MUST ride
+ *  the frame selector — an earlier iteration targeted `.hk-modal[...]`
+ *  (a class no element carries) and shipped dead CSS (2026-10-11 R2
+ *  mutation M1 caught it with zero red). */
+describe("HkModal draggable affordance (styles contract)", () => {
+  it("scopes the grab handle to the frame's data attribute", () => {
+    const here = dirname(fileURLToPath(import.meta.url));
+    const scss = readFileSync(join(here, "HkModal.scss"), "utf-8");
+    const block = scss.match(/\.hk-modal-content\[data-draggable\]\s+\.hk-modal-header\s*{[^}]*}/)?.[0] ?? "";
+    expect(block, "the live drag-affordance selector").toContain("cursor: grab");
+    expect(block).toContain("touch-action: none");
+    expect(scss).not.toMatch(/\.hk-modal\[data-draggable\]/);
+  });
+});

package/src/components/HkModal.scss

@@ -59,7 +59,10 @@
   // The centering translate is part of EVERY transform state — the
   // enter/leave choreography scales on top of it and must never re-seat
   // the frame.
-  transform: translate(-50%, -50%);
+  transform: translate(
+        calc(-50% + var(--hk-modal-shift-x, 0px)),
+        calc(-50% + var(--hk-modal-shift-y, 0px))
+      );
   width: 100%;
   // Size changes animate instead of snapping: `height: auto` growth
   // cannot fire a CSS transition (verified in Chromium — neither auto
@@ -147,21 +150,31 @@
 
   .hk-modal-content-enter-from {
     opacity: 0;
-    transform: translate(-50%, -50%) translateY(5%);
+    transform: translate(
+          calc(-50% + var(--hk-modal-shift-x, 0px)),
+          calc(-50% + var(--hk-modal-shift-y, 0px))
+        )
+        translateY(5%);
     clip-path: inset(0 0 10% 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
                                  var(--hk-modal-radius, var(--radius-lg, 12px)));
   }
 
   .hk-modal-content-enter-to {
     opacity: 1;
-    transform: translate(-50%, -50%);
+    transform: translate(
+          calc(-50% + var(--hk-modal-shift-x, 0px)),
+          calc(-50% + var(--hk-modal-shift-y, 0px))
+        );
     clip-path: inset(0 0 0 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
                               var(--hk-modal-radius, var(--radius-lg, 12px)));
   }
 
   .hk-modal-content-leave-from {
     opacity: 1;
-    transform: translate(-50%, -50%);
+    transform: translate(
+          calc(-50% + var(--hk-modal-shift-x, 0px)),
+          calc(-50% + var(--hk-modal-shift-y, 0px))
+        );
     // The pinned identity clip: identical to enter-to so the leave's
     // clip interpolates (never jumps) — see the close note above.
     clip-path: inset(0 0 0 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
@@ -173,7 +186,11 @@
     // Mirror of enter-from: shifted +5% with the bottom 10% clipped, the
     // visible box is 90% and centered — both edges ease toward the
     // center line, exactly reversing the unveil.
-    transform: translate(-50%, -50%) translateY(5%);
+    transform: translate(
+          calc(-50% + var(--hk-modal-shift-x, 0px)),
+          calc(-50% + var(--hk-modal-shift-y, 0px))
+        )
+        translateY(5%);
     clip-path: inset(0 0 10% 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
                                  var(--hk-modal-radius, var(--radius-lg, 12px)));
   }
@@ -647,3 +664,15 @@
     transition: none;
   }
 }
+
+/* ── Draggable desktop windows (opt-in `draggable` prop) ──────────── */
+@media (min-width: 768px) {
+  .hk-modal-content[data-draggable] .hk-modal-header {
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+  .hk-modal-content[data-draggable] .hk-modal-header:active {
+    cursor: grabbing;
+  }
+}

package/src/components/HkModal.tsx

@@ -173,6 +173,14 @@ export default defineComponent({
      * own history entries.
      */
     backGuard: { type: Boolean, default: true },
+    /**
+     * Desktop-only drag: the header becomes a grab handle that moves
+     * the centered frame (composited into the transform via the
+     * --hk-modal-shift-x/y vars, so the enter/leave choreography is
+     * untouched). The mobile bottom sheet never drags. Reopening
+     * resets the shift.
+     */
+    draggable: { type: Boolean, default: false },
   },
   emits: {
     "update:modelValue": (_value: boolean) => true,
@@ -197,6 +205,72 @@ export default defineComponent({
     const handle = ref<{ id: string; zIndex: number } | null>(null);
     const bodyRef = ref<HTMLElement>();
     const contentRef = ref<HTMLElement>();
+    /** Live drag shift in px (null = not dragged); mirrored onto the
+     * frame as CSS vars so the class-driven transforms stay intact. */
+    const dragShift = ref<{ x: number; y: number } | null>(null);
+    let dragStart: { px: number; py: number; x: number; y: number } | null = null;
+
+    function applyShift() {
+      const el = contentRef.value;
+      if (!el) return;
+      if (dragShift.value) {
+        el.style.setProperty("--hk-modal-shift-x", `${dragShift.value.x}px`);
+        el.style.setProperty("--hk-modal-shift-y", `${dragShift.value.y}px`);
+      } else {
+        el.style.removeProperty("--hk-modal-shift-x");
+        el.style.removeProperty("--hk-modal-shift-y");
+      }
+    }
+
+    function onHeaderPointerDown(e: PointerEvent) {
+      // Desktop handle only: the sheet branch (<768px) never consumes
+      // the vars, and touch drag would fight the sheet's own gestures.
+      if (!props.draggable || e.button !== 0) return;
+      if (window.matchMedia("(max-width: 767px)").matches) return;
+      // Interactive chrome inside the header (the close button) keeps
+      // its own pointer semantics.
+      if ((e.target as HTMLElement).closest("button, a, input, select, textarea")) return;
+      const el = contentRef.value;
+      if (!el) return;
+      e.preventDefault();
+      const base = dragShift.value ?? { x: 0, y: 0 };
+      dragStart = { px: e.clientX, py: e.clientY, x: base.x, y: base.y };
+      (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+    }
+
+    function onHeaderPointerMove(e: PointerEvent) {
+      if (!dragStart) return;
+      // Re-check the guards: `draggable` may have been toggled off
+      // mid-drag, and a hover with no button pressed must never move
+      // the frame (a stale dragStart after a mid-drag close would
+      // otherwise ghost-drag on the next open).
+      if (!props.draggable || e.buttons === 0) {
+        dragStart = null;
+        return;
+      }
+      dragShift.value = {
+        x: dragStart.x + (e.clientX - dragStart.px),
+        y: dragStart.y + (e.clientY - dragStart.py),
+      };
+      applyShift();
+    }
+
+    function onHeaderPointerUp() {
+      dragStart = null;
+    }
+
+    // Reopening reseats the frame at center — and drops any stale
+    // dragStart (a close mid-capture never fires pointerup).
+    watch(
+      () => props.modelValue,
+      (open) => {
+        if (open) {
+          dragStart = null;
+          dragShift.value = null;
+          applyShift();
+        }
+      },
+    );
     /** Natural-height probe inside the scroll container: the body's
      *  content wrapper, whose height is the content's intrinsic height
      *  regardless of scroll — the size morph measures this (see
@@ -972,6 +1046,7 @@ export default defineComponent({
                   role="dialog"
                   aria-modal="true"
                   aria-label={resolvedSurfaceName.value}
+                  data-draggable={props.draggable || undefined}
                   style={{
                     maxWidth: resolvedWidth.value,
                     zIndex: contentZ.value,
@@ -991,6 +1066,10 @@ export default defineComponent({
                           "hk-modal-header",
                           slots.headerLead ? "hk-modal-header--lead" : "",
                         ]}
+                        onPointerdown={onHeaderPointerDown}
+                        onPointermove={onHeaderPointerMove}
+                        onPointerup={onHeaderPointerUp}
+                        onPointercancel={onHeaderPointerUp}
                       >
                         {slots.headerLead && (
                           <div class="hk-modal-header-lead">{slots.headerLead()}</div>

package/src/components/HkTokenField.scss

@@ -0,0 +1,105 @@
+/* HkTokenField — one box: slider ladder (major) + value + unit suffix.
+ * The track flexes; the value and the unit keep their content width so
+ * the slider takes whatever the row can spare (the "left bigger part"
+ * layout the model editor specified). */
+.hk-token-field {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 8px);
+  min-width: 0;
+  padding: var(--space-4, 4px) var(--space-8, 8px);
+  border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
+  border-radius: var(--radius-sm);
+  background: rgb(var(--color-surface));
+}
+
+.hk-token-field.is-disabled {
+  opacity: 0.55;
+}
+
+.hk-token-field-slider {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.hk-token-field-value {
+  flex: 0 0 auto;
+  min-width: 3.25rem;
+  padding: 2px var(--space-8, 8px);
+  border: none;
+  border-radius: var(--radius-sm);
+  background: rgb(var(--color-muted) / 12%);
+  color: rgb(var(--color-text));
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.hk-token-field-value:hover:not(:disabled) {
+  background: rgb(var(--color-muted) / 20%);
+}
+
+.hk-token-field-value:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(var(--color-primary) / 40%);
+}
+
+/* An off-ladder (typed) value gets the primary tint — the thumb rests
+ * at the nearest stop, the exact budget is what stands. */
+.hk-token-field[data-off-ladder] .hk-token-field-value {
+  background: rgb(var(--color-primary) / 14%);
+  color: var(--c-primary-strong, rgb(var(--color-primary)));
+}
+
+.hk-token-field-unit {
+  flex: 0 0 auto;
+  width: 4.25rem;
+}
+
+/* The precision editor body: value input (major) + unit (minor). */
+.hk-token-field-editor-body {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-8, 8px);
+  padding: var(--space-8, 8px) 0;
+}
+
+.hk-token-editor {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 8px);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.hk-token-editor-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.hk-token-editor-unit {
+  flex: 0 0 auto;
+  width: 5rem;
+}
+
+.hk-token-field-clear {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: var(--space-4, 4px);
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: rgb(var(--color-muted));
+  cursor: pointer;
+}
+
+.hk-token-field-clear:hover {
+  background: rgb(var(--color-error) / 10%);
+  color: rgb(var(--color-error));
+}