@leavepulse/ui 0.25.0 → 0.26.1

package/dist/assets/LpSkeleton-D7xU8IPV.css

@@ -0,0 +1,29 @@
+
+/*
+ * Unscoped: the items are written by the CONSUMER, inside the slot, so they
+ * carry no scope attribute of this component — a scoped rule could never reach
+ * them. Namespaced instead, and only ever applied under `.lp-skeleton`.
+ *
+ * One shared animation name means every item on the page pulses in phase: CSS
+ * animations are timed against the document, not against when each element
+ * mounted, so a skeleton that fills in progressively stays in step with itself.
+ */
+.lp-skeleton-item {
+  animation: lp-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Items nested anywhere inside a wrapper, at any depth. */
+.lp-skeleton .lp-skeleton-item {
+  animation: lp-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@keyframes lp-skeleton-pulse {
+50% {
+    opacity: 0.5;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-skeleton-item {
+    animation: none;
+    opacity: 0.75;
+}
+}

package/dist/chunks/LpSkeleton-DpXLDcQm.js

@@ -0,0 +1,34 @@
+import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+import '../assets/LpSkeleton-D7xU8IPV.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpSkeleton",
+  props: {
+    rounded: {}
+  },
+  setup(__props) {
+    const slots = useSlots();
+    const isBlock = computed(() => !slots.default);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "aria-hidden": "true",
+        class: normalizeClass(["lp-skeleton", [
+          // `rounded` describes the PLACEHOLDER's own shape, so it only applies to
+          // the bare form. A wrapper is invisible — rounding it would clip the
+          // layout inside without anything being drawn to justify the corner.
+          isBlock.value ? [
+            "lp-skeleton-item bg-surface-soft",
+            {
+              "rounded-control": __props.rounded === "control" || !__props.rounded,
+              "rounded-card": __props.rounded === "card",
+              "rounded-pill": __props.rounded === "pill"
+            }
+          ] : ""
+        ]])
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/components/LpSkeleton.vue.d.ts

@@ -1,6 +1,16 @@
 type __VLS_Props = {
     rounded?: "control" | "card" | "pill";
 };
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LpSkeleton.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSkeleton-eSFIo4kD.js";
+import { _ as _sfc_main } from "../chunks/LpSkeleton-DpXLDcQm.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -56,7 +56,7 @@ import { _ as _49 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _50 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default3 } from "./components/LpShortcutsDialog.vue.js";
 import { _ as _51 } from "./chunks/LpSidebar-7Vpy2IJc.js";
-import { _ as _52 } from "./chunks/LpSkeleton-eSFIo4kD.js";
+import { _ as _52 } from "./chunks/LpSkeleton-DpXLDcQm.js";
 import { _ as _53 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _54 } from "./chunks/LpSparkline-C6xQ2dwv.js";
 import { _ as _55 } from "./chunks/LpStat-CDanpzU0.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.25.0",
+  "version": "0.26.1",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpSkeleton.vue

@@ -1,16 +1,96 @@
 <script setup lang="ts">
-// Loading placeholder. Sizing comes from the consumer's classes (w-/h-).
+/*
+ * Loading placeholder, in two shapes.
+ *
+ * Bare, it is one pulsing block and the consumer's classes size it:
+ *
+ *   <LpSkeleton class="h-4 w-40" />
+ *
+ * Given content, it becomes a WRAPPER instead: it stops pulsing itself and
+ * lends the pulse to any `.lp-skeleton-item` inside it, however deeply nested.
+ *
+ *   <LpSkeleton class="space-y-3">
+ *     <div class="flex items-center gap-3">
+ *       <div class="lp-skeleton-item size-10 rounded-pill" />
+ *       <div class="lp-skeleton-item h-4 w-32" />
+ *     </div>
+ *   </LpSkeleton>
+ *
+ * The second form exists because a real skeleton is a LAYOUT, not a stack of
+ * bars: a profile header is an avatar beside two lines of different widths
+ * above a button. Expressed as one component per block, that is a dozen
+ * <LpSkeleton> tags whose grid has to be rebuilt by hand and kept in step with
+ * the markup it stands in for. As a wrapper, the skeleton can be the real
+ * markup with its content swapped for plain divs — same flex, same gaps, same
+ * responsive classes — so it keeps matching the thing it is standing in for.
+ *
+ * Consumers had already arrived at this and built it themselves; it belongs
+ * here, where every app gets it.
+ */
+import { computed, useSlots } from "vue"
+
 defineProps<{ rounded?: "control" | "card" | "pill" }>()
+
+const slots = useSlots()
+
+/* A wrapper must not pulse as a whole — the container would flash behind its
+   own items. Only the bare form is a placeholder in its own right. */
+const isBlock = computed(() => !slots.default)
 </script>
 
 <template>
   <div
     aria-hidden="true"
-    class="animate-pulse bg-surface-soft"
-    :class="{
-      'rounded-control': rounded === 'control' || !rounded,
-      'rounded-card': rounded === 'card',
-      'rounded-pill': rounded === 'pill',
-    }"
-  />
+    class="lp-skeleton"
+    :class="[
+      // `rounded` describes the PLACEHOLDER's own shape, so it only applies to
+      // the bare form. A wrapper is invisible — rounding it would clip the
+      // layout inside without anything being drawn to justify the corner.
+      isBlock
+        ? [
+            'lp-skeleton-item bg-surface-soft',
+            {
+              'rounded-control': rounded === 'control' || !rounded,
+              'rounded-card': rounded === 'card',
+              'rounded-pill': rounded === 'pill',
+            },
+          ]
+        : '',
+    ]"
+  >
+    <slot />
+  </div>
 </template>
+
+<style>
+/*
+ * Unscoped: the items are written by the CONSUMER, inside the slot, so they
+ * carry no scope attribute of this component — a scoped rule could never reach
+ * them. Namespaced instead, and only ever applied under `.lp-skeleton`.
+ *
+ * One shared animation name means every item on the page pulses in phase: CSS
+ * animations are timed against the document, not against when each element
+ * mounted, so a skeleton that fills in progressively stays in step with itself.
+ */
+.lp-skeleton-item {
+  animation: lp-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Items nested anywhere inside a wrapper, at any depth. */
+.lp-skeleton .lp-skeleton-item {
+  animation: lp-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes lp-skeleton-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lp-skeleton-item {
+    animation: none;
+    opacity: 0.75;
+  }
+}
+</style>

package/dist/chunks/LpSkeleton-eSFIo4kD.js

@@ -1,22 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass } from "vue";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpSkeleton",
-  props: {
-    rounded: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        "aria-hidden": "true",
-        class: normalizeClass(["animate-pulse bg-surface-soft", {
-          "rounded-control": __props.rounded === "control" || !__props.rounded,
-          "rounded-card": __props.rounded === "card",
-          "rounded-pill": __props.rounded === "pill"
-        }])
-      }, null, 2);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};