@leavepulse/ui 0.31.1 → 0.32.0

package/src/components/LpMediaGallery.vue

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+/*
+ * A grid of thumbnails that opens into the lightbox.
+ *
+ * The pairing is the point: LpLightbox already knows how to page, zoom, rotate
+ * and download a set of images, but it has no way in — something has to show
+ * the set and say which one was clicked. That something is otherwise rewritten
+ * per feature, each time with its own idea of what a missing image looks like
+ * and whether the keyboard can reach it.
+ *
+ * Deliberately nothing but a grid. Column counts and gaps are all it decides;
+ * a layout where the first image is large and the next two are narrow is a
+ * composition, and it belongs to the feature that wants it — which can lay its
+ * own elements over this grid, or pass `columns` per breakpoint and be done.
+ * The kit's job is the part that repeats: the thumbnails, the focus ring, the
+ * counter on an overflowing set, and the wiring to the lightbox.
+ *
+ * Items are LightboxItem, not a shape of this component's own, so a set can go
+ * straight from here into the lightbox with nothing in between. `thumb` is the
+ * small source when one exists; without it the grid shows `src`, which is
+ * correct but heavier, and that is the caller's call to make.
+ */
+import { computed, ref } from "vue"
+import type { LightboxItem } from "./lightbox"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import LpIcon from "./LpIcon.vue"
+import LpLightbox from "./LpLightbox.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** Images in the set. The same shape LpLightbox takes. */
+    items: LightboxItem[]
+    /**
+     * Thumbnails per row. A number is that many at every width; an object is
+     * per breakpoint, e.g. `{ base: 2, md: 3, lg: 4 }`.
+     */
+    columns?: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number }
+    /** Space between thumbnails, as a Tailwind gap step. */
+    gap?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4
+    /** Shape of each cell. `auto` lets the image decide its own height. */
+    aspect?: "square" | "video" | "auto"
+    /**
+     * Show at most this many, with the remainder as a "+N" badge over the last
+     * visible one — the usual treatment for a set too big for the space it has.
+     * Clicking the badge opens the lightbox at the first hidden image, because
+     * that is the one the count is about.
+     */
+    max?: number
+    /** Open the lightbox on click. Off makes the grid a pure display. */
+    openable?: boolean
+    /** Passed through to the lightbox. */
+    downloadable?: boolean
+    /** Passed through to the lightbox. */
+    rotatable?: boolean
+    /** Accessible name for the grid. */
+    ariaLabel?: string
+  }>(),
+  {
+    columns: 3,
+    gap: 2,
+    aspect: "square",
+    openable: true,
+    downloadable: true,
+    rotatable: true,
+    ariaLabel: "Media",
+  },
+)
+
+const emit = defineEmits<{
+  /** A thumbnail was activated, before the lightbox opens. */
+  (e: "select", item: LightboxItem, index: number): void
+  (e: "update:open", value: boolean): void
+}>()
+
+defineSlots<{
+  /** Replace a cell's contents. Gets the item and its index. */
+  item(props: { item: LightboxItem; index: number }): unknown
+  /** Shown instead of the grid when `items` is empty. */
+  empty(): unknown
+}>()
+
+const open = ref(false)
+const index = ref(0)
+
+// `max` counts what is SHOWN, so the badge reads "+N more" rather than "N
+// total". A set of 7 capped at 4 shows 4 cells, the last one badged +3.
+const visible = computed(() =>
+  props.max && props.items.length > props.max ? props.items.slice(0, props.max) : props.items,
+)
+const hiddenCount = computed(() => Math.max(props.items.length - visible.value.length, 0))
+
+/*
+ * Column classes are written out rather than interpolated. Tailwind scans
+ * source text for complete class names, so `grid-cols-${n}` compiles to
+ * nothing — the class exists in the DOM and never in the stylesheet. This is
+ * the same reason the kit's other size maps are written as literals.
+ */
+const COLS: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+}
+const COLS_SM: Record<number, string> = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6",
+}
+const COLS_MD: Record<number, string> = {
+  1: "md:grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4",
+  5: "md:grid-cols-5",
+  6: "md:grid-cols-6",
+}
+const COLS_LG: Record<number, string> = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6",
+}
+const COLS_XL: Record<number, string> = {
+  1: "xl:grid-cols-1",
+  2: "xl:grid-cols-2",
+  3: "xl:grid-cols-3",
+  4: "xl:grid-cols-4",
+  5: "xl:grid-cols-5",
+  6: "xl:grid-cols-6",
+}
+
+const GAPS: Record<number, string> = {
+  0: "gap-0",
+  0.5: "gap-0.5",
+  1: "gap-1",
+  1.5: "gap-1.5",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+}
+
+const ASPECTS = {
+  square: "aspect-square",
+  video: "aspect-video",
+  auto: "",
+} as const
+
+const columnClass = computed(() => {
+  const c = props.columns
+  if (typeof c === "number") return COLS[c] ?? COLS[3]!
+  return [
+    COLS[c.base ?? 1] ?? COLS[1],
+    c.sm ? COLS_SM[c.sm] : "",
+    c.md ? COLS_MD[c.md] : "",
+    c.lg ? COLS_LG[c.lg] : "",
+    c.xl ? COLS_XL[c.xl] : "",
+  ]
+    .filter(Boolean)
+    .join(" ")
+})
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  ["grid", columnClass.value, GAPS[props.gap] ?? GAPS[2]].join(" "),
+)
+
+function activate(i: number) {
+  const item = props.items[i]
+  if (!item) return
+  emit("select", item, i)
+  if (!props.openable) return
+  index.value = i
+  open.value = true
+  emit("update:open", true)
+}
+
+/** The badge is about the FIRST hidden image, so that is where it opens. */
+function openOverflow() {
+  activate(visible.value.length)
+}
+
+defineExpose({
+  /** Open the lightbox at an index — for a "view all" button outside the grid. */
+  openAt: (i: number) => activate(i),
+})
+</script>
+
+<template>
+  <div v-if="!items.length">
+    <slot name="empty" />
+  </div>
+
+  <div v-else role="group" :aria-label="ariaLabel" :class="rootClass" v-bind="rest">
+    <button
+      v-for="(item, i) in visible"
+      :key="item.src + i"
+      type="button"
+      :class="[
+        'group relative overflow-hidden rounded-card bg-surface-soft outline-none',
+        ASPECTS[aspect],
+        openable ? 'cursor-pointer' : 'cursor-default',
+        'focus-visible:ring-2 focus-visible:ring-ring',
+      ]"
+      :aria-label="
+        hiddenCount && i === visible.length - 1
+          ? `Show ${hiddenCount} more`
+          : item.title || `Image ${i + 1} of ${items.length}`
+      "
+      @click="hiddenCount && i === visible.length - 1 ? openOverflow() : activate(i)"
+    >
+      <slot name="item" :item="item" :index="i">
+        <!-- decoding=async + loading=lazy: a gallery is often far down a page,
+             and a grid of full-size sources is the difference between a page
+             that settles and one that fetches a megabyte per cell on load.
+
+             On the overflow cell the image carries the blur and the dimming
+             itself instead of wearing a scrim — see the "+N" span below for
+             why. `scale-[1.06]` goes with the blur: blurring samples past the
+             image's own edge, so its outermost pixels fade toward transparent
+             and the tile gets a soft translucent rim. Growing the image a
+             little pushes that feathered edge outside the clip. -->
+        <img
+          :src="item.thumb || item.src"
+          :alt="item.title || ''"
+          loading="lazy"
+          decoding="async"
+          class="size-full object-cover transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] group-hover:scale-[1.03] motion-reduce:transition-none motion-reduce:group-hover:scale-100"
+          :class="
+            hiddenCount && i === visible.length - 1
+              ? 'scale-[1.06] blur-[2px] brightness-[0.45] group-hover:scale-[1.06]'
+              : ''
+          "
+        >
+      </slot>
+
+      <!-- The overflow count on the LAST visible cell. Part of that cell's
+           button rather than a sibling, so the tile stays one tab stop and one
+           hit target.
+
+           The DARKENING is not here — it rides on the image's own filter (see
+           the `img` above). A scrim laid over the image as its own layer is the
+           bug LpColorPicker's s/v square documents: a rounded clip is
+           antialiased, so the pixels along each corner's arc get only partial
+           coverage of the overlay, and the UNDARKENED image shows through the
+           rest of the way — a bright fringe tracing the radius, faint at 100%
+           and obvious zoomed. Dimming the image itself means the corner clips a
+           finished pixel, which fades toward transparent instead of toward
+           something that should never be on show. -->
+      <span
+        v-if="hiddenCount && i === visible.length - 1"
+        class="pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-medium text-white"
+      >
+        +{{ hiddenCount }}
+      </span>
+
+      <span
+        v-else-if="openable"
+        class="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/0 opacity-0 transition-[background-color,opacity] duration-[var(--duration-fast)] group-hover:bg-black/25 group-hover:opacity-100 motion-reduce:transition-none"
+        aria-hidden="true"
+      >
+        <LpIcon name="lucide:maximize-2" :size="18" class="text-white" />
+      </span>
+    </button>
+
+    <LpLightbox
+      v-if="openable"
+      v-model:open="open"
+      v-model:index="index"
+      :items="items"
+      :downloadable="downloadable"
+      :rotatable="rotatable"
+    />
+  </div>
+</template>

