@leavepulse/ui 0.22.22 → 0.23.0

package/dist/chunks/{LpAddressInput-peTpNSJK.js → LpAddressInput-BTqnUXZG.js}

@@ -5,7 +5,7 @@ import { _ as _sfc_main$2 } from "./LpAutocomplete-DExlIZe_.js";
 import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$1 } from "./LpFormField-CesaPWPO.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$5 } from "./LpInput-BfLIWV-P.js";
+import { _ as _sfc_main$5 } from "./LpInput-jwqXlAy0.js";
 import { _ as _sfc_main$7 } from "./LpModal-D_o-56To.js";
 import { _ as _sfc_main$6 } from "./LpSelect-Cw8-gL5F.js";
 const _hoisted_1 = { class: "flex flex-col gap-3" };

package/dist/chunks/{LpAvatar-B1Ez0ZAx.js → LpAvatar-D-jHoHR7.js}

@@ -11,19 +11,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     alt: {},
     fallback: {},
     size: { default: "md" },
+    shape: { default: "circle" },
+    ring: { type: Boolean, default: false },
     menuItems: {}
   },
   setup(__props) {
     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: {
           sm: "size-7 text-xs",
           md: "size-9 text-sm",
           lg: "size-12 text-base"
-        }
+        },
+        // 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 }
     });
     const props = __props;
     const initials = computed(
@@ -40,7 +50,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createVNode(unref(AvatarRoot), mergeProps({
-            class: unref(avatar)({ size: __props.size })
+            class: unref(avatar)({ size: __props.size, shape: __props.shape, ring: __props.ring })
           }, _ctx.$attrs), {
             default: withCtx(() => [
               __props.src && mounted.value ? (openBlock(), createBlock(unref(AvatarImage), {
@@ -62,7 +72,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         _: 1
       }, 8, ["items"])) : (openBlock(), createBlock(unref(AvatarRoot), mergeProps({
         key: 1,
-        class: unref(avatar)({ size: __props.size })
+        class: unref(avatar)({ size: __props.size, shape: __props.shape, ring: __props.ring })
       }, _ctx.$attrs), {
         default: withCtx(() => [
           __props.src ? (openBlock(), createBlock(unref(AvatarImage), {

package/dist/chunks/{LpConfirmDialog-DOU_zaTI.js → LpConfirmDialog-CObRah9c.js}

@@ -9,14 +9,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     description: {},
     confirmLabel: { default: "Confirm" },
     cancelLabel: { default: "Cancel" },
-    danger: { type: Boolean }
+    danger: { type: Boolean },
+    loading: { type: Boolean },
+    loadingLabel: { default: "Working…" }
   },
   emits: ["update:open", "confirm", "cancel"],
   setup(__props, { emit: __emit }) {
+    const props = __props;
     const emit = __emit;
     function confirm() {
       emit("confirm");
-      emit("update:open", false);
+      if (!props.loading) emit("update:open", false);
     }
     function cancel() {
       emit("cancel");
@@ -32,22 +35,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         footer: withCtx(() => [
           createVNode(_sfc_main$2, {
             variant: "ghost",
+            disabled: __props.loading,
             onClick: cancel
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(__props.cancelLabel), 1)
             ]),
             _: 1
-          }),
+          }, 8, ["disabled"]),
           createVNode(_sfc_main$2, {
             variant: __props.danger ? "danger" : "solid",
+            disabled: __props.loading,
             onClick: confirm
           }, {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(__props.confirmLabel), 1)
+              createTextVNode(toDisplayString(__props.loading ? __props.loadingLabel : __props.confirmLabel), 1)
             ]),
             _: 1
-          }, 8, ["variant"])
+          }, 8, ["variant", "disabled"])
         ]),
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")

package/dist/chunks/{LpFileTree-Cw50eG_y.js → LpFileTree-CN0IOIY7.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, watch, computed, openBlock, createElementBlock, Fragment, renderList, normalizeStyle, createBlock, createVNode, withCtx, createElementVNode, renderSlot, mergeProps, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { computeStats, formatSize, sortNodes, subtreeIds, ancestorIds } from "../components/fileTree.js";
 import { _ as _sfc_main$1 } from "./LpEmptyState-CrfyRJUG.js";
-import { _ as _sfc_main$3 } from "./LpFileTreeNode-DFg4PhOK.js";
+import { _ as _sfc_main$3 } from "./LpFileTreeNode-D7WgUPcJ.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
 const _hoisted_1 = {
   key: 0,

package/dist/chunks/{LpFileTreeNode-DFg4PhOK.js → LpFileTreeNode-D7WgUPcJ.js}

@@ -5,25 +5,24 @@ import { _ as _sfc_main$1 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
 const _hoisted_1 = ["aria-level", "aria-selected", "aria-expanded", "aria-disabled"];
 const _hoisted_2 = ["data-node-id", "tabindex"];
-const _hoisted_3 = { class: "flex size-4 shrink-0 items-center justify-center" };
-const _hoisted_4 = { class: "min-w-0 flex-1 shrink-[2] truncate" };
-const _hoisted_5 = {
+const _hoisted_3 = { class: "min-w-0 flex-1 shrink-[2] truncate" };
+const _hoisted_4 = {
   key: 1,
   class: "shrink-0 rounded-pill bg-brand-soft px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-brand"
 };
-const _hoisted_6 = {
+const _hoisted_5 = {
   key: 2,
   class: "min-w-0 shrink truncate text-xs text-muted"
 };
-const _hoisted_7 = {
+const _hoisted_6 = {
   key: 3,
   class: "shrink-0 text-xs tabular-nums text-muted/80"
 };
-const _hoisted_8 = {
+const _hoisted_7 = {
   key: 4,
   class: "w-16 shrink-0 text-right text-xs tabular-nums text-muted"
 };
-const _hoisted_9 = {
+const _hoisted_8 = {
   key: 0,
   role: "group",
   class: "flex min-w-0 flex-col overflow-hidden"
@@ -134,7 +133,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               style: normalizeStyle({ paddingLeft: `${__props.depth * 14 + 6}px` }),
               onClick: withModifiers(onActivate, ["stop"])
             }, [
-              createElementVNode("span", _hoisted_3, [
+              createElementVNode("span", {
+                class: normalizeClass(["flex size-4 shrink-0 items-center justify-center", canExpand.value ? "cursor-pointer rounded-sm hover:bg-line" : ""]),
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => canExpand.value && !__props.node.disabled ? emit("toggle", __props.node) : void 0, ["stop"]))
+              }, [
                 isLoading.value ? (openBlock(), createBlock(_sfc_main$2, {
                   key: 0,
                   name: "lucide:loader-circle",
@@ -146,7 +148,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   size: 14,
                   class: normalizeClass(["text-muted transition-transform duration-[var(--duration-fast)]", isOpen.value ? "rotate-90" : ""])
                 }, null, 8, ["class"])) : createCommentVNode("", true)
-              ]),
+              ], 2),
               __props.checkable ? (openBlock(), createBlock(_sfc_main$3, {
                 key: 0,
                 "model-value": checkState.value === "checked",
@@ -154,16 +156,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 disabled: __props.node.disabled,
                 class: "shrink-0",
                 "aria-label": __props.node.name,
-                onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                onClick: _cache[1] || (_cache[1] = withModifiers(() => {
                 }, ["stop"])),
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => emit("check", __props.node, $event))
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => emit("check", __props.node, $event))
               }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label"])) : createCommentVNode("", true),
               createVNode(_sfc_main$2, {
                 name: unref(fileIcon)(__props.node, isOpen.value),
                 size: __props.iconSize,
                 class: normalizeClass(["shrink-0", __props.node.disabled ? "" : isDir.value ? "text-brand" : "text-muted"])
               }, null, 8, ["name", "size", "class"]),
-              createElementVNode("span", _hoisted_4, [
+              createElementVNode("span", _hoisted_3, [
                 renderSlot(_ctx.$slots, "row", {
                   node: __props.node,
                   depth: __props.depth,
@@ -173,10 +175,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   createTextVNode(toDisplayString(__props.node.name), 1)
                 ])
               ]),
-              countLabel.value ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(countLabel.value), 1)) : createCommentVNode("", true),
-              __props.node.meta ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.node.meta), 1)) : createCommentVNode("", true),
-              modifiedLabel.value ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(modifiedLabel.value), 1)) : createCommentVNode("", true),
-              sizeLabel.value ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(sizeLabel.value), 1)) : createCommentVNode("", true)
+              countLabel.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(countLabel.value), 1)) : createCommentVNode("", true),
+              __props.node.meta ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.node.meta), 1)) : createCommentVNode("", true),
+              modifiedLabel.value ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(modifiedLabel.value), 1)) : createCommentVNode("", true),
+              sizeLabel.value ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(sizeLabel.value), 1)) : createCommentVNode("", true)
             ], 14, _hoisted_2)
           ]),
           _: 3
