@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/composite/wizard/wizardContext.js

@@ -0,0 +1,9 @@
+import { inject as n } from "vue";
+const o = /* @__PURE__ */ Symbol("syno-pkg-land-ui-wizard");
+function t() {
+  return n(o, null);
+}
+export {
+  t as useWizardContext,
+  o as wizardKey
+};

package/dist/modules/components/containers/card/Card.vue.js

@@ -0,0 +1,120 @@
+import { defineComponent as N, useSlots as E, useId as h, computed as i, openBlock as o, createBlock as w, withCtx as $, createElementBlock as r, normalizeClass as u, unref as e, renderSlot as d, createTextVNode as A, toDisplayString as D, createCommentVNode as s, createVNode as k, createElementVNode as F } from "vue";
+import { useUiText as H } from "../../../i18n/text.js";
+import L from "../../primitives/motion/MotionCollapse.vue.js";
+import { ChevronDown as O } from "@lucide/vue";
+import U from "../../primitives/surface/Surface.vue.js";
+import J from "../../primitives/skeleton/SectionSkeleton.vue.js";
+import { cn as c } from "../../../lib/cn.js";
+import { useControllableBoolean as R } from "../../../lib/controllable.js";
+const Y = ["id"], q = {
+  key: 1,
+  class: "ml-auto flex shrink-0 items-center gap-[var(--ui-icon-button-gap)]"
+}, G = ["aria-expanded", "aria-controls", "aria-labelledby", "aria-label"], K = ["id", "role", "aria-labelledby"], ae = /* @__PURE__ */ N({
+  __name: "Card",
+  props: {
+    title: {},
+    layoutType: { default: "regular" },
+    hasHeader: { type: Boolean, default: !0 },
+    expandable: { type: Boolean, default: !1 },
+    expanded: { type: Boolean, default: void 0 },
+    toggleLabel: {},
+    footerAlign: { default: "start" },
+    loading: { type: Boolean }
+  },
+  emits: ["update:expanded"],
+  setup(a, { emit: B }) {
+    const C = H(), l = a, T = { start: "justify-start", end: "justify-end", between: "justify-between" }, z = B, m = E(), f = h(), y = h(), { value: p, toggle: g } = R(
+      () => l.expanded,
+      !0,
+      (t) => z("update:expanded", t)
+    ), n = i(() => !!l.title || !!m.title), v = i(() => l.layoutType === "compact"), S = i(() => !l.expandable || p.value), b = i(() => l.hasHeader && (n.value || !!m["header-actions"] || l.expandable)), V = i(
+      () => c(
+        "flex items-center gap-2",
+        v.value ? "min-h-9 px-4 py-2" : "min-h-11 px-[var(--ui-card-padding,20px)] py-2"
+      )
+    ), j = i(
+      () => c(
+        "flex-1 text-[length:var(--ui-font-size)] leading-5 text-[var(--ui-text)]",
+        // --ui-card-padding sets a regular card's inset; the body keeps 4:5 block to inline (16px by 20px unset).
+        // Under a header the body starts right below it: the header already
+        // leaves 12px under its title (8px compact), so the title reads with its content.
+        v.value ? `px-4 ${b.value ? "pt-0 pb-3" : "py-3"}` : `px-[var(--ui-card-padding,20px)] ${b.value ? "pt-0 pb-[calc(var(--ui-card-padding,20px)*0.8)]" : "py-[calc(var(--ui-card-padding,20px)*0.8)]"}`
+      )
+    );
+    return (t, x) => (o(), w(U, {
+      padding: "none",
+      class: "flex flex-col overflow-hidden",
+      "data-layout": a.layoutType,
+      "aria-busy": a.loading || void 0
+    }, {
+      default: $(() => [
+        b.value ? (o(), r("header", {
+          key: 0,
+          class: u(V.value),
+          "data-ui-card-header": ""
+        }, [
+          n.value ? (o(), r("h3", {
+            key: 0,
+            id: e(f),
+            class: "m-0 min-w-0 truncate text-[length:var(--ui-font-size-lg)] [font-weight:var(--ui-heading-weight,var(--ui-font-weight-strong))] text-[var(--ui-text)]"
+          }, [
+            d(t.$slots, "title", {}, () => [
+              A(D(a.title), 1)
+            ])
+          ], 8, Y)) : s("", !0),
+          t.$slots["header-actions"] || a.expandable ? (o(), r("div", q, [
+            d(t.$slots, "header-actions"),
+            a.expandable ? (o(), r("button", {
+              key: 0,
+              type: "button",
+              "data-card-toggle": "",
+              "data-ui-hit": "",
+              class: "relative before:absolute [@media(pointer:fine)]:before:-inset-1 before:content-[''] m-0 border-0 bg-transparent p-0 inline-flex size-6 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)]",
+              "aria-expanded": e(p),
+              "aria-controls": e(y),
+              "aria-labelledby": n.value ? e(f) : void 0,
+              "aria-label": n.value ? void 0 : a.toggleLabel ?? e(C)("Toggle content"),
+              onClick: x[0] || (x[0] = //@ts-ignore
+              (...I) => e(g) && e(g)(...I))
+            }, [
+              k(e(O), {
+                class: u(e(c)("size-4 transition-transform duration-[var(--ui-motion-fast)]", !e(p) && "-rotate-90")),
+                "aria-hidden": "true"
+              }, null, 8, ["class"])
+            ], 8, G)) : s("", !0)
+          ])) : s("", !0)
+        ], 2)) : s("", !0),
+        k(L, {
+          open: S.value,
+          class: "flex-1"
+        }, {
+          default: $(() => [
+            F("div", {
+              id: e(y),
+              class: u(j.value),
+              "data-ui-card-body": "",
+              role: a.expandable ? "region" : void 0,
+              "aria-labelledby": a.expandable && n.value ? e(f) : void 0
+            }, [
+              a.loading ? (o(), w(J, { key: 0 })) : d(t.$slots, "body", {}, () => [
+                d(t.$slots, "default")
+              ], void 0, 1)
+            ], 10, K)
+          ]),
+          _: 3
+        }, 8, ["open"]),
+        t.$slots.footer && !a.loading ? (o(), r("footer", {
+          key: 1,
+          "data-ui-footer-bar": "",
+          class: u(e(c)("flex flex-wrap items-center gap-2 border-t border-[var(--ui-border-subtle)] py-2", v.value ? "px-4" : "px-[var(--ui-card-padding,20px)]", T[a.footerAlign]))
+        }, [
+          d(t.$slots, "footer")
+        ], 2)) : s("", !0)
+      ]),
+      _: 3
+    }, 8, ["data-layout", "aria-busy"]));
+  }
+});
+export {
+  ae as default
+};

