@leavepulse/ui 0.43.4 → 0.45.0

package/dist/chunks/LpTableFilter-BV8PpLM9.js

@@ -0,0 +1,158 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, createBlock, createCommentVNode, createElementVNode, Fragment, unref, normalizeClass, toDisplayString, createVNode, withCtx, renderList } from "vue";
+import { _ as _sfc_main$3 } from "./LpCheckbox-Bkj13CbW.js";
+import { _ as _sfc_main$1 } from "./LpInput-D-YGQbEv.js";
+import { _ as _sfc_main$2 } from "./LpShift-DXNsauQZ.js";
+import { usePaintSelect } from "../composables/usePaintSelect.js";
+import { matchesQuery, onlyValues, unhideValues, hideAllValues, invertHidden } from "../components/tableFilter.js";
+const _hoisted_1 = { class: "flex flex-col gap-2" };
+const _hoisted_2 = { class: "flex flex-wrap items-center gap-1" };
+const _hoisted_3 = ["disabled"];
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = ["disabled"];
+const _hoisted_6 = ["disabled"];
+const _hoisted_7 = ["data-paint-key"];
+const _hoisted_8 = { class: "truncate" };
+const _hoisted_9 = {
+  key: 0,
+  class: "text-xs text-muted tabular-nums"
+};
+const _hoisted_10 = ["onClick"];
+const _hoisted_11 = {
+  key: 0,
+  class: "px-1.5 py-2 text-xs text-muted"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpTableFilter",
+  props: {
+    options: {},
+    hidden: {},
+    labels: {}
+  },
+  emits: ["update:hidden"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const SEARCH_FROM = 8;
+    const query = ref("");
+    const values = computed(() => props.options.map((o) => o.value));
+    const shown = computed(() => props.options.filter((o) => matchesQuery(o.label, query.value)));
+    function set(next) {
+      emit("update:hidden", next);
+    }
+    function toggle(value) {
+      const next = new Set(props.hidden);
+      if (next.has(value)) next.delete(value);
+      else next.add(value);
+      set(next);
+    }
+    const list = ref(null);
+    const byKey = computed(() => new Map(props.options.map((o) => [String(o.value), o.value])));
+    const paint = usePaintSelect({
+      root: list,
+      selection: () => values.value.filter((v) => !props.hidden.has(v)),
+      set: (shownValues) => {
+        const keep = new Set(shownValues);
+        set(new Set(values.value.filter((v) => !keep.has(v))));
+      },
+      resolve: (raw) => byKey.value.has(raw) ? byKey.value.get(raw) : void 0
+    });
+    function onListKeydown(event) {
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      const boxes = [...list.value?.querySelectorAll("[role=checkbox]") ?? []];
+      const at = boxes.indexOf(document.activeElement);
+      const next = boxes[at + (event.key === "ArrowDown" ? 1 : -1)];
+      if (!next) return;
+      event.preventDefault();
+      next.focus();
+    }
+    const action = "rounded-control px-1.5 py-0.5 text-xs font-medium text-muted outline-none transition-colors duration-fast hover:bg-surface-soft hover:text-ink focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40";
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.options.length >= SEARCH_FROM ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          modelValue: query.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+          size: "sm",
+          icon: "lucide:search",
+          placeholder: __props.labels.search,
+          "aria-label": __props.labels.search
+        }, null, 8, ["modelValue", "placeholder", "aria-label"])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          query.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createElementVNode("button", {
+              type: "button",
+              class: normalizeClass(action),
+              disabled: !shown.value.length,
+              onClick: _cache[1] || (_cache[1] = ($event) => set(unref(onlyValues)(values.value, shown.value.map((o) => o.value))))
+            }, toDisplayString(__props.labels.onlyShown.replace("{count}", String(shown.value.length))), 9, _hoisted_3),
+            createElementVNode("button", {
+              type: "button",
+              class: normalizeClass(action),
+              disabled: !shown.value.length,
+              onClick: _cache[2] || (_cache[2] = ($event) => set(unref(unhideValues)(__props.hidden, shown.value.map((o) => o.value))))
+            }, toDisplayString(__props.labels.addShown.replace("{count}", String(shown.value.length))), 9, _hoisted_4)
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createElementVNode("button", {
+              type: "button",
+              class: normalizeClass(action),
+              disabled: !__props.hidden.size,
+              onClick: _cache[3] || (_cache[3] = ($event) => set(/* @__PURE__ */ new Set()))
+            }, toDisplayString(__props.labels.all), 9, _hoisted_5),
+            createElementVNode("button", {
+              type: "button",
+              class: normalizeClass(action),
+              disabled: __props.hidden.size === __props.options.length,
+              onClick: _cache[4] || (_cache[4] = ($event) => set(unref(hideAllValues)(values.value)))
+            }, toDisplayString(__props.labels.none), 9, _hoisted_6),
+            createElementVNode("button", {
+              type: "button",
+              class: normalizeClass(action),
+              onClick: _cache[5] || (_cache[5] = ($event) => set(unref(invertHidden)(values.value, __props.hidden)))
+            }, toDisplayString(__props.labels.invert), 1)
+          ], 64))
+        ]),
+        createVNode(_sfc_main$2, null, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              ref_key: "list",
+              ref: list,
+              class: "-mx-1 flex max-h-64 flex-col overflow-y-auto overscroll-contain",
+              onKeydown: onListKeydown
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(shown.value, (option) => {
+                return openBlock(), createElementBlock("div", {
+                  key: String(option.value),
+                  class: "group/opt flex items-center gap-2 rounded-control px-1.5 py-1 transition-colors duration-fast select-none hover:bg-surface-soft",
+                  "data-paint-key": String(option.value)
+                }, [
+                  createVNode(_sfc_main$3, {
+                    "model-value": !__props.hidden.has(option.value),
+                    class: "min-w-0 flex-1",
+                    onPointerdown: ($event) => unref(paint).onPointerDown($event, option.value),
+                    "onUpdate:modelValue": ($event) => toggle(option.value)
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", _hoisted_8, toDisplayString(option.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["model-value", "onPointerdown", "onUpdate:modelValue"]),
+                  option.count !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(option.count), 1)) : createCommentVNode("", true),
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "rounded-control px-1.5 py-0.5 text-xs font-medium text-brand opacity-0 outline-none transition-opacity duration-fast group-hover/opt:opacity-100 hover:bg-brand-soft focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring",
+                    onClick: ($event) => set(unref(onlyValues)(values.value, [option.value]))
+                  }, toDisplayString(__props.labels.only), 9, _hoisted_10)
+                ], 8, _hoisted_7);
+              }), 128)),
+              !shown.value.length ? (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString(__props.labels.noValues), 1)) : createCommentVNode("", true)
+            ], 544)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpTableOfContents-CjvxPMpU.js → LpTableOfContents-BUcAfGPQ.js}

