@celestia-island/hikari 0.55.334 → 0.55.336

package/package.json

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

package/src/components/HkDockBar.tsx

@@ -42,11 +42,32 @@ export type HkDockBarSurface = "glass" | "solid";
  *
  * Relationship to HkScrollContainer: that component's dockTop /
  * dockBottom named slots are the contract for docks that live INSIDE a
- * scrolling region — pinned to the scroll viewport, excluded from the
- * scroll flow. HkDockBar is the carrier for docks that FLOAT over a
- * canvas or page instead. Pick by host: scrolling region →
- * HkScrollContainer dock slots; canvas/page overlay → HkDockBar. Do
- * not nest an HkDockBar inside a scroll viewport expecting pinning.
+ * scrolling region. Those slots place a dock two ways (2026-11-10
+ * addition — `dockMode`):
+ *   - `ride` (the pinned-to-the-visible-bottom-edge form): the dock
+ *     mounts inside the scroll viewport after the content, on a spacer
+ *     exactly one measured dock height tall, `position: sticky; bottom:
+ *     0`. The air between the content end and the dock is therefore
+ *     exactly one dock height; short content lets the dock follow the
+ *     content end (the leftover window height falls below it), long
+ *     content pins it to the visible bottom edge. Use it for a dock that
+ *     belongs to the CONTENT (a cruise canvas's bottom bar under its
+ *     last row). The container's ride wrapper is `pointer-events: none`
+ *     (it covers content while pinned), so this carrier's own box
+ *     contract is what keeps the dock interactive: the anchor box catches
+ *     nothing, the surface catches everything.
+ *   - `pin` (the default, older form): the dock is a non-scrolling flex
+ *     SIBLING of the viewport, so it sits on the container's edge and the
+ *     viewport shrinks by its height — correct for chrome that owns the
+ *     region's frame rather than trailing its content.
+ * HkDockBar is the carrier for docks that FLOAT over a canvas or page
+ * instead. Pick by host: scrolling region → HkScrollContainer dock slots
+ * (`ride` to follow the content, `pin` to own the edge); canvas/page
+ * overlay → HkDockBar. Do not nest an HkDockBar inside a scroll viewport
+ * expecting the container to place it — the container's slots do the
+ * placing, and a dock it mounted inside the viewport (ride) makes
+ * `closest(".hk-scroll-dock")` true, which is how a carrier knows to stop
+ * publishing shell-level clearance for it.
  *
  * Surfaces:
  *   - `glass` (default): translucent surface + backdrop blur.

package/src/components/HkKanban.scss

@@ -17,9 +17,32 @@
   display: flex;
   align-items: stretch;
   gap: var(--space-12);
+  /* A short board fills the strip: the lanes box is at least the viewport
+     height, so lane chrome reaches the strip's floor. */
   min-height: 100%;
 }
 
+/* ── Ride boards: the lanes box must follow its CONTENT ────────────────
+   2026-11-10 review S0, measured on a real board (chest cruise canvas):
+   in a column-flex strip viewport `min-height: 100%` makes the lanes BOX
+   exactly as tall as the viewport, so the ride spacer + sticky dock —
+   which are IN FLOW after that box — always sit below the fold. The dock
+   can then only hug the visible bottom edge, the spacer clears nothing,
+   and the air goes back to being the window's leftover (measured 275.8px
+   static / 563.8px at the scroll end against a 139px dock, i.e. no
+   improvement over the pin board and worse when scrolled). Releasing the
+   min-height lets the box end at the real content end, which is what the
+   ride placement needs: the spacer becomes the visible air and the dock
+   trails the content.
+
+   Ride only, by the root hook HkKanban emits for a ride host: a pin board
+   must keep the full-height lanes box it always had, so this rule never
+   reaches an existing board. Specificity (0,3,0) beats the base rule
+   above; a host that wants its own rule can override it the same way. */
+.hk-kanban[data-dock-mode="ride"] .hk-kanban-lanes {
+  min-height: 0;
+}
+
 .hk-kanban[data-axis="vertical"] .hk-kanban-lanes {
   flex-direction: column;
 }

package/src/components/HkKanban.tsx

