refactor(ui): finish style-only component migration

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; }
+    }
+  }
 }