fix(emerald): apply Figma design feedback round across components

Loader spinner replaces text in EmButton loading state; tooltip opens
on hover with delay and cleans up timers on unmount; menu and tooltip
popovers no longer clip their drop shadows; accordion height
transitions smoothly via grid-rows with visibility-driven a11y;
selected tab uses primary fill with white text and inset shadow plus
a fade-in panel transition; stepper description renders below the
title and the completed-state badge no longer looks wrapped; slider
thumb sits inside the track on the primary range; checkbox and radio
default to border-only with a focus ring on the whole label; text
field error/disabled states match spec; carousel switches to a
stacked fade with centered indicator and drops the unused perView
and orientation props; loading exposes a real ring spinner; alerts
use outline icons; table overflows horizontally with a compact
example added; badge count text inherits variant on-color; tag
padding refined.

Author: johnleider

packages/emerald/src/components/EmAccordion/EmAccordionContent.vue

@@ -12,20 +12,47 @@
 <template>
   <ExpansionPanelContent class="emerald-accordion__content">
     <template #default="slotProps">
-      <slot v-bind="slotProps" />
+      <div class="emerald-accordion__content-inner">
+        <slot v-bind="slotProps" />
+      </div>
     </template>
   </ExpansionPanelContent>
 </template>
 
 <style>
 .emerald-accordion__content {
-  display: block;
-  padding: 12px;
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 280ms cubic-bezier(0.4, 0.0, 0.2, 1);
   font-family: Manrope, system-ui, -apple-system, sans-serif;
   font-weight: 400;
   font-size: 12px;
   line-height: normal;
   color: #000000;
+}
+
+.emerald-accordion__content[hidden] {
+  display: grid;
+  grid-template-rows: 0fr;
+}
+
+.emerald-accordion__content-inner {
+  min-height: 0;
+  overflow: hidden;
+  padding: 12px;
+  transition: visibility 0s linear 280ms;
+}
+
+.emerald-accordion__content[data-selected] .emerald-accordion__content-inner {
+  visibility: visible;
+  transition-delay: 0s;
+}
+
+.emerald-accordion__content[hidden] .emerald-accordion__content-inner {
+  visibility: hidden;
+}
+
+.emerald-accordion__content[data-selected] .emerald-accordion__content-inner {
   border-top: 0.5px solid rgb(var(--emerald-neutral-channels, 26 28 30) / 0.1);
 }
 </style>

packages/emerald/src/components/EmBadge/EmBadge.vue

@@ -107,7 +107,6 @@
   padding: 0 4px;
   font-size: 10px;
   font-weight: 700;
-  color: #000;
 }
 
 /* Variants — background color only; border/shadow handled above */
@@ -141,8 +140,8 @@
   color: var(--emerald-neutral-800);
 }
 
-/* Count content keeps black text regardless of variant (per Figma) */
-.emerald-badge[data-shape="count"] {
-  color: #000;
+/* Neutral count keeps darker text since the surface is light. */
+.emerald-badge[data-shape="count"][data-variant="neutral"] {
+  color: var(--emerald-neutral-800);
 }
 </style>

packages/emerald/src/components/EmButton/EmButton.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { V0Paper } from '@vuetify/paper'
 
+  import EmButtonLoader from './EmButtonLoader.vue'
+
   // Types
   import type { V0PaperProps } from '@vuetify/paper'
 
@@ -53,7 +55,12 @@
     :type="href ? undefined : type"
     @click="onClick"
   >
-    <slot />
+    <span v-if="loading" class="emerald-button__loading">
+      <EmButtonLoader />
+    </span>
+    <span :class="['emerald-button__content', loading && 'emerald-button__content--hidden']">
+      <slot />
+    </span>
   </V0Paper>
 </template>
 
@@ -63,12 +70,15 @@
   align-items: center;
   justify-content: center;
   font-family: Manrope, system-ui, -apple-system, sans-serif;
-  font-weight: 600;
+  font-weight: 500;
   border: none;
   cursor: pointer;
   user-select: none;
   background: var(--emerald-primary-500);
   color: var(--emerald-primary-100);
+  box-shadow:
+    0 1px 2px 0 rgb(var(--emerald-primary-500-channels) / 0.25),
+    0 1px 3px 0 rgb(var(--emerald-primary-500-channels) / 0.18);
   transition: background-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
 }
 
@@ -100,8 +110,8 @@
   background: var(--emerald-primary-700);
   color: var(--emerald-primary-200);
   box-shadow:
