@livestorm/ui-vue 2.0.5 → 4.0.0

package/src/components/UiButtonGroup/UiButtonGroup.vue

@@ -3,11 +3,14 @@ import { ToggleGroupRoot } from 'reka-ui'
 import type { AcceptableValue } from 'reka-ui'
 import { useDebounceFn, useResizeObserver } from '@vueuse/core'
 import { computed, nextTick, onMounted, provide, ref, watch } from 'vue'
-import type { ButtonGroupColor, ButtonGroupSize } from './types'
+import type { ButtonGroupColor, ButtonGroupSize, ButtonGroupVariant } from './types'
 import {
   BUTTON_GROUP_COLOR_KEY,
+  BUTTON_GROUP_INNER_RADIUS,
+  BUTTON_GROUP_RAIL_RADIUS,
   BUTTON_GROUP_REGISTER_KEY,
   BUTTON_GROUP_SIZE_KEY,
+  BUTTON_GROUP_VARIANT_KEY,
 } from './types'
 
 interface UiButtonGroupProps {
@@ -16,6 +19,8 @@ interface UiButtonGroupProps {
   disabled?: boolean
   size?: ButtonGroupSize
   color?: ButtonGroupColor
+  /** `strong` fills the selected item with the color; `light` raises it on the surface and writes its label in the color. */
+  variant?: ButtonGroupVariant
   name?: string
   orientation?: 'horizontal' | 'vertical'
   /**
@@ -24,14 +29,18 @@ interface UiButtonGroupProps {
    * Set to true to allow clearing the selection by clicking the active item.
    */
   allowDeselect?: boolean
+  /** When false, the group hugs its items instead of filling its container. */
+  fullWidth?: boolean
 }
 
 const props = withDefaults(defineProps<UiButtonGroupProps>(), {
   size: 'md',
   color: 'neutral',
+  variant: 'strong',
   orientation: 'horizontal',
   disabled: false,
   allowDeselect: false,
+  fullWidth: true,
   modelValue: undefined,
   defaultValue: undefined,
   name: undefined,
@@ -43,6 +52,7 @@ const emit = defineEmits<{
 
 provide(BUTTON_GROUP_SIZE_KEY, computed(() => props.size))
 provide(BUTTON_GROUP_COLOR_KEY, computed(() => props.color))
+provide(BUTTON_GROUP_VARIANT_KEY, computed(() => props.variant))
 
 // --- Sliding indicator -----------------------------------------------------
 // Each item registers its DOM node on mount. When the selected value or
@@ -85,12 +95,10 @@ function updateIndicator () {
     return
   }
 
-  const rootRect = rootEl.getBoundingClientRect()
-  const itemRect = activeEl.getBoundingClientRect()
   indicatorStyle.value = {
-    transform: `translate(${itemRect.left - rootRect.left}px, ${itemRect.top - rootRect.top}px)`,
-    width: `${itemRect.width}px`,
-    height: `${itemRect.height}px`,
+    transform: `translate(${activeEl.offsetLeft}px, ${activeEl.offsetTop}px)`,
+    width: `${activeEl.offsetWidth}px`,
+    height: `${activeEl.offsetHeight}px`,
   }
   indicatorVisible.value = true
 }
@@ -124,6 +132,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':
@@ -149,15 +158,12 @@ const INDICATOR_BG: Record<ButtonGroupColor, string> = {
   'error': 'bg-actions-danger-idle',
 }
 
-const INDICATOR_RADIUS: Record<ButtonGroupSize, string> = {
-  sm: 'rounded-md',
-  md: 'rounded-lg',
-  lg: 'rounded-lg',
-}
-
 const railBgClass = computed(() => RAIL_BG[props.color])
-const indicatorBgClass = computed(() => INDICATOR_BG[props.color])
-const indicatorRadiusClass = computed(() => INDICATOR_RADIUS[props.size])
+const indicatorBgClass = computed(() => props.variant === 'light'
+  ? 'bg-surface-neutral-bg-main shadow-elevation-level-1'
+  : INDICATOR_BG[props.color])
+const indicatorRadiusClass = computed(() => BUTTON_GROUP_INNER_RADIUS[props.size])
+const railRadiusClass = computed(() => BUTTON_GROUP_RAIL_RADIUS[props.size])
 
 function handleUpdate (value: AcceptableValue | AcceptableValue[]) {
   const next = Array.isArray(value) ? value[0] : value
@@ -183,8 +189,8 @@ function handleUpdate (value: AcceptableValue | AcceptableValue[]) {
     :name="name"
     :roving-focus="true"
     type="single"
-    class="relative inline-flex w-full items-stretch rounded-lg"
-    :class="[sizeClasses, railBgClass, { 'flex-col h-auto': orientation === 'vertical' }]"
+    class="relative inline-flex items-stretch"
+    :class="[fullWidth ? 'w-full' : 'w-fit', sizeClasses, railRadiusClass, railBgClass, { 'flex-col h-auto': orientation === 'vertical' }]"
     @update:model-value="handleUpdate"
   >
     <div

package/src/components/UiButtonGroup/UiButtonGroupItem.vue

@@ -1,26 +1,33 @@
 <script setup lang="ts">
 import { ToggleGroupItem } from 'reka-ui'
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import type { ButtonGroupColor } from './types'
+import { useIconSize } from '../../composables/useIconSize'
+import type { ButtonGroupColor, ButtonGroupVariant } from './types'
 import {
   BUTTON_GROUP_COLOR_KEY,
+  BUTTON_GROUP_INNER_RADIUS,
   BUTTON_GROUP_REGISTER_KEY,
   BUTTON_GROUP_SIZE_KEY,
+  BUTTON_GROUP_VARIANT_KEY,
 } from './types'
 
 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))
 const color = inject(BUTTON_GROUP_COLOR_KEY, computed<ButtonGroupColor>(() => 'neutral'))
+const variant = inject(BUTTON_GROUP_VARIANT_KEY, computed<ButtonGroupVariant>(() => 'strong'))
 const registry = inject(BUTTON_GROUP_REGISTER_KEY, null)
 
 const itemRef = ref<InstanceType<typeof ToggleGroupItem> | null>(null)
@@ -55,13 +62,16 @@ onBeforeUnmount(() => {
 // (rail height − rail padding) in horizontal mode, and drives height in vertical mode.
 const sizeClasses = computed(() => {
   switch (size.value) {
-    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 'xs': return 'px-2 py-0.5 gap-1 text-action-button-sm'
+    case 'sm': return 'px-2.5 py-1.5 gap-1 text-action-button-sm'
+    case 'lg': return 'px-6 py-2.5 gap-2 text-action-button-lg'
     case 'md':
-    default: return 'px-4 py-2.5 gap-1.5 rounded-lg text-action-button-md'
+    default: return 'px-4 py-2.5 gap-1.5 text-action-button-md'
   }
 })
 
+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
@@ -71,41 +81,56 @@ const COLOR_CLASSES: Record<ButtonGroupColor, string> = {
     'text-actions-neutral-idle-alpha-strong',
     'data-[state=off]:hover:bg-actions-neutral-hover-overlay',
     'data-[state=off]:hover:text-actions-neutral-idle',
-    'data-[state=on]:text-actions-neutral-invert-idle',
   ].join(' '),
   'neutral-invert': [
     'text-actions-neutral-invert-idle-alpha-strong',
     'data-[state=off]:hover:bg-actions-neutral-invert-hover-overlay',
     'data-[state=off]:hover:text-actions-neutral-invert-idle',
-    'data-[state=on]:text-actions-neutral-idle',
   ].join(' '),
   'primary': [
     'text-actions-primary-idle-alpha-strong',
     'data-[state=off]:hover:bg-actions-primary-hover-overlay',
     'data-[state=off]:hover:text-actions-primary-idle',
-    'data-[state=on]:text-actions-neutral-invert-idle',
   ].join(' '),
   'success': [
     'text-actions-success-idle-alpha-strong',
     'data-[state=off]:hover:bg-actions-success-hover-overlay',
     'data-[state=off]:hover:text-actions-success-idle',
-    'data-[state=on]:text-actions-neutral-invert-idle',
   ].join(' '),
   'warning': [
     'text-actions-warning-idle-alpha-strong',
     'data-[state=off]:hover:bg-actions-warning-hover-overlay',
     'data-[state=off]:hover:text-actions-warning-idle',
-    'data-[state=on]:text-actions-neutral-invert-idle',
   ].join(' '),
   'error': [
     'text-actions-danger-idle-alpha-strong',
     'data-[state=off]:hover:bg-actions-danger-hover-overlay',
     'data-[state=off]:hover:text-actions-danger-idle',
-    'data-[state=on]:text-actions-neutral-invert-idle',
   ].join(' '),
 }
 
-const colorClasses = computed(() => COLOR_CLASSES[color.value])
+const STRONG_SELECTED_TEXT: Record<ButtonGroupColor, string> = {
+  'neutral': 'data-[state=on]:text-actions-neutral-invert-idle',
+  'neutral-invert': 'data-[state=on]:text-actions-neutral-idle',
+  'primary': 'data-[state=on]:text-actions-neutral-invert-idle',
+  'success': 'data-[state=on]:text-actions-neutral-invert-idle',
+  'warning': 'data-[state=on]:text-actions-neutral-invert-idle',
+  'error': 'data-[state=on]:text-actions-neutral-invert-idle',
+}
+
+const LIGHT_SELECTED_TEXT: Record<ButtonGroupColor, string> = {
+  'neutral': 'data-[state=on]:text-actions-neutral-idle',
+  'neutral-invert': 'data-[state=on]:text-actions-neutral-idle',
+  'primary': 'data-[state=on]:text-actions-primary-idle',
+  'success': 'data-[state=on]:text-actions-success-idle',
+  'warning': 'data-[state=on]:text-actions-warning-idle',
+  'error': 'data-[state=on]:text-actions-danger-idle',
+}
+
+const colorClasses = computed(() => [
+  COLOR_CLASSES[color.value],
+  (variant.value === 'light' ? LIGHT_SELECTED_TEXT : STRONG_SELECTED_TEXT)[color.value],
+])
 </script>
 
 <template>
@@ -114,12 +139,17 @@ const colorClasses = computed(() => COLOR_CLASSES[color.value])
     :value="value"
     :disabled="disabled"
     :aria-label="ariaLabel"
-    class="relative z-10 flex-1 inline-flex items-center justify-center transition-colors cursor-pointer outline-none
-           focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring
+    class="relative z-10 flex-1 inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer outline-none
+           focus-visible:focus-ring
            data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed
            data-[state=off]:data-[disabled]:hover:bg-transparent"
-    :class="[sizeClasses, colorClasses]"
+    :class="[sizeClasses, BUTTON_GROUP_INNER_RADIUS[size], 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'
@@ -8,6 +8,7 @@ export type ButtonGroupColor =
   | 'success'
   | 'warning'
   | 'error'
+export type ButtonGroupVariant = 'strong' | 'light'
 
 export interface ButtonGroupRegister {
   register(value: string, el: HTMLElement): void
@@ -20,5 +21,23 @@ export const BUTTON_GROUP_SIZE_KEY: InjectionKey<ComputedRef<ButtonGroupSize>> =
 export const BUTTON_GROUP_COLOR_KEY: InjectionKey<ComputedRef<ButtonGroupColor>> =
   Symbol('ui-button-group-color')
 
+export const BUTTON_GROUP_VARIANT_KEY: InjectionKey<ComputedRef<ButtonGroupVariant>> =
+  Symbol('ui-button-group-variant')
+
 export const BUTTON_GROUP_REGISTER_KEY: InjectionKey<ButtonGroupRegister> =
   Symbol('ui-button-group-register')
+
+export const BUTTON_GROUP_RAIL_RADIUS: Record<ButtonGroupSize, string> = {
+  xs: 'rounded-button-xs',
+  sm: 'rounded-button-sm',
+  md: 'rounded-button-md',
+  lg: 'rounded-field-lg',
+}
+
+// Inner radius stays concentric with the rail: rail radius minus rail padding.
+export const BUTTON_GROUP_INNER_RADIUS: Record<ButtonGroupSize, string> = {
+  xs: 'rounded-[calc(var(--radius-button-xs)_-_2px)]',
+  sm: 'rounded-[calc(var(--radius-button-sm)_-_2px)]',
+  md: 'rounded-[calc(var(--radius-button-md)_-_2px)]',
+  lg: 'rounded-[calc(var(--radius-field-lg)_-_4px)]',
+}

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/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/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