@leavepulse/ui 0.43.4 → 0.45.0

package/dist/chunks/{LayoutCanvas-Dd20boUG.js → LayoutCanvas-BkaGXTjx.js}

@@ -1,6 +1,7 @@
-import { defineComponent, ref, openBlock, createElementBlock, createVNode, unref, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import { _ as _sfc_main$1 } from "./LayoutNode-DGpZA9LX.js";
-import { reorderTab, removeBlock, setActiveTab, moveLeaf, resizeAt } from "../layout/tree.js";
+import { defineComponent, ref, computed, openBlock, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { _ as _sfc_main$1 } from "./LayoutNode-B3_9E1Xa.js";
+import { resizeAt, setActiveTab, reorderTab, removeBlock, moveLeaf } from "../layout/tree.js";
+import { layoutController } from "../layout/useLayout.js";
 const _hoisted_1 = { class: "flex min-h-0 min-w-0 flex-1" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LayoutCanvas",
@@ -13,12 +14,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const dragId = ref(null);
+    const edits = computed(() => {
+      const tree = props.modelValue;
+      return layoutController(tree) ?? {
+        move: (movingId, targetId, side) => moveLeaf(tree, movingId, targetId, side),
+        removeBlock: (leafId, index) => removeBlock(tree, leafId, index),
+        reorderTab: (leafId, from, to) => reorderTab(tree, leafId, from, to),
+        setActive: (leafId, index) => setActiveTab(tree, leafId, index),
+        resize: (parent, index, delta) => resizeAt(parent, index, delta),
+        beginResize: () => {
+        },
+        endResize: () => {
+        }
+      };
+    });
     function onDrop(targetId, side) {
-      if (dragId.value) moveLeaf(props.modelValue, dragId.value, targetId, side);
+      if (dragId.value) edits.value.move(dragId.value, targetId, side);
       dragId.value = null;
     }
     function onResize(parent, index, delta) {
-      resizeAt(parent, index, delta);
+      edits.value.resize(parent, index, delta);
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -31,10 +46,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onDragstart: _cache[0] || (_cache[0] = (id) => dragId.value = id),
           onDragend: _cache[1] || (_cache[1] = ($event) => dragId.value = null),
           onDrop,
-          onSetActive: _cache[2] || (_cache[2] = (leafId, i) => unref(setActiveTab)(__props.modelValue, leafId, i)),
-          onRemoveBlock: _cache[3] || (_cache[3] = (leafId, i) => unref(removeBlock)(__props.modelValue, leafId, i)),
-          onReorderTab: _cache[4] || (_cache[4] = (leafId, from, to) => unref(reorderTab)(__props.modelValue, leafId, from, to)),
-          onResize
+          onSetActive: _cache[2] || (_cache[2] = (leafId, i) => edits.value.setActive(leafId, i)),
+          onRemoveBlock: _cache[3] || (_cache[3] = (leafId, i) => edits.value.removeBlock(leafId, i)),
+          onReorderTab: _cache[4] || (_cache[4] = (leafId, from, to) => edits.value.reorderTab(leafId, from, to)),
+          onResize,
+          onResizeStart: _cache[5] || (_cache[5] = ($event) => edits.value.beginResize()),
+          onResizeEnd: _cache[6] || (_cache[6] = ($event) => edits.value.endResize())
         }, {
           block: withCtx((slotProps) => [
             renderSlot(_ctx.$slots, "block", normalizeProps(guardReactiveProps(slotProps)))

package/dist/chunks/{LayoutNode-DGpZA9LX.js → LayoutNode-B3_9E1Xa.js}

@@ -1,7 +1,7 @@
-import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createVNode, normalizeStyle, withCtx, renderSlot, mergeProps, createElementVNode, createCommentVNode, createBlock, unref, withModifiers, toDisplayString } from "vue";
-import { Motion } from "motion-v";
+import { defineComponent, computed, ref, onBeforeUnmount, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createVNode, normalizeStyle, withCtx, renderSlot, mergeProps, createElementVNode, createCommentVNode, createBlock, unref, withModifiers, toDisplayString } from "vue";
+import { useReducedMotion, Motion } from "motion-v";
 import { blockTitle } from "../layout/registry.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 const _hoisted_1 = ["onPointerdown"];
 const _hoisted_2 = {
   key: 1,
@@ -20,8 +20,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     edit: { type: Boolean },
     registry: {}
   },
-  emits: ["dragstart", "dragend", "drop", "set-active", "remove-block", "reorder-tab", "resize"],
+  emits: ["dragstart", "dragend", "drop", "set-active", "remove-block", "reorder-tab", "resize", "resize-start", "resize-end"],
   setup(__props, { emit: __emit }) {
+    const reduceMotion = useReducedMotion();
+    const layoutTransition = computed(
+      () => reduceMotion.value ? { duration: 0 } : { type: "spring", stiffness: 520, damping: 42, mass: 0.9 }
+    );
     const props = __props;
     const emit = __emit;
     const hoverSide = ref(null);
@@ -80,10 +84,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       else if (py > 1 - edge) hoverSide.value = "bottom";
       else hoverSide.value = "center";
     }
+    let stopSplitter = null;
+    onBeforeUnmount(() => stopSplitter?.());
     function startSplitter(ev, parent, index) {
       ev.preventDefault();
-      const host = ev.currentTarget.parentElement;
+      const handle = ev.currentTarget;
+      const host = handle.parentElement;
       if (!host) return;
+      handle.setPointerCapture?.(ev.pointerId);
+      emit("resize-start");
       const rect = host.getBoundingClientRect();
       const horizontal = parent.dir === "row";
       const span = horizontal ? rect.width : rect.height;
@@ -96,9 +105,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const up = () => {
         window.removeEventListener("pointermove", move);
         window.removeEventListener("pointerup", up);
+        window.removeEventListener("pointercancel", up);
+        stopSplitter = null;
+        emit("resize-end");
       };
+      stopSplitter = up;
       window.addEventListener("pointermove", move);
       window.addEventListener("pointerup", up);
+      window.addEventListener("pointercancel", up);
     }
     return (_ctx, _cache) => {
       const _component_LayoutNode = resolveComponent("LayoutNode", true);
@@ -122,7 +136,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onSetActive: _cache[3] || (_cache[3] = (l, idx) => emit("set-active", l, idx)),
               onRemoveBlock: _cache[4] || (_cache[4] = (l, idx) => emit("remove-block", l, idx)),
               onReorderTab: _cache[5] || (_cache[5] = (l, from, to) => emit("reorder-tab", l, from, to)),
-              onResize: _cache[6] || (_cache[6] = (p, idx, d) => emit("resize", p, idx, d))
+              onResize: _cache[6] || (_cache[6] = (p, idx, d) => emit("resize", p, idx, d)),
+              onResizeStart: _cache[7] || (_cache[7] = ($event) => emit("resize-start")),
+              onResizeEnd: _cache[8] || (_cache[8] = ($event) => emit("resize-end"))
             }, {
               block: withCtx((slotProps) => [
                 renderSlot(_ctx.$slots, "block", mergeProps({ ref_for: true }, slotProps))
@@ -143,7 +159,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       ], 2)) : leaf.value ? (openBlock(), createBlock(unref(Motion), {
         key: 1,
         layout: true,
-        transition: { type: "spring", stiffness: 520, damping: 42, mass: 0.9 },
+        transition: layoutTransition.value,
         class: normalizeClass(["relative flex min-h-0 min-w-0 flex-col", { "opacity-35": __props.dragId === __props.node.id }])
       }, {
         default: withCtx(() => [
@@ -151,8 +167,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: 0,
             class: "flex shrink-0 items-center gap-1 overflow-x-auto border-b border-line px-1 py-1",
             draggable: __props.edit,
-            onDragstart: _cache[7] || (_cache[7] = ($event) => emit("dragstart", __props.node.id)),
-            onDragend: _cache[8] || (_cache[8] = ($event) => (hoverSide.value = null, emit("dragend")))
+            onDragstart: _cache[9] || (_cache[9] = ($event) => emit("dragstart", __props.node.id)),
+            onDragend: _cache[10] || (_cache[10] = ($event) => (hoverSide.value = null, emit("dragend")))
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(leaf.value.blocks, (block, i) => {
               return openBlock(), createElementBlock("button", {
@@ -202,8 +218,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: 1,
             class: "absolute inset-0 z-[5]",
             onDragover: onDragOver,
-            onDragleave: _cache[9] || (_cache[9] = ($event) => hoverSide.value = null),
-            onDrop: _cache[10] || (_cache[10] = () => {
+            onDragleave: _cache[11] || (_cache[11] = ($event) => hoverSide.value = null),
+            onDrop: _cache[12] || (_cache[12] = () => {
               const s = hoverSide.value;
               hoverSide.value = null;
               if (s) emit("drop", __props.node.id, s);
@@ -216,7 +232,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ], 32)) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["class"])) : createCommentVNode("", true);
+      }, 8, ["transition", "class"])) : createCommentVNode("", true);
     };
   }
 });

package/dist/chunks/{LpActionBar-BlvtGB2P.js → LpActionBar-CnfFVIwC.js}

@@ -1,8 +1,9 @@
-import { defineComponent, useSlots, computed, ref, watch, nextTick, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode, renderSlot, toDisplayString, Fragment, renderList, createTextVNode, unref } from "vue";
+import { defineComponent, useSlots, computed, ref, watch, onBeforeUnmount, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode, renderSlot, toDisplayString, Fragment, renderList, createTextVNode, unref } from "vue";
+import { useLabels } from "../composables/useLpConfig.js";
 import { useBarStack } from "../components/actionBar.js";
 import { CLOSE_ICON } from "../components/dropdown.js";
-import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$2 } from "./LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = {
   key: 1,
@@ -21,6 +22,7 @@ const _hoisted_5 = {
   class: "flex-1"
 };
 const _hoisted_6 = { class: "flex shrink-0 items-center gap-2" };
+const _hoisted_7 = ["aria-label"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpActionBar",
   props: {
@@ -33,13 +35,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     variant: { default: "default" },
     width: { default: "contained" },
     maxWidth: {},
-    ariaLabel: {}
+    ariaLabel: {},
+    labels: {}
   },
   emits: ["update:open", "dismiss"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const slots = useSlots();
+    const text = useLabels("actionBar", { dismiss: "Dismiss" }, () => props.labels);
     const resolvedActions = computed(
       () => props.actions.map((a, i) => ({
         ...a,
@@ -62,23 +66,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       void bars.value;
       return offset();
     });
+    let observer = null;
     watch(
       () => props.open,
-      async (isOpen) => {
+      (isOpen) => {
+        if (typeof window === "undefined") return;
         if (!isOpen) {
           unregister();
           return;
         }
         register();
-        await nextTick();
-        if (root.value) setHeight(root.value.getBoundingClientRect().height);
       },
       { immediate: true }
     );
+    watch(root, (el) => {
+      observer?.disconnect();
+      observer = null;
+      if (!el) return;
+      setHeight(el.getBoundingClientRect().height);
+      if (typeof ResizeObserver === "undefined") return;
+      observer = new ResizeObserver(() => setHeight(el.getBoundingClientRect().height));
+      observer.observe(el);
+    });
+    onBeforeUnmount(() => observer?.disconnect());
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Teleport, { to: "body" }, [
         createVNode(Transition, {
-          "enter-active-class": "animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)]",
+          "enter-active-class": "animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none",
           "leave-active-class": "animate-[rise-out_var(--duration-fast)_ease_forwards] motion-reduce:animate-none"
         }, {
           default: withCtx(() => [
@@ -88,8 +102,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ref: root,
               role: "region",
               "aria-label": __props.ariaLabel ?? __props.title,
-              class: normalizeClass(["pointer-events-none fixed inset-x-0 bottom-0 z-(--z-modal) flex justify-center transition-[translate] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none", __props.width === "full" ? "" : "p-3 sm:p-4"]),
-              style: normalizeStyle({ translate: `0 -${stackOffset.value}px` })
+              class: normalizeClass(["pointer-events-none fixed inset-x-0 bottom-0 flex justify-center transition-[translate] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none", __props.width === "full" ? "" : "p-3 sm:p-4"]),
+              style: normalizeStyle({ translate: `0 -${stackOffset.value}px`, zIndex: "calc(var(--z-overlay) - 1)" })
             }, [
               createElementVNode("div", {
                 class: normalizeClass(["lp-skin-panel pointer-events-auto flex items-center gap-3 border-solid bg-surface-overlay", [
@@ -147,7 +161,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     __props.dismissible ? (openBlock(), createElementBlock("button", {
                       key: 0,
                       type: "button",
-                      "aria-label": "Dismiss",
+                      "aria-label": unref(text).dismiss,
                       class: "group -mr-1 flex size-8 shrink-0 items-center justify-center rounded-control text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
                       onClick: dismiss
                     }, [
@@ -156,7 +170,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         size: 16,
                         class: normalizeClass(unref(CLOSE_ICON))
                       }, null, 8, ["class"])
-                    ])) : createCommentVNode("", true)
+                    ], 8, _hoisted_7)) : createCommentVNode("", true)
                   ])
                 ], 4)
               ], 6)

package/dist/chunks/{LpAddressInput-B-Zvxsn7.js → LpAddressInput-BwX8uo4_.js}

@@ -1,13 +1,14 @@
-import { defineComponent, defineAsyncComponent, computed, ref, onMounted, watch, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, createBlock, createCommentVNode, createTextVNode, toDisplayString, renderSlot, normalizeClass } from "vue";
+import { defineComponent, defineAsyncComponent, computed, watch, ref, onMounted, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, createBlock, createCommentVNode, createTextVNode, toDisplayString, renderSlot, normalizeClass } from "vue";
+import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress } from "../components/address.js";
 import { flagEmoji, loadCountries } from "../components/countries.js";
-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-CazBc2-a.js";
-import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$5 } from "./LpInput-9EXWUM9B.js";
-import { _ as _sfc_main$7 } from "./LpModal-Bt0pQCI_.js";
-import { _ as _sfc_main$6 } from "./LpSelect-ANIVtrpM.js";
+import { _ as _sfc_main$2 } from "./LpAutocomplete-C8IgSMsi.js";
+import { _ as _sfc_main$3 } from "./LpButton-CKSwC6Mu.js";
+import { _ as _sfc_main$1 } from "./LpFormField-CtVYj6tO.js";
+import { _ as _sfc_main$4 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$5 } from "./LpInput-D-YGQbEv.js";
+import { _ as _sfc_main$7 } from "./LpModal-DMMDQHAu.js";
+import { _ as _sfc_main$6 } from "./LpSelect-DNIL6MB9.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "flex items-stretch gap-2" };
 const _hoisted_2 = { class: "grid gap-3 sm:grid-cols-[minmax(0,1fr)_10rem]" };
@@ -67,10 +68,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const fallbackProvider = createNominatimProvider();
     const geocoder = computed(() => props.provider ?? fallbackProvider);
     const value = computed(() => props.modelValue ?? emptyAddress());
+    let latest;
+    watch(
+      () => props.modelValue,
+      () => latest = void 0
+    );
     function patch(changes) {
-      emit("update:modelValue", { ...value.value, ...changes });
+      latest = { ...latest ?? value.value, ...changes };
+      emit("update:modelValue", latest);
+    }
+    function edit(changes) {
+      patch({ ...changes, lat: void 0, lon: void 0 });
     }
-    const countries = ref([]);
+    const allCountries = ref([]);
+    const countries = computed(() => {
+      const only = props.only?.map((code) => code.toUpperCase());
+      return only?.length ? allCountries.value.filter((c) => only.includes(c.iso2)) : allCountries.value;
+    });
     const countryOptions = computed(
       () => countries.value.map((country) => ({
         value: country.iso2,
@@ -78,40 +92,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }))
     );
     onMounted(async () => {
-      const list = await loadCountries();
-      const only = props.only?.map((code) => code.toUpperCase());
-      countries.value = only?.length ? list.filter((c) => only.includes(c.iso2)) : list;
+      allCountries.value = await loadCountries();
     });
     function useSuggestions(field) {
       const options = ref([]);
-      const loading = ref(false);
-      let timer;
-      let controller;
+      const task = useAsyncTask();
       function query(term) {
-        if (timer) clearTimeout(timer);
-        controller?.abort();
         if (term.trim().length < props.minChars) {
+          task.cancel();
           options.value = [];
-          loading.value = false;
           return;
         }
-        loading.value = true;
-        timer = setTimeout(async () => {
-          controller = new AbortController();
-          try {
-            options.value = await geocoder.value.search(term.trim(), field, {
-              country: value.value.country || void 0,
-              language: props.language,
-              signal: controller.signal
-            });
-          } catch {
-            options.value = [];
-          } finally {
-            loading.value = false;
+        task.run(
+          (signal) => geocoder.value.search(term.trim(), field, {
+            country: value.value.country || void 0,
+            language: props.language,
+            signal
+          }),
+          {
+            delay: props.debounce,
+            apply: (found) => options.value = found,
+            // Network failure: leave the field usable as free text.
+            fail: () => options.value = []
           }
-        }, props.debounce);
+        );
       }
-      return { options, loading, query };
+      return { options, loading: task.pending, query };
     }
     const lineSuggestions = useSuggestions("line");
     const citySuggestions = useSuggestions("city");
@@ -159,19 +165,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       point.value = value.value.lat != null && value.value.lon != null ? { lat: value.value.lat, lon: value.value.lon } : void 0;
       resolved.value = void 0;
     });
-    async function onPick(next) {
+    const reverse = useAsyncTask();
+    watch(reverse.pending, (busy) => resolving.value = busy);
+    function onPick(next) {
       point.value = next;
-      resolving.value = true;
       resolved.value = void 0;
-      try {
-        resolved.value = await geocoder.value.reverse(next.lat, next.lon, {
-          language: props.language
-        });
-      } catch {
-        resolved.value = void 0;
-      } finally {
-        resolving.value = false;
-      }
+      reverse.run(
+        () => geocoder.value.reverse(next.lat, next.lon, { language: props.language }),
+        {
+          apply: (found) => resolved.value = found,
+          fail: () => resolved.value = void 0
+        }
+      );
     }
     function confirmPoint() {
       if (!point.value) return;
@@ -211,7 +216,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "loading-text": text.value.searching,
                 icon: "lucide:map-pin",
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = (next) => {
-                  patch({ line: next });
+                  edit({ line: next });
                   unref(lineSuggestions).query(next);
                 }),
                 onSelect: onLineSelect
@@ -265,7 +270,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "empty-text": text.value.noSuggestions,
                 "loading-text": text.value.searching,
                 "onUpdate:modelValue": _cache[3] || (_cache[3] = (next) => {
-                  patch({ city: next });
+                  edit({ city: next });
                   unref(citySuggestions).query(next);
                 }),
                 onSelect: onCitySelect
@@ -280,7 +285,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled,
             size: __props.size,
             autocomplete: "postal-code",
-            "onUpdate:modelValue": _cache[4] || (_cache[4] = (next) => patch({ postalCode: next }))
+            "onUpdate:modelValue": _cache[4] || (_cache[4] = (next) => edit({ postalCode: next }))
           }, null, 8, ["model-value", "label", "placeholder", "disabled", "size"])
         ]),
         createVNode(_sfc_main$1, {
@@ -295,7 +300,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               disabled: __props.disabled,
               size: __props.size,
               searchable: "",
-              "onUpdate:modelValue": _cache[5] || (_cache[5] = (next) => patch({ country: String(next ?? "") }))
+              "onUpdate:modelValue": _cache[5] || (_cache[5] = (next) => edit({ country: String(next ?? "") }))
             }, null, 8, ["model-value", "options", "placeholder", "search-placeholder", "disabled", "size"])
           ]),
           _: 1

package/dist/chunks/{LpAlert-BAYHDSS1.js → LpAlert-B6ilrM7T.js}

@@ -1,8 +1,9 @@
 import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createVNode, createElementVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
 import { tv } from "tailwind-variants";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-const _hoisted_1 = { class: "min-w-0" };
-const _hoisted_2 = {
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+const _hoisted_1 = ["role"];
+const _hoisted_2 = { class: "min-w-0" };
+const _hoisted_3 = {
   key: 0,
   class: "font-semibold text-ink"
 };
@@ -11,7 +12,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     variant: { default: "info" },
     title: {},
-    icon: {}
+    icon: {},
+    live: { type: [String, Boolean], default: void 0 }
   },
   setup(__props) {
     const alert = tv({
@@ -39,28 +41,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       danger: "text-danger"
     };
     const props = __props;
+    const role = computed(() => {
+      const live = props.live ?? (props.variant === "danger" ? "assertive" : false);
+      return live === "assertive" ? "alert" : live === "polite" ? "status" : void 0;
+    });
     const classes = computed(() => alert({ variant: props.variant }));
     const resolvedIcon = computed(() => props.icon ?? ICONS[props.variant ?? "info"]);
     const iconTone = computed(() => ICON_TONE[props.variant ?? "info"]);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(classes.value),
-        role: "alert"
+        role: role.value
       }, [
         createVNode(_sfc_main$1, {
           name: resolvedIcon.value,
           size: 18,
-          class: normalizeClass(["mt-0.5 shrink-0", iconTone.value])
+          class: normalizeClass(["mt-0.5 shrink-0", iconTone.value]),
+          "aria-hidden": "true"
         }, null, 8, ["name", "class"]),
-        createElementVNode("div", _hoisted_1, [
-          __props.title ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          __props.title ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
           createElementVNode("div", {
             class: normalizeClass(["text-muted-strong", __props.title ? "mt-0.5" : ""])
           }, [
             renderSlot(_ctx.$slots, "default")
           ], 2)
         ])
-      ], 2);
+      ], 10, _hoisted_1);
     };
   }
 });

