@leavepulse/ui 0.22.22 → 0.24.0

package/dist/chunks/{LpThemeSwitcher-B_kj0T2b.js → LpThemeSwitcher-BgpJgrnP.js}

@@ -23,7 +23,10 @@ const dark = {
     brandSoft: "rgba(0, 188, 255, 0.16)",
     action: "#39e58c",
     actionHover: "#4dffa1",
+    actionSoft: "rgba(57, 229, 140, 0.14)",
     accent: "#f0b35a",
+    accentHover: "#f2bf74",
+    accentSoft: "rgba(240, 179, 90, 0.14)",
     danger: "#ff6f6f",
     dangerHover: "#ff8585",
     dangerSoft: "rgba(255, 111, 111, 0.14)",
@@ -51,7 +54,10 @@ const light = {
     brandSoft: "rgba(0, 134, 199, 0.12)",
     action: "#1f9d5f",
     actionHover: "#23b06b",
+    actionSoft: "rgba(31, 157, 95, 0.12)",
     accent: "#aa6f1d",
+    accentHover: "#b88641",
+    accentSoft: "rgba(170, 111, 29, 0.12)",
     danger: "#c2333b",
     dangerHover: "#d23b44",
     dangerSoft: "rgba(194, 51, 59, 0.12)",
@@ -79,7 +85,10 @@ const lime = {
     brandSoft: "rgba(196, 240, 66, 0.14)",
     action: "#5fd97a",
     actionHover: "#74e88d",
+    actionSoft: "rgba(95, 217, 122, 0.14)",
     accent: "#ffb84d",
+    accentHover: "#ffc369",
+    accentSoft: "rgba(255, 184, 77, 0.14)",
     danger: "#ff6f6f",
     dangerHover: "#ff8585",
     dangerSoft: "rgba(255, 111, 111, 0.14)",
@@ -120,7 +129,10 @@ const leavepulse = {
     brandSoft: "rgba(0, 188, 255, 0.2)",
     action: "#44c2ad",
     actionHover: "#56d3be",
+    actionSoft: "rgba(68, 194, 173, 0.14)",
     accent: "#d36a2c",
+    accentHover: "#da824e",
+    accentSoft: "rgba(211, 106, 44, 0.14)",
     danger: "#f87171",
     dangerHover: "#fca5a5",
     dangerSoft: "rgba(248, 113, 113, 0.14)",
@@ -152,7 +164,10 @@ const rose = {
     brandSoft: "rgba(251, 113, 133, 0.14)",
     action: "#34d399",
     actionHover: "#4adeaa",
+    actionSoft: "rgba(52, 211, 153, 0.14)",
     accent: "#fbbf24",
+    accentHover: "#fcc947",
+    accentSoft: "rgba(251, 191, 36, 0.14)",
     danger: "#ef4444",
     dangerHover: "#f56565",
     dangerSoft: "rgba(239, 68, 68, 0.14)",
@@ -180,7 +195,10 @@ const amber = {
     brandSoft: "rgba(245, 158, 11, 0.14)",
     action: "#4ade80",
     actionHover: "#5cea90",
+    actionSoft: "rgba(74, 222, 128, 0.14)",
     accent: "#38bdf8",
+    accentHover: "#58c8f9",
+    accentSoft: "rgba(56, 189, 248, 0.14)",
     danger: "#f87171",
     dangerHover: "#fa8a8a",
     dangerSoft: "rgba(248, 113, 113, 0.14)",
@@ -208,7 +226,10 @@ const violet = {
     brandSoft: "rgba(167, 139, 250, 0.14)",
     action: "#34d399",
     actionHover: "#4adeaa",
+    actionSoft: "rgba(52, 211, 153, 0.14)",
     accent: "#fbbf24",
+    accentHover: "#fcc947",
+    accentSoft: "rgba(251, 191, 36, 0.14)",
     danger: "#f87171",
     dangerHover: "#fa8a8a",
     dangerSoft: "rgba(248, 113, 113, 0.14)",
@@ -236,7 +257,10 @@ const nord = {
     brandSoft: "rgba(136, 192, 208, 0.16)",
     action: "#a3be8c",
     actionHover: "#b3cb9f",
+    actionSoft: "rgba(163, 190, 140, 0.16)",
     accent: "#ebcb8b",
+    accentHover: "#eed39e",
+    accentSoft: "rgba(235, 203, 139, 0.16)",
     danger: "#bf616a",
     dangerHover: "#cb727b",
     dangerSoft: "rgba(191, 97, 106, 0.16)",
@@ -275,7 +299,10 @@ const COLOR_VARS = {
   brandSoft: "--color-brand-soft",
   action: "--color-action",
   actionHover: "--color-action-hover",
+  actionSoft: "--color-action-soft",
   accent: "--color-accent",
+  accentHover: "--color-accent-hover",
+  accentSoft: "--color-accent-soft",
   danger: "--color-danger",
   dangerHover: "--color-danger-hover",
   dangerSoft: "--color-danger-soft",

package/dist/components/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-peTpNSJK.js";
+import { _ as _sfc_main } from "../chunks/LpAddressInput-BTqnUXZG.js";
 export {
   _sfc_main as default
 };

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

@@ -5,16 +5,30 @@ declare const __VLS_export: import('vue').DefineComponent<{
     src?: string;
     alt?: string;
     fallback?: string;
-    size?: "sm" | "md" | "lg" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
+    /** Explicit pixel size, wins over `size` — for avatars keyed to a layout. */
+    pixelSize?: number;
+    /** Silhouette: circle for people, soft/square for servers and projects. */
+    shape?: "circle" | "square" | "soft" | undefined;
+    /** Draws a hairline ring, for avatars laid over imagery or other avatars. */
+    ring?: boolean;
     /** Right-click menu (e.g. account quick actions). Consumer-supplied. */
     menuItems?: ContextMenuItemDef[];
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
     src?: string;
     alt?: string;
     fallback?: string;
-    size?: "sm" | "md" | "lg" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
+    /** Explicit pixel size, wins over `size` — for avatars keyed to a layout. */
+    pixelSize?: number;
+    /** Silhouette: circle for people, soft/square for servers and projects. */
+    shape?: "circle" | "square" | "soft" | undefined;
+    /** Draws a hairline ring, for avatars laid over imagery or other avatars. */
+    ring?: boolean;
     /** Right-click menu (e.g. account quick actions). Consumer-supplied. */
     menuItems?: ContextMenuItemDef[];
 }> & Readonly<{}>, {
-    size: "sm" | "md" | "lg";
+    size: "sm" | "md" | "lg" | "xs" | "xl";
+    shape: "circle" | "square" | "soft";
+    ring: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/LpAvatar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAvatar-B1Ez0ZAx.js";
+import { _ as _sfc_main } from "../chunks/LpAvatar-CzCE5cXg.js";
 export {
   _sfc_main as default
 };

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

@@ -1,14 +1,26 @@
+import { Component } from 'vue';
 export interface Crumb {
     label: string;
     href?: string;
+    /** Destination for router links; passed straight to the `as` component. */
+    to?: string | Record<string, unknown>;
+    /** Leading icon, for crumbs that carry a glyph (a home root, a section). */
+    icon?: string;
 }
 type __VLS_Props = {
     items: Crumb[];
+    /**
+     * Root element/component for linked crumbs. Defaults to a native <a>;
+     * pass a router link component to keep client-side navigation.
+     */
+    as?: string | Component;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     navigate: (item: Crumb, index: number) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onNavigate?: ((item: Crumb, index: number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    as: string | Component;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/LpBreadcrumbs.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpBreadcrumbs-B7Aqatzw.js";
+import { _ as _sfc_main } from "../chunks/LpBreadcrumbs-5uvViCXi.js";
 export {
   _sfc_main as default
 };

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

@@ -5,6 +5,13 @@ type __VLS_Props = {
     confirmLabel?: string;
     cancelLabel?: string;
     danger?: boolean;
+    /**
+     * The confirm action is in flight: the button disables and swaps to
+     * `loadingLabel`, and confirming no longer closes the dialog — the owner
+     * closes it once the work settles, so a failure can stay on screen.
+     */
+    loading?: boolean;
+    loadingLabel?: string;
 };
 declare var __VLS_10: {};
 type __VLS_Slots = {} & {
@@ -21,6 +28,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     confirmLabel: string;
     cancelLabel: string;
+    loadingLabel: string;
 }, {}, {}, {}, 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/LpConfirmDialog.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpConfirmDialog-DOU_zaTI.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-CObRah9c.js";
 export {
   _sfc_main as default
 };

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

@@ -2,6 +2,11 @@ type __VLS_Props = {
     icon?: string;
     title: string;
     description?: string;
+    /**
+     * Tightens the block for empty states nested inside a card or a panel,
+     * where the full-page padding would dwarf its container.
+     */
+    compact?: boolean;
 };
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {

package/dist/components/LpEmptyState.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpEmptyState-CrfyRJUG.js";
+import { _ as _sfc_main } from "../chunks/LpEmptyState-BV3q7Qyi.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpFileTree.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTree-Cw50eG_y.js";
+import { _ as _sfc_main } from "../chunks/LpFileTree-nU1wRRxZ.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpFileTreeNode.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTreeNode-DFg4PhOK.js";
+import { _ as _sfc_main } from "../chunks/LpFileTreeNode-D7WgUPcJ.js";
 export {
   _sfc_main as default
 };

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

@@ -11,6 +11,12 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     hint?: string;
     error?: string;
     icon?: string;
+    /**
+     * Marks the label with the required indicator. The attribute still reaches
+     * the underlying <input> for native validation; this only makes the field
+     * read as required.
+     */
+    required?: boolean;
     /**
      * RegExp/string the whole value must match to be valid. Validation only —
      * never blocks typing; a non-matching non-empty value shows the invalid
@@ -40,6 +46,12 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     hint?: string;
     error?: string;
     icon?: string;
+    /**
+     * Marks the label with the required indicator. The attribute still reaches
+     * the underlying <input> for native validation; this only makes the field
+     * read as required.
+     */
+    required?: boolean;
     /**
      * RegExp/string the whole value must match to be valid. Validation only —
      * never blocks typing; a non-matching non-empty value shows the invalid

package/dist/components/LpInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpInput-BfLIWV-P.js";
+import { _ as _sfc_main } from "../chunks/LpInput-jwqXlAy0.js";
 export {
   _sfc_main as default
 };

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

@@ -1,21 +1,41 @@
+import { Component } from 'vue';
 type __VLS_Props = {
     href?: string;
     external?: boolean;
+    /** Shorthand for `tone="muted"`. */
     muted?: boolean;
+    /**
+     * "brand" — the accent link colour (default).
+     * "ink"   — inherits body text colour; for links that sit inside prose or
+     *   chrome where an accent would shout (breadcrumbs, footers, nav).
+     * "muted" / "soft" — progressively quieter, both resolving to ink on hover.
+     */
+    tone?: "brand" | "ink" | "muted" | "soft";
+    /**
+     * Root element/component. Defaults to a native <a>. Pass a router link
+     * component (e.g. NuxtLink or RouterLink) to keep client-side navigation;
+     * the kit stays DOM-agnostic, the consumer supplies the link component.
+     * Router links take their destination through their own prop (`to`), which
+     * falls through as a plain attribute.
+     */
+    as?: string | Component;
     /**
      * "default" — plain hover underline.
+     * "underline" — underlined at rest; for links inside running prose,
+     *   where hover-only underlines leave the link invisible until pointed at.
      * "reveal"  — an underline bar that grows in from the left on hover
      *   (origin-left scale-x 0→1). The LeavePulse landing "monitoring" link feel;
      *   good for inline prose links and nav items that want a bit of motion.
      */
-    variant?: "default" | "reveal";
+    variant?: "default" | "underline" | "reveal";
 };
-declare var __VLS_1: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    variant: "default" | "reveal";
+    as: string | Component;
+    variant: "default" | "underline" | "reveal";
 }, {}, {}, {}, 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-DHwOEp4e.js";
+import { _ as _sfc_main } from "../chunks/LpLink-Bu01SZzB.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpNotificationBell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpNotificationBell-a08cl0yY.js";
+import { _ as _sfc_main } from "../chunks/LpNotificationBell-X1M30e0X.js";
 export {
   _sfc_main as default
 };

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

@@ -5,6 +5,10 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     placeholder?: string;
     invalid?: boolean;
     disabled?: boolean;
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
 }, {
     focus: (options?: FocusOptions) => void | undefined;
     blur: () => void | undefined;
@@ -16,6 +20,10 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     placeholder?: string;
     invalid?: boolean;
     disabled?: boolean;
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {

package/dist/components/LpPasswordInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPasswordInput-BfjDrvZq.js";
+import { _ as _sfc_main } from "../chunks/LpPasswordInput-Bmo6q9Kd.js";
 export {
   _sfc_main as default
 };

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

@@ -1,9 +1,23 @@
 export interface Step {
     label: string;
+    /** Stable id, for flows whose steps are addressed by name rather than order. */
+    key?: string;
+    /** Replaces the step number while the step is pending or current. */
+    icon?: string;
 }
 type __VLS_Props = {
     steps: Step[];
-    current: number;
+    /**
+     * The active step: an index, or a step `key` for keyed flows.
+     */
+    current: number | string;
+    /**
+     * Which steps count as done. Omit it and everything before `current` is
+     * complete, which is the linear case. Pass keys (or indices) when a flow can
+     * finish steps out of order — a verification that succeeds before its
+     * prerequisite is filled in, say.
+     */
+    completed?: Array<string | number>;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/LpStepper.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpStepper-5dFTrW21.js";
+import { _ as _sfc_main } from "../chunks/LpStepper-Wtl-6nUh.js";
 export {
   _sfc_main as default
 };

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

@@ -7,6 +7,11 @@ type __VLS_Props = {
     label?: string;
     hint?: string;
     error?: string;
+    /**
+     * Marks the label with the required indicator; the attribute still reaches
+     * the <textarea> for native validation.
+     */
+    required?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;

package/dist/components/LpTextarea.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTextarea-BDl7PR9U.js";
+import { _ as _sfc_main } from "../chunks/LpTextarea-1ENb3ZAO.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpThemeSwitcher.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-B_kj0T2b.js";
+import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-BgpJgrnP.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -1,43 +1,43 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-peTpNSJK.js";
+import { _ as _2 } from "./chunks/LpAddressInput-BTqnUXZG.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DFKrd1Ne.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpAlert-BAYHDSS1.js";
 import { _ as _5 } from "./chunks/LpAppShell-CaQYQKZV.js";
 import { _ as _6 } from "./chunks/LpAutocomplete-DExlIZe_.js";
-import { _ as _7 } from "./chunks/LpAvatar-B1Ez0ZAx.js";
+import { _ as _7 } from "./chunks/LpAvatar-CzCE5cXg.js";
 import { _ as _8 } from "./chunks/LpBadge-BPodVcJa.js";
-import { _ as _9 } from "./chunks/LpBreadcrumbs-B7Aqatzw.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 _13 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _14 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _15 } from "./chunks/LpConfirmDialog-DOU_zaTI.js";
+import { _ as _15 } from "./chunks/LpConfirmDialog-CObRah9c.js";
 import { _ as _16 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _17 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _18 } from "./chunks/LpDisclosure-DP6yfgfM.js";
 import { _ as _19 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _20 } from "./chunks/LpDrawer-DAJN5rGK.js";
 import { _ as _21 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
-import { _ as _22 } from "./chunks/LpEmptyState-CrfyRJUG.js";
-import { _ as _23 } from "./chunks/LpFileTree-Cw50eG_y.js";
+import { _ as _22 } from "./chunks/LpEmptyState-BV3q7Qyi.js";
+import { _ as _23 } from "./chunks/LpFileTree-nU1wRRxZ.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _24 } from "./chunks/LpFormField-CesaPWPO.js";
 import { _ as _25 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { _ as _26 } from "./chunks/LpInfraNode-qIL3l7IO.js";
-import { _ as _27 } from "./chunks/LpInput-BfLIWV-P.js";
+import { _ as _27 } from "./chunks/LpInput-jwqXlAy0.js";
 import { _ as _28 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
-import { _ as _29 } from "./chunks/LpLink-DHwOEp4e.js";
+import { _ as _29 } from "./chunks/LpLink-Bu01SZzB.js";
 import { _ as _30 } from "./chunks/LpLogViewer-B1aLUVdz.js";
 import { _ as _31 } from "./chunks/LpModal-D_o-56To.js";
-import { _ as _32 } from "./chunks/LpNotificationBell-a08cl0yY.js";
+import { _ as _32 } from "./chunks/LpNotificationBell-X1M30e0X.js";
 import { _ as _33 } from "./chunks/LpNumberField-B3JuQFol.js";
 import { _ as _34 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _35 } from "./chunks/LpPagination-CeGuNe_q.js";
-import { _ as _36 } from "./chunks/LpPasswordInput-BfjDrvZq.js";
+import { _ as _36 } from "./chunks/LpPasswordInput-Bmo6q9Kd.js";
 import { _ as _37 } from "./chunks/LpPhoneInput-NXXjciJJ.js";
 import { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _38 } from "./chunks/LpPopover-8268UmlC.js";
@@ -54,14 +54,14 @@ import { _ as _47 } from "./chunks/LpSidebar-D3GGLSE7.js";
 import { _ as _48 } from "./chunks/LpSkeleton-eSFIo4kD.js";
 import { _ as _49 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _50 } from "./chunks/LpStat-CdbEFOvn.js";
-import { _ as _51 } from "./chunks/LpStepper-5dFTrW21.js";
+import { _ as _51 } from "./chunks/LpStepper-Wtl-6nUh.js";
 import { _ as _52 } from "./chunks/LpSwitch-v6fnccSM.js";
 import { _ as _53 } from "./chunks/LpTable-DTj52qlg.js";
 import { _ as _54 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
 import { _ as _55 } from "./chunks/LpTabs-Cefe_lys.js";
-import { _ as _56 } from "./chunks/LpTextarea-BDl7PR9U.js";
-import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";
-import { D, _ as _57, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";
+import { _ as _56 } from "./chunks/LpTextarea-1ENb3ZAO.js";
+import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-BgpJgrnP.js";
+import { D, _ as _57, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-BgpJgrnP.js";
 import { _ as _58 } from "./chunks/LpTilt-DuyKbpkA.js";
 import { _ as _59 } from "./chunks/LpToaster-gDB1EaU3.js";
 import { _ as _60 } from "./chunks/LpTooltip-D1hbjQWG.js";

package/dist/theme/tokens.d.ts

@@ -11,7 +11,10 @@ export interface ColorTokens {
     brandSoft: string;
     action: string;
     actionHover: string;
+    actionSoft: string;
     accent: string;
+    accentHover: string;
+    accentSoft: string;
     danger: string;
     dangerHover: string;
     dangerSoft: string;

package/package.json

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

package/src/components/LpAvatar.vue

@@ -12,15 +12,25 @@ import { computed, onMounted, ref } from "vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 
 const avatar = tv({
-  base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-pill bg-surface-soft font-medium text-muted-strong",
+  base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-surface-soft font-medium text-muted-strong",
   variants: {
     size: {
+      xs: "size-5 text-[10px]",
       sm: "size-7 text-xs",
       md: "size-9 text-sm",
       lg: "size-12 text-base",
+      xl: "size-16 text-lg",
     },
+    // People read as circles; things (servers, projects, orgs) read as
+    // rounded squares — the same distinction platform icons make.
+    shape: {
+      circle: "rounded-pill",
+      soft: "rounded-card",
+      square: "rounded-control",
+    },
+    ring: { true: "ring-2 ring-line", false: "" },
   },
-  defaultVariants: { size: "md" },
+  defaultVariants: { size: "md", shape: "circle", ring: false },
 })
 
 type AvatarVariants = VariantProps<typeof avatar>
@@ -31,10 +41,28 @@ const props = withDefaults(
     alt?: string
     fallback?: string
     size?: AvatarVariants["size"]
+    /** Explicit pixel size, wins over `size` — for avatars keyed to a layout. */
+    pixelSize?: number
+    /** Silhouette: circle for people, soft/square for servers and projects. */
+    shape?: AvatarVariants["shape"]
+    /** Draws a hairline ring, for avatars laid over imagery or other avatars. */
+    ring?: boolean
     /** Right-click menu (e.g. account quick actions). Consumer-supplied. */
     menuItems?: ContextMenuItemDef[]
   }>(),
-  { size: "md" },
+  { size: "md", shape: "circle", ring: false },
+)
+
+// A pixel size drives both box and glyph, so the initials keep their
+// proportion instead of staying at the preset's step.
+const sizeStyle = computed(() =>
+  props.pixelSize
+    ? {
+        width: `${props.pixelSize}px`,
+        height: `${props.pixelSize}px`,
+        fontSize: `${Math.max(10, Math.round(props.pixelSize * 0.4))}px`,
+      }
+    : undefined,
 )
 
 const initials = computed(
@@ -55,12 +83,12 @@ onMounted(() => {
 
 <template>
   <LpContextMenu v-if="menuItems?.length" :items="menuItems">
-    <AvatarRoot :class="avatar({ size })" v-bind="$attrs">
+    <AvatarRoot :class="avatar({ size: pixelSize ? undefined : size, shape, ring })" :style="sizeStyle" v-bind="$attrs">
       <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover" />
       <AvatarFallback>{{ initials }}</AvatarFallback>
     </AvatarRoot>
   </LpContextMenu>
-  <AvatarRoot v-else :class="avatar({ size })" v-bind="$attrs">
+  <AvatarRoot v-else :class="avatar({ size: pixelSize ? undefined : size, shape, ring })" :style="sizeStyle" v-bind="$attrs">
     <AvatarImage v-if="src" :src="src" :alt="alt" class="size-full object-cover" />
     <AvatarFallback>{{ initials }}</AvatarFallback>
   </AvatarRoot>