@leavepulse/ui 0.70.0 → 0.71.0

package/src/components/LpContextMenu.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"
 /*
  * Right-click context menu (reka ContextMenu). Same items as LpDropdownMenu,
  * drawn by the same renderer: nested submenus (`children`), tick-box items and
@@ -14,7 +17,7 @@ import { HINT_SIGNALS, noteContextTarget } from "../composables/useHintSystem"
 import ContextMenuItems from "./ContextMenuItems.vue"
 import MenuTitle from "./MenuTitle.vue"
 import { POPOVER_PANEL } from "./dropdown"
-import { useOutsideGuard, usePortalTarget } from "../composables/useView"
+import { useOutsideGuard, usePortalTarget, useView, viewDocument } from "../composables/useView"
 
 export interface ContextMenuItemDef {
   label: string
@@ -39,7 +42,8 @@ export interface ContextMenuItemDef {
   checked?: boolean
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+  palette?: PaletteControlOptions
   items: ContextMenuItemDef[]
   /**
    * Keep the reka menu mounted even while `items` is momentarily empty. Use when
@@ -64,7 +68,7 @@ const props = defineProps<{
    * menus that only hold generic items (a whole table without row actions).
    */
   noHint?: boolean
-}>()
+}>(), { palette: undefined })
 
 // With no items the trigger is disabled, so the element keeps the browser's
 // native context menu. Lets callers wrap unconditionally and pass [] to opt out
