refactor: migrate legacy wire namespace to wrn

examples/component-showcase/scripts/generate-showcase.mjs

@@ -1550,7 +1550,7 @@ function detailPage(component, categoryComponents) {
                   ? "toggle-password-validation"
                   : "";
       const preview = validationSchema
-        ? `<form data-schema="${validationSchema}" class="demo-validation-form">${mount}<button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form>`
+        ? `<form data-schema="${validationSchema}" class="demo-validation-form">${mount}<button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form>`
         : mount;
       // `before` renders markup NEXT TO the mount rather than inside its slot.
       // Host-style components (Toaster) have no slot at all: what a reader

examples/component-showcase/scripts/showcase-profiles.mjs

@@ -378,7 +378,7 @@ export const componentProfiles = {
         description:
           "Scroll the page and the marker moves to whichever section is in view. The sections below are real page content, because the runtime observes against the viewport -- a table of contents inside a small scrolling box would have nothing to react to.",
         before:
-          '<div class="showcase-spy-doc"><section id="overview" class="showcase-spy-section"><h3>Overview</h3><p>Scroll this page and watch the marker in the list move. The runtime observes these sections against the viewport, so the current link follows whatever you are reading.</p></section><section id="installation" class="showcase-spy-section"><h3>Installation</h3><p>Each link points at one of these ids. Nothing is wired up by hand -- the component only renders the links, and the runtime moves aria-current.</p></section><section id="usage" class="showcase-spy-section"><h3>Usage</h3><p>The active link is marked with aria-current="location", which is what a screen reader announces, and styled through data-active.</p></section><section id="api" class="showcase-spy-section"><h3>API</h3><p>Clicking a link jumps to its section and marks it immediately, so the control responds even before the scroll settles.</p></section></div>',
+          '<div class="showcase-spy-doc"><section id="overview" class="showcase-spy-section"><h3>Overview</h3><p>Scroll this page and watch the marker in the list move. The runtime observes these sections against the viewport, so the current link follows whatever you are reading.</p></section><section id="installation" class="showcase-spy-section"><h3>Installation</h3><p>Each link points at one of these ids. Nothing is connected up by hand -- the component only renders the links, and the runtime moves aria-current.</p></section><section id="usage" class="showcase-spy-section"><h3>Usage</h3><p>The active link is marked with aria-current="location", which is what a screen reader announces, and styled through data-active.</p></section><section id="api" class="showcase-spy-section"><h3>API</h3><p>Clicking a link jumps to its section and marks it immediately, so the control responds even before the scroll settles.</p></section></div>',
         props: {
           heading: "On this page",
           items: [