From 324928cfcaf503d80445edacdd3b57d77eb616ea Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Sun, 9 Aug 2026 14:01:01 +0530
Subject: [PATCH] refactor(ui): finish style-only component migration

---
 docs/ui-visual-contract-0.8.json              | 26 ++++----
 packages/ui/components/DataMap.wrn            | 15 +++++
 packages/ui/components/DragAndDrop.wrn        | 15 +++++
 packages/ui/components/FeatureIconCard.wrn    | 59 ++++++++++---------
 packages/ui/components/HeroActions.wrn        | 29 ++++++---
 packages/ui/components/LegendIndicator.wrn    | 15 +++++
 packages/ui/components/ListGroup.wrn          | 15 +++++
 .../ui/components/MarketingSectionHeader.wrn  |  6 +-
 packages/ui/components/Rating.wrn             | 15 +++++
 packages/ui/components/StyledIcon.wrn         | 15 +++++
 packages/ui/components/WysiwygEditor.wrn      | 15 +++++
 packages/ui/components/input.wrn              |  5 ++
 packages/ui/components/radio.wrn              |  5 ++
 packages/ui/components/textarea.wrn           |  5 ++
 packages/ui/test/ui.test.ts                   |  7 +++
 15 files changed, 197 insertions(+), 50 deletions(-)

diff --git a/docs/ui-visual-contract-0.8.json b/docs/ui-visual-contract-0.8.json
index 8f7c7a60..05010b86 100644
--- a/docs/ui-visual-contract-0.8.json
+++ b/docs/ui-visual-contract-0.8.json
@@ -27,34 +27,34 @@
     "packages/ui/components/ContextMenu.wrn": "33fb0f60268b12411d66e3031dc0557cb231149e7a8d83340b4b453a6e37cb09",
     "packages/ui/components/CopyMarkup.wrn": "8d57a7d72e02c126f855a181fc36e1b969edb90f683dce6b6ffe546d49d2b29b",
     "packages/ui/components/CustomScrollbar.wrn": "fedb2ab06cc2cf9499c130590945ca6971a3edfb60407b6658ef7756e4be9823",
-    "packages/ui/components/DataMap.wrn": "65552d73ecd1a148427dbb10d611f9352ca36bd490f595ab1e1a47e173445ba1",
+    "packages/ui/components/DataMap.wrn": "7d0384d89126d947a6c2d640c93ab047aecca7931569d11b54d82dbb6639ff0e",
     "packages/ui/components/DataTable.wrn": "4e4562b0e18748f062a8b20153767aaaf62c33d98542ff14af4e57da7d8c2469",
     "packages/ui/components/DatePicker.wrn": "a9edc2faf30a0e998e964e9290ee6bd9512787aa5dc19f360bcce029796d7e1c",
     "packages/ui/components/DeviceFrame.wrn": "1151090854901710971808f42dd2f1dcbd102e6afef63a5afecd01d4b3f0797d",
     "packages/ui/components/Divider.wrn": "f5cc449611022b3d3eedf982ae48f6b1a289db7855cc9b6ea0248dcda807ffb3",
-    "packages/ui/components/DragAndDrop.wrn": "9a403ce9ed20d36211d8916911871875c9c7d0952a7de1a21a433eaa0b3c3324",
+    "packages/ui/components/DragAndDrop.wrn": "d97a7598dd659ecf72b8649af0b23902dc14d80c19df53dc63ecc5c7b69b8952",
     "packages/ui/components/Drawer.wrn": "e6e2778e515361a3475439ab91b6efec3895efab2a4dfdcfb535713f656cc7ed",
     "packages/ui/components/Dropdown.wrn": "627319de0f555f0f07f80e19a59f9fd52e7f74af7cf2cf9ff09e114678ad9eb8",
     "packages/ui/components/FeatureCard.wrn": "2a1bfb01cec8a9892d3ff066e48c276fa7c548cb59c15bcd9b4bbf85450a07a2",
     "packages/ui/components/FeatureGrid.wrn": "9e3c0440d08c6982861d3e732eeb20f1023413a58243844dfb9d7033bac13d2b",
