@leavepulse/ui 0.43.4 → 0.45.0

package/dist/chunks/{LpMapPicker-ul4oYno6.js → LpMapPicker-Cc84LaM3.js}

@@ -1,8 +1,9 @@
 import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, Fragment, renderList, normalizeStyle, createVNode, createCommentVNode, createBlock, toDisplayString } from "vue";
 import { prefersReducedMotion } from "../composables/easing.js";
 import { OSM_TILES, project, tileUrl, unproject } from "../components/address.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useLabels } from "../composables/useLpConfig.js";
 const _hoisted_1 = ["tabindex", "aria-label"];
 const _hoisted_2 = ["src", "onLoad"];
 const _hoisted_3 = { class: "absolute right-2 top-2 flex flex-col gap-1.5" };
@@ -26,15 +27,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean },
     height: { default: "20rem" },
     locatable: { type: Boolean, default: true },
-    zoomInLabel: { default: "Zoom in" },
-    zoomOutLabel: { default: "Zoom out" },
-    locateLabel: { default: "Use my location" },
-    recentreLabel: { default: "Back to the pin" }
+    zoomInLabel: {},
+    zoomOutLabel: {},
+    locateLabel: {},
+    recentreLabel: {},
+    mapLabel: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const labelSet = useLabels("mapPicker", {
+      zoomIn: "Zoom in",
+      zoomOut: "Zoom out",
+      locate: "Use my location",
+      recentre: "Back to the pin",
+      map: "Map — arrows pan, +/− zoom, Enter drops the pin in the centre"
+    });
+    const text = computed(() => ({
+      zoomIn: props.zoomInLabel ?? labelSet.value.zoomIn,
+      zoomOut: props.zoomOutLabel ?? labelSet.value.zoomOut,
+      locate: props.locateLabel ?? labelSet.value.locate,
+      recentre: props.recentreLabel ?? labelSet.value.recentre,
+      map: props.mapLabel ?? labelSet.value.map
+    }));
     const PAN_STEP = 80;
     const ZOOM_MS = 220;
     const seenTiles = /* @__PURE__ */ new Set();
@@ -304,6 +320,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           e.preventDefault();
           recentre();
           break;