@@ -187,7 +189,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onLeave: onBranchLeave
         }, {
           default: withCtx(() => [
-            isOpen.value && hasChildren.value ? (openBlock(), createElementBlock("ul", _hoisted_9, [
+            isOpen.value && hasChildren.value ? (openBlock(), createElementBlock("ul", _hoisted_8, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child, i) => {
                 return openBlock(), createBlock(_component_LpFileTreeNode, {
                   key: child.id,
@@ -206,10 +208,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   stats: __props.stats,
                   "show-size": __props.showSize,
                   "show-modified": __props.showModified,
-                  onSelect: _cache[2] || (_cache[2] = ($event) => emit("select", $event)),
-                  onToggle: _cache[3] || (_cache[3] = ($event) => emit("toggle", $event)),
-                  onFocus: _cache[4] || (_cache[4] = ($event) => emit("focus", $event)),
-                  onCheck: _cache[5] || (_cache[5] = (n, v) => emit("check", n, v))
+                  onSelect: _cache[3] || (_cache[3] = ($event) => emit("select", $event)),
+                  onToggle: _cache[4] || (_cache[4] = ($event) => emit("toggle", $event)),
+                  onFocus: _cache[5] || (_cache[5] = ($event) => emit("focus", $event)),
+                  onCheck: _cache[6] || (_cache[6] = (n, v) => emit("check", n, v))
                 }, {
                   row: withCtx((slotProps) => [
                     renderSlot(_ctx.$slots, "row", mergeProps({ ref_for: true }, slotProps))

package/dist/chunks/{LpInput-BfLIWV-P.js → LpInput-jwqXlAy0.js}

@@ -7,7 +7,7 @@ const _hoisted_1 = {
   key: 0,
   class: "flex shrink-0 items-center text-muted"
 };
-const _hoisted_2 = ["type", "value", "placeholder", "disabled", "aria-invalid"];
+const _hoisted_2 = ["type", "value", "placeholder", "disabled", "required", "aria-invalid"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -23,6 +23,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     hint: {},
     error: {},
     icon: {},
+    required: { type: Boolean },
     pattern: {},
     restrict: {}
   },
@@ -90,6 +91,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         label: hasField.value ? __props.label : void 0,
         hint: hasField.value ? __props.hint : void 0,
         error: hasField.value ? __props.error : void 0,
+        required: hasField.value ? __props.required : void 0,
         class: normalizeClass(hasField.value ? rootClass.value : void 0),
         style: normalizeStyle(hasField.value ? rootStyle.value : void 0)
       }, {
@@ -116,6 +118,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               value: __props.modelValue,
               placeholder: __props.placeholder,
               disabled: __props.disabled,
+              required: __props.required || void 0,
               "aria-invalid": isInvalidState.value || void 0,
               class: [
                 "lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted",
@@ -132,7 +135,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ], 6)
         ]),
         _: 3
-      }, 8, ["label", "hint", "error", "class", "style"]);
+      }, 8, ["label", "hint", "error", "required", "class", "style"]);
     };
   }
 });

package/dist/chunks/{LpLink-DHwOEp4e.js → LpLink-DU9kkKGW.js}

@@ -1,5 +1,4 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
-const _hoisted_1 = ["href", "target", "rel"];
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from "vue";
 const revealClass = "relative after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-[var(--duration-medium)] hover:after:scale-x-100 focus-visible:after:scale-x-100";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpLink",
@@ -7,27 +6,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     href: {},
     external: { type: Boolean },
     muted: { type: Boolean },
+    tone: {},
+    as: { default: "a" },
     variant: { default: "default" }
   },
   setup(__props) {
     const props = __props;
+    const isAnchor = computed(() => props.as === "a");
     const rel = computed(() => props.external ? "noopener noreferrer" : void 0);
     const target = computed(() => props.external ? "_blank" : void 0);
-    const colorClass = computed(
-      () => props.muted ? "text-muted hover:text-ink" : "text-brand hover:text-brand-hover"
-    );
+    const colorClass = computed(() => {
+      const tone = props.tone ?? (props.muted ? "muted" : "brand");
+      switch (tone) {
+        case "ink":
+          return "text-ink";
+        case "muted":
+          return "text-muted-strong hover:text-ink";
+        case "soft":
+          return "text-muted hover:text-ink";
+        default:
+          return "text-brand hover:text-brand-hover";
+      }
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("a", {
-        href: __props.href,
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+        href: isAnchor.value ? __props.href : void 0,
         target: target.value,
         rel: rel.value,
         class: normalizeClass(["inline-flex items-center gap-1 underline-offset-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring", [
           colorClass.value,
           __props.variant === "reveal" ? revealClass : "hover:underline"
         ]])
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 10, _hoisted_1);
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["href", "target", "rel", "class"]);
     };
   }
 });