package/src/components/LpNumberField.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">
 // Numeric input with stepper buttons (reka NumberField). Themed via tokens.
 import {
@@ -8,6 +15,7 @@ import {
 } from "reka-ui"
 import { useId } from "vue"
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 defineProps<{
   // null = empty field (reka's native state); consumers that need a number
@@ -30,6 +38,11 @@ defineEmits<{ (e: "update:modelValue", value: number | null): void }>()
 // screen the two read as one field, and without this a reader announces "380"
 // and leaves out the milliamps that make it mean anything.
 const unitId = useId()
+
+// The field is full-width with its own control frame — the two things a consumer laying out a compact numeric column needs to change.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex h-(--size-control-md) w-full items-center rounded-control border border-line bg-surface-soft transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
+)
 </script>
 
 <template>
@@ -40,7 +53,8 @@ const unitId = useId()
     :step="step"
     :disabled="disabled"
     data-lp-ring-owner
-    class="flex h-(--size-control-md) w-full items-center rounded-control border border-line bg-surface-soft transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55"
+    :class="rootClass"
+    v-bind="rest"
     @update:model-value="(v) => $emit('update:modelValue', v ?? null)"
   >
     <NumberFieldDecrement

package/src/components/LpOtpInput.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">
 /*
  * One-time-code input (TOTP / 2FA). A row of single-character cells with the
@@ -10,6 +17,7 @@
  */
 import { PinInputInput, PinInputRoot } from "reka-ui"
 import { computed } from "vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
@@ -51,6 +59,11 @@ const cellSize = {
   md: "size-11 text-lg",
   lg: "size-13 text-xl",
 }
+
+// The boxes sit on a fixed gap that a narrow form has to tighten.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex items-center gap-2",
+)
 </script>
 
 <template>
