@livestorm/ui-vue 2.0.5 → 4.0.0

package/src/composables/useButtonStyles.ts

@@ -1,7 +1,7 @@
 import { computed, type MaybeRefOrGetter, toValue } from 'vue'
 
 // Single source of truth for the action-button visual language (background,
-// text, border, hover/active overlays) keyed by `variant` × `color`. Both
+// text, hover/active overlays) keyed by `variant` × `color`. Both
 // `UiButton` and `UiDropdownTrigger` consume this so a trigger styled as a
 // tertiary button stays pixel-identical to a real `UiButton` without copying
 // token names around.
@@ -81,16 +81,6 @@ const TEXT_MAP: Record<ButtonVariant, Record<ButtonColor, string>> = {
   },
 }
 
-// Border — only `secondary` draws one.
-const BORDER_MAP: Record<ButtonColor, string[]> = {
-  'primary': ['border', 'border-borders-primary-strong'],
-  'neutral': ['border', 'border-borders-neutral-strong'],
-  'neutral-invert': ['border', 'border-borders-neutral-invert-strong'],
-  'success': ['border', 'border-borders-success-strong'],
-  'warning': ['border', 'border-borders-warning-strong'],
-  'error': ['border', 'border-borders-danger-strong'],
-}
-
 // Hover overlay tints keyed by `variant-color`, in both the `group-hover:`
 // flavor (layered button overlay element) and the `before:` flavor
 // (single-element trigger pseudo). Kept as literals for Tailwind extraction.
