@livestorm/ui-vue 2.0.5 → 4.0.0

package/src/components/UiDropdown/UiDropdownContent.vue

@@ -3,8 +3,18 @@ import type { SelectContentProps } from 'reka-ui'
 import { SelectContent, SelectPortal, SelectScrollDownButton, SelectScrollUpButton, SelectViewport } from 'reka-ui'
 import { useSlots } from 'vue'
 
+const WIDTH_CLASSES = {
+  auto: '',
+  lg: 'w-75',
+} as const
+
 interface Props extends SelectContentProps {
   showScrollButtons?: boolean
+  /**
+   * 'auto' sizes the content to the trigger and its items; 'lg' gives items with descriptions a fixed 300px
+   * @default 'auto'
+   */
+  width?: keyof typeof WIDTH_CLASSES
   /**
    * The color semantic mode for the dropdown content
    * @default 'light'
@@ -12,7 +22,8 @@ interface Props extends SelectContentProps {
   colorsSemantic?: 'light' | 'dark'
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
+  width: 'auto',
   position: 'popper',
   side: 'bottom',
   sideOffset: 8,
@@ -26,44 +37,44 @@ const slots = useSlots()
 <template>
   <SelectPortal>
     <SelectContent
+      data-testid="ui-dropdown-content"
       v-bind="$attrs"
       :position="position"
       :side-offset="sideOffset"
       :align="align"
       :side="side"
       :data-colors-semantic="colorsSemantic"
-      class="ui-dropdown-content focus-indicator-none z-50 relative py-3 px-2 rounded-xl bg-surface-neutral-bg-main min-w-(--reka-select-trigger-width) max-h-(--reka-select-content-available-height) shadow-shadows-drop-shadow-lg data-[state=open]:animate-[slideDownAndFade_0.2s_ease] data-[state=closed]:animate-[slideUpAndFade_0.15s_ease]"
+      :class="WIDTH_CLASSES[props.width]"
+      class="ui-dropdown-content focus-indicator-none z-overlay relative p-1 rounded-container border border-container-border bg-surface-neutral-bg-main min-w-(--reka-select-trigger-width) max-w-(--reka-select-content-available-width) max-h-(--reka-select-content-available-height) shadow-shadows-drop-shadow-lg data-[state=open]:animate-[slideDownAndFade_0.2s_ease] data-[state=closed]:animate-[slideUpAndFade_0.15s_ease]"
     >
       <div
         v-if="slots.header"
-        class="sticky top-0 bg-surface-neutral-bg-main px-3 mb-3"
+        class="pb-1"
       >
         <slot name="header" />
       </div>
 
-      <div class="flex flex-col gap-1 overflow-y-auto max-h-[300px]">
-        <SelectScrollUpButton
-          v-if="showScrollButtons"
-          class="flex items-center justify-center h-6 cursor-default text-text-neutral-base"
-        >
-          <div class="i-ls-chevron-up size-4" />
-        </SelectScrollUpButton>
+      <SelectScrollUpButton
+        v-if="showScrollButtons"
+        class="flex items-center justify-center h-6 cursor-default text-text-neutral-base"
+      >
+        <div class="i-ph-caret-up size-4" />
+      </SelectScrollUpButton>
 
-        <SelectViewport class="flex flex-col gap-1">
-          <slot />
-        </SelectViewport>
+      <SelectViewport class="flex flex-col gap-1 max-h-[300px] rounded-row">
+        <slot />
+      </SelectViewport>
 
-        <SelectScrollDownButton
-          v-if="showScrollButtons"
-          class="flex items-center justify-center h-6 cursor-default text-text-neutral-base"
-        >
-          <div class="i-ls-chevron-down size-4" />
-        </SelectScrollDownButton>
-      </div>
+      <SelectScrollDownButton
+        v-if="showScrollButtons"
+        class="flex items-center justify-center h-6 cursor-default text-text-neutral-base"
+      >
+        <div class="i-ph-caret-down size-4" />
+      </SelectScrollDownButton>
 
       <div
         v-if="slots.footer"
-        class="sticky bottom-0 bg-surface-neutral-bg-main"
+        class="pt-1"
       >
         <slot name="footer" />
       </div>

package/src/components/UiDropdown/UiDropdownGroup.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { SelectGroup, SelectLabel } from 'reka-ui'
+
+defineProps<{
+  /** Heading read before the options of the group; leave it out for an untitled group. */
+  label?: string
+}>()
+</script>
+
+<template>
+  <SelectGroup
+    v-bind="$attrs"
+    class="flex flex-col gap-1"
+  >
+    <SelectLabel
+      v-if="label"
+      class="px-4 pt-2 pb-1 text-content-legends-bold-md text-text-neutral-tertiary"
+    >
+      {{ label }}
+    </SelectLabel>
+    <slot />
+  </SelectGroup>
+</template>