package/dist/chunks/{LpPasswordInput-BfjDrvZq.js → LpPasswordInput-Bmo6q9Kd.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, openBlock, createBlock, createSlots, withCtx, createElementVNode, createVNode, renderSlot } from "vue";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpInput-BfLIWV-P.js";
+import { _ as _sfc_main$1 } from "./LpInput-jwqXlAy0.js";
 const _hoisted_1 = ["aria-label"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -10,7 +10,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     modelValue: {},
     placeholder: {},
     invalid: { type: Boolean },
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    label: {},
+    hint: {},
+    error: {},
+    required: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
@@ -30,6 +34,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         placeholder: __props.placeholder,
         invalid: __props.invalid,
         disabled: __props.disabled,
+        label: __props.label,
+        hint: __props.hint,
+        error: __props.error,
+        required: __props.required,
         "onUpdate:modelValue": _cache[1] || (_cache[1] = (v) => _ctx.$emit("update:modelValue", v))
       }, createSlots({
         trailing: withCtx(() => [
@@ -55,7 +63,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["model-value", "type", "placeholder", "invalid", "disabled"]);
+      ]), 1032, ["model-value", "type", "placeholder", "invalid", "disabled", "label", "hint", "error", "required"]);
     };
   }
 });

package/dist/chunks/{LpTextarea-BDl7PR9U.js → LpTextarea-1ENb3ZAO.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementVNode } from "vue";
 import { _ as _sfc_main$1 } from "./LpFormField-CesaPWPO.js";