@@ -205,9 +195,14 @@ export function useButtonStyles(options: UseButtonStylesOptions) {
   /** Text color class for the current variant × color. */
   const textClass = computed(() => TEXT_MAP[variant.value][color.value])
 
-  /** Border classes — only `secondary` paints a border. */
+  /** Soft border of the secondary fill layer; transparent except in the accessible look. */
   const borderClasses = computed(() =>
-    variant.value === 'secondary' ? (BORDER_MAP[color.value] ?? []) : [],
+    variant.value === 'secondary' ? ['border', 'border-control-soft-border'] : [],
+  )
+
+  /** Tertiary labels are underlined in the accessible look. */
+  const decorationClass = computed(() =>
+    variant.value === 'tertiary' ? '[text-decoration-line:var(--control-link-decoration)] underline-offset-3' : '',
   )
 
   /**
@@ -236,6 +231,7 @@ export function useButtonStyles(options: UseButtonStylesOptions) {
     bgClass,
     textClass,
     borderClasses,
+    decorationClass,
     overlayClasses,
     beforeHoverOverlayClass,
   }

package/src/composables/useChoiceboxSurface.ts

@@ -0,0 +1,36 @@
+import { computed, type ComputedRef, type MaybeRefOrGetter, toValue } from 'vue'
+import type { ChoiceControl } from '../components/UiChoice/types'
+
+interface ChoiceboxState {
+  control: ChoiceControl
+  selected: boolean
+  disabled: boolean
+  error?: boolean
+}
+
+// Only the row's own control rings the surface: a control in the content slot keeps its own focus
+const FOCUS_RING: Record<ChoiceControl, string> = {
+  radio: 'has-[[role=radio]:focus-visible]:focus-ring',
+  switch: 'has-[[role=switch]:focus-visible]:focus-ring',
+  checkbox: 'has-[[type=checkbox]:focus-visible]:focus-ring',
+}
+
+/** Border, fill, radius and focus ring of a UiChoice choicebox */
+export function useChoiceboxSurface (state: MaybeRefOrGetter<ChoiceboxState>): ComputedRef<string[]> {
+  return computed(() => {
+    const { control, selected, disabled, error } = toValue(state)
+    const classes = ['rounded-row border', FOCUS_RING[control]]
+
+    if (error) {
+      classes.push('bg-actions-danger-idle-alpha-light', selected ? 'border-actions-danger-idle' : 'border-control-error-border')
+    } else if (disabled) {
+      classes.push('bg-control-choice-bg-disabled border-control-choice-border-disabled')
+    } else if (selected) {
+      classes.push('bg-control-choice-selected-bg border-control-choice-selected-border hover:bg-control-choice-selected-bg-hover')
+    } else {
+      classes.push('bg-control-choice-bg border-control-choice-border hover:bg-control-choice-bg-hover hover:border-control-choice-border-hover')
+    }
+
+    return classes
+  })
+}

package/src/composables/useContentMode.ts

@@ -0,0 +1,66 @@
+import { computed, onMounted, onUnmounted, ref, type Ref } from 'vue'
+import useThemeAndModes from './useThemeAndModes'
+import { storedThemingApplies } from './storedThemingApplies'
+
+/**
+ * Registers an element as a page "content" surface so the stored content mode
+ * (driven by the ThemePicker) applies its `data-colors-semantic` — the same
+ * behaviour `UiPage` gives its page content, without pulling in the full page
+ * layout (and its `<main>`).
+ *
+ * Content ships light. The stored content mode applies where the picker
+ * exists (see storedThemingApplies); everyone else gets the shipped default
+ * regardless of what localStorage may hold.
+ *
+ * The predicate is read in onMounted, not at setup: setup also runs during
+ * SSR (no localStorage), and server + client-hydration markup must be
+ * identical — stored modes take over right after mount instead.
+ *
+ * @param element  Template ref of the content element to watch.
+ * @param selector Unique key for the watch registry — one per logical surface
+ *                 (e.g. `[data-name="ui-page-content"]`).
+ * @returns `contentMode`, to bind to the element's `data-colors-semantic`.
+ */
+export function useContentMode (
+  element: Ref<HTMLElement | undefined>,
+  selector: string,
+) {
+  const { addElementToWatch, removeElementToWatch, currentContentMode } = useThemeAndModes()
+  const storedApplies = ref(false)
+
+  // Captured at registration: Vue has already nulled the template ref by the
+  // time onUnmounted runs, and unregistering needs the element it registered.
+  let registered: HTMLElement | undefined
+
+  // Always resolve to a concrete mode, never undefined. useThemeAndModes also
+  // sets this attribute imperatively; if the binding resolved to undefined,
+  // Vue would strip the attribute on the re-render that follows the onMounted
+  // flag flip, and the content would silently inherit the *shell* mode from
+  // <body> — reading as "content mode resets to dark on every navigation".
+  const contentMode = computed(() => (
+    storedApplies.value ? currentContentMode.value : 'light'
+  ))
+
+  onMounted(() => {
+    storedApplies.value = storedThemingApplies()
+
+    if (!element.value) { return }
+
+    registered = element.value
+    addElementToWatch('content', {
+      selector,
+      element: registered,
+      ...(storedApplies.value ? {} : { modeOverride: 'light' }),
+    })
+  })
+
+  // The registry outlives this component, so a surface that unmounts without
+  // this stays referenced and keeps being written to.
+  onUnmounted(() => {
+    if (registered) {
+      removeElementToWatch('content', { selector, element: registered })
+    }
+  })
+
+  return { contentMode }
+}

package/src/composables/useControlModes.ts

@@ -0,0 +1,11 @@
+/**
+ * Applies the accessibility look on the app root: `data-accessibility="on"`.
+ * The control tokens read this attribute.
+ */
+export function applyControlModes (
+  { accessibility }: { accessibility: boolean },
+  root: HTMLElement = document.body,
+) {
+  if (accessibility) root.setAttribute('data-accessibility', 'on')
+  else root.removeAttribute('data-accessibility')
+}

package/src/composables/useControlShape.ts

@@ -0,0 +1,34 @@
+import { computed, type ComputedRef, type MaybeRefOrGetter, toValue } from 'vue'
+
+// NOTE: every class must be a complete literal string: Tailwind's static
+// extractor can't see interpolated class names.
+
+export type FieldSize = 'sm' | 'md' | 'lg' | 'xl'
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'
+
+interface FieldShape { height: string, radius: string, chevron: string }
+
+const FIELD_SHAPES: Record<FieldSize, FieldShape> = {
+  sm: { height: 'h-field-sm', radius: 'rounded-field-sm', chevron: 'size-3.5' },
+  md: { height: 'h-field-md', radius: 'rounded-field-md', chevron: 'size-4' },
+  lg: { height: 'h-field-lg', radius: 'rounded-field-lg', chevron: 'size-5' },
+  xl: { height: 'h-field-xl', radius: 'rounded-field-xl', chevron: 'size-6' },
+}
+
+const BUTTON_SHAPES: Record<ButtonSize, { height: string, square: string, radius: string }> = {
+  xs: { height: 'h-button-xs', square: 'size-button-xs', radius: 'rounded-button-xs' },
+  sm: { height: 'h-button-sm', square: 'size-button-sm', radius: 'rounded-button-sm' },
+  md: { height: 'h-button-md', square: 'size-button-md', radius: 'rounded-button-md' },
+  lg: { height: 'h-button-lg', square: 'size-button-lg', radius: 'rounded-button-lg' },
+}
+
+interface ControlShapes {
+  field: { size: FieldSize, shape: FieldShape }
+  button: { size: ButtonSize, shape: { height: string, square: string, radius: string } }
+}
+
+export function useControlShape<K extends keyof ControlShapes> (kind: K, size: MaybeRefOrGetter<ControlShapes[K]['size']>): ComputedRef<ControlShapes[K]['shape']> {
+  return computed(() => (kind === 'field'
+    ? FIELD_SHAPES[toValue(size) as FieldSize]
+    : BUTTON_SHAPES[toValue(size) as ButtonSize]) as ControlShapes[K]['shape'])
+}

package/src/composables/useFieldFocusEvents.ts

@@ -0,0 +1,30 @@
+import { ref } from 'vue'
+
+export function useFieldFocusEvents(emit: {
+  (event: 'focus', payload: FocusEvent): void
+  (event: 'blur', payload: FocusEvent): void
+  (event: 'keydown', payload: KeyboardEvent): void
+  (event: 'keyup', payload: KeyboardEvent): void
+}) {
+  const isFocused = ref(false)
+
+  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)
+  }
+
+  return { isFocused, handleFocus, handleBlur, handleKeydown, handleKeyup }
+}

