@leavepulse/ui 0.70.1 → 0.71.0

package/src/components/LpDisclosure.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteAction, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Collapsible "show more" section built on reka Collapsible. The trigger is a
  * full-width row with a chevron that rotates open; the body folds open and shut
@@ -31,6 +32,7 @@ import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
+    palette?: PaletteControlOptions
     /** Controlled open state. Omit to let the component own it (with `defaultOpen`). */
     open?: boolean
     defaultOpen?: boolean
@@ -45,7 +47,7 @@ const props = withDefaults(
      */
     scrollIntoView?: boolean
   }>(),
-  { defaultOpen: false, scrollIntoView: false },
+  { palette: undefined, defaultOpen: false, scrollIntoView: false },
 )
 
 const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
@@ -113,6 +115,8 @@ function onToggle(value: boolean) {
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "shrink-0 overflow-hidden rounded-control border border-line bg-surface-soft",
 )
+
+usePaletteAction({ label: () => props.label, element: () => (root.value?.$el as HTMLElement | undefined)?.querySelector<HTMLElement>("button"), disabled: () => false })
 </script>
 
 <template>

package/src/components/LpDropdownMenu.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { useId } from "vue"
+import { menuPaletteCommands } from "./commandPalette"
+import { usePaletteCommands, usePaletteScope, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * A menu opened from a button (usually a row's "…"). Its items are the same
  * shape as LpContextMenu's and are drawn by the same renderer, so one array
@@ -17,7 +20,8 @@ import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 /** A dropdown item: the context-menu item shape, kept under its old name. */
 export type MenuItem = ContextMenuItemDef
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+  palette?: PaletteControlOptions
   items: MenuItem[]
   /** A heading naming what the menu acts on; see LpContextMenu's `title`. */
   title?: string
@@ -29,7 +33,7 @@ const props = defineProps<{
    * menu). Opening it then counts toward the hint system's right-click tip.
    */
   rightClickToo?: boolean
-}>()
+}>(), { palette: undefined })
 
 const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-44 p-1 outline-none`
 
@@ -42,6 +46,13 @@ const portalTo = usePortalTarget()
 // What happens in another document (the page around a frame, or a frame in
 // the page) is not "outside" for this layer.
 const guardOutside = useOutsideGuard()
+
+const paletteScope = usePaletteScope()
+const paletteId = useId()
+usePaletteCommands(() => props.palette === false || !props.title || !props.items.length ? [] : [{
+  id: `${paletteScope?.id}/${props.palette?.id ?? paletteId}`, label: props.palette?.label ?? props.title,
+  children: menuPaletteCommands(props.items, `${paletteScope?.id}/${props.palette?.id ?? paletteId}`),
+}], { automatic: true })
 </script>
 
 <template>

package/src/components/LpFormField.vue

@@ -49,6 +49,9 @@ const noticeId = computed(() => `${id.value}-notice`)
 provideField(
   computed(() => ({
     id: id.value,
+    label: props.label,
+    hint: props.hint,
+    error: props.error,
     labelId: props.label ? `${id.value}-label` : undefined,
     describedBy:
       [hasMessage.value ? messageId.value : "", notice.message.value ? noticeId.value : ""]

package/src/components/LpInput.vue

@@ -3,6 +3,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { tv, type VariantProps } from "tailwind-variants"
 import { computed, ref, useAttrs, useSlots } from "vue"
 import { useFieldControl } from "../composables/useField"
@@ -46,6 +47,8 @@ type InputVariants = VariantProps<typeof shell>
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     modelValue?: string
     size?: InputVariants["size"]
     invalid?: boolean
@@ -87,7 +90,7 @@ const props = withDefaults(
     /** Extra or replacement mask tokens, one-character RegExps by key. */
     maskTokens?: MaskTokens
   }>(),
-  { type: "text", size: "md" },
+  { palette: undefined, type: "text", size: "md" },
 )
 
 const emit = defineEmits<{
@@ -174,6 +177,8 @@ defineExpose({
   select: () => inputEl.value?.select(),
   input: inputEl,
 })
+
+usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled, invalid: () => field.value.invalid, available: () => !['password', 'hidden'].includes(props.type), editorProps: () => ({ label: undefined, hint: undefined, error: undefined }) })
 </script>
 
 <template>

package/src/components/LpNumberField.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 // Numeric input with stepper buttons (reka NumberField). Themed via tokens.
 import {
   NumberFieldDecrement,
@@ -25,6 +26,8 @@ export interface NumberFieldLabels extends Record<string, string> {
 }
 
 const props = withDefaults(defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
   // null = empty field (reka's native state); consumers that need a number
   // should default it themselves, the field doesn't invent a value.
   modelValue?: number | null
@@ -67,7 +70,7 @@ const props = withDefaults(defineProps<{
   /** Control height, matching LpInput. */
   size?: "sm" | "md" | "lg"
   labels?: Partial<NumberFieldLabels>
-}>(), { size: "md", stepSnapping: true, steppers: true, focusOnChange: true })
+}>(), { palette: undefined, size: "md", stepSnapping: true, steppers: true, focusOnChange: true })
 
 // The value is committed when the field loses focus or Enter is pressed, and on
 // every step, not on each keystroke: "1." or "-" is not a number yet, and a
@@ -131,6 +134,8 @@ const rootClass = useMergedClass(() =>
       : "border-line focus-within:border-brand focus-within:ring-ring",
   ].join(" "),
 )
+
+usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid })
 </script>
 
 <template>

package/src/components/LpNumberFlow.vue

@@ -28,6 +28,8 @@
  */
 import { computed, onBeforeUnmount, ref, watch } from "vue"
 import { easeOut, prefersReducedMotion } from "../composables/easing"
+import { useLocale } from "../composables/useLocale"
+import { decimalMark } from "./format"
 import { useRevealedValue } from "../composables/useRevealedValue"
 import { compactNumber } from "./format"
 
@@ -222,6 +224,14 @@ const { el: revealAnchor, target } = useRevealedValue(() => props.value, {
 watch(target, travel)
 onBeforeUnmount(stop)
 
+/*
+ * The app's locale (reka's ConfigProvider) when the counter has none of its
+ * own, the same rule the dates follow: a Russian app read "4,594" otherwise.
+ */
+const locale = useLocale(() => props.locale)
+// Only the grouped form is written in the locale; the others always use ".".
+const fractionMark = computed(() => (props.grouped && !props.format && !props.compact ? decimalMark(locale.value) : "."))
+
 const formatted = computed(() => formatAt(round(displayed.value), !settled.value))
 
 // Rounded first by the caller: every branch should render the shape the
@@ -246,7 +256,7 @@ function formatAt(v: number, padded: boolean): string {
   }
   const pad = padded ? Math.max(1, padTo.value) : 1
   if (props.grouped)
-    return v.toLocaleString(props.locale, {
+    return v.toLocaleString(locale.value, {
       minimumFractionDigits: props.decimals,
       maximumFractionDigits: props.decimals,
       minimumIntegerDigits: pad,
@@ -294,7 +304,7 @@ interface Cell {
  */
 const cells = computed<Cell[]>(() => {
   const chars = [...formatted.value]
-  const dot = chars.indexOf(".")
+  const dot = chars.indexOf(fractionMark.value)
   const intEnd = dot === -1 ? chars.length : dot
 
   const isDigit = (c: string) => {

package/src/components/LpPaletteFacts.vue

@@ -20,11 +20,14 @@
 import HighlightText from "./HighlightText.vue"
 import LpIcon from "./LpIcon.vue"
 import LpRollingText from "./LpRollingText.vue"
+import LpSkeleton from "./LpSkeleton.vue"
 import type { PaletteFact } from "./commandPalette"
+import { computed } from "vue"
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     items: PaletteFact[]
+    loading?: boolean
     /** Small heading over the list. */
     title?: string
     /** Plain rows instead of soft tiles, for a list read as text. */
@@ -32,6 +35,7 @@ withDefaults(
   }>(),
   { plain: false },
 )
+const shown = computed(() => props.loading && !props.items.length ? Array.from({ length: 3 }, () => ({ label: "", value: "—" } as PaletteFact)) : props.items)
 
 defineSlots<{
   value?: (props: { item: PaletteFact; index: number }) => unknown
@@ -39,11 +43,11 @@ defineSlots<{
 </script>
 
 <template>
-  <section class="lp-palette-facts" :class="{ 'lp-palette-facts--plain': plain }">
+  <section class="lp-palette-facts" :aria-busy="loading || undefined" :class="{ 'lp-palette-facts--plain': plain }">
     <p v-if="title" class="lp-palette-facts__title">{{ title }}</p>
     <ul class="lp-palette-facts__list">
       <li
-        v-for="(item, index) in items"
+        v-for="(item, index) in shown"
         :key="index"
         class="lp-palette-facts__row"
         :class="{ 'is-current': item.current }"
@@ -52,15 +56,16 @@ defineSlots<{
         <span v-if="item.color" class="lp-palette-facts__dot" :style="{ background: item.color }" />
         <LpIcon v-else-if="item.icon" :name="item.icon" :size="15" class="lp-palette-facts__icon" />
         <span class="lp-palette-facts__label">
-          <span class="lp-palette-facts__name"><HighlightText :text="item.label" /></span>
+          <span class="lp-palette-facts__name"><LpSkeleton v-if="loading && !item.label" class="h-3 w-24" /><HighlightText v-else :text="item.label" /></span>
           <span v-if="item.hint?.length" class="lp-palette-facts__hint"><HighlightText :text="item.hint" /></span>
         </span>
         <span
-          v-if="item.value !== undefined && item.value !== '' || $slots.value"
+          v-if="loading || item.value !== undefined && item.value !== '' || $slots.value"
           class="lp-palette-facts__value"
           :class="{ 'lp-palette-facts__value--mono': item.mono }"
         >
-          <slot name="value" :item="item" :index="index">
+          <LpSkeleton v-if="loading" class="h-3 w-16 max-w-full" />
+          <slot v-else name="value" :item="item" :index="index">
             <LpRollingText v-if="item.value !== undefined" :value="item.value" align="end" />
           </slot>
         </span>

package/src/components/LpPaletteStats.vue

@@ -13,23 +13,29 @@
  */
 import LpNumberFlow from "./LpNumberFlow.vue"
 import LpRollingText from "./LpRollingText.vue"
+import LpSkeleton from "./LpSkeleton.vue"
 import type { PaletteStat } from "./commandPalette"
+import { computed } from "vue"
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     items: PaletteStat[]
+    loading?: boolean
     /** Tiles per row. */
     columns?: 2 | 3 | 4
   }>(),
   { columns: 2 },
 )
+const shown = computed(() => props.loading && !props.items.length ? Array.from({ length: props.columns }, () => ({ label: "", value: "—" } as PaletteStat)) : props.items)
 </script>
 
 <template>
-  <dl class="lp-palette-stats" :style="{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }">
-    <div v-for="(item, index) in items" :key="`${item.label}-${index}`" class="lp-palette-stats__tile">
-      <dt>{{ item.label }}</dt>
-      <dd>
+  <dl class="lp-palette-stats" :aria-busy="loading || undefined" :style="{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }">
+    <div v-for="(item, index) in shown" :key="`${item.label}-${index}`" class="lp-palette-stats__tile">
+      <dt><LpSkeleton v-if="loading && !item.label" class="my-1 h-2 w-20" /><template v-else>{{ item.label }}</template></dt>
+      <dd class="relative">
+        <LpSkeleton v-if="loading" class="absolute top-1/2 h-[1em] w-16 max-w-full -translate-y-1/2" />
+        <span :class="loading && 'invisible'" :aria-hidden="loading || undefined">
         <LpNumberFlow
           v-if="typeof item.value === 'number'"
           :value="item.value"
@@ -40,6 +46,7 @@ withDefaults(
           grouped
         />
         <LpRollingText v-else :value="item.value" align="start" />
+        </span>
       </dd>
     </div>
   </dl>

package/src/components/LpPaletteTheme.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import type { StudioState, PreviewableThemeStudio } from "../theme/studio"
+import { useLabels } from "../composables/useLpConfig"
+import { suppressPaletteDiscovery } from "../composables/usePaletteCommands"
+import LpThemeStudio from "./LpThemeStudio.vue"
+import LpThemeProvider from "./LpThemeProvider.vue"
+import LpButton from "./LpButton.vue"
+import LpInput from "./LpInput.vue"
+
+const props = defineProps<{ studio: PreviewableThemeStudio }>()
+suppressPaletteDiscovery()
+const text = useLabels("paletteTheme", { title: "Theme", apply: "Apply theme", revert: "Revert draft", sample: "Preview", action: "Continue", placeholder: "A field in this theme" })
+const snapshot = ref({ ...props.studio.state.value })
+const state = ref<StudioState>({ ...snapshot.value })
+const preview = computed(() => props.studio.preview(state.value))
+const changed = computed(() => JSON.stringify(state.value) !== JSON.stringify(snapshot.value))
+const draft: PreviewableThemeStudio = {
+  state, themes: props.studio.themes, system: props.studio.system,
+  theme: computed(() => preview.value.theme), exported: computed(() => preview.value.exported), changed,
+  brand: computed({ get: () => preview.value.theme.colors.brand, set: brand => { state.value = { ...state.value, brand } } }),
+  pickTheme: theme => { state.value = { ...state.value, theme } },
+  tune: patch => { state.value = { ...state.value, ...patch } },
+  reset: () => { state.value = { ...snapshot.value } },
+  preview: props.studio.preview,
+}
+function apply() {
+  const { theme, ...tuning } = state.value
+  props.studio.pickTheme(theme)
+  props.studio.tune(tuning)
+  snapshot.value = { ...state.value }
+}
+</script>
+
+<template>
+  <div class="flex min-w-0 flex-col gap-4">
+    <div class="sticky top-0 z-10 flex gap-2 border-b border-line bg-surface-overlay pb-3">
+      <LpButton :disabled="!changed" @click="apply">{{ text.apply }}</LpButton>
+      <LpButton variant="ghost" :disabled="!changed" @click="draft.reset()">{{ text.revert }}</LpButton>
+    </div>
+    <LpThemeProvider :theme="preview.theme" class="flex flex-col gap-3 rounded-card border border-line p-4">
+      <span class="text-sm font-semibold">{{ text.sample }}</span>
+      <LpInput :placeholder="text.placeholder" readonly :tabindex="-1" />
+      <LpButton :tabindex="-1">{{ text.action }}</LpButton>
+    </LpThemeProvider>
+    <LpThemeStudio :studio="draft" :labels="{ reset: text.revert }" />
+  </div>
+</template>

package/src/components/LpPasswordInput.vue

@@ -8,6 +8,7 @@ export interface PasswordInputLabels extends Record<string, string> {
 </script>
 
 <script setup lang="ts">
+import { suppressPaletteDiscovery } from "../composables/usePaletteCommands"
 // Password field = LpInput + a show/hide toggle in its trailing slot.
 // No duplicated field styling — the shell lives in LpInput.
 // LpSecretField's input form is this same field: it drives `visible` (to hide
@@ -51,6 +52,8 @@ defineExpose({
   blur: () => inner.value?.blur(),
   select: () => inner.value?.select(),
 })
+
+suppressPaletteDiscovery()
 </script>
 
 <template>

package/src/components/LpRadioGroup.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui"
 import { useId } from "vue"
 import { useFieldControl } from "../composables/useField"
@@ -21,7 +22,7 @@ export interface RadioOption extends LpOptionBase<string> {
 // a disabled option stays visible but cannot be picked. For anything richer
 // (badges, custom layout) pass <LpRadio> children in the default slot instead —
 // they share the same RadioGroupRoot, so selection still flows through v-model.
-const props = defineProps<{ modelValue?: string; options?: RadioOption[]; disabled?: boolean }>()
+const props = withDefaults(defineProps<{ palette?: PaletteControlOptions; modelValue?: string; options?: RadioOption[]; disabled?: boolean }>(), { palette: undefined })
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
 const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
@@ -31,6 +32,8 @@ const uid = useId()
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "flex flex-col gap-2",
 )
+
+usePaletteControl({ disabled: () => field.value.disabled })
 </script>
 
 <template>

package/src/components/LpRangeSlider.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Two thumbs on one track: a range rather than a value. A price "from – to",
  * a stretch of a clip to loop, a span of years. The model is `[low, high]`;
@@ -20,6 +21,8 @@ import { SLIDER_GLIDE, useSliderDrag } from "./slider"
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     modelValue?: [number, number]
     min?: number
     max?: number
@@ -32,7 +35,7 @@ const props = withDefaults(
     /** Label over each thumb while it is in use: `(value) => "1:05"`. */
     format?: (value: number) => string
   }>(),
-  { modelValue: () => [0, 100], min: 0, max: 100, step: 1, minGap: 0 },
+  { palette: undefined, modelValue: () => [0, 100], min: 0, max: 100, step: 1, minGap: 0 },
 )
 
 const emit = defineEmits<{
@@ -65,6 +68,8 @@ const thumbClass =
   "group/thumb relative block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
 const labelClass =
   "pointer-events-none absolute bottom-full left-1/2 mb-1.5 -translate-x-1/2 translate-y-0.5 rounded-control bg-surface-raised px-1.5 py-0.5 text-[11px] whitespace-nowrap text-ink tabular-nums opacity-0 shadow-sm transition-[opacity,translate] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-hover/thumb:translate-y-0 group-hover/thumb:opacity-100 group-focus-visible/thumb:translate-y-0 group-focus-visible/thumb:opacity-100 group-active/thumb:translate-y-0 group-active/thumb:opacity-100 motion-reduce:transition-none"
+
+usePaletteControl({ disabled: () => field.value.disabled })
 </script>
 
 <template>

package/src/components/LpSecretField.vue

@@ -12,6 +12,7 @@ export interface SecretFieldLabels extends Record<string, string> {
 </script>
 
 <script setup lang="ts">
+import { suppressPaletteDiscovery } from "../composables/usePaletteCommands"
 /*
  * A value someone must be able to read and copy but should not have on screen
  * by default: an API key, a bot token, a webhook secret, a recovery code.
@@ -178,6 +179,8 @@ const shell = computed(() =>
     { sm: "min-h-(--size-control-sm) pl-2.5 pr-1 text-xs", md: "min-h-(--size-control-md) pl-3 pr-1.5 text-sm", lg: "min-h-(--size-control-lg) pl-3.5 pr-1.5 text-sm" }[props.size],
   ),
 )
+
+suppressPaletteDiscovery()
 </script>
 
 <template>

package/src/components/LpSegmented.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Segmented control — a compact bar of mutually-exclusive options with a sliding
  * pill marking the selection (iOS-style). Built on reka ToggleGroup for the
@@ -36,6 +37,8 @@ export interface SegmentedOption extends LpOptionBase<string> {
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     modelValue?: string
     options: SegmentedOption[]
     size?: "sm" | "md" | "lg"
@@ -49,7 +52,7 @@ const props = withDefaults(
      */
     hoverFollow?: boolean
   }>(),
-  { size: "md", block: false, hoverFollow: true },
+  { palette: undefined, size: "md", block: false, hoverFollow: true },
 )
 
 const emit = defineEmits<{
@@ -106,6 +109,8 @@ function releaseFocusAfterPointer(event: PointerEvent) {
   const target = event.currentTarget
   if (target instanceof HTMLElement) target.blur()
 }
+
+usePaletteControl({ disabled: () => field.value.disabled })
 </script>
 
 <template>

package/src/components/LpSelect.vue

@@ -16,6 +16,7 @@ export type SelectLabels = {
 </script>
 
 <script setup lang="ts" generic="V extends SelectValue = string">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * One select to rule them all — built on reka-ui Combobox.
  * `searchable` opts into the filter input; without it, it's a plain select.
@@ -61,6 +62,8 @@ type Model = V | V[] | undefined
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     modelValue?: Model
     options: SelectOption<V>[]
     placeholder?: string
@@ -90,7 +93,7 @@ const props = withDefaults(
     selected?: SelectSelection | (SelectSelection | null | undefined)[] | null
     labels?: Partial<SelectLabels>
   }>(),
-  {
+  { palette: undefined,
     searchable: false,
     multiple: false,
     clearable: false,
@@ -173,12 +176,43 @@ function onOpenChange(open: boolean) {
   isOpen.value = open
   query.value = ""
 }
+async function openFromKeyboard(event: KeyboardEvent) {
+  if (field.value.disabled || isOpen.value || !["ArrowDown", "ArrowUp"].includes(event.key)) return
+  event.preventDefault()
+  event.stopPropagation()
+  const trigger = event.currentTarget as HTMLElement
+  trigger.click()
+  await nextTick()
+  const panel = trigger.ownerDocument.getElementById(trigger.getAttribute("aria-controls") ?? "")
+  const search = panel?.querySelector<HTMLInputElement>('input:not([disabled])')
+  const items = panel?.querySelectorAll<HTMLElement>('[role="option"]:not([data-disabled])')
+  const selected = panel?.querySelector<HTMLElement>('[role="option"][aria-selected="true"]:not([data-disabled])')
+  const target = search ?? selected ?? (event.key === "ArrowUp" ? items?.[items.length - 1] : items?.[0])
+  target?.focus()
+}
 
 // Leaving the field, not moving between its parts: the trigger and the list
 // are marked with one id, because the list is portalled away from the trigger
 // and a check on the trigger alone either missed the search box or took a
 // step into it for leaving.
 const { partId, onFocusOut } = useFieldBlur((event) => emit("blur", event))
+const triggerRef = ref<{ $el: HTMLElement } | null>(null)
+
+/*
+ * A pick closes the list while the chosen option still holds focus, then the
+ * option is removed and focus falls to the body: the field looked left, and
+ * the next arrow key went to the page (inside the palette's editor it went
+ * nowhere). Focus dropped by a closed list goes back to the trigger instead,
+ * and that is not leaving the field, so no blur is reported for it.
+ */
+function onListFocusOut(event: FocusEvent) {
+  const trigger = triggerRef.value?.$el
+  if (isOpen.value || event.relatedTarget || !trigger?.isConnected) {
+    onFocusOut(event)
+    return
+  }
+  trigger.focus({ preventScroll: true })
+}
 
 /*
  * The trigger's name. reka hard-codes aria-label="Show popup" on it, which hid
@@ -368,6 +402,8 @@ const portalTo = usePortalTarget()
 // What happens in another document (the page around a frame, or a frame in
 // the page) is not "outside" for this layer.
 const guardOutside = useOutsideGuard()
+
+usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid, editorProps: () => ({ selected: props.multiple ? modelList.value.map((value, index) => shown(value, index)) : current.value }) })
 </script>
 
 <template>
@@ -408,7 +444,10 @@ const guardOutside = useOutsideGuard()
            being cut short. -->
       <span :id="valueId" hidden>{{ valueText }}</span>
       <ComboboxTrigger
+        ref="triggerRef"
         :id="field.id"
+        :tabindex="field.disabled ? -1 : 0"
+        @keydown="openFromKeyboard"
         v-bind="triggerName"
         :aria-invalid="field.invalid || undefined"
         :aria-describedby="field.describedBy"
@@ -524,7 +563,7 @@ const guardOutside = useOutsideGuard()
     <ComboboxPortal :to="portalTo">
       <ComboboxContent
         :data-lp-field-part="partId"
-        @focusout="onFocusOut"
+        @focusout="onListFocusOut"
         @interact-outside="guardOutside"
         @escape-key-down="guardOutside"
         position="popper"

package/src/components/LpSlider.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 // Single-value slider (reka Slider). reka models value as an array; we expose
 // a plain number for the common single-thumb case. Themed via tokens.
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui"
@@ -15,6 +16,8 @@ import { SLIDER_GLIDE, useSliderDrag } from "./slider"
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     modelValue?: number
     min?: number
     max?: number
@@ -23,7 +26,7 @@ const props = withDefaults(
     /** Accessible name for the thumb when there's no visible label. */
     ariaLabel?: string
   }>(),
-  { modelValue: 0, min: 0, max: 100, step: 1 },
+  { palette: undefined, modelValue: 0, min: 0, max: 100, step: 1 },
 )
 
 const emit = defineEmits<{
@@ -47,6 +50,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
   `relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55 ${SLIDER_GLIDE}`,
 )
 const { dragging, onPointerDown } = useSliderDrag()
+
+usePaletteControl({ disabled: () => field.value.disabled })
 </script>
 
 <template>

package/src/components/LpSwitch.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { computed, useId, useSlots } from "vue"
 import { SwitchRoot, SwitchThumb } from "reka-ui"
 import { useFieldControl } from "../composables/useField"
@@ -15,6 +16,8 @@ import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
+    /** Contextual palette metadata; false excludes this control. */
+    palette?: PaletteControlOptions
     modelValue?: boolean
     disabled?: boolean
     label?: string
@@ -34,7 +37,7 @@ const props = withDefaults(
      */
     action?: (value: boolean) => unknown
   }>(),
-  { labelPosition: "end" },
+  { palette: undefined, labelPosition: "end" },
 )
 const emit = defineEmits<{
   (e: "update:modelValue", value: boolean): void
@@ -79,6 +82,8 @@ const describedBy = computed(
 function onUpdate(value: boolean) {
   void set(value)
 }
+
+usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled || pending.value, editorProps: () => ({ action: undefined, 'onUpdate:modelValue': onUpdate }) })
 </script>
 
 <template>