+        // Without this a keyboard could pan and zoom but never actually pick.
+        case "Enter":
+        case " ": {
+          const el = viewport.value;
+          if (!el) return;
+          e.preventDefault();
+          emit("update:modelValue", toLatLon({ x: el.clientWidth / 2, y: el.clientHeight / 2 }));
+          break;
+        }
       }
     }
     const canRecentre = computed(() => {
@@ -395,7 +420,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["absolute inset-0 touch-none select-none outline-none focus-visible:ring-2 focus-visible:ring-ring", __props.disabled ? "cursor-not-allowed opacity-55" : panning.value ? "cursor-grabbing" : "cursor-grab"]),
           tabindex: __props.disabled ? -1 : 0,
           role: "application",
-          "aria-label": __props.recentreLabel,
+          "aria-label": text.value.map,
           onPointerdown: onPointerDown,
           onPointermove: onPointerMove,
           onPointerup: onPointerUp,
@@ -445,8 +470,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: normalizeClass(CONTROL),
             type: "button",
             disabled: __props.disabled || level.value >= maxZoom.value,
-            title: __props.zoomInLabel,
-            "aria-label": __props.zoomInLabel,
+            title: text.value.zoomIn,
+            "aria-label": text.value.zoomIn,
             onClick: _cache[0] || (_cache[0] = ($event) => zoomBy(1))
           }, [
             createVNode(_sfc_main$1, {
@@ -458,8 +483,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: normalizeClass(CONTROL),
             type: "button",
             disabled: __props.disabled || level.value <= minZoom.value,
-            title: __props.zoomOutLabel,
-            "aria-label": __props.zoomOutLabel,
+            title: text.value.zoomOut,
+            "aria-label": text.value.zoomOut,
             onClick: _cache[1] || (_cache[1] = ($event) => zoomBy(-1))
           }, [
             createVNode(_sfc_main$1, {
@@ -471,8 +496,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: 0,
             class: normalizeClass(CONTROL),
             type: "button",
-            title: __props.recentreLabel,
-            "aria-label": __props.recentreLabel,
+            title: text.value.recentre,
+            "aria-label": text.value.recentre,
             onClick: recentre
           }, [
             createVNode(_sfc_main$1, {
@@ -485,8 +510,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: normalizeClass(CONTROL),
             type: "button",
             disabled: __props.disabled || locating.value,
-            title: __props.locateLabel,
-            "aria-label": __props.locateLabel,
+            title: text.value.locate,
+            "aria-label": text.value.locate,
             onClick: locate
           }, [
             createVNode(_sfc_main$1, {

package/dist/chunks/{LpMediaGallery-FF-NquIo.js → LpMediaGallery-YKr-cQPN.js}

@@ -1,7 +1,7 @@
-import { defineComponent, ref, computed, openBlock, createElementBlock, renderSlot, mergeProps, unref, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createVNode, createCommentVNode, createBlock } from "vue";
+import { defineComponent, ref, watch, computed, openBlock, createElementBlock, renderSlot, mergeProps, unref, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createVNode, createCommentVNode, createBlock } from "vue";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpLightbox-2sYVMY-S.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$2 } from "./LpLightbox-DSDahF23.js";
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["aria-label"];
 const _hoisted_3 = ["aria-label", "onClick"];
@@ -38,6 +38,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const open = ref(false);
     const index = ref(0);
+    watch(open, (value, was) => {
+      if (!value && was) emit("update:open", false);
+    });
     const visible = computed(
       () => props.max && props.items.length > props.max ? props.items.slice(0, props.max) : props.items
     );
@@ -118,8 +121,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const at = openIndexOf(i);
       if (at === -1) return;
       index.value = at;
+      if (!open.value) emit("update:open", true);
       open.value = true;
-      emit("update:open", true);
     }
     function openOverflow() {
       activate(visible.value.length);

package/dist/chunks/{LpModal-Bt0pQCI_.js → LpModal-DMMDQHAu.js}

@@ -1,23 +1,24 @@
-import { defineComponent, computed, useSlots, watch, onBeforeUnmount, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, createElementVNode, mergeProps, createElementBlock, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, ref, computed, useSlots, watch, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, createElementVNode, mergeProps, createElementBlock, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
 import { useGlass } from "../composables/useGlass.js";
+import { useLabels } from "../composables/useLpConfig.js";
 import { useShift } from "../composables/useShift.js";
 import { useModalLayer } from "../components/modalDepth.js";
 import { CLOSE_ICON } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-Bry1fdOM.js";
 const _hoisted_1 = {
   key: 0,
   "data-lp-modal-aside": "",
   class: "flex min-h-0 flex-col"
 };
 const _hoisted_2 = {
-  key: 0,
+  key: 1,
   class: "flex shrink-0 items-start justify-between gap-4 p-5 pb-3"
 };
 const _hoisted_3 = { class: "flex flex-col gap-1" };
 const _hoisted_4 = {
-  key: 3,
+  key: 4,
   class: "flex shrink-0 justify-end gap-2 p-5 pt-4"
 };
 const _hoisted_5 = {
@@ -35,12 +36,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     width: {},
     fillBody: { type: Boolean },
     autoFocus: { default: "auto" },
-    glass: { type: Boolean, default: void 0 }
+    glass: { type: Boolean, default: void 0 },
+    ariaLabel: {},
+    role: {},
+    labels: {}
   },
   emits: ["update:open"],
   setup(__props) {
-    const { claim, release, layer } = useModalLayer();
+    const panelRef = ref(null);
+    const { claim, release, layer } = useModalLayer({ element: () => panelRef.value?.parentElement });
     const props = __props;
+    const text = useLabels("modal", { close: "Close" }, () => props.labels);
     const frosted = useGlass(() => props.glass);
     const onInteractOutside = (event) => {
       const target = event.target;
@@ -48,9 +54,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         event.preventDefault();
       }
     };
-    const describedByAttrs = computed(
-      () => props.description ? {} : { "aria-describedby": void 0 }
-    );
+    const describedByAttrs = computed(() => ({
+      ...props.description ? {} : { "aria-describedby": void 0 },
+      ...props.role ? { role: props.role } : {}
+    }));
     const widthClass = computed(() => {
       if (props.width) return "";
       return {
@@ -74,9 +81,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         slots.footer ? "" : "pb-5"
       ].filter(Boolean).join(" ")
     );
-    const panelRef = ref(null);
     const AUTO_FOCUS_ORDER = [
-      "input:not([type=hidden]):not([disabled]):not([readonly])",
+      "input:not([type=hidden]):not([disabled]):not([readonly]):not([tabindex='-1'])",
       "textarea:not([disabled]):not([readonly])",
       "select:not([disabled])",
       "[data-lp-autofocus]",
@@ -84,25 +90,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "[href]",
       "[tabindex]:not([tabindex='-1'])"
     ];
+    function focusable(el) {
+      if (el.hasAttribute("disabled") || el.getAttribute("tabindex") === "-1") return false;
+      if (el.closest("[aria-hidden='true'], [data-hidden], [inert]")) return false;
+      if (typeof el.checkVisibility === "function") return el.checkVisibility({ visibilityProperty: true });
+      return el.getClientRects().length > 0;
+    }
     function onOpenAutoFocus(event) {
       if (props.autoFocus === "none") return;
       const panel = panelRef.value;
       if (!panel) return;
       const selectors = props.autoFocus === "auto" ? AUTO_FOCUS_ORDER : [props.autoFocus];
       for (const selector of selectors) {
-        const target = panel.querySelector(selector);
-        if (!target || target.hasAttribute("disabled")) continue;
-        event.preventDefault();
-        if (!target.closest("[data-lp-ring-owner]")) {
-          target.setAttribute("data-lp-focus-ring", "");
-          target.addEventListener(
-            "blur",
-            () => target.removeAttribute("data-lp-focus-ring"),
-            { once: true }
-          );
+        for (const target of panel.querySelectorAll(selector)) {
+          if (!focusable(target)) continue;
+          target.focus();
+          if (document.activeElement !== target) continue;
+          event.preventDefault();
+          if (!target.closest("[data-lp-ring-owner]")) {
+            target.setAttribute("data-lp-focus-ring", "");
+            target.addEventListener(
+              "blur",
+              () => target.removeAttribute("data-lp-focus-ring"),
+              { once: true }
+            );
+          }
+          return;
         }
-        target.focus();
-        return;
       }
     }
     const {
@@ -148,9 +162,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     createElementVNode("div", {
                       ref_key: "panelRef",
                       ref: panelRef,
-                      class: normalizeClass(["flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line shadow-panel", [unref(frosted) ? unref(layer).nested ? "lp-glass-overlay--nested" : "lp-glass-overlay" : "bg-surface-raised", widthClass.value, unref(tweening) ? "transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none" : ""]]),
+                      class: normalizeClass(["relative flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line shadow-panel", [unref(frosted) ? unref(layer).nested ? "lp-glass-overlay--nested" : "lp-glass-overlay" : "bg-surface-raised", widthClass.value, unref(tweening) ? "transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none" : ""]]),
                       style: normalizeStyle({ ...__props.width ? { width: __props.width } : {}, ...hasAside.value ? { alignSelf: "stretch" } : {} })
                     }, [
+                      !(__props.title || _ctx.$slots.title) && __props.ariaLabel ? (openBlock(), createBlock(unref(DialogTitle), {
+                        key: 0,
+                        class: "sr-only"
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(__props.ariaLabel), 1)
+                        ]),
+                        _: 1
+                      })) : createCommentVNode("", true),
                       __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("header", _hoisted_2, [
                         createElementVNode("div", _hoisted_3, [
                           createVNode(unref(DialogTitle), { class: "text-base font-semibold text-ink" }, {
@@ -174,7 +197,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         createVNode(unref(DialogClose), {
                           "data-lp-dialog-close": "",
                           class: "group flex shrink-0 items-center rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
-                          "aria-label": "Close"
+                          "aria-label": unref(text).close
                         }, {
                           default: withCtx(() => [
                             createVNode(_sfc_main$1, {
@@ -184,15 +207,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             }, null, 8, ["class"])
                           ]),
                           _: 1
-                        })
+                        }, 8, ["aria-label"])
                       ])) : createCommentVNode("", true),
                       __props.fillBody ? (openBlock(), createElementBlock("div", {
-                        key: 1,
+                        key: 2,
                         class: normalizeClass(["flex min-h-0 flex-1 flex-col overflow-hidden text-sm text-ink/90", bodyPad.value])
                       }, [
                         renderSlot(_ctx.$slots, "default")
                       ], 2)) : (openBlock(), createBlock(_sfc_main$2, {
-                        key: 2,
+                        key: 3,
                         class: normalizeClass(["min-h-0 flex-1 text-sm text-ink/90", unref(resizing) ? "[&_[data-scrollbarimpl]]:invisible" : ""]),
                         "content-class": bodyPad.value
                       }, {

package/dist/chunks/{LpModalNav-YaifHrXC.js → LpModalNav-BVPDyIup.js}

@@ -1,8 +1,9 @@
-import { defineComponent, ref, computed, openBlock, createBlock, createSlots, withCtx, renderSlot, createElementVNode, normalizeClass, createVNode, createCommentVNode, createTextVNode, toDisplayString } from "vue";
-import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
-import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpModal-Bt0pQCI_.js";
-import { _ as _sfc_main$4 } from "./LpSidebar-ClBUwoEz.js";
+import { defineComponent, computed, ref, openBlock, createBlock, createSlots, withCtx, renderSlot, createElementVNode, normalizeClass, createVNode, createCommentVNode, createTextVNode, toDisplayString } from "vue";
+import { useLabels } from "../composables/useLpConfig.js";
+import { _ as _sfc_main$2 } from "./LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$3 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$1 } from "./LpModal-DMMDQHAu.js";
+import { _ as _sfc_main$4 } from "./LpSidebar-CQNB0-yU.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModalNav",
@@ -20,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     searchPlaceholder: {},
     loading: { type: Boolean },
     mobileBreakpoint: { default: "lg" },
-    navLabel: { default: "Sections" },
+    navLabel: {},
     navSide: { default: "start" },
     fillBody: { type: Boolean },
     glass: { type: Boolean, default: void 0 }
@@ -29,6 +30,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const text = useLabels("modalNav", { nav: "Sections" });
+    const navName = computed(() => props.navLabel ?? text.value.nav);
     const navOpen = ref(false);
     const active = computed({
       get: () => props.modelValue ?? "",
@@ -76,7 +79,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               variant: "ghost",
               size: "sm",
               square: "",
-              "aria-label": __props.navLabel,
+              "aria-label": navName.value,
               class: normalizeClass(triggerClass.value),
               onClick: _cache[4] || (_cache[4] = ($event) => navOpen.value = true)
             }, {

package/dist/chunks/{LpNotificationBell-DyGGsMAM.js → LpNotificationBell-CCwyJP5C.js}

@@ -1,11 +1,13 @@
-import { defineComponent, computed, useModel, getCurrentInstance, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, createVNode, Fragment, renderList, resolveDynamicComponent, normalizeClass, createTextVNode, mergeModels } from "vue";
+import { defineComponent, computed, useModel, getCurrentInstance, ref, onMounted, onBeforeUnmount, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, createVNode, Fragment, renderList, resolveDynamicComponent, normalizeClass, Transition, mergeModels } from "vue";
+import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$8 } from "./LpBadge-Fe0D1bYx.js";
-import { _ as _sfc_main$7 } from "./LpButton-5VXXCjwF.js";
-import { _ as _sfc_main$5 } from "./LpContextMenu-CwW1QXe_.js";
-import { _ as _sfc_main$3 } from "./LpEmptyState-Dsdqz1Wj.js";
-import { _ as _sfc_main$6 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpPopover-8268UmlC.js";
-import { _ as _sfc_main$4 } from "./LpScrollArea-D8xyKXcF.js";
+import { _ as _sfc_main$7 } from "./LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$5 } from "./LpContextMenu-BqkAYa9X.js";
+import { _ as _sfc_main$3 } from "./LpEmptyState-BJbZXC8D.js";
+import { _ as _sfc_main$6 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$1 } from "./LpPopover-DCKeqiVn.js";
+import { _ as _sfc_main$9 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$4 } from "./LpScrollArea-Bry1fdOM.js";
 import { _ as _sfc_main$2 } from "./LpShift-DXNsauQZ.js";
 const _hoisted_1 = { class: "flex items-center justify-between gap-2 px-3 py-2.5" };
 const _hoisted_2 = { class: "text-sm font-semibold" };
@@ -21,10 +23,14 @@ const _hoisted_7 = {
   class: "size-1.5 shrink-0 rounded-full bg-brand"
 };
 const _hoisted_8 = {
+  key: 1,
+  class: "sr-only"
+};
+const _hoisted_9 = {
   key: 0,
   class: "mt-0.5 line-clamp-2 block text-xs text-muted"
 };
-const _hoisted_9 = {
+const _hoisted_10 = {
   key: 1,
   class: "mt-0.5 block text-[11px] text-muted/70"
 };
@@ -47,16 +53,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["markRead", "markUnread", "markAllRead", "clear", "dismiss", "select"], ["update:open"]),
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const text = useLabels(
+      "notifications",
+      {
+        title: "Notifications",
+        markAllRead: "Mark all read",
+        clear: "Clear",
+        markAsRead: "Mark as read",
+        markAsUnread: "Mark as unread",
+        open: "Open",
+        dismiss: "Dismiss",
+        empty: "No notifications",
+        ariaLabel: "",
+        unread: "{count} unread",
+        unreadItem: "Unread",
+        justNow: "just now",
+        minutes: "{n}m",
+        hours: "{n}h",
+        days: "{n}d"
+      },
+      () => props.labels
+    );
     const l = computed(() => ({
-      title: props.title ?? props.labels?.title ?? "Notifications",
-      markAllRead: props.labels?.markAllRead ?? "Mark all read",
-      clear: props.labels?.clear ?? "Clear",
-      markAsRead: props.labels?.markAsRead ?? "Mark as read",
-      markAsUnread: props.labels?.markAsUnread ?? "Mark as unread",
-      open: props.labels?.open ?? "Open",
-      dismiss: props.labels?.dismiss ?? "Dismiss",
-      empty: props.emptyLabel ?? props.labels?.empty ?? "No notifications",
-      ariaLabel: props.labels?.ariaLabel ?? props.labels?.title ?? "Notifications"
+      ...text.value,
+      title: props.title ?? text.value.title,
+      empty: props.emptyLabel ?? text.value.empty,
+      ariaLabel: text.value.ariaLabel || text.value.title
     }));
     const open = useModel(__props, "open");
     const emit = __emit;
@@ -67,6 +89,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => unread.value > props.maxBadge ? `${props.maxBadge}+` : String(unread.value)
     );
     const hasUnread = computed(() => unread.value > 0);
+    const buttonLabel = computed(
+      () => hasUnread.value ? `${l.value.ariaLabel}, ${l.value.unread.replace("{count}", String(unread.value))}` : l.value.ariaLabel
+    );
     const TONE_CLASS = {
       brand: "bg-brand-soft text-brand",
       action: "bg-action-soft text-action",
@@ -131,19 +156,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
       return actions;
     }
+    const now = ref(null);
+    let clock;
+    onMounted(() => {
+      now.value = Date.now();
+      clock = setInterval(() => now.value = Date.now(), 3e4);
+    });
+    onBeforeUnmount(() => clearInterval(clock));
     function timeAgo(iso) {
-      if (!iso) return "";
+      if (!iso || now.value === null) return "";
       if (props.formatTime) return props.formatTime(iso);
       const then = new Date(iso).getTime();
       if (Number.isNaN(then)) return "";
-      const secs = Math.max(0, Math.round((Date.now() - then) / 1e3));
-      if (secs < 45) return "just now";
+      const secs = Math.max(0, Math.round((now.value - then) / 1e3));
+      const n = (template, value) => template.replace("{n}", String(value));
+      if (secs < 45) return l.value.justNow;
       const mins = Math.round(secs / 60);
-      if (mins < 60) return `${mins}m`;
+      if (mins < 60) return n(l.value.minutes, mins);
       const hrs = Math.round(mins / 60);
-      if (hrs < 24) return `${hrs}h`;
+      if (hrs < 24) return n(l.value.hours, hrs);
       const days = Math.round(hrs / 24);
-      if (days < 7) return `${days}d`;
+      if (days < 7) return n(l.value.days, days);
       return new Date(then).toLocaleDateString();
     }
     return (_ctx, _cache) => {
@@ -162,7 +195,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 variant: "ghost",
                 size: "sm",
                 class: "relative",
-                "aria-label": l.value.ariaLabel,
+                "aria-label": buttonLabel.value,
                 onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
               }, {
                 default: withCtx(() => [
@@ -170,16 +203,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     name: "lucide:bell",
                     size: 18
                   }),
-                  hasUnread.value ? (openBlock(), createBlock(_sfc_main$8, {
-                    key: 0,
-                    tone: "danger",
-                    class: "absolute -right-1 -top-1 min-w-4 justify-center px-1 py-0 text-[10px] leading-4"
+                  createVNode(Transition, {
+                    "enter-active-class": "animate-[chip-in_var(--duration-fast)_var(--ease-emphasized)] motion-reduce:animate-none",
+                    "leave-active-class": "animate-[chip-out_var(--duration-fast)_ease] motion-reduce:animate-none"
                   }, {
                     default: withCtx(() => [
-                      createTextVNode(toDisplayString(badgeLabel.value), 1)
+                      hasUnread.value ? (openBlock(), createBlock(_sfc_main$8, {
+                        key: 0,
+                        "aria-hidden": "true",
+                        tone: "danger",
+                        class: "absolute -right-1 -top-1 min-w-4 justify-center px-1 py-0 text-[10px] leading-4"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$9, {
+                            value: badgeLabel.value,
+                            duration: 220
+                          }, null, 8, ["value"])
+                        ]),
+                        _: 1
+                      })) : createCommentVNode("", true)
                     ]),
                     _: 1
-                  })) : createCommentVNode("", true)
+                  })
                 ]),
                 _: 1
               }, 8, ["aria-label"])
@@ -251,10 +296,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 createElementVNode("span", {
                                   class: normalizeClass(["truncate text-sm font-medium", item.read ? "text-muted-strong" : "text-ink"])
                                 }, toDisplayString(item.title), 3),
-                                !item.read ? (openBlock(), createElementBlock("span", _hoisted_7)) : createCommentVNode("", true)
+                                !item.read ? (openBlock(), createElementBlock("span", _hoisted_7)) : createCommentVNode("", true),
+                                !item.read ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(l.value.unreadItem), 1)) : createCommentVNode("", true)
                               ]),
-                              item.body ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(item.body), 1)) : createCommentVNode("", true),
-                              item.createdAt ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(timeAgo(item.createdAt)), 1)) : createCommentVNode("", true)
+                              item.body ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(item.body), 1)) : createCommentVNode("", true),
+                              item.createdAt ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(timeAgo(item.createdAt)), 1)) : createCommentVNode("", true)
                             ])
                           ]),
                           _: 2

