@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/UiInputTextarea/UiInputTextarea.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import UiFieldWrapper from '../UiFieldWrapper/UiFieldWrapper.vue'
+import { useFieldFocusEvents } from '../../composables/useFieldFocusEvents'
 import type { TextareaSize } from './types'
+import { useControlShape } from '../../composables/useControlShape'
 
 interface UiInputTextareaProps {
   size?: TextareaSize
@@ -45,7 +47,8 @@ const emit = defineEmits<{
 }>()
 
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
-const isFocused = ref(false)
+const shape = useControlShape('field', () => props.size)
+const { isFocused, handleFocus, handleBlur, handleKeydown, handleKeyup } = useFieldFocusEvents(emit)
 
 const minHeight = computed(() => {
   const lineHeight = { sm: 1.25, md: 1.5, lg: 1.5, xl: 1.75 }
@@ -56,9 +59,10 @@ const minHeight = computed(() => {
 const textareaClasses = computed(() => {
   const baseClasses = [
     'ui-textarea',
-    'block relative w-full rounded-md transition-colors',
+    'block relative w-full transition-colors',
+    shape.value.radius,
     'text-text-neutral-base',
-    'placeholder:text-text-neutral-tertiary',
+    'placeholder:text-control-placeholder',
     'focus:outline-hidden',
   ]
 
@@ -77,30 +81,27 @@ const textareaClasses = computed(() => {
     baseClasses.push('resize-none')
   }
 
+  const showsFocus = isFocused.value && !props.disabled && !props.loading
+
   if (props.error) {
     baseClasses.push(
       'bg-actions-danger-idle-alpha-light',
-      'border', 'border-borders-danger-strong',
+      'border', 'border-control-error-border',
     )
+  } else if (showsFocus) {
+    baseClasses.push('bg-control-field-bg-focus', 'border', 'border-control-field-border')
   } else {
-    baseClasses.push(
-      'bg-actions-neutral-idle-alpha-light',
-      'border', 'border-borders-neutral-strong',
-    )
+    baseClasses.push('bg-control-field-bg', 'border', 'border-control-field-border')
   }
 
   if (props.disabled) {
     baseClasses.push('opacity-50 cursor-not-allowed')
-  } else if (!props.loading) {
-    baseClasses.push('hover:bg-actions-neutral-hover-overlay')
+  } else if (!props.loading && !showsFocus) {
+    baseClasses.push('hover:bg-[image:linear-gradient(var(--color-actions-neutral-hover-overlay),var(--color-actions-neutral-hover-overlay))]')
   }
 
-  if (isFocused.value && !props.disabled && !props.loading) {
-    if (props.error) {
-      baseClasses.push('border-borders-danger-strong', 'ring-1', 'ring-inset', 'ring-borders-danger-strong')
-    } else {
-      baseClasses.push('border-actions-primary-idle-alpha-strong', 'ring-1', 'ring-inset', 'ring-focus-ring')
-    }
+  if (showsFocus) {
+    baseClasses.push('focus-ring')
   }
 
   return baseClasses
@@ -116,24 +117,6 @@ function handleInput (event: Event) {
   emit('update:modelValue', target.value)
 }
 
-function handleFocus (event: FocusEvent) {
-  isFocused.value = true
-  emit('focus', event)
-}
-
-function handleBlur (event: FocusEvent) {
-  isFocused.value = false
-  emit('blur', event)
-}
-
-function handleKeydown (event: KeyboardEvent) {
-  emit('keydown', event)
-}
-
-function handleKeyup (event: KeyboardEvent) {
-  emit('keyup', event)
-}
-
 defineExpose({
   focus: () => textareaRef.value?.focus(),
   blur: () => textareaRef.value?.blur(),
@@ -200,6 +183,8 @@ defineExpose({
 </template>
 
 <style scoped>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+
 .ui-textarea::-webkit-scrollbar {
   width: 8px;
 }
@@ -210,7 +195,7 @@ defineExpose({
 
 .ui-textarea::-webkit-scrollbar-thumb {
   background: var(--color-neutral-alpha-dark-400);
-  border-radius: 4px;
+  @apply rounded-full;
 }
 
 .ui-textarea::-webkit-scrollbar-thumb:hover {

package/src/components/UiLabel/UiLabel.vue

@@ -21,7 +21,7 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="mb-1 flex items-center text-content-legends-bold-md text-text-neutral-tertiary">
+  <div class="mb-1 flex items-center text-content-legends-bold-md text-text-neutral-secondary">
     <UiTooltip :content="tooltip">
       <label
         :for="forId"

package/src/components/UiListItem/UiListItem.vue

@@ -18,7 +18,7 @@ export type Variant = typeof VARIANTS[number]
 const COLORS = ['primary', 'neutral', 'success', 'warning', 'error', 'neutral-invert'] as const
 export type Color = typeof COLORS[number]
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   variant?: Variant
   selected?: boolean
   isActive?: boolean
@@ -28,18 +28,63 @@ const props = defineProps<{
   additionalInfo?: string
   to?: RouteLocationRaw
   href?: string
-}>()
+  /**
+   * Aligns the content with the container edge; the hover and active fill bleeds past it without widening the row
+   */
+  flush?: boolean
+  /**
+   * Aligns the content with the list's top and bottom edges: the row drops its vertical padding and minimum height,
+   * and the hover and active fill bleeds 0.25rem above and below. It is designed for rows spaced 0.5rem (8px) apart,
+   * where the fill reaches the middle of the gap and never covers the neighbour row
+   */
+  flushVertical?: boolean
+  /**
+   * 'comfortable' adds vertical padding, for rows holding several lines beside an avatar
+   */
+  density?: 'compact' | 'comfortable'
+}>(), {
+  density: 'compact',
+})
+
+// Shadows are painted outside the box without adding scrollable overflow, so the fill can bleed
+// out of a scroll container's content edge.
+const FLUSH_HOVER_FILL = 'hover:shadow-[-0.75rem_0_var(--color-actions-primary-hover-overlay),0.75rem_0_var(--color-actions-primary-hover-overlay)]'
+const FLUSH_ACTIVE_FILL = 'shadow-[-0.75rem_0_var(--color-actions-primary-active-overlay),0.75rem_0_var(--color-actions-primary-active-overlay)]'
+
+// The vertical bleed is a layer behind the content that is never hit-tested, so it never covers a control above or
+// below the row; it carries the horizontal bleed as its own shadows.
+const BLEED_LAYER = "flush-vertical isolate before:content-[''] before:absolute before:inset-x-0 before:-inset-y-1 before:-z-1 before:rounded-row before:pointer-events-none"
+const BLEED_HOVER_FILL = 'hover:before:bg-actions-primary-hover-overlay'
+const BLEED_ACTIVE_FILL = 'before:bg-actions-primary-active-overlay'
+const FLUSH_BLEED_HOVER_FILL = 'hover:before:shadow-[-0.75rem_0_var(--color-actions-primary-hover-overlay),0.75rem_0_var(--color-actions-primary-hover-overlay)]'
+const FLUSH_BLEED_ACTIVE_FILL = 'before:shadow-[-0.75rem_0_var(--color-actions-primary-active-overlay),0.75rem_0_var(--color-actions-primary-active-overlay)]'
 
 const slots = useSlots()
 const hasAvatarSlot = computed(() => !!slots.avatar)
 const hasAsideSlot = computed(() => !!slots.aside)
 
 const cssClasses = computed(() => {
+  const isDefault = props.variant === 'default'
+  const bleeds = isDefault && props.flushVertical
+  const fillsBox = isDefault && !props.flushVertical
+
   return {
-    'text-content-text-md-regular default min-h-10 hover:bg-actions-primary-hover-overlay': props.variant === 'default',
+    'text-content-text-md-regular default': isDefault,
+    'min-h-10': fillsBox,
     'text-content-legends-bold-md title min-h-7': props.variant === 'title',
     'spacer-xs h-8': props.variant === 'spacer-xs',
-    'is-active bg-actions-primary-active-overlay': props.isActive && props.variant === 'default',
+    'is-active': props.isActive && isDefault,
+    'px-3': !props.flush,
+    'py-2': props.density === 'comfortable' && !props.flushVertical,
+    'hover:bg-actions-primary-hover-overlay': fillsBox,
+    'bg-actions-primary-active-overlay': fillsBox && props.isActive,
+    [FLUSH_HOVER_FILL]: fillsBox && props.flush && !props.isActive,
+    [FLUSH_ACTIVE_FILL]: fillsBox && props.flush && props.isActive,
+    [BLEED_LAYER]: bleeds,
+    [BLEED_HOVER_FILL]: bleeds && !props.isActive,
+    [BLEED_ACTIVE_FILL]: bleeds && props.isActive,
+    [FLUSH_BLEED_HOVER_FILL]: bleeds && props.flush && !props.isActive,
+    [FLUSH_BLEED_ACTIVE_FILL]: bleeds && props.flush && props.isActive,
   }
 })
 </script>
@@ -47,14 +92,14 @@ const cssClasses = computed(() => {
 <template>
   <div
     :class="cssClasses"
-    class="flex items-center gap-2 relative rounded-xl px-3"
+    class="flex items-center gap-2 relative rounded-xl"
   >
     <slot
       v-if="hasAvatarSlot"
       name="avatar"
     />
 
-    <div>
+    <div class="min-w-0">
       <template v-if="props.label">
         {{ props.label }}
       </template>
@@ -70,8 +115,6 @@ const cssClasses = computed(() => {
       name="aside"
     />
 
-    <slot />
-
     <router-link
       v-if="to && !href"
       :to="to"
@@ -102,7 +145,10 @@ const cssClasses = computed(() => {
 }
 
 .is-active {
-  background-color: var(--color-actions-primary-active-overlay);
   color: var(--color-actions-primary-idle);
 }
+
+.is-active:not(.flush-vertical) {
+  background-color: var(--color-actions-primary-active-overlay);
+}
 </style>

package/src/components/UiLoader/UiLoader.vue

@@ -1,33 +1,17 @@
 <template>
   <div>
-    <svg
+    <UiSpinnerIcon
       :class="[
         sizeClass,
-        'text-actions-neutral-idle animate-spin',
+        'text-current animate-spin',
       ]"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        class="opacity-20"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
-      />
-      <path
-        class="opacity-100"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
+    />
   </div>
 </template>
 <script lang="ts" setup>
 import { SIZES, type Size } from '../../constants'
 import { useIconSize } from '../../composables/useIconSize'
+import UiSpinnerIcon from './UiSpinnerIcon.vue'
 
 const props = defineProps({
   size: {

package/src/components/UiLoader/UiSpinnerIcon.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-20"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    />
+    <path
+      class="opacity-100"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+</template>

package/src/components/UiMenu/UiMenuContent.vue

@@ -1,22 +1,43 @@
 <script setup lang="ts">
 import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
 import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
 
-const props = withDefaults(defineProps<DropdownMenuContentProps>(), {
+const WIDTH_CLASSES = {
+  auto: '',
+  sm: 'min-w-48',
+  md: 'min-w-56',
+} as const
+
+interface Props extends DropdownMenuContentProps {
+  /**
+   * 'auto' sizes the menu to its items; 'sm' and 'md' set a 192px and 224px minimum, and longer items still widen it
+   * @default 'auto'
+   */
+  width?: keyof typeof WIDTH_CLASSES
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 'auto',
   sideOffset: 8,
   align: 'start',
   side: 'bottom',
 })
 
 const emits = defineEmits<DropdownMenuContentEmits>()
-const forwarded = useForwardPropsEmits(props, emits)
+const contentProps = computed(() => {
+  const { width: _width, ...rest } = props
+  return rest
+})
+const forwarded = useForwardPropsEmits(contentProps, emits)
 </script>
 
 <template>
   <DropdownMenuPortal>
     <DropdownMenuContent
       v-bind="{ ...forwarded, ...$attrs }"
-      class="bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg p-1.5 flex flex-col gap-0.5 z-50"
+      :class="WIDTH_CLASSES[props.width]"
+      class="max-w-(--reka-dropdown-menu-content-available-width) focus-indicator-none bg-surface-neutral-bg-main rounded-container border border-container-border shadow-shadows-drop-shadow-lg p-1 flex flex-col gap-1 z-overlay"
       data-colors-semantic="light"
     >
       <slot />

package/src/components/UiMenu/UiMenuGroup.vue

@@ -10,7 +10,7 @@ defineProps<{
   <DropdownMenuGroup v-bind="$attrs">
     <DropdownMenuLabel
       v-if="label"
-      class="text-content-legends-bold-md text-text-neutral-secondary px-3 pt-3 pb-1"
+      class="text-content-legends-bold-md text-text-neutral-secondary px-3.5 pt-3 pb-1"
     >
       {{ label }}
     </DropdownMenuLabel>

package/src/components/UiMenu/UiMenuItem.vue

@@ -1,17 +1,28 @@
 <script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
 import type { DropdownMenuItemEmits, DropdownMenuItemProps } from 'reka-ui'
 import { DropdownMenuItem, useForwardPropsEmits } from 'reka-ui'
 
-const props = defineProps<DropdownMenuItemProps>()
+export interface UiMenuItemProps extends DropdownMenuItemProps {
+  /** `danger` marks a destructive action such as Remove or Delete. */
+  variant?: 'default' | 'danger'
+}
+
+const props = withDefaults(defineProps<UiMenuItemProps>(), {
+  variant: 'default',
+})
 const emits = defineEmits<DropdownMenuItemEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(reactiveOmit(props, 'variant'), emits)
 </script>
 
 <template>
   <DropdownMenuItem
     v-bind="{ ...forwarded, ...$attrs }"
-    class="w-full flex items-center gap-2 min-h-10 px-3 py-1.5 rounded-lg hover:bg-actions-neutral-hover-overlay data-[highlighted]:bg-actions-neutral-hover-overlay transition-colors text-left outline-none cursor-pointer text-content-text-md-regular text-text-neutral-base"
+    class="w-full flex items-center gap-2 min-h-10 px-3 py-1.5 rounded-row transition-colors text-left outline-none cursor-pointer text-content-text-md-regular"
+    :class="variant === 'danger'
+      ? 'text-text-danger-body hover:bg-actions-danger-hover-overlay data-[highlighted]:bg-actions-danger-hover-overlay'
+      : 'text-text-neutral-base hover:bg-actions-neutral-hover-overlay data-[highlighted]:bg-actions-neutral-hover-overlay'"
   >
     <slot />
   </DropdownMenuItem>

package/src/components/UiMenu/UiMenuSubContent.vue

@@ -14,7 +14,7 @@ const forwarded = useForwardPropsEmits(props, emits)
   <DropdownMenuPortal>
     <DropdownMenuSubContent
       v-bind="{ ...forwarded, ...$attrs }"
-      class="bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg p-1.5 flex flex-col gap-0.5 z-50"
+      class="max-w-(--reka-dropdown-menu-content-available-width) focus-indicator-none bg-surface-neutral-bg-main rounded-container border border-container-border shadow-shadows-drop-shadow-lg p-1 flex flex-col gap-1 z-overlay"
       data-colors-semantic="light"
     >
       <slot />

package/src/components/UiMenu/UiMenuSubTrigger.vue

@@ -9,7 +9,7 @@ const forwarded = useForwardProps(props)
 <template>
   <DropdownMenuSubTrigger
     v-bind="{ ...forwarded, ...$attrs }"
-    class="w-full flex items-center justify-between gap-3 min-h-10 px-3 py-1.5 rounded-lg hover:bg-actions-neutral-hover-overlay data-[highlighted]:bg-actions-neutral-hover-overlay data-[state=open]:bg-actions-neutral-hover-overlay transition-colors text-left outline-none cursor-pointer"
+    class="w-full flex items-center justify-between gap-3 min-h-10 px-3 py-1.5 rounded-row hover:bg-actions-neutral-hover-overlay data-[highlighted]:bg-actions-neutral-hover-overlay data-[state=open]:bg-actions-neutral-hover-overlay transition-colors text-left outline-none cursor-pointer"
   >
     <slot />
     <span class="i-ph-caret-right w-4 h-4 text-text-neutral-tertiary shrink-0" />

package/src/components/UiNestedOptions/UiNestedOptions.vue

@@ -0,0 +1,6 @@
+<template>
+  <!-- ps-6 is the checkbox/radio box (size-5) plus its gap to the label (1): nested options start on the parent's label edge -->
+  <div class="ps-6">
+    <slot />
+  </div>
+</template>