@leavepulse/ui 0.71.1 → 0.72.0

package/src/components/LpAppShell.vue

@@ -33,6 +33,7 @@ export default { inheritAttrs: false }
  */
 import { computed, ref, useId, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
+import LpBottomNav from "./LpBottomNav.vue"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
@@ -82,11 +83,37 @@ const props = withDefaults(
     loading?: boolean
     /** Text overrides: the burger's name and the skip link. */
     labels?: Partial<{ openMenu: string; skipToContent: string }>
+    /** Icon-only rail (v-model:compact). Forwarded to LpSidebar. */
+    compact?: boolean
+    /** The person sizes the rail and folds it to icons. Forwarded to LpSidebar. */
+    resizable?: boolean
+    /** Rows can be pinned to the top (v-model:pinned). Forwarded to LpSidebar. */
+    pinnable?: boolean
+    pinned?: string[]
+    /** Remember folded groups, width, compact and pins under this key. Forwarded to LpSidebar. */
+    persist?: string
+    /** Rest time before a row's `preview` card opens. Forwarded to LpSidebar. */
+    previewDelay?: number
+    /** The key that folds the rail; false turns it off. Forwarded to LpSidebar. */
+    compactHotkey?: string | false
+    /** Marks a non-production copy along the top of the rail. Forwarded to LpSidebar. */
+    environment?: string | { label: string; tone?: "warning" | "danger" | "action" | "brand" }
+    /** The app's hint system; rows with a `hintPage` show unread news as a dot. Forwarded to LpSidebar. */
+    hints?: { unreadNews: (page?: string) => readonly unknown[] }
+    /**
+     * On phones, the main pages along the bottom instead of the burger, with
+     * "More" for the rest (it opens the drawer). `true` takes the first four
+     * pages, a number that many, a list of ids those pages.
+     */
+    bottomNav?: boolean | number | string[]
   }>(),
   {
     mobileBreakpoint: "lg",
     divider: true,
     contentClass: "mx-auto w-full max-w-6xl",
+    // Unset, not false: an absent boolean would hand the sidebar "expanded"
+    // and override the state it remembers.
+    compact: undefined,
   },
 )
 
@@ -94,11 +121,13 @@ const emit = defineEmits<{
   (e: "update:modelValue", id: string): void
   (e: "update:collapsed", keys: string[]): void
   (e: "select", item: SidebarItem): void
+  (e: "update:compact", value: boolean): void
+  (e: "update:pinned", ids: string[]): void
 }>()
 
 // Normalise items/sections to a flat list for the title computation.
 const flatItems = computed<SidebarItem[]>(() =>
-  props.sections ? props.sections.flatMap((s) => s.items) : (props.items ?? []),
+  (props.sections ? props.sections.flatMap((s) => s.items) : (props.items ?? [])).flatMap((i) => [i, ...(i.children ?? [])]),
 )
 
 // Default active test: exact match for "/", prefix match (on a segment
@@ -179,7 +208,23 @@ const burgerHidden: Record<NonNullable<typeof props.mobileBreakpoint>, string> =
   lg: "lg:hidden",
   xl: "xl:hidden",
 }
-const burgerClass = computed(() => burgerHidden[props.mobileBreakpoint])
+const burgerClass = computed(() => (props.bottomNav ? "hidden" : burgerHidden[props.mobileBreakpoint]))
+
+const topItems = computed<SidebarItem[]>(() => (props.sections ? props.sections.flatMap((s) => s.items) : (props.items ?? [])))
+const bottomItems = computed<SidebarItem[]>(() => {
+  const want = props.bottomNav
+  if (!want) return []
+  if (Array.isArray(want)) return want.map((id) => topItems.value.find((i) => i.id === id)).filter((i): i is SidebarItem => !!i)
+  return topItems.value.slice(0, want === true ? 4 : want)
+})
+const moreActive = computed(() => {
+  const shown = new Set(bottomItems.value.map((i) => i.id))
+  return flatItems.value.some((i) => !shown.has(i.id) && activeTest.value(i)) && !bottomItems.value.some((i) => activeTest.value(i))
+})
+function onBottom(item: SidebarItem) {
+  onModel(item.id)
+  onSelect(item)
+}
 
 // Expose the burger trigger so a host can omit its own header entirely.
 const _openDrawer = () => (drawerOpen.value = true)