@@ -105,6 +105,26 @@ export default defineComponent({
      *  contract generates no spacer and the shrink pin is inert in the
      *  block viewport — a horizontal board gets a no-op by design. */
     dockTailClearance: { type: Boolean, default: false },
+    /** Where a `dockBottom` dock lives, forwarded to the strip's
+     *  HkScrollContainer (see its `dockMode`): "pin" (default) keeps the
+     *  dock on the strip's bottom edge, "ride" moves it into the strip's
+     *  content flow so the air above it is the measured dock occupancy and
+     *  the dock follows the content. Only effective on axis="vertical"/
+     *  "both" boards — a horizontal strip carries its tail on the cross
+     *  axis, where the container's ride placement is gated off by design.
+     *
+     *  A ride board ALSO carries `data-dock-mode="ride"` on its root — only
+     *  while a `dockBottom` slot is actually mounted, since that hook
+     *  releases this component's full-height lanes box
+     *  (see HkKanban.scss): `.hk-kanban-lanes { min-height: 100% }` keeps
+     *  the lanes box as tall as the viewport, which would push the in-flow
+     *  spacer + dock below the fold and turn the air back into the
+     *  window's leftover (measured on a real board: 275.8px static vs the
+     *  139px dock, i.e. zero improvement over the pin board). The
+     *  attribute is emitted only while a ride dock is genuinely mounted (not
+     *  for pin, not for a horizontal board, not for an empty slot), so every
+     *  existing board is untouched. */
+    dockMode: { type: String as PropType<"pin" | "ride">, default: "pin" },
   },
   emits: ["move"],
   setup(props, { slots, emit, expose }) {
@@ -185,90 +205,117 @@ export default defineComponent({
 
     expose({ scrollHost, dragging });
 
-    return () => (
-      <div
-        class="hk-kanban"
-        data-axis={props.axis}
-        data-dragging={dragging.value ? "" : undefined}
-        aria-label={props.ariaLabel}
-      >
-        {props.lanes.length === 0
-          ? (slots.empty?.() ?? null)
-          : (
-            <HScrollContainer
-              ref={scrollHost}
-              class="hk-kanban-strip"
-              axis={stripAxis.value}
-              overscanScreens={1}
-              dockTailClearance={props.dockTailClearance}
-            >
-              <div
-                class="hk-kanban-lanes"
-                // One variable; the stylesheet decides whether it is the
-                // lane's width (horizontal boards) or its height (vertical).
-                style={
-                  props.laneSize ? { "--hk-kanban-lane-size": props.laneSize } : undefined
-                }
+    return () => {
+      // Docks attach to the strip's VERTICAL tail: `axis="horizontal"`
+      // boards keep the pre-2026-11-10 shape (no forwarded dock slot), the
+      // same gate the container itself applies to the ride placement —
+      // there the tail is the cross axis, where an in-flow block child
+      // leaks onto the hidden vertical axis.
+      const docksOnTail = stripAxis.value !== "horizontal";
+      // Styling hook AND behaviour switch for the CONTENT HEIGHT of the
+      // board (see the dockMode prop doc): a ride dock only follows the
+      // content when the lanes box is allowed to end above the viewport
+      // bottom. Ride only — a pin board keeps the full-height lanes box it
+      // always had, so no existing board changes. Gated on the dock actually
+      // being mounted too (S2-2): a requested-but-empty slot is legal, and
+      // releasing the lanes box for it would only shrink lane chrome on a
+      // short board while no dock is there to justify it.
+      const rideBoard = docksOnTail && props.dockMode === "ride" && !!slots.dockBottom;
+      return (
+        <div
+          class="hk-kanban"
+          data-axis={props.axis}
+          data-dock-mode={rideBoard ? "ride" : undefined}
+          data-dragging={dragging.value ? "" : undefined}
+          aria-label={props.ariaLabel}
+        >
+          {props.lanes.length === 0
+            ? (slots.empty?.() ?? null)
+            : (
+              <HScrollContainer
+                ref={scrollHost}
+                class="hk-kanban-strip"
+                axis={stripAxis.value}
+                overscanScreens={1}
+                dockTailClearance={props.dockTailClearance}
+                dockMode={props.dockMode}
               >
-                {props.lanes.map((lane, laneIndex) => {
-                  const laneKey = props.laneKeyOf(lane, laneIndex);
-                  const cards = cardsFor(lane, laneIndex);
-                  return (
-                    <section
-                      key={laneKey}
-                      class="hk-kanban-lane"
-                      data-lane={laneKey}
-                      data-drop-target={dropTarget.value === laneKey ? "" : undefined}
-                      onDragover={(event: DragEvent) => onDragOver(laneKey, event)}
-                      onDragleave={(event: DragEvent) => onDragLeave(laneKey, event)}
-                      onDrop={(event: DragEvent) => onDrop(laneKey, cards.length, event)}
+                {{
+                  default: () => (
+                    <div
+                      class="hk-kanban-lanes"
+                      // One variable; the stylesheet decides whether it is the
+                      // lane's width (horizontal boards) or its height (vertical).
+                      style={
+                        props.laneSize ? { "--hk-kanban-lane-size": props.laneSize } : undefined
+                      }
                     >
-                      <header class="hk-kanban-lane-header">
-                        {slots.laneHeader?.({
-                          lane,
-                          laneIndex,
-                          laneKey,
-                          cards,
-                        })}
-                      </header>
-                      <div class="hk-kanban-cards">
-                        {cards.map((card, cardIndex) => {
-                          const cardKey =
-                            props.cardKeyOf?.(card, cardIndex) ?? `${laneKey}#${cardIndex}`;
-                          return (
-                            <div
-                              key={cardKey}
-                              class="hk-kanban-card"
-                              data-card={cardKey}
-                              data-card-index={cardIndex}
-                              draggable={props.draggable || undefined}
-                              onDragstart={(event: DragEvent) =>
-                                onDragStart(card, laneKey, cardIndex, event)
-                              }
-                              onDragend={onDragEnd}
-                            >
-                              {slots.card?.({
-                                card,
-                                cardIndex,
+                      {props.lanes.map((lane, laneIndex) => {
+                        const laneKey = props.laneKeyOf(lane, laneIndex);
+                        const cards = cardsFor(lane, laneIndex);
+                        return (
+                          <section
+                            key={laneKey}
+                            class="hk-kanban-lane"
+                            data-lane={laneKey}
+                            data-drop-target={dropTarget.value === laneKey ? "" : undefined}
+                            onDragover={(event: DragEvent) => onDragOver(laneKey, event)}
+                            onDragleave={(event: DragEvent) => onDragLeave(laneKey, event)}
+                            onDrop={(event: DragEvent) => onDrop(laneKey, cards.length, event)}
+                          >
+                            <header class="hk-kanban-lane-header">
+                              {slots.laneHeader?.({
                                 lane,
                                 laneIndex,
                                 laneKey,
+                                cards,
                               })}
+                            </header>
+                            <div class="hk-kanban-cards">
+                              {cards.map((card, cardIndex) => {
+                                const cardKey =
+                                  props.cardKeyOf?.(card, cardIndex) ?? `${laneKey}#${cardIndex}`;
+                                return (
+                                  <div
+                                    key={cardKey}
+                                    class="hk-kanban-card"
+                                    data-card={cardKey}
+                                    data-card-index={cardIndex}
+                                    draggable={props.draggable || undefined}
+                                    onDragstart={(event: DragEvent) =>
+                                      onDragStart(card, laneKey, cardIndex, event)
+                                    }
+                                    onDragend={onDragEnd}
+                                  >
+                                    {slots.card?.({
+                                      card,
+                                      cardIndex,
+                                      lane,
+                                      laneIndex,
+                                      laneKey,
+                                    })}
+                                  </div>
+                                );
+                              })}
+                              {/* The tail keeps the lane's empty space hittable
+                                  (the lane itself owns the drop). */}
+                              <div class="hk-kanban-lane-tail" />
                             </div>
-                          );
-                        })}
-                        {/* The tail keeps the lane's empty space hittable
-                            (the lane itself owns the drop). */}
-                        <div class="hk-kanban-lane-tail" />
-                      </div>
-                      {slots.laneFooter?.({ lane, laneIndex, laneKey, cards })}
-                    </section>
-                  );
-                })}
-              </div>
-            </HScrollContainer>
-          )}
-      </div>
-    );
+                            {slots.laneFooter?.({ lane, laneIndex, laneKey, cards })}
+                          </section>
+                        );
+                      })}
+                    </div>
+                  ),
+                  // Forwarded so a board's own chrome (a cruise canvas's dock
+                  // under the lanes) keeps the container's dock contract —
+                  // including the --hk-scroll-dock-* heights it publishes.
+                  dockBottom: docksOnTail ? slots.dockBottom : undefined,
+                }}
+              </HScrollContainer>
+            )}
+        </div>
+      );
+    };
   },
 });

package/src/components/HkNumberInput.test.tsx

@@ -0,0 +1,78 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import HkNumberInput from "./HkNumberInput";
+
+/**
+ * HkNumberInput's label-association contract (#1206): a bare `label` prop
+ * used to render a <label> with NO programmatic association to the field
+ * (no `for`, no wrapping), so the number field announced as "spin button"
+ * to screen readers. Mirrors HkInput's contract — `for` points at the
+ * field id, which is `props.id` when given and a useId() generation
+ * otherwise — and follows the repo test convention (raw createApp +
+ * document queries, no @vue/test-utils).
+ */
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mountInput(props: Record<string, unknown>): HTMLElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => h(HkNumberInput, props) });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+describe("HkNumberInput label association (#1206)", () => {
+  it("associates a bare label with the field via for/id", () => {
+    const container = mountInput({ label: "Per-phone cap", modelValue: 10 });
+    console.log("HTML:", container.innerHTML.slice(0, 300));
+    const label = container.querySelector("label.hk-input-label");
+    const field = container.querySelector<HTMLInputElement>("input.hk-number-input-field");
+    expect(label).not.toBeNull();
+    expect(field).not.toBeNull();
+    expect(label!.getAttribute("for")).toBe(field!.id);
+    expect(field!.id).not.toBe("");
+  });
+
+  it("an explicit id prop wins over the generated one", () => {
+    const container = mountInput({ label: "Cap", modelValue: 1, id: "cap-field" });
+    const label = container.querySelector("label.hk-input-label");
+    const field = container.querySelector<HTMLInputElement>("input.hk-number-input-field");
+    expect(field!.id).toBe("cap-field");
+    expect(label!.getAttribute("for")).toBe("cap-field");
+  });
+
+  it("keeps field ids unique among instances of ONE app", () => {
+    // useId's counter is PER APP: two separate createApp mounts both start
+    // at v-0 (uniqueness is a within-app contract — a real host has one
+    // app). Two siblings in the same app must never share an id, or the
+    // second label's `for` would point at the FIRST field.
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h("div", [
+          h(HkNumberInput, { modelValue: 1, label: "First" }),
+          h(HkNumberInput, { modelValue: 2, label: "Second" }),
+        ]),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    const fields = [...container.querySelectorAll<HTMLInputElement>("input.hk-number-input-field")];
+    expect(fields).toHaveLength(2);
+    const ids = fields.map((f) => f.id);
+    expect(new Set(ids).size).toBe(2);
+    // Each label's `for` points at ITS OWN field, in document order.
+    const labels = [...container.querySelectorAll("label.hk-input-label")];
+    expect(labels[0]!.getAttribute("for")).toBe(ids[0]);
+    expect(labels[1]!.getAttribute("for")).toBe(ids[1]);
+  });
+});

package/src/components/HkNumberInput.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, ref, type PropType } from "vue";
+import { computed, defineComponent, ref, useId, type PropType } from "vue";
 import HkNumberSteppers from "./HkNumberSteppers";
 import "./HkNumberInput.scss";
 
@@ -12,6 +12,13 @@ export default defineComponent({
     disabled: { type: Boolean, default: false },
     placeholder: { type: String, default: undefined },
     label: { type: String, default: undefined },
+    /* `id` for the field element; the rendered label's `for` points here.
+       Generated via Vue's useId when omitted, so a bare `label` prop is
+       fully associated for screen readers and label clicks with zero
+       caller effort (HkInput's contract, same shape). Without this the
+       bare <label> had NO programmatic association at all — the field
+       announced as "spin button" (2026-11-10, #1206). */
+    id: { type: String, default: undefined },
     /* Affix text rendered INSIDE the field (before/after the input,
        flex-centered by the inner row). Slots of the same name take
        precedence; empty/undefined means no affix. Consumers should use
@@ -60,6 +67,13 @@ export default defineComponent({
       emitValue(props.modelValue - props.step);
     }
 
+    // Field identity: the rendered label points at this id, so a bare
+    // `label` prop gives a fully associated field (screen readers, label
+    // clicks). An explicit `id` prop wins. useId() must run synchronously
+    // in setup; it is SSR-safe (HkInput's same shape).
+    const generatedId = useId();
+    const fieldId = computed(() => props.id ?? generatedId);
+
     const wrapperClass = computed(() => [
       "hk-number-input",
       `hk-number-input-${props.size}`,
@@ -68,7 +82,7 @@ export default defineComponent({
 
     return () => (
       <div class={wrapperClass.value}>
-        {props.label && <label class="hk-input-label">{props.label}</label>}
+        {props.label && <label class="hk-input-label" for={fieldId.value}>{props.label}</label>}
         <div class="hk-number-input-inner">
           {(slots.prefix || props.prefix) ? (
             <span class="hk-number-input-prefix">
@@ -77,6 +91,7 @@ export default defineComponent({
           ) : null}
           <input
             ref={inputRef}
+            id={fieldId.value}
             type="number"
             class="hk-number-input-field"
             value={props.modelValue}