@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/UiCard/UiCard.vue

@@ -23,35 +23,40 @@ const props = withDefaults(defineProps<UiCardProps>(), {
   disabled: false,
 })
 
-const baseCardClasses = 'bg-surface-neutral-alpha-100 border border-borders-neutral-light'
+const baseCardClasses = 'bg-surface-neutral-bg-main'
 
 const variantClasses = computed(() => {
   if (props.selected) {
-    return 'bg-surface-primary-alpha-100 border border-borders-neutral-light ring-2 ring-actions-primary-idle'
+    return 'bg-surface-primary-alpha-100 ring-2 ring-actions-primary-idle'
   }
 
   switch (props.variant) {
     case 'success':
-      return 'bg-surface-success-alpha-200 border border-borders-neutral-light'
+      return 'bg-surface-success-alpha-200'
     case 'warning':
-      return 'bg-surface-warning-alpha-100 border border-borders-neutral-light'
+      return 'bg-surface-warning-alpha-100'
     case 'danger':
-      return 'bg-surface-danger-alpha-100 border border-borders-neutral-light'
+      return 'bg-surface-danger-alpha-100'
     case 'primary':
-      return 'bg-surface-primary-alpha-100 border border-borders-neutral-light'
+      return 'bg-surface-primary-alpha-100'
     case 'primary-fill':
-      return 'bg-surface-primary-bg-alpha border border-borders-neutral-light'
+      return 'bg-surface-primary-bg-alpha'
     case 'transparent':
-      return 'bg-transparent border border-borders-neutral-light'
+      return 'bg-transparent'
     case 'neutral':
-      return 'bg-surface-neutral-alpha-100 border border-borders-neutral-light'
     case 'white':
-      return 'bg-surface-neutral-bg-main border border-borders-neutral-light'
+      return baseCardClasses
     default:
       return baseCardClasses
   }
 })
 
