Refresh UI components and showcase; release updated framework packages

packages/ui/test/ui.test.ts

@@ -542,7 +542,7 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced-
   expect(css).toContain("--wrn-ease-emphasized");
   expect(css).toContain("@keyframes wrn-component-enter");
   expect(css).toContain("@keyframes wrn-dialog-enter");
-  expect(css).toContain("@media (hover: hover) and (pointer: fine)");
+  expect(uiCss()).not.toMatch(/\[data-component\]\s*\{\s*animation:/);
   expect(css).toContain("--color-violet-600: var(--wrn-color-primary)");
   expect(css).toContain("--color-blue-600: var(--wrn-color-info)");
   expect(css).toContain("--color-red-600: var(--wrn-color-danger)");
@@ -1672,7 +1672,7 @@ test("date picker renders a custom calendar trigger with accessible field state
   expect(dom.querySelector("label")?.getAttribute("for")).toBe("start-date");
   expect(dom.querySelector('button[aria-haspopup="dialog"]')).not.toBeNull();
   expect(source).not.toContain('type="{type}"');
-  expect(source).toContain("months =");
+  expect(dom.querySelectorAll(".wrn-next__date-selectors select")[0]?.querySelectorAll("option")).toHaveLength(12);
   expect(dom.querySelector(".wrn-next__field-help")?.textContent).toContain("local date");
   const trigger = dom.querySelector('button[aria-haspopup="dialog"]') as HTMLButtonElement;
   expect(dom.querySelector(".wrn-next--date-picker")?.getAttribute("data-expanded")).toBe("false");
@@ -3185,6 +3185,24 @@ test("announcement full-width surface does not create viewport scrollbar overflo
   expect(source).not.toContain("calc(50% - 50vw)");
 });
 
+test("announcement status uses a compatible element and preserves live announcements", async () => {
+  const html = await renderComponent(readFileSync(uiComponentPath("AnnouncementBar"), "utf8"), { message: "Service update" });
+  const dom = mountHtml(html);
+  const status = dom.querySelector('[role="status"]')!;
+  expect(status.tagName).toBe("DIV");
+  expect(status.getAttribute("aria-live")).toBe("polite");
+  expect(status.textContent).toContain("Service update");
+});
+
+test("feature grid supports arbitrary slotted articles without imposing list semantics", async () => {
+  const grid = await renderComponent(readFileSync(uiComponentPath("FeatureGrid"), "utf8"));
+  const card = await renderComponent(readFileSync(uiComponentPath("FeatureCard"), "utf8"), { title: "Feature" });
+  expect(mountHtml(grid).querySelector('[role="list"]')).toBeNull();
+  const dom = mountHtml(card);
+  expect(dom.querySelector('[role="listitem"]')).toBeNull();
+  expect(dom.querySelector("article")?.textContent).toContain("Feature");
+});
+
 test("mega menu columns take roving focus and survive an empty column list", async () => {
   const source = readFileSync(uiComponentPath("MegaMenu"), "utf8");
   const html = await renderComponent(source, { label: "Empty", columns: [] });
@@ -3194,6 +3212,16 @@ test("mega menu columns take roving focus and survive an empty column list", asy
   expect(dom.querySelector('[data-wrn-roving="both"]')).not.toBeNull();
 });
 
+test("mega menu trigger keeps an accessible name for an empty or missing label", async () => {
+  const source = readFileSync(uiComponentPath("MegaMenu"), "utf8");
+  for (const label of ["", undefined, "Products"]) {
+    const dom = mountHtml(await renderComponent(source, { label, columns: [] }));
+    const trigger = dom.querySelector(".wrn-mega__trigger")!;
+    expect(trigger.getAttribute("aria-label")).toBe(label || "Menu");
+    expect(dom.querySelector(".wrn-mega__trigger-label")?.getAttribute("data-label")).toBe(label || "Menu");
+  }
+});
+
 test("catalog mega menu renders only the active rail category", async () => {
   const source = readFileSync(uiComponentPath("MegaMenu"), "utf8");
   expect(source).toContain(".wrn-mega__list > li");