refactor: migrate legacy wire namespace to wrn

.publish/ui/components/tooltip.wrn

@@ -77,8 +77,8 @@ id: string = ""
       data-color='{color}'
       data-variant='{variant}'
       data-interactive='{interactive ? "true" : "false"}'
-      class='wire-tooltip {class}'
-      style='--wire-tooltip-max-width:{maxWidth};--wire-tooltip-offset:{offset}px;'
+      class='wrn-tooltip {class}'
+      style='--wrn-tooltip-max-width:{maxWidth};--wrn-tooltip-offset:{offset}px;'
       @mouseenter='if (trigger === "hover" || trigger === "both") { showTooltip("hover", event) }'
       @mouseleave='if (trigger === "hover" || trigger === "both") { hideTooltip("hover", event) }'
       @focusin='if (trigger === "focus" || trigger === "hover" || trigger === "both") { showTooltip("focus", event) }'
@@ -86,7 +86,7 @@ id: string = ""
       @keydown='handleKeydown(event)'
     >
       <span
-        class="wire-tooltip__trigger"
+        class="wrn-tooltip__trigger"
         tabindex='{disabled ? "-1" : "0"}'
         aria-describedby='{(open || visible) && id ? id : ""}'
         @click='if (trigger === "click" || trigger === "both") { toggleTooltip(event) }'
@@ -96,13 +96,13 @@ id: string = ""
 
       <span
         id='{id}'
