refactor: migrate legacy wire namespace to wrn

.publish/ui/components/Drawer.wrn

@@ -80,14 +80,14 @@ open: boolean = false
       data-variant='{variant}'
       data-overlay='{overlay ? "true" : "false"}'
       data-scrollable='{scrollable ? "true" : "false"}'
-      class='wire-drawer {class}'
+      class='wrn-drawer {class}'
       style='--drawer-duration: {duration}ms'
     >
 
       {#if triggerLabel}
         <button
           type="button"
-          class="wire-drawer__trigger"
+          class="wrn-drawer__trigger"
           aria-haspopup="dialog"
           aria-expanded='{open || visible ? "true" : "false"}'
           @click='showDrawer(event)'
@@ -99,40 +99,40 @@ open: boolean = false
         </button>
       {/if}
 
-      <span class="wire-drawer__trigger-slot" @click='showDrawer(event)'>
+      <span class="wrn-drawer__trigger-slot" @click='showDrawer(event)'>
         <slot name="trigger"></slot>
       </span>
 
       <div
-        class="wire-drawer__layer"
+        class="wrn-drawer__layer"
         role="presentation"
         @keydown='handleKeydown(event)'
       >
         {#if overlay}
           <button
             type="button"
-            class="wire-drawer__backdrop"
+            class="wrn-drawer__backdrop"
             aria-label='{closeLabel}'
             @click='if (closeOnBackdrop) { cancelDrawer(event) }'
           ></button>
         {/if}
 
         <section
-          class="wire-drawer__panel"
+          class="wrn-drawer__panel"
           role="dialog"
           aria-modal="true"
           aria-label='{label || title}'
           tabindex="-1"
         >
-          <div class="wire-drawer__handle" aria-hidden="true"></div>
+          <div class="wrn-drawer__handle" aria-hidden="true"></div>
 
-          <header class="wire-drawer__header">
-            <div class="wire-drawer__heading">
+          <header class="wrn-drawer__header">
+            <div class="wrn-drawer__heading">
               {#if icon}
-                <span class='wire-drawer__icon {icon}' aria-hidden="true"></span>
+                <span class='wrn-drawer__icon {icon}' aria-hidden="true"></span>
               {/if}
 
-              <div class="wire-drawer__heading-copy">
+              <div class="wrn-drawer__heading-copy">
                 <slot name="header"></slot>
                 {#if title}
                   <h2>{title}</h2>
@@ -146,7 +146,7 @@ open: boolean = false
             {#if showClose}
               <button
                 type="button"
-                class="wire-drawer__close"
+                class="wrn-drawer__close"
                 aria-label='{closeLabel}'
                 @click='hideDrawer("close-button", event)'
               >
@@ -155,11 +155,11 @@ open: boolean = false
             {/if}
           </header>
 
-          <div class="wire-drawer__body">
+          <div class="wrn-drawer__body">
             <slot></slot>
           </div>
 
-          <footer class="wire-drawer__footer">
+          <footer class="wrn-drawer__footer">
             <slot name="footer"></slot>
           </footer>
         </section>
@@ -168,50 +168,50 @@ open: boolean = false
   }
 
   style {
-    .wire-drawer {
-      --drawer-accent: var(--wire-color-primary);
-      --drawer-soft: var(--wire-color-primary-soft);
+    .wrn-drawer {
+      --drawer-accent: var(--wrn-color-primary);
+      --drawer-soft: var(--wrn-color-primary-soft);
       position: relative;
       display: inline-flex;
     }
 
-    .wire-drawer[data-color="secondary"] {
-      --drawer-accent: var(--wire-color-secondary);
-      --drawer-soft: var(--wire-color-secondary-soft);
+    .wrn-drawer[data-color="secondary"] {
+      --drawer-accent: var(--wrn-color-secondary);
+      --drawer-soft: var(--wrn-color-secondary-soft);
     }
 
-    .wire-drawer[data-color="info"] {
-      --drawer-accent: var(--wire-color-info);
-      --drawer-soft: var(--wire-color-info-soft);
+    .wrn-drawer[data-color="info"] {
+      --drawer-accent: var(--wrn-color-info);
+      --drawer-soft: var(--wrn-color-info-soft);
     }
 
-    .wire-drawer[data-color="success"] {
-      --drawer-accent: var(--wire-color-success);
-      --drawer-soft: var(--wire-color-success-soft);
+    .wrn-drawer[data-color="success"] {
+      --drawer-accent: var(--wrn-color-success);
+      --drawer-soft: var(--wrn-color-success-soft);
     }
 
-    .wire-drawer[data-color="warning"] {
-      --drawer-accent: var(--wire-color-warning);
-      --drawer-soft: var(--wire-color-warning-soft);
+    .wrn-drawer[data-color="warning"] {
+      --drawer-accent: var(--wrn-color-warning);
+      --drawer-soft: var(--wrn-color-warning-soft);
     }
 
-    .wire-drawer[data-color="danger"] {
-      --drawer-accent: var(--wire-color-danger);
-      --drawer-soft: var(--wire-color-danger-soft);
+    .wrn-drawer[data-color="danger"] {
+      --drawer-accent: var(--wrn-color-danger);
+      --drawer-soft: var(--wrn-color-danger-soft);
     }
 
-    .wire-drawer__trigger,
-    .wire-drawer__trigger-slot {
+    .wrn-drawer__trigger,
+    .wrn-drawer__trigger-slot {
       display: inline-flex;
       align-items: center;
       gap: 0.55rem;
     }
 
-    .wire-drawer__trigger {
+    .wrn-drawer__trigger {
       appearance: none;
       min-height: 2.55rem;
       padding: 0.65rem 1rem;
-      color: var(--wire-color-primary-contrast);
+      color: var(--wrn-color-primary-contrast);
       background: var(--drawer-accent);
       border: 0;
       border-radius: 0.8rem;
@@ -228,7 +228,7 @@ open: boolean = false
      * delayed by the duration on the way out so the panel can finish sliding
      * before the layer is taken out of the hit-testing tree.
      */
-    .wire-drawer__layer {
+    .wrn-drawer__layer {
       position: fixed;
       inset: 0;
       z-index: 1200;
@@ -241,7 +241,7 @@ open: boolean = false
         visibility 0s linear var(--drawer-duration, 260ms);
     }
 
-    .wire-drawer[data-open="true"] .wire-drawer__layer {
+    .wrn-drawer[data-open="true"] .wrn-drawer__layer {
       visibility: visible;
       opacity: 1;
       transition:
@@ -249,7 +249,7 @@ open: boolean = false
         visibility 0s linear 0s;
     }
 
-    .wire-drawer__backdrop {
+    .wrn-drawer__backdrop {
       position: absolute;
       inset: 0;
       z-index: 0;
@@ -261,11 +261,11 @@ open: boolean = false
       pointer-events: auto;
     }
 
-    .wire-drawer[data-overlay="false"] .wire-drawer__backdrop {
+    .wrn-drawer[data-overlay="false"] .wrn-drawer__backdrop {
       display: none;
     }
 
-    .wire-drawer__panel {
+    .wrn-drawer__panel {
       position: relative;
       z-index: 1;
       display: flex;
@@ -273,15 +273,15 @@ open: boolean = false
       width: min(28rem, calc(100vw - 1rem));
       max-height: 100%;
       margin-left: auto;
-      color: var(--wire-color-text);
+      color: var(--wrn-color-text);
       background:
         radial-gradient(
           circle at 100% 0%,
           color-mix(in srgb, var(--drawer-accent) 8%, transparent),
           transparent 34%
         ),
-        var(--wire-color-surface-raised);
-      border-left: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wire-color-border));
+        var(--wrn-color-surface-raised);
+      border-left: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
       box-shadow: -28px 0 80px color-mix(in srgb, black 28%, transparent);
       pointer-events: auto;
       overflow: hidden;
@@ -290,66 +290,66 @@ open: boolean = false
       transition: transform var(--drawer-duration, 260ms) cubic-bezier(0.32, 0.72, 0, 1);
     }
 
-    .wire-drawer[data-open="true"] .wire-drawer__panel {
+    .wrn-drawer[data-open="true"] .wrn-drawer__panel {
       transform: none;
     }
 
-    .wire-drawer[data-placement="left"] .wire-drawer__panel {
+    .wrn-drawer[data-placement="left"] .wrn-drawer__panel {
       transform: translateX(-100%);
     }
 
-    .wire-drawer[data-placement="top"] .wire-drawer__panel {
+    .wrn-drawer[data-placement="top"] .wrn-drawer__panel {
       transform: translateY(-100%);
     }
 
-    .wire-drawer[data-placement="bottom"] .wire-drawer__panel {
+    .wrn-drawer[data-placement="bottom"] .wrn-drawer__panel {
       transform: translateY(100%);
     }
 
-    .wire-drawer[data-open="true"][data-placement="left"] .wire-drawer__panel,
-    .wire-drawer[data-open="true"][data-placement="top"] .wire-drawer__panel,
-    .wire-drawer[data-open="true"][data-placement="bottom"] .wire-drawer__panel {
+    .wrn-drawer[data-open="true"][data-placement="left"] .wrn-drawer__panel,
+    .wrn-drawer[data-open="true"][data-placement="top"] .wrn-drawer__panel,
+    .wrn-drawer[data-open="true"][data-placement="bottom"] .wrn-drawer__panel {
       transform: none;
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .wire-drawer__layer,
-      .wire-drawer__panel {
+      .wrn-drawer__layer,
+      .wrn-drawer__panel {
         transition: none;
       }
     }
 
-    .wire-drawer[data-size="sm"] .wire-drawer__panel {
+    .wrn-drawer[data-size="sm"] .wrn-drawer__panel {
       width: min(22rem, calc(100vw - 1rem));
     }
 
-    .wire-drawer[data-size="lg"] .wire-drawer__panel {
+    .wrn-drawer[data-size="lg"] .wrn-drawer__panel {
       width: min(38rem, calc(100vw - 1rem));
     }
 
-    .wire-drawer[data-size="xl"] .wire-drawer__panel {
+    .wrn-drawer[data-size="xl"] .wrn-drawer__panel {
       width: min(52rem, calc(100vw - 1rem));
     }
 
-    .wire-drawer[data-size="full"] .wire-drawer__panel {
+    .wrn-drawer[data-size="full"] .wrn-drawer__panel {
       width: 100vw;
     }
 
-    .wire-drawer[data-placement="left"] .wire-drawer__panel {
+    .wrn-drawer[data-placement="left"] .wrn-drawer__panel {
       margin-right: auto;
       margin-left: 0;
-      border-right: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wire-color-border));
+      border-right: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
       border-left: 0;
       box-shadow: 28px 0 80px color-mix(in srgb, black 28%, transparent);
     }
 
-    .wire-drawer[data-placement="top"] .wire-drawer__layer,
-    .wire-drawer[data-placement="bottom"] .wire-drawer__layer {
+    .wrn-drawer[data-placement="top"] .wrn-drawer__layer,
+    .wrn-drawer[data-placement="bottom"] .wrn-drawer__layer {
       align-items: flex-start;
     }
 
-    .wire-drawer[data-placement="top"] .wire-drawer__panel,
-    .wire-drawer[data-placement="bottom"] .wire-drawer__panel {
+    .wrn-drawer[data-placement="top"] .wrn-drawer__panel,
+    .wrn-drawer[data-placement="bottom"] .wrn-drawer__panel {
       width: 100%;
       max-height: min(80vh, 44rem);
       margin: 0;
@@ -357,61 +357,61 @@ open: boolean = false
       box-shadow: 0 24px 80px color-mix(in srgb, black 28%, transparent);
     }
 
-    .wire-drawer[data-placement="top"] .wire-drawer__panel {
-      border-bottom: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wire-color-border));
+    .wrn-drawer[data-placement="top"] .wrn-drawer__panel {
+      border-bottom: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
     }
 
-    .wire-drawer[data-placement="bottom"] .wire-drawer__layer {
+    .wrn-drawer[data-placement="bottom"] .wrn-drawer__layer {
       align-items: flex-end;
     }
 
-    .wire-drawer[data-placement="bottom"] .wire-drawer__panel {
-      border-top: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wire-color-border));
+    .wrn-drawer[data-placement="bottom"] .wrn-drawer__panel {
+      border-top: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
       border-radius: 1.3rem 1.3rem 0 0;
     }
 
-    .wire-drawer[data-variant="soft"] .wire-drawer__panel {
+    .wrn-drawer[data-variant="soft"] .wrn-drawer__panel {
       background:
         linear-gradient(145deg, var(--drawer-soft), transparent 65%),
-        var(--wire-color-surface-raised);
+        var(--wrn-color-surface-raised);
     }
 
-    .wire-drawer[data-variant="solid"] .wire-drawer__panel {
-      color: var(--wire-color-primary-contrast);
+    .wrn-drawer[data-variant="solid"] .wrn-drawer__panel {
+      color: var(--wrn-color-primary-contrast);
       background: var(--drawer-accent);
       border-color: color-mix(in srgb, white 18%, transparent);
     }
 
-    .wire-drawer__handle {
+    .wrn-drawer__handle {
       display: none;
       width: 2.75rem;
       height: 0.28rem;
       margin: 0.55rem auto 0;
-      background: color-mix(in srgb, var(--wire-color-text-muted) 48%, transparent);
+      background: color-mix(in srgb, var(--wrn-color-text-muted) 48%, transparent);
       border-radius: 999px;
     }
 
-    .wire-drawer[data-placement="bottom"] .wire-drawer__handle {
+    .wrn-drawer[data-placement="bottom"] .wrn-drawer__handle {
       display: block;
     }
 
-    .wire-drawer__header {
+    .wrn-drawer__header {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 1rem;
       padding: 1.35rem 1.35rem 1.1rem;
-      border-bottom: 1px solid var(--wire-color-border);
+      border-bottom: 1px solid var(--wrn-color-border);
     }
 
-    .wire-drawer__heading {
+    .wrn-drawer__heading {
       display: flex;
       align-items: flex-start;
       gap: 0.85rem;
       min-width: 0;
     }
 
-    .wire-drawer__icon {
+    .wrn-drawer__icon {
       flex: 0 0 auto;
       width: 1.25rem;
       height: 1.25rem;
@@ -419,34 +419,34 @@ open: boolean = false
       color: var(--drawer-accent);
     }
 
-    .wire-drawer[data-variant="solid"] .wire-drawer__icon {
+    .wrn-drawer[data-variant="solid"] .wrn-drawer__icon {
       color: currentColor;
     }
 
-    .wire-drawer__heading-copy {
+    .wrn-drawer__heading-copy {
       display: grid;
       gap: 0.3rem;
       min-width: 0;
     }
 
-    .wire-drawer__heading-copy h2,
-    .wire-drawer__heading-copy p {
+    .wrn-drawer__heading-copy h2,
+    .wrn-drawer__heading-copy p {
       margin: 0;
     }
 
-    .wire-drawer__heading-copy h2 {
+    .wrn-drawer__heading-copy h2 {
       font-size: 1.05rem;
       font-weight: 650;
       line-height: 1.3;
     }
 
-    .wire-drawer__heading-copy p {
-      color: var(--wire-color-text-muted);
+    .wrn-drawer__heading-copy p {
+      color: var(--wrn-color-text-muted);
       font-size: 0.8rem;
       line-height: 1.55;
     }
 
-    .wire-drawer[data-variant="solid"] .wire-drawer__heading-copy p {
+    .wrn-drawer[data-variant="solid"] .wrn-drawer__heading-copy p {
       color: color-mix(in srgb, currentColor 76%, transparent);
     }
 
@@ -456,7 +456,7 @@ open: boolean = false
      * content box of a couple of pixels, which squeezes the icon to a sliver
      * and reads as "the close button has no icon". Same trap as Modal.
      */
-    .wire-drawer__close {
+    .wrn-drawer__close {
       appearance: none;
       display: inline-flex;
       align-items: center;
@@ -465,22 +465,22 @@ open: boolean = false
       padding: 0;
       width: 2.35rem;
       height: 2.35rem;
-      color: var(--wire-color-text-muted);
-      background: var(--wire-color-surface-soft);
-      border: 1px solid var(--wire-color-border);
+      color: var(--wrn-color-text-muted);
+      background: var(--wrn-color-surface-soft);
+      border: 1px solid var(--wrn-color-border);
       border-radius: 0.75rem;
       cursor: pointer;
     }
 
-    .wire-drawer__close:hover,
-    .wire-drawer__close:focus-visible {
+    .wrn-drawer__close:hover,
+    .wrn-drawer__close:focus-visible {
       color: var(--drawer-accent);
-      border-color: color-mix(in srgb, var(--drawer-accent) 34%, var(--wire-color-border));
+      border-color: color-mix(in srgb, var(--drawer-accent) 34%, var(--wrn-color-border));
       outline: none;
     }
 
     /* Never let the glyph be shrunk by the flex container. */
-    .wire-drawer__close svg {
+    .wrn-drawer__close svg {
       flex: 0 0 auto;
       width: 1rem;
       height: 1rem;
@@ -494,40 +494,40 @@ open: boolean = false
      * :where() keeps the specificity low enough that any class the app puts on
      * its own slot content still wins.
      */
-    .wire-drawer__body {
+    .wrn-drawer__body {
       flex: 1 1 auto;
       min-height: 0;
       padding: 1.35rem;
-      color: var(--wire-color-text);
+      color: var(--wrn-color-text);
     }
 
-    .wire-drawer__body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, span, label, code) {
+    .wrn-drawer__body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, span, label, code) {
       color: inherit;
     }
 
-    .wire-drawer[data-scrollable="true"] .wire-drawer__body {
+    .wrn-drawer[data-scrollable="true"] .wrn-drawer__body {
       overflow: auto;
       overscroll-behavior: contain;
     }
 
-    .wire-drawer__footer {
+    .wrn-drawer__footer {
       padding: 1rem 1.35rem 1.35rem;
-      border-top: 1px solid var(--wire-color-border);
+      border-top: 1px solid var(--wrn-color-border);
     }
 
-    .wire-drawer__footer:empty {
+    .wrn-drawer__footer:empty {
       display: none;
     }
 
     @media (max-width: 639px) {
-      .wire-drawer[data-placement="right"] .wire-drawer__panel,
-      .wire-drawer[data-placement="left"] .wire-drawer__panel {
+      .wrn-drawer[data-placement="right"] .wrn-drawer__panel,
+      .wrn-drawer[data-placement="left"] .wrn-drawer__panel {
         width: min(24rem, 100vw);
       }
 
-      .wire-drawer__header,
-      .wire-drawer__body,
-      .wire-drawer__footer {
+      .wrn-drawer__header,
+      .wrn-drawer__body,
+      .wrn-drawer__footer {
         padding-inline: 1rem;
       }
     }