@leavepulse/ui 0.77.3 → 0.78.0

package/src/components/LpSlider.vue

@@ -6,11 +6,12 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import SliderRail from "./SliderRail.vue"
 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"
-import { useFieldControl } from "../composables/useField"
+import { SliderRoot, SliderThumb } from "reka-ui"
+import { useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { SLIDER_GLIDE, useSliderDrag } from "./slider"
 
@@ -68,14 +69,12 @@ usePaletteControl({ disabled: () => field.value.disabled })
     @update:model-value="onUpdate"
     @value-commit="onCommit"
   >
-    <SliderTrack class="relative h-1.5 grow overflow-hidden rounded-pill bg-surface-soft">
-      <SliderRange class="absolute h-full rounded-pill bg-brand" />
-    </SliderTrack>
+    <SliderRail />
     <SliderThumb
       :id="field.id"
       :aria-label="ariaLabel"
       :aria-labelledby="ariaLabel ? undefined : field.labelId"
-      :aria-describedby="field.describedBy"
+      :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy)"
       class="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"
     />
   </SliderRoot>

package/src/components/LpSpotlight.vue

@@ -14,6 +14,7 @@ export default { inheritAttrs: false }
  * that is not a card. Mouse only; reduced motion draws nothing. The glow is
  * painted by `.lp-spotlight` in tokens/effects.css.
  */
+import { clamp } from "../composables/clamp"
 import { computed } from "vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useSpotlight } from "../composables/useSpotlight"
@@ -39,7 +40,7 @@ const { class: classes, attrs: rest } = useMergedAttrs(() => "lp-spotlight round
 
 const style = computed(() => ({
   "--lp-spot-size": `${props.size}px`,
-  "--lp-spot-strength": `${Math.min(100, Math.max(0, props.strength))}%`,
+  "--lp-spot-strength": `${clamp(props.strength, 0, 100)}%`,
   ...(props.color ? { "--lp-spot-color": props.color } : {}),
 }))
 </script>

package/src/components/LpSwitch.vue

@@ -9,7 +9,7 @@ export default { inheritAttrs: false }
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { computed, useId, useSlots } from "vue"
 import { SwitchRoot, SwitchThumb } from "reka-ui"
-import { useFieldControl } from "../composables/useField"
+import { mergeDescribedBy, useFieldControl } from "../composables/useField"
 import { useOptimisticToggle } from "../composables/useOptimisticToggle"
 import LpLoader from "./LpLoader.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
@@ -49,6 +49,8 @@ const emit = defineEmits<{
 
 const { pending, set } = useOptimisticToggle(() => props.action, emit)
 
+// A given default slot counts as the name whether or not it renders anything:
+// a slot that may come out empty leaves the switch unnamed, so pass `aria-label`.
 const slots = useSlots()
 const labelled = computed(() => Boolean(props.label || props.description || slots.default))
 
@@ -75,8 +77,8 @@ const field = useFieldControl(() => ({
   disabled: props.disabled,
 }))
 const descriptionId = `${useId()}-description`
-const describedBy = computed(
-  () => [props.description && labelled.value ? descriptionId : "", field.value.describedBy ?? ""].filter(Boolean).join(" ") || undefined,
+const describedBy = computed(() =>
+  mergeDescribedBy(rest.value["aria-describedby"], props.description && labelled.value ? descriptionId : undefined, field.value.describedBy),
 )
 
 function onUpdate(value: boolean) {