@@ -1,23 +1,26 @@
-import { defineComponent, ref, useId, computed, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeClass, createBlock, unref, createCommentVNode, createTextVNode } from "vue";
+import { defineComponent, computed, ref, useId, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeStyle, normalizeClass, createBlock, unref, createCommentVNode, createTextVNode } from "vue";
 import { Motion } from "motion-v";
+import { useLabels } from "../composables/useLpConfig.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = { class: "mb-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted" };
-const _hoisted_3 = ["href", "onClick", "onMouseenter"];
-const _hoisted_4 = {
-  key: 0,
-  class: "flex flex-col gap-0.5"
-};
-const _hoisted_5 = ["href", "onClick", "onMouseenter"];
+const _hoisted_3 = ["href", "aria-current", "onClick", "onMouseenter"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTableOfContents",
   props: {
     links: {},
-    title: { default: "On this page" },
-    offset: { default: 96 }
+    title: {},
+    offset: { default: 96 },
+    labels: {}
   },
   setup(__props) {
     const props = __props;
+    const text = useLabels("toc", { title: "On this page" }, () => props.labels);
+    const heading = computed(() => props.title ?? text.value.title);
+    function flatten(links, depth = 0) {
+      return links.flatMap((link) => [{ link, depth }, ...flatten(link.children ?? [], depth + 1)]);
+    }
+    const rows = computed(() => flatten(props.links));
     const activeId = ref("");
     const hoveredId = ref(null);
     const pillId = `lp-toc-${useId()}`;
@@ -60,13 +63,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       rafId = null;
       safetyTimer = null;
     }
-    function suppressSpyUntilScrollEnds() {
+    function scrollerOf(el) {
+      for (let node = el.parentElement; node; node = node.parentElement) {
+        const { overflowY } = getComputedStyle(node);
+        if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) return node;
+      }
+      return null;
+    }
+    function suppressSpyUntilScrollEnds(target) {
       spySuppressed = true;
       if (rafId != null) cancelAnimationFrame(rafId);
       if (safetyTimer != null) clearTimeout(safetyTimer);
-      let last = window.scrollY;
+      const scroller = scrollerOf(target);
+      const position = () => scroller ? scroller.scrollTop : window.scrollY;
+      let last = position();
       const tick = () => {
-        const y = window.scrollY;
+        const y = position();
         if (y === last) {
           unfreeze();
           return;
@@ -82,9 +94,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!el) return;
       ev.preventDefault();
       activeId.value = id;
-      suppressSpyUntilScrollEnds();
+      suppressSpyUntilScrollEnds(el);
       el.scrollIntoView({ behavior: "smooth", block: "start" });
-      history.replaceState(null, "", `#${id}`);
+      history.replaceState(history.state, "", `#${id}`);
     }
     onMounted(setup);
     watch(() => props.links, setup, { deep: true });
@@ -94,22 +106,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("nav", {
-        "aria-label": __props.title,
+        "aria-label": heading.value,
         class: "text-sm"
       }, [
-        createElementVNode("p", _hoisted_2, toDisplayString(__props.title), 1),
+        createElementVNode("p", _hoisted_2, toDisplayString(heading.value), 1),
         createElementVNode("ul", {
           class: "relative flex flex-col gap-0.5 border-l border-line",
           onMouseleave: _cache[0] || (_cache[0] = ($event) => hoveredId.value = null)
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.links, (link) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, ({ link, depth }) => {
             return openBlock(), createElementBlock("li", {
               key: link.id,
               class: "flex flex-col"
             }, [
               createElementVNode("a", {
                 href: `#${link.id}`,
-                class: normalizeClass(["relative -ml-px block py-1 pl-3.5 leading-snug transition-colors duration-[var(--duration-fast)]", litId.value === link.id ? "text-brand" : "text-muted hover:text-ink"]),
+                class: normalizeClass(["relative -ml-px block py-1 leading-snug transition-colors duration-[var(--duration-fast)]", [
+                  depth > 0 ? "text-[13px]" : "",
+                  litId.value === link.id ? "text-brand" : "text-muted hover:text-ink"
+                ]]),
+                style: normalizeStyle({ paddingLeft: `${0.875 + depth * 0.875}rem` }),
+                "aria-current": activeId.value === link.id ? "location" : void 0,
                 onClick: ($event) => onClick(link.id, $event),
                 onMouseenter: ($event) => hoveredId.value = link.id
               }, [
@@ -120,29 +137,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   class: "absolute -left-px top-0 h-full w-0.5 rounded-full bg-brand"
                 }, null, 8, ["transition"])) : createCommentVNode("", true),
                 createTextVNode(" " + toDisplayString(link.text), 1)
-              ], 42, _hoisted_3),
-              link.children?.length ? (openBlock(), createElementBlock("ul", _hoisted_4, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(link.children, (child) => {
-                  return openBlock(), createElementBlock("li", {
-                    key: child.id
-                  }, [
-                    createElementVNode("a", {
-                      href: `#${child.id}`,
-                      class: normalizeClass(["relative -ml-px block py-1 pl-7 text-[13px] leading-snug transition-colors duration-[var(--duration-fast)]", litId.value === child.id ? "text-brand" : "text-muted hover:text-ink"]),
-                      onClick: ($event) => onClick(child.id, $event),
-                      onMouseenter: ($event) => hoveredId.value = child.id
-                    }, [
-                      litId.value === child.id ? (openBlock(), createBlock(unref(Motion), {
-                        key: 0,
-                        "layout-id": pillId,
-                        transition: unref(pillTransition),
-                        class: "absolute -left-px top-0 h-full w-0.5 rounded-full bg-brand"
-                      }, null, 8, ["transition"])) : createCommentVNode("", true),
-                      createTextVNode(" " + toDisplayString(child.text), 1)
-                    ], 42, _hoisted_5)
-                  ]);
-                }), 128))
-              ])) : createCommentVNode("", true)
+              ], 46, _hoisted_3)
             ]);
           }), 128))
         ], 32)

