@livestorm/ui-vue 2.0.4 → 3.0.0

package/src/components/UiAvatar/UiAvatar.vue

@@ -80,7 +80,7 @@ const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   alt: undefined,
   color: null,
-  icon: 'i-ls-user-fill',
+  icon: 'i-ph-user-fill',
 })
 
 const customStyle = computed(() => {

package/src/components/UiBanner/UiBanner.vue

@@ -115,11 +115,11 @@ onMounted(() => {
 // Icon mapping based on color
 const iconClass = computed(() => {
   const colorMap = {
-    neutral: 'i-ls-info',
-    primary: 'i-ls-info',
-    success: 'i-ls-check-circle',
-    warning: 'i-ls-alert-triangle',
-    danger: 'i-ls-alert-circle',
+    neutral: 'i-ph-info',
+    primary: 'i-ph-info',
+    success: 'i-ph-check-circle',
+    warning: 'i-ph-warning',
+    danger: 'i-ph-warning-circle',
   }
   return colorMap[props.color]
 })
@@ -295,7 +295,7 @@ function handleAction () {
       <!-- Icon -->
       <div
         v-if="showIcon"
-        class="shrink-0 w-4 h-4"
+        class="shrink-0 size-5"
         :class="[iconClass, titleColorClass]"
       />
 
@@ -355,7 +355,7 @@ function handleAction () {
         :label="translate('general_close')"
         variant="tertiary"
         color="neutral"
-        icon="i-ls-x"
+        icon="i-ph-x"
         class="shrink-0"
         data-testid="ui-banner-close"
         @click="handleClose"

package/src/components/UiButton/UiButton.vue

@@ -86,6 +86,7 @@ import { computed, getCurrentInstance, watch } from 'vue'
 import { useSlotsAsComponents, RenderSlot } from '../../utils/slot'
 import { SIZES, type Size } from '../../constants'
 import { useButtonStyles, BUTTON_COLORS, type ButtonVariant, type ButtonColor } from '../../composables/useButtonStyles'
+import { useIconSize } from '../../composables/useIconSize'
 import UiLoader from '../UiLoader/UiLoader.vue'
 import UiTooltip from '../UiTooltip/UiTooltip.vue'
 import type { RouteLocationRaw } from 'vue-router'
@@ -107,7 +108,7 @@ export default {
       default: 'cta',
     },
     size: {
-      type: String,
+      type: String as () => Size,
       default: 'md',
       validator: (value: Size) => SIZES.includes(value),
     },
@@ -223,11 +224,7 @@ export default {
     const isLink = computed(() => !finalDisabled.value && (!!props.href || !!props.to))
 
     // Icon size classes
-    const iconSizeClasses = computed(() => ({
-      'size-3': props.size === 'sm',
-      'size-4': props.size === 'md',
-      'size-5': props.size === 'lg',
-    }))
+    const iconSizeClasses = useIconSize(() => props.size)
 
     // Label value
     const labelFinal = computed(() => {
@@ -237,8 +234,8 @@ export default {
 
       // Fallback: generate label from icon for icon-only buttons
       if (isSquare.value && props.icon && typeof props.icon === 'string') {
-        // Extract readable name from icon class (e.g. "i-ls-settings" -> "settings")
-        const iconName = props.icon.replace(/^i-ls-/, '').replace(/-/g, ' ')
+        // Extract readable name from icon class (e.g. "i-ph-gear" -> "gear")
+        const iconName = props.icon.replace(/^i-[a-z0-9]+-/, '').replace(/-/g, ' ')
         return iconName ? `${iconName} icon` : 'icon'
       }
 
@@ -258,17 +255,20 @@ export default {
     // Style: Dynamic button classes
     const buttonClasses = computed(() => [
       {
+        'size-6': isSquare.value && props.size === 'xs',
         'size-8': isSquare.value && props.size === 'sm',
         'size-10': isSquare.value && props.size === 'md',
         'size-12': isSquare.value && props.size === 'lg',
       },
       { 'grid place-items-center': isSquare.value },
       {
+        // xs reuses the sm text style — the design system defines no xs one
+        'h-6 text-action-button-sm': props.size === 'xs',
         'h-8 text-action-button-sm': props.size === 'sm',
         'h-10 text-action-button-md': props.size === 'md',
         'h-12 text-action-button-lg': props.size === 'lg',
       },
-      props.size === 'sm' ? 'px-2.5' : props.size === 'lg' ? 'px-4' : 'px-3',
+      props.size === 'xs' ? 'px-2' : props.size === 'sm' ? 'px-2.5' : props.size === 'lg' ? 'px-4' : 'px-3',
       // Links should be inline-flex to prevent full width while maintaining flex centering
       { 'inline-flex': isLink.value },
     ])

package/src/components/UiButtonGroup/UiButtonGroup.vue

@@ -69,6 +69,8 @@ const indicatorStyle = ref<Record<string, string>>({
 const indicatorVisible = ref(false)
 
 function getRootEl (): HTMLElement | null {
+  // HTMLElement does not exist during SSR — this can run server-side.
+  if (typeof HTMLElement === 'undefined') return null
   const el = (rootRef.value as unknown as { $el?: unknown })?.$el
   return el instanceof HTMLElement ? el : null
 }
@@ -122,6 +124,7 @@ useResizeObserver(resizeTarget, debouncedUpdate)
 
 const sizeClasses = computed(() => {
   switch (props.size) {
+    case 'xs': return 'h-6 p-0.5 gap-0.5'
     case 'sm': return 'h-8 p-0.5 gap-0.5'
     case 'lg': return 'h-12 p-1 gap-1'
     case 'md':
@@ -148,6 +151,7 @@ const INDICATOR_BG: Record<ButtonGroupColor, string> = {
 }
 
 const INDICATOR_RADIUS: Record<ButtonGroupSize, string> = {
+  xs: 'rounded-md',
   sm: 'rounded-md',
   md: 'rounded-lg',
   lg: 'rounded-lg',

package/src/components/UiButtonGroup/UiButtonGroupItem.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ToggleGroupItem } from 'reka-ui'
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useIconSize } from '../../composables/useIconSize'
 import type { ButtonGroupColor } from './types'
 import {
   BUTTON_GROUP_COLOR_KEY,
@@ -12,11 +13,14 @@ interface UiButtonGroupItemProps {
   value: string
   disabled?: boolean
   ariaLabel?: string
+  /** Icon class (e.g. "i-ph-text-align-left") rendered before the slot, sized per group size. */
+  icon?: string
 }
 
 const props = withDefaults(defineProps<UiButtonGroupItemProps>(), {
   disabled: false,
   ariaLabel: undefined,
+  icon: undefined,
 })
 
 const size = inject(BUTTON_GROUP_SIZE_KEY, computed(() => 'md' as const))
@@ -26,6 +30,8 @@ const registry = inject(BUTTON_GROUP_REGISTER_KEY, null)
 const itemRef = ref<InstanceType<typeof ToggleGroupItem> | null>(null)
 
 function resolveEl (): HTMLElement | null {
+  // HTMLElement does not exist during SSR — this can run server-side.
+  if (typeof HTMLElement === 'undefined') return null
   const el = (itemRef.value as unknown as { $el?: unknown })?.$el
   return el instanceof HTMLElement ? el : null
 }
@@ -53,6 +59,7 @@ onBeforeUnmount(() => {
 // (rail height − rail padding) in horizontal mode, and drives height in vertical mode.
 const sizeClasses = computed(() => {
   switch (size.value) {
+    case 'xs': return 'px-2 py-0.5 gap-1 rounded-md text-action-button-sm'
     case 'sm': return 'px-2.5 py-1.5 gap-1 rounded-md text-action-button-sm'
     case 'lg': return 'px-6 py-2.5 gap-2 rounded-lg text-action-button-lg'
     case 'md':
@@ -60,6 +67,8 @@ const sizeClasses = computed(() => {
   }
 })
 
+const iconSizeClass = useIconSize(size)
+
 // Per-color state classes. The selected fill is drawn by the parent's sliding
 // indicator <div>, so items only set text color per state. Hover bg/text apply
 // only to unselected items (data-[state=off]) so the hover tint never stacks
@@ -118,6 +127,11 @@ const colorClasses = computed(() => COLOR_CLASSES[color.value])
            data-[state=off]:data-[disabled]:hover:bg-transparent"
     :class="[sizeClasses, colorClasses]"
   >
+    <span
+      v-if="icon"
+      :class="[icon, iconSizeClass]"
+      class="shrink-0"
+    />
     <slot />
   </ToggleGroupItem>
 </template>

package/src/components/UiButtonGroup/types.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef, InjectionKey } from 'vue'
 
-export type ButtonGroupSize = 'sm' | 'md' | 'lg'
+export type ButtonGroupSize = 'xs' | 'sm' | 'md' | 'lg'
 export type ButtonGroupColor =
   | 'neutral'
   | 'neutral-invert'

package/src/components/UiCarousel/UiCarousel.vue

@@ -176,7 +176,7 @@ defineExpose({
         variant="tertiary"
         color="primary"
         size="md"
-        icon="i-ls-chevron-left"
+        icon="i-ph-caret-left"
         label="Previous slide"
         :disabled="!canScrollPrev"
         @click="scrollPrev"
@@ -205,7 +205,7 @@ defineExpose({
         variant="tertiary"
         color="primary"
         size="md"
-        icon="i-ls-chevron-right"
+        icon="i-ph-caret-right"
         label="Next slide"
         :disabled="!canScrollNext"
         @click="scrollNext"

package/src/components/UiColorPicker/UiColorPicker.vue

@@ -54,8 +54,8 @@ const presetsLabel = computed<string | null>(() => {
 // Preset selector swatch sizes; the selection check icon scales to half the swatch.
 // maxPerRow is how many swatches (at that size + gap) fit the panel's content width.
 const SWATCH_SIZE_CLASSES: Record<UiColorPickerSwatchSize, { swatch: string; swatchPickerList: string; indicatorWrapper: string; indicator: string; maxPerRow: number }> = {
-  sm: { swatch: 'size-6', swatchPickerList: 'gap-2', indicatorWrapper: 'ring-2', indicator: 'h-3 w-3', maxPerRow: 8 },
-  lg: { swatch: 'size-12', swatchPickerList: 'gap-4', indicatorWrapper: 'ring-4', indicator: 'h-4 w-4', maxPerRow: 4 },
+  sm: { swatch: 'size-6', swatchPickerList: 'gap-2', indicatorWrapper: 'ring-2', indicator: 'size-3', maxPerRow: 8 },
+  lg: { swatch: 'size-12', swatchPickerList: 'gap-4', indicatorWrapper: 'ring-4', indicator: 'size-5', maxPerRow: 4 },
 }
 const swatchSizeClasses = computed(() => SWATCH_SIZE_CLASSES[props.presetConfig?.swatchSize ?? 'lg'])
 
@@ -328,7 +328,7 @@ watch(
       <!-- Mode switcher — its own bordered box; hidden when only one mode is available -->
       <div
         v-if="showSwitcher"
-        class="h-full w-20 shrink-0"
+        class="h-full w-21 shrink-0"
       >
         <UiDropdown
           v-model="colorMode"
@@ -456,7 +456,7 @@ watch(
                 class="absolute inset-0 flex items-center justify-center rounded-full bg-actions-neutral-hover-overlay opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
               >
                 <div
-                  class="i-ls-check-circle-fill text-text-neutral-invert-tertiary"
+                  class="i-ph-check-circle-fill text-text-neutral-invert-tertiary"
                   :class="swatchSizeClasses.indicator"
                 />
               </span>
@@ -472,7 +472,7 @@ watch(
             :class="swatchSizeClasses.indicatorWrapper"
           >
             <div
-              class="i-ls-check-circle-fill text-text-neutral-invert-base"
+              class="i-ph-check-circle-fill text-text-neutral-invert-base"
               :class="swatchSizeClasses.indicator"
             />
           </span>

package/src/components/UiDialog/MarketplaceHeaderExample.vue

@@ -150,14 +150,14 @@ const goToImage = (index: number) => {
                   class="absolute left-4 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-surface-neutral-bg-main/80 backdrop-blur-xs flex items-center justify-center hover:bg-surface-neutral-bg-main transition-colors"
                   @click="prevImage"
                 >
-                  <span class="i-ls-chevron-left w-4 h-4 text-text-neutral-base" />
+                  <span class="i-ph-caret-left w-4 h-4 text-text-neutral-base" />
                 </button>
                 <button
                   v-if="images.length > 1"
                   class="absolute right-4 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-surface-neutral-bg-main/80 backdrop-blur-xs flex items-center justify-center hover:bg-surface-neutral-bg-main transition-colors"
                   @click="nextImage"
                 >
-                  <span class="i-ls-chevron-right w-4 h-4 text-text-neutral-base" />
+                  <span class="i-ph-caret-right w-4 h-4 text-text-neutral-base" />
                 </button>
 
                 <!-- Dots indicator -->

package/src/components/UiDialog/UiDialogClose.vue

@@ -21,7 +21,7 @@ withDefaults(defineProps<UiDialogCloseProps>(), {
       variant="tertiary"
       color="neutral"
       size="md"
-      icon="i-ls-x-stream"
+      icon="i-ph-x"
       :aria-label="ariaLabel"
       :data-colors-semantic="mode"
     />

package/src/components/UiDropdown/UiDropdownContent.vue

@@ -46,7 +46,7 @@ const slots = useSlots()
           v-if="showScrollButtons"
           class="flex items-center justify-center h-6 cursor-default text-text-neutral-base"
         >
-          <div class="i-ls-chevron-up size-4" />
+          <div class="i-ph-caret-up size-4" />
         </SelectScrollUpButton>
 
         <SelectViewport class="flex flex-col gap-1">
@@ -57,7 +57,7 @@ const slots = useSlots()
           v-if="showScrollButtons"
           class="flex items-center justify-center h-6 cursor-default text-text-neutral-base"
         >
-          <div class="i-ls-chevron-down size-4" />
+          <div class="i-ph-caret-down size-4" />
         </SelectScrollDownButton>
       </div>
 

package/src/components/UiDropdown/UiDropdownItem.vue

@@ -48,8 +48,15 @@ const isMultiple = inject(UI_DROPDOWN_MULTIPLE_KEY, undefined)
         class="shrink-0 group-data-highlighted:text-actions-neutral-idle group-data-[state=checked]:text-actions-primary-idle"
       />
 
+      <div
+        v-if="$slots.leading"
+        class="shrink-0"
+      >
+        <slot name="leading" />
+      </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-regular text-actions-neutral-idle group-data-highlighted:text-actions-neutral-idle group-data-[state=checked]:text-actions-primary-idle">
+        <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">
           <slot name="title">
             {{ title }}
           </slot>

package/src/components/UiDropdown/UiDropdownTrigger.vue

@@ -3,6 +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'
 
 type TSize = 'sm' | 'md' | 'lg' | 'xl'
 type TColor = 'neutral' | 'primary'
@@ -59,25 +60,21 @@ const sizeClasses = computed(() => {
     sm: {
       field: 'h-8 px-2 gap-1',
       text: 'text-action-button-sm tracking-[0.05px]',
-      icon: 'size-3',
       padding: 'px-2',
     },
     md: {
       field: 'h-10 px-3 gap-1.5',
       text: 'text-action-button-md leading-[20px] tracking-[-0.04px]',
-      icon: 'size-4',
       padding: 'px-3',
     },
     lg: {
       field: 'h-12 px-4 gap-2',
       text: 'text-action-button-lg leading-[20px] tracking-[-0.04px]',
-      icon: 'size-4',
       padding: 'px-4',
     },
     xl: {
       field: 'h-16 px-4 gap-2',
       text: 'text-action-button-lg leading-[24px] tracking-[-0.04px]',
-      icon: 'size-6',
       padding: 'px-4',
     },
   }
@@ -85,6 +82,8 @@ const sizeClasses = computed(() => {
   return sizes[props.size]
 })
 
+const iconSizeClass = useIconSize(() => props.size)
+
 const fieldClasses = computed(() => {
   const base = [
     'focus-indicator-none',
@@ -204,7 +203,7 @@ const iconContainerClasses = computed(() => {
     isTertiary.value
       ? textClass.value
       : isPrimary.value ? 'text-actions-primary-idle' : 'text-text-neutral-tertiary',
-    sizeClasses.value.icon,
+    iconSizeClass.value,
   ].join(' ')
 })
 </script>
@@ -231,8 +230,8 @@ const iconContainerClasses = computed(() => {
       :class="iconContainerClasses"
     >
       <div
-        class="i-ls-chevron-down transition-transform duration-200 ease-in-out group-data-[state=open]:rotate-180"
-        :class="sizeClasses.icon"
+        class="i-ph-caret-down transition-transform duration-200 ease-in-out group-data-[state=open]:rotate-180"
+        :class="iconSizeClass"
       />
     </SelectIcon>
   </SelectTrigger>

package/src/components/UiFieldWrapper/UiFieldWrapper.vue

@@ -54,7 +54,7 @@ defineExpose({ fieldId })
         :content="labelInfo"
       >
         <div class="flex items-center justify-center size-4 text-text-neutral-secondary cursor-help">
-          <span class="i-ls-info size-4" />
+          <span class="i-ph-info size-4" />
         </div>
       </UiTooltip>
     </div>

package/src/components/UiInputCheckbox/UiInputCheckbox.vue

@@ -191,7 +191,7 @@ const iconClasses = computed(() => {
 
   // Icon type and color based on state
   if (props.indeterminate) {
-    baseClasses.push('i-ls-minus text-actions-neutral-invert-idle opacity-100')
+    baseClasses.push('i-ph-minus text-actions-neutral-invert-idle opacity-100')
   } else if (isChecked.value) {
     // Checked: always visible with light color on primary/error background
     baseClasses.push('i-ls-checkbox-check text-actions-neutral-invert-idle opacity-100')
@@ -403,7 +403,7 @@ defineExpose({
               'text-text-primary-base': isChecked && !error,
             }"
           >
-            <span class="i-ls-info-fill size-4" />
+            <span class="i-ph-info-fill size-4" />
           </div>
         </UiTooltip>
       </div>

package/src/components/UiInputEmoji/UiInputEmoji.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useStorage } from '@vueuse/core'
+import EmojiPicker from 'vue-frimousse'
+import UiPopover from '../UiPopover/UiPopover.vue'
+import UiPopoverContent from '../UiPopover/UiPopoverContent.vue'
+import UiPopoverTrigger from '../UiPopover/UiPopoverTrigger.vue'
+
+interface UiInputEmojiProps {
+  disabled?: boolean
+  label?: string
+  locale?: string
+  searchPlaceholder?: string
+  loadingLabel?: string
+  emptyLabel?: string
+  previewPlaceholder?: string
+  skinToneLabel?: string
+  sideOffset?: number
+  open?: boolean
+}
+
+const props = withDefaults(defineProps<UiInputEmojiProps>(), {
+  disabled: false,
+  label: 'Emoji',
+  locale: 'en',
+  searchPlaceholder: 'Search emoji...',
+  loadingLabel: 'Loading...',
+  emptyLabel: 'No emoji found',
+  previewPlaceholder: 'Select an emoji',
+  skinToneLabel: 'Change skin tone',
+  sideOffset: 8,
+  open: undefined,
+})
+
+const emit = defineEmits<{
+  select: [emoji: string]
+  'update:open': [value: boolean]
+}>()
+
+const uncontrolledOpen = ref(false)
+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 open = computed({
+  get: () => props.open ?? uncontrolledOpen.value,
+  set: (value: boolean) => {
+    uncontrolledOpen.value = value
+    emit('update:open', value)
+  },
+})
+
+const locale = computed(() => props.locale.toLowerCase().replace('_', '-'))
+
+function selectEmoji (emoji: { emoji: string }): void {
+  emit('select', emoji.emoji)
+  open.value = false
+}
+
+function cycleSkinTone (): void {
+  const currentIndex = skinTones.indexOf(preferredSkinTone.value)
+  preferredSkinTone.value = skinTones[(currentIndex + 1) % skinTones.length] ?? 'none'
+}
+</script>
+
+<template>
+  <UiPopover v-model:open="open">
+    <UiPopoverTrigger
+      as-child
+      :disabled="disabled"
+    >
+      <slot
+        :open="open"
+        :disabled="disabled"
+      >
+        <button
+          type="button"
+          :aria-label="label"
+          :disabled="disabled"
+          class="inline-flex size-8 items-center justify-center rounded-lg text-actions-neutral-idle hover:bg-actions-neutral-hover-overlay disabled:pointer-events-none disabled:opacity-50"
+        >
+          <span
+            class="i-ph-smiley size-4"
+            aria-hidden="true"
+          />
+        </button>
+      </slot>
+    </UiPopoverTrigger>
+
+      <UiPopoverContent
+        side="top"
+        :side-offset="sideOffset"
+      class="w-[min(320px,calc(100vw-16px))] overflow-hidden border-borders-neutral-default bg-surface-neutral-bg-main p-0"
+      :aria-label="label"
+    >
+      <EmojiPicker.Root
+        :locale="locale"
+        :columns="9"
+        :skin-tone="preferredSkinTone"
+        :on-emoji-select="selectEmoji"
+        class="flex flex-col gap-2 p-3"
+      >
+        <EmojiPicker.Search
+          class="h-8 w-full rounded-md 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:border-actions-primary-idle-alpha-strong focus:ring-1 focus:ring-focus-ring"
+          :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-8 w-full! items-center justify-center rounded-md 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-borders-neutral-default 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-8 shrink-0 items-center justify-center rounded-md text-xl leading-none hover:bg-actions-neutral-hover-overlay"
+            :aria-label="skinToneLabel"
+            @click="cycleSkinTone"
+          />
+        </div>
+      </EmojiPicker.Root>
+    </UiPopoverContent>
+  </UiPopover>
+</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/UiInputEmoji/index.ts

@@ -0,0 +1 @@
+export { default as UiInputEmoji } from './UiInputEmoji.vue'