@@ -215,20 +260,31 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       :loading="loading"
       :collapsed="collapsed"
       :auto-collapse-after="autoCollapseAfter"
+      :compact="compact"
+      :resizable="resizable"
+      :pinnable="pinnable"
+      :pinned="pinned"
+      :persist="persist"
+      :preview-delay="previewDelay"
+      :compact-hotkey="compactHotkey"
+      :environment="environment"
+      :hints="hints"
       class="shrink-0"
       @update:model-value="onModel"
+      @update:compact="(v) => emit('update:compact', v)"
+      @update:pinned="(v) => emit('update:pinned', v)"
       @update:open="(v) => (drawerOpen = v)"
       @update:collapsed="(v) => emit('update:collapsed', v)"
       @select="onSelect"
     >
-      <template v-if="$slots.logo" #header>
-        <slot name="logo" />
+      <template v-if="$slots.logo" #header="{ compact: folded }">
+        <slot name="logo" :compact="folded" />
       </template>
       <template v-if="$slots['sidebar-actions']" #actions>
         <slot name="sidebar-actions" />
       </template>
-      <template v-if="$slots['sidebar-footer']" #footer>
-        <slot name="sidebar-footer" />
+      <template v-if="$slots['sidebar-footer']" #footer="{ compact: folded }">
+        <slot name="sidebar-footer" :compact="folded" />
       </template>
       <template v-if="$slots['sidebar-item']" #item="slotProps">
         <slot name="sidebar-item" v-bind="slotProps" />
@@ -261,7 +317,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
              translation that wraps a long title onto a second line, otherwise
              re-lays the whole bar in one frame. Width is left free so the
              truncation still resolves against the space actually available. -->
-        <LpShift axis="height" class="flex min-w-0 flex-1 items-center">
+        <LpShift axis="height" presence class="flex min-w-0 flex-1 items-center">
           <slot name="header-title">
             <h1 class="truncate text-lg font-semibold">{{ pageTitle }}</h1>
           </slot>
@@ -283,6 +339,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
              the title keeps a third and every button stays reachable. -->
         <LpShift
           axis="width"
+          anchor="end"
+          presence
           class="ml-auto flex max-w-[66%] shrink items-center gap-2 overflow-x-auto lp-scrollbar-none md:max-w-none md:shrink-0 md:overflow-visible"
         >
           <slot name="header-actions" />
@@ -304,6 +362,16 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           <slot />
         </LpScrollArea>
       </main>
+      <LpBottomNav
+        v-if="bottomNav"
+        :class="burgerHidden[mobileBreakpoint]"
+        :items="bottomItems"
+        :is-active="activeTest"
+        more
+        :more-active="moreActive"
+        @select="onBottom"
+        @more="drawerOpen = true"
+      />
     </div>
 
     <slot name="overlays" />