package/dist/chunks/{LpNumberField-CWuX08iX.js → LpNumberField-B77O-z28.js}

@@ -1,6 +1,7 @@
-import { defineComponent, useId, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createElementBlock, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, useId, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createElementBlock, toDisplayString, createCommentVNode } from "vue";
 import { NumberFieldRoot, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement } from "reka-ui";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = ["id"];
 const __default__ = { inheritAttrs: false };
@@ -13,13 +14,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     max: {},
     step: {},
     disabled: { type: Boolean },
-    unit: {}
+    unit: {},
+    invalid: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props) {
+    const props = __props;
     const unitId = useId();
+    const field = useFieldControl(() => ({ wrapped: false, invalid: props.invalid, disabled: props.disabled }));
+    const describedBy = computed(
+      () => [field.value.describedBy, props.unit ? unitId : void 0].filter(Boolean).join(" ") || void 0
+    );
     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"
+      () => [
+        "flex h-(--size-control-md) w-full items-center rounded-control border bg-surface-soft transition-colors duration-[var(--duration-fast)] focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
+        field.value.invalid ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand focus-within:ring-ring"
+      ].join(" ")
     );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(NumberFieldRoot), mergeProps({
@@ -27,7 +37,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         min: __props.min,
         max: __props.max,
         step: __props.step,
-        disabled: __props.disabled,
+        disabled: unref(field).disabled,
+        required: unref(field).required,
         "data-lp-ring-owner": "",
         class: unref(rootClass)
       }, unref(rest), {
@@ -45,9 +56,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             _: 1
           }),
           createVNode(unref(NumberFieldInput), {
-            "aria-describedby": __props.unit ? unref(unitId) : void 0,
+            id: unref(field).id,
+            "aria-describedby": describedBy.value,
+            "aria-invalid": unref(field).invalid || void 0,
             class: "min-w-0 flex-1 bg-transparent text-center text-sm text-ink outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
-          }, null, 8, ["aria-describedby"]),
+          }, null, 8, ["id", "aria-describedby", "aria-invalid"]),
           __props.unit ? (openBlock(), createElementBlock("span", {
             key: 0,
             id: unref(unitId),
@@ -65,7 +78,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 1
-      }, 16, ["model-value", "min", "max", "step", "disabled", "class"]);
+      }, 16, ["model-value", "min", "max", "step", "disabled", "required", "class"]);
     };
   }
 });