fix(ui): defer select options and omit unused selection tags

packages/ui/test/ui.test.ts

@@ -1910,6 +1910,61 @@ test("input number increments, decrements, applies steps, and respects limits",
   expect(decrement().disabled).toBe(true);
 });
 
+test("advanced select keeps large closed lists compact and renders only selected tags", async () => {
+  const source = readFileSync(uiComponentPath("AdvancedSelect"), "utf8");
+  const options = Array.from({ length: 420 }, (_, i) => ({
+    value: String(i),
+    label: "Option " + i,
+  }));
+  const html = await renderComponent(source, {
+    name: "large",
+    value: "419",
+    options,
+    searchResultLimit: 40,
+  });
+  expect(Buffer.byteLength(html)).toBeLessThan(120_000);
+  const dom = mountHtml(html);
+  expect(dom.querySelectorAll(".wrn-next__select-option")).toHaveLength(0);
+  expect(dom.querySelectorAll(".wrn-next__select-tags > span")).toHaveLength(0);
+  expect(dom.querySelector(".wrn-next__select-value")?.textContent).toContain("Option 419");
+  (dom.querySelector(".wrn-next__select-trigger") as HTMLButtonElement).click();
+  expect(dom.querySelectorAll(".wrn-next__select-option")).toHaveLength(40);
+  (dom.querySelector(".wrn-next__select-trigger") as HTMLButtonElement).click();
+  expect(dom.querySelectorAll(".wrn-next__select-option")).toHaveLength(0);
+
+  const multi = mountHtml(
+    await renderComponent(source, {
+      name: "selected-tags",
+      multiple: true,
+      values: ["419"],
+      options,
+      searchResultLimit: 4,
+    }),
+  );
+  expect(multi.querySelectorAll(".wrn-next__select-tags > span")).toHaveLength(1);
+  expect(multi.querySelector(".wrn-next__select-tags")?.textContent).toContain("Option 419");
+  (multi.querySelector(".wrn-next__select-trigger") as HTMLButtonElement).click();
+  (multi.querySelector(".wrn-next__select-option") as HTMLButtonElement).click();
+  expect(multi.querySelectorAll(".wrn-next__select-tags > span")).toHaveLength(2);
+  (multi.querySelector(".wrn-next__clear-select") as HTMLButtonElement).click();
+  expect(multi.querySelectorAll(".wrn-next__select-tags > span")).toHaveLength(0);
+});
+
+test("advanced select lazily opens grouped options and honors defaultOpen", async () => {
+  const source = readFileSync(uiComponentPath("AdvancedSelect"), "utf8");
+  const groups = [{ label: "Regions", options: [{ value: "in", label: "India" }] }];
+  const dom = mountHtml(await renderComponent(source, { name: "grouped", groups }));
+  expect(dom.querySelectorAll(".wrn-next__option-group")).toHaveLength(0);
+  (dom.querySelector(".wrn-next__select-trigger") as HTMLButtonElement).click();
+  expect(dom.querySelectorAll(".wrn-next__option-group")).toHaveLength(1);
+  (dom.querySelector(".wrn-next__select-option") as HTMLButtonElement).click();
+  expect((dom.querySelector('input[type="hidden"]') as HTMLInputElement).value).toBe("in");
+  const opened = mountHtml(
+    await renderComponent(source, { name: "opened", groups, defaultOpen: true }),
+  );
+  expect(opened.querySelectorAll(".wrn-next__select-option")).toHaveLength(1);
+});
+
 test("advanced select limits rendered options but searches the full dataset and retains saved values", async () => {
   const source = readFileSync(uiComponentPath("AdvancedSelect"), "utf8");
   const dom = mountHtml(
@@ -1921,8 +1976,9 @@ test("advanced select limits rendered options but searches the full dataset and
     }),
   );
   expect(dom.querySelector(".wrn-next__select-value")?.textContent).toContain("Region 99");
-  expect(dom.querySelectorAll(".wrn-next__select-option")).toHaveLength(4);
+  expect(dom.querySelectorAll(".wrn-next__select-option")).toHaveLength(0);
   (dom.querySelector(".wrn-next__select-trigger") as HTMLButtonElement).click();
+  expect(dom.querySelectorAll(".wrn-next__select-option")).toHaveLength(4);
   const search = dom.querySelector('input[type="search"]') as HTMLInputElement;
   search.value = "Region 99";
   search.dispatchEvent(new (dom.window as any).Event("input", { bubbles: true }));