refactor: migrate legacy wire namespace to wrn

packages/ui/components/LayoutSplitter.wrn

@@ -11,7 +11,7 @@
 // held in the DOM as the --wrn-split custom property and these styles read it.
 //
 // This component previously declared resizeStart, resize and resizeEnd with no
-// pointer handling whatsoever: a caller wired up @resize and received nothing,
+// pointer handling whatsoever: a caller connected up @resize and received nothing,
 // for ever, with no error.
 //
 // NOTE: the style block uses /* */ comments only -- // is not a CSS comment
@@ -86,7 +86,7 @@ component LayoutSplitter {
     <div
       {...attrs}
       data-ui-component="LayoutSplitter"
-      class='wire-splitter {class}'
+      class='wrn-splitter {class}'
       data-color='{color}'
       data-orientation='{orientation}'
       data-wrn-splitter='{isVertical() ? "vertical" : "horizontal"}'
@@ -95,12 +95,12 @@ component LayoutSplitter {
       style='--wrn-split:{currentSize()}%;'
       @wrnexus:splitter:resize='reportResize(event)'
     >
-      <div class="wire-splitter__pane wire-splitter__pane--start">
+      <div class="wrn-splitter__pane wrn-splitter__pane--start">
         <slot name="start"></slot>
       </div>
 
       <div
-        class="wire-splitter__handle"
+        class="wrn-splitter__handle"
         data-wrn-splitter-handle="true"
         role="separator"
         tabindex="0"
@@ -110,10 +110,10 @@ component LayoutSplitter {
         aria-valuemin='{lowerBound()}'
         aria-valuemax='{upperBound()}'
       >
-        <span class="wire-splitter__grip" aria-hidden="true"></span>
+        <span class="wrn-splitter__grip" aria-hidden="true"></span>
       </div>
 
-      <div class="wire-splitter__pane wire-splitter__pane--end">
+      <div class="wrn-splitter__pane wrn-splitter__pane--end">
         <slot name="end"></slot>
       </div>
 
@@ -122,8 +122,8 @@ component LayoutSplitter {
   }
 
   style {
-    .wire-splitter {
-      --splitter-accent: var(--wire-color-primary);
+    .wrn-splitter {
+      --splitter-accent: var(--wrn-color-primary);
       display: grid;
       /* The first track follows the size the runtime resolves. */
       grid-template-columns: var(--wrn-split, 50%) auto minmax(0, 1fr);
@@ -132,34 +132,34 @@ component LayoutSplitter {
       min-width: 0;
     }
 
-    .wire-splitter[data-color="secondary"] {
-      --splitter-accent: var(--wire-color-secondary);
+    .wrn-splitter[data-color="secondary"] {
+      --splitter-accent: var(--wrn-color-secondary);
     }
 
-    .wire-splitter[data-color="success"] {
-      --splitter-accent: var(--wire-color-success);
+    .wrn-splitter[data-color="success"] {
+      --splitter-accent: var(--wrn-color-success);
     }
 
-    .wire-splitter[data-color="danger"] {
-      --splitter-accent: var(--wire-color-danger);
+    .wrn-splitter[data-color="danger"] {
+      --splitter-accent: var(--wrn-color-danger);
     }
 
-    .wire-splitter[data-color="info"] {
-      --splitter-accent: var(--wire-color-info);
+    .wrn-splitter[data-color="info"] {
+      --splitter-accent: var(--wrn-color-info);
     }
 
-    .wire-splitter[data-orientation="vertical"] {
+    .wrn-splitter[data-orientation="vertical"] {
       grid-template-columns: minmax(0, 1fr);
       grid-template-rows: var(--wrn-split, 50%) auto minmax(0, 1fr);
     }
 
-    .wire-splitter__pane {
+    .wrn-splitter__pane {
       min-width: 0;
       min-height: 0;
       overflow: auto;
     }
 
-    .wire-splitter__handle {
+    .wrn-splitter__handle {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -173,36 +173,36 @@ component LayoutSplitter {
       user-select: none;
     }
 
-    .wire-splitter[data-orientation="vertical"] .wire-splitter__handle {
+    .wrn-splitter[data-orientation="vertical"] .wrn-splitter__handle {
       padding: 0.25rem 0;
       cursor: row-resize;
     }
 
-    .wire-splitter__grip {
+    .wrn-splitter__grip {
       display: block;
       width: 2px;
       height: 100%;
       min-height: 1.5rem;
       border-radius: 999px;
-      background: var(--wire-color-border);
+      background: var(--wrn-color-border);
       transition: background 140ms ease;
     }
 
-    .wire-splitter[data-orientation="vertical"] .wire-splitter__grip {
+    .wrn-splitter[data-orientation="vertical"] .wrn-splitter__grip {
       width: 100%;
       min-width: 1.5rem;
       height: 2px;
     }
 
-    .wire-splitter__handle:hover .wire-splitter__grip,
-    .wire-splitter[data-wrn-splitter-dragging="true"] .wire-splitter__grip {
+    .wrn-splitter__handle:hover .wrn-splitter__grip,
+    .wrn-splitter[data-wrn-splitter-dragging="true"] .wrn-splitter__grip {
       background: var(--splitter-accent);
     }
 
-    .wire-splitter__handle:focus-visible {
+    .wrn-splitter__handle:focus-visible {
       outline: 2px solid var(--splitter-accent);
       outline-offset: -2px;
-      border-radius: var(--wire-radius-sm);
+      border-radius: var(--wrn-radius-sm);
     }
 
     /*
@@ -211,13 +211,13 @@ component LayoutSplitter {
      * no longer has a second track to trade against.
      */
     @media (max-width: 639px) {
-      .wire-splitter,
-      .wire-splitter[data-orientation="vertical"] {
+      .wrn-splitter,
+      .wrn-splitter[data-orientation="vertical"] {
         grid-template-columns: minmax(0, 1fr);
         grid-template-rows: auto auto auto;
       }
 
-      .wire-splitter__handle {
+      .wrn-splitter__handle {
         cursor: default;
       }
     }