@celestia-island/hikari 0.55.303 → 0.55.305

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.303",
+  "version": "0.55.305",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkAffixPicker.scss

@@ -181,6 +181,13 @@
 }
 
 .hk-affix-tag-x {
+  /* Wave B2 hybrid decision: the × keeps its own onmousedown
+     prevent-default (tapping must not steal focus or start a selection) and
+     its 1.5rem field density, so it deliberately stays a BARE button — the
+     contract is pinned Rust-side
+     (`affix_tag_close_stays_a_bare_button_by_contract`). What standardizes
+     is the INK: it consumes the icon-button channel vars (current values as
+     first fallbacks = zero visual change). */
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -191,15 +198,21 @@
   border: 0;
   border-radius: var(--radius-full, 999px);
   background: transparent;
-  color: rgb(var(--color-muted));
+  color: var(--hi-icon-button-icon-color, rgb(var(--color-muted)));
   cursor: pointer;
   appearance: none;
   transition: color 0.12s ease, background 0.12s ease;
 
   &:hover,
   &:focus-visible {
-    color: rgb(var(--color-error, 247 118 142));
-    background: rgb(var(--color-error, 247 118 142) / 12%);
+    color: var(
+      --hi-icon-button-icon-color-active,
+      rgb(var(--color-error, 247 118 142))
+    );
+    background: var(
+      --hi-icon-button-bg-hover,
+      rgb(var(--color-error, 247 118 142) / 12%)
+    );
   }
 }
 

package/src/components/HkBreadcrumb.tsx

@@ -1,3 +1,5 @@
+import { ChevronRight } from "lucide-vue-next";
+
 import { computed, defineComponent, type PropType } from "vue";
 import { safeHref } from "../utils/safeHref";
 import { useI18n } from "../i18n/context";
@@ -26,9 +28,7 @@ export default defineComponent({
               )}
               {index < props.items.length - 1 && (
                 <span class="hk-breadcrumb-separator">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                    <polyline points="9 18 15 12 9 6" />
-                  </svg>
+                  <ChevronRight />
                 </span>
               )}
             </li>

package/src/components/HkDatePicker.scss

@@ -95,6 +95,11 @@
 }
 
 .hk-dp-clear {
+  /* Wave B1 hybrid decision (see HkSearchInput's twin): tabindex=-1 + own
+     keydown stop-propagation = stays a BARE button, pinned by
+     `date_clear_stays_a_bare_button_by_contract`. The reveal-on-hover
+     mechanism is the field's own contract and stays. What standardizes is
+     the INK via the icon-button channel vars (zero visual change). */
   appearance: none;
   display: inline-flex;
   align-items: center;
@@ -104,7 +109,7 @@
   border: 0;
   background: transparent;
   border-radius: var(--radius-sm, 4px);
-  color: var(--hi-color-muted);
+  color: var(--hi-icon-button-icon-color, var(--hi-color-muted));
   cursor: pointer;
   opacity: 0;
   transition: opacity var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease;
@@ -116,7 +121,7 @@
   }
 
   &:hover {
-    color: var(--hi-color-text-primary);
+    color: var(--hi-icon-button-icon-color-active, var(--hi-color-text-primary));
   }
 }
 

package/src/components/HkDraggableGrid.tsx

@@ -1,3 +1,5 @@
+import { GripVertical } from "lucide-vue-next";
+
 import { defineComponent, onBeforeUnmount, ref, shallowRef, watch, type PropType } from "vue";
 import { onceFrame } from "../runtime/animationBus";
 import { useReportedTransition } from "../composables/useReportedTransition";
@@ -271,14 +273,7 @@ export default defineComponent({
                         }}
                       >
                         {slots.handle ? slots.handle() : (
-                          <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
-                            <circle cx="4" cy="3" r="1.2" />
-                            <circle cx="4" cy="7" r="1.2" />
-                            <circle cx="4" cy="11" r="1.2" />
-                            <circle cx="10" cy="3" r="1.2" />
-                            <circle cx="10" cy="7" r="1.2" />
-                            <circle cx="10" cy="11" r="1.2" />
-                          </svg>
+                          <GripVertical size={14} />
                         )}
                       </span>
                       <div class="hk-draggable-grid-content">

package/src/components/HkDraggableList.tsx

