@leavepulse/ui 0.77.3 → 0.78.1

package/src/components/LpCheckbox.vue

@@ -11,7 +11,7 @@ import { CheckboxIndicator, CheckboxRoot } from "reka-ui"
 import { computed, useId } from "vue"
 import LpIcon from "./LpIcon.vue"
 import LpLoader from "./LpLoader.vue"
-import { useFieldControl } from "../composables/useField"
+import { isAttrOn, mergeDescribedBy, useFieldControl } from "../composables/useField"
 import { useOptimisticToggle } from "../composables/useOptimisticToggle"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
@@ -30,12 +30,14 @@ const props = withDefaults(defineProps<{
   /**
    * Saves the new state, as LpSwitch's `action`: the box ticks at once and
    * spins while this runs; a failure unticks it and becomes an error toast
-   * (or the `error` event, when the app listens).
+   * (or the `error` event, when the app listens). From the mixed state,
+   * `v-model:indeterminate` gets it back as well.
    */
   action?: (value: boolean) => unknown
 }>(), { palette: undefined })
 const emit = defineEmits<{
   (e: "update:modelValue", value: boolean): void
+  (e: "update:indeterminate", value: boolean): void
   (e: "change", value: boolean): void
   /** The `action` finished. */
   (e: "done", value: boolean): void
@@ -43,20 +45,21 @@ const emit = defineEmits<{
   (e: "error", error: unknown): void
 }>()
 
-const { pending, set } = useOptimisticToggle(() => props.action, emit)
+// The box was mixed when this save began: a boolean rollback cannot say so.
+let wasMixed = false
+const { pending, set } = useOptimisticToggle(() => props.action, emit, () => {
+  if (wasMixed) emit("update:indeterminate", true)
+})
 
 function onUpdate(v: boolean | "indeterminate") {
   const checked = v === true
   if (pending.value) return
+  wasMixed = !!props.indeterminate
+  if (wasMixed) emit("update:indeterminate", false)
   void set(checked)
   emit("change", checked)
 }
 
-const field = useFieldControl(() => ({ wrapped: false, id: props.id, disabled: props.disabled }))
-const descriptionId = `${useId()}-description`
-const describedBy = computed(
-  () => [props.description ? descriptionId : "", field.value.describedBy ?? ""].filter(Boolean).join(" ") || undefined,
-)
 
 // The label sits a fixed distance from the box; a dense list of options needs that closer.
 // With a description the box aligns with the first line rather than the middle of two.
@@ -67,14 +70,45 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
   ].join(" "),
 )
 
+/*
+ * The box is the control, so what describes it (aria-*, name, title) goes to
+ * the box, as on LpSwitch: on the <label> a reader never hears it. Focus does
+ * not bubble, so its listeners go there too. The other listeners stay on the
+ * label, the whole hit area: a press on the text must reach them as well.
+ */
+const FOCUS_LISTENER = /^on(Focus|Blur)/
+const LISTENER = /^on[A-Z]/
+const parts = computed(() => {
+  const label: Record<string, unknown> = {}
+  const control: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(rest.value)) {
+    const onLabel = key === "style" || (LISTENER.test(key) && !FOCUS_LISTENER.test(key))
+    if (onLabel) label[key] = value
+    else control[key] = value
+  }
+  return { label, control }
+})
+
+const field = useFieldControl(() => ({
+  wrapped: false,
+  id: props.id,
+  required: isAttrOn(rest.value.required),
+  disabled: props.disabled,
+}))
+const descriptionId = `${useId()}-description`
+const describedBy = computed(() =>
+  mergeDescribedBy(rest.value["aria-describedby"], props.description ? descriptionId : undefined, field.value.describedBy),
+)
+
 usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled || pending.value, editorProps: () => ({ action: undefined, 'onUpdate:modelValue': onUpdate, onChange: undefined }) })
 </script>
 
 <template>
   <label
     :class="rootClass"