-    "packages/ui/components/FeatureIconCard.wrn": "afe56213543dd78932b060fa19c4e645e558b211b380c42b6d4b0d18e9d543df",
+    "packages/ui/components/FeatureIconCard.wrn": "620f66a36ca5c8ad8f2ea09e94dc4471e4146189c42149e9d31db58501281639",
     "packages/ui/components/FileInput.wrn": "c235385a70eb7cb985083597570474c0cb70463c03cab651e452199b2c9abf25",
     "packages/ui/components/FileUploadProgress.wrn": "7498eb70c6f79cf4334a3a973280d9667040a85479453afba428ae7c5225fd8c",
     "packages/ui/components/Footer.wrn": "956a504682760c4e5f4d26091830c4fc0f8d0c12f7cdf7e69c94539685c67763",
     "packages/ui/components/Grid.wrn": "d089d8657298b4d33993ba4bf7b581f816c65db513d8e48cf1fdd18da19e05a8",
     "packages/ui/components/Hero.wrn": "e4e39dcd59c273192c7e4136f6583279e20b0956bcba4cfbc3f6e01a1fade152",
-    "packages/ui/components/HeroActions.wrn": "c5720efe2ce7f6c114eb2ea4ccc3e8102a1099078ba23fd13770eddeb6aec640",
+    "packages/ui/components/HeroActions.wrn": "77f69085db73b946c00aa684d50fb5ae474684e440e81edbccfd8ef5dc357e33",
     "packages/ui/components/Image.wrn": "8113441bf90ab0d1d8618d477125ad339021f39e853db89d656c72c492e7a20b",
     "packages/ui/components/InputGroup.wrn": "7347865ff9b90dde690cf0753adc753a91d2ae599e92405f47e5b35806f58e06",
     "packages/ui/components/InputNumber.wrn": "0ec020084f3e556d438f8264d61f836cfab4951c52d4df60e4944fb734fb38a9",
     "packages/ui/components/Kbd.wrn": "5afaabbb15902bd8fb82cb4155cf6cbfff55600927b54d564d27e2dd8b752386",
     "packages/ui/components/LayoutSplitter.wrn": "6bd6812e364420ed5d3439862116c58d0b011b298679005795bdccdbb7455066",
-    "packages/ui/components/LegendIndicator.wrn": "6a7607b27a17196f899132eb952203a1073e4077365a94935f485e700cbac665",
+    "packages/ui/components/LegendIndicator.wrn": "f5a59fce000206dd9285c063b6b8eea414d044f161524e6e1c77e8c817ede261",
     "packages/ui/components/Link.wrn": "b986abcc66bc0b1c6296f3ff4e560812e35d89cc680d5251d7a3883e68c1d053",
     "packages/ui/components/List.wrn": "9bfa9613f388e5b126fc27d505e8165d7aa4a058e72132b755585464e116490e",
-    "packages/ui/components/ListGroup.wrn": "37e2ec61ceab20ed020a834da03208c493702b41abcf586816e29f2e50d8ee11",
+    "packages/ui/components/ListGroup.wrn": "4fcf9302f409b3d6c5d4a3519abac87f71647a9315d89b1f9d8abfa3b9b8f632",
     "packages/ui/components/Map.wrn": "9023a7a188480b24222a3910d26f6926918470369a1ab610f841c31a6120b9aa",
-    "packages/ui/components/MarketingSectionHeader.wrn": "7d6ffcc01a9331474475ea57ca58598be757abd9428b66bdfaf6f3603c5b145b",
+    "packages/ui/components/MarketingSectionHeader.wrn": "6f89a3b298ea299db686ddf903f92c4fe5d321719213943b16be82ba36c23302",
     "packages/ui/components/Marquee.wrn": "2a88c8bd8378469add26b0d937adccac4aa9f2c2005393010298e8e4fa89693e",
     "packages/ui/components/MegaMenu.wrn": "8a9a9b348ca1c5e182914ff55d981a91f47a49c52ef5e5efd8e4cb6e56361a43",
     "packages/ui/components/MetricCard.wrn": "6451182739298691908f68258c0250cce2a78b0dc27c97115579ece30d7d9f92",