@@ -60,7 +73,8 @@ const cellSize = {
     :mask="mask"
     :disabled="disabled"
     otp
-    class="flex items-center gap-2"
+    :class="rootClass"
+    v-bind="rest"
     @complete="onComplete"
   >
     <PinInputInput

package/src/components/LpPagination.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">
 /*
  * Page navigator. Pairs with LpTable but stands alone.
@@ -14,6 +21,7 @@ import { Motion } from "motion-v"
 import { computed, useId } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
@@ -104,10 +112,17 @@ const navArrow =
 // The sliding brand pill (shared layoutId) glides under the current page.
 const pillId = `lp-page-indicator-${useId()}`
 const pillTransition = usePillTransition()
+
+// Pagination is a nav row with its own spacing, which a compact table footer has to tighten.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex items-center gap-1.5",
+)
 </script>
 
 <template>
-  <nav class="flex items-center gap-1.5" aria-label="Pagination">
+  <nav
+    :class="rootClass"
+    v-bind="rest" aria-label="Pagination">
     <button
       type="button"
       :class="[navBase, navArrow]"

package/src/components/LpPhoneInput.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own 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">
 /*
  * Phone number field — a country picker (flag + dial code) fused with a free-text
@@ -25,6 +32,7 @@ import { useInputFilter } from "../composables/useInputFilter"
 import { type Country, flagEmoji, loadCountries, matchCountryByValue } from "./countries"
 import { OPTION_ITEM, POPOVER_PANEL } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 export interface PhoneDetail {
   /** Matched country, or undefined when the prefix matches none. */
@@ -146,19 +154,26 @@ const sizeClass = {
   md: "h-(--size-control-md) text-sm",
   lg: "h-(--size-control-lg) text-sm",
 }
+
+// The control is full-width with its own frame — the two things a consumer
+// placing it in a narrow column has to change, so `class="w-48"` must win.
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  [
+    "flex w-full items-stretch rounded-control border bg-surface-soft text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring",
+    sizeClass[props.size],
+    props.invalid
+      ? "border-danger focus-within:border-danger focus-within:ring-danger-soft"
+      : "border-line focus-within:border-brand",
+    props.disabled ? "cursor-not-allowed opacity-55" : "",
+  ].join(" "),
+)
 </script>
 
 <template>
   <div
     data-lp-ring-owner