package/src/components/UiDropdown/UiDropdownItem.vue

@@ -1,25 +1,49 @@
 <script setup lang="ts">
-import type { SelectItemProps } from 'reka-ui'
+import type { SelectItemEmits, SelectItemProps } from 'reka-ui'
 import { SelectItem, SelectItemText } from 'reka-ui'
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
 import { UI_DROPDOWN_MULTIPLE_KEY } from './context'
+import DropdownItemCheckbox from './DropdownItemCheckbox.vue'
 
 interface Props extends SelectItemProps {
   title?: string
   description?: string
   icon?: string
+  /** `danger` marks an option that takes something away, such as removing access. */
+  variant?: 'default' | 'danger'
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   description: undefined,
   icon: undefined,
+  variant: 'default',
 })
 
+const isDanger = computed(() => props.variant === 'danger')
+
+const stateBackgroundClass = computed(() => isDanger.value
+  ? 'data-highlighted:bg-actions-danger-hover-overlay data-[state=checked]:bg-actions-danger-pressed-overlay'
+  : 'data-highlighted:bg-actions-neutral-hover-overlay data-[state=checked]:bg-actions-primary-active-overlay')
+
+const titleColorClass = computed(() => isDanger.value
+  ? 'text-text-danger-body'
+  : 'text-actions-neutral-idle group-data-highlighted/item:text-actions-neutral-idle group-data-[state=checked]/item:text-actions-primary-idle')
+
+const descriptionColorClass = computed(() => isDanger.value
+  ? 'text-text-neutral-secondary'
+  : 'text-text-neutral-secondary group-data-highlighted/item:text-text-neutral-secondary group-data-[state=checked]/item:text-text-primary-secondary')
+
 // `UiDropdown` provides this when `multiple` is set so items render a
 // leading checkbox automatically. Falls back to single-select behavior
 // when the item is used outside a `UiDropdown` (defensive default).
 const isMultiple = inject(UI_DROPDOWN_MULTIPLE_KEY, undefined)
+
+// Reka picks on Enter keydown without cancelling it, so its keypress would activate whatever the pick focused.
+function consumePickingKey (event: SelectItemEmits['select'][0]) {
+  const { originalEvent } = event.detail
+  if (originalEvent instanceof KeyboardEvent) originalEvent.preventDefault()
+}
 </script>
 
 <template>
@@ -27,36 +51,39 @@ const isMultiple = inject(UI_DROPDOWN_MULTIPLE_KEY, undefined)
     v-bind="$attrs"
     :value="value"
     :disabled="disabled"
-    class="focus-indicator-none group flex px-3 py-1 rounded-md cursor-pointer outline-hidden transition-all duration-150 ease-in-out data-highlighted:bg-actions-neutral-hover-overlay data-[state=checked]:bg-actions-primary-active-overlay data-disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:pointer-events-none"
+    class="focus-indicator-none group/item flex px-3 py-1 rounded-row cursor-pointer outline-hidden transition-all duration-150 ease-in-out data-disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:pointer-events-none"
+    :class="stateBackgroundClass"
+    @select="consumePickingKey"
   >
     <div class="flex flex-1 gap-2 items-center overflow-hidden">