@@ -70,7 +70,7 @@
     "packages/ui/components/PreferenceSwitcher.wrn": "61d01f507b3f6b4bab55d2642beb9fee5edf0662997b44443142b43c828ea239",
     "packages/ui/components/PublicPageShell.wrn": "369b74f65e27227311a2ed73e9ca56c8b60908100d6840a798e8ba5f2c8b1040",
     "packages/ui/components/RangeSlider.wrn": "90ef35ceb94899dfd6e07ef3f3a88f2fb49c8dfe4596def67fe39fd9911d73c7",
-    "packages/ui/components/Rating.wrn": "a2d74dc748fc7d98892684c760518b87fa65411b1102e3611252b87245b3ffcb",
+    "packages/ui/components/Rating.wrn": "1dc480b9bea35af8e3703f858f4d169ed3a16e7689827e4451ec5d8f2e6029ca",
     "packages/ui/components/Scrollspy.wrn": "76d1c17580c8d460f1222ce97585bdcac9779141f2f30d5460c84ff9f75413d8",
     "packages/ui/components/SearchBox.wrn": "717f7647fabd762f8ed60a7c3306eac3ddb83c0da292a53c76d91886c2b8f94f",
     "packages/ui/components/Section.wrn": "33eb8a82a2102229c2b1f64cec497e9e8e70b67adab8dbe396be860fccbb699c",
@@ -80,7 +80,7 @@
     "packages/ui/components/StatsBar.wrn": "c7d1df3895f25b6d3a2e1012a18b97592c7f33e65418b880d486f20c2d490686",
     "packages/ui/components/Stepper.wrn": "df9093e4222ef3250963a8c6fbfec74477242735d23eabe896c29731c54fc14d",
     "packages/ui/components/StrongPassword.wrn": "9559756cacd10d613aea7a4ab9845a011f7f2f4613f82f83c87ab5fd2bad2ea9",
-    "packages/ui/components/StyledIcon.wrn": "4a4504e357dee9dd0418edbe85fc90b824ccdb3752123a2125da95b77bf0b336",
+    "packages/ui/components/StyledIcon.wrn": "e4f79f188dab1d6a3f515c13f15b7e35e2f1c1bd9130e4affc7f2fc09d456c5a",
     "packages/ui/components/Tabs.wrn": "e38336d28876caa4e97da32a569749e3803b030284a85ce9f35fa788e51cc5b0",
     "packages/ui/components/TextLink.wrn": "6e18906337cd3d30c2a0122593d249bde8f7cedc697b90ae388e2bd0e8eff3e1",
     "packages/ui/components/TimePicker.wrn": "b3f24767448cb04ddd56e06540b52e5cc32ea21ed4acd2a5eb4f7e46f8617aba",
@@ -90,20 +90,20 @@
     "packages/ui/components/TogglePassword.wrn": "c644436c3435b8a9b39c6b7a9f75671b76ca74f273952ce5c032ca169b0470e5",
     "packages/ui/components/TreeView.wrn": "1791a10135595b17b5c746af9e0476e8520d516ba46d64c79dc4efe0af2b500d",
     "packages/ui/components/Typography.wrn": "1b4d1b91dee0ff522d27c566becc3bc49bd9ec979ae6334e6a15fca5d88eccac",
-    "packages/ui/components/WysiwygEditor.wrn": "636e60b9f9be7a5807cca7ad20e0b0f370ee1ec6c1ecba5d0a577726cc86bc98",
+    "packages/ui/components/WysiwygEditor.wrn": "e4d341f7f49b53301d790bcebe7f3788fea4ea4b72ba8bf0a422e006ceeb54eb",
     "packages/ui/components/alert.wrn": "2eee24aeaa345fce462439c9286dce737716218c783c3a136e55483b8d925ffd",
     "packages/ui/components/avatar.wrn": "3e2fc145949f6141246ad0b274403b9149ccc28b6a8e80285b396345097c818a",
     "packages/ui/components/badge.wrn": "61fbc7a9cab484287025b214e181dab7662280a766e64c1af80248ab7dbea121",
     "packages/ui/components/button.wrn": "f11220a1359ab3d4f33ea4ba3e36dc7e330d38a4b44ed1bd95aa498a435117a1",
     "packages/ui/components/checkbox.wrn": "e59a56e6acfe3756da8c2b827fee938fa4158250ae587a62936b3df0b988f28c",
