refactor: migrate legacy wire namespace to wrn

.publish/ui/components/container.wrn

@@ -35,7 +35,7 @@ component Container {
     <div
       {...attrs}
       data-ui-component="Container"
-      class='wire-container {class}'
+      class='wrn-container {class}'
       data-size='{size}'
       data-color='{color}'
       data-gap='{gap}'
@@ -48,64 +48,64 @@ component Container {
   }
 
   style {
-    .wire-container {
+    .wrn-container {
       --container-gap: 1.25rem;
       width: 100%;
       min-width: 0;
       padding-inline: 1rem;
     }
 
-    .wire-container[data-centered="true"] {
+    .wrn-container[data-centered="true"] {
       margin-inline: auto;
     }
 
     /* Reading widths, not breakpoints: the cap is about line length. */
-    .wire-container[data-max-width="md"] {
+    .wrn-container[data-max-width="md"] {
       max-width: 48rem;
     }
 
-    .wire-container[data-max-width="lg"] {
+    .wrn-container[data-max-width="lg"] {
       max-width: 64rem;
     }
 
-    .wire-container[data-max-width="xl"],
-    .wire-container[data-max-width="wide"] {
+    .wrn-container[data-max-width="xl"],
+    .wrn-container[data-max-width="wide"] {
       max-width: 80rem;
     }
 
-    .wire-container[data-max-width="2xl"] {
+    .wrn-container[data-max-width="2xl"] {
       max-width: 96rem;
     }
 
-    .wire-container[data-max-width="full"] {
+    .wrn-container[data-max-width="full"] {
       max-width: none;
     }
 
-    .wire-container[data-size="compact"] {
+    .wrn-container[data-size="compact"] {
       padding-inline: 1rem;
     }
 
-    .wire-container[data-size="comfortable"] {
+    .wrn-container[data-size="comfortable"] {
       padding-inline: 1.25rem;
     }
 
-    .wire-container[data-size="spacious"] {
+    .wrn-container[data-size="spacious"] {
       padding-inline: 1.5rem;
     }
 
-    .wire-container[data-gap="xs"] {
+    .wrn-container[data-gap="xs"] {
       --container-gap: 0.5rem;
     }
 
-    .wire-container[data-gap="sm"] {
+    .wrn-container[data-gap="sm"] {
       --container-gap: 0.75rem;
     }
 
-    .wire-container[data-gap="lg"] {
+    .wrn-container[data-gap="lg"] {
       --container-gap: 2rem;
     }
 
-    .wire-container[data-gap="xl"] {
+    .wrn-container[data-gap="xl"] {
       --container-gap: 2.5rem;
     }
 
@@ -113,48 +113,48 @@ component Container {
      * Columns are opt-in. One column stays plain flow so a container does not
      * quietly turn every page into a grid.
      */
-    .wire-container:not([data-columns="1"]) {
+    .wrn-container:not([data-columns="1"]) {
       display: grid;
       gap: var(--container-gap);
       grid-template-columns: 1fr;
     }
 
     @media (min-width: 640px) {
-      .wire-container[data-columns="2"],
-      .wire-container[data-columns="3"],
-      .wire-container[data-columns="4"],
-      .wire-container[data-columns="5"],
-      .wire-container[data-columns="6"] {
+      .wrn-container[data-columns="2"],
+      .wrn-container[data-columns="3"],
+      .wrn-container[data-columns="4"],
+      .wrn-container[data-columns="5"],
+      .wrn-container[data-columns="6"] {
         grid-template-columns: repeat(2, minmax(0, 1fr));
       }
 
-      .wire-container[data-size="default"],
-      .wire-container[data-size="comfortable"],
-      .wire-container[data-size="spacious"] {
+      .wrn-container[data-size="default"],
+      .wrn-container[data-size="comfortable"],
+      .wrn-container[data-size="spacious"] {
         padding-inline: 1.5rem;
       }
     }
 
     @media (min-width: 1024px) {
-      .wire-container[data-columns="3"] {
+      .wrn-container[data-columns="3"] {
         grid-template-columns: repeat(3, minmax(0, 1fr));
       }
 
-      .wire-container[data-columns="4"] {
+      .wrn-container[data-columns="4"] {
         grid-template-columns: repeat(4, minmax(0, 1fr));
       }
 
-      .wire-container[data-columns="5"] {
+      .wrn-container[data-columns="5"] {
         grid-template-columns: repeat(5, minmax(0, 1fr));
       }
 
-      .wire-container[data-columns="6"] {
+      .wrn-container[data-columns="6"] {
         grid-template-columns: repeat(6, minmax(0, 1fr));
       }
 
-      .wire-container[data-size="default"],
-      .wire-container[data-size="comfortable"],
-      .wire-container[data-size="spacious"] {
+      .wrn-container[data-size="default"],
+      .wrn-container[data-size="comfortable"],
+      .wrn-container[data-size="spacious"] {
         padding-inline: 2rem;
       }
     }