package/dist/modules/components/containers/card/Card2.vue.js

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

package/dist/modules/components/containers/card/CardField.vue.js

@@ -0,0 +1,38 @@
+import { defineComponent as p, computed as h, openBlock as i, createElementBlock as n, createElementVNode as t, normalizeStyle as o, unref as s, renderSlot as r, toDisplayString as u } from "vue";
+import { CARD_VALUE_HEIGHT as d, CARD_METRICS as c } from "../../../virtual/cardHeight.js";
+const x = {
+  class: "min-w-0",
+  "data-card-field": "",
+  "data-syno-pkg-land-ui": ""
+}, f = { class: "min-w-0 truncate" }, v = {
+  key: 0,
+  class: "text-[var(--ui-text-muted)]"
+}, k = /* @__PURE__ */ p({
+  __name: "CardField",
+  props: {
+    label: {},
+    height: { default: d.line },
+    empty: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const m = e, a = h(() => Math.max(1, Math.floor(m.height / d.line)));
+    return (l, g) => (i(), n("div", x, [
+      t("div", {
+        class: "flex min-w-0 items-center gap-1 text-xs text-[var(--ui-text-secondary)]",
+        style: o({ height: `${s(c).label}px`, marginBottom: `${s(c).labelGap}px` })
+      }, [
+        r(l.$slots, "icon"),
+        t("span", f, u(e.label), 1)
+      ], 4),
+      t("div", {
+        class: "min-w-0 overflow-hidden text-[length:var(--ui-font-size-control)] leading-5 text-[var(--ui-text)]",
+        style: o({ height: `${e.height}px`, ...a.value > 1 ? { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: a.value } : {} })
+      }, [
+        e.empty ? (i(), n("span", v, "-")) : r(l.$slots, "default", {}, void 0, void 0, 1)
+      ], 4)
+    ]));
+  }
+});
+export {
+  k as default
+};