-const _hoisted_1 = ["value", "placeholder", "rows", "disabled"];
+const _hoisted_1 = ["value", "placeholder", "rows", "disabled", "required"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTextarea",
   props: {
@@ -11,7 +11,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean },
     label: {},
     hint: {},
-    error: {}
+    error: {},
+    required: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props) {
@@ -22,6 +23,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         label: hasField.value ? __props.label : void 0,
         hint: hasField.value ? __props.hint : void 0,
         error: hasField.value ? __props.error : void 0,
+        required: hasField.value ? __props.required : void 0,
         class: normalizeClass(hasField.value ? void 0 : "contents")
       }, {
         default: withCtx(() => [
@@ -30,12 +32,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             placeholder: __props.placeholder,
             rows: __props.rows ?? 4,
             disabled: __props.disabled,
+            required: __props.required || void 0,
             class: normalizeClass(["w-full resize-y rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55", __props.invalid || __props.error ? "border-danger focus:border-danger focus:ring-danger-soft" : "border-line"]),
             onInput: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.value))
           }, null, 42, _hoisted_1)
         ]),
         _: 1
-      }, 8, ["label", "hint", "error", "class"]);
+      }, 8, ["label", "hint", "error", "required", "class"]);
     };
   }
 });

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

@@ -6,6 +6,10 @@ declare const __VLS_export: import('vue').DefineComponent<{
     alt?: string;
     fallback?: string;
     size?: "sm" | "md" | "lg" | undefined;
+    /** 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<{
@@ -13,8 +17,14 @@ declare const __VLS_export: import('vue').DefineComponent<{
     alt?: string;
     fallback?: string;
     size?: "sm" | "md" | "lg" | undefined;
+    /** 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";
+    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-D-jHoHR7.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/LpFileTree.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTree-Cw50eG_y.js";
+import { _ as _sfc_main } from "../chunks/LpFileTree-CN0IOIY7.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,7 +1,24 @@
+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.
      * "reveal"  — an underline bar that grows in from the left on hover
@@ -10,11 +27,12 @@ type __VLS_Props = {
      */
     variant?: "default" | "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<{}>, {
+    as: string | Component;
     variant: "default" | "reveal";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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-DU9kkKGW.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/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,11 +1,11 @@
 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-D-jHoHR7.js";
 import { _ as _8 } from "./chunks/LpBadge-BPodVcJa.js";
 import { _ as _9 } from "./chunks/LpBreadcrumbs-B7Aqatzw.js";
 import { _ as _10 } from "./chunks/LpButton-5VXXCjwF.js";
@@ -14,7 +14,7 @@ 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";
@@ -22,22 +22,22 @@ 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 _23 } from "./chunks/LpFileTree-CN0IOIY7.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-DU9kkKGW.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 _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";
@@ -59,9 +59,9 @@ 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.23.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpAvatar.vue

