@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/components/containers/expandable-item/ExpandableItem.vue.js

@@ -0,0 +1,211 @@
+import { defineComponent as te, useSlots as ae, useId as S, ref as g, computed as r, watch as oe, openBlock as n, createElementBlock as s, normalizeClass as V, createElementVNode as u, renderSlot as d, createBlock as E, resolveDynamicComponent as F, createCommentVNode as c, unref as o, Fragment as R, createTextVNode as P, toDisplayString as A, createVNode as q, withCtx as ne, withModifiers as G } from "vue";
+import { ChevronDown as le } from "@lucide/vue";
+import ie from "../../primitives/motion/MotionCollapse.vue.js";
+import { cn as se } from "../../../lib/cn.js";
+import { useControllableBoolean as re } from "../../../lib/controllable.js";
+import de from "../../primitives/tooltip/OverflowTooltip.vue.js";
+import { useOverflowingText as J } from "../../../lib/overflow.js";
+const ue = ["draggable", "data-selected"], ce = {
+  key: 0,
+  class: "relative mt-0.5 shrink-0"
+}, fe = { class: "flex size-10 items-center justify-center rounded-full bg-[var(--ui-surface-subtle)] text-[var(--ui-text-secondary)]" }, ve = {
+  key: 0,
+  class: "absolute -right-1 -bottom-1 flex size-5 items-center justify-center rounded-full bg-[var(--ui-surface)]"
+}, me = { class: "min-w-0 flex-1" }, be = ["id"], pe = { class: "flex items-center gap-2" }, ge = ["title", "data-ui-tooltip-hint"], ye = ["innerHTML"], he = {
+  key: 0,
+  class: "shrink-0 text-[length:var(--ui-font-size)] text-[var(--ui-text-secondary)]"
+}, xe = ["title", "data-ui-tooltip-hint"], ke = ["innerHTML"], we = ["id", "aria-labelledby"], Ee = ["tabindex", "aria-disabled", "aria-expanded", "aria-controls", "aria-labelledby"], Ce = 'a[href], button, input, select, textarea, label, summary, [role="button"], [role="link"], [contenteditable]', Oe = /* @__PURE__ */ te({
+  __name: "ExpandableItem",
+  props: {
+    title: {},
+    summary: {},
+    icon: {},
+    statusIcon: {},
+    expanded: { type: Boolean, default: void 0 },
+    expandable: { type: Boolean, default: void 0 },
+    disabled: { type: [Boolean, Object] },
+    selected: { type: Boolean },
+    draggable: { type: Boolean, default: !1 },
+    selectable: { type: Boolean, default: !1 }
+  },
+  emits: ["update:expanded", "select", "drag-start", "drag-over", "drop", "drag-end"],
+  setup(a, { emit: K }) {
+    const l = a, f = K, Q = ae(), h = S(), C = S(), $ = g(null), D = g(null), z = g(null), B = g(null), T = g(null), U = J(B), W = J(T);
+    function I(e) {
+      if (e !== void 0)
+        return typeof e == "string" ? { text: e, html: !1 } : { text: e.text, html: e.format === "html", tip: e.tip };
+    }
+    const m = r(() => I(l.title)), b = r(() => I(l.summary)), X = r(() => !!Q.detail), x = r(() => l.expandable ?? X.value), M = r(() => typeof l.disabled == "object" && l.disabled !== null ? l.disabled : void 0), v = r(() => l.disabled === !0 || M.value !== void 0), O = r(() => {
+      if (l.disabled === !0) return !0;
+      const e = M.value;
+      return e !== void 0 && e.allowExpand !== !0;
+    }), y = r(() => x.value && !O.value), { value: p, set: j } = re(
+      () => l.expanded,
+      !1,
+      (e) => f("update:expanded", e)
+    );
+    oe(y, (e) => {
+      !e && p.value && j(!1);
+    });
+    function Y(e, t) {
+      if (!(!e || e.tip === void 0))
+        return e.tip === !0 ? t ? e.text : void 0 : typeof e.tip == "string" ? e.tip : void 0;
+    }
+    const k = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(pointer: coarse)").matches;
+    function H(e, t) {
+      return k ? void 0 : Y(e, t);
+    }
+    function L(e) {
+      return k && e && typeof e.tip == "string" ? e.tip : void 0;
+    }
+    function w() {
+      y.value && j(!p.value);
+    }
+    function N(e) {
+      const t = e.target instanceof Element ? e.target : null;
+      if (!t || D.value?.contains(t)) return !1;
+      const i = t.closest(Ce);
+      return !i || !$.value?.contains(i);
+    }
+    function Z(e) {
+      l.selectable ? v.value || f("select", e) : N(e) && w();
+    }
+    function _(e) {
+      l.selectable && N(e) && w();
+    }
+    function ee(e) {
+      e.stopPropagation();
+    }
+    return (e, t) => (n(), s("div", {
+      ref_key: "rowEl",
+      ref: $,
+      class: V(["group flex items-start gap-3 rounded-[var(--ui-radius-control)] px-3 py-2 transition-colors duration-[var(--ui-motion-fast)]", [
+        x.value && "select-none",
+        v.value && "opacity-40",
+        a.selected && !v.value && "bg-[var(--ui-surface-selected)]",
+        a.draggable && !v.value && "cursor-grab",
+        (a.selectable ? !v.value : y.value && !a.draggable) && "cursor-pointer"
+      ]]),
+      draggable: a.draggable && !v.value ? !0 : void 0,
+      "data-selected": a.selected ? "true" : void 0,
+      "data-syno-pkg-land-ui": "",
+      onClick: Z,
+      onDblclick: _,
+      onDragstart: t[0] || (t[0] = (i) => f("drag-start", i)),
+      onDragover: t[1] || (t[1] = (i) => f("drag-over", i)),
+      onDrop: t[2] || (t[2] = (i) => f("drop", i)),
+      onDragend: t[3] || (t[3] = (i) => f("drag-end", i))
+    }, [
+      a.icon || e.$slots.icon || a.statusIcon || e.$slots["icon-status"] ? (n(), s("div", ce, [
+        u("span", fe, [
+          d(e.$slots, "icon", {}, () => [
+            a.icon ? (n(), E(F(a.icon), {
+              key: 0,
+              class: "size-5",
+              "aria-hidden": "true"
+            })) : c("", !0)
+          ])
+        ]),
+        a.statusIcon || e.$slots["icon-status"] ? (n(), s("span", ve, [
+          d(e.$slots, "icon-status", {}, () => [
+            a.statusIcon ? (n(), E(F(a.statusIcon), {
+              key: 0,
+              class: "size-4",
+              "aria-hidden": "true"
+            })) : c("", !0)
+          ])
+        ])) : c("", !0)
+      ])) : c("", !0),
+      u("div", me, [
+        o(k) ? (n(), E(de, {
+          key: 0,
+          target: z.value,
+          "open-on-tap": !0
+        }, null, 8, ["target"])) : c("", !0),
+        u("div", {
+          id: o(h),
+          ref_key: "summaryEl",
+          ref: z
+        }, [
+          u("div", pe, [
+            u("span", {
+              ref_key: "titleEl",
+              ref: B,
+              class: "min-w-0 truncate text-[length:var(--ui-font-size-lg)] font-semibold text-[var(--ui-text)]",
+              title: H(m.value, o(U).overflowing.value),
+              "data-ui-tooltip-hint": L(m.value)
+            }, [
+              d(e.$slots, "title", {}, () => [
+                m.value?.html ? (n(), s("span", {
+                  key: 0,
+                  innerHTML: m.value.text
+                }, null, 8, ye)) : (n(), s(R, { key: 1 }, [
+                  P(A(m.value?.text), 1)
+                ], 64))
+              ])
+            ], 8, ge),
+            e.$slots.status ? (n(), s("span", he, [
+              d(e.$slots, "status")
+            ])) : c("", !0)
+          ]),
+          u("div", {
+            ref_key: "labelEl",
+            ref: T,
+            class: "truncate text-[length:var(--ui-font-size)] text-[var(--ui-text-secondary)]",
+            title: H(b.value, o(W).overflowing.value),
+            "data-ui-tooltip-hint": L(b.value)
+          }, [
+            d(e.$slots, "label", {}, () => [
+              b.value?.html ? (n(), s("span", {
+                key: 0,
+                innerHTML: b.value.text
+              }, null, 8, ke)) : (n(), s(R, { key: 1 }, [
+                P(A(b.value?.text), 1)
+              ], 64))
+            ])
+          ], 8, xe),
+          d(e.$slots, "block")
+        ], 8, be),
+        q(ie, { open: o(p) }, {
+          default: ne(() => [
+            u("div", {
+              id: o(C),
+              ref_key: "detailEl",
+              ref: D,
+              role: "region",
+              "aria-labelledby": o(h),
+              class: "cursor-auto pt-2 text-[length:var(--ui-font-size)] leading-5 text-[var(--ui-text-secondary)]"
+            }, [
+              d(e.$slots, "detail")
+            ], 8, we)
+          ]),
+          _: 3
+        }, 8, ["open"])
+      ]),
+      x.value ? (n(), s("button", {
+        key: 1,
+        type: "button",
+        "data-expandable-toggle": "",
+        "data-ui-hit": "",
+        class: "relative before:absolute [@media(pointer:fine)]:before:-inset-1 before:content-[''] m-0 border-0 bg-transparent p-0 -mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-[var(--ui-radius-control)] text-[var(--ui-text-secondary)] outline-none transition-colors duration-[var(--ui-motion-fast)] hover:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+        tabindex: y.value ? 0 : -1,
+        "aria-disabled": O.value ? "true" : void 0,
+        "aria-expanded": o(p),
+        "aria-controls": o(C),
+        "aria-labelledby": o(h),
+        onClick: G(w, ["stop"]),
+        onDblclick: G(ee, ["stop"])
+      }, [
+        d(e.$slots, "toggle-icon", {}, () => [
+          q(o(le), {
+            class: V(o(se)("size-4 transition-transform duration-[var(--ui-motion-fast)]", o(p) && "rotate-180")),
+            "aria-hidden": "true"
+          }, null, 8, ["class"])
+        ])
+      ], 40, Ee)) : c("", !0)
+    ], 42, ue));
+  }
+});
+export {
+  Oe as default
+};

