@leavepulse/ui 0.26.1 → 0.27.1

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/LpSection-aM6J_u51.js

@@ -0,0 +1,93 @@
+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 flex-1 break-words" };
+const _hoisted_2 = { class: "flex flex-wrap items-center gap-2" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpSection",
+  props: {
+    title: {},
+    description: {},
+    icon: {},
+    level: { default: "md" },
+    as: { default: "h2" }
+  },
+  setup(__props) {
+    const section = tv({
+      slots: {
+        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" },
+          lg: { title: "text-lg tracking-tight" },
+          xl: { title: "text-xl tracking-tight" }
+        }
+      },
+      defaultVariants: { level: "md", described: false }
+    });
+    const props = __props;
+    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())
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              name: __props.icon,
+              size: 16,
+              class: "shrink-0 text-muted"
+            }, null, 8, ["name"])) : createCommentVNode("", true),
+            (openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+              class: normalizeClass(classes.value.title())
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "title", {}, () => [
+                  createTextVNode(toDisplayString(__props.title), 1)
+                ])
+              ]),
+              _: 3
+            }, 8, ["class"])),
+            renderSlot(_ctx.$slots, "meta")
+          ]),
+          hasDescription.value ? (openBlock(), createElementBlock("p", {
+            key: 0,
+            class: normalizeClass(classes.value.description())
+          }, [
+            renderSlot(_ctx.$slots, "description", {}, () => [
+              createTextVNode(toDisplayString(__props.description), 1)
+            ])
+          ], 2)) : createCommentVNode("", true)
+        ]),
+        _ctx.$slots.actions ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(classes.value.actions())
+        }, [
+          renderSlot(_ctx.$slots, "actions")
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

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/component-names.d.ts

@@ -1 +1 @@
-export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpModal", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRollingText", "LpScrollArea", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];
+export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpModal", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];

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/LpSection.vue.d.ts