package/dist/chunks/{LpTabs-Cefe_lys.js → LpTabs-29iW1XOx.js}

@@ -1,20 +1,34 @@
-import { defineComponent, useId, ref, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
+import { defineComponent, ref, watch, useId, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
 import { useReducedMotion, Motion } from "motion-v";
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "reka-ui";
 import { usePillTransition } from "../composables/usePillTransition.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 const _hoisted_1 = { class: "relative z-10" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTabs",
   props: {
     modelValue: {},
+    defaultValue: {},
     items: {},
     variant: { default: "contained" },
     accent: { type: Boolean, default: false },
     block: { type: Boolean, default: false }
   },
   emits: ["update:modelValue"],
-  setup(__props) {
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const current = ref(props.modelValue ?? props.defaultValue ?? props.items[0]?.value);
+    watch(
+      () => props.modelValue,
+      (value) => {
+        if (value !== void 0) current.value = value;
+      }
+    );
+    function select(value) {
+      if (props.modelValue === void 0) current.value = value;
+      emit("update:modelValue", value);
+    }
     const pillId = `lp-tab-indicator-${useId()}`;
     const hovered = ref(null);
     const pillTransition = usePillTransition();
@@ -31,8 +45,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TabsRoot), {
-        "model-value": __props.modelValue,
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = (v) => _ctx.$emit("update:modelValue", v))
+        "model-value": current.value,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = (v) => select(v))
       }, {
         default: withCtx(() => [
           createVNode(unref(TabsList), {
@@ -58,7 +72,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   onPointerup: releaseFocusAfterPointer
                 }, {
                   default: withCtx(() => [
-                    pillUnder(item.value, __props.modelValue) ? (openBlock(), createBlock(unref(Motion), {
+                    pillUnder(item.value, current.value) ? (openBlock(), createBlock(unref(Motion), {
                       key: 0,
                       "layout-id": pillId,
                       transition: unref(pillTransition),

package/dist/chunks/LpTagsInput-D1SuqbhB.js

@@ -0,0 +1,300 @@
+import { defineComponent, useAttrs, computed, ref, useId, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, unref, normalizeClass, withCtx, createElementVNode, createVNode, mergeProps, TransitionGroup, createElementBlock, Fragment, renderList, createCommentVNode, toDisplayString } from "vue";
+import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput } from "reka-ui";
+import { useField, useFieldControl } from "../composables/useField.js";
+import { prefersReducedMotion } from "../composables/easing.js";
+import { useFieldNotice } from "../composables/useFieldNotice.js";
+import { useShift } from "../composables/useShift.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { mergeClass } from "../composables/useMergedClass.js";
+import { _ as _sfc_main$3 } from "./LpFieldNotice-wtieLUTj.js";
+import { _ as _sfc_main$1 } from "./LpFormField-CtVYj6tO.js";
+import { _ as _sfc_main$2 } from "./LpIcon-DYtaid0K.js";
+import { splitTags, addTags } from "../components/tags.js";
+const _hoisted_1 = { class: "relative" };
+const _hoisted_2 = {
+  class: "sr-only",
+  "aria-live": "polite"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpTagsInput",
+  props: {
+    modelValue: { default: () => [] },
+    placeholder: {},
+    delimiter: { default: () => [",", "\n", "	"] },
+    max: {},
+    duplicates: { default: "reject" },
+    validate: {},
+    normalize: {},
+    addOnBlur: { type: Boolean, default: true },
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    required: { type: Boolean },
+    label: {},
+    hint: {},
+    error: {},
+    labels: {}
+  },
+  emits: ["update:modelValue", "reject", "blur"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const text = useLabels(
+      "tagsInput",
+      {
+        remove: "Remove {tag}",
+        duplicate: "{tag} is already added",
+        max: "Up to {max} items",
+        added: "{tag} added",
+        removed: "{tag} removed"
+      },
+      () => props.labels
+    );
+    const attrs = useAttrs();
+    const hasField = computed(() => !!props.label || !!props.hint || !!props.error);
+    const notice = useFieldNotice();
+    const outerField = useField();
+    const ownField = ref(null);
+    function bindField(c) {
+      ownField.value = hasField.value && c ? c : null;
+    }
+    const standalone = computed(() => !hasField.value && !outerField?.value.notify);
+    function say(message, options) {
+      if (hasField.value) ownField.value?.notify(message, options);
+      else if (outerField?.value.notify) outerField.value.notify(message, options);
+      else notice.show(message, options);
+    }
+    function unsay() {
+      if (hasField.value) ownField.value?.clearNotice();
+      else if (outerField?.value.clearNotice) outerField.value.clearNotice();
+      else notice.clear();
+    }
+    const stuck = ref(false);
+    const announcement = ref("");
+    const noticeId = `${useId()}-notice`;
+    const field = useFieldControl(() => ({
+      wrapped: hasField.value,
+      hasMessage: !!props.error || !!props.hint,
+      id: typeof attrs.id === "string" ? attrs.id : void 0,
+      invalid: props.invalid || !!props.error || stuck.value,
+      required: props.required,
+      disabled: props.disabled
+    }));
+    const describedBy = computed(
+      () => [
+        field.value.describedBy,
+        hasField.value && field.value.id ? `${field.value.id}-notice` : void 0,
+        standalone.value && notice.message.value ? noticeId : void 0
+      ].filter(Boolean).join(" ") || void 0
+    );
+    const rootAttrs = computed(() => {
+      const { class: _c, style: _s, id: _i, ...rest } = attrs;
+      return rest;
+    });
+    function explain(rejected) {
+      if (rejected.reason === "invalid") return rejected.message ?? "";
+      if (rejected.reason === "max") return text.value.max.replace("{max}", String(props.max));
+      return text.value.duplicate.replace("{tag}", rejected.value);
+    }
+    const inputEl = ref(null);
+    const { el: boxEl, tweening, resizing } = useShift({ axis: "height" });
+    const keyed = computed(() => {
+      const seen = /* @__PURE__ */ new Map();
+      return props.modelValue.map((tag) => {
+        const n = seen.get(tag) ?? 0;
+        seen.set(tag, n + 1);
+        return { tag, key: `${n}:${tag}` };
+      });
+    });
+    function pulse(tag) {
+      if (prefersReducedMotion()) return;
+      const chip = boxEl.value?.querySelector(`[data-tag-key="${CSS.escape(`0:${tag}`)}"]`);
+      chip?.animate(
+        [
+          { transform: "scale(1)", boxShadow: "0 0 0 0 transparent" },
+          { transform: "scale(1.08)", boxShadow: "0 0 0 2px var(--color-ring)" },
+          { transform: "scale(1)", boxShadow: "0 0 0 0 transparent" }
+        ],
+        { duration: 420, easing: "ease-out" }
+      );
+    }
+    function add(raw) {
+      const parts = splitTags(raw, props.delimiter);
+      if (!parts.length) return "";
+      const { tags, rejected, ignored } = addTags(props.modelValue, parts, {
+        max: props.max,
+        duplicates: props.duplicates,
+        validate: props.validate,
+        normalize: props.normalize
+      });
+      if (tags.length !== props.modelValue.length) {
+        const added = tags.slice(props.modelValue.length);
+        announcement.value = added.map((t) => text.value.added.replace("{tag}", t)).join(", ");
+        emit("update:modelValue", tags);
+      }
+      stuck.value = rejected.length > 0;
+      const first = rejected[0];
+      if (first) {
+        say(explain(first), { tone: first.reason === "invalid" ? "danger" : "info", duration: 0 });
+        emit("reject", rejected);
+      } else if (ignored.length) {
+        say(text.value.duplicate.replace("{tag}", ignored[0]));
+      } else {
+        unsay();
+      }
+      for (const r of rejected) if (r.reason === "duplicate") pulse(props.normalize ? props.normalize(r.value) : r.value);
+      for (const tag of ignored) pulse(tag);
+      return rejected.map((r) => r.value).join(joiner.value);
+    }
+    const joiner = computed(() => {
+      const d = props.delimiter;
+      const visible = d instanceof RegExp ? void 0 : (typeof d === "string" ? [d] : d).find((x) => x.trim());
+      return visible ? `${visible} ` : " ";
+    });
+    function commit(el) {
+      el.value = add(el.value);
+    }
+    function isDelimiter(data) {
+      const d = props.delimiter;
+      if (d instanceof RegExp) return new RegExp(d.source, d.flags.replace(/[gy]/g, "")).test(data);
+      return (typeof d === "string" ? [d] : d).includes(data);
+    }
+    function onKeydown(event) {
+      if (event.isComposing || !(event.target instanceof HTMLInputElement)) return;
+      if (event.key === "Enter" && event.target.value.trim()) {
+        event.preventDefault();
+        commit(event.target);
+      }
+    }
+    function onBeforeInput(event) {
+      if (event.isComposing || !(event.target instanceof HTMLInputElement)) return;
+      if (event.inputType === "insertText" && event.data && isDelimiter(event.data)) {
+        event.preventDefault();
+        commit(event.target);
+      }
+    }
+    function onInput() {
+      if (!stuck.value) return;
+      stuck.value = false;
+      unsay();
+    }
+    function onPaste(event) {
+      const pasted = event.clipboardData?.getData("text") ?? "";
+      if (!(event.target instanceof HTMLInputElement) || !pasted) return;
+      if (splitTags(pasted, props.delimiter).length < 2) return;
+      event.preventDefault();
+      const el = event.target;
+      const typed = el.value.slice(0, el.selectionStart ?? el.value.length) + pasted + el.value.slice(el.selectionEnd ?? el.value.length);
+      el.value = add(typed);
+    }
+    function onBlur(event) {
+      emit("blur", event);
+      if (props.addOnBlur && event.target instanceof HTMLInputElement && event.target.value.trim()) commit(event.target);
+    }
+    function onModel(value) {
+      const next = (value ?? []).map(String);
+      const removed = props.modelValue.filter((t) => !next.includes(t));
+      if (removed.length) announcement.value = removed.map((t) => text.value.removed.replace("{tag}", t)).join(", ");
+      stuck.value = false;
+      unsay();
+      emit("update:modelValue", next);
+    }
+    __expose({ focus: () => inputEl.value?.focus(), add: (value) => add(value) });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(hasField.value ? _sfc_main$1 : "div"), {
+        ref: bindField,
+        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,
+        id: hasField.value ? unref(field).id : void 0,
+        class: normalizeClass(hasField.value ? unref(attrs).class : "contents"),
+        style: normalizeStyle(hasField.value ? unref(attrs).style : void 0)
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(unref(TagsInputRoot), mergeProps(rootAttrs.value, {
+              "model-value": __props.modelValue,
+              disabled: unref(field).disabled,
+              required: unref(field).required,
+              id: unref(field).id,
+              delimiter: /(?!)/,
+              "data-lp-ring-owner": "",
+              ref: (c) => boxEl.value = c?.$el ?? null,
+              class: unref(mergeClass)(
+                "flex min-h-(--size-control-md) w-full flex-wrap items-center gap-1.5 rounded-control border border-line bg-surface-soft px-2 py-1.5 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-55",
+                unref(field).invalid ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "",
+                hasField.value ? "" : unref(attrs).class,
+                unref(tweening) ? "transition-[height,border-color,box-shadow] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none" : "",
+                unref(resizing) ? "overflow-hidden" : ""
+              ),
+              style: hasField.value ? void 0 : unref(attrs).style,
+              "onUpdate:modelValue": onModel
+            }), {
+              default: withCtx(() => [
+                createVNode(TransitionGroup, {
+                  "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(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(keyed.value, ({ tag, key }) => {
+                      return openBlock(), createBlock(unref(TagsInputItem), {
+                        key,
+                        "data-tag-key": key,
+                        value: tag,
+                        class: "inline-flex max-w-full items-center gap-1 rounded-pill bg-surface-raised py-0.5 pr-1 pl-2.5 text-xs font-medium text-ink outline-none data-[state=active]:ring-2 data-[state=active]:ring-ring"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(TagsInputItemText), { class: "truncate" }),
+                          createVNode(unref(TagsInputItemDelete), {
+                            "aria-labelledby": void 0,
+                            "aria-label": unref(text).remove.replace("{tag}", tag),
+                            class: "grid size-4 shrink-0 place-items-center rounded-pill text-muted transition-colors hover:bg-ink/10 hover:text-ink"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(_sfc_main$2, {
+                                name: "lucide:x",
+                                size: 12
+                              })
+                            ]),
+                            _: 1
+                          }, 8, ["aria-label"])
+                        ]),
+                        _: 2
+                      }, 1032, ["data-tag-key", "value"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                }),
+                createVNode(unref(TagsInputInput), {
+                  ref: (c) => inputEl.value = c?.$el ?? null,
+                  placeholder: __props.modelValue.length ? void 0 : __props.placeholder,
+                  "aria-invalid": unref(field).invalid || void 0,
+                  "aria-describedby": describedBy.value,
+                  class: "min-w-24 flex-1 bg-transparent px-1 outline-none placeholder:text-muted",
+                  onKeydown,
+                  onBeforeinput: onBeforeInput,
+                  onInput,
+                  onPaste,
+                  onBlur
+                }, null, 8, ["placeholder", "aria-invalid", "aria-describedby"])
+              ]),
+              _: 1
+            }, 16, ["model-value", "disabled", "required", "id", "class", "style"]),
+            standalone.value ? (openBlock(), createBlock(_sfc_main$3, {
+              key: 0,
+              notice: unref(notice),
+              id: noticeId
+            }, null, 8, ["notice"])) : createCommentVNode("", true)
+          ]),
+          createElementVNode("span", _hoisted_2, toDisplayString(announcement.value), 1)
+        ]),
+        _: 1
+      }, 8, ["label", "hint", "error", "required", "id", "class", "style"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};