refactor: migrate legacy wire namespace to wrn

packages/ui/components/AnnouncementBar.wrn

@@ -41,28 +41,28 @@ badge: string = ""
       aria-hidden='{dismissed ? "true" : "false"}'
       role='{role}'
       aria-live='{live}'
-      class='wire-announcement {class}'
+      class='wrn-announcement {class}'
     >
-      <div class="wire-announcement__surface">
+      <div class="wrn-announcement__surface">
         <span
-          class="wire-announcement__accent"
+          class="wrn-announcement__accent"
           aria-hidden="true"
         ></span>
 
         <span
-          class="wire-announcement__glow wire-announcement__glow--one"
+          class="wrn-announcement__glow wrn-announcement__glow--one"
           aria-hidden="true"
         ></span>
 
         <span
-          class="wire-announcement__glow wire-announcement__glow--two"
+          class="wrn-announcement__glow wrn-announcement__glow--two"
           aria-hidden="true"
         ></span>
 
-        <div class="wire-announcement__inner">
-          <div class="wire-announcement__content">
+        <div class="wrn-announcement__inner">
+          <div class="wrn-announcement__content">
             {#if icon}
-              <span class="wire-announcement__icon">
+              <span class="wrn-announcement__icon">
                 <span
                   class='{icon}'
                   aria-hidden="true"
@@ -70,10 +70,10 @@ badge: string = ""
               </span>
             {/if}
 
-            <div class="wire-announcement__copy">
-              <div class="wire-announcement__headline">
+            <div class="wrn-announcement__copy">
+              <div class="wrn-announcement__headline">
                 {#if badge}
-                  <span class="wire-announcement__badge">
+                  <span class="wrn-announcement__badge">
                     {#if badgeIcon}
                       <span
                         class='{badgeIcon}'
@@ -85,13 +85,13 @@ badge: string = ""
                   </span>
                 {/if}
 
-                <p class="wire-announcement__message">
+                <p class="wrn-announcement__message">
                   {message}
                 </p>
               </div>
 
               {#if description && !compact}
-                <p class="wire-announcement__description">
+                <p class="wrn-announcement__description">
                   {description}
                 </p>
               {/if}
@@ -99,11 +99,11 @@ badge: string = ""
           </div>
 
           {#if actionLabel || dismissible}
-            <div class="wire-announcement__actions">
+            <div class="wrn-announcement__actions">
               {#if actionLabel}
                 <a
                   href='{actionHref || "#"}'
-                  class="wire-announcement__action"
+                  class="wrn-announcement__action"
                 >
                   <span>{actionLabel}</span>
 
@@ -126,7 +126,7 @@ badge: string = ""
                   type="button"
                   aria-label='{dismissLabel}'
                   title='{dismissLabel}'
-                  class="wire-announcement__dismiss"
+                  class="wrn-announcement__dismiss"
                   @click='dismissed = true; output.dismiss({ message: message })'
                 >
                   <span
@@ -143,11 +143,11 @@ badge: string = ""
   }
 
   style {
-    .wire-announcement {
-      --announcement-accent: var(--wire-color-primary);
-      --announcement-contrast: var(--wire-color-primary-contrast, #ffffff);
-      --announcement-soft: var(--wire-color-primary-soft);
-      --announcement-muted: var(--wire-color-primary-muted);
+    .wrn-announcement {
+      --announcement-accent: var(--wrn-color-primary);
+      --announcement-contrast: var(--wrn-color-primary-contrast, #ffffff);
+      --announcement-soft: var(--wrn-color-primary-soft);
+      --announcement-muted: var(--wrn-color-primary-muted);
 
       position: relative;
       z-index: 40;
@@ -155,19 +155,19 @@ badge: string = ""
       width: 100vw;
       max-width: 100vw;
       margin-inline: calc(50% - 50vw);
-      color: var(--wire-color-text);
+      color: var(--wrn-color-text);
     }
 
-    .wire-announcement__surface {
+    .wrn-announcement__surface {
       width: min(calc(100% - 2rem), 72rem);
       margin-inline: auto;
     }
 
-    .wire-announcement[data-width="wide"] .wire-announcement__surface {
+    .wrn-announcement[data-width="wide"] .wrn-announcement__surface {
       width: min(calc(100% - 2rem), 90rem);
     }
 
-    .wire-announcement[data-width="full"] .wire-announcement__surface {
+    .wrn-announcement[data-width="full"] .wrn-announcement__surface {
       width: 100%;
       max-width: none;
       margin-inline: 0;
@@ -175,86 +175,86 @@ badge: string = ""
       border-radius: 0;
     }
 
-    .wire-announcement[data-sticky="true"] {
+    .wrn-announcement[data-sticky="true"] {
       position: sticky;
       top: 0;
     }
 
-    .wire-announcement[data-color="secondary"] {
-      --announcement-accent: var(--wire-color-secondary);
-      --announcement-contrast: var(--wire-color-secondary-contrast, #ffffff);
-      --announcement-soft: var(--wire-color-secondary-soft);
-      --announcement-muted: var(--wire-color-secondary-muted);
+    .wrn-announcement[data-color="secondary"] {
+      --announcement-accent: var(--wrn-color-secondary);
+      --announcement-contrast: var(--wrn-color-secondary-contrast, #ffffff);
+      --announcement-soft: var(--wrn-color-secondary-soft);
+      --announcement-muted: var(--wrn-color-secondary-muted);
     }
 
-    .wire-announcement[data-color="info"] {
-      --announcement-accent: var(--wire-color-info);
-      --announcement-contrast: var(--wire-color-info-contrast, #ffffff);
-      --announcement-soft: var(--wire-color-info-soft);
-      --announcement-muted: var(--wire-color-info-muted);
+    .wrn-announcement[data-color="info"] {
+      --announcement-accent: var(--wrn-color-info);
+      --announcement-contrast: var(--wrn-color-info-contrast, #ffffff);
+      --announcement-soft: var(--wrn-color-info-soft);
+      --announcement-muted: var(--wrn-color-info-muted);
     }
 
-    .wire-announcement[data-color="success"] {
-      --announcement-accent: var(--wire-color-success);
-      --announcement-contrast: var(--wire-color-success-contrast, #ffffff);
-      --announcement-soft: var(--wire-color-success-soft);
-      --announcement-muted: var(--wire-color-success-muted);
+    .wrn-announcement[data-color="success"] {
+      --announcement-accent: var(--wrn-color-success);
+      --announcement-contrast: var(--wrn-color-success-contrast, #ffffff);
+      --announcement-soft: var(--wrn-color-success-soft);
+      --announcement-muted: var(--wrn-color-success-muted);
     }
 
-    .wire-announcement[data-color="warning"] {
-      --announcement-accent: var(--wire-color-warning);
-      --announcement-contrast: var(--wire-color-warning-contrast, #111827);
-      --announcement-soft: var(--wire-color-warning-soft);
-      --announcement-muted: var(--wire-color-warning-muted);
+    .wrn-announcement[data-color="warning"] {
+      --announcement-accent: var(--wrn-color-warning);
+      --announcement-contrast: var(--wrn-color-warning-contrast, #111827);
+      --announcement-soft: var(--wrn-color-warning-soft);
+      --announcement-muted: var(--wrn-color-warning-muted);
     }
 
-    .wire-announcement[data-color="danger"] {
-      --announcement-accent: var(--wire-color-danger);
-      --announcement-contrast: var(--wire-color-danger-contrast, #ffffff);
-      --announcement-soft: var(--wire-color-danger-soft);
-      --announcement-muted: var(--wire-color-danger-muted);
+    .wrn-announcement[data-color="danger"] {
+      --announcement-accent: var(--wrn-color-danger);
+      --announcement-contrast: var(--wrn-color-danger-contrast, #ffffff);
+      --announcement-soft: var(--wrn-color-danger-soft);
+      --announcement-muted: var(--wrn-color-danger-muted);
     }
 
-    .wire-announcement__surface {
+    .wrn-announcement__surface {
       position: relative;
       isolation: isolate;
       overflow: hidden;
-      background: var(--wire-color-surface-raised);
-      border: 1px solid var(--wire-color-border);
+      background: var(--wrn-color-surface-raised);
+      border: 1px solid var(--wrn-color-border);
       border-radius: 1.25rem;
       box-shadow:
         0 1px 2px rgb(0 0 0 / 0.04),
         0 12px 32px rgb(0 0 0 / 0.08);
     }
 
-    .wire-announcement[data-variant="soft"] .wire-announcement__surface {
+    .wrn-announcement[data-variant="soft"] .wrn-announcement__surface {
       background:
         linear-gradient(
           135deg,
-          color-mix(in srgb, var(--announcement-soft) 86%, var(--wire-color-surface-raised)),
-          var(--wire-color-surface-raised)
+          color-mix(in srgb, var(--announcement-soft) 86%, var(--wrn-color-surface-raised)),
+          var(--wrn-color-surface-raised)
         );
-      border-color: color-mix(in srgb, var(--announcement-accent) 28%, var(--wire-color-border));
+      border-color: color-mix(in srgb, var(--announcement-accent) 28%, var(--wrn-color-border));
     }
 
-    .wire-announcement[data-variant="outline"] .wire-announcement__surface {
+    .wrn-announcement[data-variant="outline"] .wrn-announcement__surface {
       background: transparent;
-      border-color: color-mix(in srgb, var(--announcement-accent) 46%, var(--wire-color-border));
+      border-color: color-mix(in srgb, var(--announcement-accent) 46%, var(--wrn-color-border));
       box-shadow: none;
     }
 
-    .wire-announcement[data-variant="minimal"] .wire-announcement__surface {
+    .wrn-announcement[data-variant="minimal"] .wrn-announcement__surface {
       background: transparent;
       border-color: transparent;
       border-radius: 0;
       box-shadow: none;
     }
 
-    .wire-announcement[data-variant="solid"] {
+    .wrn-announcement[data-variant="solid"] {
       color: var(--announcement-contrast);
     }
 
-    .wire-announcement[data-variant="solid"] .wire-announcement__surface {
+    .wrn-announcement[data-variant="solid"] .wrn-announcement__surface {
       background:
         radial-gradient(
           circle at 8% 15%,
@@ -272,7 +272,7 @@ badge: string = ""
         0 18px 46px color-mix(in srgb, var(--announcement-accent) 30%, transparent);
     }
 
-    .wire-announcement__accent {
+    .wrn-announcement__accent {
       position: absolute;
       z-index: -1;
       inset-block: 0;
@@ -281,12 +281,12 @@ badge: string = ""
       background: var(--announcement-accent);
     }
 
-    .wire-announcement[data-variant="solid"] .wire-announcement__accent,
-    .wire-announcement[data-variant="minimal"] .wire-announcement__accent {
+    .wrn-announcement[data-variant="solid"] .wrn-announcement__accent,
+    .wrn-announcement[data-variant="minimal"] .wrn-announcement__accent {
       display: none;
     }
 
-    .wire-announcement__glow {
+    .wrn-announcement__glow {
       position: absolute;
       z-index: -1;
       display: block;
@@ -296,7 +296,7 @@ badge: string = ""
       opacity: 0.28;
     }
 
-    .wire-announcement__glow--one {
+    .wrn-announcement__glow--one {
       width: 16rem;
       height: 16rem;
       inset-block-start: -10rem;
@@ -304,7 +304,7 @@ badge: string = ""
       background: var(--announcement-muted);
     }
 
-    .wire-announcement__glow--two {
+    .wrn-announcement__glow--two {
       width: 10rem;
       height: 10rem;
       inset-block-end: -7rem;
@@ -313,16 +313,16 @@ badge: string = ""
       opacity: 0.18;
     }
 
-    .wire-announcement[data-variant="solid"] .wire-announcement__glow {
+    .wrn-announcement[data-variant="solid"] .wrn-announcement__glow {
       background: var(--announcement-contrast);
       opacity: 0.1;
     }
 
-    .wire-announcement[data-variant="minimal"] .wire-announcement__glow {
+    .wrn-announcement[data-variant="minimal"] .wrn-announcement__glow {
       display: none;
     }
 
-    .wire-announcement__inner {
+    .wrn-announcement__inner {
       position: relative;
       display: flex;
       flex-direction: column;
@@ -331,23 +331,23 @@ badge: string = ""
       padding: 1rem 1.125rem;
     }
 
-    .wire-announcement[data-size="sm"] .wire-announcement__inner,
-    .wire-announcement[data-compact="true"] .wire-announcement__inner {
+    .wrn-announcement[data-size="sm"] .wrn-announcement__inner,
+    .wrn-announcement[data-compact="true"] .wrn-announcement__inner {
       padding-block: 0.75rem;
     }
 
-    .wire-announcement[data-size="lg"] .wire-announcement__inner {
+    .wrn-announcement[data-size="lg"] .wrn-announcement__inner {
       padding: 1.25rem 1.5rem;
     }
 
-    .wire-announcement__content {
+    .wrn-announcement__content {
       display: flex;
       align-items: flex-start;
       gap: 0.875rem;
       min-width: 0;
     }
 
-    .wire-announcement__icon {
+    .wrn-announcement__icon {
       display: inline-flex;
       flex: 0 0 auto;
       align-items: center;
@@ -361,44 +361,44 @@ badge: string = ""
       box-shadow: 0 8px 20px color-mix(in srgb, var(--announcement-accent) 12%, transparent);
     }
 
-    .wire-announcement__icon > span {
+    .wrn-announcement__icon > span {
       width: 1.2rem;
       height: 1.2rem;
     }
 
-    .wire-announcement[data-size="sm"] .wire-announcement__icon,
-    .wire-announcement[data-compact="true"] .wire-announcement__icon {
+    .wrn-announcement[data-size="sm"] .wrn-announcement__icon,
+    .wrn-announcement[data-compact="true"] .wrn-announcement__icon {
       width: 2.35rem;
       height: 2.35rem;
       border-radius: 0.75rem;
     }
 
-    .wire-announcement[data-size="lg"] .wire-announcement__icon {
+    .wrn-announcement[data-size="lg"] .wrn-announcement__icon {
       width: 3.15rem;
       height: 3.15rem;
     }
 
-    .wire-announcement[data-variant="solid"] .wire-announcement__icon {
+    .wrn-announcement[data-variant="solid"] .wrn-announcement__icon {
       color: var(--announcement-contrast);
       background: color-mix(in srgb, var(--announcement-contrast) 12%, transparent);
       border-color: color-mix(in srgb, var(--announcement-contrast) 22%, transparent);
       box-shadow: none;
     }
 
-    .wire-announcement__copy {
+    .wrn-announcement__copy {
       flex: 1 1 auto;
       min-width: 0;
       padding-top: 0.1rem;
     }
 
-    .wire-announcement__headline {
+    .wrn-announcement__headline {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 0.55rem 0.8rem;
     }
 
-    .wire-announcement__badge {
+    .wrn-announcement__badge {
       display: inline-flex;
       flex: 0 0 auto;
       align-items: center;
@@ -415,55 +415,55 @@ badge: string = ""
       border-radius: 999px;
     }
 
-    .wire-announcement__badge > span:first-child:not(:last-child) {
+    .wrn-announcement__badge > span:first-child:not(:last-child) {
       width: 0.8rem;
       height: 0.8rem;
     }
 
-    .wire-announcement[data-variant="solid"] .wire-announcement__badge {
+    .wrn-announcement[data-variant="solid"] .wrn-announcement__badge {
       color: var(--announcement-contrast);
       background: color-mix(in srgb, var(--announcement-contrast) 13%, transparent);
       border-color: color-mix(in srgb, var(--announcement-contrast) 24%, transparent);
     }
 
-    .wire-announcement__message {
+    .wrn-announcement__message {
       margin: 0;
-      color: var(--wire-color-text);
+      color: var(--wrn-color-text);
       font-size: 0.9375rem;
       font-weight: 650;
       line-height: 1.5;
     }
 
-    .wire-announcement[data-size="sm"] .wire-announcement__message,
-    .wire-announcement[data-compact="true"] .wire-announcement__message {
+    .wrn-announcement[data-size="sm"] .wrn-announcement__message,
+    .wrn-announcement[data-compact="true"] .wrn-announcement__message {
       font-size: 0.875rem;
     }
 
-    .wire-announcement[data-size="lg"] .wire-announcement__message {
+    .wrn-announcement[data-size="lg"] .wrn-announcement__message {
       font-size: 1rem;
     }
 
-    .wire-announcement[data-variant="solid"] .wire-announcement__message {
+    .wrn-announcement[data-variant="solid"] .wrn-announcement__message {
       color: var(--announcement-contrast);
     }
 
-    .wire-announcement__description {
+    .wrn-announcement__description {
       max-width: 52rem;
       margin: 0.28rem 0 0;
-      color: var(--wire-color-text-muted);
+      color: var(--wrn-color-text-muted);
       font-size: 0.8125rem;
       line-height: 1.55;
     }
 
-    .wire-announcement[data-size="lg"] .wire-announcement__description {
+    .wrn-announcement[data-size="lg"] .wrn-announcement__description {
       font-size: 0.875rem;
     }
 
-    .wire-announcement[data-variant="solid"] .wire-announcement__description {
+    .wrn-announcement[data-variant="solid"] .wrn-announcement__description {
       color: color-mix(in srgb, var(--announcement-contrast) 76%, transparent);
     }
 
-    .wire-announcement__actions {
+    .wrn-announcement__actions {
       display: flex;
       flex: 0 0 auto;
       align-items: center;
@@ -471,18 +471,18 @@ badge: string = ""
       padding-inline-start: 3.625rem;
     }
 
-    .wire-announcement__action,
-    .wire-announcement__dismiss {
+    .wrn-announcement__action,
+    .wrn-announcement__dismiss {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-height: 2.5rem;
-      color: var(--wire-color-text);
+      color: var(--wrn-color-text);
       font-size: 0.8125rem;
       font-weight: 650;
       text-decoration: none;
-      background: var(--wire-color-surface-raised);
-      border: 1px solid var(--wire-color-border);
+      background: var(--wrn-color-surface-raised);
+      border: 1px solid var(--wrn-color-border);
       border-radius: 0.75rem;
       box-shadow: 0 5px 14px rgb(0 0 0 / 0.06);
       transition:
@@ -492,125 +492,125 @@ badge: string = ""
         box-shadow 160ms ease;
     }
 
-    .wire-announcement__action {
+    .wrn-announcement__action {
       gap: 0.45rem;
       padding: 0.55rem 0.9rem;
     }
 
-    .wire-announcement__action > span:last-child {
+    .wrn-announcement__action > span:last-child {
       width: 0.95rem;
       height: 0.95rem;
       transition: transform 160ms ease;
     }
 
-    .wire-announcement__dismiss {
+    .wrn-announcement__dismiss {
       width: 2.5rem;
       padding: 0;
       cursor: pointer;
     }
 
-    .wire-announcement__dismiss > span {
+    .wrn-announcement__dismiss > span {
       width: 1rem;
       height: 1rem;
     }
 
-    .wire-announcement__action:hover,
-    .wire-announcement__dismiss:hover {
+    .wrn-announcement__action:hover,
+    .wrn-announcement__dismiss:hover {
       transform: translateY(-1px);
-      border-color: color-mix(in srgb, var(--announcement-accent) 42%, var(--wire-color-border));
+      border-color: color-mix(in srgb, var(--announcement-accent) 42%, var(--wrn-color-border));
       box-shadow: 0 8px 20px rgb(0 0 0 / 0.1);
     }
 
-    .wire-announcement__action:hover > span:last-child {
+    .wrn-announcement__action:hover > span:last-child {
       transform: translateX(0.16rem);
     }
 
-    .wire-announcement__action:focus-visible,
-    .wire-announcement__dismiss:focus-visible {
-      outline: 2px solid var(--wire-color-focus, var(--announcement-accent));
+    .wrn-announcement__action:focus-visible,
+    .wrn-announcement__dismiss:focus-visible {
+      outline: 2px solid var(--wrn-color-focus, var(--announcement-accent));
       outline-offset: 3px;
     }
 
-    .wire-announcement[data-variant="solid"] .wire-announcement__action {
+    .wrn-announcement[data-variant="solid"] .wrn-announcement__action {
       color: var(--announcement-accent);
       background: var(--announcement-contrast);
       border-color: transparent;
       box-shadow: 0 8px 22px color-mix(in srgb, black 18%, transparent);
     }
 
-    .wire-announcement[data-variant="solid"] .wire-announcement__dismiss {
+    .wrn-announcement[data-variant="solid"] .wrn-announcement__dismiss {
       color: var(--announcement-contrast);
       background: color-mix(in srgb, var(--announcement-contrast) 13%, transparent);
       border-color: color-mix(in srgb, var(--announcement-contrast) 24%, transparent);
       box-shadow: none;
     }
 
-    .wire-announcement[data-variant="solid"] .wire-announcement__action:hover {
+    .wrn-announcement[data-variant="solid"] .wrn-announcement__action:hover {
       background: color-mix(in srgb, var(--announcement-contrast) 92%, transparent);
     }
 
-    .wire-announcement[data-variant="solid"] .wire-announcement__dismiss:hover {
+    .wrn-announcement[data-variant="solid"] .wrn-announcement__dismiss:hover {
       background: color-mix(in srgb, var(--announcement-contrast) 20%, transparent);
       border-color: color-mix(in srgb, var(--announcement-contrast) 34%, transparent);
     }
 
     @media (min-width: 768px) {
-      .wire-announcement__inner {
+      .wrn-announcement__inner {
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         gap: 1.5rem;
       }
 
-      .wire-announcement__content {
+      .wrn-announcement__content {
         flex: 1 1 auto;
       }
 
-      .wire-announcement__actions {
+      .wrn-announcement__actions {
         justify-content: flex-end;
         padding-inline-start: 0;
       }
     }
 
     @media (max-width: 639px) {
-      .wire-announcement__surface,
-      .wire-announcement[data-width="wide"] .wire-announcement__surface {
+      .wrn-announcement__surface,
+      .wrn-announcement[data-width="wide"] .wrn-announcement__surface {
         width: calc(100% - 1rem);
       }
 
-      .wire-announcement[data-width="full"] .wire-announcement__surface {
+      .wrn-announcement[data-width="full"] .wrn-announcement__surface {
         width: 100%;
         border-radius: 0;
       }
 
-      .wire-announcement__surface {
+      .wrn-announcement__surface {
         border-radius: 1rem;
       }
 
-      .wire-announcement__inner {
+      .wrn-announcement__inner {
         padding-inline: 0.9rem;
       }
 
-      .wire-announcement__actions {
+      .wrn-announcement__actions {
         width: 100%;
         padding-inline-start: 3.625rem;
       }
 
-      .wire-announcement__action {
+      .wrn-announcement__action {
         flex: 1 1 auto;
       }
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .wire-announcement__action,
-      .wire-announcement__dismiss,
-      .wire-announcement__action > span:last-child {
+      .wrn-announcement__action,
+      .wrn-announcement__dismiss,
+      .wrn-announcement__action > span:last-child {
         transition: none;
       }
 
-      .wire-announcement__action:hover,
-      .wire-announcement__dismiss:hover,
-      .wire-announcement__action:hover > span:last-child {
+      .wrn-announcement__action:hover,
+      .wrn-announcement__dismiss:hover,
+      .wrn-announcement__action:hover > span:last-child {
         transform: none;
       }
     }