package/src/composables/useIconSize.ts

@@ -0,0 +1,43 @@
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+
+// Single source of truth for the icon diameter a control renders at, keyed by
+// the control's size name.
+//
+// Every control that puts an icon inside itself consumes this — buttons, button
+// groups, action bar items, dropdown triggers, text fields, stepper indicators,
+// loaders — so a design change to the ladder is one edit here instead of one
+// per component. Components covering only part of the ladder (an action bar
+// stops at md, a text field starts at sm) index the rungs they expose.
+//
+// NOTE: every class must be a complete literal string — Tailwind's static
+// extractor can't see interpolated class names (`size-${n}`).
+
+export const ICON_SIZES = {
+  xs: 'size-3',
+  sm: 'size-4',
+  md: 'size-5',
+  lg: 'size-6',
+  xl: 'size-7',
+} as const
+
+export type IconSizeName = keyof typeof ICON_SIZES
+
+/** Reactive icon size class for a control's `size`. */
+export function useIconSize(size: MaybeRefOrGetter<IconSizeName>) {
+  return computed(() => ICON_SIZES[toValue(size)])
+}
+
+// A button's trailing icon (external link, chevron) sits one step below its
+// leading icon so it reads as an affordance, not as content.
+const TRAILING_ICON_SIZES = {
+  xs: 'size-2.5',
+  sm: 'size-3.5',
+  md: 'size-4',
+  lg: 'size-5',
+  xl: 'size-6',
+} as const
+
+/** Reactive trailing icon size class for a control's `size`. */
+export function useTrailingIconSize(size: MaybeRefOrGetter<IconSizeName>) {
+  return computed(() => TRAILING_ICON_SIZES[toValue(size)])
+}

package/src/composables/usePullGesture.ts

