@celestia-island/hikari 0.55.161 → 0.55.163

package/package.json

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

package/src/components/HkAdminShell.tsx

@@ -268,7 +268,7 @@ export const HkAdminShell = defineComponent({
 
         {slots.footer && (
           <footer class="s-status-bar" style={{ position: "fixed", bottom: 0, left: 0, right: 0, // Footer band (was a bare 40 — the pre-band chrome value).
-            zIndex: "var(--z-footer, 110)" }}>
+            zIndex: "var(--hk-z-toolbar)" }}>
             {slots.footer()}
           </footer>
         )}

package/src/components/HkBlockingToast.scss

@@ -12,7 +12,7 @@
   /* Same viewport gutter the anchored popups clamp to (16px desktop /
    * 8px mobile) — the toast stack is a floating layer too. */
   inset-inline-end: var(--viewport-gutter, 16px);
-  z-index: var(--hk-z-toast, 4000);
+  z-index: var(--hk-overlay-z-blocking-toast, 50);
   max-width: 24rem;
   pointer-events: none;
 }

package/src/components/HkBlockingToast.tsx

@@ -45,6 +45,7 @@ import {
 } from "../runtime/useBlockingToast";
 import "./HkBlockingToast.scss";
 import HButton from "./HkButton";
+import { ensureOverlayRoot } from "../overlay/overlayRoot";
 
 const ICON_SIZE = 18;
 