package/dist/modules/components/containers/expandable-item/ExpandableItem2.vue.js

@@ -0,0 +1,4 @@
+import f from "./ExpandableItem.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/containers/fieldset/Fieldset.vue.js

@@ -0,0 +1,139 @@
+import { defineComponent as z, useId as D, ref as g, computed as I, watch as L, openBlock as l, createElementBlock as i, unref as t, createElementVNode as d, normalizeClass as u, renderSlot as f, createBlock as M, createCommentVNode as x, Fragment as w, createTextVNode as b, toDisplayString as h } from "vue";
+import { ChevronUp as N } from "@lucide/vue";
+import { cn as p } from "../../../lib/cn.js";
+import { useControllableBoolean as S } from "../../../lib/controllable.js";
+const V = ["data-collapsed"], F = { class: "w-full p-0" }, K = ["aria-expanded", "aria-controls"], P = { class: "min-w-0 flex-1 text-left" }, U = ["innerHTML"], j = { class: "min-w-0 flex-1 text-left" }, q = ["innerHTML"], A = ["id", "inert"], G = {
+  class: "p-[var(--ui-fieldset-inset)]",
+  "data-fieldset-body": ""
+}, J = {
+  key: 0,
+  "data-fieldset-description": "",
+  class: "m-0 mb-[var(--ui-field-gap)] max-w-none py-1 text-[length:var(--ui-font-size-control)] leading-5 text-[var(--ui-text)]"
+}, Y = /* @__PURE__ */ z({
+  __name: "Fieldset",
+  props: {
+    title: {},
+    description: {},
+    collapsible: { type: Boolean, default: !0 },
+    collapseTriggerEvent: { default: "click" },
+    collapseIcon: { default: "left" },
+    collapsed: { type: Boolean, default: void 0 }
+  },
+  emits: ["update:collapsed", "collapsestatechange", "beforebodyenter", "afterbodyenter", "beforebodyleave", "afterbodyleave", "header-click", "header-dblclick"],
+  setup(c, { expose: _, emit: C }) {
+    const n = c, a = C, y = D(), r = g(null), v = g(null), { value: o, set: T } = S(
+      () => n.collapsed,
+      !1,
+      (e) => {
+        a("update:collapsed", e), a("collapsestatechange", e);
+      }
+    ), s = I(() => {
+      const e = n.title;
+      if (e !== void 0)
+        return typeof e == "string" ? { text: e, html: !1 } : { text: e.text, html: e.format === "html" };
+    }), k = p(
+      "flex min-h-7 w-full items-center gap-0 border-0 border-b border-dashed border-[var(--ui-fieldset-divider)] pb-1 ps-[var(--ui-fieldset-inset)] outline-none",
+      "text-[length:var(--ui-font-size-section)] font-normal leading-6 text-[var(--ui-primary)]"
+    );
+    L(o, (e) => {
+      n.collapsible && (v.value = e ? "leave" : "enter", a(e ? "beforebodyleave" : "beforebodyenter", r.value));
+    });
+    function m() {
+      n.collapsible && T(!o.value);
+    }
+    function E() {
+      a("header-click"), n.collapseTriggerEvent === "click" && m();
+    }
+    function B() {
+      a("header-dblclick"), n.collapseTriggerEvent === "dblclick" && m();
+    }
+    function H(e) {
+      n.collapsible && (e.key !== "Enter" && e.key !== " " && e.key !== "Spacebar" || (e.preventDefault(), m()));
+    }
+    function $(e) {
+      e.target === r.value && (v.value === "leave" && a("afterbodyleave", r.value), v.value === "enter" && a("afterbodyenter", r.value), v.value = null);
+    }
+    return _({ isCollapsed: o }), (e, O) => (l(), i("fieldset", {
+      class: "m-0 min-w-0 border-0 p-0",
+      "data-ui-fieldset": "",
+      "data-syno-pkg-land-ui": "",
+      "data-collapsed": t(o) ? "true" : "false"
+    }, [
+      d("legend", F, [
+        c.collapsible ? (l(), i("div", {
+          key: 0,
+          role: "button",
+          tabindex: "0",
+          "data-fieldset-header": "",
+          class: u(t(p)(t(k), "cursor-pointer rounded-[var(--ui-radius-control)] hover:text-[var(--ui-primary-hover)] hover:underline focus-visible:shadow-[var(--ui-shadow-focus)]")),
+          "aria-expanded": !t(o),
+          "aria-controls": t(y),
+          onClick: E,
+          onDblclick: B,
+          onKeydown: H
+        }, [
+          f(e.$slots, "collapse-icon", {}, () => [
+            c.collapseIcon !== "none" ? (l(), M(t(N), {
+              key: 0,
+              class: u(t(p)("-ms-1 me-1 size-4 shrink-0 transition-transform duration-[var(--ui-motion-normal)]", t(o) && "rotate-180")),
+              "aria-hidden": "true"
+            }, null, 8, ["class"])) : x("", !0)
+          ]),
+          d("span", P, [
+            f(e.$slots, "title", {}, () => [
+              s.value?.html ? (l(), i("span", {
+                key: 0,
+                innerHTML: s.value.text
+              }, null, 8, U)) : (l(), i(w, { key: 1 }, [
+                b(h(s.value?.text), 1)
+              ], 64))
+            ])
+          ])
+        ], 42, K)) : (l(), i("div", {
+          key: 1,
+          class: u(t(k))
+        }, [
+          d("span", j, [
+            f(e.$slots, "title", {}, () => [
+              s.value?.html ? (l(), i("span", {
+                key: 0,
+                innerHTML: s.value.text
+              }, null, 8, q)) : (l(), i(w, { key: 1 }, [
+                b(h(s.value?.text), 1)
+              ], 64))
+            ])
+          ])
+        ], 2))
+      ]),
+      d("div", {
+        id: t(y),
+        ref_key: "bodyEl",
+        ref: r,
+        inert: t(o) ? !0 : void 0,
+        class: u(
+          t(p)(
+            "grid transition-[grid-template-rows] duration-[var(--ui-motion-slow)] ease-[var(--ui-motion-ease-in-out)]",
+            t(o) ? "grid-rows-[0fr]" : "grid-rows-[1fr]"
+          )
+        ),
+        onTransitionend: $
+      }, [
+        d("div", {
+          class: u(t(p)("overflow-hidden transition-opacity duration-[var(--ui-motion-normal)]", t(o) ? "opacity-0 ease-[var(--ui-motion-ease-in)]" : "opacity-100 ease-[var(--ui-motion-ease-out)]"))
+        }, [
+          d("div", G, [
+            c.description || e.$slots.description ? (l(), i("p", J, [
+              f(e.$slots, "description", {}, () => [
+                b(h(c.description), 1)
+              ])
+            ])) : x("", !0),
+            f(e.$slots, "default")
+          ])
+        ], 2)
+      ], 42, A)
+    ], 8, V));
+  }
+});
+export {
+  Y as default
+};

