refactor: migrate legacy wire namespace to wrn

packages/ui/components/Scrollspy.wrn

@@ -41,25 +41,25 @@ component Scrollspy {
     <nav
       {...attrs}
       data-ui-component="Scrollspy"
-      class='wire-scrollspy {class}'
+      class='wrn-scrollspy {class}'
       data-color='{color}'
       data-size='{size}'
       data-wrn-scrollspy="true"
       role="navigation"
       aria-label='{label}'
     >
-      <p class="wire-scrollspy__heading" data-show="heading">{heading}</p>
+      <p class="wrn-scrollspy__heading" data-show="heading">{heading}</p>
 
-      <ul class="wire-scrollspy__list">
+      <ul class="wrn-scrollspy__list">
         {#each itemList() as item}
-          <li class="wire-scrollspy__item">
+          <li class="wrn-scrollspy__item">
             <a
-              class="wire-scrollspy__link"
+              class="wrn-scrollspy__link"
               href='{item.href || "#"}'
               data-active='{isActive(item)}'
               aria-current='{isActive(item) ? "location" : "false"}'
             >
-              <span class="wire-scrollspy__label">{item.label}</span>
+              <span class="wrn-scrollspy__label">{item.label}</span>
             </a>
           </li>
         {/each}
@@ -70,73 +70,73 @@ component Scrollspy {
   }
 
   style {
-    .wire-scrollspy {
-      --scrollspy-accent: var(--wire-color-primary);
+    .wrn-scrollspy {
+      --scrollspy-accent: var(--wrn-color-primary);
       max-width: 100%;
     }
 
-    .wire-scrollspy[data-color="secondary"] {
-      --scrollspy-accent: var(--wire-color-secondary);
+    .wrn-scrollspy[data-color="secondary"] {
+      --scrollspy-accent: var(--wrn-color-secondary);
     }
 
-    .wire-scrollspy[data-color="success"] {
-      --scrollspy-accent: var(--wire-color-success);
+    .wrn-scrollspy[data-color="success"] {
+      --scrollspy-accent: var(--wrn-color-success);
     }
 
-    .wire-scrollspy[data-color="danger"] {
-      --scrollspy-accent: var(--wire-color-danger);
+    .wrn-scrollspy[data-color="danger"] {
+      --scrollspy-accent: var(--wrn-color-danger);
     }
 
-    .wire-scrollspy[data-color="info"] {
-      --scrollspy-accent: var(--wire-color-info);
+    .wrn-scrollspy[data-color="info"] {
+      --scrollspy-accent: var(--wrn-color-info);
     }
 
-    .wire-scrollspy[data-size="sm"] {
+    .wrn-scrollspy[data-size="sm"] {
       font-size: 0.82rem;
     }
 
-    .wire-scrollspy[data-size="lg"] {
+    .wrn-scrollspy[data-size="lg"] {
       font-size: 1rem;
     }
 
-    .wire-scrollspy__heading {
+    .wrn-scrollspy__heading {
       margin: 0 0 0.5rem;
-      color: var(--wire-color-text-muted);
+      color: var(--wrn-color-text-muted);
       font-size: 0.72rem;
       font-weight: 700;
       letter-spacing: 0.08em;
       text-transform: uppercase;
     }
 
-    .wire-scrollspy__list {
+    .wrn-scrollspy__list {
       display: grid;
       gap: 0.1rem;
       margin: 0;
       padding: 0;
       list-style: none;
-      border-left: 1px solid var(--wire-color-border);
+      border-left: 1px solid var(--wrn-color-border);
     }
 
-    .wire-scrollspy__link {
+    .wrn-scrollspy__link {
       display: block;
       padding: 0.3rem 0.75rem;
       margin-left: -1px;
       border-left: 2px solid transparent;
-      color: var(--wire-color-text-muted);
+      color: var(--wrn-color-text-muted);
       font-size: 0.85rem;
       text-decoration: none;
     }
 
-    .wire-scrollspy__link:hover {
-      color: var(--wire-color-text);
+    .wrn-scrollspy__link:hover {
+      color: var(--wrn-color-text);
     }
 
-    .wire-scrollspy__link:focus-visible {
+    .wrn-scrollspy__link:focus-visible {
       outline: 2px solid var(--scrollspy-accent);
       outline-offset: -2px;
     }
 
-    .wire-scrollspy__link[data-active="true"] {
+    .wrn-scrollspy__link[data-active="true"] {
       border-left-color: var(--scrollspy-accent);
       color: var(--scrollspy-accent);
       font-weight: 600;
@@ -148,22 +148,22 @@ component Scrollspy {
      * line rather than a screenful.
      */
     @media (max-width: 767px) {
-      .wire-scrollspy__list {
+      .wrn-scrollspy__list {
         grid-auto-flow: column;
         grid-auto-columns: max-content;
         overflow-x: auto;
         border-left: 0;
-        border-bottom: 1px solid var(--wire-color-border);
+        border-bottom: 1px solid var(--wrn-color-border);
       }
 
-      .wire-scrollspy__link {
+      .wrn-scrollspy__link {
         margin-left: 0;
         border-left: 0;
         border-bottom: 2px solid transparent;
         white-space: nowrap;
       }
 
-      .wire-scrollspy__link[data-active="true"] {
+      .wrn-scrollspy__link[data-active="true"] {
         border-left-color: transparent;
         border-bottom-color: var(--scrollspy-accent);
       }