@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/UiDropdown/UiDropdownGroup.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { SelectGroup, SelectLabel } from 'reka-ui'
+
+defineProps<{
+  /** Heading read before the options of the group; leave it out for an untitled group. */
+  label?: string
+}>()
+</script>
+
+<template>
+  <SelectGroup
+    v-bind="$attrs"
+    class="flex flex-col gap-1"
+  >
+    <SelectLabel
+      v-if="label"
+      class="px-4 pt-2 pb-1 text-content-legends-bold-md text-text-neutral-tertiary"
+    >
+      {{ label }}
+    </SelectLabel>
+    <slot />
+  </SelectGroup>
+</template>

package/src/components/UiDropdown/UiDropdownItem.vue

@@ -1,25 +1,49 @@
 <script setup lang="ts">
-import type { SelectItemProps } from 'reka-ui'
+import type { SelectItemEmits, SelectItemProps } from 'reka-ui'
 import { SelectItem, SelectItemText } from 'reka-ui'
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
 import { UI_DROPDOWN_MULTIPLE_KEY } from './context'
+import DropdownItemCheckbox from './DropdownItemCheckbox.vue'
 
 interface Props extends SelectItemProps {
   title?: string
   description?: string
   icon?: string
+  /** `danger` marks an option that takes something away, such as removing access. */
+  variant?: 'default' | 'danger'
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   description: undefined,
   icon: undefined,
+  variant: 'default',
 })
 
+const isDanger = computed(() => props.variant === 'danger')
+
+const stateBackgroundClass = computed(() => isDanger.value
+  ? 'data-highlighted:bg-actions-danger-hover-overlay data-[state=checked]:bg-actions-danger-pressed-overlay'
+  : 'data-highlighted:bg-actions-neutral-hover-overlay data-[state=checked]:bg-actions-primary-active-overlay')
+
+const titleColorClass = computed(() => isDanger.value
+  ? 'text-text-danger-body'
+  : 'text-actions-neutral-idle group-data-highlighted/item:text-actions-neutral-idle group-data-[state=checked]/item:text-actions-primary-idle')
+
+const descriptionColorClass = computed(() => isDanger.value
+  ? 'text-text-neutral-secondary'
+  : 'text-text-neutral-secondary group-data-highlighted/item:text-text-neutral-secondary group-data-[state=checked]/item:text-text-primary-secondary')
+
 // `UiDropdown` provides this when `multiple` is set so items render a
 // leading checkbox automatically. Falls back to single-select behavior
 // when the item is used outside a `UiDropdown` (defensive default).
 const isMultiple = inject(UI_DROPDOWN_MULTIPLE_KEY, undefined)
+
+// Reka picks on Enter keydown without cancelling it, so its keypress would activate whatever the pick focused.
+function consumePickingKey (event: SelectItemEmits['select'][0]) {
+  const { originalEvent } = event.detail
+  if (originalEvent instanceof KeyboardEvent) originalEvent.preventDefault()
+}
 </script>
 
 <template>
@@ -27,25 +51,17 @@ const isMultiple = inject(UI_DROPDOWN_MULTIPLE_KEY, undefined)
     v-bind="$attrs"
     :value="value"
     :disabled="disabled"
-    class="focus-indicator-none group flex px-3 py-1 rounded-md cursor-pointer outline-hidden transition-all duration-150 ease-in-out data-highlighted:bg-actions-neutral-hover-overlay data-[state=checked]:bg-actions-primary-active-overlay data-disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:pointer-events-none"
+    class="focus-indicator-none group/item flex px-3 py-1 rounded-row cursor-pointer outline-hidden transition-all duration-150 ease-in-out data-disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:pointer-events-none"
+    :class="stateBackgroundClass"
+    @select="consumePickingKey"
   >
     <div class="flex flex-1 gap-2 items-center overflow-hidden">