@@ -12,15 +12,23 @@ 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: {
       sm: "size-7 text-xs",
       md: "size-9 text-sm",
       lg: "size-12 text-base",
     },
+    // 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 +39,14 @@ const props = withDefaults(
     alt?: string
     fallback?: string
     size?: AvatarVariants["size"]
+    /** 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 },
 )
 
 const initials = computed(
@@ -55,12 +67,12 @@ onMounted(() => {
 
 <template>
   <LpContextMenu v-if="menuItems?.length" :items="menuItems">
-    <AvatarRoot :class="avatar({ size })" v-bind="$attrs">
+    <AvatarRoot :class="avatar({ size, shape, ring })" 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, shape, ring })" v-bind="$attrs">
     <AvatarImage v-if="src" :src="src" :alt="alt" class="size-full object-cover" />
     <AvatarFallback>{{ initials }}</AvatarFallback>
   </AvatarRoot>

package/src/components/LpConfirmDialog.vue

@@ -3,7 +3,7 @@
 import LpButton from "./LpButton.vue"
 import LpModal from "./LpModal.vue"
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     open?: boolean
     title?: string
@@ -11,8 +11,15 @@ withDefaults(
     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
   }>(),
-  { confirmLabel: "Confirm", cancelLabel: "Cancel" },
+  { confirmLabel: "Confirm", cancelLabel: "Cancel", loadingLabel: "Working…" },
 )
 
 const emit = defineEmits<{
@@ -23,7 +30,9 @@ const emit = defineEmits<{
 
 function confirm() {
   emit("confirm")
-  emit("update:open", false)
+  // An async confirm owns its own dismissal; closing here would tear the
+  // dialog down before the caller knows whether the action succeeded.
+  if (!props.loading) emit("update:open", false)
 }
 function cancel() {
   emit("cancel")
@@ -40,9 +49,15 @@ function cancel() {
   >
     <slot />
     <template #footer>
-      <LpButton variant="ghost" @click="cancel">{{ cancelLabel }}</LpButton>
-      <LpButton :variant="danger ? 'danger' : 'solid'" @click="confirm">
-        {{ confirmLabel }}
+      <LpButton variant="ghost" :disabled="loading" @click="cancel">
+        {{ cancelLabel }}
+      </LpButton>
+      <LpButton
+        :variant="danger ? 'danger' : 'solid'"
+        :disabled="loading"
+        @click="confirm"
+      >
+        {{ loading ? loadingLabel : confirmLabel }}
       </LpButton>
     </template>
   </LpModal>

package/src/components/LpFileTreeNode.vue

@@ -178,8 +178,17 @@ function onActivate() {
         @click.stop="onActivate"
       >
         <!-- Chevron sits in a fixed-width slot so names line up whether or not
-             the row can expand. Leaves get the same gutter, left empty. -->
-        <span class="flex size-4 shrink-0 items-center justify-center">
+             the row can expand. Leaves get the same gutter, left empty.
+
+             It is its own hit target, like the checkbox: opening a folder to
+             see what is in it is a different intent from selecting it, and on
+             a tree that drives a details pane the two must not be the same
+             click. The row as a whole still does both. -->
+        <span
+          class="flex size-4 shrink-0 items-center justify-center"
+          :class="canExpand ? 'cursor-pointer rounded-sm hover:bg-line' : ''"
+          @click.stop="canExpand && !node.disabled ? emit('toggle', node) : undefined"
+        >
           <LpIcon
             v-if="isLoading"
             name="lucide:loader-circle"

package/src/components/LpInput.vue

@@ -54,6 +54,12 @@ const props = withDefaults(
     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
@@ -118,6 +124,7 @@ defineExpose({
     :label="hasField ? label : undefined"
     :hint="hasField ? hint : undefined"
     :error="hasField ? error : undefined"
+    :required="hasField ? required : undefined"
     :class="hasField ? rootClass : undefined"
     :style="hasField ? rootStyle : undefined"
   >
@@ -136,6 +143,7 @@ defineExpose({
         :value="modelValue"
         :placeholder="placeholder"
         :disabled="disabled"
+        :required="required || undefined"
         :aria-invalid="isInvalidState || undefined"
         :class="[
           'lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted',

package/src/components/LpLink.vue

@@ -1,11 +1,27 @@
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, type Component } from "vue"
 
 const props = withDefaults(
   defineProps<{
     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.
      * "reveal"  — an underline bar that grows in from the left on hover
@@ -14,15 +30,30 @@ const props = withDefaults(
      */
     variant?: "default" | "reveal"
   }>(),