-    "packages/ui/components/input.wrn": "9ad394eed60f1b05bbd2ccd50dc2de7b78245c52c87afd46055d772c38b7b0c9",
+    "packages/ui/components/input.wrn": "b75df32f470f16e4ee858368264a60bac582b3525eca1c0910250ee3a0a56b76",
     "packages/ui/components/progress.wrn": "61b01ba575d35691e3dfebfcb03ccd1c6b79f1df1c0d41857ec3b01944081a5d",
-    "packages/ui/components/radio.wrn": "0b2d38a5aee3e859280e4590fa1d509d789cc2239082054872fa342817735f1b",
+    "packages/ui/components/radio.wrn": "d0f45da28075e5dc6283f62296687f96ed06eeadcc59db892ee516d0f420ce2b",
     "packages/ui/components/select.wrn": "826035c3049eca85f0a86e2a974ce23f5b6d2f855bce660f2219b9855332c974",
     "packages/ui/components/skeleton.wrn": "dda95a2c59c6060ab2b9f916eb046fbe74a68b398a051afc0bde41808e059c3a",
     "packages/ui/components/spinner.wrn": "ffbd28ec6fc017fc94c67778f8966eab2eefa3b47f3f27f064c77dbeb65d84c1",
     "packages/ui/components/switch.wrn": "205591decf50f1f7d190d8da6a3d969e0fd17ec5300c968fb005608da6a6e596",
-    "packages/ui/components/textarea.wrn": "ddf0b4f124b2cf0c0ab3d820d3ac0085f7c20466e977231949be264cd0cee8cf",
+    "packages/ui/components/textarea.wrn": "00b48d4dbbd5aedfe51e8e932d124b3e222383360c738ac3b15fbbf478481ff7",
     "packages/ui/components/tooltip.wrn": "40028dfbb17f6725c76c2e091af9c30ea4db6aa4dea919d38f53874ea70315d1",
     "packages/ui/ui.css": "d671a848fcbd340d1140a2855019dccecbd71a81d36276e4f1f6cee9d960da9d"
   }
diff --git a/packages/ui/components/DataMap.wrn b/packages/ui/components/DataMap.wrn
index bedba034..36f4e3eb 100644
--- a/packages/ui/components/DataMap.wrn
+++ b/packages/ui/components/DataMap.wrn
@@ -21,4 +21,19 @@ component DataMap {
       <slot />
     </section>
   }
+
+  style {
+    .wire-next--data-map {
+      display: grid;
+      gap: 0.75rem;
+      padding: 1rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius);
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface);
+    }
+    .wire-next--data-map > p { margin: 0; color: var(--wire-color-muted); }
+    .wire-next--data-map > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+    .wire-next--data-map > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+  }
 }
diff --git a/packages/ui/components/DragAndDrop.wrn b/packages/ui/components/DragAndDrop.wrn
index e8cf3961..ed073fc8 100644
--- a/packages/ui/components/DragAndDrop.wrn
+++ b/packages/ui/components/DragAndDrop.wrn
@@ -25,4 +25,19 @@ component DragAndDrop {
       <slot />
     </section>
   }
+
+  style {
+    .wire-next--drag-and-drop {
+      display: grid;
+      gap: 0.75rem;
+      padding: 1rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius);
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface);
+    }
+    .wire-next--drag-and-drop > p { margin: 0; color: var(--wire-color-muted); }
+    .wire-next--drag-and-drop > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+    .wire-next--drag-and-drop > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+  }
 }