-        class="wire-tooltip__content"
+        class="wrn-tooltip__content"
         data-wrn-anchored="true"
         data-show='{open || visible}'
         role="tooltip"
       >
         {#if showArrow}
-          <span class="wire-tooltip__arrow" data-wrn-anchor-arrow="true" aria-hidden="true"></span>
+          <span class="wrn-tooltip__arrow" data-wrn-anchor-arrow="true" aria-hidden="true"></span>
         {/if}
 
         {#if title}
@@ -110,9 +110,9 @@ id: string = ""
         {/if}
 
         {#if description}
-          <span class="wire-tooltip__description">{description}</span>
+          <span class="wrn-tooltip__description">{description}</span>
         {:else if content}
-          <span class="wire-tooltip__description">{content}</span>
+          <span class="wrn-tooltip__description">{content}</span>
         {/if}
 
         <slot></slot>
@@ -121,60 +121,60 @@ id: string = ""
   }
 
   style {
-    .wire-tooltip {
-      --tooltip-accent: var(--wire-color-primary);
-      --tooltip-soft: var(--wire-color-primary-soft);
+    .wrn-tooltip {
+      --tooltip-accent: var(--wrn-color-primary);
+      --tooltip-soft: var(--wrn-color-primary-soft);
       position: relative;
       display: inline-flex;
       max-width: 100%;
     }
 
-    .wire-tooltip[data-color="secondary"] {
-      --tooltip-accent: var(--wire-color-secondary);
-      --tooltip-soft: var(--wire-color-secondary-soft);
+    .wrn-tooltip[data-color="secondary"] {
+      --tooltip-accent: var(--wrn-color-secondary);
+      --tooltip-soft: var(--wrn-color-secondary-soft);
     }
 
-    .wire-tooltip[data-color="info"] {
-      --tooltip-accent: var(--wire-color-info);
-      --tooltip-soft: var(--wire-color-info-soft);
+    .wrn-tooltip[data-color="info"] {
+      --tooltip-accent: var(--wrn-color-info);
+      --tooltip-soft: var(--wrn-color-info-soft);
     }
 
-    .wire-tooltip[data-color="success"] {
-      --tooltip-accent: var(--wire-color-success);
-      --tooltip-soft: var(--wire-color-success-soft);
+    .wrn-tooltip[data-color="success"] {
+      --tooltip-accent: var(--wrn-color-success);
+      --tooltip-soft: var(--wrn-color-success-soft);
     }
 
-    .wire-tooltip[data-color="warning"] {
-      --tooltip-accent: var(--wire-color-warning);
-      --tooltip-soft: var(--wire-color-warning-soft);
+    .wrn-tooltip[data-color="warning"] {
+      --tooltip-accent: var(--wrn-color-warning);
+      --tooltip-soft: var(--wrn-color-warning-soft);
     }
 
-    .wire-tooltip[data-color="danger"] {
-      --tooltip-accent: var(--wire-color-danger);
-      --tooltip-soft: var(--wire-color-danger-soft);
+    .wrn-tooltip[data-color="danger"] {
+      --tooltip-accent: var(--wrn-color-danger);
+      --tooltip-soft: var(--wrn-color-danger-soft);
     }
 
-    .wire-tooltip__trigger {
+    .wrn-tooltip__trigger {
       display: inline-flex;
       max-width: 100%;
       outline: none;
     }
 
-    .wire-tooltip__trigger:focus-visible {
+    .wrn-tooltip__trigger:focus-visible {
       border-radius: 0.4rem;
-      outline: 2px solid var(--wire-color-focus);
+      outline: 2px solid var(--wrn-color-focus);
       outline-offset: 3px;
     }
 
-    .wire-tooltip__content {
+    .wrn-tooltip__content {
       position: absolute;
       z-index: 1300;
       left: 50%;
-      bottom: calc(100% + var(--wire-tooltip-offset));
+      bottom: calc(100% + var(--wrn-tooltip-offset));
       display: grid;
       gap: 0.22rem;
       width: max-content;
-      max-width: min(var(--wire-tooltip-max-width), calc(100vw - 1rem));
+      max-width: min(var(--wrn-tooltip-max-width), calc(100vw - 1rem));
       padding: 0.58rem 0.72rem;
       color: white;
       background: color-mix(in srgb, black 88%, var(--tooltip-accent) 12%);
@@ -188,38 +188,38 @@ id: string = ""
       pointer-events: none;
     }
 
-    .wire-tooltip[data-interactive="true"] .wire-tooltip__content {
+    .wrn-tooltip[data-interactive="true"] .wrn-tooltip__content {
       pointer-events: auto;
     }
 
-    .wire-tooltip[data-variant="soft"] .wire-tooltip__content {
-      color: var(--wire-color-text);
+    .wrn-tooltip[data-variant="soft"] .wrn-tooltip__content {
+      color: var(--wrn-color-text);
       background: var(--tooltip-soft);
-      border-color: color-mix(in srgb, var(--tooltip-accent) 24%, var(--wire-color-border));
+      border-color: color-mix(in srgb, var(--tooltip-accent) 24%, var(--wrn-color-border));
     }
 
-    .wire-tooltip[data-variant="light"] .wire-tooltip__content {
-      color: var(--wire-color-text);
-      background: var(--wire-color-surface-raised);
-      border-color: var(--wire-color-border);
+    .wrn-tooltip[data-variant="light"] .wrn-tooltip__content {
+      color: var(--wrn-color-text);
+      background: var(--wrn-color-surface-raised);
+      border-color: var(--wrn-color-border);
     }
 
-    .wire-tooltip[data-variant="solid"] .wire-tooltip__content {
-      color: var(--wire-color-primary-contrast);
+    .wrn-tooltip[data-variant="solid"] .wrn-tooltip__content {
+      color: var(--wrn-color-primary-contrast);
       background: var(--tooltip-accent);
       border-color: color-mix(in srgb, white 18%, transparent);
     }
 
-    .wire-tooltip__content strong {
+    .wrn-tooltip__content strong {
       font-size: 0.75rem;
       font-weight: 650;
     }
 
-    .wire-tooltip__description {
+    .wrn-tooltip__description {
       color: color-mix(in srgb, currentColor 82%, transparent);
     }
 
-    .wire-tooltip__arrow {
+    .wrn-tooltip__arrow {
       position: absolute;
       left: 50%;
       bottom: -0.32rem;
@@ -231,26 +231,26 @@ id: string = ""
       transform: translateX(-50%) rotate(45deg);
     }
 
-    .wire-tooltip[data-placement="bottom"] .wire-tooltip__content {
-      top: calc(100% + var(--wire-tooltip-offset));
+    .wrn-tooltip[data-placement="bottom"] .wrn-tooltip__content {
+      top: calc(100% + var(--wrn-tooltip-offset));
       bottom: auto;
     }
 
-    .wire-tooltip[data-placement="bottom"] .wire-tooltip__arrow {
+    .wrn-tooltip[data-placement="bottom"] .wrn-tooltip__arrow {
       top: -0.32rem;
       bottom: auto;
       transform: translateX(-50%) rotate(225deg);
     }
 
-    .wire-tooltip[data-placement="left"] .wire-tooltip__content {
+    .wrn-tooltip[data-placement="left"] .wrn-tooltip__content {
       top: 50%;
-      right: calc(100% + var(--wire-tooltip-offset));
+      right: calc(100% + var(--wrn-tooltip-offset));
       bottom: auto;
       left: auto;
       transform: translateY(-50%);
     }
 
-    .wire-tooltip[data-placement="left"] .wire-tooltip__arrow {
+    .wrn-tooltip[data-placement="left"] .wrn-tooltip__arrow {
       top: 50%;
       right: -0.32rem;
       bottom: auto;
@@ -258,66 +258,66 @@ id: string = ""
       transform: translateY(-50%) rotate(-45deg);
     }
 
-    .wire-tooltip[data-placement="right"] .wire-tooltip__content {
+    .wrn-tooltip[data-placement="right"] .wrn-tooltip__content {
       top: 50%;
       bottom: auto;
-      left: calc(100% + var(--wire-tooltip-offset));
+      left: calc(100% + var(--wrn-tooltip-offset));
       transform: translateY(-50%);
     }
 
-    .wire-tooltip[data-placement="right"] .wire-tooltip__arrow {
+    .wrn-tooltip[data-placement="right"] .wrn-tooltip__arrow {
       top: 50%;
       bottom: auto;
       left: -0.32rem;
       transform: translateY(-50%) rotate(135deg);
     }
 
-    .wire-tooltip[data-placement="top-start"] .wire-tooltip__content,
-    .wire-tooltip[data-placement="bottom-start"] .wire-tooltip__content {
+    .wrn-tooltip[data-placement="top-start"] .wrn-tooltip__content,
+    .wrn-tooltip[data-placement="bottom-start"] .wrn-tooltip__content {
       left: 0;
       transform: none;
     }
 
-    .wire-tooltip[data-placement="top-start"] .wire-tooltip__arrow,
-    .wire-tooltip[data-placement="bottom-start"] .wire-tooltip__arrow {
+    .wrn-tooltip[data-placement="top-start"] .wrn-tooltip__arrow,
+    .wrn-tooltip[data-placement="bottom-start"] .wrn-tooltip__arrow {
       left: 1rem;
       transform: rotate(45deg);
     }
 
-    .wire-tooltip[data-placement="bottom-start"] .wire-tooltip__arrow {
+    .wrn-tooltip[data-placement="bottom-start"] .wrn-tooltip__arrow {
       transform: rotate(225deg);
     }
 
-    .wire-tooltip[data-placement="top-end"] .wire-tooltip__content,
-    .wire-tooltip[data-placement="bottom-end"] .wire-tooltip__content {
+    .wrn-tooltip[data-placement="top-end"] .wrn-tooltip__content,
+    .wrn-tooltip[data-placement="bottom-end"] .wrn-tooltip__content {
       right: 0;
       left: auto;
       transform: none;
     }
 
-    .wire-tooltip[data-placement="top-end"] .wire-tooltip__arrow,
-    .wire-tooltip[data-placement="bottom-end"] .wire-tooltip__arrow {
+    .wrn-tooltip[data-placement="top-end"] .wrn-tooltip__arrow,
+    .wrn-tooltip[data-placement="bottom-end"] .wrn-tooltip__arrow {
       right: 1rem;
       left: auto;
       transform: rotate(45deg);
     }
 
-    .wire-tooltip[data-placement="bottom-end"] .wire-tooltip__arrow {
+    .wrn-tooltip[data-placement="bottom-end"] .wrn-tooltip__arrow {
       transform: rotate(225deg);
     }
 
-    .wire-tooltip[data-size="sm"] .wire-tooltip__content {
+    .wrn-tooltip[data-size="sm"] .wrn-tooltip__content {
       padding: 0.45rem 0.58rem;
       font-size: 0.68rem;
     }
 
-    .wire-tooltip[data-size="lg"] .wire-tooltip__content {
+    .wrn-tooltip[data-size="lg"] .wrn-tooltip__content {
       padding: 0.72rem 0.85rem;
       font-size: 0.8rem;
     }
 
     @media (max-width: 639px) {
-      .wire-tooltip__content {
+      .wrn-tooltip__content {
         position: fixed;
         right: 0.75rem;
         bottom: 0.75rem;
@@ -328,7 +328,7 @@ id: string = ""
         transform: none;
       }
 
-      .wire-tooltip__arrow {
+      .wrn-tooltip__arrow {
         display: none;
       }
     }