@leavepulse/ui 0.31.1 → 0.33.0

package/dist/index.js

@@ -1,90 +1,92 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-BDkp3-Bp.js";
-import { _ as _3 } from "./chunks/LpMapPicker-CXvoTrAe.js";
+import { _ as _2 } from "./chunks/LpAddressInput-C35TsJXt.js";
+import { _ as _3 } from "./chunks/LpMapPicker-ul4oYno6.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BlvtGB2P.js";
 import { _ as _5 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _6 } from "./chunks/LpAppShell-Chz8Vbtu.js";
+import { _ as _6 } from "./chunks/LpAppShell-lVvpENMH.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DExlIZe_.js";
 import { _ as _8 } from "./chunks/LpAvatar-D3l4nabg.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
-import { _ as _10 } from "./chunks/LpBreadcrumbs-5uvViCXi.js";
+import { _ as _10 } from "./chunks/LpBreadcrumbs-p4jHe_V-.js";
 import { _ as _11 } from "./chunks/LpButton-5VXXCjwF.js";
-import { _ as _12 } from "./chunks/LpCalendar-B7ZL0ty3.js";
-import { _ as _13 } from "./chunks/LpCard-D0M2ZCnB.js";
+import { _ as _12 } from "./chunks/LpCalendar-B7Ko5RdR.js";
+import { _ as _13 } from "./chunks/LpCard-1SeUYPBT.js";
 import { default as default2 } from "./components/LpChart.vue.js";
 import { CHART_PALETTE, axisTicks, formatTick, niceScale, resolveSlices } from "./components/chart.js";
-import { _ as _14 } from "./chunks/LpCheckbox-BO0zuuPh.js";
-import { _ as _15 } from "./chunks/LpCodeBlock-BWX1KZwk.js";
+import { _ as _14 } from "./chunks/LpCheckbox-CVccKYaH.js";
+import { _ as _15 } from "./chunks/LpCodeBlock-Bo0B4TFR.js";
 import { _ as _16 } from "./chunks/LpColorPicker-CFC6iaNK.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
 import { _ as _17 } from "./chunks/LpConfirmDialog-CjOGcj1e.js";
 import { _ as _18 } from "./chunks/LpContextMenu-B6WBLleS.js";