diff --git a/packages/ui/components/FeatureIconCard.wrn b/packages/ui/components/FeatureIconCard.wrn
index 1cc766c4..ae334663 100644
--- a/packages/ui/components/FeatureIconCard.wrn
+++ b/packages/ui/components/FeatureIconCard.wrn
@@ -21,45 +21,26 @@ component FeatureIconCard {
   view {
     <article
       data-ui-component="FeatureIconCard"
-      class='group relative flex h-full flex-col rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 shadow-sm transition duration-200 {class}'
-      class:p-5='size === "sm"'
-      class:p-8='size === "lg"'
-      class:bg-[var(--wire-color-surface-soft)]='variant === "soft"'
-      class:bg-transparent='variant === "ghost"'
-      class:border-transparent='variant === "ghost"'
-      class:shadow-none='variant === "ghost"'
-      class:hover:-translate-y-1='hover === "lift"'
-      class:hover:shadow-xl='hover === "lift" || hover === "shadow"'
-      class:hover:border-[var(--wire-color-primary)]='hover === "lift" || hover === "border"'
-      class:items-center='align === "center"'
-      class:text-center='align === "center"'
+      data-size='{size}' data-variant='{variant}' data-hover='{hover}' data-align='{align}'
+      class='wire-feature-icon-card {class}'
     >
       <div
-        class="relative flex size-14 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)] ring-1 ring-inset ring-[var(--wire-color-primary-muted)]"
-        class:size-12='iconSize === "sm"'
-        class:size-16='iconSize === "lg"'
-        class:bg-[var(--wire-color-primary)]='iconVariant === "solid" && color === "primary"'
-        class:text-[var(--wire-color-on-primary)]='iconVariant === "solid" && color === "primary"'
-        class:bg-[var(--wire-color-success-soft)]='color === "success" && iconVariant !== "solid"'
-        class:text-[var(--wire-color-success)]='color === "success" && iconVariant !== "solid"'
-        class:bg-[var(--wire-color-warning-soft)]='color === "warning" && iconVariant !== "solid"'
-        class:text-[var(--wire-color-warning-text)]='color === "warning" && iconVariant !== "solid"'
-        class:bg-[var(--wire-color-danger-soft)]='color === "danger" && iconVariant !== "solid"'
-        class:text-[var(--wire-color-danger)]='color === "danger" && iconVariant !== "solid"'
+        class="wire-feature-icon-card__icon"
+        data-size='{iconSize}' data-variant='{iconVariant}' data-color='{color}'
       >
-        <span class='{icon + " size-7"}' aria-hidden="true"></span>
+        <span class='{icon + " wire-feature-icon-card__icon-glyph"}' aria-hidden="true"></span>
 
         {#if badge}
-          <span class="absolute -right-2 -top-2 rounded-full bg-[var(--wire-color-surface-raised)] px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-[var(--wire-color-primary)] shadow-sm ring-1 ring-[var(--wire-color-border)]">
+          <span class="wire-feature-icon-card__badge">
             {badge}
           </span>
         {/if}
       </div>
 
-      <h3 class="mt-6 text-xl font-bold tracking-tight text-[var(--wire-color-text)]">{title}</h3>
+      <h3 class="wire-feature-icon-card__title">{title}</h3>
 
       {#if description}
-        <p class="mt-3 flex-1 text-sm leading-6 text-[var(--wire-color-text-muted)]">{description}</p>
+        <p class="wire-feature-icon-card__description">{description}</p>
       {/if}
 
       <slot></slot>
@@ -70,11 +51,33 @@ component FeatureIconCard {
           href='{href}'
           color='{color}'
           size="sm"
-          class="mt-6"
+          class="wire-feature-icon-card__action"
         />
       {/if}
 
       <slot name="footer"></slot>
     </article>
   }
+
+  style {
+    .wire-feature-icon-card { position: relative; display: flex; height: 100%; flex-direction: column; padding: 1.5rem; border: 1px solid var(--wire-color-border); border-radius: calc(var(--wire-radius) * 2); background: var(--wire-color-surface-raised); box-shadow: var(--wire-shadow-1); transition: transform var(--wire-motion-base), border-color var(--wire-motion-base), box-shadow var(--wire-motion-base); }
+    .wire-feature-icon-card[data-size="sm"] { padding: 1.25rem; } .wire-feature-icon-card[data-size="lg"] { padding: 2rem; }
+    .wire-feature-icon-card[data-variant="soft"] { background: var(--wire-color-surface-soft); }
+    .wire-feature-icon-card[data-variant="ghost"] { border-color: transparent; background: transparent; box-shadow: none; }
+    .wire-feature-icon-card[data-hover="lift"]:hover { transform: translateY(-0.25rem); }
+    .wire-feature-icon-card:is([data-hover="lift"], [data-hover="shadow"]):hover { box-shadow: var(--wire-shadow-3); }
+    .wire-feature-icon-card:is([data-hover="lift"], [data-hover="border"]):hover { border-color: var(--wire-color-primary); }
+    .wire-feature-icon-card[data-align="center"] { align-items: center; text-align: center; }
+    .wire-feature-icon-card__icon { position: relative; display: flex; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; border: 1px solid var(--wire-color-primary-muted); border-radius: calc(var(--wire-radius) * 1.5); color: var(--wire-color-primary); background: var(--wire-color-primary-soft); }
+    .wire-feature-icon-card__icon[data-size="sm"] { width: 3rem; height: 3rem; } .wire-feature-icon-card__icon[data-size="lg"] { width: 4rem; height: 4rem; }
+    .wire-feature-icon-card__icon[data-variant="solid"] { color: var(--wire-color-on-primary); background: var(--wire-color-primary); }
+    .wire-feature-icon-card__icon[data-color="success"]:not([data-variant="solid"]) { color: var(--wire-color-success); background: var(--wire-color-success-soft); }
+    .wire-feature-icon-card__icon[data-color="warning"]:not([data-variant="solid"]) { color: var(--wire-color-warning-text); background: var(--wire-color-warning-soft); }
+    .wire-feature-icon-card__icon[data-color="danger"]:not([data-variant="solid"]) { color: var(--wire-color-danger); background: var(--wire-color-danger-soft); }
+    .wire-feature-icon-card__icon-glyph { width: 1.75rem; height: 1.75rem; }
+    .wire-feature-icon-card__badge { position: absolute; top: -0.5rem; right: -0.5rem; padding: 0.25rem 0.5rem; border: 1px solid var(--wire-color-border); border-radius: 999px; color: var(--wire-color-primary); background: var(--wire-color-surface-raised); box-shadow: var(--wire-shadow-1); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.025em; text-transform: uppercase; }
+    .wire-feature-icon-card__title { margin-top: 1.5rem; color: var(--wire-color-text); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; }
+    .wire-feature-icon-card__description { flex: 1; margin-top: 0.75rem; color: var(--wire-color-text-muted); font-size: 0.875rem; line-height: 1.5rem; }
+    .wire-feature-icon-card__action { margin-top: 1.5rem; }
+  }
 }
diff --git a/packages/ui/components/HeroActions.wrn b/packages/ui/components/HeroActions.wrn
index ed7be41e..29bd26b8 100644
--- a/packages/ui/components/HeroActions.wrn
+++ b/packages/ui/components/HeroActions.wrn
@@ -17,13 +17,11 @@ component HeroActions {
       data-ui-component="HeroActions"
       role="group"
       aria-label="Page actions"
-      class='flex flex-wrap items-center gap-3 {class}'
-      class:flex-col='orientation === "vertical" || stackOnMobile'
-      class:sm:flex-row='orientation === "horizontal" && stackOnMobile'
-      class:justify-center='align === "center"'
-      class:justify-end='align === "right"'
-      class:w-full='fullWidthMobile'
-      class:sm:w-auto='fullWidthMobile'
+      data-align='{align}'
+      data-orientation='{orientation}'
+      data-stack-mobile='{stackOnMobile ? "true" : "false"}'
+      data-full-mobile='{fullWidthMobile ? "true" : "false"}'
+      class='wire-hero-actions {class}'
     >
       {#each actions as action, index}
         {#if action.label}
@@ -43,7 +41,7 @@ component HeroActions {
             ariaLabel='{action.ariaLabel || action.label}'
             fullWidth='{fullWidthMobile}'
             controlClass='{action.controlClass || ""}'
-            class='{"sm:w-auto " + (action.class || "")}'
+            class='{"wire-hero-actions__action " + (action.class || "")}'
           />
         {/if}
       {/each}
@@ -51,4 +49,19 @@ component HeroActions {
       <slot></slot>
     </div>
   }
+
+  style {
+    .wire-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
+    .wire-hero-actions[data-align="center"] { justify-content: center; }
+    .wire-hero-actions[data-align="right"] { justify-content: flex-end; }
+    .wire-hero-actions[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
+    .wire-hero-actions[data-full-mobile="true"] { width: 100%; }
+    @media (max-width: 39.999rem) {
+      .wire-hero-actions[data-stack-mobile="true"] { flex-direction: column; align-items: stretch; }
+    }
+    @media (min-width: 40rem) {
+      .wire-hero-actions[data-full-mobile="true"] { width: auto; }
+      .wire-hero-actions__action { width: auto; }
+    }
+  }
 }
diff --git a/packages/ui/components/LegendIndicator.wrn b/packages/ui/components/LegendIndicator.wrn
index 11c8570c..6ff97cb8 100644
--- a/packages/ui/components/LegendIndicator.wrn
+++ b/packages/ui/components/LegendIndicator.wrn
@@ -21,4 +21,19 @@ component LegendIndicator {
       <slot />
     </section>
   }
+
+  style {
+    .wire-next--legend-indicator {
+      display: grid;
+      gap: 0.75rem;
+      padding: 1rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius);
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface);
+    }
+    .wire-next--legend-indicator > p { margin: 0; color: var(--wire-color-muted); }
+    .wire-next--legend-indicator > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+    .wire-next--legend-indicator > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+  }
 }
diff --git a/packages/ui/components/ListGroup.wrn b/packages/ui/components/ListGroup.wrn
index 191f87dd..23e896af 100644
--- a/packages/ui/components/ListGroup.wrn
+++ b/packages/ui/components/ListGroup.wrn
@@ -21,4 +21,19 @@ component ListGroup {
       <slot />
     </section>
   }
+
+  style {
+    .wire-next--list-group {
+      display: grid;
+      gap: 0.75rem;
+      padding: 1rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius);
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface);
+    }
+    .wire-next--list-group > p { margin: 0; color: var(--wire-color-muted); }
+    .wire-next--list-group > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+    .wire-next--list-group > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+  }
 }
diff --git a/packages/ui/components/MarketingSectionHeader.wrn b/packages/ui/components/MarketingSectionHeader.wrn
index d3eb5a6b..f39d5c1a 100644
--- a/packages/ui/components/MarketingSectionHeader.wrn
+++ b/packages/ui/components/MarketingSectionHeader.wrn
@@ -23,7 +23,7 @@ component MarketingSectionHeader {
       data-ui-component="MarketingSectionHeader"
       data-size='{size}'
       data-color='{color}'
-      class='{class}'
+      class='wire-marketing-section-header {class}'
     >
       <SectionHeader
         id='{id}'
@@ -59,4 +59,8 @@ component MarketingSectionHeader {
       </SectionHeader>
     </div>
   }
+
+  style {
+    .wire-marketing-section-header { width: 100%; min-width: 0; }
+  }
 }
diff --git a/packages/ui/components/Rating.wrn b/packages/ui/components/Rating.wrn
index 629dba20..2164b6c2 100644
--- a/packages/ui/components/Rating.wrn
+++ b/packages/ui/components/Rating.wrn
@@ -21,4 +21,19 @@ component Rating {
       <slot />
     </section>
   }
+
+  style {
+    .wire-next--rating {
+      display: grid;
+      gap: 0.75rem;
+      padding: 1rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius);
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface);
+    }
+    .wire-next--rating > p { margin: 0; color: var(--wire-color-muted); }
+    .wire-next--rating > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+    .wire-next--rating > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+  }
 }