-    v-bind="rest">
+    v-bind="parts.label">
     <CheckboxRoot
+      v-bind="parts.control"
       :id="field.id"
       :name="name"
       :model-value="indeterminate ? 'indeterminate' : modelValue"

package/src/components/LpCodeBlock.vue

@@ -22,7 +22,7 @@ export default { inheritAttrs: false }
  * import/package block automatically without markers. Regions collapse by default;
  * set `region:open` (e.g. `// #region label open`) to start expanded.
  */
-import { computed, reactive, ref, watch } from "vue"
+import { computed, h, reactive, ref, watch, type FunctionalComponent } from "vue"
 import { type CodeLang, tokenizeLines } from "./codeHighlight"
 import { useLabels } from "../composables/useLpConfig"
 import LpCopyButton from "./LpCopyButton.vue"
@@ -218,6 +218,16 @@ function onInput(e: Event) {
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "overflow-hidden rounded-card border border-line bg-surface font-mono text-xs",
 )
+
+// One line of code, plain or inside a fold. Built without a template so no
+// whitespace can reach the <pre> it renders into.
+const CodeLine: FunctionalComponent<{ n: number }> = ({ n }) =>
+  h("span", { class: "block min-h-[1.4em]" }, [
+    props.lineNumbers
+      ? h("span", { class: "mr-3 inline-block w-7 select-none text-right text-muted/60", "aria-hidden": "true" }, n)
+      : null,
+    ...tokens(n).map((tok, j) => h("span", { key: j, class: tok.cls }, tok.text)),
+  ])
 </script>
 
 <template>
@@ -290,19 +300,11 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       ><code class="block"><template
           v-for="(seg, s) in segments"
           :key="s"
-        ><!-- Plain lines --><template v-if="seg.kind === 'lines'"><span
+        ><!-- Plain lines --><template v-if="seg.kind === 'lines'"><CodeLine
               v-for="ln in seg.lines"
               :key="'l' + ln.n"
-              class="block min-h-[1.4em]"
-            ><span
-                v-if="lineNumbers"
-                class="mr-3 inline-block w-7 select-none text-right text-muted/60"
-                aria-hidden="true"
-              >{{ ln.n }}</span><span
-                v-for="(tok, j) in tokens(ln.n)"
-                :key="j"
-                :class="tok.cls"
-              >{{ tok.text }}</span></span></template><!-- Fold region --><template
+              :n="ln.n"
+            /></template><!-- Fold region --><template
             v-else
           ><button
               type="button"
@@ -318,19 +320,11 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
                 class="select-none text-muted/50"
               >{{ text.lines.replace("{n}", String(seg.lines.length)) }}</span></button><template
               v-if="openState[seg.id]"
-            ><span
+            ><CodeLine
                 v-for="ln in seg.lines"
                 :key="'f' + ln.n"
-                class="block min-h-[1.4em]"
-              ><span
-                  v-if="lineNumbers"
-                  class="mr-3 inline-block w-7 select-none text-right text-muted/60"
-                  aria-hidden="true"
-                >{{ ln.n }}</span><span
-                  v-for="(tok, j) in tokens(ln.n)"
-                  :key="j"
-                  :class="tok.cls"
-                >{{ tok.text }}</span></span></template></template></template></code></pre>
+                :n="ln.n"
+              /></template></template></template></code></pre>
     </div>
   </div>
 </template>

package/src/components/LpCollapse.vue

