@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/UiHorizontalSeparator/UiHorizontalSeparator.vue

@@ -5,7 +5,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="separator text-content-legends-medium-md">
+  <div class="separator text-content-legends-medium-md uppercase">
     <p
       class="w-full"
       v-text="props.label"
@@ -23,6 +23,6 @@ const props = defineProps<{
 .separator::before,
 .separator::after {
   content: '';
-  @apply border-t border-borders-neutral-light h-0 w-full;
+  @apply border-t border-container-border h-0 w-full;
 }
 </style>

package/src/components/UiInputCheckbox/CheckboxGlyph.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CheckboxSize } from './types'
+
+interface Props {
+  checked?: boolean
+  indeterminate?: boolean
+  error?: boolean
+  disabled?: boolean
+  size?: CheckboxSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  checked: false,
+  indeterminate: false,
+  error: false,
+  disabled: false,
+  size: 'md',
+})
+
+const checkedFillClass = computed(() => {
+  if (props.error) {
+    return 'bg-actions-danger-idle'
+  }
+  return props.disabled ? 'bg-surface-neutral-alpha-600' : 'bg-actions-primary-idle'
+})
+
+const boxClasses = computed(() => {
+  const classes = [
+    'relative shrink-0 grid place-content-center',
+    props.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+  ]
+
+  const sizeClasses = {
+    sm: 'size-unit-0-75rem rounded-4',
+    md: 'size-check-sm rounded-check',
+    lg: 'size-check-md rounded-check',
+  }
+  classes.push(sizeClasses[props.size])
+
+  // Checked is a plain fill, neutral once disabled; unchecked is a denser fill than the
+  // fields, which once disabled falls back to the field fill with an outline
+  if (props.checked || props.indeterminate) {
+    classes.push('border-none', checkedFillClass.value)
+  } else if (props.disabled && !props.error) {
+    classes.push('bg-control-field-bg border border-control-disabled-border')
+  } else {
+    classes.push('bg-control-check-bg border', props.error ? 'border-control-error-border' : 'border-control-field-border')
+    if (!props.disabled) {
+      classes.push('group-hover/option:bg-control-check-bg-hover')
+    }
+  }
+
+  return classes
+})
+
+const iconClasses = computed(() => {
+  const sizeClasses = {
+    sm: 'size-2',
+    md: 'size-2.5',
+    lg: 'size-3',
+  }
+  return ['block relative z-1 text-actions-neutral-invert-idle', sizeClasses[props.size], props.indeterminate ? 'i-ph-minus' : 'i-ls-checkbox-check']
+})
+</script>
+
+<template>
+  <span
+    :class="boxClasses"
+    aria-hidden="true"
+    data-testid="ui-checkbox-box"
+  >
+    <span
+      v-if="checked || indeterminate"
+      :class="iconClasses"
+    />
+  </span>
+</template>

package/src/components/UiInputCheckbox/UiInputCheckbox.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { computed, ref, watch, nextTick } from 'vue'
+import { computed, inject, ref, useSlots, watch, nextTick } from 'vue'
 import { Label, useId } from 'reka-ui'
 import type { CheckboxSize } from './types'
 import UiTooltip from '../UiTooltip/UiTooltip.vue'
