Refresh UI components and showcase; release updated framework packages

packages/ui/test/component-audit.test.ts

@@ -0,0 +1,135 @@
+import { test, expect } from "bun:test";
+import { readFileSync } from "node:fs";
+import { mountHtml, renderComponent } from "../../test/src/index.ts";
+import { uiComponentPath } from "../src/registry.ts";
+
+async function mount(name: string, props: Record<string, unknown>) {
+  return mountHtml(await renderComponent(readFileSync(uiComponentPath(name), "utf8"), props));
+}
+
+test("grouped combobox renders suggestions and commits a selection", async () => {
+  const dom = await mount("ComboBox", {
+    name: "teams",
+    groups: [
+      {
+        label: "Product",
+        options: [
+          { value: "design", label: "Design" },
+          { value: "engineering", label: "Engineering" },
+        ],
+      },
+    ],
+  });
+  const input = dom.querySelector('input[role="combobox"]') as HTMLInputElement;
+  input.dispatchEvent(new (dom.window as Window & typeof globalThis).Event("focus"));
+  const option = dom.querySelector('[data-option-value="engineering"]') as HTMLButtonElement;
+  expect(option).not.toBeNull();
+  option.click();
+  expect(input.value).toBe("Engineering");
+});
+
+test("toggle count falls back to its first choice when value is empty or invalid", async () => {
+  for (const value of ["", "unknown"]) {
+    const dom = await mount("ToggleCount", {
+      value,
+      firstValue: "monthly",
+      items: [{ title: "Team", monthly: 29, annual: 290 }],
+    });
+    expect(dom.querySelector('[aria-pressed="true"]')?.textContent).toContain("Monthly");
+    expect(dom.document.body.textContent).toContain("29");
+  }
+});
+
+test("password leading icon is optional", async () => {
+  const plain = await mount("TogglePassword", {});
+  expect(plain.querySelector(".wrn-next__password-leading-icon")).toBeNull();
+  const decorated = await mount("TogglePassword", { icon: "icon-[lucide--lock]" });
+  expect(decorated.querySelector(".wrn-next__password-leading-icon")?.className).toContain(
+    "icon-[lucide--lock]",
+  );
+});
+
+test("button group changes the selected segment", async () => {
+  const dom = await mount("ButtonGroup", {
+    items: [
+      { label: "Week", value: "week" },
+      { label: "Month", value: "month" },
+    ],
+    value: "week",
+    selectable: true,
+  });
+  (dom.querySelector('[data-value="month"]') as HTMLButtonElement).click();
+  expect(dom.querySelector('[aria-pressed="true"]')?.textContent).toContain("Month");
+});
+
+test("carousel exposes both unframed and framed surfaces", async () => {
+  for (const framed of [false, true]) {
+    const dom = await mount("Carousel", {
+      framed,
+      items: [{ title: "First" }, { title: "Second" }],
+    });
+    expect(dom.querySelector("[data-framed]")?.getAttribute("data-framed")).toBe(String(framed));
+  }
+});
+
+
+test("rating commits a star selection and readonly rating stays disabled", async () => {
+ const dom = await mount("Rating", {value: 2});
+ (dom.querySelector('[aria-label="Rate 4 of 5"]') as HTMLButtonElement).click();
+ expect(dom.querySelector('output')?.textContent).toContain("4 / 5");
+ expect(dom.querySelectorAll('[data-filled="true"]').length).toBe(4);
+ const readonly = await mount("Rating", {readonly:true});
+ expect((readonly.querySelector('button') as HTMLButtonElement).disabled).toBe(true);
+});
+
+
+test("fractional rating uses the requested step and commits precise values", async () => {
+ const dom = await mount("Rating", {value:3.5, step:0.2});
+ const slider = dom.querySelector('input[type="range"]') as HTMLInputElement;
+ expect(slider.step).toBe("0.2");
+ slider.value = "4.2";
+ slider.dispatchEvent(new (dom.window as Window & typeof globalThis).Event("input", {bubbles:true}));
+ expect(dom.querySelector('output')?.textContent).toContain("4.2 / 5");
+});
+
+test("card header and footer can be suppressed independently", async () => {
+ const dom = await mount("Card", {title:"Hidden title",footer:"Hidden footer",showHeader:false,showFooter:false,description:"Body remains"});
+ expect(dom.querySelector('.wrn-next__card-header')).toBeNull();
+ expect(dom.querySelector('.wrn-next__card-footer')).toBeNull();
+ expect(dom.document.body.textContent).toContain("Body remains");
+});
+
+test("map embeds a geographic provider and requires a Google key", async () => {
+ const osm = await mount("Map", {latitude:12.97,longitude:77.59});
+ expect(osm.querySelector('iframe')?.getAttribute('src')).toContain('openstreetmap.org/export/embed.html');
+ const google = await mount("Map", {provider:"google",apiKey:""});
+ expect(google.querySelector('iframe')).toBeNull();
+ expect(google.document.body.textContent).toContain('API key');
+});
+
+test("chart accepts data arrays and chooses line rendering", async () => {
+ const dom = await mount("Chart", {type:"line",data:[{label:"Mon",value:12},{label:"Tue",value:18}]});
+ expect(dom.querySelector('polyline')).not.toBeNull();
+ expect(dom.querySelectorAll('.wrn-chart__point-labels button').length).toBe(2);
+});
+
+test("calendar Done and outside dismiss both close the panel", async () => {
+ const dom = await mount("DatePicker", {value:"2026-09-20"});
+ const trigger = dom.querySelector('.wrn-next__date-trigger') as HTMLButtonElement;
+ trigger.click();
+ (dom.querySelector('.wrn-next__date-done') as HTMLButtonElement).click();
+ expect(trigger.getAttribute('aria-expanded')).toBe('false');
+ trigger.click();
+ (dom.querySelector('.wrn-picker-dismiss') as HTMLButtonElement).click();
+ expect(trigger.getAttribute('aria-expanded')).toBe('false');
+});
+
+
+test("fractional slider increments stay precise and disabled controls do not change", async () => {
+ const dom = await mount("RangeSlider", {min:0,max:5,value:2.4,step:0.2});
+ (dom.querySelector('[aria-label="Increase Range"]') as HTMLButtonElement).click();
+ expect(dom.querySelector('[role="slider"]')?.getAttribute('aria-valuenow')).toBe('2.6');
+ const locked = await mount("RangeSlider", {value:2,disabled:true});
+ (locked.querySelector('[role="slider"]') as HTMLElement).dispatchEvent(new (locked.window as Window & typeof globalThis).KeyboardEvent('keydown',{key:'ArrowRight',bubbles:true}));
+ expect(locked.querySelector('[role="slider"]')?.getAttribute('aria-valuenow')).toBe('2');
+});