@@ -4,6 +4,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { nodeWindow } from "../composables/realm"
 /*
  * Shows and hides content by folding it open and shut: the box grows from
  * nothing to the content's own height (or width), and back. Anything under it
@@ -79,7 +80,7 @@ type Size = { height: number; width: number; opacity: number }
 
 function current(el: HTMLElement): Size {
   const rect = el.getBoundingClientRect()
-  return { height: rect.height, width: rect.width, opacity: Number(getComputedStyle(el).opacity) }
+  return { height: rect.height, width: rect.width, opacity: Number(nodeWindow(el).getComputedStyle(el).opacity) }
 }
 
 function natural(el: HTMLElement): Size {
@@ -99,7 +100,7 @@ function frame(size: Size): Keyframe {
 function fold(el: Element, opening: boolean, done: () => void) {
   const box = el as HTMLElement
   const previous = running.get(box)
-  if (prefersReducedMotion() || typeof box.animate !== "function") {
+  if (prefersReducedMotion(box.ownerDocument.defaultView ?? undefined) || typeof box.animate !== "function") {
     previous?.cancel()
     done()
     return
@@ -110,8 +111,8 @@ function fold(el: Element, opening: boolean, done: () => void) {
   const to = opening ? natural(box) : ZERO
   box.style.overflow = "hidden"
   const animation = box.animate([frame(from), frame(to)], {
-    duration: props.duration ?? durationToken("duration-medium"),
-    easing: easingToken("ease-emphasized"),
+    duration: props.duration ?? durationToken("duration-medium", undefined, box),
+    easing: easingToken("ease-emphasized", undefined, box),
     // Closing holds the folded frame until Vue hides the element, so it never flashes back open.
     fill: opening ? "none" : "forwards",
   })

package/src/components/LpColorPicker.vue

@@ -29,6 +29,8 @@
  * keeps the colours settled on in browser storage and offers them back above
  * the presets.
  */
+import { CONTROL_SIZE } from "./controlSize"
+import { clamp } from "../composables/clamp"
 import {
   PopoverAnchor,
   PopoverContent,
@@ -36,10 +38,10 @@ import {
   PopoverRoot,
   PopoverTrigger,
 } from "reka-ui"
-import { computed, nextTick, ref, watch } from "vue"
+import { computed, nextTick, ref, useAttrs, watch } from "vue"
 import { useKitStorage } from "../composables/usePersisted"
 import { prefersReducedMotion } from "../composables/easing"
-import { useFieldControl } from "../composables/useField"
+import { useFieldControl, mergeDescribedBy } from "../composables/useField"
 import {
   clampHsv,
   DEFAULT_SWATCHES,
@@ -277,7 +279,7 @@ function trackPointer(e: PointerEvent, onMove: (x: number, y: number) => void) {
   const at = (ev: PointerEvent) => {
     const x = rect.width === 0 ? 0 : (ev.clientX - rect.left) / rect.width
     const y = rect.height === 0 ? 0 : (ev.clientY - rect.top) / rect.height
-    onMove(Math.min(1, Math.max(0, x)), Math.min(1, Math.max(0, y)))
+    onMove(clamp(x, 0, 1), clamp(y, 0, 1))
   }
 
   el.setPointerCapture(e.pointerId)
@@ -388,11 +390,7 @@ function tickClass(value: string) {
 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",
-  lg: "h-(--size-control-lg) text-sm",
-}
+const triggerSize = CONTROL_SIZE
 
 // The colour the swatch/preview paints, alpha included so a translucent pick
 // reads as translucent against the checkerboard behind it.
@@ -624,6 +622,7 @@ const menuItems = computed<ContextMenuItemDef[]>(() => {
     : builtin
 })
 
+const attrs = useAttrs()
 const field = useFieldControl(() => ({
   wrapped: false,
   invalid: props.invalid,
@@ -674,7 +673,7 @@ const guardOutside = useOutsideGuard()
           :disabled="field.disabled"
           :aria-label="ariaLabel"
           :aria-invalid="field.invalid || undefined"
-          :aria-describedby="field.describedBy"
+          :aria-describedby="mergeDescribedBy(attrs['aria-describedby'], field.describedBy)"
           class="group inline-flex w-full items-center gap-2 rounded-control border bg-surface-soft px-2 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
           :class="[
             triggerSize[size],