refactor: migrate legacy wire namespace to wrn

packages/ui/components/Footer.wrn

@@ -22,13 +22,13 @@ component Footer {
       data-ui-component="Footer"
       data-size='{size}'
       data-color='{color}'
-      class='wire-footer {maxWidth === "full" ? "wire-footer--width-full" : ""} {class}'
+      class='wrn-footer {maxWidth === "full" ? "wrn-footer--width-full" : ""} {class}'
     >
       <div
-        class="wire-footer__grid"
+        class="wrn-footer__grid"
       >
         <div
-          class="wire-footer__pre"
+          class="wrn-footer__pre"
         >
           <slot
             name="pre-footer"
@@ -38,13 +38,13 @@ component Footer {
 
         {#if items.length > 0}
           <nav
-            class='wire-footer__links wire-footer--columns-{columns}'
+            class='wrn-footer__links wrn-footer--columns-{columns}'
             aria-label='{label}'
           >
             {#each items as item, itemIndex}
               {#if item.type === "header"}
                 <section
-                  class="wire-footer__column"
+                  class="wrn-footer__column"
                   aria-labelledby='footer-heading-{itemIndex}'
                 >
                   {#if item.icon}
@@ -57,7 +57,7 @@ component Footer {
 
                   <h2
                     id='footer-heading-{itemIndex}'
-                    class="wire-footer__heading"
+                    class="wrn-footer__heading"
                   >
                     {item.label || item.title}
                   </h2>
@@ -70,7 +70,7 @@ component Footer {
 
                   {#if (item.items || item.links || []).length > 0}
                     <div
-                      class="wire-footer__column-links"
+                      class="wrn-footer__column-links"
                     >
                       {#each item.items || item.links || [] as child, childIndex}
                         <a
@@ -78,7 +78,7 @@ component Footer {
                           target='{child.target || ""}'
                           rel='{child.external ? "noopener noreferrer" : (child.rel || "")}'
                           aria-current='{child.active ? "page" : ""}'
-                          class="wire-footer__link"
+                          class="wrn-footer__link"
                           @click='output.select({ item: child, parent: item, itemIndex: childIndex, sectionIndex: itemIndex }); child.action && output.action({ item: child, parent: item, itemIndex: childIndex, sectionIndex: itemIndex })'
                         >
                           {#if child.icon}
@@ -95,7 +95,7 @@ component Footer {
 
                           {#if child.badge}
                             <span
-                              class="wire-badge wire-badge--default"
+                              class="wrn-badge wrn-badge--default"
                             >
                               {child.badge}
                             </span>
@@ -116,17 +116,17 @@ component Footer {
 
               {:else if item.type === "link" || item.href}
                 <section
-                  class="wire-footer__column"
+                  class="wrn-footer__column"
                 >
                   <div
-                    class="wire-footer__column-links"
+                    class="wrn-footer__column-links"
                   >
                     <a
                       href='{item.href || "#"}'
                       target='{item.target || ""}'
                       rel='{item.external ? "noopener noreferrer" : (item.rel || "")}'
                       aria-current='{item.active ? "page" : ""}'
-                      class="wire-footer__link"
+                      class="wrn-footer__link"
                       @click='output.select({ item: item, itemIndex: itemIndex }); item.action && output.action({ item: item, itemIndex: itemIndex })'
                     >
                       {#if item.icon}
@@ -143,7 +143,7 @@ component Footer {
 
                       {#if item.badge}
                         <span
-                          class="wire-badge wire-badge--default"
+                          class="wrn-badge wrn-badge--default"
                         >
                           {item.badge}
                         </span>
@@ -162,7 +162,7 @@ component Footer {
 
               {:else}
                 <section
-                  class="wire-footer__column"
+                  class="wrn-footer__column"
                   aria-labelledby='footer-heading-{itemIndex}'
                 >
                   {#if item.icon}
@@ -176,7 +176,7 @@ component Footer {
                   {#if item.title || item.label}
                     <h2
                       id='footer-heading-{itemIndex}'
-                      class="wire-footer__heading"
+                      class="wrn-footer__heading"
                     >
                       {item.title || item.label}
                     </h2>
@@ -190,7 +190,7 @@ component Footer {
 
                   {#if (item.items || item.links || []).length > 0}
                     <div
-                      class="wire-footer__column-links"
+                      class="wrn-footer__column-links"
                     >
                       {#each item.items || item.links || [] as child, childIndex}
                         <a
@@ -198,7 +198,7 @@ component Footer {
                           target='{child.target || ""}'
                           rel='{child.external ? "noopener noreferrer" : (child.rel || "")}'
                           aria-current='{child.active ? "page" : ""}'
-                          class="wire-footer__link"
+                          class="wrn-footer__link"
                           @click='output.select({ item: child, parent: item, itemIndex: childIndex, sectionIndex: itemIndex }); child.action && output.action({ item: child, parent: item, itemIndex: childIndex, sectionIndex: itemIndex })'
                         >
                           {#if child.icon}
@@ -215,7 +215,7 @@ component Footer {
 
                           {#if child.badge}
                             <span
-                              class="wire-badge wire-badge--default"
+                              class="wrn-badge wrn-badge--default"
                             >
                               {child.badge}
                             </span>
@@ -239,7 +239,7 @@ component Footer {
         {/if}
 
         <div
-          class="wire-footer__post"
+          class="wrn-footer__post"
         >
           <slot
             name="post-footer"
@@ -249,10 +249,10 @@ component Footer {
       </div>
 
       <div
-        class="wire-footer__bottom wire-footer__bottom--slots"
+        class="wrn-footer__bottom wrn-footer__bottom--slots"
       >
         <div
-          class="wire-footer__copyright-left"
+          class="wrn-footer__copyright-left"
         >
           <slot
             name="copyright-left"
@@ -262,11 +262,11 @@ component Footer {
 
         {#if copyright}
           <div
-            class="wire-footer__bottom"
+            class="wrn-footer__bottom"
           >
             <div></div>
             <p
-              class="wire-footer__copyright"
+              class="wrn-footer__copyright"
             >
               {copyright}
             </p>
@@ -275,7 +275,7 @@ component Footer {
         {/if}
 
         <div
-          class="wire-footer__copyright-right"
+          class="wrn-footer__copyright-right"
         >
           <slot
             name="copyright-right"
@@ -287,48 +287,48 @@ component Footer {
   }
 
   style {
-    .wire-footer--columns-1 {
-      --wire-footer-columns: 1;
+    .wrn-footer--columns-1 {
+      --wrn-footer-columns: 1;
     }
 
-    .wire-footer--columns-2 {
-      --wire-footer-columns: 2;
+    .wrn-footer--columns-2 {
+      --wrn-footer-columns: 2;
     }
 
-    .wire-footer--columns-3 {
-      --wire-footer-columns: 3;
+    .wrn-footer--columns-3 {
+      --wrn-footer-columns: 3;
     }
 
-    .wire-footer--columns-4 {
-      --wire-footer-columns: 4;
+    .wrn-footer--columns-4 {
+      --wrn-footer-columns: 4;
     }
 
-    .wire-footer--columns-5 {
-      --wire-footer-columns: 5;
+    .wrn-footer--columns-5 {
+      --wrn-footer-columns: 5;
     }
 
-    .wire-footer--columns-6 {
-      --wire-footer-columns: 6;
+    .wrn-footer--columns-6 {
+      --wrn-footer-columns: 6;
     }
 
     @media (max-width: 900px) {
-      .wire-footer--columns-1 .wire-footer__links {
+      .wrn-footer--columns-1 .wrn-footer__links {
         grid-template-columns: 1fr;
       }
 
-      .wire-footer--columns-2 .wire-footer__links {
+      .wrn-footer--columns-2 .wrn-footer__links {
         grid-template-columns: repeat(2, minmax(0, 1fr));
       }
     }
 
     @media (max-width: 600px) {
-      .wire-footer--columns-1 .wire-footer__links {
+      .wrn-footer--columns-1 .wrn-footer__links {
         grid-template-columns: 1fr;
       }
     }
 
     /* --- Badge ---------------------------------------------------------------- */
-    .wire-badge {
+    .wrn-badge {
       display: inline-flex;
       align-items: center;
       font-size: 0.75rem;
@@ -338,22 +338,22 @@ component Footer {
       border-radius: 999px;
     }
 
-    .wire-badge--default {
-      background: var(--wire-color-surface-2);
-      color: var(--wire-color-text);
+    .wrn-badge--default {
+      background: var(--wrn-color-surface-2);
+      color: var(--wrn-color-text);
     }
 
     /* Structured responsive footer */
-    .wire-footer {
+    .wrn-footer {
       width: 100%;
-      color: var(--wire-color-text);
-      background: var(--wire-color-surface);
-      border-top: 1px solid var(--wire-color-border);
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface);
+      border-top: 1px solid var(--wrn-color-border);
       font-size: 0.875rem;
       font-weight: 400;
     }
 
-    .wire-footer__grid {
+    .wrn-footer__grid {
       display: grid;
       grid-template-columns: minmax(13rem, 1.2fr) minmax(0, 3fr) minmax(13rem, 1fr);
       width: min(100%, 90rem);
@@ -362,155 +362,155 @@ component Footer {
       gap: clamp(1.5rem, 4vw, 3.5rem);
     }
 
-    .wire-footer--width-full .wire-footer__grid {
+    .wrn-footer--width-full .wrn-footer__grid {
       width: 100%;
       max-width: none;
     }
 
-    .wire-footer__pre:empty,
-    .wire-footer__post:empty,
-    .wire-footer__pre:not(:has(*)),
-    .wire-footer__post:not(:has(*)) {
+    .wrn-footer__pre:empty,
+    .wrn-footer__post:empty,
+    .wrn-footer__pre:not(:has(*)),
+    .wrn-footer__post:not(:has(*)) {
       display: none;
     }
 
-    .wire-footer__pre,
-    .wire-footer__post {
+    .wrn-footer__pre,
+    .wrn-footer__post {
       min-width: 0;
     }
 
-    .wire-footer__pre strong,
-    .wire-footer__post strong {
+    .wrn-footer__pre strong,
+    .wrn-footer__post strong {
       font-size: 0.875rem;
       font-weight: 600;
     }
 
-    .wire-footer__pre p,
-    .wire-footer__post p {
+    .wrn-footer__pre p,
+    .wrn-footer__post p {
       font-size: 0.8125rem;
       font-weight: 400;
       line-height: 1.6;
     }
 
-    .wire-footer__links {
+    .wrn-footer__links {
       display: grid;
-      grid-template-columns: repeat(var(--wire-footer-columns, 3), minmax(0, 1fr));
+      grid-template-columns: repeat(var(--wrn-footer-columns, 3), minmax(0, 1fr));
       align-content: start;
       gap: 1.5rem;
     }
 
-    .wire-footer__column {
+    .wrn-footer__column {
       display: grid;
       min-width: 0;
       align-content: start;
       gap: 0.8rem;
     }
 
-    .wire-footer__column-links {
+    .wrn-footer__column-links {
       display: grid;
       align-content: start;
       gap: 0.55rem;
     }
 
-    .wire-footer__heading {
+    .wrn-footer__heading {
       display: block;
-      color: var(--wire-color-text);
+      color: var(--wrn-color-text);
       font-size: 0.8125rem;
       font-weight: 600;
     }
 
-    .wire-footer__link {
+    .wrn-footer__link {
       display: flex;
       width: fit-content;
       min-height: 2rem;
       align-items: center;
       gap: 0.4rem;
-      color: var(--wire-color-muted);
+      color: var(--wrn-color-muted);
       font-size: 0.8125rem;
       font-weight: 400;
       text-decoration: none;
     }
 
-    .wire-footer__link:hover {
-      color: var(--wire-component-color, var(--wire-color-primary));
+    .wrn-footer__link:hover {
+      color: var(--wrn-component-color, var(--wrn-color-primary));
       text-decoration: underline;
       text-underline-offset: 0.2em;
     }
 
-    .wire-footer__bottom {
+    .wrn-footer__bottom {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
       align-items: center;
       gap: 1rem;
       padding: 1rem clamp(1rem, 4vw, 3rem);
-      color: var(--wire-color-muted);
-      border-top: 1px solid var(--wire-color-border);
+      color: var(--wrn-color-muted);
+      border-top: 1px solid var(--wrn-color-border);
       font-size: 0.75rem;
       font-weight: 400;
     }
 
-    .wire-footer__bottom--slots {
+    .wrn-footer__bottom--slots {
       grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     }
 
-    .wire-footer__bottom--slots:not(
-      :has(.wire-footer__copyright-left > *, .wire-footer__copyright-right > *)
+    .wrn-footer__bottom--slots:not(
+      :has(.wrn-footer__copyright-left > *, .wrn-footer__copyright-right > *)
     ) {
       display: none;
     }
 
-    .wire-footer__copyright {
+    .wrn-footer__copyright {
       text-align: center;
     }
 
-    .wire-footer__copyright-left,
-    .wire-footer__copyright-right {
+    .wrn-footer__copyright-left,
+    .wrn-footer__copyright-right {
       display: flex;
       min-width: 0;
       align-items: center;
       gap: 0.75rem;
     }
 
-    .wire-footer__copyright-right {
+    .wrn-footer__copyright-right {
       justify-content: flex-end;
       text-align: right;
     }
 
-    .wire-footer__copyright-left:empty,
-    .wire-footer__copyright-right:empty,
-    .wire-footer__copyright-left:not(:has(*)),
-    .wire-footer__copyright-right:not(:has(*)) {
+    .wrn-footer__copyright-left:empty,
+    .wrn-footer__copyright-right:empty,
+    .wrn-footer__copyright-left:not(:has(*)),
+    .wrn-footer__copyright-right:not(:has(*)) {
       min-height: 0;
     }
 
     @media (max-width: 900px) {
-    .wire-footer__grid {
+    .wrn-footer__grid {
         grid-template-columns: 1fr;
       }
-    .wire-footer__links {
+    .wrn-footer__links {
         grid-template-columns: repeat(3, minmax(0, 1fr));
       }
     }
 
     @media (max-width: 600px) {
-    .wire-footer__links {
+    .wrn-footer__links {
         grid-template-columns: repeat(2, minmax(0, 1fr));
       }
-    .wire-footer__bottom,
-      .wire-footer__bottom--slots {
+    .wrn-footer__bottom,
+      .wrn-footer__bottom--slots {
         grid-template-columns: 1fr;
         justify-items: center;
         text-align: center;
       }
-    .wire-footer__copyright-left,
-      .wire-footer__copyright-right {
+    .wrn-footer__copyright-left,
+      .wrn-footer__copyright-right {
         justify-content: center;
         text-align: center;
       }
     }
 
     @media (max-width: 420px) {
-    .wire-footer__links {
+    .wrn-footer__links {
         grid-template-columns: 1fr;
       }
     }