@@ -1,3 +1,5 @@
+import { GripVertical } from "lucide-vue-next";
+
 import { defineComponent, onBeforeUnmount, onMounted, ref, shallowRef, type PropType } from "vue";
 import { onceFrame } from "../runtime/animationBus";
 import { useReportedTransition } from "../composables/useReportedTransition";
@@ -349,14 +351,7 @@ export default defineComponent({
                   }}
                 >
                   {slots.handle ? slots.handle() : (
-                    <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
-                      <circle cx="4" cy="3" r="1.2" />
-                      <circle cx="4" cy="7" r="1.2" />
-                      <circle cx="4" cy="11" r="1.2" />
-                      <circle cx="10" cy="3" r="1.2" />
-                      <circle cx="10" cy="7" r="1.2" />
-                      <circle cx="10" cy="11" r="1.2" />
-                    </svg>
+                    <GripVertical size={14} />
                   )}
                 </span>
                 <div class="hk-draggable-list-content">

package/src/components/HkEmptyState.tsx

@@ -1,3 +1,5 @@
+import { Package } from "lucide-vue-next";
+
 import { defineComponent, h, type Component, type PropType } from "vue";
 
 import { useI18n } from "../i18n/context";
@@ -56,19 +58,7 @@ export default defineComponent({
               ) : props.icon ? (
                 h(props.icon, { size: 32, "aria-hidden": true })
               ) : (
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  width="48"
-                  height="48"
-                >
-                  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
-                  <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
-                </svg>
+                <Package size={48} stroke-width={1.5} />
               )}
             </div>
             {props.title ? <p class="hk-empty-title">{props.title}</p> : null}

package/src/components/HkExpansionPanel.tsx

@@ -1,3 +1,5 @@
+import { ChevronDown } from "lucide-vue-next";
+
 import { computed, defineComponent, ref, watch } from "vue";
 import "./HkExpansionPanel.scss";
 
@@ -87,9 +89,7 @@ export default defineComponent({
             </div>
           )}
           <span class="hk-expansion-panel-chevron" aria-hidden="true">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <polyline points="6 9 12 15 18 9" />
-            </svg>
+            <ChevronDown />
           </span>
         </button>
         <div class="hk-expansion-panel-body">

package/src/components/HkFab.test.tsx

