@livestorm/ui-vue 2.0.5 → 3.0.0

package/src/components/UiActionBar/UiActionBarItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed, inject, useAttrs } from 'vue'
 import {
   TooltipProvider,
   TooltipRoot,
@@ -9,16 +9,21 @@ import {
   TooltipArrow,
 } from 'reka-ui'
 import type { RouteLocationRaw } from 'vue-router'
+import { useIconSize } from '../../composables/useIconSize'
+import type { ActionBarSize } from './types'
 import { ACTION_BAR_CONTEXT_KEY } from './types'
 
 interface UiActionBarItemProps {
-  /** Icon class, e.g. `i-ls-trash`. */
+  /**
+   * Icon class, e.g. `i-ph-trash`. Ignored when the `icon` slot is filled —
+   * use the slot for glyphs no icon class covers (emoji, an avatar, a dot).
+   */
   icon?: string
   /** Visible/accessible label. Required so icon-only items stay accessible. */
   label: string
   /**
    * Optional icon class rendered next to the label inside the hover tooltip —
-   * e.g. `i-ls-external-link` to flag that the action opens in a new tab.
+   * e.g. `i-ph-arrow-square-out` to flag that the action opens in a new tab.
    * Only shown for icon-only items (the tooltip is suppressed when
    * `showLabel` is set).
    */
@@ -55,13 +60,20 @@ const props = withDefaults(defineProps<UiActionBarItemProps>(), {
 
 const emit = defineEmits<{ click: [event: MouseEvent] }>()
 
+// The trigger is rendered through `TooltipTrigger as-child`, which merges its
+// own props over the child vnode — so normal attribute fallthrough never
+// reaches the button. Read the consumer's `data-testid` explicitly, otherwise
+// every item in a wrapped bar would share one indistinguishable test id.
+const attrs = useAttrs()
+const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'ui-action-bar-item')
+
 const ctx = inject(ACTION_BAR_CONTEXT_KEY, null)
 const size = computed(() => ctx?.size.value ?? 'md')
 const orientation = computed(() => ctx?.orientation.value ?? 'horizontal')
 
 // Icon-only items get a tooltip; labeled items don't need one.
 const showTooltip = computed(() => !props.showLabel)
-const tooltipSide = computed(() => (orientation.value === 'vertical' ? 'right' : 'bottom'))
+const tooltipSide = computed(() => ctx?.tooltipSide.value ?? (orientation.value === 'vertical' ? 'right' : 'bottom'))
 
 const component = computed(() => {
   if (props.disabled) return { is: 'button', props: { type: 'button', disabled: true } }
@@ -70,22 +82,30 @@ const component = computed(() => {
   return { is: 'button', props: { type: 'button' } }
 })
 
-const sizeClasses = computed(() => {
-  const square = size.value === 'sm' ? 'size-8' : 'size-10'
-  // Labeled items grow with their text instead of staying square.
-  const padded = size.value === 'sm' ? 'h-8 px-2.5 gap-1' : 'h-10 px-3 gap-1.5'
-  return props.showLabel ? padded : square
-})
+// Per-size layout classes. `square` sizes icon-only items; labeled items use
+// `padded` and grow with their text instead of staying square. xs reuses the
+// sm text style — the design system defines no xs one.
+const SIZE_CLASSES: Record<ActionBarSize, { square: string, padded: string, text: string }> = {
+  xs: { square: 'size-6', padded: 'h-6 px-2 gap-1', text: 'text-action-button-sm' },
+  sm: { square: 'size-8', padded: 'h-8 px-2.5 gap-1', text: 'text-action-button-sm' },
+  md: { square: 'size-10', padded: 'h-10 px-3 gap-1.5', text: 'text-action-button-md' },
+}
 
-const iconSizeClass = computed(() => (size.value === 'sm' ? 'size-4' : 'size-5'))
-const textClass = computed(() => (size.value === 'sm' ? 'text-action-button-sm' : 'text-action-button-md'))
+const sizeConfig = computed(() => SIZE_CLASSES[size.value])
+const iconSizeClass = useIconSize(size)
 
-// Persistent pressed background when the item is an active toggle. Uses the
-// dedicated neutral "active" token so an active-but-not-hovered toggle stays
-// visually distinct from a merely hovered item.
-const stateClasses = computed(() => ({
-  'bg-actions-neutral-active-overlay': props.active === true,
-}))
+// Everything bound on the item root: per-size layout and text classes, plus
+// the persistent pressed background when the item is an active toggle (the
+// dedicated neutral "active" token keeps an active-but-not-hovered toggle
+// visually distinct from a merely hovered item).
+const itemClasses = computed(() => [
+  props.showLabel ? sizeConfig.value.padded : sizeConfig.value.square,
+  sizeConfig.value.text,
+  {
+    'bg-actions-neutral-active-overlay': props.active === true,
+    'cursor-pointer': !props.disabled,
+  },
+])
 
 function onClick (event: MouseEvent) {
   if (props.disabled) {
@@ -113,20 +133,22 @@ function onClick (event: MouseEvent) {
           v-bind="component.props"
           :aria-label="label"
           :aria-pressed="active"
-          data-testid="ui-action-bar-item"
+          :data-testid="testId"
           class="group inline-flex items-center justify-center rounded-lg shrink-0 outline-none transition-colors
                text-actions-neutral-idle
                hover:bg-actions-neutral-hover-overlay
                focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring
                disabled:opacity-50 disabled:cursor-not-allowed"
-          :class="[sizeClasses, textClass, stateClasses, { 'cursor-pointer': !disabled }]"
+          :class="itemClasses"
           @click="onClick"
         >
-          <span
-            v-if="icon"
-            :class="[icon, iconSizeClass]"
-            class="shrink-0"
-          />
+          <slot name="icon">
+            <span
+              v-if="icon"
+              :class="[icon, iconSizeClass]"
+              class="shrink-0"
+            />
+          </slot>
         </component>
       </TooltipTrigger>
       <TooltipPortal>
@@ -160,20 +182,22 @@ function onClick (event: MouseEvent) {
     v-bind="component.props"
     :aria-label="label"
     :aria-pressed="active"
-    data-testid="ui-action-bar-item"
+    :data-testid="testId"
     class="group inline-flex items-center justify-center rounded-lg shrink-0 outline-none transition-colors
            text-actions-neutral-idle
            hover:bg-actions-neutral-hover-overlay
            focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring
            disabled:opacity-50 disabled:cursor-not-allowed"
-    :class="[sizeClasses, textClass, stateClasses, { 'cursor-pointer': !disabled }]"
+    :class="itemClasses"
     @click="onClick"
   >
-    <span
-      v-if="icon"
-      :class="[icon, iconSizeClass]"
-      class="shrink-0"
-    />
+    <slot name="icon">
+      <span
+        v-if="icon"
+        :class="[icon, iconSizeClass]"
+        class="shrink-0"
+      />
+    </slot>
     <span class="whitespace-nowrap">{{ label }}</span>
   </component>
 </template>

package/src/components/UiActionBar/types.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, InjectionKey } from 'vue'
 
 export type ActionBarOrientation = 'horizontal' | 'vertical'
-export type ActionBarSize = 'sm' | 'md'
+export type ActionBarSize = 'xs' | 'sm' | 'md'
 export type ActionBarPosition =
   | 'top-left'
   | 'top-right'
@@ -9,10 +9,12 @@ export type ActionBarPosition =
   | 'center-right'
   | 'bottom-left'
   | 'bottom-right'
+export type ActionBarTooltipSide = 'top' | 'right' | 'bottom' | 'left'
 
 export interface ActionBarContext {
   orientation: ComputedRef<ActionBarOrientation>
   size: ComputedRef<ActionBarSize>
+  tooltipSide: ComputedRef<ActionBarTooltipSide | undefined>
 }
 
 /**

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

@@ -124,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':
@@ -150,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))
@@ -55,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':
@@ -62,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
@@ -120,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>