package/dist/modules/components/containers/card/CardField2.vue.js

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

package/dist/modules/components/containers/card-grid/CardCover.vue.js

@@ -0,0 +1,48 @@
+import { defineComponent as l, ref as n, watch as c, openBlock as o, createElementBlock as i, createCommentVNode as r, createVNode as u, unref as f } from "vue";
+import { ImageOff as v } from "@lucide/vue";
+const m = {
+  class: "absolute inset-0 bg-[var(--ui-surface-inset)]",
+  "data-card-cover-image": "",
+  "data-syno-pkg-land-ui": ""
+}, g = ["src", "alt", "width", "height", "data-state"], h = {
+  key: 1,
+  class: "flex size-full items-center justify-center text-[var(--ui-text-disabled)]"
+}, w = /* @__PURE__ */ l({
+  __name: "CardCover",
+  props: {
+    src: { default: void 0 },
+    alt: { default: "" },
+    width: { default: void 0 },
+    height: { default: void 0 }
+  },
+  setup(e) {
+    const d = e, t = n("loading");
+    return c(() => d.src, () => {
+      t.value = "loading";
+    }), (y, a) => (o(), i("div", m, [
+      e.src && t.value !== "error" ? (o(), i("img", {
+        key: 0,
+        src: e.src,
+        alt: e.alt,
+        width: e.width,
+        height: e.height,
+        decoding: "async",
+        loading: "lazy",
+        draggable: "false",
+        "data-state": t.value,
+        class: "block size-full object-cover opacity-0 transition-opacity duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease-out)] data-[state=loaded]:opacity-100",
+        onLoad: a[0] || (a[0] = (s) => t.value = "loaded"),
+        onError: a[1] || (a[1] = (s) => t.value = "error")
+      }, null, 40, g)) : r("", !0),
+      t.value === "error" ? (o(), i("div", h, [
+        u(f(v), {
+          class: "size-8",
+          "aria-hidden": "true"
+        })
+      ])) : r("", !0)
+    ]));
+  }
+});
+export {
+  w as default
+};

package/dist/modules/components/containers/card-grid/CardCover2.vue.js

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

package/dist/modules/components/containers/card-grid/CardGrid.vue.js

