@leavepulse/ui 0.31.1 → 0.32.0

package/src/components/LpSlider.vue

@@ -1,7 +1,15 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 // 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"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
@@ -29,6 +37,11 @@ function onUpdate(v: number[] | undefined) {
 function onCommit(v: number[] | undefined) {
   if (v && v.length) emit("change", v[0])
 }
+
+// A slider is full-width by default; putting one in a toolbar means constraining it, and a fixed h-5 has to yield to a denser row.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55",
+)
 </script>
 
 <template>
@@ -38,7 +51,8 @@ function onCommit(v: number[] | undefined) {
     :max="max"
     :step="step"
     :disabled="disabled"
-    class="relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55"
+    :class="rootClass"
+    v-bind="rest"
     @update:model-value="onUpdate"
     @value-commit="onCommit"
   >

package/src/components/LpStat.vue

@@ -1,9 +1,17 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 // Stat tile: dot + caps label, big mono value, optional delta/trend badge and a
 // subtitle. A product pattern, fully token-driven — re-skins with the theme.
 import { computed } from "vue"
 import LpIcon from "./LpIcon.vue"
 import LpNumberFlow from "./LpNumberFlow.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
@@ -86,10 +94,17 @@ const deltaDecimals = computed(() => {
   const [, fraction] = String(props.delta).split(".")
   return Math.min(fraction?.length ?? 0, 4)
 })
+
+// A stat tile spaces its label and value on a fixed gap; a dense KPI row needs that tighter.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex flex-col gap-2",
+)
 </script>
 
 <template>
-  <div class="flex flex-col gap-2">
+  <div
+    :class="rootClass"
+    v-bind="rest">
     <div class="flex items-center gap-2">
       <span v-if="online" class="size-1.5 rounded-full bg-action" />
       <LpIcon v-if="icon" :name="icon" :size="14" class="text-muted" />

package/src/components/LpStepper.vue

@@ -1,6 +1,14 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 import { computed } from "vue"
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 export interface Step {
   label: string
@@ -38,10 +46,17 @@ function isCompleted(step: Step, i: number): boolean {
 function isCurrent(i: number): boolean {
   return i === currentIndex.value
 }
+
+// The stepper spaces its steps evenly; a compact wizard header needs that spacing under the consumer's control.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex items-center gap-2",
+)
 </script>
 
 <template>
-  <ol class="flex items-center gap-2">
+  <ol
+    :class="rootClass"
+    v-bind="rest">
     <li
       v-for="(step, i) in steps"
       :key="step.key ?? i"

package/src/components/LpSwitch.vue

@@ -1,15 +1,29 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 import { SwitchRoot, SwitchThumb } from "reka-ui"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 defineProps<{ modelValue?: boolean; disabled?: boolean }>()
 defineEmits<{ (e: "update:modelValue", value: boolean): void }>()
+
+// A switch has a fixed track size, so a consumer asking for a bigger one must not have to depend on stylesheet order to get it.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "group inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55",
+)
 </script>
 
 <template>
   <SwitchRoot
     :model-value="modelValue"
     :disabled="disabled"
-    class="group inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"
+    :class="rootClass"
+    v-bind="rest"
     @update:model-value="(v) => $emit('update:modelValue', v)"
   >
     <SwitchThumb

package/src/components/LpUptimeBar.vue

@@ -1,8 +1,16 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 import { computed, ref } from "vue"
 import LpNumberFlow from "./LpNumberFlow.vue"
 import LpRollingText from "./LpRollingText.vue"
 import LpTooltip from "./LpTooltip.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 export type UptimeStatus = "operational" | "degraded" | "down" | "maintenance" | "empty"
 
@@ -115,10 +123,17 @@ const uptimeDecimals = computed(() => {
   const trimmed = Number(v.toFixed(2))
   return Number.isInteger(trimmed) ? 0 : String(trimmed).split(".")[1].length
 })
+
+// The bar sets its own gap between the strip and its caption, which a compact status row has to close.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex flex-col gap-1.5",
+)
 </script>
 
 <template>
-  <div class="flex flex-col gap-1.5">
+  <div
+    :class="rootClass"
+    v-bind="rest">
     <div v-if="title" class="text-xs">
       <span class="font-medium text-ink">{{ title }}</span>
     </div>

package/src/composables/useMergedClass.ts