package/src/components/LpBottomNav.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/*
+ * A phone app's bottom navigation: the main pages along the bottom edge, each
+ * a real link (or a button that emits `select`), the current one marked by a
+ * bar that slides between them, and "More" last for everything else.
+ *
+ * It looks exactly like LpTabs' bottom variant, sharing its bar and its tab
+ * face, but it is navigation between pages, not tabs within one: links that a
+ * screen reader announces as links, that open in a new tab when asked to, and
+ * that need no router call from the app. LpAppShell shows one on phones with
+ * `bottomNav`; an app with a shell of its own uses it directly.
+ */
+import { Motion } from "motion-v"
+import { useId } from "vue"
+import { usePillTransition } from "../composables/usePillTransition"
+import { useLabels, useLinkComponent } from "../composables/useLpConfig"
+import { resolveLink, type ResolvedLink } from "./link"
+import LpTabFace from "./LpTabFace.vue"
+import type { SidebarItem } from "./sidebar"
+import { BOTTOM_BAR, BOTTOM_ITEM, BOTTOM_MARKER } from "./tabs"
+
+const props = withDefaults(
+  defineProps<{
+    items: SidebarItem[]
+    /** Active page id. Ignored when `isActive` is given. */
+    modelValue?: string
+    isActive?: (item: SidebarItem) => boolean
+    /** A last "More" entry that emits `more` (the shell opens its drawer). */
+    more?: boolean
+    /** Marks "More" current: the page shown is one of those behind it. */
+    moreActive?: boolean
+    label?: string
+    labels?: Partial<{ nav: string; more: string }>
+  }>(),
+  { more: false, moreActive: false },
+)
+
+const emit = defineEmits<{
+  (e: "select", item: SidebarItem): void
+  (e: "more"): void
+}>()
+
+const text = useLabels("bottomNav", { nav: "Main", more: "More" }, () => props.labels)
+const linkComponent = useLinkComponent()
+const pillTransition = usePillTransition()
+const markerId = `lp-bottom-nav-${useId()}`
+
+function active(item: SidebarItem): boolean {
+  return props.isActive ? props.isActive(item) : item.id === props.modelValue
+}
+
+function rowOf(item: SidebarItem): ResolvedLink {
+  const link = item.disabled ? null : resolveLink(linkComponent.value, { to: item.to, href: item.href })
+  return link ?? { is: "button", props: { type: "button", disabled: item.disabled || undefined } }
+}
+
+const ROW = "relative flex items-center justify-center outline-none transition-[color,opacity] duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
+</script>
+
+<template>
+  <nav :aria-label="label ?? text.nav" :class="BOTTOM_BAR">
+    <component
+      :is="rowOf(item).is"
+      v-for="item in items"
+      :key="item.id"
+      v-bind="rowOf(item).props"
+      :aria-current="active(item) ? 'page' : undefined"
+      :class="[ROW, BOTTOM_ITEM, item.disabled ? 'cursor-not-allowed opacity-45' : active(item) ? 'text-brand' : 'text-muted']"
+      @click="emit('select', item)"
+    >
+      <Motion v-if="active(item)" :layout-id="markerId" :transition="pillTransition" :class="[BOTTOM_MARKER, 'bg-brand']" />
+      <LpTabFace :item="item" bottom :active="active(item)" />
+    </component>
+    <button
+      v-if="more"
+      type="button"
+      :class="[ROW, BOTTOM_ITEM, moreActive ? 'text-brand' : 'text-muted']"
+      @click="emit('more')"
+    >
+      <Motion v-if="moreActive" :layout-id="markerId" :transition="pillTransition" :class="[BOTTOM_MARKER, 'bg-brand']" />
+      <LpTabFace :item="{ label: text.more, icon: 'lucide:menu' }" bottom :active="moreActive" />
+    </button>
+  </nav>
+</template>

package/src/components/LpChart.vue

