@leavepulse/ui 0.27.0 → 0.28.0

package/dist/chunks/{LpCard-BmrTvWOe.js → LpCard-gu11ZmSt.js}

@@ -14,7 +14,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const card = tv({
-      base: "rounded-card border bg-surface-raised",
+      // break-words: a card is where text with no spaces in it ends up (a
+      // hostname, a URL, a container id, a stack frame), and an unbreakable run
+      // otherwise pushes straight out through the border, over whatever sits
+      // beside it. Set here rather than on the components that go inside, so that
+      // a paragraph written by hand behaves the same as one a kit component
+      // renders: two lines that look identical must not wrap differently.
+      // Anything that genuinely must not break (a code block, a log line) sets its
+      // own overflow and scrolls instead.
+      base: "rounded-card border bg-surface-raised break-words",
       variants: {
         variant: {
           // raised opts into the skin painter (.lp-skin-panel) so it follows the

package/dist/chunks/{LpLink-Bu01SZzB.js → LpLink-BHZ1CLlF.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from "vue";
-const revealClass = "relative after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-[var(--duration-medium)] hover:after:scale-x-100 focus-visible:after:scale-x-100";
+const REVEAL_BASE = "relative after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-[var(--duration-medium)] after:ease-[var(--ease-emphasized)] motion-reduce:after:transition-none";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpLink",
   props: {
@@ -8,7 +8,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     muted: { type: Boolean },
     tone: {},
     as: { default: "a" },
-    variant: { default: "default" }
+    variant: { default: "default" },
+    revealOn: { default: "self" }
   },
   setup(__props) {
     const props = __props;
@@ -28,6 +29,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           return "text-brand hover:text-brand-hover";
       }
     });
+    const REVEAL_TRIGGER = {
+      self: "hover:after:scale-x-100 focus-visible:after:scale-x-100",
+      group: "group-hover:after:scale-x-100 group-focus-visible:after:scale-x-100 focus-visible:after:scale-x-100"
+    };
+    const revealClass = computed(
+      () => `${REVEAL_BASE} ${REVEAL_TRIGGER[props.revealOn]}`
+    );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
         href: isAnchor.value ? __props.href : void 0,
@@ -35,7 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rel: rel.value,
         class: normalizeClass(["inline-flex items-center gap-1 underline-offset-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring", [
           colorClass.value,
-          __props.variant === "reveal" ? revealClass : __props.variant === "underline" ? "underline decoration-current/40 hover:decoration-current" : "hover:underline"
+          __props.variant === "reveal" ? revealClass.value : __props.variant === "underline" ? "underline decoration-current/40 hover:decoration-current" : "hover:underline"
         ]])
       }, {
         default: withCtx(() => [

package/dist/chunks/{LpSection-BIvwZyE1.js → LpSection-aM6J_u51.js}

@@ -1,7 +1,7 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
 import { tv } from "tailwind-variants";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-const _hoisted_1 = { class: "min-w-0" };
+const _hoisted_1 = { class: "min-w-0 flex-1 break-words" };
 const _hoisted_2 = { class: "flex flex-wrap items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpSection",
@@ -15,14 +15,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const section = tv({
       slots: {
-        // items-start, not items-center: once a description is present the actions
-        // must stay level with the TITLE, not drift to the middle of the block.
-        root: "flex flex-wrap items-start justify-between gap-x-4 gap-y-2",
+        root: "flex flex-wrap justify-between gap-x-4 gap-y-2",
         title: "font-semibold text-ink",
         description: "mt-1 text-sm text-muted",
         actions: "flex shrink-0 flex-wrap items-center gap-2"
       },
       variants: {
+        // Where the actions sit against a two-line block. With a description the
+        // heading is the top line, so the actions belong level with THAT rather
+        // than floating to the middle of the pair. With no description there is
+        // only one line, and pinning to the top instead misaligns anything taller
+        // than the text (an input, a segmented control) by a couple of pixels.
+        described: {
+          true: { root: "items-start" },
+          false: { root: "items-center" }
+        },
         level: {
           sm: { title: "text-sm" },
           md: { title: "text-base" },
@@ -30,10 +37,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           xl: { title: "text-xl tracking-tight" }
         }
       },
-      defaultVariants: { level: "md" }
+      defaultVariants: { level: "md", described: false }
     });
     const props = __props;
-    const classes = computed(() => section({ level: props.level }));
+    const slots = useSlots();
+    const hasDescription = computed(() => !!props.description || !!slots.description);
+    const classes = computed(
+      () => section({ level: props.level, described: hasDescription.value })
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(classes.value.root())
@@ -58,10 +69,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, 8, ["class"])),
             renderSlot(_ctx.$slots, "meta")
           ]),
-          __props.description ? (openBlock(), createElementBlock("p", {
+          hasDescription.value ? (openBlock(), createElementBlock("p", {
             key: 0,
             class: normalizeClass(classes.value.description())
-          }, toDisplayString(__props.description), 3)) : createCommentVNode("", true)
+          }, [
+            renderSlot(_ctx.$slots, "description", {}, () => [
+              createTextVNode(toDisplayString(__props.description), 1)
+            ])
+          ], 2)) : createCommentVNode("", true)
         ]),
         _ctx.$slots.actions ? (openBlock(), createElementBlock("div", {
           key: 0,

package/dist/chunks/{LpSkeleton-DpXLDcQm.js → LpSkeleton-CTI-vBgW.js}

@@ -12,7 +12,7 @@ import '../assets/LpSkeleton-D7xU8IPV.css';const _sfc_main = /* @__PURE__ */ def
         "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
+          // the bare form. A wrapper is invisible, so rounding it would clip the
           // layout inside without anything being drawn to justify the corner.
           isBlock.value ? [
             "lp-skeleton-item bg-surface-soft",

package/dist/components/LpCard.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpCard-BmrTvWOe.js";
+import { _ as _sfc_main } from "../chunks/LpCard-gu11ZmSt.js";
 export {
   _sfc_main as default
 };

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

@@ -28,6 +28,16 @@ type __VLS_Props = {
      *   good for inline prose links and nav items that want a bit of motion.
      */
     variant?: "default" | "underline" | "reveal";
+    /**
+     * Which hover draws the `reveal` bar.
+     *
+     * "self"  — the link's own hover (default), for an inline prose link.
+     * "group" — the hover of an ancestor marked `group`, for a link inside a
+     *   row or card that is itself the click target. The row lights up and the
+     *   name sweeps with it, instead of the bar waiting for the pointer to
+     *   cross the text exactly.
+     */
+    revealOn?: "self" | "group";
 };
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
@@ -36,6 +46,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     as: string | Component;
     variant: "default" | "underline" | "reveal";
+    revealOn: "self" | "group";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/LpLink.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLink-Bu01SZzB.js";
+import { _ as _sfc_main } from "../chunks/LpLink-BHZ1CLlF.js";
 export {
   _sfc_main as default
 };

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

@@ -1,5 +1,13 @@
 import { VariantProps } from 'tailwind-variants';
 declare const section: import('tailwind-variants').TVReturnType<{
+    described: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
     level: {
         sm: {
             title: string;
@@ -20,6 +28,14 @@ declare const section: import('tailwind-variants').TVReturnType<{
     description: string;
     actions: string;
 }, undefined, {
+    described: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
     level: {
         sm: {
             title: string;
@@ -40,6 +56,14 @@ declare const section: import('tailwind-variants').TVReturnType<{
     description: string;
     actions: string;
 }, import('tailwind-variants').TVReturnType<{
+    described: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
     level: {
         sm: {
             title: string;
@@ -67,7 +91,7 @@ type __VLS_Props = {
     description?: string;
     /** Iconify name shown before the title, e.g. "lucide:server". */
     icon?: string;
-    /** Visual size. Independent of `as` — see the note above. */
+    /** Visual size. Independent of `as`, see the note above. */
     level?: SectionVariants["level"];
     /** The heading element to render. Pick it for the document outline. */
     as?: "h1" | "h2" | "h3" | "h4" | "p";
@@ -75,9 +99,11 @@ type __VLS_Props = {
 type __VLS_Slots = {
     /** Title markup, when a plain string is not enough. */
     title?: () => unknown;
+    /** Description markup, when a plain string is not enough. */
+    description?: () => unknown;
     /** Right-aligned controls: buttons, filters, a count. */
     actions?: () => unknown;
-    /** Extra content beside the title — a badge, a count, a status dot. */
+    /** Extra content beside the title: a badge, a count, a status dot. */
     meta?: () => unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {

package/dist/components/LpSection.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSection-BIvwZyE1.js";
+import { _ as _sfc_main } from "../chunks/LpSection-aM6J_u51.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSkeleton.vue.js

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

package/dist/index.js

@@ -10,7 +10,7 @@ import { _ as _8 } from "./chunks/LpBadge-BPodVcJa.js";
 import { _ as _9 } from "./chunks/LpBreadcrumbs-5uvViCXi.js";
 import { _ as _10 } from "./chunks/LpButton-5VXXCjwF.js";
 import { _ as _11 } from "./chunks/LpCalendar-B7ZL0ty3.js";
-import { _ as _12 } from "./chunks/LpCard-BmrTvWOe.js";
+import { _ as _12 } from "./chunks/LpCard-gu11ZmSt.js";
 import { _ as _13 } from "./chunks/LpChart-tNXs1ttr.js";
 import { CHART_PALETTE, axisTicks, formatTick, niceScale, resolveSlices } from "./components/chart.js";
 import { _ as _14 } from "./chunks/LpCheckbox-BO0zuuPh.js";
@@ -32,7 +32,7 @@ import { _ as _27 } from "./chunks/LpInfraNode-qIL3l7IO.js";
 import { _ as _28 } from "./chunks/LpInput-jwqXlAy0.js";
 import { _ as _29 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
-import { _ as _30 } from "./chunks/LpLink-Bu01SZzB.js";
+import { _ as _30 } from "./chunks/LpLink-BHZ1CLlF.js";
 import { _ as _31 } from "./chunks/LpLogViewer-CcQ3s3Fp.js";
 import { _ as _32 } from "./chunks/LpModal-D_o-56To.js";
 import { _ as _33 } from "./chunks/LpNotificationBell-Dvu-b6Vn.js";
@@ -51,13 +51,13 @@ import { _ as _44 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
 import { _ as _45 } from "./chunks/LpRollingText-CM5gkSeF.js";
 import { _ as _46 } from "./chunks/LpScrollArea-D8xyKXcF.js";
 import { _ as _47 } from "./chunks/LpSegmented-BmpanyAo.js";
-import { _ as _48 } from "./chunks/LpSection-BIvwZyE1.js";
+import { _ as _48 } from "./chunks/LpSection-aM6J_u51.js";
 import { _ as _49 } from "./chunks/LpSelect-Cw8-gL5F.js";
 import { _ as _50 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _51 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default3 } from "./components/LpShortcutsDialog.vue.js";
 import { _ as _52 } from "./chunks/LpSidebar-7Vpy2IJc.js";
-import { _ as _53 } from "./chunks/LpSkeleton-DpXLDcQm.js";
+import { _ as _53 } from "./chunks/LpSkeleton-CTI-vBgW.js";
 import { _ as _54 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _55 } from "./chunks/LpSparkline-C6xQ2dwv.js";
 import { _ as _56 } from "./chunks/LpStat-CDanpzU0.js";

package/package.json

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

package/src/components/LpCard.vue

@@ -11,7 +11,15 @@ import { computed } from "vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 
 const card = tv({
-  base: "rounded-card border bg-surface-raised",
+  // break-words: a card is where text with no spaces in it ends up (a
+  // hostname, a URL, a container id, a stack frame), and an unbreakable run
+  // otherwise pushes straight out through the border, over whatever sits
+  // beside it. Set here rather than on the components that go inside, so that
+  // a paragraph written by hand behaves the same as one a kit component
+  // renders: two lines that look identical must not wrap differently.
+  // Anything that genuinely must not break (a code block, a log line) sets its
+  // own overflow and scrolls instead.
+  base: "rounded-card border bg-surface-raised break-words",
   variants: {
     variant: {
       // raised opts into the skin painter (.lp-skin-panel) so it follows the

package/src/components/LpLink.vue

@@ -31,8 +31,18 @@ const props = withDefaults(
      *   good for inline prose links and nav items that want a bit of motion.
      */
     variant?: "default" | "underline" | "reveal"
+    /**
+     * Which hover draws the `reveal` bar.
+     *
+     * "self"  — the link's own hover (default), for an inline prose link.
+     * "group" — the hover of an ancestor marked `group`, for a link inside a
+     *   row or card that is itself the click target. The row lights up and the
+     *   name sweeps with it, instead of the bar waiting for the pointer to
+     *   cross the text exactly.
+     */
+    revealOn?: "self" | "group"
   }>(),
-  { variant: "default", as: "a" },
+  { variant: "default", as: "a", revealOn: "self" },
 )
 
 // A router link component owns its destination through its own prop (`to`),
@@ -61,8 +71,29 @@ const colorClass = computed(() => {
 // but scaled to 0 on the x-axis from the left, growing to 1 on hover/focus. The
 // bar colour follows the link colour (brand, or ink when muted) so it re-skins
 // with the theme.
-const revealClass =
-  "relative after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-[var(--duration-medium)] hover:after:scale-x-100 focus-visible:after:scale-x-100"
+//
+// motion-reduce drops the travel rather than the feedback: the bar still
+// appears, it just stops sweeping. A link that gave no hover response at all
+// would be worse for the people that setting is for, not better.
+const REVEAL_BASE =
+  "relative after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-[var(--duration-medium)] after:ease-[var(--ease-emphasized)] motion-reduce:after:transition-none"
+
+// Whose hover draws the bar. `self` is the ordinary inline link. `group` is for
+// a link inside a row, card or tile that is ITSELF the click target: the whole
+// row highlights, and the name in it should sweep with that rather than only
+// when the pointer happens to cross the few characters of text. Tailwind needs
+// the `group` class on that ancestor.
+//
+// Both spelled out as whole literals: the consuming app scans this file as
+// TEXT, so a class assembled at runtime is one it never emits.
+const REVEAL_TRIGGER = {
+  self: "hover:after:scale-x-100 focus-visible:after:scale-x-100",
+  group: "group-hover:after:scale-x-100 group-focus-visible:after:scale-x-100 focus-visible:after:scale-x-100",
+} as const
+
+const revealClass = computed(
+  () => `${REVEAL_BASE} ${REVEAL_TRIGGER[props.revealOn]}`,
+)
 </script>
 
 <template>

package/src/components/LpSection.vue

@@ -9,8 +9,8 @@
  *
  * This is the block every app rebuilt: ~140 hand-written headings across the
  * three of them, each picking its own size, its own gap, its own alignment.
- * LeaveHosting had already extracted its own `PageHeader.vue` — same title,
- * same description, same actions slot — which is the clearest evidence the
+ * LeaveHosting had already extracted its own `PageHeader.vue` with the same
+ * title, description and actions slot, which is the clearest evidence the
  * shape is shared rather than one app's habit.
  *
  * What it deliberately does NOT do:
@@ -19,7 +19,7 @@
  *   the cabinet they sit inside `glass rounded-3xl` blocks and, more often,
  *   directly on the page. Owning a border here would fight two of the three.
  * - It has no icon slot of its own beyond `icon`. The panel coloured each
- *   heading's icon from the raw palette — amber beside rose beside sky — in
+ *   heading's icon from the raw palette (amber beside rose beside sky) in
  *   pages where none of those states were amber, rose or blue. One muted
  *   colour, or none.
  *
@@ -34,14 +34,21 @@ import LpIcon from "./LpIcon.vue"
 
 const section = tv({
   slots: {
-    // items-start, not items-center: once a description is present the actions
-    // must stay level with the TITLE, not drift to the middle of the block.
-    root: "flex flex-wrap items-start justify-between gap-x-4 gap-y-2",
+    root: "flex flex-wrap justify-between gap-x-4 gap-y-2",
     title: "font-semibold text-ink",
     description: "mt-1 text-sm text-muted",
     actions: "flex shrink-0 flex-wrap items-center gap-2",
   },
   variants: {
+    // Where the actions sit against a two-line block. With a description the
+    // heading is the top line, so the actions belong level with THAT rather
+    // than floating to the middle of the pair. With no description there is
+    // only one line, and pinning to the top instead misaligns anything taller
+    // than the text (an input, a segmented control) by a couple of pixels.
+    described: {
+      true: { root: "items-start" },
+      false: { root: "items-center" },
+    },
     level: {
       sm: { title: "text-sm" },
       md: { title: "text-base" },
@@ -49,7 +56,7 @@ const section = tv({
       xl: { title: "text-xl tracking-tight" },
     },
   },
-  defaultVariants: { level: "md" },
+  defaultVariants: { level: "md", described: false },
 })
 
 type SectionVariants = VariantProps<typeof section>
@@ -61,7 +68,7 @@ const props = withDefaults(
     description?: string
     /** Iconify name shown before the title, e.g. "lucide:server". */
     icon?: string
-    /** Visual size. Independent of `as` — see the note above. */
+    /** Visual size. Independent of `as`, see the note above. */
     level?: SectionVariants["level"]
     /** The heading element to render. Pick it for the document outline. */
     as?: "h1" | "h2" | "h3" | "h4" | "p"
@@ -69,21 +76,48 @@ const props = withDefaults(
   { level: "md", as: "h2" },
 )
 
-defineSlots<{
+/*
+ * `title` and `description` each come in two forms, and they are one opening
+ * rather than two: the prop is what the slot renders when nothing fills it.
+ * Both are a plain string nine times out of ten (usually a t() call), and
+ * making those pass through a <template> would tax the common case for the
+ * sake of the rare one. But the rare one is real (a name with an id after it,
+ * a description carrying a link), and without the slot it is what sends people
+ * back to hand-writing the block the component exists to standardise.
+ */
+const slots = defineSlots<{
   /** Title markup, when a plain string is not enough. */
   title?: () => unknown
+  /** Description markup, when a plain string is not enough. */
+  description?: () => unknown
   /** Right-aligned controls: buttons, filters, a count. */
   actions?: () => unknown
-  /** Extra content beside the title — a badge, a count, a status dot. */
+  /** Extra content beside the title: a badge, a count, a status dot. */
   meta?: () => unknown
 }>()
 
-const classes = computed(() => section({ level: props.level }))
+// Either form counts as "described": the actions align against a two-line
+// block whether the second line came from the prop or the slot.
+const hasDescription = computed(() => !!props.description || !!slots.description)
+
+const classes = computed(() =>
+  section({ level: props.level, described: hasDescription.value }),
+)
 </script>
 
 <template>
   <div :class="classes.root()">
-    <div class="min-w-0">
+    <!-- `flex-1` matters as much as `min-w-0`: without it a long description
+         stretches this column across the whole row, and the actions wrap to a
+         line of their own even when they would have fitted beside the title.
+         With it the column takes the space that is left and shrinks first.
+
+         `break-words` covers the title AND the description in one place. Both
+         routinely carry something with no spaces in it (a hostname, a URL, a
+         container id), and an unbreakable run pushes straight out through the
+         side of whatever card the section sits in. min-w-0 lets the column
+         shrink; only this lets the text inside it give way. -->
+    <div class="min-w-0 flex-1 break-words">
       <div class="flex flex-wrap items-center gap-2">
         <LpIcon v-if="icon" :name="icon" :size="16" class="shrink-0 text-muted" />
         <component :is="as" :class="classes.title()">
@@ -91,7 +125,9 @@ const classes = computed(() => section({ level: props.level }))
         </component>
         <slot name="meta" />
       </div>
-      <p v-if="description" :class="classes.description()">{{ description }}</p>
+      <p v-if="hasDescription" :class="classes.description()">
+        <slot name="description">{{ description }}</slot>
+      </p>
     </div>
 
     <div v-if="$slots.actions" :class="classes.actions()">

package/src/components/LpSkeleton.vue

@@ -44,7 +44,7 @@ const isBlock = computed(() => !slots.default)
     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
+      // the bare form. A wrapper is invisible, so rounding it would clip the
       // layout inside without anything being drawn to justify the corner.
       isBlock
         ? [