@@ -46,6 +46,36 @@ export function useMergedClass(
   return computed(() => cn(toValue(own), attrs.class as string | undefined) ?? "")
 }
 
+/**
+ * `useMergedClass` plus the rest of `$attrs`, for the common `inheritAttrs:
+ * false` shape: bind `class` and `attrs` and the consumer's `class` lands once,
+ * merged, while ids, handlers and aria-* still reach the element.
+ *
+ * ```ts
+ * const { class: rootClass, attrs: rest } = useMergedAttrs(() => card({ padded }))
+ * ```
+ * ```vue
+ * <div :class="rootClass" v-bind="rest">
+ * ```
+ *
+ * Binding the raw `$attrs` alongside a merged class is the bug this avoids:
+ * Vue appends that second `class` to the merged one, and stylesheet order —
+ * not the caller — decides which wins.
+ */
+export function useMergedAttrs(own: MaybeRefOrGetter<string | undefined>): {
+  class: ComputedRef<string>
+  attrs: ComputedRef<Record<string, unknown>>
+} {
+  const attrs = useAttrs()
+  return {
+    class: useMergedClass(own),
+    attrs: computed(() => {
+      const { class: _omitted, ...rest } = attrs
+      return rest
+    }),
+  }
+}
+
 /**
  * The same merge as a plain function, for the places that already have both
  * strings in hand and do not need the attrs lookup — a render helper, or a

package/src/index.ts

@@ -103,6 +103,7 @@ export { fileNameOf } from "./components/lightbox"
 export { default as LpLink } from "./components/LpLink.vue"
 export { default as LpLogViewer } from "./components/LpLogViewer.vue"
 export type { LogLevel, LogLine } from "./components/LpLogViewer.vue"
+export { default as LpMediaGallery } from "./components/LpMediaGallery.vue"
 export { default as LpModal } from "./components/LpModal.vue"
 export { default as LpNotificationBell } from "./components/LpNotificationBell.vue"
 export type {
@@ -227,6 +228,7 @@ export { useClipboard } from "./composables/useClipboard"
 export type { CopyOptions, UseClipboard } from "./composables/useClipboard"
 export { useHotkeys, isAppleKeyboard, appleModifierLabel } from "./composables/useHotkeys"
 export type { HotkeyBinding } from "./composables/useHotkeys"
+export { useMergedClass, useMergedAttrs, mergeClass } from "./composables/useMergedClass"
 export { useInputFilter } from "./composables/useInputFilter"
 export type { UseInputFilterOptions } from "./composables/useInputFilter"
 export { easeOut, easeTravel, easingToken, prefersReducedMotion } from "./composables/easing"

package/src/tokens/tokens.css

@@ -555,6 +555,35 @@
     var(--lp-glow-spread-bottom);
 }
 
+/*
+ * Accent stripe down a card's leading edge (LpCard's `accent`).
+ *
+ * Drawn as an inset box-shadow rather than a border or a positioned child,
+ * because those two cannot do the job here:
+ *
+ * - A `border-left` occupies layout. It pushes the content 3px inward, so an
+ *   accented card and a plain one in the same list no longer agree on where
+ *   their text starts — measured 23px against 21px. Compensating in the
+ *   padding leaves the card fighting `--surface-border-width`, which the skin
+ *   axis changes per theme.
+ * - An absolutely positioned child collapses: `.lp-skin-panel > *` gives every
+ *   direct child `position: relative`, which takes `inset-y-0` away from the
+ *   stripe and paints it at zero width. `::before` is not free either — the
+ *   skin painter already uses it for the overlay gradient.
+ *
+ * An inset shadow takes no space, follows `border-radius` round the corners on
+ * its own, and needs nothing of the content. It composes rather than replaces:
+ * the skin painter's own inset + drop shadows follow the stripe in the same
+ * list, so an accented `raised` card keeps its elevation, and `interactive`
+ * still swaps `--surface-panel-shadow` underneath on hover.
+ */
+.lp-card-accent {
+  box-shadow:
+    inset var(--lp-card-accent-width, 3px) 0 0 0 var(--lp-card-accent, transparent),
+    var(--surface-panel-inset),
+    var(--surface-panel-shadow);
+}
+
 /* ── circular theme reveal (View Transitions) ────
    applyThemeWithTransition() snapshots the page, swaps the theme tokens, then
    shrinks a clip-path circle in the OLD snapshot from the toggle's position,