-    class="flex w-full items-stretch rounded-control border bg-surface-soft text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring"
-    :class="[
-      sizeClass[size],
-      invalid
-        ? 'border-danger focus-within:border-danger focus-within:ring-danger-soft'
-        : 'border-line focus-within:border-brand',
-      disabled ? 'cursor-not-allowed opacity-55' : '',
-    ]"
+    :class="rootClass"
+    v-bind="rest"
   >
     <!-- reset-search-term-on-{select,blur}: as in LpSelect, the trigger shows
          the selection and the box only filters, so reka seeding the chosen value

package/src/components/LpPie.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">
 /*
  * Shares of a whole, as a pie or a donut. Same SVG-and-tokens approach as
@@ -23,6 +30,7 @@ import LpNumberFlow from "./LpNumberFlow.vue"
 import LpRollingText from "./LpRollingText.vue"
 import LpShift from "./LpShift.vue"
 import LpTooltip from "./LpTooltip.vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 /** A slice, as reported by every interaction event. */
 export interface SliceEvent {
@@ -545,10 +553,17 @@ const centreLabel = computed(() => {
   if (selected.value.size > 1) return `${selected.value.size} selected`
   return "total"
 })
+
+// The pie sets its own gap between chart and legend, which a narrow card has to close up.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex flex-col gap-3",
+)
 </script>
 
 <template>
-  <div ref="revealAnchor" class="flex flex-col gap-3">
+  <div ref="revealAnchor"
+    :class="rootClass"
+    v-bind="rest">
     <div v-if="title || subtitle" class="flex flex-col gap-0.5">
       <span v-if="title" class="text-sm font-medium text-ink">{{ title }}</span>
       <span v-if="subtitle" class="text-xs text-muted">{{ subtitle }}</span>

package/src/components/LpRadio.vue

@@ -1,16 +1,33 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own 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 { RadioGroupIndicator, RadioGroupItem } from "reka-ui"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 // A single radio item with a slot for rich content (icon, badges, multi-line).
 // Must be placed inside an <LpRadioGroup> (or a reka-ui RadioGroupRoot), which
 // owns the selected value. The default slot replaces the plain label.
-defineProps<{ value: string; label?: string; disabled?: boolean }>()
+const props = defineProps<{ value: string; label?: string; disabled?: boolean }>()
+
+// The label sits a fixed distance from the control, which a dense list of
+// options needs to close up — `class="gap-1"` should win over the default.
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  [
+    "group inline-flex cursor-pointer items-center gap-2 text-sm text-ink",
+    props.disabled ? "cursor-not-allowed opacity-55" : "",
+  ].join(" "),
+)
 </script>
 
 <template>
   <label
