@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/UiInputRadio/UiInputRadio.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue'
-import { Label, RadioGroupItem, RadioGroupIndicator, useId } from 'reka-ui'
-import type { RadioValue, RadioVariant } from './types'
+import { computed, inject, provide, ref } from 'vue'
+import { Label, useId } from 'reka-ui'
+import type { RadioValue } from './types'
 import { RADIO_GROUP_KEY } from './types'
+import { CHOICE_ROW_KEY } from '../UiChoice/types'
+import type { ControlPosition } from '../UiChoice/types'
 import UiTooltip from '../UiTooltip/UiTooltip.vue'
+import RadioGlyph from './RadioGlyph.vue'
 
 interface UiInputRadioProps {
   /**
@@ -23,6 +26,11 @@ interface UiInputRadioProps {
    * Info tooltip for the label
    */
   labelInfo?: string
+  /**
+   * Icon class rendered between the radio and the text (e.g. `i-ph-bell`).
+   * In vertical orientation it sits above the text instead.
+   */
+  icon?: string
   /**
    * Whether this option is disabled
    * @default false
@@ -34,10 +42,10 @@ interface UiInputRadioProps {
    */
   orientation?: 'horizontal' | 'vertical'
   /**
-   * Visual variant: 'card' renders a selectable tile
-   * @default 'default'
+   * Which side of the text the radio sits on, in horizontal orientation
+   * @default 'start'
    */
-  variant?: RadioVariant
+  controlPosition?: ControlPosition
   /**
    * Radio id attribute
    */
@@ -48,10 +56,11 @@ const props = withDefaults(defineProps<UiInputRadioProps>(), {
   label: undefined,
   description: undefined,
   labelInfo: undefined,
+  icon: undefined,
   id: undefined,
+  controlPosition: 'start',
   disabled: false,
   orientation: 'horizontal',
-  variant: 'default',
 })
 
 const emit = defineEmits<{
@@ -61,6 +70,9 @@ const emit = defineEmits<{
 // Group context: UiInputRadio is only usable inside UiInputRadioGroup
 // (reka's RadioGroupItem enforces this too)
 const group = inject(RADIO_GROUP_KEY, undefined)
+const inChoiceRow = inject(CHOICE_ROW_KEY, false)
+// Controls in the content slot are not the row's control
+provide(CHOICE_ROW_KEY, false)
 
 const generatedId = useId()
 const inputId = computed(() => props.id ?? generatedId)
@@ -77,6 +89,11 @@ const isChecked = computed(() => {
 const isDisabled = computed(() => props.disabled || (group?.disabled.value ?? false))
 const error = computed(() => group?.error.value ?? false)
 const size = computed(() => group?.size.value ?? 'md')
+const isOptionRow = computed(() => props.orientation === 'horizontal')
+// Side by side, a choice keeps its title on one line: the choice widens or the row
+// wraps instead. A title wider than the whole row truncates.
+const titleOnOneLine = computed(() => inChoiceRow && group?.orientation.value === 'horizontal')
+const controlAtEnd = computed(() => props.orientation === 'horizontal' && props.controlPosition === 'end')
 
 const descriptionId = computed(() => props.description ? `${inputId.value}-description` : undefined)
 
@@ -87,145 +104,129 @@ const ariaDescribedby = computed(() => {
 
 const radioClasses = computed(() => {
   const baseClasses = [
-    'relative shrink-0 grid place-content-center',
-    'rounded-full',
-    'focus:outline-hidden',
+    'relative shrink-0 rounded-full border',
+    'focus:outline-hidden focus-indicator-none',
     'cursor-pointer disabled:cursor-not-allowed',
   ]
 
-  // Size classes
   const sizeClasses = {
-    sm: 'w-3.5 h-3.5',
-    md: 'w-4 h-4',
-    lg: 'w-5 h-5',
+    sm: 'size-unit-0-75rem',
+    md: 'size-check-sm',
+    lg: 'size-check-md',
   }
 
   baseClasses.push(sizeClasses[size.value])
 
-  // Selected is a full fill (the light inner circle turns it into a thick
-  // ring); unselected keeps a border that thickens on hover
+  // Checked is a thin ring around a dot on the light surface; unchecked is a denser
+  // fill than the fields, which once disabled falls back to the field fill with an outline
   if (isChecked.value) {
-    baseClasses.push('border-none')
-    baseClasses.push(error.value ? 'bg-actions-danger-idle' : 'bg-actions-primary-idle')
+    baseClasses.push('bg-surface-neutral-bg-main', checkedRingClass.value)
+  } else if (isDisabled.value && !error.value) {
+    baseClasses.push('bg-control-field-bg border-control-disabled-border')
   } else {
-    baseClasses.push('bg-surface-neutral-bg-main border')
-    baseClasses.push(error.value ? 'border-borders-danger-strong' : 'border-borders-neutral-strong')
+    baseClasses.push('bg-control-check-bg', error.value ? 'border-control-error-border' : 'border-control-field-border')
     if (!isDisabled.value) {
-      baseClasses.push('group-hover:border-2')
+      baseClasses.push('group-hover/option:bg-control-check-bg-hover')
     }
   }
 
-  // Focus ring
-  if (error.value) {
-    baseClasses.push('focus-visible:ring focus-visible:ring-borders-danger-strong')
-  } else if (isChecked.value) {
-    baseClasses.push('focus-visible:ring focus-visible:ring-borders-primary-strong')
-  } else {
-    baseClasses.push('focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring')
-  }
-
   return baseClasses
 })
 
-// Light inner circle of the selected state; grows on hover (ring thins) and
-// stays grown when disabled or errored — an errored selected radio is always
-// the thin ring. Fraction sizes scale with the sm/md/lg glyph.
-const indicatorClasses = computed(() => {
-  // Transform centering (not inset/margins): layout boxes get snapped to
-  // device pixels, which renders fractional gaps visibly off-center
-  const baseClasses = [
-    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full z-1',
-    'bg-surface-neutral-bg-main transition-all',
-  ]
-
-  if (isDisabled.value || error.value) {
-    baseClasses.push('size-3/4')
-  } else {
-    baseClasses.push('size-1/2 group-hover:size-3/4')
+// Transform centering (not inset/margins): layout boxes get snapped to
+// device pixels, which renders fractional gaps visibly off-center
+const dotClasses = computed(() => {
+  const sizeClasses = {
+    sm: 'size-unit-0-375rem',
+    md: 'size-unit-0-5rem',
+    lg: 'size-unit-0-625rem',
   }
-
-  return baseClasses
+  return ['absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full', sizeClasses[size.value]]
 })
 
-// Preview dot shown while hovering an unselected, enabled radio
-const previewDotClasses = computed(() => {
-  const baseClasses = [
-    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-1/2 rounded-full z-1',
-    'opacity-0 group-hover:opacity-50 transition-opacity pointer-events-none',
-  ]
-
-  baseClasses.push(error.value ? 'bg-actions-danger-idle' : 'bg-actions-neutral-idle')
+const checkedRingClass = computed(() => {
+  if (error.value) {
+    return 'border-actions-danger-idle'
+  }
+  return isDisabled.value ? 'border-borders-neutral-strong' : 'border-actions-primary-idle'
+})
 
-  return baseClasses
+const indicatorClasses = computed(() => {
+  if (error.value) {
+    return [...dotClasses.value, 'bg-actions-danger-idle']
+  }
+  return [...dotClasses.value, isDisabled.value ? 'bg-text-neutral-secondary' : 'bg-actions-primary-idle']
 })
 
-const hoverOverlayClasses = computed(() => ({
-  'bg-actions-neutral-hover-overlay': !isChecked.value && !error.value,
-  'bg-actions-danger-hover-overlay': error.value,
-  'bg-actions-primary-hover-overlay': isChecked.value && !error.value,
-}))
+// A choicebox tints its text with the selection. Disabled, a choicebox recedes
+// whole, while a plain option keeps its selection legible in neutral.
+const tone = computed(() => {
+  if (error.value) {
+    return 'danger'
+  }
+  if (isDisabled.value) {
+    return isChecked.value && !inChoiceRow ? 'neutral' : 'disabled'
+  }
+  return isChecked.value && inChoiceRow ? 'selected' : 'neutral'
+})
 
 const labelClasses = computed(() => ({
-  'text-text-neutral-base': !error.value && !isChecked.value,
-  'text-text-danger-base': error.value,
-  'text-text-primary-base': isChecked.value && !error.value,
+  'text-content-text-md-medium': inChoiceRow,
+  'text-content-text-md-regular': !inChoiceRow,
+  'text-text-neutral-base': tone.value === 'neutral',
+  'text-text-neutral-tertiary': tone.value === 'disabled',
+  'text-text-danger-base': tone.value === 'danger',
+  'text-text-primary-title': tone.value === 'selected',
+  'flex items-center min-w-0': titleOnOneLine.value,
   'cursor-not-allowed': isDisabled.value,
   'cursor-pointer': !isDisabled.value,
 }))
 
 const descriptionClasses = computed(() => ({
   'text-center': props.orientation === 'vertical',
-  'text-text-neutral-tertiary': !error.value && !isChecked.value,
-  'text-text-danger-tertiary': error.value,
-  'text-text-primary-tertiary': isChecked.value && !error.value,
+  'text-text-neutral-secondary': tone.value === 'neutral',
+  'text-text-neutral-tertiary': tone.value === 'disabled',
+  'text-text-danger-tertiary': tone.value === 'danger',
+  'text-text-primary-base': tone.value === 'selected',
   'cursor-not-allowed': isDisabled.value,
   'cursor-pointer': !isDisabled.value,
 }))
 
 const innerWrapperClasses = computed(() => {
-  // h-full + items-center let a consumer-sized card (e.g. h-[76px])
-  // center the glyph and text block vertically
-  const classes: string[] = ['group relative rounded-md flex h-full']
+  const classes: string[] = ['group/option relative flex h-full']
 
-  if (props.orientation === 'vertical') {
-    classes.push('flex-col items-center')
-  } else {
-    classes.push('items-center')
-  }
+  classes.push(props.orientation === 'vertical' ? 'flex-col items-center' : 'items-start')
 
-  if (isDisabled.value) {
-    classes.push('opacity-50 cursor-not-allowed')
-  } else {
-    classes.push('cursor-pointer')
+  if (isOptionRow.value && !inChoiceRow) {
+    // The row bleeds around the option without taking layout space, so a one-line
+    // option is a 32px hit target; hover shows on the glyph only. Inside UiChoice the choice draws the row.
+    classes.push('isolate before:absolute before:-inset-x-3 before:-inset-y-1.5 before:-z-10 before:rounded-field-md has-[[role=radio]:focus-visible]:before:focus-ring')
+  } else if (props.orientation === 'vertical') {
+    classes.push(inChoiceRow ? 'rounded-field-md' : 'rounded-field-md has-[[role=radio]:focus-visible]:focus-ring')
   }
 
-  if (props.variant === 'card') {
-    classes.push('p-2 ring-inset')
-    if (isChecked.value && !error.value) {
-      // checked
-      classes.push('bg-actions-primary-idle-alpha-light ring-2 ring-actions-primary-idle')
-    } else if (!isChecked.value && !error.value) {
-      // idle
-      classes.push('bg-actions-neutral-idle-alpha-light ring-transparent')
-    } else if (isChecked.value && error.value) {
-      // error + checked
-      classes.push('bg-actions-danger-idle-alpha-light ring-2 ring-actions-danger-idle')
-    } else {
-      // error + unchecked
-      classes.push('bg-actions-danger-idle-alpha-light')
-    }
-  }
+  classes.push(isDisabled.value ? 'cursor-not-allowed' : 'cursor-pointer')
 
   return classes
 })
 
-const itemRef = ref<InstanceType<typeof RadioGroupItem> | null>(null)
+const glyphProps = computed(() => ({
+  inputId: inputId.value,
+  value: props.value,
+  disabled: props.disabled,
+  error: error.value,
+  ariaDescribedby: ariaDescribedby.value,
+  radioClasses: radioClasses.value,
+  indicatorClasses: indicatorClasses.value,
+}))
+
+const glyphRef = ref<InstanceType<typeof RadioGlyph> | null>(null)
 
 function radioElement (): HTMLElement | undefined {
-  return (itemRef.value?.$el as HTMLElement | undefined) ?? undefined
+  return glyphRef.value?.el()
 }
 
-// Make the whole wrapper (description, padding, card surface) select the radio.
+// Make the whole wrapper (description, padding) select the radio.
 // Clicks on the button itself or on the label are skipped: the button handles
 // its own clicks and the label forwards to the button natively via `for`.
 function onWrapperClick (event: MouseEvent) {
@@ -242,6 +243,10 @@ function onWrapperClick (event: MouseEvent) {
   if (target.closest('label')) {
     return
   }
+  // Controls in the content slot handle their own clicks
+  if (target.closest('input, textarea, select, button, a')) {
+    return
+  }
 
   radioEl.click()
 }
@@ -253,86 +258,112 @@ defineExpose({
 </script>
 
 <template>
-  <!-- Cards are edge-to-edge interactive surfaces, so they fill their slot;
-       the default variant shrink-wraps to keep the click zone on content -->
+  <!-- An option that hosts a field or pushes its radio to the end fills its
+       slot; otherwise it shrink-wraps to keep the click zone on content -->
   <div
     class="ui-input-radio-wrapper"
-    :class="variant === 'card' ? 'w-full' : 'w-fit'"
+    data-testid="ui-input-radio"
+    :class="[$slots.content || controlAtEnd ? 'w-full' : 'w-fit', { 'max-w-full': titleOnOneLine }]"
   >
     <div
       :class="innerWrapperClasses"
+      data-testid="ui-input-radio-row"
       @click="onWrapperClick"
     >
-      <!-- Radio - horizontal only, centered against the whole text block -->
+      <!-- Radio - horizontal only. The box matches the label's line-height so
+           the glyph centers on the label line, and the checkbox's width so
+           labels line up; the glyph hugs the outer edge like a checkbox does -->
       <span
         v-if="orientation === 'horizontal'"
-        class="flex w-5 items-center justify-center shrink-0 mr-2"
+        class="flex size-5 items-center shrink-0"
+        :class="controlAtEnd ? ['order-last justify-end', inChoiceRow ? 'ms-5' : 'ms-3'] : ['justify-start', inChoiceRow ? 'me-3' : 'me-1']"
       >
-        <RadioGroupItem
-          :id="inputId"
-          ref="itemRef"
-          :value="value"
-          :disabled="disabled"
-          :class="radioClasses"
-          :aria-invalid="error || undefined"
-          :aria-describedby="ariaDescribedby"
+        <RadioGlyph
+          ref="glyphRef"
+          v-bind="glyphProps"
           @select="emit('select', $event)"
-        >
-          <RadioGroupIndicator :class="indicatorClasses" />
+        />
+      </span>
+
+      <!-- Optional icon: between the radio and the text, or above the text in
+           vertical orientation. min-h-5 keeps a small icon on the label line -->
+      <span
+        v-if="icon || $slots.icon"
+        class="flex items-center justify-center shrink-0"
+        data-testid="ui-input-radio-icon"
+        :class="orientation === 'vertical' ? 'mb-2' : 'mr-2 min-h-5'"
+      >
+        <slot name="icon">
           <span
-            v-if="!isChecked && !isDisabled"
-            :class="previewDotClasses"
-          />
-          <div
-            v-if="!isDisabled"
-            class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
-            :class="hoverOverlayClasses"
+            class="size-4"
+            :class="[icon, {
+              'text-text-neutral-base': tone === 'neutral',
+              'text-text-neutral-tertiary': tone === 'disabled',
+              'text-text-danger-base': tone === 'danger',
+              'text-text-primary-title': tone === 'selected',
+            }]"
           />
-        </RadioGroupItem>
+        </slot>
       </span>
 
       <div
         class="flex flex-col min-w-0"
-        :class="orientation === 'vertical' ? 'items-center' : 'flex-1'"
+        :class="[orientation === 'vertical' ? 'items-center' : 'flex-1', inChoiceRow ? 'gap-1' : 'gap-0.5']"
+        data-testid="ui-input-radio-text"
       >
-        <div class="flex items-center">
-          <Label
-            :for="inputId"
-            class="text-content-text-md-medium"
-            :class="labelClasses"
+        <Label
+          :for="inputId"
+          :class="labelClasses"
+        >
+          <span
+            v-if="titleOnOneLine"
+            class="truncate"
           >
             <slot name="label">
               {{ label }}
             </slot>
-          </Label>
+          </span>
+          <slot
+            v-else
+            name="label"
+          >
+            {{ label }}
+          </slot>
 
-          <!-- info tooltip -->
-          <UiTooltip
+          <!-- icon: inline so it wraps with the text instead of centering against the whole label block,
+               and the word joiner keeps it on the line of the last word.
+               -translate-y-px because the icon aligns with the text so that its visually centered -->
+          <span
             v-if="labelInfo"
-            :content="labelInfo"
-          >
-            <div
-              class="flex items-center justify-center size-4 cursor-help shrink-0 ml-1"
+            class="whitespace-nowrap before:content-['\2060']"
+          ><UiTooltip :content="labelInfo">
+            <span
+              class="inline-flex items-center justify-center size-4 ms-2 align-middle -translate-y-px cursor-help shrink-0"
               :class="{
-                'text-text-neutral-secondary': !error && !isChecked,
-                'text-text-danger-secondary': error,
-                'text-text-primary-secondary': isChecked && !error,
+                'text-text-neutral-tertiary': tone === 'neutral' || tone === 'disabled',
+                'text-text-danger-tertiary': tone === 'danger',
+                'text-text-primary-tertiary': tone === 'selected',
               }"
-              @click.stop
+              data-testid="ui-input-radio-label-info"
+              @click.stop.prevent
             >
               <span class="i-ph-info-fill size-4" />
-            </div>
-          </UiTooltip>
-        </div>
+            </span>
+          </UiTooltip></span>
+        </Label>
 
         <span
           v-if="description"
           :id="descriptionId"
-          class="text-content-text-md-medium"
+          class="text-content-text-md-regular"
           :class="descriptionClasses"
         >
           {{ description }}
         </span>
+
+        <!-- Extra content under the text, e.g. a field the option configures.
+             Sits outside the label so it stays out of the accessible name -->
+        <slot name="content" />
       </div>
 
       <!-- Radio - vertical only -->
@@ -340,35 +371,12 @@ defineExpose({
         v-if="orientation === 'vertical'"
         class="flex justify-center mt-2"
       >
-        <RadioGroupItem
-          :id="inputId"
-          ref="itemRef"
-          :value="value"
-          :disabled="disabled"
-          :class="radioClasses"
-          :aria-invalid="error || undefined"
-          :aria-describedby="ariaDescribedby"
+        <RadioGlyph
+          ref="glyphRef"
+          v-bind="glyphProps"
           @select="emit('select', $event)"
-        >
-          <RadioGroupIndicator :class="indicatorClasses" />
-          <span
-            v-if="!isChecked && !isDisabled"
-            :class="previewDotClasses"
-          />
-          <div
-            v-if="!isDisabled"
-            class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
-            :class="hoverOverlayClasses"
-          />
-        </RadioGroupItem>
+        />
       </span>
-
-      <!-- Card hover overlay -->
-      <div
-        v-if="variant === 'card' && !isDisabled"
-        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none rounded-md"
-        :class="hoverOverlayClasses"
-      />
     </div>
   </div>
 </template>

package/src/components/UiInputRadio/UiInputRadioGroup.vue

@@ -55,6 +55,10 @@ interface UiInputRadioGroupProps {
    * @default false
    */
   fullWidth?: boolean
+  /**
+   * Id of the element naming the group, set on the radiogroup itself
+   */
+  ariaLabelledby?: string
 }
 
 const props = withDefaults(defineProps<UiInputRadioGroupProps>(), {
@@ -68,6 +72,7 @@ const props = withDefaults(defineProps<UiInputRadioGroupProps>(), {
   size: 'md',
   orientation: 'vertical',
   fullWidth: false,
+  ariaLabelledby: undefined,
 })
 
 const emit = defineEmits<{
@@ -98,18 +103,21 @@ const displayMessage = computed(() => {
 
 const messageId = computed(() => displayMessage.value ? `${groupId}-message` : undefined)
 
-// items-stretch keeps card tiles equal-height when they share a row
+// items-stretch keeps card tiles equal-height when they share a row. The 12px
+// gap holds the 6px bleed of each option row, so one-line rows stay 32px hit
+// targets that never overlap.
 const rootClasses = computed(() =>
   props.orientation === 'horizontal'
-    ? 'flex flex-row flex-wrap items-stretch gap-2'
-    : 'flex flex-col gap-2',
+    ? 'flex flex-row flex-wrap items-stretch gap-3'
+    : 'flex flex-col gap-3',
 )
 
+// mt-1.5 clears the 6px bleed of the last option row
 const displayMessageClasses = computed(() => {
-  const baseClasses = ['text-content-legends-bold-md mt-1']
+  const baseClasses = ['text-content-legends-bold-md mt-1.5']
 
   if (props.error) {
-    baseClasses.push('text-text-danger-secondary')
+    baseClasses.push('text-text-danger-body')
   } else {
     baseClasses.push('text-text-neutral-secondary')
   }
@@ -121,6 +129,7 @@ provide(RADIO_GROUP_KEY, {
   modelValue: currentValue,
   error: toRef(props, 'error'),
   size: toRef(props, 'size'),
+  orientation: toRef(props, 'orientation'),
   disabled: toRef(props, 'disabled'),
   messageId,
 })
@@ -138,6 +147,7 @@ provide(RADIO_GROUP_KEY, {
       :loop="loop"
       :required="required"
       :orientation="orientation"
+      :aria-labelledby="ariaLabelledby"
       :class="rootClasses"
       @update:model-value="onUpdateModelValue"
     >

package/src/components/UiInputRadio/types.ts

@@ -3,8 +3,6 @@ import type { AcceptableValue } from 'reka-ui'
 
 export type RadioSize = 'sm' | 'md' | 'lg'
 
-export type RadioVariant = 'default' | 'card'
-
 /**
  * Valid radio option values. `null` is a supported option value;
  * `undefined` means "no selection". Object values must be reference-stable.
@@ -16,6 +14,7 @@ export interface RadioGroupContext {
   modelValue: Readonly<Ref<RadioValue | undefined>>
   error: Readonly<Ref<boolean>>
   size: Readonly<Ref<RadioSize>>
+  orientation: Readonly<Ref<'vertical' | 'horizontal'>>
   disabled: Readonly<Ref<boolean>>
   /** id of the group error message, for aria-describedby on items */
   messageId: Readonly<Ref<string | undefined>>

package/src/components/UiInputSelect/UiInputSelect.vue

@@ -7,6 +7,7 @@ import UiDropdownContent from '../UiDropdown/UiDropdownContent.vue'
 import UiDropdownItem from '../UiDropdown/UiDropdownItem.vue'
 import type { AcceptableValue } from 'reka-ui'
 import type { SelectSize } from './types'
+import { useControlShape } from '../../composables/useControlShape'
 
 interface UiInputSelectProps {
   size?: SelectSize
@@ -57,6 +58,8 @@ const props = withDefaults(defineProps<UiInputSelectProps>(), {
   multiple: false,
 })
 
+const shape = useControlShape('field', () => props.size)
+
 // Sentinel value for the "clear" option — intentionally verbose to avoid collisions with real values
 const CLEAR_VALUE = '__ui-input-select-clear__'
 
@@ -110,13 +113,12 @@ function handleUpdate (value: AcceptableValue) {
       <!-- Loading State -->
       <div
         v-if="loading"
-        class="flex items-center gap-2 w-full rounded-lg border border-solid border-borders-neutral-strong bg-actions-neutral-idle-alpha-light"
-        :class="{
-          'h-8 px-2': size === 'sm',
-          'h-10 px-3': size === 'md',
-          'h-12 px-4': size === 'lg',
-          'h-16 px-4': size === 'xl',
-        }"
+        class="flex items-center gap-2 w-full border border-solid border-control-field-border bg-control-field-bg"
+        :class="[shape.radius, shape.height, {
+          'px-2': size === 'sm',
+          'px-3': size === 'md',
+          'px-4': size === 'lg' || size === 'xl',
+        }]"
       >
         <div class="h-3 w-24 bg-surface-neutral-alpha-400 rounded-md animate-pulse" />
       </div>