package/dist/modules/components/containers/fieldset/Fieldset2.vue.js

@@ -0,0 +1,4 @@
+import f from "./Fieldset.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/containers/highlight-box/HighlightBox.vue.js

@@ -0,0 +1,32 @@
+import { defineComponent as n, computed as i, openBlock as t, createElementBlock as a, normalizeClass as d, renderSlot as l } from "vue";
+import { cn as u } from "../../../lib/cn.js";
+const c = ["data-color"], f = {
+  key: 0,
+  class: "px-[var(--ui-inset-x)] py-3"
+}, h = /* @__PURE__ */ n({
+  __name: "HighlightBox",
+  props: {
+    color: { default: "blue" },
+    hideInnerCls: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const s = e, r = i(
+      () => u(
+        "rounded-[var(--ui-radius-container)] text-[length:var(--ui-font-size)] leading-5 text-[var(--ui-text)]",
+        s.color === "blue" ? "bg-[var(--ui-primary-soft)]" : "bg-[var(--ui-surface-subtle)]"
+      )
+    );
+    return (o, p) => (t(), a("div", {
+      class: d(r.value),
+      "data-syno-pkg-land-ui": "",
+      "data-color": e.color
+    }, [
+      e.hideInnerCls ? l(o.$slots, "default", {}, void 0, void 0, 1) : (t(), a("div", f, [
+        l(o.$slots, "default")
+      ]))
+    ], 10, c));
+  }
+});
+export {
+  h as default
+};