@@ -175,7 +176,7 @@ export default defineComponent({
     }
 
     return () => (
-      <Teleport to="body">
+      <Teleport to={ensureOverlayRoot()}>
         <div class="hk-blocking-toast-container">
           <TransitionGroup
             ref={hostRef}

package/src/components/HkBreadcrumb.scss

@@ -212,7 +212,7 @@
     top: calc(100% + 4px);
     left: 0;
     min-width: 200px;
-    z-index: 100;
+    z-index: var(--hk-z-header);
 
     // Appearance
     border-radius: vars.$hikari-radius-fui-md;

package/src/components/HkBreadcrumb.tsx

@@ -1,4 +1,5 @@
 import { computed, defineComponent, type PropType } from "vue";
+import { safeHref } from "../utils/safeHref";
 import { useI18n } from "../i18n/context";
 import "./HkBreadcrumb.scss";
 
@@ -19,7 +20,7 @@ export default defineComponent({
           {props.items.map((item, index) => (
             <li key={index} class="hk-breadcrumb-item">
               {item.to ? (
-                <a href={item.to} class="hk-breadcrumb-link">{item.label}</a>
+                <a href={safeHref(item.to)} class="hk-breadcrumb-link">{item.label}</a>
               ) : (
                 <span class="hk-breadcrumb-link">{item.label}</span>
               )}

package/src/components/HkCheckbox.scss

@@ -103,7 +103,7 @@
 
 .hk-checkbox-icon {
   position: relative;
-  z-index: var(--hi-z-above, 1);
+  z-index: var(--hk-z-above);
   color: rgb(var(--color-on-solid-icon, 255 255 255));
   width: 14px;
   height: 14px;
@@ -124,7 +124,7 @@
   height: 6px;
   border-radius: 50%;
   background: rgb(var(--color-on-solid-icon, 255 255 255));
-  z-index: var(--hi-z-above, 1);
+  z-index: var(--hk-z-above);
 
   .hk-checkbox-sm & {
     width: 5px;
@@ -142,7 +142,7 @@
   height: 2px;
   border-radius: 1px;
   background: rgb(var(--color-on-solid-icon, 255 255 255));
-  z-index: var(--hi-z-above, 1);
+  z-index: var(--hk-z-above);
 
   .hk-checkbox-sm & {
     width: 6px;

package/src/components/HkDraggableGrid.scss

@@ -136,7 +136,7 @@
   /* Drag ghost: above page chrome (--z-sidebar 900) but below every
      popup band (overlay 1000 < dropdown 2000 < tooltip 3000 < toast 4000)
      so a drag never buries toasts or open panels. */
-  z-index: var(--hk-z-drag, 950);
+  z-index: var(--hk-z-drag);
   will-change: transform;
 
   > .hk-draggable-grid-cell {

package/src/components/HkDraggableList.scss

@@ -110,7 +110,7 @@
   /* Drag ghost: above page chrome (--z-sidebar 900) but below every
      popup band (overlay 1000 < dropdown 2000 < tooltip 3000 < toast 4000)
      so a drag never buries toasts or open panels. */
-  z-index: var(--hk-z-drag, 950);
+  z-index: var(--hk-z-drag);
   will-change: transform;
 
   > .hk-draggable-list-item {

package/src/components/HkDrawer.tsx

@@ -23,6 +23,7 @@ import { useSurfaceContentHold } from "../composables/useSurfaceContentHold";
 import HIconButton from "./HkIconButton";
 import HIcon from "./HkIcon";
 import "./window-close.scss";
+import { ensureOverlayRoot } from "../overlay/overlayRoot";
 
 type DrawerSide = "left" | "right" | "top" | "bottom";
 
@@ -276,7 +277,7 @@ export default defineComponent({
       if (!machine.mounted.value) return null;
       const panelPrefix = `hk-drawer-${props.side}`;
       return (
-      <Teleport to="body">
+      <Teleport to={ensureOverlayRoot()}>
         {props.overlay ? (
           <div
             ref={overlayEl}

package/src/components/HkFab.scss

@@ -4,7 +4,7 @@
 // safe-area-aware base per instance (set from offsetX / offsetY).
 .hk-fab {
   position: absolute;
-  z-index: var(--hk-fab-z, 40);
+  z-index: var(--hk-z-fab);
   display: flex;
   align-items: center;
   gap: var(--space-8, 0.5rem);

package/src/components/HkFab.test.tsx

@@ -46,10 +46,10 @@ function mountFab(props: Record<string, unknown> = {}): Harness {
   // fall back to the document scope so both modes resolve.
   const root =
     container.querySelector<HTMLElement>(".hk-fab") ??
-    document.body.querySelector<HTMLElement>(".hk-fab");
+    document.querySelector<HTMLElement>(".hk-fab");
   const button =
     container.querySelector<HTMLButtonElement>(".hk-fab-button") ??
-    document.body.querySelector<HTMLButtonElement>(".hk-fab-button");
+    document.querySelector<HTMLButtonElement>(".hk-fab-button");
   if (!root || !button) throw new Error("HkFab did not render its shell");
   harness.root = root;
   harness.button = button;
@@ -226,13 +226,13 @@ describe("HkFab speed dial", () => {
 describe("HkFab layer", () => {
   it("host (default) keeps the fab anchored in the host tree", () => {
     const m = mountFab({ ariaLabel: "Host", positioning: "fixed" });
-    expect(document.body.querySelector(".hk-floating-layer")).toBeNull();
+    expect(document.querySelector(".hk-floating-layer")).toBeNull();
     expect(m.root.getAttribute("data-positioning")).toBe("fixed");
   });
 
   it("top wraps the fab in an HkFloatingLayer above the window band", () => {
     const m = mountFab({ ariaLabel: "Float", layer: "top", corner: "bottom-right" });
-    const layer = document.body.querySelector<HTMLElement>(".hk-floating-layer");
+    const layer = document.querySelector<HTMLElement>(".hk-floating-layer");
     expect(layer).not.toBeNull();
     expect(layer!.contains(m.root)).toBe(true);
     // Geometry is owned by the layer alone once floated.
@@ -244,6 +244,6 @@ describe("HkFab layer", () => {
     expect(layer!.getAttribute("data-corner")).toBe("bottom-right");
     const z = Number(layer!.style.getPropertyValue("--hk-float-z"));
     expect(z).toBeGreaterThanOrEqual(POPUP_Z_BANDS.tooltip);
-    expect(z).toBeLessThan(POPUP_Z_BANDS.toast);
+    // Tooltip is the topmost band (2026-10-15): no upper bound.
   });
 });

package/src/components/HkFilterPanel.scss

@@ -9,10 +9,12 @@
  * Row anatomy: [field label | operator symbol group | value control +
  * remove]. Rows are the page's ACTIVE conditions; the trailing add row
  * (button parked in the operator column, user direction 2026-10-12)
- * materializes the next latent field. Edits commit LIVE (the desktop
- * panel has no confirm button); the mobile sheet's single confirm merely
- * closes — the standard HkPopover sheetOnMobile split renders the same
- * panel in both shapes.
+ * opens the FIELD CHOOSER — a popover of the latent fields (user
+ * direction 2026-10-14: add means pick WHO, never append by declaration
+ * order) and the picked field materializes as a row. Edits commit LIVE
+ * (the desktop panel has no confirm button); the mobile sheet's single
+ * confirm merely closes — the standard HkPopover sheetOnMobile split
+ * renders the same panel in both shapes.
  *
  * ONE GRID, ONE AXIS (user direction 2026-10-12): the panel itself is
  * the grid and each row contributes `display: contents` cells, so the
@@ -21,6 +23,7 @@
  * puts every cell of every row on the same vertical axis — label,
  * symbol group, control, and remove button all share it.
  */
+@use "./menu-item" as mi;
 
 .hk-filter-panel {
   display: grid;
@@ -179,6 +182,64 @@
   cursor: not-allowed;
 }
 
+/* The trigger's open face while the chooser is up (the popup-select
+ * trigger's [data-state="open"] grammar — the user must see the button
+ * and its menu as one surface). */
+.hk-filter-panel-add[data-state="open"] {
+  background: rgb(var(--color-primary) / 12%);
+  color: rgb(var(--color-primary));
+}
+
+/* ── The add-condition field chooser ───────────────────────────────
+ * A popover of the LATENT fields (user direction 2026-10-14): the
+ * add button opens it, the picked field materializes as a row. Same
+ * popout geometry as the panel's popup selects (min-width floor, one
+ * 240px content cap, then viewport scroll); item rows speak the
+ * unified menu-item spec, so the list reads as one family with select
+ * options and menu rows around it. The mobile sheet form flows from
+ * the shared `.hk-is-sheet` token context — touch geometry comes
+ * free, no per-component media query. */
+.hk-filter-add-content {
+  min-width: 180px;
+  max-height: 240px;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.hk-filter-add-viewport .hk-scroll-container-viewport {
+  display: flex;
+  flex-direction: column;
+}
+
+.hk-filter-add-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-2);
+}
+
+.hk-filter-add-item {
+  @include mi.item;
+  width: 100%;
+  justify-content: flex-start;
+  text-align: start;
+}
+
+/* Keyboard highlight face — identical values to the popup-select item's
+ * [data-highlighted]; hover comes from mi.item's own guarded :hover. */
+.hk-filter-add-item[data-highlighted] {
+  background: var(--c-primary-subtle, rgb(var(--color-primary) / 8%));
+  border-color: var(--c-primary-medium, rgb(var(--color-primary) / 25%));
+  color: rgb(var(--color-text));
+}
+
+.hk-filter-add-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
 /* Phones: the operator column widens a touch (user direction
  * 2026-10-12 — the old 4.25rem cap cramped the symbol group) and the
  * row lets the value control take the remaining width. The group itself

package/src/components/HkFilterPanel.styles.test.ts

@@ -79,4 +79,15 @@ describe("HkFilterPanel stylesheet contract", () => {
     expect(media).toMatch(/max-width:\s*5\.25rem/);
     expect(media).toMatch(/minmax\(4\.75rem,\s*auto\)/);
   });
+
+  it("registers the chooser rows in the sheet-context token swap (44px touch rows)", () => {
+    // The add-condition chooser docks as a bottom sheet on mobile; its
+    // items must ride the unified menu-item SHEET geometry. The swap
+    // lives in _menu-item.scss's adopter list (pulled in via the
+    // @use chain) — an unregistered class silently keeps the 34px
+    // desktop rows (R1 2026-10-14 finding: exactly that happened).
+    expect(css).toMatch(
+      /\.hk-popover-panel\.hk-is-sheet[^{]*\.hk-filter-add-item[^{]*\{[^}]*--hk-menu-item-min-h:\s*44px/,
+    );
+  });
 });

package/src/components/HkFilterPanel.test.tsx

@@ -19,6 +19,11 @@ afterEach(() => {
     app.unmount();
     container.remove();
   }
+  // The field chooser (and any popout it opened) teleports to <body>
+  // (HkPopover) — sweep the leftovers so the next test starts clean.
+  document.body
+    .querySelectorAll(".hk-filter-add-item, .hk-popover-panel, .hk-select-popout-host")
+    .forEach((el) => el.remove());
 });
 
 const FIELDS = [
@@ -59,7 +64,34 @@ describe("HkFilterPanel", () => {
     expect(c.querySelectorAll(".hk-filter-panel-row")).toHaveLength(FIELDS.length);
   });
 
-  it("adds the next latent field with its kind's default operator and an empty value", () => {
+  it("opens a field chooser on the add verb instead of appending anything", async () => {
+    let seen: HkFilterState | null = null;
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: { tool: { op: "eq", value: "web" } },
+        "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
+      }),
+    );
+    const add = c.querySelector<HTMLButtonElement>(".hk-filter-panel-add")!;
+    expect(add.getAttribute("aria-haspopup")).toBe("menu");
+    expect(add.getAttribute("aria-expanded")).toBe("false");
+    add.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    // The click itself appends NOTHING (user direction 2026-10-14: add
+    // means pick WHO — never the next field in declaration order)…
+    expect(seen).toBeNull();
+    // …and the chooser lists ONLY the latent fields, in declaration
+    // order, labeled by the field defs.
+    const items = [...document.body.querySelectorAll(".hk-filter-add-item")].map(
+      (el) => el.textContent,
+    );
+    expect(items).toEqual(["Calls", "Agent", "Since"]);
+    expect(add.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("materializes the picked field with its kind's default operator and closes the chooser", async () => {
     let seen: HkFilterState | null = null;
     const c = mount(
       h(HkFilterPanel, {
@@ -69,9 +101,48 @@ describe("HkFilterPanel", () => {
       }),
     );
     c.querySelector(".hk-filter-panel-add")!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const item = [...document.body.querySelectorAll(".hk-filter-add-item")].find(
+      (el) => el.textContent === "Agent",
+    )!;
+    expect(item, "chooser lists the latent Agent field").toBeTruthy();
+    item.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
     expect(seen).not.toBeNull();
-    // "count" is the next unused field in declaration order; its kind's
-    // first operator (lt) and an empty value.
+    // The picked field joins with its kind's first operator (select →
+    // eq) and an empty value; the existing condition is untouched.
+    expect(seen!["agent"]).toEqual({ op: "eq", value: "" });
+    expect(seen!["tool"]).toEqual({ op: "eq", value: "web" });
+    // The chooser leaves with the pick (after the leave settle).
+    await new Promise((r) => setTimeout(r, 60));
+    expect(document.body.querySelector(".hk-filter-add-item")).toBeNull();
+  });
+
+  it("drives the chooser from the add button — arrows highlight, Enter picks", async () => {
+    let seen: HkFilterState | null = null;
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: {},
+        "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
+      }),
+    );
+    const add = c.querySelector<HTMLButtonElement>(".hk-filter-panel-add")!;
+    // ArrowDown opens the chooser with the first item highlighted.
+    add.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const items = [...document.body.querySelectorAll(".hk-filter-add-item")];
+    expect(items).toHaveLength(4);
+    expect(items[0]!.getAttribute("data-highlighted")).toBe("true");
+    // ArrowDown again moves the highlight to the second item.
+    add.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    await Promise.resolve();
+    expect(items[1]!.getAttribute("data-highlighted")).toBe("true");
+    // Enter confirms the highlighted field — "Calls" (number kind → lt).
+    add.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    await Promise.resolve();
     expect(seen!["count"]).toEqual({ op: "lt", value: "" });
   });
 

package/src/components/HkFilterPanel.tsx

@@ -1,9 +1,11 @@
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, nextTick, ref, watch, type PropType } from "vue";
 import { Plus, X } from "lucide-vue-next";
 
 import HkDatePicker from "./HkDatePicker";
 import HkInput from "./HkInput";
+import HkPopover from "./HkPopover";
 import HkPopupSelect, { type HkPopupSelectOption } from "./HkPopupSelect";
+import HkScrollContainer from "./HkScrollContainer";
 import { useI18n } from "../i18n/context";
 import "./HkFilterPanel.scss";
 
@@ -138,15 +140,91 @@ export default defineComponent({
       () => props.fields.filter((f) => conditionFor(f).value !== "").length,
     );
 
+    // The visible rows ARE the state record's declared fields, in
+    // declaration order; the rest stay latent behind the add row.
+    const rows = computed(() => props.fields.filter((f) => props.modelValue[f.key] !== undefined));
+    const addable = computed(() => props.fields.filter((f) => props.modelValue[f.key] === undefined));
+
+    // ── The add-condition field chooser (user direction 2026-10-14) ──
+    // "Add condition" NEVER appends by declaration order — it opens a
+    // menu of the latent fields and the user picks WHO joins the panel.
+    // The menu is a popover anchored to the add button (a bottom sheet
+    // on mobile, same split as every other panel popout); the keyboard
+    // model mirrors HkPopupSelect: focus stays on the trigger, arrows
+    // move a highlight, Enter confirms it.
+    const addMenuOpen = ref(false);
+    const addBtnRef = ref<HTMLElement | null>(null);
+    const addHighlight = ref(-1);
+
+    function openAddMenu() {
+      addMenuOpen.value = true;
+      // First item pre-highlighted: arrows and Enter work immediately.
+      addHighlight.value = addable.value.length > 0 ? 0 : -1;
+    }
+
+    function closeAddMenu() {
+      addMenuOpen.value = false;
+      addHighlight.value = -1;
+    }
+
+    function pickAddable(field: HkFilterFieldDef) {
+      // Materialize the row: the kind's default operator, empty value.
+      emitCondition(field, { op: operatorsFor(field)[0]!, value: "" });
+      closeAddMenu();
+    }
+
+    // The latent list can change under an open menu (a row removed while
+    // the menu is open grows it; the last latent field picked empties
+    // it) — keep the highlight in range and close on an empty menu.
+    watch(addable, (list) => {
+      if (!addMenuOpen.value) return;
+      if (list.length === 0) {
+        closeAddMenu();
+        return;
+      }
+      if (addHighlight.value >= list.length) addHighlight.value = list.length - 1;
+    });
+
+    watch(addHighlight, (i) => {
+      if (i < 0) return;
+      nextTick(() => {
+        document
+          .querySelector(`[data-add-index="${i}"]`)
+          ?.scrollIntoView({ block: "nearest" });
+      });
+    });
+
+    function onAddTriggerKeydown(e: KeyboardEvent) {
+      if (props.disabled) return;
+      const count = addable.value.length;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!addMenuOpen.value) openAddMenu();
+        else addHighlight.value = (addHighlight.value + 1) % count;
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!addMenuOpen.value) openAddMenu();
+        else addHighlight.value = (addHighlight.value - 1 + count) % count;
+      } else if ((e.key === "Enter" || e.key === " ") && addMenuOpen.value) {
+        // With the menu open, Enter/Space CONFIRM the highlighted field;
+        // the native button activation (a toggle click) is suppressed.
+        e.preventDefault();
+        const field = addable.value[addHighlight.value];
+        if (field) pickAddable(field);
+      } else if (e.key === "Escape" && addMenuOpen.value) {
+        // Escape closes ONE layer — the menu, not the host panel: stop
+        // the bubble before the host popover's own Escape handler.
+        e.preventDefault();
+        e.stopPropagation();
+        closeAddMenu();
+      }
+    }
+
     return () => {
       const label = props.label ?? t("hikari::filterBar.trigger", "Filters");
-      // The visible rows ARE the state record's declared fields, in
-      // declaration order; the rest stay latent behind the add row.
-      const rows = props.fields.filter((f) => props.modelValue[f.key] !== undefined);
-      const addable = props.fields.filter((f) => props.modelValue[f.key] === undefined);
       return (
         <div class="hk-filter-panel" data-testid="hk-filter-panel" data-active={activeCount.value > 0 || undefined} aria-label={label}>
-          {rows.map((field) => {
+          {rows.value.map((field) => {
             const condition = conditionFor(field);
             const ops = operatorsFor(field);
             return (
@@ -240,24 +318,72 @@ export default defineComponent({
               </div>
             );
           })}
-          {addable.length > 0 && (
+          {addable.value.length > 0 && (
             <div class="hk-filter-panel-addrow">
               {/* The ONE growth verb, parked in the operator column so
                * the row grid reads as one aligned axis (user direction
-               * 2026-10-12). Appends the next unused field with its
+               * 2026-10-12). It no longer appends by declaration order
+               * (user direction 2026-10-14): the click opens the field
+               * chooser and the picked field materializes with its
                * kind's default operator and an empty value. */}
               <button
+                ref={addBtnRef}
                 type="button"
                 class="hk-filter-panel-add"
                 disabled={props.disabled}
-                onClick={() => {
-                  const field = addable[0]!;
-                  emitCondition(field, { op: operatorsFor(field)[0]!, value: "" });
-                }}
+                aria-haspopup="menu"
+                aria-expanded={addMenuOpen.value ? "true" : "false"}
+                data-state={addMenuOpen.value ? "open" : "closed"}
+                onClick={() => (addMenuOpen.value ? closeAddMenu() : openAddMenu())}
+                onKeydown={onAddTriggerKeydown}
               >
                 <Plus size={14} aria-hidden="true" />
                 <span>{t("hikari::filterPanel.addCondition", "Add condition")}</span>
               </button>
+              {/* The chooser itself: a popover anchored to the add button
+               * (top-start — the button sits at the panel's bottom edge,
+               * so the list opens over the panel's own rows; autoFlip
+               * drops it below when the viewport says otherwise), a
+               * bottom sheet on mobile — the same split as every other
+               * popout this panel hosts. */}
+              <HkPopover
+                modelValue={addMenuOpen.value}
+                onUpdate:modelValue={(v: boolean) => (v ? openAddMenu() : closeAddMenu())}
+                anchorRef={addBtnRef.value}
+                placement="top-start"
+                offset={4}
+                backdrop={false}
+                sheetOnMobile
+                title={t("hikari::filterPanel.addCondition", "Add condition")}
+                class="hk-filter-add-content"
+              >
+                <HkScrollContainer class="hk-filter-add-viewport">
+                  {/* role=menu lives on the inner list (HkScrollContainer
+                   * owns its root's attr surface); items carry menuitem. */}
+                  <div
+                    class="hk-filter-add-list"
+                    role="menu"
+                    aria-label={t("hikari::filterPanel.chooseField", "Choose a field to add")}
+                  >
+                    {addable.value.map((field, i) => (
+                      <button
+                        key={field.key}
+                        type="button"
+                        class="hk-filter-add-item"
+                        role="menuitem"
+                        data-kind={field.kind}
+                        data-highlighted={addHighlight.value === i || undefined}
+                        data-add-index={i}
+                        disabled={props.disabled}
+                        onClick={() => pickAddable(field)}
+                        onPointerenter={() => { addHighlight.value = i; }}
+                      >
+                        <span class="hk-filter-add-item-label">{field.label}</span>
+                      </button>
+                    ))}
+                  </div>
+                </HkScrollContainer>
+              </HkPopover>
             </div>
           )}
         </div>