-      <!-- Multi-select indicator: visually mirrors `UiInputCheckbox` (same
-           size, border radius, primary fill, and `i-ls-checkbox-check`
-           icon) without dragging in the input's runtime/a11y plumbing.
-           Driven entirely by the parent `SelectItem`'s `data-[state=checked]`
-           attribute — no per-item state. -->
-      <div
-        v-if="isMultiple"
-        class="shrink-0 size-4 rounded-sm border border-borders-neutral-strong bg-surface-neutral-bg-main grid place-content-center transition-colors group-data-[state=checked]:bg-actions-primary-idle group-data-[state=checked]:border-borders-primary-default"
-      >
-        <div class="i-ls-checkbox-check size-3 text-actions-neutral-invert-idle opacity-0 group-data-[state=checked]:opacity-100" />
-      </div>
+      <DropdownItemCheckbox v-if="isMultiple" />
 
       <div
         v-if="icon"
         :class="[icon, 'size-4']"
-        class="shrink-0 group-data-highlighted:text-actions-neutral-idle group-data-[state=checked]:text-actions-primary-idle"
+        class="shrink-0 group-data-highlighted/item:text-actions-neutral-idle group-data-[state=checked]/item:text-actions-primary-idle"
       />
 
+      <div
+        v-if="$slots.leading"
+        class="shrink-0"
+      >
+        <slot name="leading" />
+      </div>
+
       <div class="flex flex-1 flex-col items-start justify-center min-w-0 py-1.5">
-        <SelectItemText class="whitespace-nowrap text-content-text-md-regular text-actions-neutral-idle group-data-highlighted:text-actions-neutral-idle group-data-[state=checked]:text-actions-primary-idle">
+        <SelectItemText
+          class="max-w-full truncate text-content-text-md-medium"
+          :class="titleColorClass"
+        >
           <slot name="title">
             {{ title }}
           </slot>
         </SelectItemText>
         <div
           v-if="description || $slots.description"
-          class="text-content-legends-medium-md text-text-neutral-secondary group-data-highlighted:text-text-neutral-secondary group-data-[state=checked]:text-text-primary-secondary"
+          class="max-w-full truncate text-content-legends-medium-md"
+          :class="descriptionColorClass"
         >
           <slot name="description">
             {{ description }}

package/src/components/UiDropdown/UiDropdownSeparator.vue

@@ -3,5 +3,5 @@ import { SelectSeparator } from 'reka-ui'
 </script>
 
 <template>
-  <SelectSeparator class="h-px bg-borders-neutral-light my-1 -mx-2 relative" />
+  <SelectSeparator class="h-px bg-borders-neutral-light my-1 -mx-1 relative" />
 </template>

package/src/components/UiDropdown/UiDropdownTrigger.vue

@@ -3,6 +3,7 @@ import type { SelectTriggerProps } from 'reka-ui'
 import { SelectIcon, SelectTrigger, SelectValue } from 'reka-ui'
 import { computed, useSlots } from 'vue'
 import { useButtonStyles } from '../../composables/useButtonStyles'
+import { useControlShape } from '../../composables/useControlShape'
 
 type TSize = 'sm' | 'md' | 'lg' | 'xl'
 type TColor = 'neutral' | 'primary'