@@ -0,0 +1,54 @@
+import { defineComponent as g, useTemplateRef as C, ref as s, computed as d, onMounted as _, onUpdated as x, openBlock as y, createElementBlock as k, normalizeStyle as I, normalizeClass as E, renderSlot as S } from "vue";
+import { useElementWidth as $ } from "../../../composables/elementWidth.js";
+import { CARD_GRID_SKIP_FROM as R, cardGridColumns as W } from "./cardGrid.js";
+const w = ["data-ui-card-grid-skip"], b = /* @__PURE__ */ g({
+  __name: "CardGrid",
+  props: {
+    minItemWidth: { default: "280px" },
+    gap: { default: "var(--ui-space-4)" },
+    fit: { default: "stretch" }
+  },
+  setup(p) {
+    const i = p, r = C("root"), f = $(r), o = s(0), l = s(0), a = s(0), u = d(() => o.value >= R), m = () => {
+      const t = r.value;
+      if (!t) return;
+      o.value !== t.childElementCount && (o.value = t.childElementCount);
+      const e = t.firstElementChild;
+      e && u.value && !a.value && (a.value = Math.round(e.getBoundingClientRect().height));
+      const n = parseFloat(getComputedStyle(t).columnGap);
+      !Number.isNaN(n) && l.value !== n && (l.value = n);
+    };
+    _(m), x(m);
+    function v(t) {
+      const e = /^\s*([\d.]+)(px|rem)\s*$/.exec(t);
+      if (!e) return;
+      const n = e[2] === "rem" ? parseFloat(getComputedStyle(document.documentElement).fontSize) || 16 : 1;
+      return Number(e[1]) * n;
+    }
+    const c = d(() => {
+      if (i.fit !== "stretch") return;
+      const t = v(i.minItemWidth);
+      return t === void 0 ? void 0 : W({ width: f.value, count: o.value, minItemWidth: t, gap: l.value });
+    }), h = d(() => ({
+      // A skipped card holds the first card's height until it has been drawn once.
+      ...a.value ? { "--ui-card-grid-item-height": `${a.value}px` } : {},
+      display: "grid",
+      gridTemplateColumns: c.value ? `repeat(${c.value}, minmax(0, 1fr))` : `repeat(${i.fit === "fill" ? "auto-fill" : "auto-fit"}, minmax(min(100%, ${i.minItemWidth}), 1fr))`,
+      alignItems: "stretch",
+      gap: i.gap
+    }));
+    return (t, e) => (y(), k("div", {
+      ref_key: "root",
+      ref: r,
+      class: E(["min-w-0 [&>*]:h-full [&>*]:min-w-0", u.value && "[&>*]:[content-visibility:auto] [&>*]:[contain-intrinsic-size:auto_var(--ui-card-grid-item-height)]"]),
+      style: I(h.value),
+      "data-ui-card-grid-skip": u.value ? "" : void 0,
+      "data-syno-pkg-land-ui": ""
+    }, [
+      S(t.$slots, "default")
+    ], 14, w));
+  }
+});
+export {
+  b as default
+};

package/dist/modules/components/containers/card-grid/CardGrid2.vue.js

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

package/dist/modules/components/containers/card-grid/VirtualCardGrid.vue.js