-    0 1px 3px 0 var(--emerald-primary-700),
-    0 1px 5px 0 rgb(var(--emerald-primary-700-channels) / 0.2);
+    0 2px 4px 0 rgb(var(--emerald-primary-700-channels) / 0.32),
+    0 3px 8px 0 rgb(var(--emerald-primary-700-channels) / 0.22);
 }
 
 .emerald-button:active:not([data-disabled]) {
@@ -121,4 +131,28 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+
+.emerald-button[data-loading] {
+  position: relative;
+  cursor: progress;
+  box-shadow: none;
+}
+
+.emerald-button__content {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+}
+
+.emerald-button__content--hidden {
+  visibility: hidden;
+}
+
+.emerald-button__loading {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>

packages/emerald/src/components/EmButton/EmButtonLoader.vue

@@ -8,6 +8,31 @@
 
 <template>
   <span aria-hidden="true" class="emerald-button__loader">
-    <slot />
+    <slot>
+      <span class="emerald-button__spinner" />
+    </slot>
   </span>
 </template>
+
+<style>
+.emerald-button__loader {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.emerald-button__spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  animation: emerald-button-spin 700ms linear infinite;
+}
+
+@keyframes emerald-button-spin {
+  to { transform: rotate(360deg); }
+}
+</style>

packages/emerald/src/components/EmCarousel/EmCarousel.vue

@@ -7,14 +7,10 @@
   // Types
   import type { V0PaperProps } from '@vuetify/paper'
 
-  export type EmCarouselOrientation = 'horizontal' | 'vertical'
-
   export interface EmCarouselProps extends V0PaperProps {
     label?: string
     disabled?: boolean
     circular?: boolean
-    orientation?: EmCarouselOrientation
-    perView?: number
     autoplay?: number
   }
 </script>
@@ -26,8 +22,6 @@
     label,
     disabled = false,
     circular = false,
-    orientation = 'horizontal',
-    perView = 1,
     autoplay = 0,
     ...paperProps
   } = defineProps<EmCarouselProps>()
@@ -41,16 +35,13 @@
     as="div"
     class="emerald-carousel"
     :data-disabled="disabled || undefined"
-    :data-orientation="orientation"
   >
     <CarouselRoot
       v-model="model"
       :autoplay
       :circular
       :disabled
       :label
-      :orientation
-      :per-view
       renderless
     >
       <template #default="slotProps">
@@ -65,18 +56,14 @@
   position: relative;
   display: grid;
   grid-template-columns: auto 1fr auto;
-  grid-template-rows: 1fr auto;
+  grid-template-rows: minmax(280px, auto) auto;
+  justify-items: center;
   align-items: center;
   gap: 14px 12px;
   font-family: Manrope, system-ui, -apple-system, sans-serif;
   color: #000000;
 }
 
-.emerald-carousel[data-orientation="vertical"] {
-  grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr auto auto;
-}
-
 .emerald-carousel[data-disabled] {
   opacity: 0.6;
   pointer-events: none;

packages/emerald/src/components/EmCarousel/EmCarouselItem.vue

@@ -30,30 +30,35 @@
 
 <style>
 .emerald-carousel__item {
-  flex: 0 0 60%;
+  position: absolute;
+  top: 0;
+  left: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 8px;
-  min-width: 0;
-  scroll-snap-align: center;
+  width: 60%;
+  height: 100%;
   background: #ffffff;
   border: 1px solid rgb(var(--emerald-neutral-channels) / 0.1);
   border-radius: 8px;
   overflow: hidden;
-  filter: blur(1px);
-  transition: filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
-  transform: scale(0.94);
-  box-shadow: none;
+  opacity: 0;
+  transform: translateX(-50%) scale(0.92) translateY(8px);
+  transition:
+    opacity 280ms cubic-bezier(0.4, 0.0, 0.2, 1),
+    transform 280ms cubic-bezier(0.4, 0.0, 0.2, 1),
+    box-shadow 280ms ease;
+  pointer-events: none;
 }
 
 .emerald-carousel__item[data-selected] {
-  filter: none;
-  transform: scale(1);
+  opacity: 1;
+  transform: translateX(-50%) scale(1) translateY(0);
   box-shadow:
-    0 1px 3px 0 rgb(5 0 18 / 0.12),
-    0 1px 5px 0 rgb(5 0 18 / 0.20);
+    0 4px 10px 0 rgb(5 0 18 / 0.12),
+    0 8px 24px 0 rgb(5 0 18 / 0.16);
   z-index: 1;
+  pointer-events: auto;
 }
 
 .emerald-carousel__item[data-disabled] {

packages/emerald/src/components/EmCarousel/EmCarouselViewport.vue

@@ -19,20 +19,21 @@
 
 <style>
 .emerald-carousel__viewport {
+  position: relative;
   grid-column: 2;
   grid-row: 1;
+  justify-self: stretch;
   align-self: stretch;
-  padding: 8px 20%;
-  gap: 12px;
+  width: 100%;
+  height: 100%;
+  display: block;
+  padding: 0;
+  gap: 0;
+  overflow: visible;
 }
 
 .emerald-carousel__viewport[data-orientation="vertical"] {
   grid-column: 1;
   grid-row: 2;
-  padding: 20% 8px;
-}
-
-.emerald-carousel__viewport[data-dragging] {
-  cursor: grabbing;
 }
 </style>

packages/emerald/src/components/EmCheckbox/EmCheckbox.vue

@@ -65,13 +65,16 @@
 .emerald-checkbox {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   font-family: Manrope, system-ui, -apple-system, sans-serif;
   color: var(--emerald-on-background);
   font-size: 14px;
   line-height: 1.4;
   cursor: pointer;
   user-select: none;
+  border-radius: 6px;
+  padding: 2px 6px 2px 2px;
+  transition: box-shadow 120ms ease;
 }
 
 .emerald-checkbox[data-disabled] {
@@ -92,12 +95,8 @@
   flex-shrink: 0;
 }
 
-.emerald-checkbox__root:focus-visible::after {
-  content: '';
-  position: absolute;
-  inset: -3px;
-  border: 1px solid var(--emerald-primary-500, #7c5cf6);
-  border-radius: 5px;
-  pointer-events: none;
+/* Focus ring on the whole label (control + text) */
+.emerald-checkbox:has(.emerald-checkbox__root:focus-visible) {
+  box-shadow: 0 0 0 2px rgb(var(--emerald-primary-500-channels, 124 92 246) / 0.35);
 }
 </style>