@@ -81,12 +85,13 @@ const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-48 p-1 outline-none`
 // selection if the menu action left the text as it was.
 type TextField = HTMLInputElement | HTMLTextAreaElement
 const SELECTABLE = new Set(["text", "search", "url", "tel", "password"])
+const view = useView()
 let field: { el: TextField; value: string; start: number; end: number } | null = null
 
 function rememberField() {
-  const el = document.activeElement
+  const el = viewDocument(view.value).activeElement
   const text =
-    el instanceof HTMLTextAreaElement || (el instanceof HTMLInputElement && SELECTABLE.has(el.type))
+    el?.tagName === "TEXTAREA" || (el?.tagName === "INPUT" && SELECTABLE.has((el as HTMLInputElement).type))
   field = text
     ? { el: el as TextField, value: (el as TextField).value, start: (el as TextField).selectionStart ?? 0, end: (el as TextField).selectionEnd ?? 0 }
     : null
@@ -145,6 +150,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/LpDataList.vue

@@ -128,7 +128,7 @@ const pad = computed(() => (props.size === "sm" ? "py-1.5 text-xs" : "py-2.5 tex
           </LpTooltip>
         </dt>
         <dd class="flex min-w-0 items-center gap-1.5 text-ink" :class="item.mono ? 'font-mono' : ''">
-          <span class="min-w-0 break-words">
+          <span class="min-w-0 flex-1 [overflow-wrap:anywhere]">
             <slot
               v-if="slots[`value-${keyOf(item)}`] || slots.value"
               :name="slots[`value-${keyOf(item)}`] ? `value-${keyOf(item)}` : 'value'"
@@ -136,7 +136,7 @@ const pad = computed(() => (props.size === "sm" ? "py-1.5 text-xs" : "py-2.5 tex
               :value="item.value"
             />
             <span v-else-if="isEmpty(item.value)" class="text-muted">{{ text.empty }}</span>
-            <LpRollingText v-else-if="rolls(item.value)" :value="item.value!" align="start" />
+            <LpRollingText v-else-if="rolls(item.value)" :value="item.value!" align="start" wrap />
             <template v-else>{{ item.value }}</template>
           </span>
           <!-- Quiet until the row is hovered or focused; always there on touch,

package/src/components/LpDatePicker.vue

@@ -87,6 +87,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: string | undefined): void
+  (e: "blur", event: FocusEvent): void
 }>()
 
 const open = ref(false)
@@ -197,6 +198,7 @@ const presetOptions = computed(() => presetList.value.map((preset) => ({
     :presets="presetOptions"
     presets-class="sm:w-36"
     @clear="clear"
+    @blur="emit('blur', $event)"
   >
     <div class="flex flex-col">
       <LpCalendar

package/src/components/LpDateRangePicker.vue

@@ -69,6 +69,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: DateRange | undefined): void
+  (e: "blur", event: FocusEvent): void
 }>()
 
 const text = useLabels<DateRangePickerLabels>(
@@ -157,6 +158,7 @@ const presetOptions = computed(() => presetList.value.map((preset) => ({
     :presets="presetOptions"
     presets-class="sm:w-40"
     @clear="emit('update:modelValue', undefined)"
+    @blur="emit('blur', $event)"
   >
     <LpRangeCalendar
       :model-value="value"

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,10 +46,17 @@ 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>
-  <DropdownMenuRoot @update:open="opened">
+  <DropdownMenuRoot :modal="false" @update:open="opened">
     <DropdownMenuTrigger as-child>
       <slot name="trigger" />
     </DropdownMenuTrigger>

package/src/components/LpEditable.vue

@@ -129,7 +129,7 @@ function cancel() {
 
 let committing = false
 async function commit(refocus: boolean) {
-  if (!editing.value || committing) return
+  if (!editing.value || committing || !interactive.value) return
   const value = props.trim ? draft.value.trim() : draft.value
   if (value === props.modelValue) {
     notice.clear()
@@ -273,6 +273,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() => "relative inline-
           :aria-invalid="(notice.tone.value === 'danger' && !!notice.message.value) || undefined"
           :placeholder="placeholder"
           :maxlength="maxlength"
+          :disabled="disabled"
+          :readonly="readonly"
           :rows="multiline ? 1 : undefined"
           class="col-start-1 row-start-1 w-full min-w-0 resize-none overflow-hidden bg-transparent text-ink outline-none placeholder:text-muted"
           :class="PAD[size]"

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,20 +8,24 @@ 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
 // again on a timer) and puts its copy button in `actions`.
 import { ref } from "vue"
+import { useFieldControl } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import LpInput from "./LpInput.vue"
 import RevealToggle from "./RevealToggle.vue"
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   modelValue?: string
   placeholder?: string
   invalid?: boolean
   disabled?: boolean
+  /** Offer the show/hide button. When false, the field stays masked. */
+  revealable?: boolean
   // Field wrapping mirrors LpInput: passing any of these wraps the control in
   // LpFormField, so a password field labels itself like every other field.
   label?: string
@@ -31,10 +35,11 @@ const props = defineProps<{
   /** Control height, as on LpInput. */
   size?: "sm" | "md" | "lg"
   labels?: Partial<PasswordInputLabels>
-}>()
+}>(), { revealable: true })
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 /** Whether the text shows; bind it to reveal or hide from outside. */
 const visible = defineModel<boolean>("visible", { default: false })
+const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
 
 const text = useLabels<PasswordInputLabels>(
   "passwordInput",
@@ -47,6 +52,8 @@ defineExpose({
   blur: () => inner.value?.blur(),
   select: () => inner.value?.select(),
 })
+
+suppressPaletteDiscovery()
 </script>
 
 <template>
@@ -54,10 +61,10 @@ defineExpose({
     ref="inner"
     v-bind="$attrs"
     :model-value="modelValue"
-    :type="visible ? 'text' : 'password'"
+    :type="revealable && visible ? 'text' : 'password'"
     :placeholder="placeholder"
     :invalid="invalid"
-    :disabled="disabled"
+    :disabled="field.disabled"
     :label="label"
     :hint="hint"
     :error="error"
@@ -71,11 +78,12 @@ defineExpose({
       <!-- Sized to the icon with a hair of padding, as the field's other
            trailing controls are, rather than to a full square button. -->
       <RevealToggle
+        v-if="revealable"
         v-model="visible"
         :icon-size="size === 'sm' ? 14 : 16"
         :show-label="text.show"
         :hide-label="text.hide"
-        :disabled="disabled"
+        :disabled="field.disabled"
         class="size-auto rounded-inner p-1 hover:bg-transparent"
       />
     </template>

package/src/components/LpPopover.vue

@@ -10,6 +10,9 @@ import { mergeClass } from "../composables/useMergedClass"
 import { POPOVER_PANEL } from "./dropdown"
 import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
+// The trigger owns its attributes through the slot; fallthrough tags the panel.
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(
   defineProps<{
     side?: "top" | "right" | "bottom" | "left"
@@ -47,6 +50,7 @@ const guardOutside = useOutsideGuard()
     </PopoverTrigger>
     <PopoverPortal :to="portalTo">
       <PopoverContent
+        v-bind="$attrs"
         @interact-outside="guardOutside"
         @escape-key-down="guardOutside"
         :collision-padding="8"

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>