@@ -64,11 +64,12 @@ afterEach(() => {
 });
 
 describe("HkFab shell", () => {
-  it("renders a round button with the aria label and the default chevron svg", () => {
+  it("renders a round button with the aria label and the default chevron glyph", () => {
     const m = mountFab({ ariaLabel: "Jump to latest" });
     expect(m.button.getAttribute("aria-label")).toBe("Jump to latest");
-    // No icon prop -> inline chevron-down fallback svg.
-    expect(m.button.querySelector("svg polyline")).not.toBeNull();
+    // No icon prop -> the standard lucide chevron-down (wave B4: the
+    // hand-drawn inline fallback retired).
+    expect(m.button.querySelector("svg.lucide-chevron-down")).not.toBeNull();
   });
 
   it("mirrors positioning/corner/size/variant props onto data attributes", () => {

package/src/components/HkFab.tsx

@@ -1,3 +1,5 @@
+import { ChevronDown } from "lucide-vue-next";
+
 import {
   defineComponent,
   h,
@@ -141,19 +143,9 @@ export default defineComponent({
             : RegistryIcon
               ? h(RegistryIcon)
               : (
-                // Inline chevron-down fallback (kept local to avoid
-                // pulling the lucide symbol through a non-registry path).
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  aria-hidden="true"
-                >
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
+                // Wave B4: the hand-drawn fallback retired — the standard
+                // lucide component, same channel as every other control.
+                <ChevronDown aria-hidden="true" />
               )}
         </span>
       );

package/src/components/HkFileField.scss

@@ -98,28 +98,10 @@
 }
 
 .hk-file-clear {
+  /* The clear affordance is the STANDARD icon button (wave B1): S24 exactly
+     replaces the old 1.5rem box; box, ink, hover and focus come from the
+     component. The seat keeps only its flex slot in the trigger row. */
   flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-xs, 2px);
-  color: rgb(var(--color-text) / 55%);
-  cursor: pointer;
-
-  &:hover {
-    background: rgb(var(--color-text) / 8%);
-    color: rgb(var(--color-text));
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--hi-color-primary, #7aa2f7);
-    outline-offset: 1px;
-  }
 }
 
 /* The native input stays in the DOM for the trigger to click, but is

package/src/components/HkFileField.tsx

@@ -1,3 +1,7 @@
+import { X } from "lucide-vue-next";
+
+import HkIconButton from "./HkIconButton";
+
 import { computed, defineComponent, ref, useId, watch } from "vue";
 
 import { useI18n } from "../i18n/context";
@@ -170,26 +174,15 @@ export default defineComponent({
               </span>
             </button>
             {files.length > 0 && !props.disabled && (
-              <button
-                type="button"
+              <HkIconButton
                 class="hk-file-clear"
+                size={24}
+                variant="ghost"
                 aria-label={t("hikari::filePicker.fieldClear", "Clear selection")}
                 onClick={clear}
               >
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  width="14"
-                  height="14"
-                  aria-hidden="true"
-                >
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-              </button>
+                {{ icon: () => <X aria-hidden="true" /> }}
+              </HkIconButton>
             )}
             {props.mode === "local" && (
               <input

package/src/components/HkFilterPanel.scss

@@ -83,33 +83,23 @@
 }
 
 .hk-filter-panel-op {
+  /* Wave B2: the operator toggles are STANDARD icon buttons at the S28 rung
+     (the old 1.75rem box). The pressed operator's persistent primary tint
+     rides the seat's channel overrides, scoped to [aria-pressed="true"];
+     font-weight stays a seat concern (the component carries no text). */
   flex: 0 0 auto;
   scroll-snap-align: center;
-  min-width: 1.75rem;
-  height: 1.75rem;
-  padding: 0 var(--space-6, 0.375rem);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: var(--radius-sm, 6px);
-  background: transparent;
-  color: rgb(var(--color-muted, var(--color-text-secondary)));
-  font-size: var(--text-sm, 0.875rem);
-  line-height: 1;
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
-}
 
-.hk-filter-panel-op:hover {
-  background: rgb(var(--color-primary) / 12%);
-  color: rgb(var(--color-text));
-}
-
-.hk-filter-panel-op[aria-pressed="true"] {
-  background: rgb(var(--color-primary) / 18%);
-  color: rgb(var(--color-primary));
-  font-weight: 700;
+  &[aria-pressed="true"] {
+    --hi-icon-button-bg: rgb(var(--color-primary) / 18%);
+    --hi-icon-button-icon-color: rgb(var(--color-primary));
+    --hi-icon-button-icon-color-active: rgb(var(--color-primary));
+    /* Keep the primary tint THROUGH hover (the old file-order cascade
+       did): without this the pressed op falls back to the ghost gray-20
+       hover wash and reads un-pressed under the pointer. */
+    --hi-icon-button-bg-hover: rgb(var(--color-primary) / 18%);
+    font-weight: 700;
+  }
 }
 
 .hk-filter-panel-op:disabled {
@@ -133,28 +123,16 @@
 }
 
 .hk-filter-panel-remove {
+  /* Wave B2: the condition remove is the STANDARD icon button (S24 = the
+     old 1.5rem box). The error-tinted hover rides the channel vars — ink
+     hover-scoped (the token-input lesson: a rest-scoped ink var reads at
+     rest); the standard layer owns disabled presentation. */
   flex: 0 0 auto;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: var(--radius-sm, 6px);
-  background: transparent;
-  color: rgb(var(--color-muted, var(--color-text-secondary)));
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
-}
-
-.hk-filter-panel-remove:hover {
-  background: rgb(var(--color-error) / 12%);
-  color: rgb(var(--color-error));
-}
+  --hi-icon-button-bg-hover: rgb(var(--color-error) / 12%);
 
-.hk-filter-panel-remove:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  &:hover {
+    --hi-icon-button-icon-color: rgb(var(--color-error));
+  }
 }
 
 /* The growth verb: parked in the OPERATOR COLUMN (grid-column 2), so it

package/src/components/HkFilterPanel.tsx

@@ -1,3 +1,5 @@
+import HkIconButton from "./HkIconButton";
+
 import { computed, defineComponent, nextTick, ref, watch, type PropType } from "vue";
 import { Plus, X } from "lucide-vue-next";
 
@@ -325,18 +327,19 @@ export default defineComponent({
                   {ops.map((op) => {
                     const glyph = glyphOpFor(kind, op);
                     return (
-                    <button
+                    <HkIconButton
                       key={op}
-                      type="button"
                       class="hk-filter-panel-op"
+                      size={28}
+                      variant="ghost"
                       aria-pressed={cond.op === op}
                       aria-label={t(OPERATOR_LABEL[glyph].key, OPERATOR_LABEL[glyph].fallback)}
-                      title={t(OPERATOR_LABEL[glyph].key, OPERATOR_LABEL[glyph].fallback)}
+                      {...{ title: t(OPERATOR_LABEL[glyph].key, OPERATOR_LABEL[glyph].fallback) }}
                       disabled={props.disabled || !field}
                       onClick={() => emitCondition(index, { op })}
                     >
-                      <HkFilterOperatorIcon op={glyph} />
-                    </button>
+                      {{ icon: () => <HkFilterOperatorIcon op={glyph} /> }}
+                    </HkIconButton>
                     );
                   })}
                 </div>
@@ -394,19 +397,20 @@ export default defineComponent({
                    * page refetches without it). Sibling conditions on
                    * the same field survive — index-targeted removal,
                    * never key-targeted. */}
-                  <button
-                    type="button"
+                  <HkIconButton
                     class="hk-filter-panel-remove"
+                    size={24}
+                    variant="ghost"
                     aria-label={t("hikari::filterPanel.removeCondition", "Remove condition")}
-                    title={t("hikari::filterPanel.removeCondition", "Remove condition")}
+                    {...{ title: t("hikari::filterPanel.removeCondition", "Remove condition") }}
                     disabled={props.disabled}
                     onClick={() => {
                       const next = props.modelValue.filter((_, i) => i !== index);
                       emit("update:modelValue", next);
                     }}
                   >
-                    <X size={14} aria-hidden="true" />
-                  </button>
+                    {{ icon: () => <X aria-hidden="true" /> }}
+                  </HkIconButton>
                 </div>
               </div>
             );

package/src/components/HkKeywordSearchModal.scss

@@ -41,23 +41,10 @@
 }
 
 .hk-kw-search-clear {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  color: var(--hi-color-text-secondary, #666666);
-  cursor: pointer;
-  display: inline-flex;
+  /* Wave B2/B3: the clear affordance is the STANDARD icon button — box,
+     ink, hover and focus come from the component; the seat keeps only the
+     field's inner padding slot. */
   padding: var(--space-2, 0.125rem);
-  border-radius: var(--radius-sm, 0.25rem);
-
-  &:hover {
-    color: var(--hi-color-text-primary, #1e1e1e);
-  }
-
-  &:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--hi-color-primary, #7aa2f7) 55%, transparent);
-    outline-offset: 2px;
-  }
 }
 
 /* ONE SCROLLBAR PER WINDOW (2026-09-08 audit): the results list is NOT a

package/src/components/HkKeywordSearchModal.tsx

@@ -1,3 +1,5 @@
+import HkIconButton from "./HkIconButton";
+
 import { computed, defineComponent, onBeforeUnmount, ref, watch, type PropType } from "vue";
 
 import { useI18n } from "../i18n/context";
@@ -241,9 +243,10 @@ export default defineComponent({
               autofocus
             />
             {query.value && (
-              <button
+              <HkIconButton
                 class="hk-kw-search-clear"
-                type="button"
+                size={24}
+                variant="ghost"
                 aria-label={t("hikari::keywordSearch.clear", "Clear")}
                 onClick={() => {
                   query.value = "";
@@ -251,19 +254,21 @@ export default defineComponent({
                   semanticResults.value = [];
                 }}
               >
-                <svg
-                  width="14"
-                  height="14"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                >
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-              </button>
+                {{ icon: () => (
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                ) }}
+              </HkIconButton>
             )}
           </div>
 

package/src/components/HkLocalePicker.tsx

@@ -1,3 +1,5 @@
+import { ChevronDown } from "lucide-vue-next";
+
 import { defineComponent, ref, type PropType } from "vue";
 
 import HkLocalePickerPopup from "./HkLocalePickerPopup";
@@ -50,14 +52,7 @@ export const HkLocalePicker = defineComponent({
           onClick={() => (open.value = !open.value)}
         >
           {props.currentLocale.toUpperCase()}
-          <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
-            <path
-              d="M2 3.5l3 3 3-3"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.2"
-            />
-          </svg>
+          <ChevronDown size={10} aria-hidden="true" />
         </button>
         <HkLocalePickerPopup
           open={open.value}