-  { variant: "default" },
+  { variant: "default", as: "a" },
 )
 
+// A router link component owns its destination through its own prop (`to`),
+// so `href` is only bound when this really renders an anchor. `target`/`rel`
+// stay in play either way — router links honour them for external targets.
+const isAnchor = computed(() => props.as === "a")
+
 const rel = computed(() => (props.external ? "noopener noreferrer" : undefined))
 const target = computed(() => (props.external ? "_blank" : undefined))
 
-const colorClass = computed(() =>
-  props.muted ? "text-muted hover:text-ink" : "text-brand hover:text-brand-hover",
-)
+const colorClass = computed(() => {
+  const tone = props.tone ?? (props.muted ? "muted" : "brand")
+  switch (tone) {
+    case "ink":
+      return "text-ink"
+    case "muted":
+      return "text-muted-strong hover:text-ink"
+    case "soft":
+      return "text-muted hover:text-ink"
+    default:
+      return "text-brand hover:text-brand-hover"
+  }
+})
 
 // The reveal bar: an ::after pseudo-element pinned to the baseline, full-width
 // but scaled to 0 on the x-axis from the left, growing to 1 on hover/focus. The
@@ -33,8 +64,9 @@ const revealClass =
 </script>
 
 <template>
-  <a
-    :href="href"
+  <component
+    :is="as"
+    :href="isAnchor ? href : undefined"
     :target="target"
     :rel="rel"
     class="inline-flex items-center gap-1 underline-offset-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