-      <!-- Multi-select indicator: visually mirrors `UiInputCheckbox` (same
-           size, border radius, primary fill, and `i-ls-checkbox-check`
-           icon) without dragging in the input's runtime/a11y plumbing.
-           Driven entirely by the parent `SelectItem`'s `data-[state=checked]`
-           attribute — no per-item state. -->
-      <div
-        v-if="isMultiple"
-        class="shrink-0 size-4 rounded-sm border border-borders-neutral-strong bg-surface-neutral-bg-main grid place-content-center transition-colors group-data-[state=checked]:bg-actions-primary-idle group-data-[state=checked]:border-borders-primary-default"
-      >
-        <div class="i-ls-checkbox-check size-3 text-actions-neutral-invert-idle opacity-0 group-data-[state=checked]:opacity-100" />
-      </div>
+      <DropdownItemCheckbox v-if="isMultiple" />
 
       <div
         v-if="icon"
         :class="[icon, 'size-4']"
-        class="shrink-0 group-data-highlighted:text-actions-neutral-idle group-data-[state=checked]:text-actions-primary-idle"
+        class="shrink-0 group-data-highlighted/item:text-actions-neutral-idle group-data-[state=checked]/item:text-actions-primary-idle"
       />
 
       <div
@@ -56,14 +72,18 @@ const isMultiple = inject(UI_DROPDOWN_MULTIPLE_KEY, undefined)
       </div>
 
       <div class="flex flex-1 flex-col items-start justify-center min-w-0 py-1.5">
-        <SelectItemText class="whitespace-nowrap text-content-text-md-medium text-actions-neutral-idle group-data-highlighted:text-actions-neutral-idle group-data-[state=checked]:text-actions-primary-idle">
+        <SelectItemText
+          class="max-w-full truncate text-content-text-md-medium"
+          :class="titleColorClass"
+        >
           <slot name="title">
             {{ title }}
           </slot>
         </SelectItemText>
         <div
           v-if="description || $slots.description"
-          class="text-content-legends-medium-md text-text-neutral-secondary group-data-highlighted:text-text-neutral-secondary group-data-[state=checked]:text-text-primary-secondary"
+          class="max-w-full truncate text-content-legends-medium-md"
+          :class="descriptionColorClass"
         >
           <slot name="description">
             {{ description }}

package/src/components/UiDropdown/UiDropdownSeparator.vue

@@ -3,5 +3,5 @@ import { SelectSeparator } from 'reka-ui'
 </script>
 
 <template>
-  <SelectSeparator class="h-px bg-borders-neutral-light my-1 -mx-2 relative" />
+  <SelectSeparator class="h-px bg-borders-neutral-light my-1 -mx-1 relative" />
 </template>

package/src/components/UiDropdown/UiDropdownTrigger.vue

@@ -3,7 +3,7 @@ import type { SelectTriggerProps } from 'reka-ui'
 import { SelectIcon, SelectTrigger, SelectValue } from 'reka-ui'
 import { computed, useSlots } from 'vue'
 import { useButtonStyles } from '../../composables/useButtonStyles'
-import { useIconSize } from '../../composables/useIconSize'
+import { useControlShape } from '../../composables/useControlShape'
 
 type TSize = 'sm' | 'md' | 'lg' | 'xl'
 type TColor = 'neutral' | 'primary'