@@ -0,0 +1,142 @@
+import { computed, ref, toValue, type MaybeRefOrGetter } from 'vue'
+
+interface UsePullGestureOptions {
+  /**
+   * Pointer travel (px, ascending) at which each stage is reached. An empty
+   * list disables the gesture.
+   */
+  stages: MaybeRefOrGetter<number[]>
+  /**
+   * Travel (px) up to which the element tracks the pointer 1:1; resistance
+   * builds beyond it. Defaults to the last stage.
+   */
+  resistFrom?: MaybeRefOrGetter<number | undefined>
+  /**
+   * Visible travel the pulled element tends toward once resisting. Defaults to
+   * five times the last stage.
+   */
+  maxOffset?: MaybeRefOrGetter<number | undefined>
+  /** Called on release when at least one stage was reached. */
+  onRelease?: (stage: number) => void
+}
+
+interface Point {
+  x: number
+  y: number
+}
+
+const REST: Point = { x: 0, y: 0 }
+
+// Travel (px) under which a press still counts as a click, not a drag.
+const DRAG_SLOP = 4
+
+// Detent at each stage: the element holds still for this much travel past
+// the threshold, then catches up at double speed over the same distance.
+const DETENT = 8
+
+function detentLag (distance: number, stages: number[]) {
+  return stages.reduce(
+    (lag, threshold) => lag + Math.max(0, DETENT - Math.abs(distance - threshold - DETENT)),
+    0,
+  )
+}
+
+// Free travel up to `free`, then an iOS-style rubber band lets the visible
+// travel approach `max` asymptotically.
+function resist (distance: number, free: number, max: number) {
+  if (distance <= free) return distance
+  const tail = max - free
+  if (tail <= 0) return free
+  const beyond = distance - free
+  return free + (tail * beyond) / (beyond + tail)
+}
+
+/**
+ * Pull gesture in any direction with staged thresholds: the element follows
+ * the pointer through the stages and resists beyond the last one. Bind the
+ * returned pointer handlers to the pulled element and apply `offset` as its
+ * translation; on release the state snaps back to rest.
+ */
+export function usePullGesture (options: UsePullGestureOptions) {
+  const isPulling = ref(false)
+  const delta = ref<Point>(REST)
+  let pointerId: number | null = null
+  let start: Point = REST
+  let didDrag = false
+
+  const stages = computed(() => toValue(options.stages))
+  const enabled = computed(() => stages.value.length > 0)
+  const lastStage = computed(() => stages.value[stages.value.length - 1] ?? 0)
+  const resistFrom = computed(() => toValue(options.resistFrom) ?? lastStage.value)
+  const maxOffset = computed(() => toValue(options.maxOffset) ?? lastStage.value * 5)
+  const distance = computed(() => Math.hypot(delta.value.x, delta.value.y))
+  const stage = computed(() => stages.value.filter(threshold => distance.value >= threshold).length)
+  const offset = computed<Point>(() => {
+    if (distance.value === 0) return REST
+    const eased = distance.value - detentLag(distance.value, stages.value)
+    const ratio = resist(eased, resistFrom.value, maxOffset.value) / distance.value
+    return { x: delta.value.x * ratio, y: delta.value.y * ratio }
+  })
+
+  function reset () {
+    isPulling.value = false
+    delta.value = REST
+    pointerId = null
+  }
+
+  function onPointerDown (event: PointerEvent) {
+    if (!enabled.value || !event.isPrimary || event.button !== 0) return
+    pointerId = event.pointerId
+    start = { x: event.clientX, y: event.clientY }
+    didDrag = false
+    isPulling.value = true
+    // Keep receiving move/up events once the pointer leaves the element.
+    ;(event.currentTarget as Element | null)?.setPointerCapture?.(event.pointerId)
+  }
+
+  function track (event: PointerEvent) {
+    delta.value = { x: event.clientX - start.x, y: event.clientY - start.y }
+    if (distance.value > DRAG_SLOP) didDrag = true
+  }
+
+  function onPointerMove (event: PointerEvent) {
+    if (!isPulling.value || event.pointerId !== pointerId) return
+    track(event)
+  }
+
+  function onPointerUp (event: PointerEvent) {
+    if (!isPulling.value || event.pointerId !== pointerId) return
+    // A fast drag can end past the last delivered move: judge the release position.
+    track(event)
+    const reached = stage.value
+    reset()
+    if (reached > 0) options.onRelease?.(reached)
+  }
+
+  function onPointerCancel (event: PointerEvent) {
+    if (event.pointerId !== pointerId) return
+    reset()
+  }
+
+  /**
+   * Whether the press that just ended was a drag. Lets a click handler ignore
+   * the click the browser fires after a drag; the next press starts clean.
+   */
+  function consumeDrag () {
+    const wasDrag = didDrag
+    didDrag = false
+    return wasDrag
+  }
+
+  return {
+    enabled,
+    isPulling,
+    stage,
+    offset,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+    consumeDrag,
+  }
+}

package/src/composables/useThemeAndModes.ts