@@ -23,12 +24,21 @@ interface Props extends SelectTriggerProps {
   color?: TColor
   /**
    * Visual variant, named to match `UiButton`. `secondary` (default) is the
-   * bordered field look. `tertiary` drops the border + background to read like
-   * a `UiButton` tertiary — the trigger shows only colored text with a hover
-   * overlay, so it sits flush next to tertiary buttons (e.g. a "View all" CTA).
+   * bordered field look. `tertiary` drops the border + background: the trigger
+   * shows only its value, coloured like a `UiButton` tertiary and set in the
+   * regular body text style, with a hover overlay. It suits a value picked
+   * inside a row, such as a role beside a person.
    */
   variant?: TVariant
   error?: boolean
+  /**
+   * Shows the value as static text in the box of an editable trigger: same size, padding and
+   * border width, no fill, and an empty slot where the chevron would be, so its text ends where an
+   * editable trigger's value ends. It is not focusable and opens nothing; it renders as a `group`, so pass
+   * `aria-labelledby` (for example the row's name) to label it like the editable trigger.
+   * The value reads in the secondary text colour. Render it from the `value` slot.
+   */
+  readonly?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -39,61 +49,112 @@ const props = withDefaults(defineProps<Props>(), {
   color: 'neutral',
   variant: 'secondary',
   error: false,
+  readonly: false,
 })
 
 const slots = useSlots()
 
-// Shared button styling — both variants pull their background / border / text /
+// Shared button styling — both variants pull their background / text /
 // overlay tokens from the same source `UiButton` uses, so the trigger stays in
 // lockstep with the button palette. `error` maps onto the button `error` color;
 // otherwise the trigger's `primary`/`neutral` colors line up 1:1.
 const buttonColor = computed(() => (props.error ? 'error' as const : props.color))
-const { textClass, bgClass, borderClasses, beforeHoverOverlayClass } = useButtonStyles({
+const { textClass, bgClass, beforeHoverOverlayClass } = useButtonStyles({
   variant: () => props.variant,
   color: buttonColor,
   disabled: () => props.disabled,
 })
 
+const FIELD_BORDER: Record<'neutral' | 'primary' | 'error', string> = {
+  neutral: 'border-control-field-border',
+  primary: 'border-borders-primary-strong',
+  error: 'border-control-error-border',
+}
+const borderClass = computed(() => FIELD_BORDER[buttonColor.value])
+
+const fieldBgClass = computed(() =>
+  buttonColor.value === 'neutral' ? 'bg-control-field-bg' : bgClass.value,
+)
+
+// With a `leading` slot the start padding shrinks so the leading box (24px on
+// sm and md, 32px on lg and xl, enforced on its wrapper) sits as far from the
+// start edge as from the top and bottom: (field height - box) / 2 - 1px border.
 const sizeClasses = computed(() => {
   const sizes = {
     sm: {
-      field: 'h-8 px-2 gap-1',
-      text: 'text-action-button-sm tracking-[0.05px]',
-      icon: 'size-3',
+      field: 'gap-1',
       padding: 'px-2',
+      leadingPadding: 'pl-[3px] pr-2',
+      leadingBox: 'size-6',
+      text: 'text-action-button-sm tracking-[0.05px]',
+      tertiaryText: 'text-content-legends-medium-md',
     },
     md: {
-      field: 'h-10 px-3 gap-1.5',
-      text: 'text-action-button-md leading-[20px] tracking-[-0.04px]',
-      icon: 'size-4',
+      field: 'gap-1.5',
       padding: 'px-3',
+      leadingPadding: 'pl-[5px] pr-3',
+      leadingBox: 'size-6',
+      text: 'text-action-button-md leading-[20px] tracking-[-0.04px]',
+      tertiaryText: 'text-content-text-md-regular',
     },
     lg: {
-      field: 'h-12 px-4 gap-2',
-      text: 'text-action-button-lg leading-[20px] tracking-[-0.04px]',
-      icon: 'size-4',
+      field: 'gap-2',
       padding: 'px-4',
+      leadingPadding: 'pl-[7px] pr-4',
+      leadingBox: 'size-8',
+      text: 'text-action-button-lg leading-[20px] tracking-[-0.04px]',
+      tertiaryText: 'text-content-text-lg-regular',
     },
     xl: {
-      field: 'h-16 px-4 gap-2',
-      text: 'text-action-button-lg leading-[24px] tracking-[-0.04px]',
-      icon: 'size-6',
+      field: 'gap-2',
       padding: 'px-4',
+      leadingPadding: 'pl-[15px] pr-4',
+      leadingBox: 'size-8',
+      text: 'text-action-button-lg leading-[24px] tracking-[-0.04px]',
+      tertiaryText: 'text-content-text-lg-regular',
     },
   }
 
   return sizes[props.size]
 })
 
+const shape = useControlShape('field', () => props.size)
+
+const boxClasses = computed(() => [
+  'flex',
+  'items-center',
+  'justify-between',
+  'w-full',
+  shape.value.radius,
+  shape.value.height,
+  'border',
+  'border-solid',
+  'border-transparent',
+  'bg-transparent',
+  sizeClasses.value.field,
+])
+
+const readonlyTextClasses = computed(() => [
+  'flex-1',
+  'overflow-hidden',
+  'text-ellipsis',
+  'whitespace-nowrap',
+  'min-w-0',
+  'text-left',
+  'text-text-neutral-secondary',
+  props.variant === 'tertiary' ? sizeClasses.value.tertiaryText : sizeClasses.value.text,
+])
+
 const fieldClasses = computed(() => {
   const base = [
     'focus-indicator-none',
-    'group',
+    'group/trigger',
     'flex',
     'items-center',
     'justify-between',
     'w-full',
-    'rounded-lg',
+    shape.value.radius,
+    shape.value.height,
     'border',
     'border-solid',
     'transition-all',
@@ -103,12 +164,11 @@ const fieldClasses = computed(() => {
     'cursor-pointer',
     'font-medium',
     'focus:outline-hidden',
-    'focus-visible:ring-1',
-    'focus-visible:ring-inset',
+    'focus-visible:focus-ring',
     // Hover overlay via ::before
     "before:content-['']",
     'before:absolute',
-    'before:inset-0',
+    'before:-inset-px',
     'before:rounded-[inherit]',
     'before:opacity-0',
     'before:transition-opacity',
@@ -129,33 +189,29 @@ const fieldClasses = computed(() => {
     state.push('opacity-50', '!cursor-not-allowed')
   }
 
-  // Background / border / hover overlay all come from `useButtonStyles`, keyed
-  // by `variant` × `buttonColor` — the exact tokens `UiButton` uses. Tertiary
+  // Background / hover overlay come from `useButtonStyles`, keyed by
+  // `variant` × `buttonColor` — the exact tokens `UiButton` uses. Tertiary
   // resolves to no border/bg (transparent), secondary to the bordered field.
   if (props.variant === 'tertiary') {
     state.push('border-transparent', 'bg-transparent')
   }
   else {
-    state.push(bgClass.value, ...borderClasses.value)
+    state.push(fieldBgClass.value, borderClass.value)
   }
   if (beforeHoverOverlayClass.value) state.push(beforeHoverOverlayClass.value)
 
-  // Focus ring + open-state border are trigger-specific (a button has no
-  // open state). Error keeps its danger-colored focus ring; everything else
-  // uses the standard primary focus highlight.
+  // The open-state border is trigger-specific: a button has no open state.
   if (props.error) {
-    state.push(
-      'focus-visible:border-borders-danger-strong',
-      'focus-visible:ring-borders-danger-strong',
-      'data-[state=open]:border-borders-danger-strong',
-    )
+    state.push('data-[state=open]:border-control-error-border')
   }
   else {
-    state.push('focus-visible:ring-focus-ring')
     if (props.variant !== 'tertiary') {
+      state.push('data-[state=open]:border-control-field-border-focus')
+    }
+    if (props.variant !== 'tertiary' && buttonColor.value === 'neutral') {
       state.push(
-        'focus-visible:border-actions-primary-idle-alpha-strong',
-        'data-[state=open]:border-actions-primary-idle-alpha-strong',
+        'focus-visible:bg-control-field-bg-focus',
+        'data-[state=open]:bg-control-field-bg-focus',
       )
     }
   }
@@ -175,10 +231,12 @@ const textClasses = computed(() => {
     : isPrimary.value ? 'text-actions-primary-idle' : 'text-text-neutral-base'
   // Placeholder color: primary (incl. tertiary-primary) keeps the primary
   // token so an empty filter chip still reads as actionable; everything else
-  // uses the muted placeholder token.
-  const placeholderClass = (isPrimary.value || (isTertiary.value && props.color === 'primary'))
-    ? 'group-data-placeholder:text-actions-primary-idle'
-    : 'group-data-placeholder:text-text-neutral-tertiary'
+  // uses the muted placeholder token. A `value` slot renders a value, never the placeholder.
+  const placeholderClass = slots.value
+    ? ''
+    : (isPrimary.value || (isTertiary.value && props.color === 'primary'))
+        ? 'group-data-placeholder/trigger:text-actions-primary-idle'
+        : 'group-data-placeholder/trigger:text-control-placeholder'
   return [
     'flex-1',
     'overflow-hidden',
@@ -188,7 +246,7 @@ const textClasses = computed(() => {
     'text-left',
     colorClass,
     placeholderClass,
-    sizeClasses.value.text,
+    isTertiary.value ? sizeClasses.value.tertiaryText : sizeClasses.value.text,
   ].join(' ')
 })
 
@@ -204,17 +262,53 @@ const iconContainerClasses = computed(() => {
     isTertiary.value
       ? textClass.value
       : isPrimary.value ? 'text-actions-primary-idle' : 'text-text-neutral-tertiary',
-    sizeClasses.value.icon,
+    shape.value.chevron,
   ].join(' ')
 })
 </script>
 
 <template>
+  <span
+    v-if="readonly"
+    data-testid="ui-dropdown-trigger-readonly"
+    role="group"
+    v-bind="$attrs"
+    :class="[boxClasses, slots.leading ? sizeClasses.leadingPadding : sizeClasses.padding]"
+  >
+    <span
+      v-if="slots.leading"
+      data-testid="ui-dropdown-trigger-leading"
+      class="flex items-center justify-center shrink-0"
+      :class="sizeClasses.leadingBox"
+    >
+      <slot name="leading" />
+    </span>
+    <div :class="readonlyTextClasses">
+      <slot name="value">
+        {{ placeholder }}
+      </slot>
+    </div>
+    <span
+      v-if="showIcon"
+      class="shrink-0"
+      :class="shape.chevron"
+      aria-hidden="true"
+    />
+  </span>
   <SelectTrigger
+    v-else
     v-bind="$attrs"
-    :class="fieldClasses"
+    :class="[fieldClasses, slots.leading ? sizeClasses.leadingPadding : sizeClasses.padding]"
     :disabled="disabled"
   >
+    <span
+      v-if="slots.leading"
+      data-testid="ui-dropdown-trigger-leading"
+      class="flex items-center justify-center shrink-0"
+      :class="sizeClasses.leadingBox"
+    >
+      <slot name="leading" />
+    </span>
     <div :class="textClasses">
       <SelectValue
         v-if="!slots.value"
@@ -231,8 +325,8 @@ const iconContainerClasses = computed(() => {
       :class="iconContainerClasses"
     >
       <div
-        class="i-ls-chevron-down transition-transform duration-200 ease-in-out group-data-[state=open]:rotate-180"
-        :class="sizeClasses.icon"
+        class="i-ph-caret-down transition-transform duration-200 ease-in-out group-data-[state=open]/trigger:rotate-180"
+        :class="shape.chevron"
       />
     </SelectIcon>
   </SelectTrigger>

package/src/components/UiDropdown/index.ts

@@ -3,6 +3,7 @@ export { default as UiDropdown } from './UiDropdown.vue'
 export { default as UiDropdownTrigger } from './UiDropdownTrigger.vue'
 export { default as UiDropdownContent } from './UiDropdownContent.vue'
 export { default as UiDropdownItem } from './UiDropdownItem.vue'
+export { default as UiDropdownGroup } from './UiDropdownGroup.vue'
 export { default as UiDropdownSeparator } from './UiDropdownSeparator.vue'
 
 // Re-export useful Reka UI types and components for advanced usage