package/dist/chunks/{LpAppShell-BGQVIY-3.js → LpAppShell-C53_RaGF.js}

@@ -1,14 +1,16 @@
-import { defineComponent, computed, watch, openBlock, createElementBlock, mergeProps, unref, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, toDisplayString, createBlock } 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$5 } from "./LpScrollArea-D8xyKXcF.js";
+import { defineComponent, computed, ref, useId, watch, openBlock, createElementBlock, mergeProps, unref, createElementVNode, withModifiers, toDisplayString, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, normalizeClass, createBlock } 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$5 } from "./LpScrollArea-Bry1fdOM.js";
 import { _ as _sfc_main$4 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-ClBUwoEz.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-CQNB0-yU.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-const _hoisted_1 = { class: "flex min-w-0 flex-1 flex-col" };
-const _hoisted_2 = { class: "relative flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };
-const _hoisted_3 = { class: "truncate text-lg font-semibold" };
-const _hoisted_4 = {
+const _hoisted_1 = ["href"];
+const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };
+const _hoisted_3 = { class: "relative flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };
+const _hoisted_4 = { class: "truncate text-lg font-semibold" };
+const _hoisted_5 = {
   key: 0,
   class: "min-h-0 flex-1 overflow-hidden"
 };
@@ -30,7 +32,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     divider: { type: Boolean, default: true },
     contentClass: { default: "mx-auto w-full max-w-6xl" },
     fullBleed: { type: Boolean },
-    loading: { type: Boolean }
+    loading: { type: Boolean },
+    labels: {}
   },
   emits: ["update:modelValue", "update:open", "update:collapsed", "select"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -61,10 +64,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       get: () => props.open ?? false,
       set: (v) => emit("update:open", v)
     });
+    const text = useLabels(
+      "appShell",
+      { openMenu: "Open menu", skipToContent: "Skip to content" },
+      () => props.labels
+    );
+    const scrollArea = ref(null);
+    const mainId = `lp-main-${useId()}`;
+    function skipToMain() {
+      document.getElementById(mainId)?.focus();
+    }
     watch(
       () => props.path,
       () => {
         if (drawerOpen.value) emit("update:open", false);
+        scrollArea.value?.viewportEl?.scrollTo({ top: 0, left: 0, behavior: "instant" });
       }
     );
     function onSelect(item) {
@@ -87,6 +101,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({ class: unref(rootClass) }, unref(rest)), [
+        createElementVNode("a", {
+          href: `#${mainId}`,
+          onClick: withModifiers(skipToMain, ["prevent"]),
+          class: "sr-only z-(--z-toast) rounded-control bg-surface-raised px-3 py-2 text-sm font-medium text-ink focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:outline-none focus:ring-2 focus:ring-ring"
+        }, toDisplayString(unref(text).skipToContent), 9, _hoisted_1),
         createVNode(_sfc_main$1, {
           "model-value": __props.modelValue,
           items: __props.items,
@@ -135,14 +154,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["model-value", "items", "sections", "is-active", "open", "mobile-breakpoint", "divider", "loading", "collapsed", "auto-collapse-after"]),
-        createElementVNode("div", _hoisted_1, [
-          createElementVNode("header", _hoisted_2, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("header", _hoisted_3, [
             createVNode(_sfc_main$2, {
               class: normalizeClass(burgerClass.value),
               variant: "ghost",
               size: "sm",
               square: "",
-              "aria-label": "Open menu",
+              "aria-label": unref(text).openMenu,
               onClick: _cache[2] || (_cache[2] = ($event) => emit("update:open", true))
             }, {
               default: withCtx(() => [
@@ -152,14 +171,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 })
               ]),
               _: 1
-            }, 8, ["class"]),
+            }, 8, ["class", "aria-label"]),
             createVNode(_sfc_main$4, {
               axis: "height",
               class: "flex min-w-0 flex-1 items-center"
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "header-title", {}, () => [
-                  createElementVNode("h1", _hoisted_3, toDisplayString(pageTitle.value), 1)
+                  createElementVNode("h1", _hoisted_4, toDisplayString(pageTitle.value), 1)
                 ])
               ]),
               _: 3
@@ -174,18 +193,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _: 3
             })
           ]),
-          __props.fullBleed ? (openBlock(), createElementBlock("div", _hoisted_4, [
-            renderSlot(_ctx.$slots, "default")
-          ])) : (openBlock(), createBlock(_sfc_main$5, {
-            key: 1,
-            class: "min-h-0 flex-1",
-            "content-class": `px-4 py-6 md:px-6 ${__props.contentClass}`
-          }, {
-            default: withCtx(() => [
+          createElementVNode("main", {
+            id: mainId,
+            tabindex: "-1",
+            class: "flex min-h-0 flex-1 flex-col outline-none"
+          }, [
+            __props.fullBleed ? (openBlock(), createElementBlock("div", _hoisted_5, [
               renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }, 8, ["content-class"]))
+            ])) : (openBlock(), createBlock(_sfc_main$5, {
+              key: 1,
+              ref_key: "scrollArea",
+              ref: scrollArea,
+              class: "min-h-0 flex-1",
+              "content-class": `px-4 py-6 md:px-6 ${__props.contentClass}`
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "default")
+              ]),
+              _: 3
+            }, 8, ["content-class"]))
+          ])
         ]),
         renderSlot(_ctx.$slots, "overlays")
       ], 16);