+// A selected card is always a choice; a disabled one cannot be acted on.
+const borderClasses = computed(() => {
+  const isInteractive = props.selected || (props.interactive && !props.disabled)
+  return isInteractive ? 'border border-container-interactive-border' : 'border border-container-border'
+})
+
 const paddingClasses = computed(() => {
   // Based on Figma: default padding is 32px (p-8)
   switch (props.padding) {
@@ -70,11 +75,7 @@ const paddingClasses = computed(() => {
 
 const interactiveClasses = computed(() => {
   if (!props.interactive || props.disabled) return ''
-  // Don't apply hover ring if already selected (to preserve the selected ring-2)
-  if (props.selected) {
-    return 'cursor-pointer transition-all duration-150 hover:shadow-shadows-drop-shadow-lg'
-  }
-  return 'cursor-pointer transition-all duration-150 hover:ring-1 hover:ring-shadow-neutral-100 hover:shadow-shadows-drop-shadow-lg'
+  return 'cursor-pointer transition-all duration-150 hover:bg-surface-neutral-bg-main hover:shadow-container-hover'
 })
 
 const disabledClasses = computed(() => {
@@ -86,23 +87,19 @@ const disabledClasses = computed(() => {
 <template>
   <div
     :class="[
-      'rounded-xl relative overflow-hidden',
+      'rounded-container relative overflow-hidden',
       variantClasses,
+      borderClasses,
+      'shadow-container',
       paddingClasses,
       interactiveClasses,
       disabledClasses,
     ]"
   >
-    <!-- Hover overlay for interactive cards -->
-    <div
-      v-if="interactive && !disabled"
-      class="absolute inset-0 bg-actions-neutral-hover-overlay rounded-xl opacity-0 hover:opacity-100 transition-opacity duration-150 pointer-events-none"
-    />
-
     <!-- Selected overlay -->
     <div
       v-if="selected"
-      class="absolute inset-0 bg-actions-primary-idle-alpha-light rounded-xl pointer-events-none"
+      class="absolute inset-0 bg-actions-primary-idle-alpha-light rounded-[inherit] pointer-events-none"
     />
 
     <div class="relative z-10 h-full">

package/src/components/UiChoice/UiChoice.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed, inject, provide, ref } from 'vue'
+import UiInputCheckbox from '../UiInputCheckbox/UiInputCheckbox.vue'
+import UiInputRadio from '../UiInputRadio/UiInputRadio.vue'
+import { RADIO_GROUP_KEY } from '../UiInputRadio/types'
+import UiSwitch from '../UiSwitch/UiSwitch.vue'
+import type { RadioValue } from '../UiInputRadio/types'
+import type { ChoiceControl, ChoiceValue, ControlPosition } from './types'
+import { CHOICE_ROW_KEY } from './types'
+import { useChoiceboxSurface } from '../../composables/useChoiceboxSurface'
+
+interface UiChoiceProps {
+  /**
+   * The control rendered in the row
+   */
+  control: ChoiceControl
+  /**
+   * The label text
+   */
+  label: string
+  /**
+   * Supporting text under the label, announced with the control
+   */
+  description?: string
+  /**
+   * Info tooltip next to the label
+   */
+  labelInfo?: string
+  /**
+   * The value this row selects. Required when `control` is `radio`; `null` is a valid value.
+   * A radio row goes inside a UiInputRadioGroup, which owns the selection.
+   */
+  value?: RadioValue
+  /**
+   * Switch and checkbox: whether the row is on. A radio reads its group instead.
+   */
+  modelValue?: ChoiceValue
+  /**
+   * Whether the row is disabled
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Whether the row uses the small height
+   * @default false
+   */
+  compact?: boolean
+  /**
+   * Which side of the text the control sits on
+   * @default 'end'
+   */
+  controlPosition?: ControlPosition
+}
+
+const props = withDefaults(defineProps<UiChoiceProps>(), {
+  description: undefined,
+  labelInfo: undefined,
+  value: undefined,
+  modelValue: undefined,
+  disabled: false,
+  compact: false,
+  controlPosition: 'end',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: ChoiceValue]
+}>()
+
+defineSlots<{
+  /** Radio only: extra content under the text, such as a field the option configures */
+  content?(): unknown
+  /** Radio only: an icon or a logo before the text */
+  icon?(): unknown
+}>()
+
+const enclosingGroup = inject(RADIO_GROUP_KEY, undefined)
+
+if (props.control === 'radio' && props.value === undefined) {
+  console.warn(`UiChoice: the radio row "${props.label}" needs a \`value\`: without one it never shows as selected`)
+}
+provide(CHOICE_ROW_KEY, true)
+
+// A radio is also disabled by its group, as UiInputRadio decides
+const isDisabled = computed(() => props.disabled || (props.control === 'radio' && (enclosingGroup?.disabled.value ?? false)))
+
+const controlRef = ref<HTMLElement | null>(null)
+
+const inErroredGroup = computed(() => props.control === 'radio' && (enclosingGroup?.error.value ?? false))
+
+const isSelected = computed(() => {
+  if (props.control !== 'radio') {
+    return props.modelValue === true
+  }
+  return props.value !== undefined && enclosingGroup?.modelValue.value === props.value
+})
+
+// `null` is a valid option value; a missing one falls back to an empty string
+const radioValue = computed(() => props.value === undefined ? '' : props.value)
+
+const isSwitch = computed(() => props.control === 'switch')
+
+// A switch is a setting, not a choice: on, it keeps the idle surface
+const surfaceClasses = useChoiceboxSurface(() => ({
+  control: props.control,
+  selected: isSelected.value && !isSwitch.value,
+  disabled: isDisabled.value,
+  error: inErroredGroup.value,
+}))
+
+const rowClasses = computed(() => [
+  'group/option flex items-center w-full text-content-text-md-regular',
+  props.compact ? 'min-h-field-sm px-3 py-1' : 'p-3',
+  surfaceClasses.value,
+  isDisabled.value ? 'cursor-not-allowed' : 'cursor-pointer',
+])
+
+const controlAtEnd = computed(() => props.controlPosition === 'end')
+
+// The control handles clicks inside its own box; the row forwards the rest.
+function onRowClick (event: MouseEvent) {
+  if (isDisabled.value || controlRef.value?.contains(event.target as Node)) {
+    return
+  }
+  controlRef.value
+    ?.querySelector<HTMLElement>('[role="radio"], [role="switch"], input[type="checkbox"]')
+    ?.click()
+}
+</script>
+
+<template>
+  <div
+    data-testid="ui-choice"
+    :data-state="isSelected ? 'checked' : 'unchecked'"
+    :class="rowClasses"
+    @click="onRowClick"
+  >
+    <div
+      ref="controlRef"
+      :class="controlAtEnd || (control === 'radio' && $slots.content) ? 'w-full' : 'w-fit'"
+    >
+      <UiInputRadio
+        v-if="control === 'radio'"
+        :value="radioValue"
+        :label="label"
+        :description="description"
+        :label-info="labelInfo"
+        :disabled="disabled"
+        :control-position="controlPosition"
+      >
+        <template
+          v-if="$slots.icon"
+          #icon
+        >
+          <slot name="icon" />
+        </template>
+        <template
+          v-if="$slots.content"
+          #content
+        >
+          <slot name="content" />
+        </template>
+      </UiInputRadio>
+      <UiSwitch
+        v-else-if="control === 'switch'"
+        :model-value="modelValue === true"
+        :label="label"
+        :description="description"
+        :label-info="labelInfo"
+        :disabled="disabled"
+        :switch-position="controlAtEnd ? 'right' : 'left'"
+        :full-width="controlAtEnd"
+        @update:model-value="emit('update:modelValue', $event)"
+      />
+      <UiInputCheckbox
+        v-else
+        :model-value="modelValue === true"
+        :label="label"
+        :description="description"
+        :label-info="labelInfo"
+        :disabled="disabled"
+        :control-position="controlPosition"
+        :full-width="controlAtEnd"
+        @update:model-value="emit('update:modelValue', $event as boolean)"
+      />
+    </div>
+  </div>
+</template>

package/src/components/UiChoice/index.ts

@@ -0,0 +1,2 @@
+export { default } from './UiChoice.vue'
+export type { ChoiceControl, ChoiceValue, ControlPosition } from './types'

package/src/components/UiChoice/types.ts

@@ -0,0 +1,11 @@
+import type { InjectionKey } from 'vue'
+
+export type ChoiceControl = 'radio' | 'switch' | 'checkbox'
+
+export type ChoiceValue = boolean
+
+/** Which side of the text a radio, checkbox or switch sits on */
+export type ControlPosition = 'start' | 'end'
+
+/** Provided by UiChoice, which draws the option row around the control it wraps */
+export const CHOICE_ROW_KEY: InjectionKey<boolean> = Symbol('ui-choice-row')

package/src/components/UiColorField/UiColorField.vue

@@ -129,7 +129,7 @@ function onPickerChange(value: string): void {
           <span
             data-testid="ui-color-field-swatch"
             aria-hidden="true"
-            class="block size-full rounded border border-borders-neutral-light"
+            class="block size-full rounded-check border border-borders-neutral-light"
             :style="{ backgroundColor: currentHex }"
           />
         </template>
@@ -140,7 +140,7 @@ function onPickerChange(value: string): void {
       align="start"
       :side-offset="8"
       data-colors-semantic="light"
-      class="border-none shadow-none rounded-2xl!"
+      class="border-none shadow-none"
       @open-auto-focus.prevent
     >
       <UiColorPicker

package/src/components/UiColorPicker/UiColorPicker.vue

@@ -26,6 +26,7 @@ import {
 import type { Color } from 'reka-ui'
 import { UiDropdown, UiDropdownTrigger, UiDropdownContent, UiDropdownItem } from '../UiDropdown'
 import type { ColorFormat, UiColorPickerPreset, UiColorPickerProps, UiColorPickerSwatchSize } from './types'
+import { useControlShape } from '../../composables/useControlShape'
 
 const props = withDefaults(defineProps<UiColorPickerProps>(), {
   modelValue: undefined,
@@ -124,10 +125,12 @@ const MODE_CHANNELS: Record<Exclude<ColorFormat, 'hex'>, ChannelDef[]> = {
   ],
 }
 
+const fieldShape = useControlShape('field', 'md')
+
 // Shared styling for each bordered value box (the hex field and each channel field).
 // The mode switcher is a separate bordered box (the dropdown trigger draws its own).
 const FIELD_BOX_CLASS =
-  'flex h-full items-center rounded-lg border border-solid border-borders-neutral-strong bg-actions-neutral-idle-alpha-light transition-all focus-within:border-actions-primary-idle-alpha-strong'
+  'flex h-full items-center border border-solid border-control-field-border bg-control-field-bg transition-all focus-within:bg-control-field-bg-focus has-[input:focus-visible]:focus-ring'
 
 // Detect a value's mode. reka represents hex as space 'rgb', so hex must be
 // matched on the '#' prefix; rgb/hsl/hsb (and hsv→hsb) come from normalizeColor.
@@ -268,14 +271,14 @@ watch(
       color-space="hsb"
       x-channel="saturation"
       y-channel="brightness"
-      class="relative h-[189px] w-full rounded-md"
+      class="relative h-[189px] w-full rounded-row"
       :class="{ 'cursor-not-allowed': disabled }"
       @update:color="onColorUpdate"
       @change-end="onCommit"
     >
       <ColorAreaArea
         :style="style"
-        class="absolute inset-0 rounded-md"
+        class="absolute inset-0 rounded-row"
       >
         <ColorAreaThumb class="group size-6 rounded-full border-4 border-actions-neutral-invert-idle transition-shadow hover:cursor-pointer hover:shadow-md">
           <span class="pointer-events-none absolute -inset-1 rounded-full bg-actions-primary-hover-overlay opacity-0 transition-opacity group-hover:opacity-100" />
@@ -322,8 +325,8 @@ watch(
     <div
       v-if="showCustomControls"
       data-testid="ui-color-picker-field"
-      class="flex h-10 w-full items-center gap-2"
-      :class="{ 'cursor-not-allowed opacity-50': disabled }"
+      class="flex w-full items-center gap-2"
+      :class="[fieldShape.height, { 'cursor-not-allowed opacity-50': disabled }]"
     >
       <!-- Mode switcher — its own bordered box; hidden when only one mode is available -->
       <div
@@ -357,12 +360,12 @@ watch(
         :model-value="internalColor"
         :disabled="disabled"
         color-space="hsb"
-        :class="[FIELD_BOX_CLASS, 'min-w-0 flex-1 gap-1.5 px-3']"
+        :class="[FIELD_BOX_CLASS, fieldShape.radius, 'min-w-0 flex-1 gap-1.5 px-3']"
         @update:color="onColorUpdate"
       >
         <ColorSwatch
           :color="internalColor"
-          class="size-4 shrink-0 rounded-[5px] border border-borders-neutral-light bg-(--reka-color-swatch-color)"
+          class="size-4 shrink-0 rounded-check border border-borders-neutral-light bg-(--reka-color-swatch-color)"
         />
         <Label
           :for="fieldId"
@@ -386,7 +389,7 @@ watch(
           :disabled="disabled"
           :color-space="colorMode"
           :channel="ch.channel"
-          :class="[FIELD_BOX_CLASS, 'min-w-0 flex-1 justify-center px-2']"
+          :class="[FIELD_BOX_CLASS, fieldShape.radius, 'min-w-0 flex-1 justify-center px-2']"
           @update:color="onColorUpdate"
         >
           <ColorFieldInput

package/src/components/UiCombobox/UiCombobox.types.ts

@@ -0,0 +1,52 @@
+import type { FieldSize } from '../../composables/useControlShape'
+
+export type UiComboboxSize = FieldSize
+
+export interface UiComboboxOption {
+  value: string
+  label: string
+  description?: string
+  disabled?: boolean
+  /** Shown instead of the description, typically why the option is disabled. */
+  hint?: string
+}
+
+export interface UiComboboxGroup<T extends UiComboboxOption = UiComboboxOption> {
+  label: string
+  options: T[]
+}
+
+/** A selectable row after the options, picked like an option but emitted as `action`. `icon` is a complete icon class such as `i-ph-user-plus`. */
+export interface UiComboboxAction {
+  id: string
+  label: string
+  icon?: string
+  disabled?: boolean
+}
+
+export interface UiComboboxProps<T extends UiComboboxOption = UiComboboxOption> {
+  modelValue?: string
+  items?: UiComboboxGroup<T>[]
+  /** Selectable rows after the options. */
+  actions?: UiComboboxAction[]
+  loading?: boolean
+  size?: UiComboboxSize
+  placeholder?: string
+  disabled?: boolean
+  label?: string
+  ariaLabel?: string
+  /** Translated result count, announced through a polite live region while the list is open. */
+  resultsLabel?: string
+  id?: string
+  /** Rows shown before the list scrolls, with a peek of the next one. All rows show when unset. */
+  maxVisibleOptions?: number
+  /** Options show a checkbox and the list stays open after a pick, so several can be picked in a row. */
+  multiple?: boolean
+  /** Values of the options shown checked when `multiple` is set. Picking one of them emits `deselect`. */
+  selected?: string[]
+  /**
+   * 'trigger' matches the list to the field. 'compact' caps it at 480px, so on a wide field part of the
+   * page behind stays visible, such as a list that updates while picking.
+   */
+  width?: 'trigger' | 'compact'
+}