chore(release): prepare 0.8.6

Bumps all 47 packages, the root manifest and the VS Code extension to 0.8.6,
and rebuilds the editor compiler, language server and extension bundles that
embed the version.

The release carries the output delivery fix: camelCase outputs now reach
parent bindings, and 18 components emit through output.* instead of
hand-built CustomEvents. See the 0.8.6 migration entry for what changes for
consumers.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

.publish/ui/components/Link.wrn

@@ -1,3 +1,13 @@
+// Link -- a text link that follows the theme.
+//
+//   <Link href="/docs" label="Documentation" />
+//   <Link href="https://example.com" label="Spec" external={true} />
+//
+// external adds rel="noopener noreferrer" and an outbound icon, so the reader
+// is told the link leaves the site before they follow it.
+//
+// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
+// and silently swallows the rule that follows it.
 component Link {
   props {
     size: string = "default"
@@ -6,42 +16,122 @@ component Link {
     href: string = "#"
     target: string = ""
     rel: string = ""
+    underline: string = "hover"
     external: boolean = false
     class: string = ""
   }
 
   view {
     <a
+      {...attrs}
       data-ui-component="Link"
+      class='wire-link {class}'
       href='{href}'
       target='{target}'
       rel='{external ? (rel || "noopener noreferrer") : rel}'
-      class='inline-flex min-w-0 items-center gap-1.5 rounded-md font-semibold underline-offset-4 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background)] {class}'
-      class:text-xs='size === "xs"'
-      class:text-sm='size === "sm" || size === "default"'
-      class:text-base='size === "md"'
-      class:text-lg='size === "lg"'
-      class:text-[var(--wire-color-primary)]='color === "primary"'
-      class:hover:text-[var(--wire-color-primary-hover)]='color === "primary"'
-      class:text-[var(--wire-color-secondary)]='color === "secondary"'
-      class:hover:text-[var(--wire-color-secondary-hover)]='color === "secondary"'
-      class:text-[var(--wire-color-success)]='color === "success"'
-      class:text-[var(--wire-color-warning-text)]='color === "warning"'
-      class:text-[var(--wire-color-danger)]='color === "danger"'
-      class:text-[var(--wire-color-info)]='color === "info"'
-      class:text-[var(--wire-color-text)]='color === "neutral"'
-      class:hover:underline='external === false'
+      data-size='{size}'
+      data-color='{color}'
+      data-underline='{underline}'
+      data-external='{external}'
     >
-      <span class="truncate">{label}</span>
-
-      {#if external}
-        <span
-          class="icon-[lucide--external-link] size-3.5 shrink-0"
-          aria-hidden="true"
-        ></span>
-      {/if}
-
+      <span class="wire-link__label">{label}</span>
+      <span
+        class="icon-[lucide--external-link] wire-link__icon"
+        data-show="external"
+        aria-hidden="true"
+      ></span>
       <slot></slot>
     </a>
   }
+
+  style {
+    .wire-link {
+      --link-tone: var(--wire-color-primary);
+      --link-tone-hover: var(--wire-color-primary-hover);
+      display: inline-flex;
+      align-items: center;
+      gap: 0.35rem;
+      min-width: 0;
+      border-radius: var(--wire-radius-sm);
+      color: var(--link-tone);
+      font-size: 0.875rem;
+      font-weight: 600;
+      text-decoration: none;
+      text-underline-offset: 4px;
+      transition: color 140ms ease;
+    }
+
+    .wire-link[data-color="secondary"] {
+      --link-tone: var(--wire-color-secondary);
+      --link-tone-hover: var(--wire-color-secondary-hover);
+    }
+
+    .wire-link[data-color="success"] {
+      --link-tone: var(--wire-color-success);
+      --link-tone-hover: var(--wire-color-success);
+    }
+
+    .wire-link[data-color="warning"] {
+      --link-tone: var(--wire-color-warning-text);
+      --link-tone-hover: var(--wire-color-warning-text);
+    }
+
+    .wire-link[data-color="danger"] {
+      --link-tone: var(--wire-color-danger);
+      --link-tone-hover: var(--wire-color-danger);
+    }
+
+    .wire-link[data-color="info"] {
+      --link-tone: var(--wire-color-info);
+      --link-tone-hover: var(--wire-color-info);
+    }
+
+    .wire-link[data-color="neutral"] {
+      --link-tone: var(--wire-color-text);
+      --link-tone-hover: var(--wire-color-text);
+    }
+
+    .wire-link[data-size="xs"] {
+      font-size: 0.75rem;
+    }
+
+    .wire-link[data-size="md"] {
+      font-size: 1rem;
+    }
+
+    .wire-link[data-size="lg"] {
+      font-size: 1.125rem;
+    }
+
+    .wire-link[data-underline="always"] {
+      text-decoration: underline;
+    }
+
+    .wire-link[data-underline="hover"]:hover {
+      text-decoration: underline;
+    }
+
+    .wire-link:hover {
+      color: var(--link-tone-hover);
+    }
+
+    .wire-link:focus-visible {
+      outline: 2px solid var(--wire-color-focus);
+      outline-offset: 2px;
+    }
+
+    /* The label truncates; the outbound icon must not shrink with it. */
+    .wire-link__label {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .wire-link__icon {
+      flex: 0 0 auto;
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
 }