diff --git a/packages/ui/components/StyledIcon.wrn b/packages/ui/components/StyledIcon.wrn
index 24f19e6a..6e0127fa 100644
--- a/packages/ui/components/StyledIcon.wrn
+++ b/packages/ui/components/StyledIcon.wrn
@@ -16,4 +16,19 @@ component StyledIcon {
       <slot />
     </section>
   }
+
+  style {
+    .wire-next--styled-icon {
+      display: grid;
+      gap: 0.75rem;
+      padding: 1rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius);
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface);
+    }
+    .wire-next--styled-icon > p { margin: 0; color: var(--wire-color-muted); }
+    .wire-next--styled-icon > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+    .wire-next--styled-icon > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+  }
 }
diff --git a/packages/ui/components/WysiwygEditor.wrn b/packages/ui/components/WysiwygEditor.wrn
index dc616792..420d019f 100644
--- a/packages/ui/components/WysiwygEditor.wrn
+++ b/packages/ui/components/WysiwygEditor.wrn
@@ -23,4 +23,19 @@ component WysiwygEditor {
       <slot />
     </section>
   }
+
+  style {
+    .wire-next--wysiwyg-editor {
+      display: grid;
+      gap: 0.75rem;
+      padding: 1rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius);
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface);
+    }
+    .wire-next--wysiwyg-editor > p { margin: 0; color: var(--wire-color-muted); }
+    .wire-next--wysiwyg-editor > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+    .wire-next--wysiwyg-editor > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+  }
 }