@@ -41,6 +41,7 @@ import {
   pointCount,
   resolveLabels,
   xAt,
+  xLabelIndices,
   yAt,
   type Box,
   type ChartMarker,
@@ -255,6 +256,23 @@ const allSeries = computed(() =>
 )
 const visible = computed(() => allSeries.value.filter((s) => !hidden.value.has(s.id)))
 
+// A series asked to start hidden is hidden once, when it first appears: the
+// legend owns it from then on, and a data refresh must not switch it back off.
+const seeded = new Set<string>()
+watch(
+  () => props.series.map((s, i) => [`${i}:${s.name}`, !!s.hidden] as const),
+  (entries) => {
+    let next: Set<string> | null = null
+    for (const [id, off] of entries) {
+      if (seeded.has(id)) continue
+      seeded.add(id)
+      if (off) (next ??= new Set(hidden.value)).add(id)
+    }
+    if (next && next.size < entries.length) hidden.value = next
+  },
+  { immediate: true },
+)
+
 /*
  * How present each series is, 1 to 0, driven per frame rather than by CSS.
  *
@@ -664,9 +682,11 @@ const xLabelStride = computed(() => {
 })
 
 const xLabels = computed(() =>
-  labels.value
-    .map((label, i) => ({ label, i, x: xAt(i, count.value, box.value, banded.value) }))
-    .filter(({ i }) => i % xLabelStride.value === 0 || i === count.value - 1),
+  xLabelIndices(labels.value.length, xLabelStride.value).map((i) => ({
+    label: labels.value[i],
+    i,
+    x: xAt(i, count.value, box.value, banded.value),
+  })),
 )
 
 // ── marks ──────────────────────────────────────

package/src/components/LpColorPicker.vue

@@ -104,6 +104,17 @@ const props = withDefaults(
     size?: "sm" | "md" | "lg"
     /** Trigger text beside the swatch. Defaults to the colour's own value. */
     label?: string
+    /**
+     * `swatch` makes the trigger a round chip of the colour alone, for a row of
+     * presets that ends in "any colour" or a toolbar with no room for a field.
+     * The panel is the same.
+     */
+    variant?: "field" | "swatch"
+    /**
+     * The swatch is the current choice. False draws it as "any colour" (a
+     * colour wheel), for when the value came from presets beside it.
+     */
+    selected?: boolean
     /** Accessible name for the trigger when it carries no visible text. */
     ariaLabel?: string
     /** Popover side, as LpPopover. */
@@ -156,6 +167,8 @@ const props = withDefaults(
     recent: false,
     recentKey: "lp.color.recent",
     recentLimit: 8,
+    variant: "field",
+    selected: true,
   },
 )
 
@@ -372,6 +385,9 @@ function tickClass(value: string) {
   return rgb && isLight(rgbToHsv(rgb)) ? "text-black" : "text-white"
 }
 
