@leavepulse/ui 0.37.10 → 0.38.0

package/src/components/LpSwitch.vue

@@ -6,28 +6,73 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { computed, useSlots } from "vue"
 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",
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    disabled?: boolean
+    label?: string
+    /** Secondary line under the label. */
+    description?: string
+    /**
+     * Where the text sits. `end` (default) reads like LpCheckbox: switch, then
+     * text. `start` is the settings-row shape: text on the left, the switch
+     * pushed to the right edge of the row.
+     */
+    labelPosition?: "start" | "end"
+  }>(),
+  { labelPosition: "end" },
 )
+const emit = defineEmits<{ (e: "update:modelValue", value: boolean): void }>()
+
+const slots = useSlots()
+const labelled = computed(() => Boolean(props.label || props.description || slots.default))
+
+const TRACK =
+  "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"
+const THUMB =
+  "h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:w-5 group-data-[state=checked]:translate-x-4 group-data-[state=checked]:bg-ink-inverse group-data-[state=checked]:group-active:-translate-x-1 motion-reduce:group-active:w-3.5"
+
+// Bare, the switch is the root, so a consumer asking for a bigger track must not
+// have to depend on stylesheet order to get it. With text, the row is the root
+// and the consumer's class lays out the row, as on LpCheckbox.
+const { class: rootClass, attrs: rest } = useMergedAttrs(() => {
+  if (!labelled.value) return TRACK
+  return props.labelPosition === "start"
+    ? "flex w-full cursor-pointer items-center justify-between gap-3 text-sm text-ink"
+    : "inline-flex cursor-pointer items-center gap-2 text-sm text-ink"
+})
+
+function onUpdate(value: boolean) {
+  emit("update:modelValue", value)
+}
 </script>
 
 <template>
+  <label v-if="labelled" :class="[rootClass, disabled && 'cursor-not-allowed']" v-bind="rest">
+    <span v-if="labelPosition === 'start'" class="flex min-w-0 flex-col">
+      <slot>{{ label }}</slot>
+      <span v-if="description" class="text-xs text-muted">{{ description }}</span>
+    </span>
+    <SwitchRoot :model-value="modelValue" :disabled="disabled" :class="TRACK" @update:model-value="onUpdate">
+      <SwitchThumb :class="THUMB" />
+    </SwitchRoot>
+    <span v-if="labelPosition === 'end'" class="flex min-w-0 flex-col">
+      <slot>{{ label }}</slot>
+      <span v-if="description" class="text-xs text-muted">{{ description }}</span>
+    </span>
+  </label>
   <SwitchRoot
+    v-else
     :model-value="modelValue"
     :disabled="disabled"
     :class="rootClass"
     v-bind="rest"
-    @update:model-value="(v) => $emit('update:modelValue', v)"
+    @update:model-value="onUpdate"
   >
-    <SwitchThumb
-      class="h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:w-5 group-data-[state=checked]:translate-x-4 group-data-[state=checked]:bg-ink-inverse group-data-[state=checked]:group-active:-translate-x-1 motion-reduce:group-active:w-3.5"
-    />
+    <SwitchThumb :class="THUMB" />
   </SwitchRoot>
 </template>

package/src/tokens/tokens.css

@@ -522,6 +522,27 @@
   --scrim-opacity: 0.78;
 }
 
+/*
+ * Frosted overlay: a floating panel that lets the page show through, softened.
+ * For surfaces that float over everything and are read briefly (the command
+ * palette), where a hint of what lies beneath says "this is on top, the page
+ * is still there" better than a solid slab. The fill keeps enough opacity for
+ * text to read without the blur; where the blur does not composite
+ * (WebKitGTK, see above) the fill turns solid instead of leaving the page
+ * readable through it.
+ */
+.lp-glass-overlay {
+  background-color: color-mix(in srgb, var(--color-surface-raised) var(--glass-overlay-fill, 82%), transparent);
+  -webkit-backdrop-filter: blur(var(--glass-overlay-blur, 24px)) saturate(140%);
+  backdrop-filter: blur(var(--glass-overlay-blur, 24px)) saturate(140%);
+}
+
+:root[data-lp-no-backdrop] .lp-glass-overlay {
+  background-color: var(--color-surface-raised);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
 /* The overlay gradient rides above the base fill but under the content. */
 .lp-skin-panel::before {
   content: "";

package/dist/assets/LpCommandPalette-B-g1fa8r.css

@@ -1,16 +0,0 @@
-
-/* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-dbc1130a] {
-  animation: lp-cmd-in-dbc1130a 140ms ease-out both;
-}
-@keyframes lp-cmd-in-dbc1130a {
-from {
-    opacity: 0;
-    transform: translateY(3px);
-}
-}
-@media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-dbc1130a] {
-    animation: none;
-}
-}

package/dist/chunks/LpSwitch-xgnRU2k0.js

@@ -1,35 +0,0 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode } from "vue";
-import { SwitchRoot, SwitchThumb } from "reka-ui";
-import { useMergedAttrs } from "../composables/useMergedClass.js";
-const __default__ = { inheritAttrs: false };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  __name: "LpSwitch",
-  props: {
-    modelValue: { type: Boolean },
-    disabled: { type: Boolean }
-  },
-  emits: ["update:modelValue"],
-  setup(__props) {
-    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"
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(SwitchRoot), mergeProps({
-        "model-value": __props.modelValue,
-        disabled: __props.disabled,
-        class: unref(rootClass)
-      }, unref(rest), {
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => _ctx.$emit("update:modelValue", v))
-      }), {
-        default: withCtx(() => [
-          createVNode(unref(SwitchThumb), { class: "h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:w-5 group-data-[state=checked]:translate-x-4 group-data-[state=checked]:bg-ink-inverse group-data-[state=checked]:group-active:-translate-x-1 motion-reduce:group-active:w-3.5" })
-        ]),
-        _: 1
-      }, 16, ["model-value", "disabled", "class"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};