diff --git a/packages/ui/components/input.wrn b/packages/ui/components/input.wrn
index 420af81c..16b5b45f 100644
--- a/packages/ui/components/input.wrn
+++ b/packages/ui/components/input.wrn
@@ -92,4 +92,9 @@ size: string = "default"
       <small id="{(id || name) + '-error'}" class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
   }
+
+  style {
+    .wire-next--input { width: 100%; min-width: 0; }
+    .wire-next--input[data-invalid="true"] { --wire-component-color: var(--wire-color-danger); }
+  }
 }
diff --git a/packages/ui/components/radio.wrn b/packages/ui/components/radio.wrn
index 62705724..d6132dee 100644
--- a/packages/ui/components/radio.wrn
+++ b/packages/ui/components/radio.wrn
@@ -56,4 +56,9 @@ size: string = "default"
       {#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
   }
+
+  style {
+    .wire-next--radio-field { width: 100%; min-width: 0; }
+    .wire-next--radio-field[data-invalid="true"] { --wire-component-color: var(--wire-color-danger); }
+  }
 }
diff --git a/packages/ui/components/textarea.wrn b/packages/ui/components/textarea.wrn
index 9c101af5..bf3dab0d 100644
--- a/packages/ui/components/textarea.wrn
+++ b/packages/ui/components/textarea.wrn
@@ -53,4 +53,9 @@ size: string = "default"
       <small id="{(id || name) + '-error'}" class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
   }
+
+  style {
+    .wire-next--textarea { width: 100%; min-width: 0; }
+    .wire-next--textarea[data-invalid="true"] { --wire-component-color: var(--wire-color-danger); }
+  }
 }
diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts
index 6c399230..8d8afbed 100644
--- a/packages/ui/test/ui.test.ts
+++ b/packages/ui/test/ui.test.ts
@@ -30,6 +30,13 @@ test("global UI CSS stays below its migration ratchet", () => {
   expect(gzipSync(new TextEncoder().encode(uiCss())).length).toBeLessThanOrEqual(12_672);
 });
 
+test("only the five scheduled component builds remain without local styles", () => {
+  const unstyled = uiComponentNames().filter(
+    (name) => !/^\s{2,4}style \{/m.test(readFileSync(uiComponentPath(name), "utf8")),
+  );
+  expect(unstyled.sort()).toEqual(["Chart", "Clipboard", "Confetti", "CopyMarkup", "TreeView"]);
+});
+
 test("generated component reference documents every bundled component and its props", () => {
   const reference = JSON.parse(
     readFileSync(join(uiComponentsDir(), "..", "component-reference.json"), "utf8"),