@@ -0,0 +1,269 @@
+import { defineComponent as me, useTemplateRef as fe, ref as k, watch as h, computed as d, nextTick as P, openBlock as m, createBlock as he, withCtx as ge, createElementVNode as A, normalizeStyle as K, unref as B, normalizeClass as pe, createElementBlock as g, Fragment as J, renderList as ye, isMemoSame as be, renderSlot as C, createCommentVNode as N, createVNode as we } from "vue";
+import { useVirtualizer as ke } from "../../../vendor/@tanstack/vue-virtual/dist/esm/index.js";
+import { Image as Ke } from "@lucide/vue";
+import Se from "../../primitives/context-menu/ContextMenu.vue.js";
+import { useElementWidth as $e } from "../../../composables/elementWidth.js";
+import { usePageWindow as xe } from "../../../composables/pageWindow.js";
+import { galleryColumns as Q, rowItems as U, cardKeyTarget as Ie } from "../../../virtual/galleryColumns.js";
+import { useLayoutMotion as Ce } from "../../../virtual/layoutMotion.js";
+const Me = ["aria-label", "data-columns", "data-ui-natural-height"], Te = {
+  "data-card-body": "",
+  class: "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden px-3 py-2"
+}, ze = {
+  key: 1,
+  "data-card-actions": "",
+  class: "absolute end-2 top-2 flex items-center gap-1 opacity-0 transition-opacity duration-[var(--ui-motion-fast)] group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:none)]:opacity-100"
+}, p = 16, S = 16, X = 250, Ee = 'button, a[href], input, select, textarea, [role="button"], [role="menuitem"]', Le = /* @__PURE__ */ me({
+  __name: "VirtualCardGrid",
+  props: {
+    count: {},
+    getItem: {},
+    itemKey: {},
+    cardHeight: {},
+    cover: { default: 0 },
+    label: { default: void 0 },
+    activeKey: { default: void 0 },
+    selectedKeys: { default: void 0 },
+    memoKey: { default: void 0 },
+    menuItems: { type: Function, default: void 0 },
+    overscan: { default: 2 }
+  },
+  emits: ["range", "open", "pick", "menu-select"],
+  setup(u, { expose: Z, emit: _ }) {
+    const o = u, f = _, c = fe("scroller"), ee = $e(c), te = Ce(), r = k(0);
+    h([() => Q(ee.value), te.active], ([e, t], a) => {
+      const i = a?.[1] === !0 && !t && c.value && Q(c.value.getBoundingClientRect().width) || e;
+      i > 0 && (r.value === 0 || !t) && (r.value = i);
+    }, { immediate: !0 });
+    const s = xe(c), M = k(0);
+    h([s.active, s.top, s.height, () => o.count], () => {
+      M.value = s.active.value ? Math.round(s.margin()) : 0;
+    }, { flush: "post" });
+    const ae = d(() => r.value ? Math.ceil(Math.max(0, o.count) / r.value) : 0), y = ke(d(() => ({
+      count: ae.value,
+      getScrollElement: () => s.scroller.value ?? c.value ?? null,
+      scrollMargin: M.value,
+      estimateSize: () => o.cardHeight,
+      gap: S,
+      paddingStart: p,
+      paddingEnd: p,
+      overscan: o.overscan
+    })));
+    h(() => o.cardHeight, () => y.value.measure());
+    const T = d(() => y.value.getVirtualItems()), oe = d(() => y.value.getTotalSize()), le = d(() => {
+      const e = [];
+      for (const t of T.value) {
+        const [a, l] = U(t.index, t.index, r.value, o.count);
+        for (let i = a; i < l; i += 1) e.push({ index: i, start: t.start, column: i - a });
+      }
+      return e;
+    });
+    function ne(e, t) {
+      const a = r.value;
+      return {
+        width: `calc((100% - ${(a - 1) * S}px) / ${a})`,
+        height: `${o.cardHeight}px`,
+        left: `calc((100% + ${S}px) * ${t} / ${a})`,
+        transform: `translateY(${e - M.value}px)`
+      };
+    }
+    const z = d(() => {
+      const e = T.value;
+      return e.length ? U(e[0].index, e[e.length - 1].index, r.value, o.count) : [0, 0];
+    });
+    h(() => z.value.join(":"), () => {
+      const [e, t] = z.value;
+      t > e && f("range", e, t);
+    }, { immediate: !0 }), h(r, (e, t) => {
+      const a = c.value;
+      if (!a || s.active.value || !t || !e || a.scrollTop <= p) return;
+      const l = o.cardHeight + S, i = Math.floor((a.scrollTop - p) / l) * t, W = p + Math.floor(i / e) * l;
+      P(() => y.value.scrollToOffset(W));
+    });
+    const n = (e) => o.getItem(e);
+    function O(e) {
+      const t = n(e);
+      return t !== void 0 && o.activeKey !== void 0 && o.itemKey(t, e) === o.activeKey;
+    }
+    function V(e) {
+      const t = n(e);
+      return t !== void 0 && !!o.selectedKeys?.has(o.itemKey(t, e));
+    }
+    function R(e) {
+      const t = n(e);
+      return t === void 0 ? `slot:${e}` : o.itemKey(t, e);
+    }
+    const v = k(0), F = d(() => {
+      const [e, t] = z.value;
+      return v.value >= e && v.value < t ? v.value : e;
+    });
+    let $ = null;
+    function ie(e) {
+      return c.value?.querySelector(`[data-card-index="${e}"]`) ?? null;
+    }
+    function L() {
+      if ($ === null) return;
+      const e = ie($);
+      e && ($ = null, e.focus({ preventScroll: !0 }));
+    }
+    h(T, () => {
+      P(L);
+    }, { flush: "post" });
+    function D(e) {
+      !r.value || e < 0 || e >= o.count || y.value.scrollToIndex(Math.floor(e / r.value), { align: "auto" });
+    }
+    function G(e) {
+      e < 0 || e >= o.count || (v.value = e, $ = e, D(e), P(L));
+    }
+    function b(e) {
+      const t = e.target?.closest?.("[data-card-index]");
+      return !t || !c.value?.contains(t) ? null : Number(t.getAttribute("data-card-index"));
+    }
+    function j(e) {
+      const a = e.target?.closest?.(Ee);
+      return !!(a && a.closest("[data-card-index]") && !a.hasAttribute("data-card-index"));
+    }
+    function re(e) {
+      const t = I;
+      if (I = null, t && E.value.length > 0 && e.timeStamp - t >= X) return;
+      const a = b(e);
+      if (a === null || j(e)) return;
+      const l = n(a);
+      l !== void 0 && (v.value = a, e.metaKey || e.ctrlKey ? f("pick", l, a, "toggle") : e.shiftKey ? f("pick", l, a, "range") : f("open", l, a));
+    }
+    function ue(e) {
+      const t = b(e);
+      t !== null && (v.value = t);
+    }
+    function se(e) {
+      const t = b(e);
+      if (t === null || j(e) || e.altKey) return;
+      if (e.key === "Enter") {
+        const i = n(t);
+        i !== void 0 && (e.preventDefault(), f("open", i, t));
+        return;
+      }
+      const a = Math.floor((s.active.value ? s.height.value : c.value?.clientHeight ?? 0) / (o.cardHeight + S)), l = Ie(e.key, t, r.value, o.count, a, e.ctrlKey || e.metaKey);
+      l !== null && (e.preventDefault(), G(l));
+    }
+    const x = k(null), E = d(() => {
+      const e = x.value, t = e === null ? void 0 : n(e);
+      return e === null || t === void 0 || !o.menuItems ? [] : o.menuItems(t, e);
+    });
+    let I = null;
+    const H = k(!1);
+    function ce(e) {
+      if (e.pointerType === "mouse") {
+        I = null, H.value = !1;
+        return;
+      }
+      I = e.timeStamp, x.value = b(e), H.value = E.value.length === 0;
+    }
+    function de(e) {
+      const t = b(e), a = t === null ? void 0 : n(t);
+      if (t === null || a === void 0 || !o.menuItems || o.menuItems(a, t).length === 0) {
+        e.stopPropagation();
+        return;
+      }
+      x.value = t, v.value = t;
+    }
+    function ve(e) {
+      const t = x.value, a = t === null ? void 0 : n(t);
+      t !== null && a !== void 0 && f("menu-select", e, a, t);
+    }
+    return Z({ scrollToIndex: D, focusCard: G, columns: r }), (e, t) => (m(), he(Se, {
+      items: E.value,
+      disabled: !u.menuItems || H.value,
+      "press-open-delay": X,
+      onSelect: ve
+    }, {
+      default: ge(() => [
+        A("div", {
+          ref_key: "scroller",
+          ref: c,
+          role: "list",
+          "aria-label": u.label,
+          "data-columns": r.value || void 0,
+          class: pe(B(s).natural.value ? "relative outline-none" : "relative h-full min-h-0 overflow-y-auto overflow-x-hidden outline-none [scrollbar-gutter:stable]"),
+          "data-ui-natural-height": B(s).natural.value ? "" : void 0,
+          style: K({ paddingInline: `${p}px` }),
+          "data-syno-pkg-land-ui": "",
+          "data-virtual-card-grid": "",
+          onClick: re,
+          onKeydown: se,
+          onFocusin: ue,
+          onContextmenuCapture: de,
+          onPointerdownCapture: ce
+        }, [
+          A("div", {
+            role: "none",
+            class: "relative w-full",
+            style: K({ height: `${oe.value}px` })
+          }, [
+            (m(!0), g(J, null, ye(le.value, ({ index: a, start: l, column: i }, W, He, w) => {
+              const q = [n(a), a, l, i, r.value, u.count, a === F.value, u.cardHeight, u.cover, u.memoKey, O(a), V(a)];
+              if (w && w.el && w.key === R(a) && be(w, q)) return w;
+              const Y = (m(), g("div", {
+                key: R(a),
+                role: "listitem",
+                tabindex: a === F.value ? 0 : -1,
+                "data-card-index": a,
+                "data-loaded": n(a) !== void 0 || void 0,
+                "data-active": O(a) || void 0,
+                "data-selected": V(a) || void 0,
+                "aria-posinset": a + 1,
+                "aria-setsize": u.count,
+                "aria-busy": n(a) === void 0 || void 0,
+                class: "group absolute top-0 flex min-w-0 cursor-default flex-col [@media(pointer:coarse)]:select-none overflow-hidden rounded-[var(--ui-radius-panel)] border border-[var(--ui-border-subtle)] bg-[var(--ui-surface)] outline-none transition-shadow duration-[var(--ui-motion-normal)] ease-[var(--ui-motion-ease-out)] data-[loaded]:hover:shadow-[var(--ui-shadow-card)] focus-visible:shadow-[var(--ui-shadow-focus)] data-[active]:outline data-[active]:outline-2 data-[active]:-outline-offset-1 data-[active]:outline-[var(--ui-primary)] data-[selected]:bg-[var(--ui-primary-soft)] data-[selected]:outline data-[selected]:outline-2 data-[selected]:-outline-offset-1 data-[selected]:outline-[var(--ui-primary)]",
+                style: K(ne(l, i))
+              }, [
+                n(a) !== void 0 ? (m(), g(J, { key: 0 }, [
+                  u.cover > 0 ? (m(), g("div", {
+                    key: 0,
+                    "data-card-cover": "",
+                    class: "relative shrink-0 overflow-hidden bg-[var(--ui-surface-inset)]",
+                    style: K({ height: `${u.cover}px` })
+                  }, [
+                    C(e.$slots, "cover", {
+                      item: n(a),
+                      index: a
+                    })
+                  ], 4)) : N("", !0),
+                  A("div", Te, [
+                    C(e.$slots, "default", {
+                      item: n(a),
+                      index: a
+                    })
+                  ]),
+                  e.$slots.actions ? (m(), g("div", ze, [
+                    C(e.$slots, "actions", {
+                      item: n(a),
+                      index: a
+                    })
+                  ])) : N("", !0)
+                ], 64)) : C(e.$slots, "placeholder", { index: a }, () => [
+                  u.cover > 0 ? (m(), g("div", {
+                    key: 0,
+                    "data-card-cover": "",
+                    class: "flex shrink-0 items-center justify-center bg-[var(--ui-surface-inset)] text-[var(--ui-text-disabled)]",
+                    style: K({ height: `${u.cover}px` })
+                  }, [
+                    we(B(Ke), {
+                      class: "size-8",
+                      "aria-hidden": "true"
+                    })
+                  ], 4)) : N("", !0)
+                ], void 0, 1)
+              ], 12, ["tabindex", "data-card-index", "data-loaded", "data-active", "data-selected", "aria-posinset", "aria-setsize", "aria-busy"]));
+              return Y.memo = q, Y;
+            }, t, 0), 128))
+          ], 4)
+        ], 46, Me)
+      ]),
+      _: 3
+    }, 8, ["items", "disabled"]));
+  }
+});
+export {
+  Le as default
+};

package/dist/modules/components/containers/card-grid/VirtualCardGrid2.vue.js

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

package/dist/modules/components/containers/card-grid/cardGrid.js

@@ -0,0 +1,10 @@
+function E({ width: n, count: o, minItemWidth: s, gap: r }) {
+  if (n <= 0 || o <= 0 || s <= 0) return;
+  const t = (e) => Math.max(1, Math.floor((n + r) / (e + r))), c = t(s), l = t(s * 0.9), a = Math.min(o, l > c ? c + 1 : c);
+  return Math.ceil(o / Math.ceil(o / a));
+}
+const M = 24;
+export {
+  M as CARD_GRID_SKIP_FROM,
+  E as cardGridColumns
+};