+import CheckboxGlyph from './CheckboxGlyph.vue'
+import { CHOICE_ROW_KEY } from '../UiChoice/types'
+import type { ControlPosition } from '../UiChoice/types'
 
 interface UiInputCheckboxProps {
   /**
@@ -45,6 +48,11 @@ interface UiInputCheckboxProps {
    * Info tooltip for the label
    */
   labelInfo?: string
+  /**
+   * Icon class rendered between the checkbox and the text (e.g. `i-ph-bell`).
+   * In vertical orientation it sits above the text instead.
+   */
+  icon?: string
   /**
    * Description text below the label
    */
@@ -66,6 +74,10 @@ interface UiInputCheckboxProps {
    * @default 'md'
    */
   size?: CheckboxSize
+  /**
+   * Accessible name for the input, for checkboxes rendered without a label
+   */
+  ariaLabel?: string
   /**
    * Layout orientation
    * @default 'horizontal'
@@ -76,6 +88,17 @@ interface UiInputCheckboxProps {
     * @default false
    */
   showBg?: boolean
+  /**
+   * Whether the checkbox stretches to fill its container instead of
+   * shrink-wrapping its content
+   * @default false
+   */
+  fullWidth?: boolean
+  /**
+   * Which side of the text the checkbox sits on, in horizontal orientation
+   * @default 'start'
+   */
+  controlPosition?: ControlPosition
 }
 
 const props = withDefaults(defineProps<UiInputCheckboxProps>(), {
@@ -83,9 +106,13 @@ const props = withDefaults(defineProps<UiInputCheckboxProps>(), {
   indeterminate: false,
   error: false,
   required: false,
+  icon: undefined,
   size: 'md',
   checked: undefined,
   orientation: 'horizontal',
+  ariaLabel: undefined,
+  fullWidth: false,
+  controlPosition: 'start',
 })
 
 const emit = defineEmits<{
@@ -93,17 +120,23 @@ const emit = defineEmits<{
   'change': [event: Event]
   'focus': [event: FocusEvent]
   'blur': [event: FocusEvent]
+  'tooltip-clicked': []
 }>()
 
+const slots = useSlots()
+const inChoiceRow = inject(CHOICE_ROW_KEY, false)
+
 const checkboxRef = ref<HTMLInputElement | null>(null)
 
-function triggerCheckbox () {
-  if (!props.disabled) {
+function triggerCheckbox (event: Event) {
+  // A click on the input itself bubbles up to this same handler; without the target
+  // check we'd re-click it and immediately toggle it back.
+  if (!props.disabled && event.target !== checkboxRef.value) {
     checkboxRef.value?.click()
   }
 }
-const isFocused = ref(false)
-const inputId = useId()
+const generatedId = useId()
+const inputId = computed(() => props.id ?? generatedId)
 
 // Determine if checkbox is checked
 const isChecked = computed(() => {
@@ -130,82 +163,68 @@ const isChecked = computed(() => {
   return false
 })
 
-const checkboxClasses = computed(() => {
-  const baseClasses = [
-    'appearance-none',
-    'relative shrink-0 grid place-content-center',
-    'border rounded-sm transition-colors',
-    'focus:outline-hidden',
-  ]
-
-  baseClasses.push(props.disabled ? 'cursor-not-allowed' : 'cursor-pointer')
-
-  // Size classes
-  const sizeClasses = {
-    sm: 'w-3.5 h-3.5',
-    md: 'w-4 h-4',
-    lg: 'w-5 h-5',
-  }
+const hasText = computed(() => !!(props.label || slots.label || props.labelInfo || props.description))
+const hasContent = computed(() => hasText.value || !!(props.icon || slots.icon))
+const isOptionRow = computed(() => props.orientation === 'horizontal' && !props.showBg && hasContent.value)
 
-  baseClasses.push(sizeClasses[props.size])
+const controlAtEnd = computed(() => props.orientation === 'horizontal' && props.controlPosition === 'end')
 
-  // Background and border based on state
+// The showBg tile and the UiChoice row tint their text with the selection.
+// Disabled, a UiChoice row recedes whole, while elsewhere the selection stays legible in neutral.
+const tone = computed(() => {
   if (props.error) {
-    baseClasses.push('border-borders-danger-strong')
-    if (isChecked.value || props.indeterminate) {
-      baseClasses.push('bg-actions-danger-idle')
-    } else {
-      baseClasses.push('bg-surface-neutral-bg-main')
-    }
-  } else if (isChecked.value || props.indeterminate) {
-    baseClasses.push('bg-actions-primary-idle border-borders-primary-default')
-  } else {
-    baseClasses.push('bg-surface-neutral-bg-main border-borders-neutral-strong')
+    return 'danger'
   }
-
-  if (isFocused.value && !props.disabled) {
-    baseClasses.push('ring')
-    if (isChecked.value && !props.error) {
-      baseClasses.push('ring-borders-primary-strong')
-    } else if (props.error) {
-      baseClasses.push('ring-borders-danger-strong')
-    } else {
-      baseClasses.push('ring-2 ring-inset ring-focus-ring')
-    }
-  }
-
-  return baseClasses
-})
-
-const iconClasses = computed(() => {
-  const baseClasses = ['transition-opacity']
-
-  // Size classes for icon
-  const sizeClasses = {
-    sm: 'size-2.5',
-    md: 'size-3',
-    lg: 'size-3.5',
+  if (props.disabled) {
+    return (isChecked.value || props.indeterminate) && !inChoiceRow ? 'neutral' : 'disabled'
   }
-
-  baseClasses.push(sizeClasses[props.size])
-
-  // Icon type and color based on state
-  if (props.indeterminate) {
-    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')
-  } else if (props.error) {
-    // Unchecked + error: show on hover only with danger color
-    baseClasses.push('i-ls-checkbox-check text-actions-danger-idle opacity-0 group-hover:opacity-50')
-  } else {
-    // Unchecked + no error: show on hover only with neutral color
-    baseClasses.push('i-ls-checkbox-check text-actions-neutral-idle opacity-0 group-hover:opacity-50')
+  if (isChecked.value && inChoiceRow) {
+    return 'selected'
   }
-
-  return baseClasses
+  return isChecked.value && props.showBg ? 'primary' : 'neutral'
 })
 
+const glyphProps = computed(() => ({
+  checked: isChecked.value,
+  indeterminate: props.indeterminate,
+  error: props.error,
+  disabled: props.disabled,
+  size: props.size,
+}))
+
+const hoverOverlayClasses = computed(() => ({
+  'bg-actions-neutral-hover-overlay': !isChecked.value && !props.indeterminate && !props.error,
+  'bg-actions-danger-hover-overlay': props.error,
+  'bg-actions-primary-hover-overlay': (isChecked.value || props.indeterminate) && !props.error,
+}))
+
+// Shared text-colour state used by the label and its icon
+const stateTextClasses = computed(() => ({
+  'text-text-neutral-base': tone.value === 'neutral',
+  'text-text-neutral-tertiary': tone.value === 'disabled',
+  'text-text-danger-base': tone.value === 'danger',
+  'text-text-primary-base': tone.value === 'primary',
+  'text-text-primary-title': tone.value === 'selected',
+}))
+
+// Same tertiary tones as the UiInputRadio info icon
+const infoIconClasses = computed(() => ({
+  'text-text-neutral-tertiary': tone.value === 'neutral' || tone.value === 'disabled',
+  'text-text-danger-tertiary': tone.value === 'danger',
+  'text-text-primary-tertiary': tone.value === 'primary' || tone.value === 'selected',
+}))
+
+const descriptionClasses = computed(() => ({
+  'text-center': props.orientation === 'vertical',
+  'text-text-neutral-secondary': tone.value === 'neutral',
+  'text-text-neutral-tertiary': tone.value === 'disabled',
+  'text-text-danger-tertiary': tone.value === 'danger',
+  'text-text-primary-tertiary': tone.value === 'primary',
+  'text-text-primary-base': tone.value === 'selected',
+  'cursor-not-allowed': props.disabled,
+  'cursor-pointer': !props.disabled,
+}))
+
 const displayMessage = computed(() => {
   if (props.error && props.errorMessage) {
     return props.errorMessage
@@ -213,12 +232,19 @@ const displayMessage = computed(() => {
   return undefined
 })
 
+const descriptionId = computed(() => props.description ? `${inputId.value}-description` : undefined)
+
+const ariaDescribedby = computed(() => {
+  const ids = [descriptionId.value, displayMessage.value ? `${inputId.value}-message` : undefined].filter(Boolean)
+  return ids.length ? ids.join(' ') : undefined
+})
+
 // for error/helper message
 const displayMessageClasses = computed(() => {
-  const baseClasses = ['text-content-legends-bold-md mt-1']
+  const baseClasses = ['flex items-center gap-1 text-content-legends-bold-md mt-1']
 
   if (props.error) {
-    baseClasses.push('text-text-danger-secondary')
+    baseClasses.push('text-text-danger-body')
   } else {
     baseClasses.push('text-text-neutral-secondary')
   }
@@ -227,29 +253,37 @@ const displayMessageClasses = computed(() => {
 })
 
 const innerWrapperClasses = computed(() => {
-  const classes: string[] = ['group relative rounded-lg flex flex-col'];
+  const classes: string[] = ['group/option relative flex flex-col'];
 
   if (props.orientation === 'vertical') {
     classes.push('items-center');
   }
 
-  if (props.disabled) {
-    classes.push('hover:cursor-not-allowed opacity-50')
+  // The row bleeds around the option without taking layout space and carries the
+  // focus ring; hover shows on the glyph only. Inside UiChoice the choice draws the row.
+  if (inChoiceRow) {
+    classes.push('rounded-field-md')
+  } else if (isOptionRow.value && !props.showBg) {
+    classes.push('isolate before:absolute before:-inset-x-3 before:-inset-y-2 before:-z-10 before:rounded-field-md before:pointer-events-none has-[input:focus-visible]:before:focus-ring')
   } else {
-    classes.push('hover:cursor-pointer')
+    classes.push('rounded-field-md has-[input:focus-visible]:focus-ring')
   }
 
+  classes.push(props.disabled ? 'hover:cursor-not-allowed' : 'hover:cursor-pointer')
+
   if (props.showBg) {
     classes.push('p-2 ring-inset');
-    if (isChecked.value && !props.error) {
+    if (isChecked.value && !props.error && props.disabled) {
+      classes.push('bg-control-field-bg ring-1 ring-borders-neutral-strong');
+    } else if (isChecked.value && !props.error) {
       // checked
-      classes.push('bg-actions-primary-idle-alpha-light ring-2 ring-borders-primary-strong');
+      classes.push('bg-actions-primary-idle-alpha-light ring-2 ring-actions-primary-idle');
     } else if (!isChecked.value && !props.error) {
       // idle
       classes.push('bg-surface-neutral-alpha-100 ring-transparent');
     } else if (isChecked.value && props.error) {
       // error + checked
-      classes.push('bg-actions-danger-idle-alpha-light ring-2 ring-borders-danger-strong');
+      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')
@@ -297,12 +331,10 @@ function handleChange (event: Event) {
 }
 
 function handleFocus(event: FocusEvent) {
-  isFocused.value = true
   emit('focus', event)
 }
 
 function handleBlur (event: FocusEvent) {
-  isFocused.value = false
   emit('blur', event)
 }
 
@@ -322,9 +354,14 @@ defineExpose({
 </script>
 
 <template>
-  <div class="ui-input-checkbox-wrapper w-fit">
+  <div
+    class="ui-input-checkbox-wrapper"
+    data-testid="ui-input-checkbox"
+    :class="fullWidth ? 'w-full' : 'w-fit'"
+  >
     <div
       :class="innerWrapperClasses"
+      data-testid="ui-input-checkbox-row"
       @click="triggerCheckbox"
     >
       <input
@@ -335,94 +372,108 @@ defineExpose({
         :name="name"
         type="checkbox"
         class="absolute opacity-0 pointer-events-none"
+        :aria-label="ariaLabel"
         :aria-invalid="error"
-        :aria-describedby="displayMessage ? `${inputId}-message` : undefined"
+        :aria-describedby="ariaDescribedby"
         @change="handleChange"
         @focus="handleFocus"
         @blur="handleBlur"
       >
 
+      <!-- Icon - vertical only, stacked above the text -->
+      <span
+        v-if="(icon || $slots.icon) && orientation === 'vertical'"
+        class="flex items-center justify-center shrink-0 mb-2"
+        data-testid="ui-input-checkbox-icon"
+      >
+        <slot name="icon">
+          <span
+            class="size-4"
+            :class="[icon, stateTextClasses]"
+          />
+        </slot>
+      </span>
+
       <!-- First row (contains checkbox for horizontal orientation) -->
       <div
-        class="flex items-center"
-        :class="{ 'justify-center': orientation === 'vertical' }"
+        class="flex"
+        :class="orientation === 'vertical' ? 'items-center justify-center' : 'items-start'"
       >
         <!-- Checkbox - horizontal only -->
         <label
           v-if="orientation === 'horizontal'"
-          class="flex w-5 items-center justify-center shrink-0 mr-2"
-          :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+          class="flex size-5 items-center shrink-0"
+          :class="[
+            disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+            controlAtEnd
+              ? ['justify-end', { 'order-last': hasContent, 'ms-3': hasContent && !inChoiceRow, 'ms-5': hasContent && inChoiceRow }]
+              : ['justify-start', { 'me-2': hasContent && showBg, 'me-1': hasContent && !showBg && !inChoiceRow, 'me-3': hasContent && !showBg && inChoiceRow }],
+          ]"
         >
-          <span
-            :class="checkboxClasses"
-            aria-hidden="true"
-          >
-            <span
-              :class="iconClasses"
-              class="block relative z-1"
-            >
-              <div
-                class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
-                :class="{
-                  'bg-actions-neutral-hover-overlay': !isChecked && !error,
-                  'bg-actions-danger-hover-overlay': error,
-                  'bg-actions-primary-hover-overlay': isChecked && !error,
-                }"
-              />
-            </span>
-          </span>
+          <CheckboxGlyph v-bind="glyphProps" />
         </label>
 
-        <Label
-          :for="inputId"
-          class="text-content-text-md-regular"
-          :class="{
-            'text-text-neutral-base': !error && !isChecked,
-            'text-text-danger-base': error,
-            'text-text-primary-base': isChecked && !error,
-            'cursor-not-allowed': disabled,
-            'cursor-pointer': !disabled,
-          }"
-          @click.stop
+        <!-- Icon - horizontal only, between the checkbox and the text -->
+        <span
+          v-if="(icon || $slots.icon) && orientation === 'horizontal'"
+          class="flex items-center justify-center shrink-0 me-2 min-h-5"
+          data-testid="ui-input-checkbox-icon"
         >
-          <slot name="label">
-            {{ label }}{{ required ? '*' : '' }}
+          <slot name="icon">
+            <span
+              class="size-4"
+              :class="[icon, stateTextClasses]"
+            />
           </slot>
-        </Label>
+        </span>
 
-        <!-- icon -->
-        <UiTooltip
-          v-if="labelInfo"
-          :content="labelInfo"
+        <div
+          v-if="hasText"
+          class="flex flex-col min-w-0"
+          :class="{ 'items-center': orientation === 'vertical', 'gap-0.5': !showBg && !inChoiceRow, 'gap-1': inChoiceRow, 'flex-1': controlAtEnd }"
+          data-testid="ui-input-checkbox-text"
         >
-          <div
-            class="flex items-center justify-center size-4 text-text-neutral-primary cursor-help shrink-0"
-            :class="{
-              'text-text-neutral-base': !error && !isChecked,
-              'text-text-danger-base': error,
-              'text-text-primary-base': isChecked && !error,
-            }"
+          <Label
+            v-if="label || $slots.label || labelInfo"
+            :for="inputId"
+            :class="[stateTextClasses, inChoiceRow ? 'text-content-text-md-medium' : 'text-content-text-md-regular', {
+              'cursor-not-allowed': disabled,
+              'cursor-pointer': !disabled,
+            }]"
+            @click.stop
           >
-            <span class="i-ph-info-fill size-4" />
-          </div>
-        </UiTooltip>
-      </div>
+            <slot name="label">
+              {{ label }}{{ required ? '*' : '' }}
+            </slot>
 
-      <span
-        v-if="description"
-        class="text-content-text-md-regular"
-        :class="{
-          'ml-7': orientation === 'horizontal',
-          'text-center': orientation === 'vertical',
-          'text-text-neutral-tertiary': !error && !isChecked,
-          'text-text-danger-tertiary': error,
-          'text-text-primary-tertiary': isChecked && !error,
-          'cursor-not-allowed': disabled,
-          'cursor-pointer': !disabled,
-        }"
-      >
-        {{ description }}
-      </span>
+            <!-- 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"
+              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="infoIconClasses"
+                data-testid="open-tooltip"
+                @click.stop.prevent="emit('tooltip-clicked')"
+              >
+                <span class="i-ph-info-fill size-4" />
+              </span>
+            </UiTooltip></span>
+          </Label>
+
+          <span
+            v-if="description"
+            :id="descriptionId"
+            class="text-content-text-md-regular"
+            :class="descriptionClasses"
+          >
+            {{ description }}
+          </span>
+        </div>
+      </div>
 
       <!-- Checkbox - vertical only -->
       <label
@@ -430,34 +481,13 @@ defineExpose({
         class="flex justify-center mt-2"
         :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
       >
-        <span
-          :class="checkboxClasses"
-          aria-hidden="true"
-        >
-          <span
-            :class="iconClasses"
-            class="block relative z-1"
-          >
-            <div
-              class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
-              :class="{
-                'bg-actions-neutral-hover-overlay': !isChecked && !error,
-                'bg-actions-danger-hover-overlay': error,
-                'bg-actions-primary-hover-overlay': isChecked && !error,
-              }"
-            />
-          </span>
-        </span>
+        <CheckboxGlyph v-bind="glyphProps" />
       </label>
 
       <div
-        v-if="showBg"
-        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none rounded-lg"
-        :class="{
-          'bg-actions-neutral-hover-overlay': !isChecked && !error,
-          'bg-actions-danger-hover-overlay': error,
-          'bg-actions-primary-hover-overlay': isChecked && !error,
-        }"
+        v-if="showBg && !disabled"
+        class="absolute inset-0 opacity-0 group-hover/option:opacity-100 transition-opacity pointer-events-none rounded-[inherit]"
+        :class="hoverOverlayClasses"
       />
     </div>
 
@@ -467,6 +497,12 @@ defineExpose({
       :id="`${inputId}-message`"
       :class="displayMessageClasses"
     >
+      <span
+        v-if="error"
+        class="i-ph-warning-circle size-4 shrink-0"
+        data-testid="ui-input-checkbox-error-icon"
+        aria-hidden="true"
+      />
       {{ displayMessage }}
     </p>
   </div>