@@ -1,4 +1,5 @@
 import { useStorage } from '@vueuse/core'
+import { storedThemingApplies } from './storedThemingApplies'
 import { computed, getCurrentInstance, ref, watch } from 'vue'
 import {
   THEME_LIST,
@@ -124,10 +125,35 @@ export default function useThemeAndModes (
     list.value.set(selector, { element, modeOverride })
   }
 
+  /**
+   * Drops an element from the watch list. The registries outlive every
+   * component that registers with them, so an element that unmounts without
+   * this stays referenced — and keeps being written to — for the life of the
+   * page.
+   *
+   * The element is part of the descriptor because a selector is a surface, not
+   * an instance: where two instances of one surface overlap (a route leaving
+   * while its replacement mounts), the leaving one must not drop the entry the
+   * incoming one just registered.
+   * @param listType Which registry the element was added to.
+   * @param descriptor The selector it was registered under, and the element itself.
+   * @returns void
+   */
+  function removeElementToWatch (
+    listType: 'mode' | 'content',
+    { selector, element }: { selector: string, element: HTMLElement }
+  ) {
+    const list = listType === 'mode' ? modeTemplateRefsToWatch : contentTemplateRefsToWatch
+    if (list.value.get(selector)?.element === element) {
+      list.value.delete(selector)
+    }
+  }
+
   return {
     initOnAppMounted,
     registerWatchers,
     addElementToWatch,
+    removeElementToWatch,
     updateContentMode,
 
     updateTheme,
@@ -214,7 +240,8 @@ const DYNAMIC_TOKENS_STORAGE_KEY = 'customThemeTokens'
  */
 function applyStoredDynamicTokens () {
   try {
-    if (localStorage.getItem('ls-internal-theming') !== 'true') return
+    // Seed tokens are picker output — same consumption rule as stored modes.
+    if (!storedThemingApplies()) return
 
     const stored = localStorage.getItem(DYNAMIC_TOKENS_STORAGE_KEY)
     if (!stored) return

package/src/constants/sizes.ts

@@ -1,2 +1,2 @@
-export const SIZES = ['sm', 'md', 'lg'] as const
+export const SIZES = ['xs', 'sm', 'md', 'lg'] as const
 export type Size = typeof SIZES[number]

package/src/css/body.css

@@ -14,6 +14,21 @@
     line-height: 1.5;
     font-weight: 400;
     color: var(--color-grey-700);
+    font-feature-settings: 'cv01', 'cv05', 'cv09', 'cv11', 'ss03';
+    font-optical-sizing: auto;
+    font-kerning: normal;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance;
+  }
+
+  p {
+    text-wrap: pretty;
   }
 }
 
@@ -34,5 +49,5 @@
   https://css-tricks.com/almanac/selectors/f/focus-visible/#aa-how-do-browsers-determine-when-something-is-focus-visible
 */
 *:focus-visible:not(input, .base-input, textarea, .v-popper__popper, .focus-indicator-none, [contenteditable]) {
-  @apply ring-2 ring-inset ring-focus-ring;
+  @apply focus-ring;
 }

package/src/css/fonts.css

@@ -1,10 +1,44 @@
 /*
-  Inter via Google Fonts — kept OUT of the base stylesheet (./style) on
-  purpose: a third-party font request must be the consumer's choice (GDPR,
-  self-hosting). Apps that want the quick path import this file once:
+  Inter Variable, served from the inter-ui package (OFL-1.1) - kept OUT of
+  the base stylesheet (./style) on purpose: loading a font must stay the
+  consumer's choice. Apps that want the quick path import this file once:
 
     import '@livestorm/ui-vue/fonts'
 
-  The monorepo keeps loading it through ui-vue-legacy's style chain.
+  The Latin subsets come last so the browser tries them first; it downloads a
+  full file only for text they do not cover. Their unicode-range is the
+  subset's own character map.
 */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('inter-ui/variable/InterVariable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('inter-ui/variable/InterVariable-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('inter-ui/variable-latin/InterVariable-subset.woff2') format('woff2');
+  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2010-2027, U+202F-2055, U+2057, U+205F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('inter-ui/variable-latin/InterVariable-Italic-subset.woff2') format('woff2');
+  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2010-2027, U+202F-2055, U+2057, U+205F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
+}