+const SWATCH_SIZE = { sm: "size-6", md: "size-7", lg: "size-8" }
+const ANY_COLOUR = "conic-gradient(from 90deg, #ff5c5c, #ffd23f, #39e58c, #2dd4bf, #00bcff, #7c5cff, #ff5ca8, #ff5c5c)"
+
 const triggerSize = {
   sm: "h-(--size-control-sm) text-xs",
   md: "h-(--size-control-md) text-sm",
@@ -634,10 +650,25 @@ const guardOutside = useOutsideGuard()
          menu's trigger and the popover's trigger both. LpContextMenu renders
          just its slot when `items` is empty, so `menu="none"` with no items of
          your own leaves the native browser menu in place. -->
-    <PopoverAnchor class="block w-full">
+    <PopoverAnchor :class="variant === 'swatch' ? 'inline-block' : 'block w-full'">
       <LpContextMenu :items="menuItems">
       <PopoverTrigger as-child>
         <button
+          v-if="variant === 'swatch'"
+          type="button"
+          :id="field.id"
+          :disabled="field.disabled"
+          :aria-label="ariaLabel ?? current"
+          :title="current"
+          class="relative shrink-0 overflow-hidden rounded-full outline-none ring-2 ring-offset-2 ring-offset-surface-raised transition-[box-shadow,scale] duration-(--duration-fast) hover:scale-110 focus-visible:ring-ring data-[state=open]:ring-brand disabled:cursor-not-allowed disabled:opacity-55"
+          :class="[SWATCH_SIZE[size], selected ? 'ring-ink' : 'ring-line']"
+          :style="{ background: CHECKERBOARD }"
+        >
+          <span class="block size-full" :style="{ background: selected ? previewCss : ANY_COLOUR }" />
+          <LpIcon v-if="!selected" name="lucide:pipette" :size="12" class="absolute inset-0 m-auto text-white drop-shadow" />
+        </button>
+        <button
+          v-else
           type="button"
           :id="field.id"
           :disabled="field.disabled"

package/src/components/LpCommandPalette.vue

@@ -1519,7 +1519,10 @@ const guardOutside = useOutsideGuard()
           <div class="flex gap-2"><LpButton :loading="executing || validating" @click="submitPrompt">{{ text.submit }}</LpButton><LpButton variant="ghost" @click="promptCommand = undefined; inputRef?.focus()">{{ text.backToResults }}</LpButton></div>
         </div>
         <p v-if="actionError" role="alert" class="px-4 py-2 text-sm text-danger">{{ actionError }}</p>
-        <div v-if="active && (canPin || selectedActions.length) && !promptCommand" class="flex items-center justify-end gap-2 border-b border-line px-3 py-1">
+        <!-- Touch only: there the footer with its keys is hidden, and these are
+             the only way to the row's actions and pin. On a pointer the same
+             buttons live in the footer, so the list never shifts under this strip. -->
+        <div v-if="active && (canPin || selectedActions.length) && !promptCommand" class="hidden items-center justify-end gap-2 border-b border-line px-3 py-1 [@media(hover:none)_and_(pointer:coarse)]:flex">
           <LpButton v-if="selectedActions.length" size="xs" variant="ghost" @click="openActions(active)">{{ text.actions }} <span class="text-muted">Tab</span></LpButton>
           <LpButton v-if="canPin" size="xs" variant="ghost" :aria-label="isPinned(active) ? text.unpin : text.pin" :aria-pressed="isPinned(active)" @click="togglePin(active)"><LpIcon name="lucide:star" :size="14" />{{ isPinned(active) ? text.unpin : text.pin }} <span class="text-muted">Alt+P</span></LpButton>
         </div>
@@ -1727,17 +1730,32 @@ const guardOutside = useOutsideGuard()
           </span>
           <!-- Only inside a mode: at the root Backspace just edits the query,
                and advertising it there would be a lie. -->
-          <span
-            v-if="selectedActions.length"
-            class="flex items-center gap-1 transition-colors"
+          <button
+            v-if="selectedActions.length && active"
+            type="button"
+            class="flex items-center gap-1 rounded-small outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
             :class="showActionsKey && 'font-medium text-brand'"
+            :aria-label="text.actions"
+            @click="openActions(active)"
           >
             <kbd
               class="rounded-small border px-1 text-[10px] transition-colors"
               :class="showActionsKey ? 'border-brand' : 'border-line'"
             >{{ text.tab }}</kbd>
             {{ text.actions }}
-          </span>
+          </button>
+          <button
+            v-if="canPin && active && !promptCommand"
+            type="button"
+            class="flex items-center gap-1 rounded-small outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+            :aria-label="isPinned(active) ? text.unpin : text.pin"
+            :aria-pressed="isPinned(active)"
+            @click="togglePin(active)"
+          >
+            <kbd class="rounded-small border border-line px-1 text-[10px]">Alt+P</kbd>
+            <LpIcon name="lucide:star" :size="11" :class="isPinned(active) && 'fill-current text-brand'" />
+            {{ isPinned(active) ? text.unpin : text.pin }}
+          </button>
           <span v-if="trail.length" class="flex items-center gap-1">
             <kbd class="rounded-small border border-line px-1 text-[10px]">⌫</kbd>
             {{ text.back }}

package/src/components/LpEmptyState.vue

@@ -45,7 +45,10 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     </div>
     <div class="flex flex-col gap-1">
       <p class="font-semibold text-ink" :class="compact ? 'text-sm' : ''">{{ title }}</p>
-      <p v-if="description" class="max-w-sm text-sm text-muted">{{ description }}</p>
+      <!-- The slot is for a line a string cannot carry: a command, a link. -->
+      <p v-if="description || $slots.description" class="max-w-sm text-sm text-muted">
+        <slot name="description">{{ description }}</slot>
+      </p>
     </div>
     <div v-if="$slots.default" class="mt-1"><slot /></div>
   </div>

package/src/components/LpNumberFlow.vue

@@ -229,8 +229,8 @@ onBeforeUnmount(stop)
  * 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) : "."))
+// The grouped and compact forms are written in the locale; the plain one always uses ".".
+const fractionMark = computed(() => ((props.grouped || props.compact) && !props.format ? decimalMark(locale.value) : "."))
 
 const formatted = computed(() => formatAt(round(displayed.value), !settled.value))
 