-    class="group inline-flex cursor-pointer items-center gap-2 text-sm text-ink"
-    :class="disabled && 'cursor-not-allowed opacity-55'"
+    :class="rootClass"
+    v-bind="rest"
   >
     <RadioGroupItem
       :value="value"

package/src/components/LpRadioGroup.vue

@@ -1,5 +1,13 @@
+<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 { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 export interface RadioOption {
   value: string
@@ -11,13 +19,19 @@ export interface RadioOption {
 // the same RadioGroupRoot, so selection still flows through v-model.
 defineProps<{ modelValue?: string; options?: RadioOption[]; disabled?: boolean }>()
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
+
+// A radio group stacks with a fixed gap; a dense settings list needs it smaller, and a horizontal layout needs it gone.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex flex-col gap-2",
+)
 </script>
 
 <template>
   <RadioGroupRoot
     :model-value="modelValue"
     :disabled="disabled"
-    class="flex flex-col gap-2"
+    :class="rootClass"
+    v-bind="rest"
     @update:model-value="(v) => $emit('update:modelValue', v as string)"
   >
     <slot>

package/src/components/LpSegmented.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own 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">
 /*
  * Segmented control — a compact bar of mutually-exclusive options with a sliding
@@ -9,6 +16,7 @@
 import { Motion } from "motion-v"
 import { ToggleGroupItem, ToggleGroupRoot } from "reka-ui"
 import { useId } from "vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
 import { usePillTransition } from "../composables/usePillTransition"
 import LpIcon from "./LpIcon.vue"
 
@@ -47,6 +55,17 @@ const sizeCls = {
   md: "h-(--size-control-md) text-sm",
 }
 
+// The bar sizes itself from `size` and `block`, which is right until a consumer
+// needs it flush against something — `class="p-0"` and `class="rounded-none"`
+// have to reach the root rather than losing a coin toss with stylesheet order.
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  [
+    "inline-flex items-center gap-1 rounded-control border border-line bg-surface-soft p-1",
+    sizeCls[props.size],
+    props.block ? "flex w-full" : "",
+  ].join(" "),
+)
+
 const pillId = `lp-segmented-${useId()}`
 const pillTransition = usePillTransition()
 </script>
@@ -57,8 +76,8 @@ const pillTransition = usePillTransition()
     type="single"
     :disabled="disabled"
     :rovingFocus="true"
-    class="inline-flex items-center gap-1 rounded-control border border-line bg-surface-soft p-1"
-    :class="[sizeCls[size], block ? 'flex w-full' : '']"
+    :class="rootClass"
+    v-bind="rest"
     @update:model-value="onChange"
   >
     <ToggleGroupItem

package/src/components/LpSidebarNav.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">
 /*
  * Inner body of LpSidebar: the section/item list plus the loading skeleton and
@@ -14,6 +21,7 @@ import LpContextMenu from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import type { SidebarItem, SidebarSection } from "./sidebar"
+import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
   defineProps<{
@@ -66,11 +74,18 @@ function isOpen(section: SidebarSection): boolean {
 }
 
 const pillTransition = usePillTransition()
+
+// The nav fills the remaining height with a fixed gap between groups; a short sidebar needs both under the consumer's control.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "flex min-h-0 flex-1 flex-col gap-4",
+)
 </script>
 
 <template>
   <!-- Loading skeleton: an optional identity row + a run of item rows. -->
-  <div v-if="loading" class="flex min-h-0 flex-1 flex-col gap-4">
+  <div v-if="loading"
+    :class="rootClass"
+    v-bind="rest">
     <div v-if="skeletonHeader" class="flex items-center gap-3 px-1">
       <div class="size-10 shrink-0 animate-pulse rounded-pill bg-surface-soft" />
       <div class="flex-1 space-y-2">