chore(release): refresh private package staging

.publish/ui/components/ChatBubble.wrn

@@ -1,3 +1,5 @@
+import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
+
 component ChatBubble {
   outputs {
     action(payload: { action: boolean; item: string | number | boolean | null | object; index: number })
@@ -64,7 +66,7 @@ component ChatBubble {
   view {
     <section
       {...attrs}
-      class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--chat-bubble wire-next--variant-{variant} {class}"
+      class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--chat-bubble wire-next--variant-{variant} {class}"
       data-one-sided="{oneSided}"
       role="log"
       aria-label="{ariaLabel}"
@@ -146,5 +148,205 @@ component ChatBubble {
       {/if}
       <slot />
     </section>
+    <ComponentBaseStyles hidden />
+  }
+
+  style {
+    .wire-next--chat-bubble.wire-component--size-sm {
+      --wire-chat-padding: 0.75rem;
+      font-size: 0.875rem;
+    }
+    .wire-next--chat-bubble.wire-component--size-lg {
+      --wire-chat-padding: 1.25rem;
+      font-size: 1.0625rem;
+    }
+
+    .wire-next--chat-bubble {
+      --wire-chat-color: var(--wire-component-color, var(--wire-color-primary));
+      --wire-chat-padding: 1rem;
+      display: grid;
+      width: 100%;
+      min-width: 0;
+      gap: 1rem;
+      color: var(--wire-color-text);
+    }
+
+    .wire-next__chat-header h3,
+    .wire-next__chat-header p,
+    .wire-next__chat-content h4,
+    .wire-next__chat-content p {
+      margin: 0;
+    }
+
+    .wire-next__chat-header p {
+      margin-top: 0.35rem;
+      color: var(--wire-color-text-muted);
+    }
+
+    .wire-next__chat-thread {
+      display: grid;
+      min-width: 0;
+      gap: 1.25rem;
+    }
+
+    .wire-next__chat-message {
+      display: grid;
+      width: min(78%, 34rem);
+      min-width: 0;
+      justify-self: start;
+      gap: 0.4rem;
+    }
+
+    .wire-next__chat-message[data-direction="outgoing"] {
+      justify-self: end;
+    }
+
+    .wire-next--chat-bubble[data-one-sided="true"] .wire-next__chat-message {
+      justify-self: start;
+    }
+
+    .wire-next__chat-row {
+      display: flex;
+      min-width: 0;
+      align-items: flex-start;
+      gap: 0.75rem;
+    }
+
+    .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-row {
+      flex-direction: row-reverse;
+    }
+
+    .wire-next--chat-bubble[data-one-sided="true"]
+      .wire-next__chat-message[data-direction="outgoing"]
+      .wire-next__chat-row {
+      flex-direction: row;
+    }
+
+    .wire-next__chat-content {
+      min-width: 0;
+      padding: var(--wire-chat-padding);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 1rem;
+      background: var(--wire-color-surface-raised, var(--wire-color-surface));
+      color: var(--wire-color-text);
+      cursor: pointer;
+    }
+
+    .wire-next__chat-content:focus-visible {
+      outline: 2px solid var(--wire-chat-color);
+      outline-offset: 2px;
+    }
+
+    .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content {
+      border-color: var(--wire-chat-color);
+      background: var(--wire-chat-color);
+      color: var(--wire-color-primary-contrast, #fff);
+    }
+
+    .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content :is(h4, p, li, span) {
+      color: inherit;
+    }
+
+    .wire-next__chat-content h4 {
+      margin-bottom: 0.65rem;
+      font-size: 1em;
+    }
+
+    .wire-next__chat-content p + p,
+    .wire-next__chat-content p + nav {
+      margin-top: 0.75rem;
+    }
+
+    .wire-next__chat-content ul {
+      display: grid;
+      margin: 0.55rem 0 0;
+      padding-inline-start: 1.25rem;
+      gap: 0.35rem;
+    }
+
+    .wire-next__chat-content nav {
+      display: grid;
+      margin-top: 0.75rem;
+      gap: 0.3rem;
+    }
+
+    .wire-next__chat-content a {
+      color: var(--wire-chat-color);
+      font-weight: 650;
+      text-decoration: none;
+    }
+
+    .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content a {
+      color: inherit;
+      text-decoration: underline;
+    }
+
+    .wire-next__chat-avatar {
+      display: grid;
+      flex: 0 0 2.5rem;
+      width: 2.5rem;
+      min-height: 2.5rem;
+      overflow: hidden;
+      padding: 0;
+      border: 1px solid var(--wire-color-border);
+      border-radius: 999px;
+      background: var(--wire-color-surface-raised, var(--wire-color-surface));
+      color: var(--wire-color-text);
+      cursor: pointer;
+      place-items: center;
+    }
+
+    .wire-next__chat-avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .wire-next__chat-avatar:focus-visible {
+      outline: 2px solid var(--wire-chat-color);
+      outline-offset: 2px;
+    }
+
+    .wire-next__chat-meta {
+      display: flex;
+      align-items: center;
+      gap: 0.3rem;
+      padding-inline: calc(2.5rem + 0.75rem);
+      color: var(--wire-color-text-muted);
+      font-size: 0.78em;
+    }
+
+    .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-meta {
+      justify-content: flex-end;
+    }
+
+    .wire-next__chat-meta[data-tone="danger"] {
+      color: var(--wire-color-danger);
+    }
+
+    .wire-next__chat-meta button {
+      padding: 0;
+      border: 0;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-weight: 700;
+      cursor: pointer;
+      text-decoration: underline;
+    }
+
+    @media (max-width: 640px) {
+    .wire-next__chat-message {
+        width: min(92%, 34rem);
+      }
+    .wire-next__chat-avatar {
+        flex-basis: 2rem;
+        width: 2rem;
+        min-height: 2rem;
+      }
+    .wire-next__chat-meta {
+        padding-inline: 0;
+      }
+    }
   }
 }