@@ -249,10 +249,10 @@ function formatAt(v: number, padded: boolean): string {
      *
      * The decimal count is what stays fixed: one place whenever a unit is in
      * play, so the row's shape only changes at a rollover, not on every frame.
-     * No locale here: the cells below find the fraction by its ".", and a
-     * locale's "," would turn the fraction's columns into integer ones.
+     * Written in the app's locale: the cells find the fraction by that
+     * locale's own mark (fractionMark), so "1,2 тыс." keeps its columns.
      */
-    return compactNumber(v, { plainDecimals: 0, fixed: true })
+    return compactNumber(v, { plainDecimals: 0, fixed: true, locale: locale.value, words: true })
   }
   const pad = padded ? Math.max(1, padTo.value) : 1
   if (props.grouped)
@@ -280,6 +280,8 @@ interface Cell {
   char: string
   /** A leading zero held open for a column the value hasn't reached yet. */
   isPad: boolean
+  /** A space between two digits: the locale's thousands separator. */
+  isGap: boolean
 }
 
 /*
@@ -338,7 +340,8 @@ const cells = computed<Cell[]>(() => {
     const digit = isDigit(char) ? char.charCodeAt(0) - 48 : null
     const isPad = leading && digit === 0 && i < intEnd - 1
     if (digit !== null && digit !== 0) leading = false
-    return { key: keys[i], digit, char, isPad }
+    const isGap = digit === null && /\s/.test(char) && isDigit(chars[i - 1] ?? "") && isDigit(chars[i + 1] ?? "")
+    return { key: keys[i], digit, char, isPad, isGap }
   })
 })
 
@@ -372,7 +375,9 @@ const label = computed(
     class="lp-nf inline-flex items-baseline tabular-nums"
   >
     <span class="sr-only">{{ label }}</span>
-    <span v-if="prefix" aria-hidden="true">{{ prefix }}</span>
+    <!-- `pre`: a flex item drops its leading and trailing spaces, so " ms"
+         as a suffix printed "12.8ms". -->
+    <span v-if="prefix" aria-hidden="true" class="whitespace-pre">{{ prefix }}</span>
 
     <span class="lp-nf__track inline-flex items-baseline" aria-hidden="true">
       <TransitionGroup name="lp-nf-cell">
@@ -380,7 +385,7 @@ const label = computed(
           v-for="cell in cells"
           :key="cell.key"
           class="lp-nf__cell"
-          :class="cell.isPad ? 'lp-nf__cell--pad' : ''"
+          :class="{ 'lp-nf__cell--pad': cell.isPad, 'lp-nf__cell--gap': cell.isGap }"
         >
           <!-- A digit is a window onto its strip; a separator is just a glyph. -->
           <template v-if="cell.digit !== null">
@@ -399,7 +404,7 @@ const label = computed(
       </TransitionGroup>
     </span>
 
-    <span v-if="suffix" aria-hidden="true">{{ suffix }}</span>
+    <span v-if="suffix" aria-hidden="true" class="whitespace-pre">{{ suffix }}</span>
   </span>
 </template>
 
@@ -486,6 +491,15 @@ const label = computed(
 
 /* Faded, so a held-open column reads as an empty wheel rather than a zero the
    number actually has. */
+/*
+ * A space separator (ru, fr, …) takes a whole column in a monospaced or
+ * tabular face, so "7 271" read as "7  271". It is drawn as the narrow gap
+ * the locale means.
+ */
+.lp-nf__cell--gap {
+  width: 0.25em;
+}
+
 .lp-nf__cell--pad {
   opacity: 0.18;
   transition: opacity var(--duration-fast, 160ms) linear;

package/src/components/LpPaletteTheme.vue

@@ -3,12 +3,12 @@ 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 LpThemeStudio, { type ThemeStudioPart } from "./LpThemeStudio.vue"
 import LpThemeProvider from "./LpThemeProvider.vue"
 import LpButton from "./LpButton.vue"
 import LpInput from "./LpInput.vue"
 
-const props = defineProps<{ studio: PreviewableThemeStudio }>()
+const props = defineProps<{ studio: PreviewableThemeStudio; hide?: ThemeStudioPart[] }>()
 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 })
