refactor: migrate legacy wire namespace to wrn

packages/ui/components/Link.wrn

@@ -25,7 +25,7 @@ component Link {
     <a
       {...attrs}
       data-ui-component="Link"
-      class='wire-link {class}'
+      class='wrn-link {class}'
       href='{href}'
       target='{target}'
       rel='{external ? (rel || "noopener noreferrer") : rel}'
@@ -34,9 +34,9 @@ component Link {
       data-underline='{underline}'
       data-external='{external}'
     >
-      <span class="wire-link__label">{label}</span>
+      <span class="wrn-link__label">{label}</span>
       <span
-        class="icon-[lucide--external-link] wire-link__icon"
+        class="icon-[lucide--external-link] wrn-link__icon"
         data-show="external"
         aria-hidden="true"
       ></span>
@@ -45,14 +45,14 @@ component Link {
   }
 
   style {
-    .wire-link {
-      --link-tone: var(--wire-color-primary);
-      --link-tone-hover: var(--wire-color-primary-hover);
+    .wrn-link {
+      --link-tone: var(--wrn-color-primary);
+      --link-tone-hover: var(--wrn-color-primary-hover);
       display: inline-flex;
       align-items: center;
       gap: 0.35rem;
       min-width: 0;
-      border-radius: var(--wire-radius-sm);
+      border-radius: var(--wrn-radius-sm);
       color: var(--link-tone);
       font-size: 0.875rem;
       font-weight: 600;
@@ -61,74 +61,74 @@ component Link {
       transition: color 140ms ease;
     }
 
-    .wire-link[data-color="secondary"] {
-      --link-tone: var(--wire-color-secondary);
-      --link-tone-hover: var(--wire-color-secondary-hover);
+    .wrn-link[data-color="secondary"] {
+      --link-tone: var(--wrn-color-secondary);
+      --link-tone-hover: var(--wrn-color-secondary-hover);
     }
 
-    .wire-link[data-color="success"] {
-      --link-tone: var(--wire-color-success);
-      --link-tone-hover: var(--wire-color-success);
+    .wrn-link[data-color="success"] {
+      --link-tone: var(--wrn-color-success);
+      --link-tone-hover: var(--wrn-color-success);
     }
 
-    .wire-link[data-color="warning"] {
-      --link-tone: var(--wire-color-warning-text);
-      --link-tone-hover: var(--wire-color-warning-text);
+    .wrn-link[data-color="warning"] {
+      --link-tone: var(--wrn-color-warning-text);
+      --link-tone-hover: var(--wrn-color-warning-text);
     }
 
-    .wire-link[data-color="danger"] {
-      --link-tone: var(--wire-color-danger);
-      --link-tone-hover: var(--wire-color-danger);
+    .wrn-link[data-color="danger"] {
+      --link-tone: var(--wrn-color-danger);
+      --link-tone-hover: var(--wrn-color-danger);
     }
 
-    .wire-link[data-color="info"] {
-      --link-tone: var(--wire-color-info);
-      --link-tone-hover: var(--wire-color-info);
+    .wrn-link[data-color="info"] {
+      --link-tone: var(--wrn-color-info);
+      --link-tone-hover: var(--wrn-color-info);
     }
 
-    .wire-link[data-color="neutral"] {
-      --link-tone: var(--wire-color-text);
-      --link-tone-hover: var(--wire-color-text);
+    .wrn-link[data-color="neutral"] {
+      --link-tone: var(--wrn-color-text);
+      --link-tone-hover: var(--wrn-color-text);
     }
 
-    .wire-link[data-size="xs"] {
+    .wrn-link[data-size="xs"] {
       font-size: 0.75rem;
     }
 
-    .wire-link[data-size="md"] {
+    .wrn-link[data-size="md"] {
       font-size: 1rem;
     }
 
-    .wire-link[data-size="lg"] {
+    .wrn-link[data-size="lg"] {
       font-size: 1.125rem;
     }
 
-    .wire-link[data-underline="always"] {
+    .wrn-link[data-underline="always"] {
       text-decoration: underline;
     }
 
-    .wire-link[data-underline="hover"]:hover {
+    .wrn-link[data-underline="hover"]:hover {
       text-decoration: underline;
     }
 
-    .wire-link:hover {
+    .wrn-link:hover {
       color: var(--link-tone-hover);
     }
 
-    .wire-link:focus-visible {
-      outline: 2px solid var(--wire-color-focus);
+    .wrn-link:focus-visible {
+      outline: 2px solid var(--wrn-color-focus);
       outline-offset: 2px;
     }
 
     /* The label truncates; the outbound icon must not shrink with it. */
-    .wire-link__label {
+    .wrn-link__label {
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
-    .wire-link__icon {
+    .wrn-link__icon {
       flex: 0 0 auto;
       width: 0.875rem;
       height: 0.875rem;