@celestia-island/hikari 0.55.302 → 0.55.304

package/package.json

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