@@ -43,6 +43,6 @@ function apply() {
       <LpInput :placeholder="text.placeholder" readonly :tabindex="-1" />
       <LpButton :tabindex="-1">{{ text.action }}</LpButton>
     </LpThemeProvider>
-    <LpThemeStudio :studio="draft" :labels="{ reset: text.revert }" />
+    <LpThemeStudio :studio="draft" :hide="hide" :labels="{ reset: text.revert }" />
   </div>
 </template>

package/src/components/LpRollingText.vue

@@ -20,7 +20,8 @@
  *   <LpRollingText :value="label" />
  *   <LpRollingText :value="status" mode="flip" />
  */
-import { computed } from "vue"
+import { computed, ref, useSlots, watch } from "vue"
+import { splitChange } from "./rolling"
 
 const props = withDefaults(
   defineProps<{
@@ -45,6 +46,21 @@ const props = withDefaults(
    text patch — without it there is nothing to transition between. */
 const key = computed(() => String(props.value))
 
+/*
+ * Only what changed rolls. "Valid for 2:54" turning into "2:53" rolled every
+ * word of the line once a second (a countdown badge), so the whole badge
+ * flickered; now "Valid for 2:5" stays and the "4" rolls to "3". With a slot
+ * of its own, or wrapping text, the whole value rolls as before.
+ */
+const slots = useSlots()
+const partial = computed(() => !slots.default && !props.wrap)
+const parts = ref({ head: "", mid: String(props.value), tail: "" })
+watch(
+  () => String(props.value),
+  (next, was) => (parts.value = splitChange(was, next)),
+)
+const midKey = computed(() => `${parts.value.head.length}:${parts.value.mid}`)
+
 const name = computed(() =>
   props.mode === "flip" ? "lp-roll-flip" : `lp-roll-${props.direction}`,
 )
@@ -68,7 +84,16 @@ const style = computed(() => ({
     :class="[justify, wrap && 'lp-roll--wrap']"
     :style="style"
   >
-    <Transition :name="name">
+    <template v-if="partial">
+      <span v-if="parts.head" class="whitespace-pre">{{ parts.head }}</span>
+      <span class="relative inline-flex overflow-hidden">
+        <Transition :name="name">
+          <span :key="midKey" class="lp-roll__item whitespace-pre">{{ parts.mid }}</span>
+        </Transition>
+      </span>
+      <span v-if="parts.tail" class="whitespace-pre">{{ parts.tail }}</span>
+    </template>
+    <Transition v-else :name="name">
       <span :key="key" class="lp-roll__item">
         <slot :value="value">{{ value }}</slot>
       </span>

package/src/components/LpSegmented.vue

@@ -79,7 +79,9 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
   [
     "inline-flex items-center gap-1 rounded-control border border-line bg-surface-soft p-1",
     sizeCls[props.size],
-    props.block ? "flex w-full" : "",
+    // `w-fit`, not left to the parent: in a column a flex item stretches, and
+    // the options sat on the left of an empty bar (the theme studio met it).
+    props.block ? "flex w-full" : "w-fit",
   ].join(" "),
 )
 

package/src/components/LpSelect.vue

@@ -104,10 +104,11 @@ const props = withDefaults(
   },
 )
 
+/* The text steps with the height, as in every other kit field: a small select beside a small input read a size larger. */
 const SIZE_HEIGHT = {
-  sm: "h-(--size-control-sm)",
-  md: "h-(--size-control-md)",
-  lg: "h-(--size-control-lg)",
+  sm: "h-(--size-control-sm) text-xs",
+  md: "h-(--size-control-md) text-sm",
+  lg: "h-(--size-control-lg) text-sm",
 } as const
 const anchorHeight = computed(() => SIZE_HEIGHT[props.size])
 
@@ -431,7 +432,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       @focusout="onFocusOut"
       :class="[
         anchorHeight,
-        'group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2',
+        'group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2',
         field.disabled && 'cursor-not-allowed opacity-55',
         field.invalid
           ? 'border-danger focus-within:border-danger focus-within:ring-danger-soft'