@@ -24,12 +24,21 @@ interface Props extends SelectTriggerProps {
   color?: TColor
   /**
    * Visual variant, named to match `UiButton`. `secondary` (default) is the
-   * bordered field look. `tertiary` drops the border + background to read like
-   * a `UiButton` tertiary — the trigger shows only colored text with a hover
-   * overlay, so it sits flush next to tertiary buttons (e.g. a "View all" CTA).
+   * bordered field look. `tertiary` drops the border + background: the trigger
+   * shows only its value, coloured like a `UiButton` tertiary and set in the
+   * regular body text style, with a hover overlay. It suits a value picked
+   * inside a row, such as a role beside a person.
    */
   variant?: TVariant
   error?: boolean
+  /**
+   * Shows the value as static text in the box of an editable trigger: same size, padding and
+   * border width, no fill, and an empty slot where the chevron would be, so its text ends where an
+   * editable trigger's value ends. It is not focusable and opens nothing; it renders as a `group`, so pass
+   * `aria-labelledby` (for example the row's name) to label it like the editable trigger.
+   * The value reads in the secondary text colour. Render it from the `value` slot.
+   */
+  readonly?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,59 +49,112 @@ const props = withDefaults(defineProps<Props>(), {
   color: 'neutral',
   variant: 'secondary',
   error: false,
+  readonly: false,
 })
 
 const slots = useSlots()
 
-// Shared button styling — both variants pull their background / border / text /
+// Shared button styling — both variants pull their background / text /
 // overlay tokens from the same source `UiButton` uses, so the trigger stays in
 // lockstep with the button palette. `error` maps onto the button `error` color;
 // otherwise the trigger's `primary`/`neutral` colors line up 1:1.
 const buttonColor = computed(() => (props.error ? 'error' as const : props.color))
-const { textClass, bgClass, borderClasses, beforeHoverOverlayClass } = useButtonStyles({
+const { textClass, bgClass, beforeHoverOverlayClass } = useButtonStyles({
   variant: () => props.variant,
   color: buttonColor,
   disabled: () => props.disabled,
 })
 
+const FIELD_BORDER: Record<'neutral' | 'primary' | 'error', string> = {
+  neutral: 'border-control-field-border',
+  primary: 'border-borders-primary-strong',
+  error: 'border-control-error-border',
+}
+const borderClass = computed(() => FIELD_BORDER[buttonColor.value])
+
+const fieldBgClass = computed(() =>
+  buttonColor.value === 'neutral' ? 'bg-control-field-bg' : bgClass.value,
+)
+
+// With a `leading` slot the start padding shrinks so the leading box (24px on
+// sm and md, 32px on lg and xl, enforced on its wrapper) sits as far from the
+// start edge as from the top and bottom: (field height - box) / 2 - 1px border.
 const sizeClasses = computed(() => {
   const sizes = {
     sm: {
-      field: 'h-8 px-2 gap-1',
-      text: 'text-action-button-sm tracking-[0.05px]',
+      field: 'gap-1',
       padding: 'px-2',
+      leadingPadding: 'pl-[3px] pr-2',
+      leadingBox: 'size-6',
+      text: 'text-action-button-sm tracking-[0.05px]',
+      tertiaryText: 'text-content-legends-medium-md',
     },
     md: {
-      field: 'h-10 px-3 gap-1.5',
-      text: 'text-action-button-md leading-[20px] tracking-[-0.04px]',
+      field: 'gap-1.5',
       padding: 'px-3',
+      leadingPadding: 'pl-[5px] pr-3',
+      leadingBox: 'size-6',
+      text: 'text-action-button-md leading-[20px] tracking-[-0.04px]',
+      tertiaryText: 'text-content-text-md-regular',
     },
     lg: {
-      field: 'h-12 px-4 gap-2',
-      text: 'text-action-button-lg leading-[20px] tracking-[-0.04px]',
+      field: 'gap-2',
       padding: 'px-4',
+      leadingPadding: 'pl-[7px] pr-4',
+      leadingBox: 'size-8',
+      text: 'text-action-button-lg leading-[20px] tracking-[-0.04px]',
+      tertiaryText: 'text-content-text-lg-regular',
     },
     xl: {
-      field: 'h-16 px-4 gap-2',
-      text: 'text-action-button-lg leading-[24px] tracking-[-0.04px]',
+      field: 'gap-2',
       padding: 'px-4',
+      leadingPadding: 'pl-[15px] pr-4',
+      leadingBox: 'size-8',
+      text: 'text-action-button-lg leading-[24px] tracking-[-0.04px]',
+      tertiaryText: 'text-content-text-lg-regular',
     },
   }
 
   return sizes[props.size]
 })
 
-const iconSizeClass = useIconSize(() => props.size)
+const shape = useControlShape('field', () => props.size)
+
+const boxClasses = computed(() => [
+  'flex',
+  'items-center',
+  'justify-between',
+  'w-full',
+  shape.value.radius,
+  shape.value.height,
+  'border',
+  'border-solid',
+  'border-transparent',
+  'bg-transparent',
+  sizeClasses.value.field,
+])
+
+const readonlyTextClasses = computed(() => [
+  'flex-1',
+  'overflow-hidden',
+  'text-ellipsis',
+  'whitespace-nowrap',
+  'min-w-0',
+  'text-left',
+  'text-text-neutral-secondary',
+  props.variant === 'tertiary' ? sizeClasses.value.tertiaryText : sizeClasses.value.text,
+])
 
 const fieldClasses = computed(() => {
   const base = [
     'focus-indicator-none',
-    'group',
+    'group/trigger',
     'flex',
     'items-center',
     'justify-between',
     'w-full',
-    'rounded-lg',
+    shape.value.radius,
+    shape.value.height,
     'border',
     'border-solid',
     'transition-all',
@@ -102,12 +164,11 @@ const fieldClasses = computed(() => {
     'cursor-pointer',
     'font-medium',
     'focus:outline-hidden',
-    'focus-visible:ring-1',
-    'focus-visible:ring-inset',
+    'focus-visible:focus-ring',
     // Hover overlay via ::before
     "before:content-['']",
     'before:absolute',
-    'before:inset-0',
+    'before:-inset-px',
     'before:rounded-[inherit]',
     'before:opacity-0',
     'before:transition-opacity',
@@ -128,33 +189,29 @@ const fieldClasses = computed(() => {
     state.push('opacity-50', '!cursor-not-allowed')
   }
 
-  // Background / border / hover overlay all come from `useButtonStyles`, keyed
-  // by `variant` × `buttonColor` — the exact tokens `UiButton` uses. Tertiary
+  // Background / hover overlay come from `useButtonStyles`, keyed by
+  // `variant` × `buttonColor` — the exact tokens `UiButton` uses. Tertiary
   // resolves to no border/bg (transparent), secondary to the bordered field.
   if (props.variant === 'tertiary') {
     state.push('border-transparent', 'bg-transparent')
   }
   else {
-    state.push(bgClass.value, ...borderClasses.value)
+    state.push(fieldBgClass.value, borderClass.value)
   }
   if (beforeHoverOverlayClass.value) state.push(beforeHoverOverlayClass.value)
 
-  // Focus ring + open-state border are trigger-specific (a button has no
-  // open state). Error keeps its danger-colored focus ring; everything else
-  // uses the standard primary focus highlight.
+  // The open-state border is trigger-specific: a button has no open state.
   if (props.error) {
-    state.push(
-      'focus-visible:border-borders-danger-strong',
-      'focus-visible:ring-borders-danger-strong',
-      'data-[state=open]:border-borders-danger-strong',
-    )
+    state.push('data-[state=open]:border-control-error-border')
   }
   else {
-    state.push('focus-visible:ring-focus-ring')
     if (props.variant !== 'tertiary') {
+      state.push('data-[state=open]:border-control-field-border-focus')
+    }
+    if (props.variant !== 'tertiary' && buttonColor.value === 'neutral') {
       state.push(
-        'focus-visible:border-actions-primary-idle-alpha-strong',
-        'data-[state=open]:border-actions-primary-idle-alpha-strong',
+        'focus-visible:bg-control-field-bg-focus',
+        'data-[state=open]:bg-control-field-bg-focus',
       )
     }
   }
@@ -174,10 +231,12 @@ const textClasses = computed(() => {
     : isPrimary.value ? 'text-actions-primary-idle' : 'text-text-neutral-base'
   // Placeholder color: primary (incl. tertiary-primary) keeps the primary
   // token so an empty filter chip still reads as actionable; everything else
-  // uses the muted placeholder token.
-  const placeholderClass = (isPrimary.value || (isTertiary.value && props.color === 'primary'))
-    ? 'group-data-placeholder:text-actions-primary-idle'
-    : 'group-data-placeholder:text-text-neutral-tertiary'
+  // uses the muted placeholder token. A `value` slot renders a value, never the placeholder.
+  const placeholderClass = slots.value
+    ? ''
+    : (isPrimary.value || (isTertiary.value && props.color === 'primary'))
+        ? 'group-data-placeholder/trigger:text-actions-primary-idle'
+        : 'group-data-placeholder/trigger:text-control-placeholder'
   return [
     'flex-1',
     'overflow-hidden',
@@ -187,7 +246,7 @@ const textClasses = computed(() => {
     'text-left',
     colorClass,
     placeholderClass,
-    sizeClasses.value.text,
+    isTertiary.value ? sizeClasses.value.tertiaryText : sizeClasses.value.text,
   ].join(' ')
 })
 
@@ -203,17 +262,53 @@ const iconContainerClasses = computed(() => {
     isTertiary.value
       ? textClass.value
       : isPrimary.value ? 'text-actions-primary-idle' : 'text-text-neutral-tertiary',
-    iconSizeClass.value,
+    shape.value.chevron,
   ].join(' ')
 })
 </script>
 
 <template>
+  <span
+    v-if="readonly"
+    data-testid="ui-dropdown-trigger-readonly"
+    role="group"
+    v-bind="$attrs"
+    :class="[boxClasses, slots.leading ? sizeClasses.leadingPadding : sizeClasses.padding]"
+  >
+    <span
+      v-if="slots.leading"
+      data-testid="ui-dropdown-trigger-leading"
+      class="flex items-center justify-center shrink-0"
+      :class="sizeClasses.leadingBox"
+    >
+      <slot name="leading" />
+    </span>
+    <div :class="readonlyTextClasses">
+      <slot name="value">
+        {{ placeholder }}
+      </slot>
+    </div>
+    <span
+      v-if="showIcon"
+      class="shrink-0"
+      :class="shape.chevron"
+      aria-hidden="true"
+    />
+  </span>
   <SelectTrigger
+    v-else
     v-bind="$attrs"
-    :class="fieldClasses"
+    :class="[fieldClasses, slots.leading ? sizeClasses.leadingPadding : sizeClasses.padding]"
     :disabled="disabled"
   >
+    <span
+      v-if="slots.leading"
+      data-testid="ui-dropdown-trigger-leading"
+      class="flex items-center justify-center shrink-0"
+      :class="sizeClasses.leadingBox"
+    >
+      <slot name="leading" />
+    </span>
     <div :class="textClasses">
       <SelectValue
         v-if="!slots.value"
@@ -230,8 +325,8 @@ const iconContainerClasses = computed(() => {
       :class="iconContainerClasses"
     >
       <div
-        class="i-ph-caret-down transition-transform duration-200 ease-in-out group-data-[state=open]:rotate-180"
-        :class="iconSizeClass"
+        class="i-ph-caret-down transition-transform duration-200 ease-in-out group-data-[state=open]/trigger:rotate-180"
+        :class="shape.chevron"
       />
     </SelectIcon>
   </SelectTrigger>

package/src/components/UiDropdown/index.ts

@@ -3,6 +3,7 @@ export { default as UiDropdown } from './UiDropdown.vue'
 export { default as UiDropdownTrigger } from './UiDropdownTrigger.vue'
 export { default as UiDropdownContent } from './UiDropdownContent.vue'
 export { default as UiDropdownItem } from './UiDropdownItem.vue'
+export { default as UiDropdownGroup } from './UiDropdownGroup.vue'
 export { default as UiDropdownSeparator } from './UiDropdownSeparator.vue'
 
 // Re-export useful Reka UI types and components for advanced usage

package/src/components/UiEmojiPickerList/UiEmojiPickerList.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStorage } from '@vueuse/core'
+import EmojiPicker from 'vue-frimousse'
+import { useControlShape } from '../../composables/useControlShape'
+
+interface UiEmojiPickerListProps {
+  locale?: string
+  searchPlaceholder?: string
+  loadingLabel?: string
+  emptyLabel?: string
+  previewPlaceholder?: string
+  skinToneLabel?: string
+}
+
+const props = withDefaults(defineProps<UiEmojiPickerListProps>(), {
+  locale: 'en',
+  searchPlaceholder: 'Search emoji...',
+  loadingLabel: 'Loading...',
+  emptyLabel: 'No emoji found',
+  previewPlaceholder: 'Change emoji skintone',
+  skinToneLabel: 'Change skin tone',
+})
+
+const emit = defineEmits<{ select: [emoji: string] }>()
+
+type SkinTone = 'none' | 'light' | 'medium-light' | 'medium' | 'medium-dark' | 'dark'
+const skinTones: SkinTone[] = ['none', 'light', 'medium-light', 'medium', 'medium-dark', 'dark']
+const preferredSkinTone = useStorage<SkinTone>('livestorm:emoji-skin-tone', 'none')
+
+const searchShape = useControlShape('field', 'sm')
+
+const locale = computed(() => props.locale.toLowerCase().replace('_', '-'))
+
+function selectEmoji (emoji: { emoji: string }): void {
+  emit('select', emoji.emoji)
+}
+
+function cycleSkinTone (): void {
+  const currentIndex = skinTones.indexOf(preferredSkinTone.value)
+  preferredSkinTone.value = skinTones[(currentIndex + 1) % skinTones.length] ?? 'none'
+}
+</script>
+
+<template>
+  <EmojiPicker.Root
+    :locale="locale"
+    :columns="9"
+    :skin-tone="preferredSkinTone"
+    :on-emoji-select="selectEmoji"
+    class="flex flex-col gap-2"
+  >
+    <EmojiPicker.Search
+      class="w-full border border-borders-neutral-default bg-surface-neutral-bg-main px-2 text-content-legends-medium-md text-text-neutral-base outline-none placeholder:text-text-neutral-tertiary focus-visible:focus-ring"
+      :class="[searchShape.height, searchShape.radius]"
+      :placeholder="searchPlaceholder"
+    />
+
+    <EmojiPicker.Viewport class="box-border h-64 pr-2">
+      <EmojiPicker.Loading class="flex h-64 items-center justify-center text-content-legends-medium-md text-text-neutral-tertiary">
+        {{ loadingLabel }}
+      </EmojiPicker.Loading>
+      <EmojiPicker.Empty class="flex h-64 items-center justify-center text-content-legends-medium-md text-text-neutral-tertiary">
+        {{ emptyLabel }}
+      </EmojiPicker.Empty>
+      <EmojiPicker.List class="flex w-full flex-col gap-2">
+        <template #category-header="{ category }">
+          <div class="bg-surface-neutral-bg-main py-1 text-content-legends-bold-md text-text-neutral-secondary">
+            {{ category.label }}
+          </div>
+        </template>
+
+        <template #emoji="{ emoji }">
+          <button
+            type="button"
+            :aria-label="emoji.label"
+            class="flex size-button-sm w-full! items-center justify-center rounded-button-sm text-xl leading-none hover:bg-actions-neutral-hover-overlay data-[active]:bg-actions-neutral-hover-overlay"
+          >
+            {{ emoji.emoji }}
+          </button>
+        </template>
+      </EmojiPicker.List>
+    </EmojiPicker.Viewport>
+
+    <div class="flex h-10 items-center justify-between gap-2 border-t border-divider pt-2">
+      <EmojiPicker.ActiveEmoji>
+        <template #default="{ emoji }">
+          <span
+            v-if="emoji"
+            class="flex h-6 min-w-0 flex-1 items-center gap-2 text-content-legends-medium-md text-text-neutral-secondary"
+          >
+            <span class="flex size-6 shrink-0 items-center justify-center text-xl leading-none">{{ emoji.emoji }}</span>
+            <span class="min-w-0 truncate">{{ emoji.label }}</span>
+          </span>
+          <span
+            v-else
+            class="flex h-6 min-w-0 flex-1 items-center text-content-legends-medium-md text-text-neutral-secondary"
+          >{{ previewPlaceholder }}</span>
+        </template>
+      </EmojiPicker.ActiveEmoji>
+
+      <EmojiPicker.SkinToneSelector
+        class="flex size-button-sm shrink-0 items-center justify-center rounded-button-sm text-xl leading-none hover:bg-actions-neutral-hover-overlay"
+        :aria-label="skinToneLabel"
+        @click="cycleSkinTone"
+      />
+    </div>
+  </EmojiPicker.Root>
+</template>
+
+<style scoped>
+:deep([frimousse-row]) {
+  display: grid !important;
+  width: 100%;
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+  gap: 0.125rem;
+}
+
+:deep([frimousse-row] > [frimousse-emoji]) {
+  min-width: 0;
+}
+</style>

package/src/components/UiEmptyState/UiEmptyState.vue

@@ -1,6 +1,7 @@
 <!-- UiEmptyState.vue - Empty state component for showing placeholder content with optional illustration and actions. -->
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
+import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
 
 export interface UiEmptyStateProps {
   /** Title shown as the primary heading */
@@ -9,6 +10,8 @@ export interface UiEmptyStateProps {
   description?: string
   /** Optional illustration image URL */
   image?: string
+  /** Optional .lottie animation URL, takes precedence over `image` */
+  lottieSrc?: string
   /** Layout orientation. `vertical` stacks the illustration above the text; `horizontal` places it to the right. */
   variant?: 'vertical' | 'horizontal'
 }
@@ -16,6 +19,7 @@ export interface UiEmptyStateProps {
 const props = withDefaults(defineProps<UiEmptyStateProps>(), {
   description: undefined,
   image: undefined,
+  lottieSrc: undefined,
   variant: 'vertical',
 })
 
@@ -32,8 +36,14 @@ const isHorizontal = computed(() => props.variant === 'horizontal')
       ? 'flex-row items-center max-w-[576px] min-w-[384px]'
       : 'flex-col items-center max-w-[320px] min-w-[256px]'"
   >
+    <DotLottieVue
+      v-if="lottieSrc && !isHorizontal"
+      :src="lottieSrc"
+      autoplay
+      class="w-[270px]"
+    />
     <img
-      v-if="image && !isHorizontal"
+      v-else-if="image && !isHorizontal"
       :src="image"
       alt=""
       class="w-[270px]"
@@ -51,10 +61,12 @@ const isHorizontal = computed(() => props.variant === 'horizontal')
           {{ title }}
         </h3>
         <p
-          v-if="description"
-          class="text-content-text-md-regular text-text-neutral-tertiary"
+          v-if="description || $slots.description"
+          class="text-content-text-md-medium text-text-neutral-tertiary"
         >
-          {{ description }}
+          <slot name="description">
+            {{ description }}
+          </slot>
         </p>
       </div>
 

package/src/components/UiFieldWrapper/UiFieldWrapper.vue

@@ -45,7 +45,7 @@ defineExpose({ fieldId })
     >
       <Label
         :for="fieldId"
-        class="text-content-legends-bold-md text-text-neutral-tertiary"
+        class="text-content-legends-bold-md text-text-neutral-secondary"
       >
         {{ label }}{{ required ? '*' : '' }}
       </Label>
@@ -70,9 +70,15 @@ defineExpose({ fieldId })
       <p
         v-if="displayMessage"
         :id="`${fieldId}-message`"
-        class="text-content-legends-bold-md"
-        :class="error ? 'text-text-danger-secondary' : 'text-text-neutral-secondary'"
+        class="flex items-center gap-1 text-content-legends-bold-md"
+        :class="error ? 'text-text-danger-body' : 'text-text-neutral-secondary'"
       >
+        <span
+          v-if="error"
+          class="i-ph-warning-circle size-4 shrink-0"
+          data-testid="ui-field-wrapper-error-icon"
+          aria-hidden="true"
+        />
         {{ displayMessage }}
       </p>
       <slot name="footer" />