@@ -44,5 +76,5 @@ const revealClass =
     ]"
   >
     <slot />
-  </a>
+  </component>
 </template>

package/src/components/LpPasswordInput.vue

@@ -9,7 +9,18 @@ import { ref } from "vue"
 import LpIcon from "./LpIcon.vue"
 import LpInput from "./LpInput.vue"
 
-defineProps<{ modelValue?: string; placeholder?: string; invalid?: boolean; disabled?: boolean }>()
+defineProps<{
+  modelValue?: string
+  placeholder?: string
+  invalid?: boolean
+  disabled?: boolean
+  // Field wrapping mirrors LpInput: passing any of these wraps the control in
+  // LpFormField, so a password field labels itself like every other field.
+  label?: string
+  hint?: string
+  error?: string
+  required?: boolean
+}>()
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
 const visible = ref(false)
@@ -29,6 +40,10 @@ defineExpose({
     :placeholder="placeholder"
     :invalid="invalid"
     :disabled="disabled"
+    :label="label"
+    :hint="hint"
+    :error="error"
+    :required="required"
     @update:model-value="(v) => $emit('update:modelValue', v)"
   >
     <template v-if="$slots.leading" #leading><slot name="leading" /></template>

package/src/components/LpTextarea.vue

@@ -11,6 +11,11 @@ const props = defineProps<{
   label?: string
   hint?: string
   error?: string
+  /**
+   * Marks the label with the required indicator; the attribute still reaches
+   * the <textarea> for native validation.
+   */
+  required?: boolean
 }>()
 
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
@@ -24,6 +29,7 @@ const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
     :label="hasField ? label : undefined"
     :hint="hasField ? hint : undefined"
     :error="hasField ? error : undefined"
+    :required="hasField ? required : undefined"
     :class="hasField ? undefined : 'contents'"
   >
     <textarea
@@ -31,6 +37,7 @@ const hasField = computed(() => !!props.label || !!props.hint || !!props.error)
       :placeholder="placeholder"
       :rows="rows ?? 4"
       :disabled="disabled"
+      :required="required || undefined"
       class="w-full resize-y rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55"
       :class="(invalid || error) ? 'border-danger focus:border-danger focus:ring-danger-soft' : 'border-line'"
       @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"

package/src/theme/presets.ts

@@ -35,7 +35,10 @@ export const dark: TokenSet = {
     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)",
@@ -64,7 +67,10 @@ export const light: TokenSet = {
     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)",
@@ -93,7 +99,10 @@ export const lime: TokenSet = {
     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)",
@@ -148,7 +157,10 @@ export const leavepulse: TokenSet = {
     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)",
@@ -181,7 +193,10 @@ export const rose: TokenSet = {
     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)",
@@ -210,7 +225,10 @@ export const amber: TokenSet = {
     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)",
@@ -239,7 +257,10 @@ export const violet: TokenSet = {
     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)",
@@ -268,7 +289,10 @@ export const nord: TokenSet = {
     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)",

package/src/theme/tokens.ts

@@ -18,7 +18,10 @@ export interface ColorTokens {
   brandSoft: string
   action: string
   actionHover: string
+  actionSoft: string
   accent: string
+  accentHover: string
+  accentSoft: string
   danger: string
   dangerHover: string
   dangerSoft: string
@@ -99,7 +102,10 @@ export const COLOR_VARS: Record<keyof ColorTokens, string> = {
   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/src/tokens/tokens.css

@@ -36,7 +36,10 @@
   --color-brand-soft: rgba(0, 188, 255, 0.16);
   --color-action: #39e58c;
   --color-action-hover: #4dffa1;
+  --color-action-soft: rgba(57, 229, 140, 0.14);
   --color-accent: #f0b35a;
+  --color-accent-hover: #f2bf74;
+  --color-accent-soft: rgba(240, 179, 90, 0.14);
   --color-danger: #ff6f6f;
   --color-danger-hover: #ff8585;
   --color-danger-soft: rgba(255, 111, 111, 0.14);