@@ -0,0 +1,120 @@
+import { VariantProps } from 'tailwind-variants';
+declare const section: import('tailwind-variants').TVReturnType<{
+    described: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+    level: {
+        sm: {
+            title: string;
+        };
+        md: {
+            title: string;
+        };
+        lg: {
+            title: string;
+        };
+        xl: {
+            title: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    description: string;
+    actions: string;
+}, undefined, {
+    described: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+    level: {
+        sm: {
+            title: string;
+        };
+        md: {
+            title: string;
+        };
+        lg: {
+            title: string;
+        };
+        xl: {
+            title: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    description: string;
+    actions: string;
+}, import('tailwind-variants').TVReturnType<{
+    described: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+    level: {
+        sm: {
+            title: string;
+        };
+        md: {
+            title: string;
+        };
+        lg: {
+            title: string;
+        };
+        xl: {
+            title: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    description: string;
+    actions: string;
+}, undefined, unknown, unknown, undefined>>;
+type SectionVariants = VariantProps<typeof section>;
+type __VLS_Props = {
+    title?: string;
+    /** One line under the title. */
+    description?: string;
+    /** Iconify name shown before the title, e.g. "lucide:server". */
+    icon?: string;
+    /** 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";
+};
+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. */
+    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<{}>, {
+    as: "h1" | "h2" | "h3" | "h4" | "p";
+    level: "sm" | "md" | "lg" | "xl";
+}, {}, {}, {}, 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/LpSection.vue.js

@@ -0,0 +1,4 @@
+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.d.ts

@@ -73,6 +73,7 @@ export { default as LpRollingText } from './components/LpRollingText.vue';
 export { default as LpScrollArea } from './components/LpScrollArea.vue';
 export { default as LpSegmented } from './components/LpSegmented.vue';
 export type { SegmentedOption } from './components/LpSegmented.vue';
+export { default as LpSection } from './components/LpSection.vue';
 export { default as LpSelect } from './components/LpSelect.vue';
 export type { SelectOption, SelectValue } from './components/LpSelect.vue';
 export { default as LpServiceNode } from './components/LpServiceNode.vue';

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";
@@ -51,28 +51,29 @@ 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/LpSelect-Cw8-gL5F.js";
-import { _ as _49 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
-import { _ as _50 } from "./chunks/LpShift-DXNsauQZ.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 _51 } from "./chunks/LpSidebar-7Vpy2IJc.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";
-import { _ as _56 } from "./chunks/LpStepper-Wtl-6nUh.js";
-import { _ as _57 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { _ as _58 } from "./chunks/LpTable-DTj52qlg.js";
-import { _ as _59 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
-import { _ as _60 } from "./chunks/LpTabs-Cefe_lys.js";
-import { _ as _61 } from "./chunks/LpTextarea-1ENb3ZAO.js";
+import { _ as _52 } from "./chunks/LpSidebar-7Vpy2IJc.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";
+import { _ as _57 } from "./chunks/LpStepper-Wtl-6nUh.js";
+import { _ as _58 } from "./chunks/LpSwitch-v6fnccSM.js";
+import { _ as _59 } from "./chunks/LpTable-DTj52qlg.js";
+import { _ as _60 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
+import { _ as _61 } from "./chunks/LpTabs-Cefe_lys.js";
+import { _ as _62 } from "./chunks/LpTextarea-1ENb3ZAO.js";
 import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-7mAK6bI7.js";
-import { D, _ as _62, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-7mAK6bI7.js";
-import { _ as _63 } from "./chunks/LpTilt-DuyKbpkA.js";
-import { _ as _64 } from "./chunks/LpToaster-gDB1EaU3.js";
-import { _ as _65 } from "./chunks/LpTooltip-hCLPAqMG.js";
-import { _ as _66 } from "./chunks/LpTopologyCanvas-ebP67CLx.js";
-import { _ as _67 } from "./chunks/LpUptimeBar-DcQ8HikG.js";
+import { D, _ as _63, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-7mAK6bI7.js";
+import { _ as _64 } from "./chunks/LpTilt-DuyKbpkA.js";
+import { _ as _65 } from "./chunks/LpToaster-gDB1EaU3.js";
+import { _ as _66 } from "./chunks/LpTooltip-hCLPAqMG.js";
+import { _ as _67 } from "./chunks/LpTopologyCanvas-ebP67CLx.js";
+import { _ as _68 } from "./chunks/LpUptimeBar-DcQ8HikG.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
@@ -167,28 +168,29 @@ export {
   _44 as LpRadioGroup,
   _45 as LpRollingText,
   _46 as LpScrollArea,
+  _48 as LpSection,
   _47 as LpSegmented,
-  _48 as LpSelect,
-  _49 as LpServiceNode,
-  _50 as LpShift,
+  _49 as LpSelect,
+  _50 as LpServiceNode,
+  _51 as LpShift,
   default3 as LpShortcutsDialog,
-  _51 as LpSidebar,
-  _52 as LpSkeleton,
-  _53 as LpSlider,
-  _54 as LpSparkline,
-  _55 as LpStat,
-  _56 as LpStepper,
-  _57 as LpSwitch,
-  _58 as LpTable,
-  _59 as LpTableOfContents,
-  _60 as LpTabs,
-  _61 as LpTextarea,
-  _62 as LpThemeSwitcher,
-  _63 as LpTilt,
-  _64 as LpToaster,
-  _65 as LpTooltip,
-  _66 as LpTopologyCanvas,
-  _67 as LpUptimeBar,
+  _52 as LpSidebar,
+  _53 as LpSkeleton,
+  _54 as LpSlider,
+  _55 as LpSparkline,
+  _56 as LpStat,
+  _57 as LpStepper,
+  _58 as LpSwitch,
+  _59 as LpTable,
+  _60 as LpTableOfContents,
+  _61 as LpTabs,
+  _62 as LpTextarea,
+  _63 as LpThemeSwitcher,
+  _64 as LpTilt,
+  _65 as LpToaster,
+  _66 as LpTooltip,
+  _67 as LpTopologyCanvas,
+  _68 as LpUptimeBar,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
   T as THEME_COOKIE,

package/package.json

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

package/src/component-names.ts

@@ -52,6 +52,7 @@ export const COMPONENT_NAMES = [
   "LpRadioGroup",
   "LpRollingText",
   "LpScrollArea",
+  "LpSection",
   "LpSegmented",
   "LpSelect",
   "LpServiceNode",

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/LpSection.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+/*
+ * A section heading: a title, an optional line under it, and actions on the
+ * right.
+ *
+ *   <LpSection title="Recent invoices">
+ *     <template #actions><LpButton size="sm">Export</LpButton></template>
+ *   </LpSection>
+ *
+ * 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` 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:
+ *
+ * - It draws no container. In the panel these headings sit inside LpCard; in
+ *   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
+ *   pages where none of those states were amber, rose or blue. One muted
+ *   colour, or none.
+ *
+ * `level` is the visual size and is independent of `as`, the heading element:
+ * a page's main heading may need to be an h1 rendered small, and a card's
+ * heading an h3 rendered large. Tying them together is what made consumers
+ * reach past the component for a raw <h2> again.
+ */
+import { computed } from "vue"
+import { tv, type VariantProps } from "tailwind-variants"
+import LpIcon from "./LpIcon.vue"
+
+const section = tv({
+  slots: {
+    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" },
+      lg: { title: "text-lg tracking-tight" },
+      xl: { title: "text-xl tracking-tight" },
+    },
+  },
+  defaultVariants: { level: "md", described: false },
+})
+
+type SectionVariants = VariantProps<typeof section>
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    /** One line under the title. */
+    description?: string
+    /** Iconify name shown before the title, e.g. "lucide:server". */
+    icon?: string
+    /** 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"
+  }>(),
+  { level: "md", as: "h2" },
+)
+
+/*
+ * `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. */
+  meta?: () => unknown
+}>()
+
+// 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()">
+    <!-- `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()">
+          <slot name="title">{{ title }}</slot>
+        </component>
+        <slot name="meta" />
+      </div>
+      <p v-if="hasDescription" :class="classes.description()">
+        <slot name="description">{{ description }}</slot>
+      </p>
+    </div>
+
+    <div v-if="$slots.actions" :class="classes.actions()">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

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
         ? [

package/src/index.ts

@@ -110,6 +110,7 @@ export { default as LpRollingText } from "./components/LpRollingText.vue"
 export { default as LpScrollArea } from "./components/LpScrollArea.vue"
 export { default as LpSegmented } from "./components/LpSegmented.vue"
 export type { SegmentedOption } from "./components/LpSegmented.vue"
+export { default as LpSection } from "./components/LpSection.vue"
 export { default as LpSelect } from "./components/LpSelect.vue"
 export type { SelectOption, SelectValue } from "./components/LpSelect.vue"
 export { default as LpServiceNode } from "./components/LpServiceNode.vue"