@wpic/ui 0.9.14 → 0.9.16

package/dist/wpic-ui.css

@@ -475,6 +475,11 @@ input[type="range"].wpic-legacy-slider-themed::-webkit-slider-thumb {
   background: inherit;
 }
 
+/* Optional vertical rules between cells, matching the row separators. */
+.wpic-table--column-dividers :is(th, td) + :is(th, td) { border-left: 1px solid #f4f4f5; }
+.dark .wpic-table--column-dividers :is(th, td) + :is(th, td) { border-left-color: #27272a; }
+.wpic-theme .wpic-table--column-dividers :is(th, td) + :is(th, td) { border-left-color: var(--wpic-table-border, var(--wpic-border)); }
+
 /* Match row separators to the enclosing themed card in both modes. */
 .wpic-theme .wpic-table__divider,
 .wpic-theme .wpic-card--bordered:has(> .wpic-card__body > .wpic-table) {

package/dist/wpic-ui.js

@@ -1,5 +1,5 @@
-import { defineComponent as X, openBlock as e, createBlock as O, resolveDynamicComponent as B1, normalizeClass as g, withCtx as s1, createElementVNode as i, createCommentVNode as h, renderSlot as Q, createElementBlock as t, createVNode as L, unref as m, Fragment as I, renderList as c1, toDisplayString as v, useModel as G1, useSlots as q2, computed as y, ref as H, watch as M1, onBeforeUnmount as s2, mergeProps as X1, createTextVNode as m1, withDirectives as T1, normalizeStyle as h1, vModelDynamic as b0, mergeModels as _1, vModelCheckbox as J0, withModifiers as f1, onMounted as H2, withKeys as M2, inject as Q2, provide as g2, isRef as X0, nextTick as H1, Teleport as U1, vShow as G0, Transition as w2, getCurrentInstance as g0, vModelText as l2, useAttrs as _0, TransitionGroup as n3, useCssVars as e3, vModelSelect as c3, onUnmounted as t3, createStaticVNode as A1 } from "vue";
-import { Loader2 as a2, Calendar as z0, DollarSign as i3, X as $1, Check as Y1, Search as P2, ChevronUp as C0, ChevronDown as D1, ChevronsUpDown as J2, ChevronRight as j1, ChevronLeft as z2, Download as l3, Minimize as a3, Expand as o3, CalendarDays as T2, FolderSymlink as s3, Minimize2 as r3, Maximize2 as p3, Plus as y2, Trash2 as d3, Folder as w0, MoreHorizontal as w3, Bot as u3, Paperclip as K2, ThumbsUp as h3, ThumbsDown as m3, Copy as v3, Pencil as f3, MessageSquarePlus as b3, Square as g3, ArrowUp as z3, CircleAlert as C3, CircleCheck as k3, ShieldAlert as x3, Lightbulb as y3, PanelLeftOpen as M3, PanelLeftClose as V3, AlertTriangle as L3, Tag as F2, Clock as B3, RefreshCw as $3 } from "lucide-vue-next";
+import { defineComponent as X, openBlock as e, createBlock as O, resolveDynamicComponent as B1, normalizeClass as g, withCtx as s1, createElementVNode as i, createCommentVNode as h, renderSlot as Q, createElementBlock as t, createVNode as L, unref as m, Fragment as I, renderList as c1, toDisplayString as v, useModel as G1, useSlots as q2, computed as y, ref as H, watch as M1, onBeforeUnmount as s2, mergeProps as U1, createTextVNode as m1, withDirectives as T1, normalizeStyle as h1, vModelDynamic as b0, mergeModels as _1, vModelCheckbox as J0, withModifiers as f1, onMounted as H2, withKeys as M2, inject as Q2, provide as g2, isRef as X0, nextTick as H1, Teleport as Y1, vShow as G0, Transition as w2, getCurrentInstance as g0, vModelText as l2, useAttrs as _0, TransitionGroup as n3, useCssVars as e3, vModelSelect as c3, onUnmounted as t3, createStaticVNode as A1 } from "vue";
+import { Loader2 as a2, Calendar as z0, DollarSign as i3, X as $1, Check as q1, Search as P2, ChevronUp as C0, ChevronDown as D1, ChevronsUpDown as J2, ChevronRight as j1, ChevronLeft as z2, Download as l3, Minimize as a3, Expand as o3, CalendarDays as T2, FolderSymlink as s3, Minimize2 as r3, Maximize2 as p3, Plus as y2, Trash2 as d3, Folder as w0, MoreHorizontal as w3, Bot as u3, Paperclip as K2, ThumbsUp as h3, ThumbsDown as m3, Copy as v3, Pencil as f3, MessageSquarePlus as b3, Square as g3, ArrowUp as z3, CircleAlert as C3, CircleCheck as k3, ShieldAlert as x3, Lightbulb as y3, PanelLeftOpen as M3, PanelLeftClose as V3, AlertTriangle as L3, Tag as F2, Clock as B3, RefreshCw as $3 } from "lucide-vue-next";
 import { offset as u2, autoPlacement as A3, flip as h2, shift as m2, size as X2, useFloating as v2, autoUpdate as f2, arrow as S3 } from "@floating-ui/vue";
 import { defineStore as F3 } from "pinia";
 import { useEditor as H3, EditorContent as P3 } from "@tiptap/vue-3";
@@ -168,7 +168,7 @@ const D3 = {
         z.id = x, z.textContent = "input.winput-number::-webkit-outer-spin-button, input.winput-number::-webkit-inner-spin-button { display: none; } input.winput-number { -moz-appearance: textfield; }", document.head.appendChild(z);
       }
     }
-    return (M, x) => (e(), t("div", X1(M.$attrs, { class: "wpic:w-full" }), [
+    return (M, x) => (e(), t("div", U1(M.$attrs, { class: "wpic:w-full" }), [
       c.label ? (e(), O(k0, {
         key: 0,
         required: c.required
@@ -268,7 +268,7 @@ const D3 = {
           w.value ? "wpic:border-zinc-900 wpic:bg-zinc-900 wpic:text-white wpic:dark:border-zinc-100 wpic:dark:bg-zinc-100 wpic:dark:text-zinc-950" : "wpic:border-zinc-300 wpic:bg-white wpic:text-transparent wpic:shadow-sm wpic:hover:border-zinc-400 wpic:dark:border-zinc-700 wpic:dark:bg-zinc-900 wpic:dark:hover:border-zinc-500"
         ]])
       }, [
-        L(m(Y1), {
+        L(m(q1), {
           size: 11,
           "stroke-width": "2.6"
         })
@@ -354,7 +354,8 @@ const D3 = {
     summaryRow: {},
     compact: { type: Boolean },
     padding: {},
-    showFooter: { type: Boolean, default: !0 }
+    showFooter: { type: Boolean, default: !0 },
+    columnDividers: { type: Boolean, default: !1 }
   },
   emits: ["row-click", "update:selectedKeys", "row-select", "update:serverPage"],
   setup(n, { expose: w, emit: c }) {
@@ -429,7 +430,7 @@ const D3 = {
       ...j.minWidth ? { minWidth: j.minWidth } : {}
     });
     return w({ filteredCount: y(() => M.value.length), searchQuery: $ }), (j, p1) => (e(), t("div", {
-      class: g(["wpic-table", r1.value])
+      class: g(["wpic-table", [r1.value, { "wpic-table--column-dividers": n.columnDividers }]])
     }, [
       (W.value || m(f).toolbar) && !n.loading ? (e(), t("div", {
         key: 0,
@@ -826,11 +827,11 @@ const D3 = {
       if (!$.value || !W.value) return;
       const S = $.value, U = W.value, K = Math.min(S.row, U.row), d1 = Math.max(S.row, U.row), o1 = Math.min(S.cell, U.cell), R = Math.max(S.cell, U.cell), Y = /* @__PURE__ */ new Set(), _ = D.value[S.row], C1 = _?.cells[S.cell];
       for (let E1 = K; E1 <= d1; E1++) {
-        const q1 = D.value[E1];
-        if (q1)
+        const Q1 = D.value[E1];
+        if (Q1)
           for (let e2 = o1; e2 <= R; e2++) {
-            const Q1 = q1.cells[e2];
-            Q1?.editable && (Y.add(J(q1, Q1)), p("cell-change", { rowKey: q1.key, cellKey: Q1.key, value: S.value, row: q1, cell: Q1 }));
+            const J1 = Q1.cells[e2];
+            J1?.editable && (Y.add(J(Q1, J1)), p("cell-change", { rowKey: Q1.key, cellKey: J1.key, value: S.value, row: Q1, cell: J1 }));
           }
       }
       $.value = null, W.value = null, x.value = _ && C1 ? { cells: Y, source: J(_, C1) } : null;
@@ -1230,7 +1231,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
       transformOrigin: Z.value,
       zIndex: c.zIndex
     }));
-    return (F, t1) => (e(), O(U1, {
+    return (F, t1) => (e(), O(Y1, {
       to: "body",
       class: "wpic-popover"
     }, [
@@ -1574,7 +1575,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
       const d = r.content.trim();
       return d === "Generating image..." || R(d);
     }
-    function q1(r) {
+    function Q1(r) {
       return r.replace(/\[PROMPT\]([\s\S]*?)\[\/PROMPT\]/gi, "$1").replace(/\[SETTING\s+[^\]]*\]([\s\S]*?)\[\/SETTING\]/gi, "$1").replace(/\[TASK(?:\s+[^\]]*)?\]([\s\S]*?)\[\/TASK\]/gi, "").replace(/^\s*\[TASK(?:\s+[^\]]*)?\]\s*$/gim, "");
     }
     function e2(r) {
@@ -1584,7 +1585,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
       ).filter(Boolean).join(`
 `);
     }
-    function Q1(r) {
+    function J1(r) {
       if (r.role !== "assistant" || r.streaming || r.error) return null;
       const d = U(r.content), u = P1(r.content), V = S(r.content);
       return !d && !u && !V ? null : { prompt: d, taskType: V, settings: u };
@@ -1724,7 +1725,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
     function H0(r, d, u) {
       const V = F0(r, d, u);
       if (V !== d) return V;
-      const C = Q1(u), A = v1(r);
+      const C = J1(u), A = v1(r);
       if (!C && !A.length) return d;
       const n1 = /(?:prompt\s+(?:modifi[eé]|am[eé]lior[eé]|propos[eé])|prompt)\s*:/i;
       if (C?.prompt && n1.test(r))
@@ -1735,10 +1736,10 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
         for (const x1 of A)
           u1 = u1.replace(R1(x1.label), c2(x1.label, "setting", "model", x1.value));
       if (!C?.settings) return u1;
-      const k1 = (x1, W1, J1) => {
-        if (J1 == null) return;
+      const k1 = (x1, W1, X1) => {
+        if (X1 == null) return;
         const N1 = r.match(x1);
-        N1?.[1] && (u1 = u1.replace(R1(N1[1]), c2(N1[1], "setting", W1, J1)));
+        N1?.[1] && (u1 = u1.replace(R1(N1[1]), c2(N1[1], "setting", W1, X1)));
       };
       if ((l1.includes("format") || l1.includes("aspect") || l1.includes("ratio")) && k1(/\b(\d{1,2}:\d{1,2})\b/, "aspect", C.settings.aspect), (l1.includes("résolution") || l1.includes("resolution")) && k1(/\b([1248]K)\b/i, "resolution", C.settings.resolution), (l1.includes("durée") || l1.includes("duration")) && k1(/\b(\d{1,3})\s*(?:s|sec|secondes?|seconds?)\b/i, "duration", C.settings.duration), l1.includes("fps") && k1(/\b(\d{1,3})\s*fps\b/i, "fps", C.settings.fps), C.settings.format) {
         const x1 = r.match(/\b(jpe?g|png|webp)\b/i)?.[1];
@@ -1747,7 +1748,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
       return u1;
     }
     function k2(r, d) {
-      const u = q1(r);
+      const u = Q1(r);
       let V = R1(u);
       return d?.role === "assistant" && !d.streaming && !d.error && (V = H0(u, V, d)), V = V.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/__([^_]+)__/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(/_([^_]+)_/g, "<em>$1</em>").replace(/\[([^\]]+)\]\(((?:https?:\/\/|\/(?!\/))[^)\s]+)\)/g, (C, A, n1) => {
         const u1 = /^https?:\/\//.test(n1) ? ' target="_blank" rel="noopener noreferrer"' : "";
@@ -1764,7 +1765,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
         return `${F1}
 
 [[WPIC_CHAT_APPLY_PROMPT_${S2}]]`;
-      }), V = q1(u).replace(/\r\n/g, `
+      }), V = Q1(u).replace(/\r\n/g, `
 `).split(`
 `), C = [];
       let A = !1, n1 = [], l1 = !1, u1 = !1;
@@ -1775,7 +1776,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
       }, W1 = () => {
         A && (C.push(`<pre><code>${R1(n1.join(`
 `))}</code></pre>`), n1 = [], A = !1);
-      }, J1 = (L1) => {
+      }, X1 = (L1) => {
         const F1 = L1.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((S1) => S1.trim());
         return F1.length > 1 && F1.every((S1) => /^:?-{3,}:?$/.test(S1));
       }, N1 = (L1) => L1.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((F1) => F1.trim());
@@ -1800,7 +1801,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
           x1(), k1();
           continue;
         }
-        if (!u1 && S1.includes("|") && V[L1 + 1] && J1(V[L1 + 1])) {
+        if (!u1 && S1.includes("|") && V[L1 + 1] && X1(V[L1 + 1])) {
           k1();
           const K1 = N1(S1);
           C.push('<div class="wpic-chat-table-wrap"><table><thead><tr>'), C.push(K1.map((O2) => `<th>${k2(O2, r)}</th>`).join("")), C.push("</tr></thead><tbody>"), u1 = !0, L1 += 1;
@@ -1829,7 +1830,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
         x1(), k1(), C.push(`<p>${k2(S1, r)}</p>`);
       }
       W1(), x1(), k1();
-      const i2 = E2(r).find((L1) => L1.type === "apply_all" && !L1.exactText), O1 = Q1(r);
+      const i2 = E2(r).find((L1) => L1.type === "apply_all" && !L1.exactText), O1 = J1(r);
       if (!(r.role === "assistant" && o1(r.content))) {
         if (i2)
           C.push(`<p class="wpic-chat-actions-end">${e0(i2, c.applyAllLabel)}</p>`);
@@ -1907,7 +1908,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
       const u = d.target instanceof Element ? d.target.closest("[data-wpic-chat-action]") : null;
       if (u) {
         d.preventDefault(), d.stopPropagation();
-        const A = u.dataset.wpicChatAction, n1 = Q1(r);
+        const A = u.dataset.wpicChatAction, n1 = J1(r);
         if (A === "metadata") {
           const l1 = u.dataset.wpicChatActionId, u1 = l1 ? A0(r, l1) : null;
           u1 && B2(r, u1);
@@ -2060,9 +2061,9 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
       if (!u) return;
       a1.value = !0;
       const V = r.clientX, C = r.clientY, A = u.width, n1 = u.height, l1 = u.left, u1 = u.top, k1 = (W1) => {
-        const J1 = W1.clientX - V, N1 = W1.clientY - C;
+        const X1 = W1.clientX - V, N1 = W1.clientY - C;
         let i2 = A, O1 = n1, L1 = l1, F1 = u1;
-        d.includes("e") && (i2 = Math.max(c.minWidth, A + J1)), d.includes("s") && (O1 = Math.max(c.minHeight, n1 + N1)), d.includes("w") && (i2 = Math.max(c.minWidth, A - J1), L1 = l1 + (A - i2)), d.includes("n") && (O1 = Math.max(c.minHeight, n1 - N1), F1 = Math.max(c.topOffset, u1 + (n1 - O1))), s("update:width", Math.min(i2, window.innerWidth)), s("update:height", Math.min(O1, window.innerHeight - c.topOffset)), c.docked || (s("update:x", Math.max(0, L1)), s("update:y", Math.max(c.topOffset, F1)));
+        d.includes("e") && (i2 = Math.max(c.minWidth, A + X1)), d.includes("s") && (O1 = Math.max(c.minHeight, n1 + N1)), d.includes("w") && (i2 = Math.max(c.minWidth, A - X1), L1 = l1 + (A - i2)), d.includes("n") && (O1 = Math.max(c.minHeight, n1 - N1), F1 = Math.max(c.topOffset, u1 + (n1 - O1))), s("update:width", Math.min(i2, window.innerWidth)), s("update:height", Math.min(O1, window.innerHeight - c.topOffset)), c.docked || (s("update:x", Math.max(0, L1)), s("update:y", Math.max(c.topOffset, F1)));
       }, x1 = () => {
         a1.value = !1, document.removeEventListener("mousemove", k1), document.removeEventListener("mouseup", x1);
       };
@@ -2085,7 +2086,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
       x2(), H1(t1), document.addEventListener("pointerdown", i0, !0);
     }), s2(() => {
       F?.disconnect(), z && window.clearTimeout(z), r2(), document.removeEventListener("pointerdown", i0, !0);
-    }), (r, d) => (e(), O(U1, { to: "body" }, [
+    }), (r, d) => (e(), O(Y1, { to: "body" }, [
       L(w2, {
         "enter-active-class": "wpic:transition-opacity wpic:duration-150",
         "enter-from-class": "wpic:opacity-0",
@@ -2395,7 +2396,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
                                     ]),
                                     _: 1
                                   }),
-                                  (e(), O(U1, { to: "body" }, [
+                                  (e(), O(Y1, { to: "body" }, [
                                     q.value === `loose-${u.id}` ? (e(), t("div", {
                                       key: 0,
                                       style: h1(D.value),
@@ -2577,7 +2578,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
                               title: n.copyLabel,
                               onClick: (C) => U0(u.content, j2(u, V))
                             }, [
-                              (e(), O(B1(a.value === j2(u, V) ? m(Y1) : m(v3)), { size: 14 }))
+                              (e(), O(B1(a.value === j2(u, V) ? m(q1) : m(v3)), { size: 14 }))
                             ], 8, q4),
                             u.role === "user" ? (e(), t("button", {
                               key: 1,
@@ -3131,7 +3132,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
                       key: 0,
                       class: g(Z(E.value) ? "wpic:flex wpic:items-center wpic:justify-center wpic:w-3.5 wpic:h-3.5 wpic:rounded wpic:shrink-0 wpic:border wpic:border-indigo-500 wpic:bg-indigo-500" : "wpic:flex wpic:items-center wpic:justify-center wpic:w-3.5 wpic:h-3.5 wpic:rounded wpic:shrink-0 wpic:border wpic:border-zinc-300 wpic:dark:border-zinc-600 wpic:bg-transparent")
                     }, [
-                      Z(E.value) ? (e(), O(m(Y1), {
+                      Z(E.value) ? (e(), O(m(q1), {
                         key: 0,
                         size: 9,
                         style: { color: "white" },
@@ -3271,7 +3272,7 @@ const I5 = ["data-wpic-theme"], n2 = /* @__PURE__ */ X({
               class: "wpic:shrink-0 wpic:text-zinc-400"
             })) : h("", !0),
             i("span", D6, v(o.label), 1),
-            n.modelValue === o.value ? (e(), O(m(Y1), {
+            n.modelValue === o.value ? (e(), O(m(q1), {
               key: 2,
               size: 13,
               class: "wpic:shrink-0 wpic:text-indigo-500"
@@ -3366,7 +3367,7 @@ const R6 = {
     return M1(() => [c.disabled, c.checkable, c.editable], () => {
       (c.disabled || c.checkable || !c.editable) && (f.value = !1);
     }), (M, x) => (e(), t(I, null, [
-      (e(), O(B1(b.value && !n.removable ? "button" : "span"), X1({
+      (e(), O(B1(b.value && !n.removable ? "button" : "span"), U1({
         ref_key: "anchorRef",
         ref: l
       }, { ...k.value ? {} : a.value, ...b.value && !n.removable ? P.value : {} }, {
@@ -3382,7 +3383,7 @@ const R6 = {
         onClick: x[2] || (x[2] = (z) => !n.removable && W())
       }), {
         default: s1(() => [
-          (e(), O(B1(k.value ? "button" : "span"), X1(k.value ? { ...a.value, ...P.value } : {}, {
+          (e(), O(B1(k.value ? "button" : "span"), U1(k.value ? { ...a.value, ...P.value } : {}, {
             class: k.value ? "wpic:inline-flex wpic:items-center wpic:gap-1.5 wpic:bg-transparent wpic:p-0 wpic:[font:inherit] wpic:cursor-pointer wpic:disabled:cursor-not-allowed wpic:focus-visible:outline-2 wpic:focus-visible:outline-offset-2 wpic:focus-visible:outline-current" : "wpic:contents",
             onClick: x[0] || (x[0] = (z) => k.value && W())
           }), {
@@ -3673,7 +3674,7 @@ const R6 = {
   emits: ["close"],
   setup(n, { emit: w }) {
     const c = V2(), s = w, p = H(!1);
-    return g2("wpic-pagination-url-sync", !1), (l, o) => (e(), O(U1, { to: "body" }, [
+    return g2("wpic-pagination-url-sync", !1), (l, o) => (e(), O(Y1, { to: "body" }, [
       i("div", {
         style: h1(m(c)?.variables),
         "data-wpic-theme": m(c)?.mode,
@@ -3740,7 +3741,7 @@ const R6 = {
   emits: ["close"],
   setup(n, { emit: w }) {
     const c = w;
-    return g2("wpic-pagination-url-sync", !1), (s, p) => (e(), O(U1, { to: "body" }, [
+    return g2("wpic-pagination-url-sync", !1), (s, p) => (e(), O(Y1, { to: "body" }, [
       i("div", {
         class: g(["wpic:flex wpic:items-center wpic:justify-center wpic:bg-black/50 wpic:backdrop-blur-sm wpic:px-4", n.zIndex ?? "wpic:z-[60]"]),
         style: { position: "fixed", top: "0", left: "0", right: "0", bottom: "0", width: "100vw", height: "100vh" },
@@ -3818,7 +3819,7 @@ const R6 = {
   __name: "ToastContainer",
   setup(n) {
     const w = M9();
-    return (c, s) => (e(), O(U1, { to: "body" }, [
+    return (c, s) => (e(), O(Y1, { to: "body" }, [
       i("div", V9, [
         L(n3, {
           tag: "div",
@@ -4008,7 +4009,7 @@ const R6 = {
         }, [
           i("span", K9, v(f + 1), 1),
           i("span", U9, v(o.label), 1),
-          o.completed ? (e(), O(m(Y1), {
+          o.completed ? (e(), O(m(q1), {
             key: 0,
             size: 17,
             class: "wpic:shrink-0 wpic:text-indigo-500",
@@ -4085,7 +4086,7 @@ const vi = /* @__PURE__ */ I1(t7, [["render", l7]]), a7 = ["placeholder", "rows"
   emits: ["update:modelValue"],
   setup(n) {
     const w = G1(n, "modelValue");
-    return (c, s) => T1((e(), t("textarea", X1({
+    return (c, s) => T1((e(), t("textarea", U1({
       "onUpdate:modelValue": s[0] || (s[0] = (p) => w.value = p),
       placeholder: n.placeholder ?? "",
       rows: n.rows ?? 4
@@ -4111,7 +4112,7 @@ const vi = /* @__PURE__ */ I1(t7, [["render", l7]]), a7 = ["placeholder", "rows"
   emits: ["update:modelValue"],
   setup(n) {
     const w = G1(n, "modelValue");
-    return (c, s) => T1((e(), t("input", X1({
+    return (c, s) => T1((e(), t("input", U1({
       "onUpdate:modelValue": s[0] || (s[0] = (p) => w.value = p),
       type: n.type ?? "text",
       placeholder: n.placeholder ?? ""
@@ -4141,7 +4142,7 @@ const vi = /* @__PURE__ */ I1(t7, [["render", l7]]), a7 = ["placeholder", "rows"
   emits: ["update:modelValue"],
   setup(n) {
     const w = G1(n, "modelValue");
-    return (c, s) => T1((e(), t("select", X1({
+    return (c, s) => T1((e(), t("select", U1({
       "onUpdate:modelValue": s[0] || (s[0] = (p) => w.value = p)
     }, c.$attrs, {
       class: [
@@ -4451,7 +4452,7 @@ const xi = /* @__PURE__ */ I1(P7, [["render", T7]]), yi = /* @__PURE__ */ X({
   emits: ["confirm", "cancel"],
   setup(n, { emit: w }) {
     const c = w;
-    return g2("wpic-pagination-url-sync", !1), (s, p) => (e(), O(U1, { to: "body" }, [
+    return g2("wpic-pagination-url-sync", !1), (s, p) => (e(), O(Y1, { to: "body" }, [
       i("div", {
         class: "wpic:fixed wpic:inset-0 wpic:flex wpic:items-center wpic:justify-center wpic:bg-black/60 wpic:backdrop-blur-sm",
         style: { "z-index": "100010" },
@@ -4586,7 +4587,7 @@ const Bi = /* @__PURE__ */ X({
     function b() {
       s("update:modelValue", !1);
     }
-    return (k, a) => (e(), O(U1, {
+    return (k, a) => (e(), O(Y1, {
       to: "body",
       class: "wpic-slide-panel"
     }, [
@@ -5055,7 +5056,7 @@ const Q7 = { class: "wpic-tag-input" }, J7 = {
                   class: "wpic:p-0.5 wpic:text-zinc-400 wpic:dark:text-zinc-500 wpic:hover:text-green-500 wpic:transition",
                   onClick: (C1) => o1(_)
                 }, [
-                  L(m(Y1), { size: 12 })
+                  L(m(q1), { size: 12 })
                 ], 8, g8),
                 i("button", {
                   class: "wpic:p-0.5 wpic:text-zinc-400 wpic:dark:text-zinc-500 wpic:hover:text-gray-900 wpic:dark:hover:text-white wpic:transition",
@@ -5385,6 +5386,7 @@ const Q7 = { class: "wpic-tag-input" }, J7 = {
     ]));
   }
 }), W8 = ["data-wpic-theme"], D8 = /* @__PURE__ */ X({
+  inheritAttrs: !1,
   __name: "WTooltip",
   props: {
     content: {},
@@ -5421,20 +5423,21 @@ const Q7 = { class: "wpic-tag-input" }, J7 = {
     return s2(M), M1(() => w.disabled, (x) => {
       x && M();
     }), (x, z) => (e(), t(I, null, [
-      i("span", {
+      i("span", U1({
         ref_key: "reference",
-        ref: s,
-        class: g(["wpic-tooltip", w.inline === !1 ? void 0 : "wpic:inline-flex"]),
+        ref: s
+      }, x.$attrs, {
+        class: ["wpic-tooltip", w.inline === !1 ? "wpic:block" : "wpic:inline-flex"],
         onMouseenter: W,
         onMouseleave: M,
         onClickCapture: M,
         onFocusin: W,
         onFocusout: M,
         onKeydown: M2(M, ["esc"])
-      }, [
+      }), [
         Q(x.$slots, "default")
-      ], 34),
-      (e(), O(U1, { to: "body" }, [
+      ], 16),
+      (e(), O(Y1, { to: "body" }, [
         L(w2, {
           "enter-active-class": "wpic:transition-opacity wpic:duration-150 wpic:ease-out",
           "enter-from-class": "wpic:opacity-0",
@@ -5785,7 +5788,7 @@ const Q7 = { class: "wpic-tag-input" }, J7 = {
           key: 2,
           class: g(["wpic-pill-indicator", n.multiple ? "wpic:rounded-[4px]" : "wpic:rounded-full", s(k.value) ? "wpic-pill-indicator--active" : "wpic-pill-indicator--idle"])
         }, [
-          n.multiple && s(k.value) ? (e(), O(m(Y1), {
+          n.multiple && s(k.value) ? (e(), O(m(q1), {
             key: 0,
             size: 10,
             "stroke-width": "2.8"
@@ -5820,7 +5823,7 @@ const Q7 = { class: "wpic-tag-input" }, J7 = {
           key: 2,
           class: g(["wpic-pill-indicator", n.multiple ? "wpic:rounded-[4px]" : "wpic:rounded-full", s(k.value) ? "wpic-pill-indicator--active" : "wpic-pill-indicator--idle"])
         }, [
-          n.multiple && s(k.value) ? (e(), O(m(Y1), {
+          n.multiple && s(k.value) ? (e(), O(m(q1), {
             key: 0,
             size: 10,
             "stroke-width": "2.8"
@@ -5944,7 +5947,7 @@ const Q7 = { class: "wpic-tag-input" }, J7 = {
         class: "wpic:w-full wpic:h-full wpic:object-cover"
       }, null, 8, bn),
       n.selected ? (e(), t("div", gn, [
-        L(m(Y1), {
+        L(m(q1), {
           size: 20,
           class: "wpic:text-white wpic:drop-shadow"
         })
@@ -6169,7 +6172,7 @@ const Q7 = { class: "wpic-tag-input" }, J7 = {
             class: "wpic:shrink-0 wpic:text-base",
             style: h1({ width: z.width ?? "150px" })
           }, [
-            L(Y2, X1({ ref_for: !0 }, n.selectLabels, {
+            L(Y2, U1({ ref_for: !0 }, n.selectLabels, {
               "model-value": o(z.modelKey),
               options: z.options,
               placeholder: z.placeholder,
@@ -6201,7 +6204,7 @@ const Q7 = { class: "wpic-tag-input" }, J7 = {
               "onUpdate:modelValue": (a1) => a(z.modelKey, a1)
             }, null, 8, ["model-value", "options", "size", "multiple", "grouped", "class", "onUpdate:modelValue"]),
             z.responsive === "select" ? (e(), t("div", Fn, [
-              L(Y2, X1({ ref_for: !0 }, n.selectLabels, {
+              L(Y2, U1({ ref_for: !0 }, n.selectLabels, {
                 "model-value": o(z.modelKey),
                 options: z.options,
                 clearable: !1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpic/ui",
-  "version": "0.9.14",
+  "version": "0.9.16",
   "type": "module",
   "description": "WPIC shared Vue 3 component library",
   "publishConfig": {

package/src/style.css

@@ -474,6 +474,11 @@ input[type="range"].wpic-legacy-slider-themed::-webkit-slider-thumb {
   background: inherit;
 }
 
+/* Optional vertical rules between cells, matching the row separators. */
+.wpic-table--column-dividers :is(th, td) + :is(th, td) { border-left: 1px solid #f4f4f5; }
+.dark .wpic-table--column-dividers :is(th, td) + :is(th, td) { border-left-color: #27272a; }
+.wpic-theme .wpic-table--column-dividers :is(th, td) + :is(th, td) { border-left-color: var(--wpic-table-border, var(--wpic-border)); }
+
 /* Match row separators to the enclosing themed card in both modes. */
 .wpic-theme .wpic-table__divider,
 .wpic-theme .wpic-card--bordered:has(> .wpic-card__body > .wpic-table) {