@livestorm/ui-vue 2.0.5 → 4.0.0

package/src/components/UiTabs/UiTabs.vue

@@ -1,6 +1,6 @@
 <!-- UiTabs.vue - Tabs Component -->
 <script setup lang="ts">
-import { computed, ref, watch, nextTick, onMounted, onBeforeUnmount, type Slot, type ComponentPublicInstance } from 'vue'
+import { computed, ref, watch, nextTick, onMounted, onBeforeUnmount, type ComponentPublicInstance } from 'vue'
 import { useResizeObserver, useDebounceFn } from '@vueuse/core'
 
 export interface Tab {
@@ -12,6 +12,8 @@ export interface Tab {
   icon?: string
   /** Whether the tab is disabled */
   disabled?: boolean
+  /** Optional data-testid rendered on the tab button */
+  testId?: string
 }
 
 export interface UiTabsProps {
@@ -21,26 +23,27 @@ export interface UiTabsProps {
   modelValue: string
   /** Size of the tabs */
   size?: 'sm' | 'md'
+  /** Horizontal alignment of the tabs inside the component */
+  align?: 'start' | 'center'
 }
 
 const props = withDefaults(defineProps<UiTabsProps>(), {
   size: 'md',
+  align: 'start',
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
 
-const slots = defineSlots<{
-  badge?(): Slot
+defineSlots<{
+  badge?(props: { tab: Tab }): unknown
 }>()
 
-const hasBadgeSlot = computed(() => !!slots.badge)
-
 const sizeClasses = computed(() => {
   return {
     container: 'gap-4',
-    tab: props.size === 'sm' ? 'pb-4' : 'pb-6',
+    tab: props.size === 'sm' ? 'pb-4' : 'pb-5',
     text: props.size === 'sm' ? 'text-action-button-sm' : 'text-action-button-md',
   }
 })
@@ -122,17 +125,12 @@ function handleKeydown (event: KeyboardEvent, currentValue: string) {
 }
 
 function updateIndicatorPosition () {
-  if (!tabsContainer.value) return
-
   const activeButton = tabRefs.value.get(props.modelValue)
   if (!activeButton) return
 
-  const containerRect = tabsContainer.value.getBoundingClientRect()
-  const buttonRect = activeButton.getBoundingClientRect()
-
   indicatorStyle.value = {
-    transform: `translateX(${buttonRect.left - containerRect.left}px)`,
-    width: `${buttonRect.width}px`,
+    transform: `translateX(${activeButton.offsetLeft}px)`,
+    width: `${activeButton.offsetWidth}px`,
   }
 }
 
@@ -150,7 +148,7 @@ onMounted(async () => {
   updateIndicatorPosition()
 })
 
-useResizeObserver(tabsContainer, debouncedUpdatePosition)
+useResizeObserver(() => [tabsContainer.value, ...tabRefs.value.values()], debouncedUpdatePosition)
 
 onBeforeUnmount(() => {
   tabRefs.value.clear()
@@ -158,61 +156,61 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="ui-tabs border-b border-borders-neutral-light relative">
-    <div
-      ref="tabsContainer"
-      role="tablist"
-      class="flex items-center"
-      :class="sizeClasses.container"
-    >
-      <button
-        v-for="tab in tabs"
-        :key="tab.value"
-        :ref="(el) => setTabRef(el, tab.value)"
-        type="button"
-        role="tab"
-        :aria-selected="isActive(tab.value)"
-        :aria-disabled="tab.disabled"
-        :tabindex="isActive(tab.value) ? 0 : -1"
-        class="relative outline-none flex items-center gap-2 cursor-pointer font-semibold transition-colors duration-150"
-        :class="[
-          sizeClasses.tab,
-          sizeClasses.text,
-          {
-            'text-actions-primary-idle': isActive(tab.value),
-            'text-actions-neutral-idle-alpha-strong hover:text-actions-neutral-idle': !isActive(tab.value) && !tab.disabled,
-            'text-actions-neutral-idle-alpha-strong cursor-not-allowed opacity-50': tab.disabled,
-          },
-        ]"
-        :disabled="tab.disabled"
-        @click="selectTab(tab.value)"
-        @keydown="handleKeydown($event, tab.value)"
+  <div class="ui-tabs border-b border-divider">
+    <!-- The 1px bottom overlap lays the indicator over the border -->
+    <div class="relative -mb-px overflow-x-auto [scrollbar-width:none]">
+      <div
+        ref="tabsContainer"
+        role="tablist"
+        class="flex items-center"
+        :class="[sizeClasses.container, { 'justify-center-safe': align === 'center' }]"
       >
-        <span
-          v-if="tab.icon"
-          :class="tab.icon"
-          class="w-4 h-4"
-        />
-        <span>{{ tab.label }}</span>
-        <div
-          v-if="hasBadgeSlot"
-          class="w-4 h-4"
+        <button
+          v-for="tab in tabs"
+          :key="tab.value"
+          :ref="(el) => setTabRef(el, tab.value)"
+          type="button"
+          role="tab"
+          :aria-selected="isActive(tab.value)"
+          :aria-disabled="tab.disabled"
+          :data-testid="tab.testId"
+          :tabindex="isActive(tab.value) ? 0 : -1"
+          class="relative outline-none flex shrink-0 items-center gap-2 whitespace-nowrap cursor-pointer font-semibold transition-colors duration-150"
+          :class="[
+            sizeClasses.tab,
+            sizeClasses.text,
+            {
+              'text-actions-primary-idle': isActive(tab.value),
+              'text-actions-neutral-idle-alpha-strong hover:text-actions-neutral-idle': !isActive(tab.value) && !tab.disabled,
+              'text-actions-neutral-idle-alpha-strong cursor-not-allowed opacity-50': tab.disabled,
+            },
+          ]"
+          :disabled="tab.disabled"
+          @click="selectTab(tab.value)"
+          @keydown="handleKeydown($event, tab.value)"
         >
+          <span
+            v-if="tab.icon"
+            :class="tab.icon"
+            class="size-5"
+          />
+          <span>{{ tab.label }}</span>
           <slot
             name="badge"
             :tab="tab"
           />
-        </div>
-      </button>
+        </button>
+      </div>
+
+      <!-- Sliding indicator -->
+      <div
+        data-testid="ui-tabs-indicator"
+        class="absolute bottom-0 left-0 h-0.5 bg-actions-primary-idle transition-[transform,width] duration-[250ms] ease-out will-change-[transform,width]"
+        :style="{
+          transform: indicatorStyle.transform,
+          width: indicatorStyle.width,
+        }"
+      />
     </div>
-
-    <!-- Sliding indicator -->
-    <div
-      class="absolute -bottom-px left-0 h-0.5 bg-actions-primary-idle transition-[transform,width] duration-[250ms] ease-out will-change-[transform,width]"
-      :style="{
-        transform: indicatorStyle.transform,
-        width: indicatorStyle.width,
-      }"
-    />
   </div>
 </template>

package/src/components/UiTag/UiTag.types.ts

@@ -0,0 +1,28 @@
+export type UiTagSize = 'xxs' | 'xs' | 'sm' | 'md'
+
+export type UiTagColor = 'primary' | 'neutral' | 'danger' | 'warning' | 'success' | 'neutral-invert'
+
+export type UiTagVariant = 'light' | 'strong'
+
+export interface UiTagProps {
+  /**
+   * Size of the tag
+   */
+  size?: UiTagSize
+  /**
+   * Color variant of the tag
+   */
+  color?: UiTagColor
+  /**
+   * Variant of the tag
+   */
+  variant?: UiTagVariant
+  /**
+   * Label text for the tag
+   */
+  label?: string
+  /**
+   * Whether to show hover effects
+   */
+  withHoverEffect?: boolean
+}

package/src/components/UiTag/UiTag.vue

@@ -16,7 +16,10 @@
     </span>
 
     <!-- Label content -->
-    <span class="ui-tag-label">
+    <span
+      v-if="$slots.default || label"
+      class="ui-tag-label"
+    >
       <slot>{{ label }}</slot>
     </span>
   </span>
@@ -25,30 +28,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-interface Props {
-  /**
-   * Size of the tag
-   */
-  size?: 'xxs' | 'xs' | 'sm' | 'md'
-  /**
-   * Color variant of the tag
-   */
-  color?: 'primary' | 'neutral' | 'danger' | 'warning' | 'success' | 'neutral-invert'
-  /**
-   * Variant of the tag
-   */
-  variant?: 'light' | 'strong'
-  /**
-   * Label text for the tag
-   */
-  label?: string
-  /**
-   * Whether to show hover effects
-   */
-  withHoverEffect?: boolean
-}
+import type { UiTagProps } from './UiTag.types'
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<UiTagProps>(), {
   size: 'md',
   color: 'neutral',
   variant: 'light',
@@ -61,7 +43,7 @@ const tagClasses = computed(() => {
     'ui-tag',
     'inline-flex',
     'items-center',
-    'rounded-3xl',
+    'rounded-full',
     'transition-colors',
     'duration-150',
     'ease-in-out',
@@ -71,36 +53,36 @@ const tagClasses = computed(() => {
   // Size classes
   const sizeClasses = {
     xxs: ['px-1.5', 'gap-1', 'text-content-badges-bold-md', 'h-4'],
-    xs: ['px-1.5', 'py-1', 'gap-1', 'text-content-badges-bold-md', 'h-6'],
-    sm: ['px-2', 'py-1', 'gap-1', 'text-content-text-md-bold', 'h-8'],
-    md: ['px-3', 'py-1', 'gap-2', 'text-content-text-md-bold', 'h-10'],
+    xs: ['px-2', 'py-1', 'gap-1', 'text-content-badges-bold-md', 'h-6'],
+    sm: ['px-3', 'py-1', 'gap-1', 'text-content-text-md-bold', 'h-8'],
+    md: ['px-4', 'py-1', 'gap-2', 'text-content-text-md-bold', 'h-10'],
   }
 
   // Color and variant classes
   const colorVariantClasses = {
     primary: {
-      light: ['bg-actions-primary-active-overlay', 'text-actions-primary-idle'],
-      strong: ['bg-actions-primary-idle-alpha-strong', 'text-actions-neutral-invert-idle'],
+      light: ['bg-actions-primary-active-overlay', 'text-text-primary-title'],
+      strong: ['bg-actions-primary-idle-alpha-strong', 'text-text-neutral-invert-base'],
     },
     neutral: {
-      light: ['bg-actions-neutral-active-overlay', 'text-actions-neutral-idle'],
-      strong: ['bg-actions-neutral-idle-alpha-strong', 'text-actions-neutral-invert-idle'],
+      light: ['bg-actions-neutral-active-overlay', 'text-text-neutral-base'],
+      strong: ['bg-actions-neutral-idle-alpha-strong', 'text-text-neutral-invert-base'],
     },
     danger: {
-      light: ['bg-actions-danger-active-overlay', 'text-actions-danger-idle'],
-      strong: ['bg-actions-danger-idle-alpha-strong', 'text-actions-neutral-invert-idle'],
+      light: ['bg-actions-danger-active-overlay', 'text-text-danger-base'],
+      strong: ['bg-actions-danger-idle-alpha-strong', 'text-text-neutral-invert-base'],
     },
     warning: {
-      light: ['bg-actions-warning-active-overlay', 'text-actions-warning-idle'],
-      strong: ['bg-actions-warning-idle-alpha-strong', 'text-actions-neutral-invert-idle'],
+      light: ['bg-actions-warning-active-overlay', 'text-text-warning-base'],
+      strong: ['bg-actions-warning-idle-alpha-strong', 'text-text-neutral-invert-base'],
     },
     success: {
-      light: ['bg-actions-success-active-overlay', 'text-actions-success-idle'],
-      strong: ['bg-actions-success-idle-alpha-strong', 'text-actions-neutral-invert-idle'],
+      light: ['bg-actions-success-active-overlay', 'text-text-success-base'],
+      strong: ['bg-actions-success-idle-alpha-strong', 'text-text-neutral-invert-base'],
     },
     'neutral-invert': {
-      light: ['bg-actions-neutral-invert-active-overlay', 'text-actions-neutral-invert-idle'],
-      strong: ['bg-actions-neutral-invert-idle-alpha-strong', 'text-actions-neutral-idle'],
+      light: ['bg-actions-neutral-invert-active-overlay', 'text-text-neutral-invert-base'],
+      strong: ['bg-actions-neutral-invert-idle-alpha-strong', 'text-text-neutral-base'],
     },
   }
 
@@ -129,7 +111,7 @@ const iconClasses = computed(() => {
 
 /* Focus ring */
 .ui-tag:focus-visible {
-  @apply ring-2 ring-inset ring-focus-ring;
+  @apply focus-ring;
 }
 
 /* Hover states - only apply when withHoverEffect is true */
@@ -182,6 +164,6 @@ const iconClasses = computed(() => {
 }
 
 .ui-tag-label {
-  @apply flex-1;
+  @apply flex-1 truncate;
 }
 </style>

package/src/components/UiTag/index.ts

@@ -0,0 +1,2 @@
+export { default } from './UiTag.vue'
+export type { UiTagColor, UiTagProps, UiTagSize, UiTagVariant } from './UiTag.types'

package/src/components/UiTextField/UiTextField.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, useSlots } from 'vue'
 import UiFieldWrapper from '../UiFieldWrapper/UiFieldWrapper.vue'
+import { useIconSize } from '../../composables/useIconSize'
+import { useControlShape } from '../../composables/useControlShape'
+import { useFieldFocusEvents } from '../../composables/useFieldFocusEvents'
 import type { TextFieldSize } from './types'
 
 interface UiTextFieldProps {
@@ -8,6 +11,10 @@ interface UiTextFieldProps {
   modelValue?: string
   placeholder?: string
   disabled?: boolean
+  /**
+   * The value can be selected and copied but not edited
+   */
+  readonly?: boolean
   loading?: boolean
   error?: boolean
   label?: string
@@ -27,6 +34,7 @@ interface UiTextFieldProps {
 const props = withDefaults(defineProps<UiTextFieldProps>(), {
   size: 'md',
   disabled: false,
+  readonly: false,
   loading: false,
   error: false,
   required: false,
@@ -48,20 +56,17 @@ const emit = defineEmits<{
 
 const slots = useSlots()
 const textFieldRef = ref<HTMLInputElement | null>(null)
-const isFocused = ref(false)
+const { isFocused, handleFocus, handleBlur, handleKeydown, handleKeyup } = useFieldFocusEvents(emit)
+
+const iconSizeClass = useIconSize(() => props.size)
+const shape = useControlShape('field', () => props.size)
 
 const hasLeftIcon = computed(() => !!slots.icon)
 const hasRightAction = computed(() => !!slots['right-action'])
-const showClearButton = computed(() => props.clearable && !!props.modelValue && !props.disabled && !props.loading)
+const showClearButton = computed(() => props.clearable && !!props.modelValue && !props.disabled && !props.readonly && !props.loading)
 
 const textFieldClasses = computed(() => {
-  const classes = ['ui-text-field-field']
-
-  // Size classes
-  if (props.size === 'sm') classes.push('h-8 text-content-text-md-regular')
-  if (props.size === 'md') classes.push('h-10 text-content-text-md-regular')
-  if (props.size === 'lg') classes.push('h-12 text-content-text-md-regular')
-  if (props.size === 'xl') classes.push('h-16 text-content-text-md-regular')
+  const classes = ['ui-text-field-field', shape.value.radius, shape.value.height, 'text-content-text-md-regular']
 
   // State classes
   if (props.error) {
@@ -87,24 +92,6 @@ function handleClear () {
   textFieldRef.value?.focus()
 }
 
-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: () => textFieldRef.value?.focus(),
   blur: () => textFieldRef.value?.blur(),
@@ -147,11 +134,7 @@ defineExpose({
         <div
           v-if="hasLeftIcon"
           class="ui-text-field-icon text-text-neutral-base"
-          :class="{
-            'size-3': size === 'sm',
-            'size-4': size === 'md' || size === 'lg',
-            'size-5': size === 'xl',
-          }"
+          :class="iconSizeClass"
         >
           <slot name="icon" />
         </div>
@@ -165,11 +148,12 @@ defineExpose({
           :value="modelValue"
           :placeholder="placeholder"
           :disabled="disabled || loading"
+          :readonly="readonly"
           :autocomplete="autocomplete"
           :aria-label="ariaLabel"
           :aria-invalid="error || undefined"
           :aria-describedby="ariaDescribedby || ((helperMessage || errorMessage) ? `${fieldId}-message` : undefined)"
-          class="ui-text-field-element text-text-neutral-base placeholder:text-text-neutral-tertiary"
+          class="ui-text-field-element text-text-neutral-base placeholder:text-control-placeholder"
           @input="handleInput"
           @focus="handleFocus"
           @blur="handleBlur"
@@ -195,14 +179,10 @@ defineExpose({
             v-else-if="showClearButton"
             type="button"
             class="ui-text-field-clear text-text-neutral-base hover:text-text-neutral-secondary"
-            :class="{
-              'size-3': size === 'sm',
-              'size-4': size === 'md' || size === 'lg',
-              'size-5': size === 'xl',
-            }"
+            :class="iconSizeClass"
             @click="handleClear"
           >
-            <div class="i-ls-x size-full" />
+            <div class="i-ph-x size-full" />
           </button>
         </div>
 
@@ -222,12 +202,12 @@ defineExpose({
 @reference '@livestorm/ui-tokens/output/supernova/index.css';
 
 .ui-text-field-field {
-  @apply relative flex items-center gap-1.5 w-full rounded-lg border transition-all;
+  @apply relative flex items-center gap-1.5 w-full border transition-all;
   @apply pl-3 pr-0;
 }
 
 .ui-text-field-field--default {
-  @apply bg-actions-neutral-idle-alpha-light border-borders-neutral-strong;
+  @apply bg-control-field-bg border-control-field-border;
 
   &:not(.ui-text-field-field--disabled) {
     &:hover .ui-text-field-overlay {
@@ -235,7 +215,7 @@ defineExpose({
     }
 
     &.ui-text-field-field--focused {
-      @apply border-actions-primary-idle-alpha-strong ring-1 ring-inset ring-focus-ring;
+      @apply bg-control-field-bg-focus focus-ring;
 
       .ui-text-field-overlay {
         background: transparent;
@@ -245,7 +225,7 @@ defineExpose({
 }
 
 .ui-text-field-field--error {
-  @apply bg-actions-danger-idle-alpha-light border-borders-danger-strong;
+  @apply bg-actions-danger-idle-alpha-light border-control-error-border;
 
   &:not(.ui-text-field-field--disabled) {
     &:hover .ui-text-field-overlay {
@@ -253,7 +233,7 @@ defineExpose({
     }
 
     &.ui-text-field-field--focused {
-      @apply border-borders-danger-strong ring-1 ring-inset ring-borders-danger-strong;
+      @apply focus-ring;
 
       .ui-text-field-overlay {
         background: transparent;
@@ -267,7 +247,7 @@ defineExpose({
 }
 
 .ui-text-field-overlay {
-  @apply absolute inset-0 rounded-lg pointer-events-none transition-colors;
+  @apply absolute -inset-px rounded-[inherit] pointer-events-none transition-colors;
   z-index: 1;
 }
 
@@ -341,7 +321,7 @@ defineExpose({
 }
 
 .ui-text-field-actions {
-  @apply flex items-center justify-center px-3 h-full rounded-lg;
+  @apply flex items-center justify-center px-3 h-full rounded-[inherit];
   position: relative;
   z-index: 2;
 }
@@ -364,7 +344,7 @@ defineExpose({
   padding: 0;
 
   &:focus-visible {
-    @apply ring-2 ring-borders-neutral-strong rounded;
+    @apply focus-ring rounded-row;
   }
 }
 </style>

package/src/components/UiTimeline/README.md

@@ -45,7 +45,7 @@ A flexible timeline component for displaying chronological events with various v
 | `variant` | `'default' \| 'primary' \| 'success' \| 'warning' \| 'danger'` | `'default'` | Visual variant of the timeline item |
 | `showConnector` | `boolean` | `true` | Whether to show the connecting line |
 | `indicatorSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of the indicator dot |
-| `indicatorIcon` | `string` | `undefined` | Custom icon class for the indicator (e.g., `'i-ls-check-circle'`) |
+| `indicatorIcon` | `string` | `undefined` | Custom icon class for the indicator (e.g., `'i-ph-check-circle'`) |
 
 ## Examples
 
@@ -72,13 +72,13 @@ A flexible timeline component for displaying chronological events with various v
 
 ```vue
 <UiTimeline>
-  <UiTimelineItem variant="primary" indicator-icon="i-ls-user" indicator-size="md">
+  <UiTimelineItem variant="primary" indicator-icon="i-ph-user" indicator-size="md">
     <div>User registered</div>
   </UiTimelineItem>
-  <UiTimelineItem variant="success" indicator-icon="i-ls-check-circle" indicator-size="md">
+  <UiTimelineItem variant="success" indicator-icon="i-ph-check-circle" indicator-size="md">
     <div>Email verified</div>
   </UiTimelineItem>
-  <UiTimelineItem variant="success" indicator-icon="i-ls-play-fill" indicator-size="md">
+  <UiTimelineItem variant="success" indicator-icon="i-ph-play-fill" indicator-size="md">
     <div>Setup complete</div>
   </UiTimelineItem>
 </UiTimeline>
@@ -88,7 +88,7 @@ A flexible timeline component for displaying chronological events with various v
 
 ```vue
 <UiTimeline>
-  <UiTimelineItem variant="primary" indicator-icon="i-ls-user" indicator-size="md">
+  <UiTimelineItem variant="primary" indicator-icon="i-ph-user" indicator-size="md">
     <div>
       <div class="flex items-center gap-2 mb-2">
         <h4 class="text-content-text-md-bold font-semibold">John Doe joined</h4>
@@ -134,7 +134,7 @@ A flexible timeline component for displaying chronological events with various v
 
 ```vue
 <UiTimeline>
-  <UiTimelineItem variant="success" indicator-icon="i-ls-check-circle" indicator-size="md">
+  <UiTimelineItem variant="success" indicator-icon="i-ph-check-circle" indicator-size="md">
     <div>
       <div class="flex items-center justify-between mb-2">
         <h4 class="font-semibold">Payment Successful</h4>

package/src/components/UiTimeline/UiTimelineItem.vue

@@ -76,9 +76,9 @@ const connectorClasses = computed(() => {
 
 const iconSize = computed(() => {
   const sizes = {
-    sm: 'w-1 h-1',
-    md: 'w-2 h-2',
-    lg: 'w-3 h-3',
+    sm: 'size-2',
+    md: 'size-3',
+    lg: 'size-4',
   }
   return sizes[props.indicatorSize]
 })

package/src/components/UiTooltip/UiTooltipContent.vue

@@ -63,7 +63,7 @@ const maxWidthClass = computed(() => {
       v-bind="{ ...forwarded, ...$attrs }"
       :data-colors-semantic="props.colorsSemantic"
       :class="[
-        'ui-tooltip-content py-1.5 px-3 bg-surface-neutral-invert-bg-alpha text-text-neutral-invert-base text-content-text-md-regular rounded-md text-center z-50 shadow-shadows-drop-shadow-lg',
+        'ui-tooltip-content py-1.5 px-3 bg-surface-neutral-invert-bg-alpha text-text-neutral-invert-base text-content-text-md-regular rounded-row text-center z-overlay shadow-shadows-drop-shadow-lg',
         'data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95',
         maxWidthClass
       ]"

package/src/components/UiTooltip/UiTooltipProvider.vue

@@ -5,6 +5,9 @@ import { TooltipProvider } from 'reka-ui'
 withDefaults(defineProps<TooltipProviderProps>(), {
   delayDuration: 700,
   skipDelayDuration: 300,
+  // A tap is how touch opens a tooltip, and the click that follows it would
+  // close it again straight away unless the trigger stops closing on click.
+  disableClosingTrigger: true,
 })
 </script>
 

package/src/components/UiTooltip/UiTooltipTrigger.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TooltipTriggerProps } from 'reka-ui'
-import { TooltipTrigger, useForwardProps } from 'reka-ui'
+import { TooltipTrigger, injectTooltipRootContext, useForwardProps } from 'reka-ui'
 
 const props = defineProps<TooltipTriggerProps>()
 
@@ -8,11 +8,26 @@ const props = defineProps<TooltipTriggerProps>()
 // consumed here and never reach TooltipTrigger, so `as-child` would be ignored
 // and reka would wrap the slot in its own <button>.
 const forwarded = useForwardProps(props)
+
+const rootContext = injectTooltipRootContext()
+
+// this is to open the tooltip on touch devices, which can't hover
+// Bound to `pointerup` so a scroll that starts on the trigger does not open it.
+function toggleOnTouch(event: PointerEvent) {
+  if (event.pointerType !== 'touch' || rootContext.disabled.value) return
+
+  if (rootContext.open.value) {
+    rootContext.onClose()
+  } else {
+    rootContext.onOpen()
+  }
+}
 </script>
 
 <template>
   <TooltipTrigger
     v-bind="{ ...forwarded, ...$attrs }"
+    @pointerup="toggleOnTouch"
   >
     <slot />
   </TooltipTrigger>

package/src/composables/storedThemingApplies.ts

@@ -0,0 +1,19 @@
+/**
+ * Does stored theming output apply?
+ *
+ * The theme picker (and its playground) is the only writer of deliberate
+ * theming choices: the stored modes in `themeAndMode` and the seed token map
+ * in `customThemeTokens`. A stored value alone is not a choice signal —
+ * `useStorage` persists the light/light defaults for every visitor — so
+ * stored theming is consumed only where the picker exists, and every surface
+ * ships its own defaults otherwise (the dashboard light/light, the room
+ * dark shell over light content).
+ *
+ * This is the single place that rule lives. `ls-internal-theming` itself
+ * gates the picker's visibility; it does not gate any rendering path.
+ * When a real user-facing theming choice ships (workspace setting, OS
+ * follow), its mechanism replaces this predicate.
+ */
+export function storedThemingApplies (): boolean {
+  return typeof localStorage !== 'undefined' && localStorage.getItem('ls-internal-theming') === 'true'
+}