@celestia-island/hikari 0.55.303 → 0.55.304

package/package.json

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

package/src/components/HkModal.open-close-scale.test.ts

@@ -9,13 +9,14 @@
  * region above all) stays horizontally AND vertically centered at every t;
  * the translate prefix is byte-identical in every state so the ride can
  * never re-seat the frame. `.hk-modal-body` keeps a ride of its own:
- * `scale(1.1, 1) → scale(1, 1)` — the horizontal factor deliberately
- * OVERSHOOTS (user direction 2026-11-06: at the extremes the content is
- * WIDER than the window, clipped by the frame's overflow), while its
- * vertical factor stays 1 because the body's Y already rides the frame's
- * scaleY (own 0.9 would compound to 0.81). The retired grammars: the
- * 2026-11-04 whole-frame `scale(1, 0.9)` and the 2026-11-05 body-only
- * uniform `scale(0.9)`.
+ * `scale(0.95, 1) → scale(1, 1)` — the horizontal factor starts slightly
+ * NARROW and spreads out to fill the window (user direction 2026-11-06,
+ * revising the first cut: a 1.1 overshoot read as uglier than a slight
+ * pinch), while its vertical factor stays 1 because the body's Y already
+ * rides the frame's scaleY (own 0.9 would compound to 0.81). The retired
+ * grammars: the 2026-11-04 whole-frame `scale(1, 0.9)`, the 2026-11-05
+ * body-only uniform `scale(0.9)`, and the 2026-11-06 `scale(1.1, 1)`
+ * overshoot.
  *
  * Why compile: a source-text scanner can be dodged by a later duplicate
  * rule, a block comment, SCSS interpolation, `@extend` or an `@use`d
@@ -347,7 +348,7 @@ const BODY_ENTER_TRANSITION =
 const BODY_LEAVE_TRANSITION =
   "transform var(--hk-modal-duration, 0.32s) var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1))";
 
-describe("HkModal desktop open/close contract (compiled cascade, user direction 2026-11-05)", () => {
+describe("HkModal desktop open/close contract (compiled cascade, user direction 2026-11-06)", () => {
   it("compiles into a stylesheet with the ride rules present (known-positive)", () => {
     // Guard against a vacuous suite: the compiled sheet must really contain
     // the frame rule, the body rule and the reduced-motion flatten.
@@ -436,11 +437,11 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     expect(leaveWill).toBe("opacity, transform");
   });
 
-  it("rides the content region X 1.1→1 with Y pinned at 1, about its center", () => {
-    // 2026-11-06: the horizontal factor OVERSHOOTS (wider-than-window at
-    // the extremes; the frame's overflow clips the overhang) and the
-    // vertical factor stays 1 — the body's Y already rides the frame's
-    // scaleY, so its own 1 keeps the compound at exactly 0.9→1.
+  it("rides the content region X 0.95→1 with Y pinned at 1, about its center", () => {
+    // 2026-11-06 (revised): the content starts slightly NARROW (95% of the
+    // window width) and spreads to 100%; the vertical factor stays 1 — the
+    // body's Y already rides the frame's scaleY, so its own 1 keeps the
+    // compound at exactly 0.9→1.
     const expect_ = (state: string, value: string) => {
       const frame = frameWith(...RIDE.find((r) => r.name === state)!.classes);
       const body = child(frame, "hk-modal-body");
@@ -453,8 +454,8 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
       const [x = "50%", y = "50%"] = origin;
       expect([x, y], state).toEqual(["50%", "50%"]);
     };
-    expect_("enter-from", "scale(1.1, 1)");
-    expect_("leave-to", "scale(1.1, 1)");
+    expect_("enter-from", "scale(0.95, 1)");
+    expect_("leave-to", "scale(0.95, 1)");
     expect_("enter-to", "scale(1, 1)");
     expect_("leave-from", "scale(1, 1)");
     // …and the same with the opt-in draggable flag on, where an
@@ -463,7 +464,7 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
       const frame = draggableFrameWith(...state.classes);
       const body = child(frame, "hk-modal-body");
       const expected =
-        state.name === "enter-from" || state.name === "leave-to" ? "scale(1.1, 1)" : "scale(1, 1)";
+        state.name === "enter-from" || state.name === "leave-to" ? "scale(0.95, 1)" : "scale(1, 1)";
       expect(winner(body, "transform", DESKTOP), `draggable ${state.name}`).toBe(expected);
     }
     // At rest the body carries no transform at all.
@@ -546,10 +547,19 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     expect(winner(frameWith("hk-modal-content-leave-from", "hk-modal-content-leave-active"), "transform", MOBILE)).toBe("none");
     const resting = frameWith();
     expect(winner(resting, "transform", MOBILE)).toBe("none");
-    // No content-region scale in the sheet layout.
+    // No content-region scale in the sheet layout — at EITHER end of the
+    // ride. The settled states used to go unpinned (a max-width block
+    // could scale the body there and no assertion noticed; R3 mutation
+    // 2026-11-06), so all four states are spelled out.
     const body = child(frame, "hk-modal-body");
     expect(winner(body, "transform", MOBILE)).toBeUndefined();
     expect(winner(child(leaveEnd, "hk-modal-body"), "transform", MOBILE)).toBeUndefined();
+    expect(
+      winner(child(frameWith("hk-modal-content-enter-to", "hk-modal-content-enter-active"), "hk-modal-body"), "transform", MOBILE),
+    ).toBeUndefined();
+    expect(
+      winner(child(frameWith("hk-modal-content-leave-from", "hk-modal-content-leave-active"), "hk-modal-body"), "transform", MOBILE),
+    ).toBeUndefined();
   });
 
   it("never lets ANY rule put a transform on a chrome surface", () => {
@@ -590,7 +600,7 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     // three translate+scaleY states (reduced-motion flatten included);
     // body: the two two-arg scales.
     const LEGAL_FRAME = new Set([CENTERING, FRAME_FROM, FRAME_TO]);
-    const LEGAL_BODY = new Set(["scale(1.1, 1)", "scale(1, 1)"]);
+    const LEGAL_BODY = new Set(["scale(0.95, 1)", "scale(1, 1)"]);
     const offenders: string[] = [];
     // Media-independent on purpose: a ride selector declared at top level
     // (no media query) applies at every width, so it must obey the same

package/src/components/HkModal.scss

@@ -114,14 +114,14 @@
 // IS the window-height motion the user asked for.
 //
 // The content region keeps a ride of its own: `.hk-modal-body` settles
-// `scale(1.1, 1) → scale(1, 1)` about its center. The horizontal factor
-// deliberately OVERSHOOTS past 1 (user direction 2026-11-06: at the
-// open/close extremes the content is WIDER than the window — the frame's
-// `overflow: hidden` clips the overhang at the window edges, reading as
-// a press-in from both sides). The vertical factor stays exactly 1: the
-// body's Y dimension already rides the frame's `scaleY`, so its own 1
-// makes the compound 0.9 → 1 — the same vertical ride as before, never
-// the doubled 0.81 a second Y factor would produce.
+// `scale(0.95, 1) → scale(1, 1)` about its center. The horizontal factor
+// starts slightly NARROW (user direction 2026-11-06, after reviewing the
+// first cut: a 1.1 overshoot read as uglier than a slight pinch, so the
+// content starts at 95% width and spreads out to fill the window). The
+// vertical factor stays exactly 1: the body's Y dimension already rides
+// the frame's `scaleY`, so its own 1 makes the compound 0.9 → 1 — the
+// same vertical ride as before, never the doubled 0.81 a second Y factor
+// would produce.
 //
 // Hosts retune the ride through the `--hk-modal-*` tokens (duration /
 // easing) or the body padding vars — NOT by setting `transform` on
@@ -131,13 +131,13 @@
 // single-class transform would be overridden mid-ride and again under
 // reduced motion.
 //
-// No clip-path and no Y offset ride the open/close: besides the deliberate
-// X overshoot above, the visible box IS the frame at every t, so nothing
-// is ever sliced off (the 2026-09-14 clip unveil — and the #508/#512/#524
-// lineage before it — stays retired). All compositor-level: zero layout
-// per frame. The centering translate lives on the base .hk-modal-content
-// rule, so the frame never re-seats mid-flight. Scoped to ≥768px; ≤767px
-// keeps the sheet's translateY choreography below.
+// No clip-path and no Y offset ride the open/close: the visible box IS the
+// frame at every t, so nothing is ever sliced off (the 2026-09-14 clip
+// unveil — and the #508/#512/#524 lineage before it — stays retired). All
+// compositor-level: zero layout per frame. The centering translate lives
+// on the base .hk-modal-content rule, so the frame never re-seats
+// mid-flight. Scoped to ≥768px; ≤767px keeps the sheet's translateY
+// choreography below.
 // ------
 
 @media (min-width: 768px) {
@@ -153,7 +153,7 @@
   }
 
   // Close: the reveal's TRUE reverse — same chrome fade, while the window
-  // settles back toward 90% height and the content widens back out.
+  // settles back toward 90% height and the content pinches back in.
   .hk-modal-content-leave-active {
     transition:
       opacity var(--hk-modal-duration, 0.32s)
@@ -205,11 +205,11 @@
     will-change: transform;
   }
 
-  // Both ends two-arg `scale`: X overshoots 1.1 → 1, Y stays 1 (the body's
-  // vertical ride comes from the frame's scaleY, not from itself).
+  // Both ends two-arg `scale`: X starts at 95% and spreads to 1, Y stays 1
+  // (the body's vertical ride comes from the frame's scaleY, not itself).
   .hk-modal-content-enter-from .hk-modal-body,
   .hk-modal-content-leave-to .hk-modal-body {
-    transform: scale(1.1, 1);
+    transform: scale(0.95, 1);
   }
 
   .hk-modal-content-enter-to .hk-modal-body,

package/src/components/HkPasswordSurface.scss

@@ -275,7 +275,11 @@
   padding: 0.25rem;
   border: none;
   background: transparent;
-  color: var(--hi-color-text-secondary, #666666);
+  /* Wave B2/B3 hybrid decision: the eye is a PRESS-AND-HOLD control
+     (mousedown/up + keydown/up drive revealing — pinned Rust-side
+     `pwd_eye_stays_a_bare_button_by_contract`), so it stays a BARE button.
+     The ink consumes the icon-button channel vars (zero visual change). */
+  color: var(--hi-icon-button-icon-color, var(--hi-color-text-secondary, #666666));
   cursor: pointer;
   touch-action: none;
   /* iOS long-press must not summon the system callout / magnifier over
@@ -284,7 +288,10 @@
   -webkit-touch-callout: none;
 
   &:hover:not([data-revealing]) {
-    color: var(--hi-color-text-primary, #1e1e1e);
+    color: var(
+      --hi-icon-button-icon-color-active,
+      var(--hi-color-text-primary, #1e1e1e)
+    );
   }
 
   /* While held, the affordance reads as active: full primary tint like

package/src/components/HkSearchInput.scss

@@ -64,6 +64,13 @@
 }
 
 .hk-search-input-clear {
+  /* Wave B1 hybrid decision: this clear is tabindex=-1 (Escape and the
+     field's own keyboard path own dismissal) and keeps the field's hit-band
+     density, so it deliberately stays a BARE button — pinned by
+     `search_clear_stays_a_bare_button_by_contract`. What standardizes is the
+     INK: it consumes the same icon-button channel vars the standard
+     component reads, so theming moves together (current values kept as the
+     first fallback = zero visual change). */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -73,7 +80,7 @@
   padding: 0;
   background: transparent;
   border: none;
-  color: var(--hi-color-muted);
+  color: var(--hi-icon-button-icon-color, var(--hi-color-muted));
   cursor: pointer;
   transition:
     background-color var(--duration-fast, 0.15s) ease,
@@ -85,12 +92,12 @@
   }
 
   &:hover {
-    background: color-mix(in srgb, var(--hi-color-surface) 60%, transparent);
-    color: var(--hi-color-text-primary);
+    background: var(--hi-icon-button-bg-hover, color-mix(in srgb, var(--hi-color-surface) 60%, transparent));
+    color: var(--hi-icon-button-icon-color-active, var(--hi-color-text-primary));
   }
 
   &:active {
-    background: color-mix(in srgb, var(--hi-color-surface) 80%, transparent);
+    background: var(--hi-icon-button-bg-active, color-mix(in srgb, var(--hi-color-surface) 80%, transparent));
   }
 }
 

package/src/components/HkSelectionGrid.scss

@@ -264,36 +264,10 @@
 }
 
 .hk-selection-grid-action {
+  /* Wave B2: per-item actions are STANDARD icon buttons (S24/ghost) — box,
+     ink, hover and focus come from the component; the seat keeps the grid's
+     flex slot. */
   flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-sm, 4px);
-  background: transparent;
-  color: var(--hi-color-text-tertiary, #8b949e);
-  cursor: pointer;
-  transition:
-    color 200ms ease,
-    background 200ms ease;
-
-  &:hover:not(:disabled) {
-    color: rgb(var(--color-text));
-    background: rgb(var(--color-text) / 8%);
-  }
-
-  &:focus-visible {
-    outline: 2px solid rgb(var(--color-primary));
-    outline-offset: -2px;
-  }
-
-  &:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
 }
 
 /* ── Optional selected edge ──────────────────────────────────────────────

package/src/components/HkSelectionGrid.tsx

@@ -1,3 +1,5 @@
+import HkIconButton from "./HkIconButton";
+
 import { Check } from "lucide-vue-next";
 import { defineComponent, type PropType } from "vue";
 
@@ -156,11 +158,12 @@ export default defineComponent({
                       {item.actions.map((action) => {
                         const ActionIcon = action.icon;
                         return (
-                          <button
+                          <HkIconButton
                             key={action.id}
-                            type="button"
                             class="hk-selection-grid-action"
-                            title={action.label}
+                            size={24}
+                            variant="ghost"
+                            {...{ title: action.label }}
                             aria-label={action.label}
                             disabled={action.disabled || undefined}
                             onClick={(e: MouseEvent) => {
@@ -171,7 +174,7 @@ export default defineComponent({
                             }}
                           >
                             {ActionIcon && <ActionIcon size={14} />}
-                          </button>
+                          </HkIconButton>
                         );
                       })}
                     </div>

package/src/components/HkTag.scss

@@ -31,32 +31,12 @@
 }
 
 .hk-tag-close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  /* The chip × is the STANDARD icon button at the S16 rung (wave B1): the
+     14px bespoke box, the opacity dance and the focus outline are retired —
+     box/ink/hover/focus come from the component. The seat keeps only the
+     chip's trailing-edge spacing. 14px → 16px is the declared growth. */
   flex-shrink: 0;
-  width: 14px;
-  height: 14px;
-  border: none;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  opacity: 0.5;
-  padding: 0;
-  /* Trailing edge of the chip in both directions. */
   margin-inline-start: var(--space-2, 2px);
-  border-radius: var(--radius-sm, 4px);
-  transition: opacity var(--duration-fast, 0.15s) ease;
-}
-
-.hk-tag-close:hover {
-  opacity: 1;
-}
-
-/* Keyboard focus indicator (house focus-ring pattern). */
-.hk-tag-close:focus-visible {
-  outline: 2px solid rgb(var(--color-primary));
-  outline-offset: 2px;
 }
 
 .hk-tag-default {

package/src/components/HkTag.tsx

@@ -1,4 +1,6 @@
 import { X } from "lucide-vue-next";
+
+import HkIconButton from "./HkIconButton";
 import { computed, defineComponent, type PropType } from "vue";
 
 import "./HkTag.scss";
@@ -38,14 +40,15 @@ export default defineComponent({
         )}
         {slots.default?.()}
         {props.closable && (
-          <button
-            type="button"
+          <HkIconButton
             class="hk-tag-close"
+            size={16}
+            variant="ghost"
             aria-label={props.closeLabel}
             onClick={() => emit("close")}
           >
-            <X size={12} />
-          </button>
+            {{ icon: () => <X aria-hidden="true" /> }}
+          </HkIconButton>
         )}
       </span>
     );

package/src/components/HkThemePanelContent.tsx

@@ -1,3 +1,5 @@
+import HkIconButton from "./HkIconButton";
+
 import { computed, defineComponent, onUnmounted, ref, watch, type PropType } from "vue";
 import { Monitor, MoonStar, Palette, Sun, Trash as Trash2 } from "lucide-vue-next";
 import {
@@ -292,14 +294,16 @@ export const HkThemePanelContent = defineComponent({
                 {trailingSlot ? (
                   <span class="s-theme-item-trailing">{trailingSlot(scope)}</span>
                 ) : th.isCustom ? (
-                  <button
-                    type="button"
+                  <HkIconButton
                     class="s-theme-item-delete"
-                    title={t("hikari::theme.deleteTheme")}
+                    size={24}
+                    variant="ghost"
+                    aria-label={t("hikari::theme.deleteTheme")}
+                    {...{ title: t("hikari::theme.deleteTheme") }}
                     onClick={() => removeCustomTheme(th.id)}
                   >
-                    <Trash2 size={12} />
-                  </button>
+                    {{ icon: () => <Trash2 aria-hidden="true" /> }}
+                  </HkIconButton>
                 ) : null}
               </div>
             );

package/src/components/HkThemeToggle.scss

@@ -345,32 +345,20 @@
  * pill's trailing edge (the row is relative), not a reserved column:
  * built-in rows show nothing there and the pill runs to the row edge. */
 .s-theme-item-delete {
+  /* Wave B2/B3: the custom-theme delete is the STANDARD icon button at S24
+     (= the old 1.5rem desktop box). The seat keeps the row's parked-edge
+     positioning (absolute, trailing, vertically centred) — real geometry.
+     The error-tinted hover rides the channel vars, ink hover-scoped (token
+     lesson); the inset error focus ring yields to the standard ring. */
   position: absolute;
   inset-inline-end: var(--space-8, 0.5rem);
   top: 50%;
   transform: translateY(-50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  border: none;
-  border-radius: var(--radius-sm, 6px);
-  background: transparent;
-  color: rgb(var(--color-muted));
-  cursor: pointer;
-}
-
-.s-theme-item-delete:hover {
-  background: rgb(var(--color-error) / 15%);
-  color: rgb(var(--color-error));
-}
+  --hi-icon-button-bg-hover: rgb(var(--color-error) / 15%);
 
-/* Keyboard parity for the destructive overlay (mi.item-style inset ring,
- * error-tinted to match its hover). */
-.s-theme-item-delete:focus-visible {
-  outline: 2px solid rgb(var(--color-error));
-  outline-offset: -2px;
+  &:hover {
+    --hi-icon-button-icon-color: rgb(var(--color-error));
+  }
 }
 
 /* Touch-sized delete target on phone widths, scaled for the 44px sheet
@@ -379,8 +367,10 @@
  * label never collide on long custom scheme names. */
 @media (max-width: 767px) {
   .s-theme-item-delete {
-    width: 2.25rem;
-    height: 2.25rem;
+    /* Set the COMPONENT's size var (not width/height — the S24 rung's
+       min/max clamps would defeat them): the phone delete target keeps its
+       36px sheet-row contract. */
+    --hi-icon-button-size: 2.25rem;
   }
 
   .s-theme-item-row[data-custom] .s-theme-item-name {

package/src/components/HkTokenInput.scss

@@ -68,21 +68,26 @@
 }
 
 .hk-token-input-clear {
+  /* The editor's clear affordance is the STANDARD icon button (wave B1):
+     S24 replaces the old 26px box. The OLD contract is preserved exactly:
+     muted ink at rest, error ink + wash on hover (an R3 review round caught
+     a first draft that set the ink var at rest — red-at-rest was never the
+     design). The hover-scoped override keeps ghost's rest ink while the
+     error channels apply on hover/press only. */
   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;
-}
+  --hi-icon-button-bg-hover: rgb(var(--color-error) / 10%);
+  --hi-icon-button-bg-active: rgb(var(--color-error) / 16%);
+
+  &:hover {
+    --hi-icon-button-icon-color: rgb(var(--color-error));
+  }
 
-.hk-token-input-clear:hover {
-  background: rgb(var(--color-error) / 10%);
-  color: rgb(var(--color-error));
+  &:active {
+    /* Press ink reads the -active channel (HkIconButton.scss
+       `&:active .hk-icon-button-icon`), so the base var alone is a no-op
+       here — set both. */
+    --hi-icon-button-icon-color: rgb(var(--color-error));
+    --hi-icon-button-icon-color-active: rgb(var(--color-error));
+  }
 }

package/src/components/HkTokenInput.tsx

@@ -5,6 +5,8 @@ import HkInput from "./HkInput";
 import HkSelect from "./HkSelect";
 import { X } from "lucide-vue-next";
 
+import HkIconButton from "./HkIconButton";
+
 import { useI18n } from "../i18n/context";
 import "./HkTokenInput.scss";
 
@@ -159,14 +161,15 @@ export default defineComponent({
                     onUpdate:modelValue={(v: number | null) => emit("update:modelValue", v)}
                     onUpdate:unit={(u: TokenUnit) => (editorUnit.value = u)}
                   />
-                  <button
-                    type="button"
+                  <HkIconButton
                     class="hk-token-input-clear"
+                    size={24}
+                    variant="ghost"
                     aria-label={clearLabel.value}
                     onClick={clearValue}
                   >
-                    <X size={13} />
-                  </button>
+                    {{ icon: () => <X aria-hidden="true" /> }}
+                  </HkIconButton>
                 </div>
               ),
           }}

package/src/components/HkUserPicker.scss

@@ -75,24 +75,11 @@
 }
 
 .hk-user-picker-tag-x {
+  /* Wave B2: the tag close is the STANDARD icon button at S16 — the literal
+     multiplication-sign text button (audited as the family's worst
+     offender) is retired along with its bespoke box; the seat keeps only
+     the chip's flex slot. */
   flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  border: none;
-  border-radius: 999px;
-  background: transparent;
-  color: rgb(var(--color-text) / 60%);
-  font-size: 0.875rem;
-  line-height: 1;
-  cursor: pointer;
-
-  &:hover {
-    background: rgb(var(--color-text) / 10%);
-    color: rgb(var(--color-text));
-  }
 }
 
 .hk-user-picker-add {

package/src/components/HkUserPicker.tsx

@@ -13,6 +13,10 @@
 // Semantics (the HkAffixPicker vocabulary): "single" closes on pick and
 // replaces the selection; "multi" toggles rows in a working copy and
 // commits on Confirm. The field's tag × removes directly — no dialog.
+import { X } from "lucide-vue-next";
+
+import HkIconButton from "./HkIconButton";
+
 import { computed, defineComponent, ref, watch, type PropType } from "vue";
 
 import { useI18n } from "../i18n/context";
@@ -186,17 +190,18 @@ export default defineComponent({
                 {user.email && <span class="hk-user-picker-tag-email">{user.email}</span>}
               </span>
               {!props.disabled && (
-                <button
-                  type="button"
+                <HkIconButton
                   class="hk-user-picker-tag-x"
+                  size={16}
+                  variant="ghost"
                   aria-label={`${t("hikari::userPicker.remove", "Remove")} ${tagTitle(user)}`}
                   onClick={(e: MouseEvent) => {
                     e.stopPropagation();
                     removeTag(user.uid);
                   }}
                 >
-                  ×
-                </button>
+                  {{ icon: () => <X aria-hidden="true" /> }}
+                </HkIconButton>
               )}
             </span>
           ))}

package/src/components/closeFamily.contract.test.tsx

@@ -2,6 +2,8 @@ import { afterEach, describe, expect, it } from "vitest";
 import { createApp, h, nextTick } from "vue";
 
 import HkAlert from "./HkAlert";
+import HkFileField from "./HkFileField";
+import HkTag from "./HkTag";
 import HkPersistentToast from "./HkPersistentToast";
 
 /**
@@ -26,6 +28,24 @@ const seats = [
     render: () => h(HkAlert, { message: "m", closable: true }),
     seat: "hk-alert-close",
   },
+  {
+    // Wave B1: the file field's clear rides the standard button at S24.
+    name: "HkFileField clear",
+    render: () =>
+      h(HkFileField, {
+        modelValue: [{ name: "a.txt" }],
+      }),
+    seat: "hk-file-clear",
+    rung: 24,
+  },
+  {
+    // Wave B1: the chip close rides S16 (the 14px bespoke box is retired;
+    // 14 -> 16 is the declared density growth).
+    name: "HkTag chip close",
+    render: () => h(HkTag, { closable: true, closeLabel: "Remove" }),
+    seat: "hk-tag-close",
+    rung: 16,
+  },
   {
     name: "HkPersistentToast dismiss",
     render: () => h(HkPersistentToast, { label: "l", dismissible: true }),
@@ -48,7 +68,8 @@ afterEach(() => {
 });
 
 describe("close-button family rides the standard icon button", () => {
-  for (const { name, render, seat } of seats) {
+  for (const entry of seats) {
+    const { name, render, seat } = entry;
     it(`${name} renders the standard class list plus its seat`, async () => {
       const host = mountSeat(render);
       await nextTick();
@@ -59,20 +80,22 @@ describe("close-button family rides the standard icon button", () => {
       // wrapper would leave the sheet styling the wrong box.
       expect(control!.tagName, `${name} must be a button`).toBe("BUTTON");
 
+      const rung = (entry as typeof entry & { rung?: number }).rung ?? 24;
       const tokens = [...control!.classList];
       expect(tokens, `${name} carries the base layer`).toContain("hk-icon-button");
-      expect(tokens, `${name} carries the 24px rung`).toContain("hk-icon-button-24");
+      expect(tokens, `${name} carries the ${rung}px rung`).toContain(
+        `hk-icon-button-${rung}`,
+      );
       expect(tokens, `${name} carries the ghost variant`).toContain(
         "hk-icon-button-ghost",
       );
       expect(tokens, `${name} carries its seat`).toContain(seat);
       // Documented order: base, size, variant, seat.
-      expect(tokens.indexOf("hk-icon-button")).toBeLessThan(
-        tokens.indexOf("hk-icon-button-24"),
-      );
-      expect(tokens.indexOf("hk-icon-button-24")).toBeLessThan(
-        tokens.indexOf("hk-icon-button-ghost"),
-      );
+      const base = tokens.indexOf("hk-icon-button");
+      const rungAt = tokens.indexOf(`hk-icon-button-${rung}`);
+      const ghost = tokens.indexOf("hk-icon-button-ghost");
+      expect(base).toBeLessThan(rungAt);
+      expect(rungAt).toBeLessThan(ghost);
       expect(tokens.indexOf("hk-icon-button-ghost")).toBeLessThan(
         tokens.indexOf(seat),
       );
@@ -91,6 +114,19 @@ describe("close-button family rides the standard icon button", () => {
     });
   }
 
+  it("sources the wave-B1 field clears from the standard component too", () => {
+    // The token editor's clear lives inside an HkAdaptiveDialog slot (no
+    // bare mount path), so it is pinned at SOURCE level like the toast.
+    const token = readSource("HkTokenInput.tsx");
+    expect(token, "token clear rides HkIconButton").toMatch(
+      new RegExp('<HkIconButton[\\s\\S]{0,200}?class="hk-token-input-clear"'),
+    );
+    expect(token, "token clear is not a raw button").not.toMatch(
+      new RegExp('<button[^>]*class="hk-token-input-clear"'),
+    );
+    expect(token, "token clear rides the 24px rung").toContain("size={24}");
+  });
+
   it("sources the toast controls from the standard component too", () => {
     // HkToast is driven by useToast rather than props, so it cannot be
     // mounted bare here; pin the source contract instead — the two controls