package/dist/modules/components/containers/highlight-box/HighlightBox2.vue.js

@@ -0,0 +1,4 @@
+import f from "./HighlightBox.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/containers/list-detail/ListDetail.vue.js

@@ -0,0 +1,175 @@
+import { defineComponent as q, useSlots as J, useId as Q, ref as c, computed as r, onMounted as Z, onBeforeUnmount as ee, openBlock as h, createElementBlock as x, createElementVNode as g, renderSlot as w, unref as F, createCommentVNode as M, createVNode as te, normalizeStyle as le, createSlots as ae, withCtx as I, toDisplayString as R, createBlock as ie, createTextVNode as ne } from "vue";
+import { useUiText as oe } from "../../../i18n/text.js";
+import se from "../../primitives/button/Button.vue.js";
+import re from "../../primitives/motion/PushTransition.vue.js";
+import { appScope as ue } from "../../composite/callout/calloutDismissal.js";
+import { MOBILE_LAYOUT_MAX as de } from "../../../lib/adaptiveLayout.js";
+const ce = ["data-open", "data-dragging", "data-push"], ve = { class: "ui-list-detail-panes" }, me = ["aria-label", "aria-valuenow", "aria-valuemin", "aria-valuemax"], fe = {
+  key: 0,
+  class: "ui-list-detail-header"
+}, pe = { class: "ui-list-detail-title" }, T = 16, he = 16, ge = 64, _ = 400, z = 640, we = "syno-pkg-land-ui:detail-width:", xe = /* @__PURE__ */ q({
+  __name: "ListDetail",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    title: { default: void 0 },
+    closable: { type: Boolean, default: !0 },
+    defaultWidth: { default: 0.4 },
+    minWidth: { default: 280 },
+    listMinWidth: { default: 360 },
+    storageKey: { default: "default" },
+    label: { default: void 0 }
+  },
+  emits: ["close"],
+  setup(n, { expose: K, emit: O }) {
+    const a = n, L = O, U = J(), N = oe(), W = `ui-list-detail-${Q()}`, u = c(null), B = c(null), y = c(!1), s = c(0), b = () => a.open ?? !!U.detail, d = r(() => s.value > 0 && s.value <= de), $ = r(() => `${we}${ue()}:${a.storageKey}`);
+    function V() {
+      try {
+        const e = Number(globalThis.localStorage?.getItem($.value));
+        return Number.isFinite(e) && e > 0 ? e : null;
+      } catch {
+        return null;
+      }
+    }
+    function S(e) {
+      try {
+        e == null ? globalThis.localStorage?.removeItem($.value) : globalThis.localStorage?.setItem($.value, String(Math.round(e)));
+      } catch {
+      }
+    }
+    const i = c(V()), o = r(() => {
+      const e = s.value > 0 ? s.value - T - a.listMinWidth : Number.POSITIVE_INFINITY;
+      return [a.minWidth, Math.max(a.minWidth, e)];
+    }), v = (e) => Math.round(Math.min(o.value[1], Math.max(o.value[0], e))), X = r(() => {
+      const e = a.defaultWidth;
+      return e > 1 ? v(e) : v(Math.min(z, Math.max(_, s.value * e)));
+    }), k = r(() => i.value != null ? v(i.value) : X.value), Y = r(() => {
+      const e = `calc(100% - ${T + a.listMinWidth}px)`, t = i.value != null ? `${i.value}px` : a.defaultWidth > 1 ? `${a.defaultWidth}px` : `clamp(${_}px, ${a.defaultWidth * 100}%, ${z}px)`;
+      return { "--ui-list-detail-width": `max(${a.minWidth}px, min(${t}, ${e}))` };
+    });
+    function m() {
+      s.value = u.value?.getBoundingClientRect().width ?? 0;
+    }
+    function A(e, t) {
+      i.value = v(e), t && S(i.value);
+    }
+    function H(e) {
+      m();
+      const t = e.shiftKey ? ge : he;
+      let l = null;
+      e.key === "ArrowLeft" ? l = k.value + t : e.key === "ArrowRight" ? l = k.value - t : e.key === "Home" ? l = o.value[1] : e.key === "End" && (l = o.value[0]), l != null && (e.preventDefault(), A(l, !0));
+    }
+    let f = null;
+    function G(e) {
+      if (e.button !== 0) return;
+      e.preventDefault(), m();
+      const t = u.value?.getBoundingClientRect();
+      if (!t) return;
+      y.value = !0;
+      const l = document.body.style, P = { userSelect: l.userSelect, cursor: l.cursor };
+      l.userSelect = "none", l.cursor = "col-resize";
+      const C = (j) => A(t.right - j.clientX - T / 2, !1), p = () => {
+        f?.(), S(i.value);
+      };
+      f = () => {
+        window.removeEventListener("pointermove", C), window.removeEventListener("pointerup", p), window.removeEventListener("pointercancel", p), l.userSelect = P.userSelect, l.cursor = P.cursor, y.value = !1, f = null;
+      }, window.addEventListener("pointermove", C), window.addEventListener("pointerup", p), window.addEventListener("pointercancel", p);
+    }
+    function D() {
+      i.value = null, S(null);
+    }
+    let E = null;
+    return Z(() => {
+      m(), typeof ResizeObserver < "u" && u.value && (E = new ResizeObserver(() => m()), E.observe(u.value));
+    }), ee(() => {
+      f?.(), E?.disconnect();
+    }), K({ reset: D }), (e, t) => (h(), x("div", {
+      ref_key: "root",
+      ref: u,
+      class: "ui-list-detail",
+      "data-open": b() ? "" : void 0,
+      "data-dragging": y.value ? "" : void 0,
+      "data-push": d.value ? "" : void 0,
+      "data-ui-list-detail": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      g("div", ve, [
+        g("div", {
+          ref_key: "list",
+          ref: B,
+          class: "ui-list-detail-list",
+          "data-ui-list-detail-list": ""
+        }, [
+          w(e.$slots, "default")
+        ], 512),
+        b() && !d.value ? (h(), x("div", {
+          key: 0,
+          class: "ui-list-detail-separator",
+          role: "separator",
+          tabindex: "0",
+          "aria-orientation": "vertical",
+          "aria-controls": W,
+          "aria-label": n.label ?? F(N)("Resize panes"),
+          "aria-valuenow": k.value,
+          "aria-valuemin": o.value[0],
+          "aria-valuemax": Number.isFinite(o.value[1]) ? o.value[1] : void 0,
+          "data-ui-list-detail-separator": "",
+          onPointerdown: G,
+          onKeydown: H,
+          onDblclick: D
+        }, [...t[2] || (t[2] = [
+          g("span", {
+            class: "ui-list-detail-grip",
+            "aria-hidden": "true"
+          }, null, -1)
+        ])], 40, me)) : M("", !0),
+        te(re, {
+          id: W,
+          as: "section",
+          show: b(),
+          enabled: d.value,
+          under: B.value,
+          title: n.title ?? "",
+          class: "ui-list-detail-pane",
+          style: le(d.value ? void 0 : Y.value),
+          "aria-label": n.title,
+          "data-ui-list-detail-pane": "",
+          onPop: t[1] || (t[1] = (l) => L("close"))
+        }, ae({
+          default: I(() => [
+            !d.value && (n.title != null || e.$slots.header) ? (h(), x("header", fe, [
+              w(e.$slots, "header", {}, () => [
+                g("h2", pe, R(n.title), 1)
+              ]),
+              n.closable ? (h(), ie(se, {
+                key: 0,
+                class: "shrink-0",
+                variant: "ghost",
+                size: "sm",
+                "data-ui-list-detail-close": "",
+                onClick: t[0] || (t[0] = (l) => L("close"))
+              }, {
+                default: I(() => [
+                  ne(R(F(N)("Close")), 1)
+                ]),
+                _: 1
+              })) : M("", !0)
+            ])) : M("", !0),
+            w(e.$slots, "detail")
+          ]),
+          _: 2
+        }, [
+          e.$slots.header ? {
+            name: "title",
+            fn: I(() => [
+              w(e.$slots, "header")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["show", "enabled", "under", "title", "style", "aria-label"])
+      ])
+    ], 8, ce));
+  }
+});
+export {
+  xe as default
+};

package/dist/modules/components/containers/list-detail/ListDetail2.vue.js

@@ -0,0 +1,4 @@
+import f from "./ListDetail.vue.js";
+export {
+  f as default
+};