-import { _ as _19 } from "./chunks/LpDatePicker-dY2q4dr4.js";
-import { _ as _20 } from "./chunks/LpDisclosure-B4kVAWfg.js";
+import { _ as _19 } from "./chunks/LpDatePicker-6JFXllj5.js";
+import { _ as _20 } from "./chunks/LpDisclosure-y7wDBgLa.js";
 import { _ as _21 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _22 } from "./chunks/LpDrawer-DAJN5rGK.js";
 import { _ as _23 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { default as default4 } from "./components/LpDropzone.vue.js";
-import { _ as _24 } from "./chunks/LpEmptyState-BV3q7Qyi.js";
-import { _ as _25 } from "./chunks/LpFileTree-DfFqY__1.js";
+import { _ as _24 } from "./chunks/LpEmptyState-Dsdqz1Wj.js";
+import { _ as _25 } from "./chunks/LpFileTree-C-NFRT0H.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
-import { _ as _26 } from "./chunks/LpFormField-fV_2ZdCk.js";
+import { _ as _26 } from "./chunks/LpFormField-CazBc2-a.js";
 import { _ as _27 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { default as default5 } from "./components/LpImageEditor.vue.js";
 import { _ as _28 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
-import { _ as _29 } from "./chunks/LpInput-Bt4J71xn.js";
-import { _ as _30 } from "./chunks/LpLightbox-Ci35Y_xP.js";
+import { _ as _29 } from "./chunks/LpInput-9EXWUM9B.js";
+import { _ as _30 } from "./chunks/LpLightbox-oLqyjOln.js";
 import { fileNameOf } from "./components/lightbox.js";
-import { _ as _31 } from "./chunks/LpLink-BHZ1CLlF.js";
-import { _ as _32 } from "./chunks/LpLogViewer-TSRyt3t9.js";
-import { _ as _33 } from "./chunks/LpModal-D_o-56To.js";
-import { _ as _34 } from "./chunks/LpNotificationBell-gdvQY89m.js";
-import { _ as _35 } from "./chunks/LpNumberField-NPE8Bumx.js";
-import { _ as _36 } from "./chunks/LpNumberFlow-amWYaeuA.js";
-import { _ as _37 } from "./chunks/LpOtpInput-DqaT0Z75.js";
-import { _ as _38 } from "./chunks/LpPagination-CeGuNe_q.js";
-import { _ as _39 } from "./chunks/LpPasswordInput-BqMAc5HA.js";
-import { _ as _40 } from "./chunks/LpPie-BL1vTDSM.js";
-import { _ as _41 } from "./chunks/LpPhoneInput-NXXjciJJ.js";
+import { _ as _31 } from "./chunks/LpLink-DCND-zyu.js";
+import { _ as _32 } from "./chunks/LpLogViewer-y53ZqSVq.js";
+import { _ as _33 } from "./chunks/LpMediaGallery-Cid7PGYx.js";
+import { _ as _34 } from "./chunks/LpModal-D_o-56To.js";
+import { _ as _35 } from "./chunks/LpNotificationBell-lHePf89W.js";
+import { _ as _36 } from "./chunks/LpNumberField-CWuX08iX.js";
+import { _ as _37 } from "./chunks/LpNumberFlow-amWYaeuA.js";
+import { _ as _38 } from "./chunks/LpOtpInput-y2v-pmiN.js";
+import { _ as _39 } from "./chunks/LpPagination-5FxjmmB5.js";
+import { _ as _40 } from "./chunks/LpPasswordInput--sjYCkLS.js";
+import { _ as _41 } from "./chunks/LpPie-c2-q4DJu.js";
+import { _ as _42 } from "./chunks/LpPhoneInput-BDSKVl_z.js";
 import { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
-import { _ as _42 } from "./chunks/LpPopover-8268UmlC.js";
-import { _ as _43 } from "./chunks/LpProgress-Btq5W4Ut.js";
-import { _ as _44 } from "./chunks/LpRadio-CL-pI0_O.js";
-import { _ as _45 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
-import { _ as _46 } from "./chunks/LpRollingText-CM5gkSeF.js";
-import { _ as _47 } from "./chunks/LpScrollArea-D8xyKXcF.js";
-import { _ as _48 } from "./chunks/LpSegmented-BmpanyAo.js";
-import { _ as _49 } from "./chunks/LpSection-aM6J_u51.js";
-import { _ as _50 } from "./chunks/LpSelect-ANIVtrpM.js";
-import { _ as _51 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
-import { _ as _52 } from "./chunks/LpShift-DXNsauQZ.js";
+import { _ as _43 } from "./chunks/LpPopover-8268UmlC.js";
+import { _ as _44 } from "./chunks/LpProgress-Btq5W4Ut.js";
+import { _ as _45 } from "./chunks/LpRadio-B5AfqTpZ.js";
+import { _ as _46 } from "./chunks/LpRadioGroup-xPIuVDO_.js";
+import { _ as _47 } from "./chunks/LpRollingText-CM5gkSeF.js";
+import { _ as _48 } from "./chunks/LpScrollArea-D8xyKXcF.js";
+import { _ as _49 } from "./chunks/LpSegmented-fV0Sk92p.js";
+import { _ as _50 } from "./chunks/LpSection-aM6J_u51.js";
+import { _ as _51 } from "./chunks/LpSelect-ANIVtrpM.js";
+import { _ as _52 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
+import { _ as _53 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default6 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _53 } from "./chunks/LpSidebar-BiWM_lDB.js";
-import { _ as _54 } from "./chunks/LpSkeleton-CTI-vBgW.js";
-import { _ as _55 } from "./chunks/LpSlider-B1SF3pRV.js";
-import { _ as _56 } from "./chunks/LpSparkline-C6xQ2dwv.js";
-import { _ as _57 } from "./chunks/LpStat-CDanpzU0.js";
-import { _ as _58 } from "./chunks/LpStepper-Wtl-6nUh.js";
-import { _ as _59 } from "./chunks/LpSwitch-v6fnccSM.js";
+import { _ as _54 } from "./chunks/LpSidebar-DcYavim2.js";
+import { _ as _55 } from "./chunks/LpSkeleton-CTI-vBgW.js";
+import { _ as _56 } from "./chunks/LpSlider-BwNIBkAK.js";
+import { _ as _57 } from "./chunks/LpSparkline-C6xQ2dwv.js";
+import { _ as _58 } from "./chunks/LpStat-CQaW8R--.js";
+import { _ as _59 } from "./chunks/LpStepper-Bk-XaQYU.js";
+import { _ as _60 } from "./chunks/LpSwitch-xgnRU2k0.js";
 import { default as default7 } from "./components/LpTable.vue.js";
-import { _ as _60 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
-import { _ as _61 } from "./chunks/LpTabs-Cefe_lys.js";
-import { _ as _62 } from "./chunks/LpTextarea-BMIOfw5l.js";
+import { _ as _61 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
+import { _ as _62 } from "./chunks/LpTabs-Cefe_lys.js";
+import { _ as _63 } from "./chunks/LpTextarea-t7F6gv8E.js";
 import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-r1te9nB2.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-r1te9nB2.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-Cm1L39uL.js";
-import { _ as _68 } from "./chunks/LpUptimeBar-DcQ8HikG.js";
+import { D, _ as _64, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-r1te9nB2.js";
+import { _ as _65 } from "./chunks/LpTilt-DuyKbpkA.js";
+import { _ as _66 } from "./chunks/LpToaster-gDB1EaU3.js";
+import { _ as _67 } from "./chunks/LpTooltip-hCLPAqMG.js";
+import { _ as _68 } from "./chunks/LpTopologyCanvas-Cm1L39uL.js";
+import { _ as _69 } from "./chunks/LpUptimeBar-DvAMno0S.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";
 import { useLayout } from "./layout/useLayout.js";
 import { useClipboard } from "./composables/useClipboard.js";
 import { appleModifierLabel, isAppleKeyboard, useHotkeys } from "./composables/useHotkeys.js";
+import { mergeClass, useMergedAttrs, useMergedClass } from "./composables/useMergedClass.js";
 import { useInputFilter } from "./composables/useInputFilter.js";
 import { easeOut, easeTravel, easingToken, prefersReducedMotion } from "./composables/easing.js";
 import { useReveal } from "./composables/useReveal.js";
@@ -165,44 +167,45 @@ export {
   _31 as LpLink,
   _32 as LpLogViewer,
   _3 as LpMapPicker,
-  _33 as LpModal,
-  _34 as LpNotificationBell,
-  _35 as LpNumberField,
-  _36 as LpNumberFlow,
-  _37 as LpOtpInput,
-  _38 as LpPagination,
-  _39 as LpPasswordInput,
-  _41 as LpPhoneInput,
-  _40 as LpPie,
-  _42 as LpPopover,
-  _43 as LpProgress,
-  _44 as LpRadio,
-  _45 as LpRadioGroup,
-  _46 as LpRollingText,
-  _47 as LpScrollArea,
-  _49 as LpSection,
-  _48 as LpSegmented,
-  _50 as LpSelect,
-  _51 as LpServiceNode,
-  _52 as LpShift,
+  _33 as LpMediaGallery,
+  _34 as LpModal,
+  _35 as LpNotificationBell,
+  _36 as LpNumberField,
+  _37 as LpNumberFlow,
+  _38 as LpOtpInput,
+  _39 as LpPagination,
+  _40 as LpPasswordInput,
+  _42 as LpPhoneInput,
+  _41 as LpPie,
+  _43 as LpPopover,
+  _44 as LpProgress,
+  _45 as LpRadio,
+  _46 as LpRadioGroup,
+  _47 as LpRollingText,
+  _48 as LpScrollArea,
+  _50 as LpSection,
+  _49 as LpSegmented,
+  _51 as LpSelect,
+  _52 as LpServiceNode,
+  _53 as LpShift,
   default6 as LpShortcutsDialog,
-  _53 as LpSidebar,
-  _54 as LpSkeleton,
-  _55 as LpSlider,
-  _56 as LpSparkline,
-  _57 as LpStat,
-  _58 as LpStepper,
-  _59 as LpSwitch,
+  _54 as LpSidebar,
+  _55 as LpSkeleton,
+  _56 as LpSlider,
+  _57 as LpSparkline,
+  _58 as LpStat,
+  _59 as LpStepper,
+  _60 as LpSwitch,
   default7 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,
+  _61 as LpTableOfContents,
+  _62 as LpTabs,
+  _63 as LpTextarea,
+  _64 as LpThemeSwitcher,
+  _65 as LpTilt,
+  _66 as LpToaster,
+  _67 as LpTooltip,
+  _68 as LpTopologyCanvas,
+  _69 as LpUptimeBar,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
   T as THEME_COOKIE,
@@ -252,6 +255,7 @@ export {
   loadCountries,
   makeLayout,
   matchCountryByValue,
+  mergeClass,
   moveLeaf,
   niceScale,
   n as nord,
@@ -289,6 +293,8 @@ export {
   useHotkeys,
   useInputFilter,
   useLayout,
+  useMergedAttrs,
+  useMergedClass,
   useReveal,
   useRovingFocus,
   useSettled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.31.1",
+  "version": "0.33.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -61,7 +61,6 @@
     "@vueuse/core": "^12.0.0 || ^13.0.0 || ^14.0.0",
     "motion-v": "^2.2.0",
     "reka-ui": "^2.9.0",
-    "tailwind-merge": "^3.0.0",
     "tailwind-variants": "^3.0.0",
     "tailwindcss": "^4.0.0",
     "vue": "^3.5.0"
@@ -80,7 +79,6 @@
     "motion-v": "^2.2.1",
     "reka-ui": "^2.9.10",
     "shiki": "^4.2.0",
-    "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.4",
     "typescript": "^5.6.3",

package/src/component-names.ts

@@ -41,6 +41,7 @@ export const COMPONENT_NAMES = [
   "LpLink",
   "LpLogViewer",
   "LpMapPicker",
+  "LpMediaGallery",
   "LpModal",
   "LpNotificationBell",
   "LpNumberField",

package/src/components/LpAddressInput.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Postal address form — street, optional second line, city, postcode and
@@ -33,6 +40,7 @@ import LpIcon from "./LpIcon.vue"
 import LpInput from "./LpInput.vue"
 import LpModal from "./LpModal.vue"
 import LpSelect from "./LpSelect.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const LpMapPicker = defineAsyncComponent(() => import("./LpMapPicker.vue"))
 
@@ -252,10 +260,17 @@ function confirmPoint() {
   emit("pick", point.value)
   mapOpen.value = false
 }
+
+// The group stacks its fields on a fixed gap that a tighter form has to close.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex flex-col gap-3",
+)
 </script>
 
 <template>
-  <div class="flex flex-col gap-3">
+  <div
+    :class="rootClass"
+    v-bind="rest">
     <LpFormField :label="text.line">
       <!-- Typing is the fast path and stands on its own; the map is one button
            away for when an address is easier pointed at than spelled. -->

package/src/components/LpAppShell.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Full application shell: a fixed-height (h-dvh) flex frame holding the side
@@ -31,6 +38,7 @@ import LpScrollArea from "./LpScrollArea.vue"
 import LpShift from "./LpShift.vue"
 import LpSidebar from "./LpSidebar.vue"
 import type { SidebarItem, SidebarSection } from "./sidebar"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 export type { SidebarItem, SidebarSection } from "./sidebar"
 
@@ -157,10 +165,17 @@ const burgerClass = computed(() => burgerHidden[props.mobileBreakpoint])
 // Expose the burger trigger so a host can omit its own header entirely.
 const _openDrawer = () => emit("update:open", true)
 defineExpose({ openDrawer: _openDrawer })
+
+// The shell claims the full viewport height, which is wrong when it is embedded in a page that already has a header of its own.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex h-dvh overflow-hidden bg-surface text-ink",
+)
 </script>
 
 <template>
-  <div class="flex h-dvh overflow-hidden bg-surface text-ink">
+  <div
+    :class="rootClass"
+    v-bind="rest">
     <LpSidebar
       :model-value="modelValue"
       :items="items"

package/src/components/LpBreadcrumbs.vue

@@ -1,6 +1,14 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 import type { Component } from "vue"
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 export interface Crumb {
   label: string
@@ -23,10 +31,17 @@ withDefaults(
   { as: "a" },
 )
 defineEmits<{ (e: "navigate", item: Crumb, index: number): void }>()
+
+// The trail sets its own gap, which a dense header bar needs to reduce.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex items-center gap-1.5 text-sm",
+)
 </script>
 
 <template>
-  <nav class="flex items-center gap-1.5 text-sm" aria-label="Breadcrumb">
+  <nav
+    :class="rootClass"
+    v-bind="rest" aria-label="Breadcrumb">
     <template v-for="(item, i) in items" :key="i">
       <LpIcon
         v-if="i > 0"

package/src/components/LpCalendar.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Inline month calendar (reka Calendar). The kit-facing model is an ISO date
@@ -23,6 +30,7 @@ import {
 } from "reka-ui"
 import { computed } from "vue"
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
@@ -68,6 +76,11 @@ function disabledFor(date: DateValue): boolean {
 
 const navBtn =
   "flex size-8 items-center justify-center rounded-control text-muted outline-none transition-[color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-surface-soft hover:text-ink active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring"
+
+// The calendar draws its own card frame, which has to give way when it is placed inside a popover that already has one.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "inline-block rounded-card border border-line bg-surface-raised p-3",
+)
 </script>
 
 <template>
@@ -80,7 +93,8 @@ const navBtn =
     :weekday-format="weekdayFormat"
     :is-date-disabled="disabledFor"
     fixed-weeks
-    class="inline-block rounded-card border border-line bg-surface-raised p-3"
+    :class="rootClass"
+    v-bind="rest"
     @update:model-value="onUpdate"
   >
     <CalendarHeader class="mb-2 flex items-center justify-between gap-2">

package/src/components/LpCard.vue

@@ -1,13 +1,14 @@
 <script lang="ts">
 // Opt out of auto attr inheritance: the template has two root branches (menu /
 // no-menu), so fallthrough class/attrs/events are bound explicitly onto the
-// inner <div> via v-bind="$attrs" in both — keeping them on the card surface.
+// inner <div> in both — keeping them on the card surface.
 export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
 import { tv, type VariantProps } from "tailwind-variants"
 import { computed } from "vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 
 const card = tv({
@@ -35,6 +36,9 @@ const card = tv({
       ghost: "border-transparent bg-transparent",
     },
     padded: { true: "p-5", false: "" },
+    // The stripe itself lives in .lp-card-accent (tokens.css), which composes
+    // it with the skin painter's shadows instead of overwriting them.
+    accent: { true: "lp-card-accent", false: "" },
     // Lift on hover with a BRAND-tinted glow + brand border (a black drop-shadow
     // was invisible on dark themes — it only showed on light). We write the glow
     // through `--surface-panel-shadow`, the very variable the skin-painter feeds
@@ -45,6 +49,12 @@ const card = tv({
     // (not `transform`), so the transition list MUST name `translate` explicitly
     // or the lift snaps while the rest eases.
     //
+    // `hover:shadow-*` sets box-shadow whole, which on an accented card dropped
+    // the stripe on hover — the card lit up and its colour went with it.
+    // .lp-card-accent is declared outside @layer, so it outranks the utility and
+    // keeps the stripe; the `--surface-panel-shadow` swap on the same line is
+    // what actually carries the glow there. See tokens.css.
+    //
     // The glow reaches past the card, so a clipping ancestor (scroll area,
     // dialog body) will slice it unless the list reserves room — see the
     // `.lp-glow-room` helper in tokens.css, whose spread tokens describe exactly
@@ -68,12 +78,47 @@ const props = withDefaults(
     menuItems?: ContextMenuItemDef[]
     /** Element to render as. A card inside a <ul> has to be an `li` to be valid. */
     as?: string
+    /**
+     * Colour of a stripe down the card's leading edge. ANY CSS colour — this is
+     * for sources that hand you an arbitrary value (a Discord role colour, a
+     * per-project hex out of a config), which is why it is a string and not a
+     * set of tonal variants. When the colour IS semantic, LpAlert's
+     * info/success/warning/danger say so in a way a raw hex cannot.
+     *
+     * The stripe costs no layout: content starts in the same place with and
+     * without it, and it rounds into `rounded-card` by itself.
+     */
+    accent?: string
+    /** Width of the `accent` stripe. */
+    accentWidth?: string
   }>(),
   { variant: "raised", padded: true, interactive: false, as: "div" },
 )
 
-const classes = computed(() =>
-  card({ variant: props.variant, padded: props.padded, interactive: props.interactive }),
+// Merged rather than concatenated: binding the raw `$attrs` would otherwise put the
+// consumer's `class` next to ours and leave the winner to stylesheet order —
+// `class="p-1"` lost to the `p-5` of `padded`. useMergedAttrs merges it in and
+// hands back the remaining attrs, so the class never arrives a second time.
+const { class: classes, attrs: rest } = useMergedAttrs(() =>
+  card({
+    variant: props.variant,
+    padded: props.padded,
+    interactive: props.interactive,
+    accent: Boolean(props.accent),
+  }),
+)
+
+// Through custom properties rather than a box-shadow written here: the shadow
+// list in .lp-card-accent also carries the skin painter's own shadows, and an
+// inline box-shadow would replace all three — taking the card's elevation with
+// it, and blocking the swap `interactive` makes on hover.
+const accentStyle = computed(() =>
+  props.accent
+    ? {
+        "--lp-card-accent": props.accent,
+        ...(props.accentWidth ? { "--lp-card-accent-width": props.accentWidth } : {}),
+      }
+    : undefined,
 )
 </script>
 
@@ -82,11 +127,11 @@ const classes = computed(() =>
        (inheritAttrs:false above), so the card surface looks identical whether or
        not it's wrapped in a context menu. -->
   <LpContextMenu v-if="menuItems?.length" :items="menuItems">
-    <component :is="as" :class="classes" v-bind="$attrs">
+    <component :is="as" :class="classes" :style="accentStyle" v-bind="rest">
       <slot />
     </component>
   </LpContextMenu>
-  <component :is="as" v-else :class="classes" v-bind="$attrs">
+  <component :is="as" v-else :class="classes" :style="accentStyle" v-bind="rest">
     <slot />
   </component>
 </template>

package/src/components/LpChart.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Token-driven SVG chart: line, area and bar off one data shape. No charting
@@ -36,6 +43,7 @@ import {
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpShift from "./LpShift.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 /** What was under the pointer when a point was clicked or right-clicked. */
 export interface ChartPointEvent {
@@ -845,10 +853,17 @@ const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`
  */
 const gradientId = (name: string, index: number) =>
   `${clipId}-g-${index}-${name.replace(/[^a-zA-Z0-9_-]/g, "-")}`
+
+// The chart fills its container's width and sets its own gap between plot and legend — both are layout decisions the page makes, not the chart.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex w-full flex-col gap-3",
+)
 </script>
 
 <template>
-  <div ref="root" class="flex w-full flex-col gap-3">
+  <div ref="root"
+    :class="rootClass"
+    v-bind="rest">
     <div v-if="title || subtitle || $slots.actions" class="flex items-start justify-between gap-3">
       <div class="flex flex-col gap-0.5">
         <span v-if="title" class="text-sm font-medium text-ink">{{ title }}</span>

package/src/components/LpCheckbox.vue

@@ -1,6 +1,14 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 import { CheckboxIndicator, CheckboxRoot } from "reka-ui"
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 defineProps<{
   modelValue?: boolean
@@ -21,10 +29,17 @@ function onUpdate(v: boolean | "indeterminate") {
   emit("update:modelValue", checked)
   emit("change", checked)
 }
+
+// The label sits a fixed distance from the box; a dense list of options needs that closer.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "group inline-flex cursor-pointer items-center gap-2 text-sm text-ink",
+)
 </script>
 
 <template>
-  <label class="group inline-flex cursor-pointer items-center gap-2 text-sm text-ink">
+  <label
+    :class="rootClass"
+    v-bind="rest">
     <CheckboxRoot
       :id="id"
       :name="name"

package/src/components/LpCodeBlock.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 /*
  * Code block with lightweight, theme-aware syntax highlighting (codeHighlight.ts
@@ -19,6 +26,7 @@ import { computed, reactive, ref, watch } from "vue"
 import { useClipboard } from "../composables/useClipboard"
 import { type CodeLang, tokenizeLine } from "./codeHighlight"
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
@@ -181,10 +189,17 @@ function toggleLock() {
 function onInput(e: Event) {
   emit("update:modelValue", (e.target as HTMLTextAreaElement).value)
 }
+
+// A code block is a framed panel; embedding one inside another panel means dropping its border or its radius, which a consumer can only do from the outside.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "overflow-hidden rounded-card border border-line bg-surface font-mono text-xs",
+)
 </script>
 
 <template>
-  <div class="overflow-hidden rounded-card border border-line bg-surface font-mono text-xs">
+  <div
+    :class="rootClass"
+    v-bind="rest">
     <!-- Header -->
     <div
       v-if="showHeader"