@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/components/app/app-tab-bar/AppTabBar.vue.js

@@ -0,0 +1,208 @@
+import { defineComponent as J, inject as j, watch as L, computed as o, onBeforeUnmount as D, ref as Z, openBlock as r, createElementBlock as d, normalizeClass as h, unref as i, Fragment as ee, renderList as ae, withModifiers as R, createElementVNode as s, createBlock as G, resolveDynamicComponent as te, createCommentVNode as y, toDisplayString as k, withCtx as ne, createVNode as I } from "vue";
+import { Ellipsis as K } from "@lucide/vue";
+import { useUiText as oe } from "../../../i18n/text.js";
+import re from "../../primitives/dropdown-menu/DropdownMenu.vue.js";
+import { useSoftKeyboard as ie } from "../../../composables/softKeyboard.js";
+import { APP_NAVIGATION_DRAWER_KEY as le, APP_PAGE_CHANGE_KEY as se } from "../../../lib/adaptiveLayout.js";
+const ue = ["aria-label", "data-hidden"], de = ["disabled", "aria-current", "data-ui-tab-bar-item", "data-icon-only", "data-peek", "onClick", "onPointerdown"], ce = {
+  "data-ui-tab-bar-icon": "",
+  class: "relative inline-flex size-6 items-center justify-center",
+  "aria-hidden": "true"
+}, be = {
+  key: 1,
+  "data-ui-tab-bar-badge": "",
+  class: "absolute -top-1 left-[calc(50%+4px)] inline-flex h-4 min-w-4 items-center justify-center rounded-full border-2 border-[var(--ui-tab-bar-bg,var(--ui-surface))] bg-[var(--ui-danger)] px-1 text-[length:var(--ui-font-size-xs,11px)] font-semibold leading-none tabular-nums text-[var(--ui-danger-foreground)]"
+}, pe = {
+  key: 2,
+  "data-ui-tab-bar-badge": "",
+  class: "absolute -top-0.5 left-[calc(50%+6px)] size-2.5 rounded-full border-2 border-[var(--ui-tab-bar-bg,var(--ui-surface))] bg-[var(--ui-danger)]"
+}, ve = ["data-label"], fe = {
+  key: 1,
+  "data-ui-tab-bar-badge-label": "",
+  class: "sr-only"
+}, me = ["aria-current"], he = {
+  "data-ui-tab-bar-icon": "",
+  class: "inline-flex size-6 items-center justify-center",
+  "aria-hidden": "true"
+}, ye = {
+  "data-ui-tab-bar-label": "",
+  class: "sr-only"
+}, ke = ["data-label"], ge = ["data-peek", "aria-haspopup", "aria-expanded", "aria-controls"], xe = {
+  "data-ui-tab-bar-icon": "",
+  class: "inline-flex size-6 items-center justify-center",
+  "aria-hidden": "true"
+}, _e = {
+  "data-ui-tab-bar-label": "",
+  class: "sr-only"
+}, we = ["data-label"], w = 5, C = "\0drawer", Ce = 450, V = "relative flex min-h-[var(--ui-tab-bar-height,48px)] min-w-[var(--ui-hit-min,44px)] flex-1 items-center justify-center border-0 bg-transparent px-1 text-[length:var(--ui-font-size-sm)] leading-4 outline-none transition-colors duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] [-webkit-tap-highlight-color:transparent] focus-visible:shadow-[var(--ui-shadow-focus-inset)] disabled:opacity-40", ze = /* @__PURE__ */ J({
+  __name: "AppTabBar",
+  props: {
+    items: {},
+    modelValue: { default: void 0 },
+    more: { type: Boolean, default: void 0 },
+    hidden: { type: Boolean, default: !1 },
+    ariaLabel: { default: void 0 }
+  },
+  emits: ["update:modelValue", "more"],
+  setup(f, { emit: U }) {
+    const n = f, g = U, u = oe(), l = j(le, null), O = j(se, null);
+    L(() => n.modelValue, (e, t) => {
+      e && t && e !== t && O?.();
+    });
+    const Y = ie(), A = o(() => n.hidden || Y.value), P = o(() => n.more ?? !!l?.available.value), M = o(() => n.items.length > (P.value ? w - 1 : w)), H = o(() => M.value ? n.items.slice(0, w - 1) : n.items), x = o(() => M.value ? n.items.slice(w - 1) : []), W = o(() => P.value || x.value.length > 0), c = o(() => P.value && !!l?.available.value), $ = o(() => !!l?.available.value && (c.value || n.more === !1 && !n.hidden)), T = o(() => x.value.some((e) => e.key === n.modelValue)), F = o(() => [
+      ...x.value.map((e) => ({ key: e.key, label: e.label, icon: e.icon, disabled: e.disabled })),
+      ...c.value ? [{ type: "separator", key: "\0separator" }, { key: C, label: u("Application navigation") }] : []
+    ]);
+    let b;
+    L($, (e) => {
+      e && !b ? b = l.claim() : !e && b && (b = void b());
+    }, { immediate: !0 }), D(() => b?.());
+    function z(e) {
+      return typeof e != "number" || e <= 0 ? "" : e > 99 ? "99+" : String(e);
+    }
+    function S(e) {
+      return e === !0 ? u("Unread") : typeof e == "number" && e > 0 ? u("{count} unread", { count: e }) : "";
+    }
+    const m = Z(null);
+    let _, E, p = !1;
+    function B(e, t) {
+      t.pointerType !== "mouse" && (clearTimeout(_), clearTimeout(E), p = !1, _ = setTimeout(() => {
+        m.value = e, p = !0;
+      }, Ce));
+    }
+    function v() {
+      clearTimeout(_), m.value && (E = setTimeout(() => {
+        m.value = null;
+      }, 900));
+    }
+    D(() => {
+      clearTimeout(_), clearTimeout(E);
+    });
+    function Q(e) {
+      if (p) {
+        p = !1;
+        return;
+      }
+      e.disabled || g("update:modelValue", e.key);
+    }
+    function X() {
+      if (p) {
+        p = !1;
+        return;
+      }
+      g("more"), c.value && l.show();
+    }
+    function q(e) {
+      e === C ? l?.show() : g("update:modelValue", e);
+    }
+    return (e, t) => (r(), d("nav", {
+      "aria-label": f.ariaLabel ?? i(u)("Quick navigation"),
+      class: h([A.value ? "hidden" : "flex", "w-full shrink-0 items-stretch border-t border-[var(--ui-tab-bar-border,var(--ui-border-subtle))] bg-[var(--ui-tab-bar-bg,var(--ui-surface))] pb-[var(--ui-safe-bottom,env(safe-area-inset-bottom,0px))]"]),
+      "data-hidden": A.value ? "" : void 0,
+      "data-ui-tab-bar": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      (r(!0), d(ee, null, ae(H.value, (a) => (r(), d("button", {
+        key: a.key,
+        type: "button",
+        disabled: a.disabled,
+        "aria-current": f.modelValue === a.key ? "page" : void 0,
+        class: h([V, f.modelValue === a.key ? "text-[var(--ui-primary)]" : "text-[var(--ui-text-secondary)]"]),
+        "data-ui-tab-bar-item": a.key,
+        "data-icon-only": a.icon ? "" : void 0,
+        "data-peek": m.value === a.key ? "" : void 0,
+        onClick: (N) => Q(a),
+        onPointerdown: (N) => B(a.key, N),
+        onPointerup: v,
+        onPointercancel: v,
+        onPointerleave: v,
+        onContextmenu: t[0] || (t[0] = R(() => {
+        }, ["prevent"]))
+      }, [
+        s("span", ce, [
+          a.icon ? (r(), G(te(a.icon), {
+            key: 0,
+            size: 24,
+            "stroke-width": f.modelValue === a.key ? 2.5 : 1.75
+          }, null, 8, ["stroke-width"])) : y("", !0),
+          z(a.badge) ? (r(), d("span", be, k(z(a.badge)), 1)) : a.badge === !0 ? (r(), d("span", pe)) : y("", !0)
+        ]),
+        s("span", {
+          "data-ui-tab-bar-label": "",
+          class: h(a.icon ? "sr-only" : "max-w-full truncate font-semibold")
+        }, k(a.label), 3),
+        a.icon ? (r(), d("span", {
+          key: 0,
+          "data-ui-tab-bar-tip": "",
+          "data-label": a.label,
+          "aria-hidden": "true"
+        }, null, 8, ve)) : y("", !0),
+        S(a.badge) ? (r(), d("span", fe, k(S(a.badge)), 1)) : y("", !0)
+      ], 42, de))), 128)),
+      x.value.length ? (r(), G(re, {
+        key: 0,
+        items: F.value,
+        align: "end",
+        onSelect: q,
+        "onUpdate:open": t[1] || (t[1] = (a) => a && g("more"))
+      }, {
+        trigger: ne(() => [
+          s("button", {
+            type: "button",
+            class: h([V, T.value ? "text-[var(--ui-primary)]" : "text-[var(--ui-text-secondary)]"]),
+            "data-ui-tab-bar-more": "",
+            "data-icon-only": "",
+            "aria-current": T.value ? "page" : void 0
+          }, [
+            s("span", he, [
+              I(i(K), {
+                size: 24,
+                "stroke-width": T.value ? 2.5 : 1.75
+              }, null, 8, ["stroke-width"])
+            ]),
+            s("span", ye, k(i(u)("More")), 1),
+            s("span", {
+              "data-ui-tab-bar-tip": "",
+              "data-label": i(u)("More"),
+              "aria-hidden": "true"
+            }, null, 8, ke)
+          ], 10, me)
+        ]),
+        _: 1
+      }, 8, ["items"])) : W.value ? (r(), d("button", {
+        key: 1,
+        type: "button",
+        class: h([V, "text-[var(--ui-text-secondary)]"]),
+        "data-ui-tab-bar-more": "",
+        "data-icon-only": "",
+        "data-peek": m.value === C ? "" : void 0,
+        "aria-haspopup": c.value ? "dialog" : void 0,
+        "aria-expanded": c.value ? i(l).open.value : void 0,
+        "aria-controls": c.value && i(l).open.value ? i(l).id : void 0,
+        onClick: X,
+        onPointerdown: t[2] || (t[2] = (a) => B(C, a)),
+        onPointerup: v,
+        onPointercancel: v,
+        onPointerleave: v,
+        onContextmenu: t[3] || (t[3] = R(() => {
+        }, ["prevent"]))
+      }, [
+        s("span", xe, [
+          I(i(K), {
+            size: 24,
+            "stroke-width": 1.75
+          })
+        ]),
+        s("span", _e, k(i(u)("More")), 1),
+        s("span", {
+          "data-ui-tab-bar-tip": "",
+          "data-label": i(u)("More"),
+          "aria-hidden": "true"
+        }, null, 8, we)
+      ], 42, ge)) : y("", !0)
+    ], 10, ue));
+  }
+});
+export {
+  ze as default
+};

package/dist/modules/components/app/app-tab-bar/AppTabBar2.vue.js

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

package/dist/modules/components/app/app-toolbar/AppToolbar.vue.js

@@ -0,0 +1,62 @@
+import { defineComponent as A, useSlots as P, useTemplateRef as T, inject as $, ref as v, onMounted as x, computed as h, withDirectives as g, openBlock as t, createElementBlock as r, normalizeStyle as B, unref as o, renderSlot as l, createBlock as E, createCommentVNode as n, createElementVNode as N, createVNode as S, withCtx as C, vShow as b } from "vue";
+import R from "../../composite/callout/CalloutRecall.vue.js";
+import { useCalloutRecallHost as V } from "../../composite/callout/calloutDismissal.js";
+import { usePageActionsInBar as j } from "../app-layout/pageTitle.js";
+import H from "../app-layout/MovableActions.js";
+import { APP_PRESENTATION_KEY as I } from "../../../lib/adaptiveLayout.js";
+const M = ["data-ui-actions-in-bar"], z = {
+  key: 0,
+  class: "flex shrink-0 items-center gap-[var(--ui-chrome-gap)]"
+}, D = { class: "min-w-0 flex-1" }, K = {
+  key: 1,
+  "data-ui-app-toolbar-actions": "",
+  class: "ml-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-2"
+}, L = /* @__PURE__ */ A({
+  __name: "AppToolbar",
+  props: {
+    height: { default: "var(--ui-toolbar-height)" },
+    phoneActions: { default: void 0 }
+  },
+  setup(u) {
+    const _ = u, a = P(), s = V(), c = T("root"), y = $(I, void 0), d = v(!1);
+    x(() => {
+      d.value = !!c.value?.closest("[data-ui-layout-bar]");
+    });
+    const m = v(!1), { target: p } = j(() => d.value && y?.value === "mobile" && !!a.actions && !m.value, () => _.phoneActions), i = h(() => !!p.value), k = h(() => i.value && !a.default && !a.leading && !s.value);
+    return (e, f) => g((t(), r("header", {
+      ref_key: "root",
+      ref: c,
+      "data-ui-app-toolbar": "",
+      class: "flex items-center gap-2 border-b border-[var(--ui-border)] bg-[var(--ui-surface)] px-3",
+      style: B({ minHeight: u.height }),
+      "data-ui-actions-in-bar": i.value ? "" : void 0,
+      "data-syno-pkg-land-ui": ""
+    }, [
+      e.$slots.leading || o(s) ? (t(), r("div", z, [
+        l(e.$slots, "leading"),
+        o(s) ? (t(), E(R, { key: 0 })) : n("", !0)
+      ])) : n("", !0),
+      N("div", D, [
+        l(e.$slots, "default")
+      ]),
+      e.$slots.actions ? g((t(), r("div", K, [
+        S(o(H), {
+          to: o(p),
+          onPassive: f[0] || (f[0] = (w) => m.value = w)
+        }, {
+          default: C(() => [
+            l(e.$slots, "actions")
+          ]),
+          _: 3
+        }, 8, ["to"])
+      ], 512)), [
+        [b, !i.value]
+      ]) : n("", !0)
+    ], 12, M)), [
+      [b, !k.value]
+    ]);
+  }
+});
+export {
+  L as default
+};

package/dist/modules/components/app/app-toolbar/AppToolbar2.vue.js

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

package/dist/modules/components/app/aside-panel/AsidePanel.vue.js

@@ -0,0 +1,372 @@
+import { defineComponent as ze, inject as Se, ref as I, computed as u, onMounted as Be, shallowRef as y, watch as F, onBeforeUnmount as Ce, useId as $e, nextTick as Ee, useSlots as Te, openBlock as a, createElementBlock as p, normalizeStyle as ae, normalizeClass as n, createElementVNode as c, unref as b, createBlock as w, resolveDynamicComponent as O, createCommentVNode as v, renderSlot as z, normalizeProps as S, guardReactiveProps as B, toDisplayString as te, createVNode as Fe, withCtx as le, Teleport as Le } from "vue";
+import { PanelRightOpen as ie, Minimize2 as oe, Maximize2 as ne, PanelRightClose as Pe } from "@lucide/vue";
+import { useUiText as Ae } from "../../../i18n/text.js";
+import { APP_ASIDE_KEY as De } from "../../../lib/adaptiveLayout.js";
+import { motionMs as je } from "../../../lib/motion.js";
+import { useOutsideLayer as _e } from "../../../interaction/vue.js";
+import { imeOwnsEscape as Ie } from "../../primitives/popover/overlay.js";
+import Oe from "../../primitives/sheet/BottomSheet.vue.js";
+const Me = ["data-ui-aside-mode", "data-ui-aside-floating"], Re = ["inert", "aria-hidden"], qe = ["aria-label", "title", "aria-expanded", "aria-controls"], Ne = {
+  key: 0,
+  "data-ui-aside-unread": "",
+  "aria-hidden": "true",
+  class: "absolute end-1 top-1 size-1.5 rounded-full bg-[var(--ui-primary)]"
+}, Ue = ["aria-label", "aria-expanded", "inert"], Ve = {
+  key: 0,
+  "data-ui-aside-unread": "",
+  "aria-hidden": "true",
+  class: "absolute end-2 top-2 size-1.5 rounded-full bg-[var(--ui-primary)]"
+}, We = { hidden: "" }, He = ["id", "data-ui-aside-state", "aria-label", "aria-hidden", "inert"], Ke = ["data-ui-aside-header-layout"], Ye = ["data-ui-aside-expand", "data-ui-aside-restore", "aria-label", "title"], Ge = ["aria-label", "title"], Je = ["data-ui-aside-header-layout"], Qe = {
+  key: 0,
+  "data-ui-aside-title": "",
+  "aria-hidden": "true",
+  class: "m-0 min-w-0 flex-1 truncate text-[length:var(--ui-font-size-title,var(--ui-font-size))] font-semibold"
+}, Xe = ["data-ui-aside-expand", "data-ui-aside-restore", "aria-label"], V = "flex size-7 shrink-0 items-center justify-center rounded-[var(--ui-radius-control)] text-[var(--ui-text-muted)] outline-none transition-colors duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)]", sa = /* @__PURE__ */ ze({
+  __name: "AsidePanel",
+  props: {
+    title: {},
+    icon: { default: void 0 },
+    unread: { type: Boolean, default: !1 },
+    fab: { type: Boolean, default: !0 },
+    headerLayout: { default: "stacked" },
+    expandable: { type: Boolean, default: !0 },
+    initialFocus: { default: "field" },
+    shortcut: { default: void 0 },
+    openLabel: {},
+    collapseLabel: {},
+    expandLabel: {},
+    restoreLabel: {}
+  },
+  setup(s, { expose: se }) {
+    const r = s, C = Ae(), g = Se(De, null), W = I("collapsed"), i = u({
+      get: () => g?.state.value ?? W.value,
+      set: (e) => {
+        g ? g.state.value = e : W.value = e;
+      }
+    }), d = u(() => g?.presentation.value === "mobile" ? "sheet" : g?.overlay.value ? "floating" : "docked"), t = u(() => i.value !== "collapsed"), o = u(() => i.value === "expanded");
+    function M() {
+      i.value = "open";
+    }
+    function $() {
+      i.value = "collapsed";
+    }
+    function L() {
+      r.expandable && (i.value = "expanded");
+    }
+    function P() {
+      i.value = "open";
+    }
+    function ue() {
+      i.value = t.value ? "collapsed" : "open";
+    }
+    const f = u(() => ({
+      open: r.openLabel ?? C("Open {name}", { name: r.title }),
+      collapse: r.collapseLabel ?? C("Collapse {name}", { name: r.title }),
+      expand: r.expandLabel ?? C("Expand {name}", { name: r.title }),
+      restore: r.restoreLabel ?? C("Restore {name}", { name: r.title })
+    })), E = I(!1);
+    Be(() => {
+      typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => requestAnimationFrame(() => {
+        E.value = !0;
+      })) : E.value = !0;
+    });
+    const x = y(null), R = I(!1);
+    let q;
+    function A() {
+      clearTimeout(q), q = void 0, R.value = !1;
+    }
+    F([i, d], ([e, l], [m, we]) => {
+      if (A(), !E.value || we !== "floating" || m !== "open" || e !== "collapsed" || l === "sheet") return;
+      const ee = je("--ui-motion-normal", x.value);
+      ee < 1 || (R.value = !0, q = setTimeout(A, ee + 50));
+    }, { flush: "sync" });
+    function re(e) {
+      e.target === e.currentTarget && e.propertyName === "translate" && A();
+    }
+    Ce(A);
+    const N = u(() => d.value === "floating" || R.value), D = u(() => o.value && d.value === "docked" ? g?.regionWidth.value ?? "100%" : "var(--ui-aside-open-width)"), U = I(D.value);
+    F(D, (e) => {
+      t.value && (U.value = e);
+    }), F(t, (e) => {
+      e && (U.value = D.value);
+    }, { flush: "sync" });
+    const de = u(() => E.value ? N.value ? t.value ? "translate var(--ui-motion-panel) var(--ui-motion-ease-out)" : "translate var(--ui-motion-normal) var(--ui-motion-ease-in)" : "translate var(--ui-motion-panel) var(--ui-motion-ease-in-out)" : "none"), ce = u(() => ({ width: t.value ? D.value : U.value, transition: de.value })), j = y(null), H = y(null), K = y(null), ve = (e) => {
+      H.value = e ?? null;
+    }, fe = (e) => {
+      K.value = e ?? null;
+    }, _ = u(() => (d.value === "sheet" ? K.value : H.value) ?? j.value), T = y(null);
+    let Y = 0;
+    function pe() {
+      T.value && _.value !== j.value && (Y = T.value.scrollTop);
+    }
+    F(_, (e) => {
+      e !== j.value && T.value && (T.value.scrollTop = Y);
+    }, { flush: "post" });
+    const G = () => !!x.value && x.value.contains(x.value.ownerDocument.activeElement);
+    _e(() => x.value, () => t.value && d.value === "floating", {
+      onEscape: (e) => Ie(e) || !G() ? !1 : ($(), !0)
+    });
+    const J = $e(), Q = y(null), X = y(null), Z = [
+      "[data-autofocus]",
+      "textarea:not([disabled]):not([readonly])",
+      'input:not([type="hidden"]):not([disabled]):not([readonly])',
+      '[contenteditable="true"]'
+    ].join(",");
+    function me() {
+      return typeof matchMedia == "function" && matchMedia("(pointer: coarse)").matches;
+    }
+    function he(e) {
+      if (r.initialFocus !== "none") {
+        if (r.initialFocus === "field" && !me()) {
+          const l = e.querySelector(`[data-ui-aside-composer] :is(${Z})`) ?? e.querySelector(Z);
+          if (l && (l.focus({ preventScroll: !0 }), e.ownerDocument.activeElement === l))
+            return;
+        }
+        e.focus({ preventScroll: !0 });
+      }
+    }
+    F(t, (e, l) => {
+      if (e === l || d.value === "sheet" || typeof document > "u") return;
+      const m = G() || document.activeElement === document.body;
+      Ee(() => {
+        if (e) {
+          x.value && he(x.value);
+          return;
+        }
+        m && Q.value?.focus({ preventScroll: !0 });
+      });
+    }, { flush: "sync" });
+    function be(e) {
+      e.preventDefault(), r.initialFocus !== "none" && e.target?.focus({ preventScroll: !0 });
+    }
+    function xe(e) {
+      e.preventDefault();
+      const l = e.target?.ownerDocument, m = l?.activeElement;
+      !t.value && (!m || m === l?.body || e.target.contains(m)) && X.value?.focus({ preventScroll: !0 });
+    }
+    const ye = Te(), h = u(() => r.headerLayout === "inline" && !!ye.tabs), ge = u(() => o.value ? "full" : "large"), ke = u(() => o.value ? void 0 : [0.5, 0.92]), k = u(() => ({ state: i.value, mode: d.value, collapse: $, expand: L, restore: P }));
+    return se({ open: M, collapse: $, expand: L, restore: P, toggle: ue, state: i, mode: d }), (e, l) => (a(), p("div", {
+      "data-ui-aside-panel-root": "",
+      "data-ui-aside-mode": d.value,
+      "data-ui-aside-floating": N.value ? "" : void 0,
+      class: "absolute inset-0"
+    }, [
+      d.value !== "sheet" ? (a(), p("div", {
+        key: 0,
+        "data-ui-aside-rail": "",
+        class: n(["absolute inset-y-0 end-0 flex w-12 justify-center pt-2", i.value === "collapsed" ? "opacity-100" : "pointer-events-none opacity-0"]),
+        style: ae(E.value ? { transition: `opacity var(--ui-motion-fast) var(--ui-motion-ease) ${i.value === "collapsed" ? "var(--ui-motion-fast)" : "0ms"}` } : void 0),
+        inert: i.value !== "collapsed",
+        "aria-hidden": i.value !== "collapsed" ? "true" : void 0
+      }, [
+        c("button", {
+          ref_key: "railButton",
+          ref: Q,
+          type: "button",
+          "data-ui-aside-open": "",
+          "data-ui-hit": "",
+          class: "relative flex size-8 items-center justify-center rounded-full text-[var(--ui-text-muted)] outline-none transition-colors duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+          "aria-label": f.value.open,
+          title: s.shortcut ? `${f.value.open} (${s.shortcut})` : f.value.open,
+          "aria-expanded": t.value,
+          "aria-controls": b(J),
+          onClick: M
+        }, [
+          (a(), w(O(s.icon ?? b(ie)), {
+            class: "size-4",
+            "aria-hidden": "true"
+          })),
+          s.unread ? (a(), p("span", Ne)) : v("", !0)
+        ], 8, qe)
+      ], 14, Re)) : v("", !0),
+      d.value === "sheet" && s.fab ? (a(), p("button", {
+        key: 1,
+        ref_key: "fabButton",
+        ref: X,
+        type: "button",
+        "data-ui-aside-fab": "",
+        class: n(["fixed end-4 z-[1] flex size-12 items-center justify-center rounded-full border border-[var(--ui-border-floating)] bg-[var(--ui-surface)] text-[var(--ui-text)] shadow-[var(--ui-shadow-menu)] outline-none focus-visible:shadow-[var(--ui-shadow-focus)]", t.value && "pointer-events-none opacity-0"]),
+        style: { bottom: "calc(var(--ui-space-4) + env(safe-area-inset-bottom) + var(--ui-aside-fab-offset, 0px))" },
+        "aria-label": f.value.open,
+        "aria-expanded": t.value,
+        inert: t.value,
+        onClick: M
+      }, [
+        (a(), w(O(s.icon ?? b(ie)), {
+          class: "size-5",
+          "aria-hidden": "true"
+        })),
+        s.unread ? (a(), p("span", Ve)) : v("", !0)
+      ], 10, Ue)) : v("", !0),
+      c("span", We, [
+        c("span", {
+          ref_key: "holder",
+          ref: j,
+          "data-ui-aside-holder": ""
+        }, null, 512)
+      ]),
+      d.value !== "sheet" ? (a(), p("section", {
+        key: 2,
+        id: b(J),
+        ref_key: "panel",
+        ref: x,
+        "data-ui-aside-panel": "",
+        "data-ui-aside-state": i.value,
+        role: "complementary",
+        "aria-label": s.title,
+        "aria-hidden": t.value ? void 0 : "true",
+        inert: !t.value,
+        tabindex: "-1",
+        class: n(["absolute inset-y-0 end-0 flex flex-col bg-[var(--ui-app-web-surface,var(--ui-surface))] text-[var(--ui-text)] outline-none", [
+          t.value ? "translate-x-0" : "translate-x-full rtl:-translate-x-full",
+          N.value && "border-s border-[var(--ui-border-floating)] shadow-[var(--ui-shadow-dialog)]",
+          !t.value && "pointer-events-none"
+        ]]),
+        style: ae(ce.value),
+        onTransitionend: re
+      }, [
+        c("header", {
+          "data-ui-aside-header": "",
+          "data-ui-aside-header-layout": h.value ? "inline" : "stacked",
+          class: n(["flex shrink-0", h.value ? "min-w-0 flex-row items-center" : "flex-col"])
+        }, [
+          e.$slots.tabs ? (a(), p("div", {
+            key: 0,
+            "data-ui-aside-tabs": "",
+            class: n(h.value ? "ms-3 min-w-0 flex-[0_1_auto]" : "mx-3 mt-2")
+          }, [
+            z(e.$slots, "tabs", S(B(k.value)))
+          ], 2)) : v("", !0),
+          c("div", {
+            class: n(["flex h-12 min-w-0 items-center gap-[max(4px,calc(var(--ui-hit-min,0px)-28px))] pe-2", h.value ? "flex-1 justify-end ps-2" : "ps-[var(--ui-inset-x)]"])
+          }, [
+            c("h2", {
+              "data-ui-aside-title": "",
+              class: n(["m-0 min-w-0 truncate text-[length:var(--ui-font-size-lg)] font-semibold leading-5", h.value ? "sr-only" : "flex-1"])
+            }, te(s.title), 3),
+            z(e.$slots, "actions", S(B(k.value))),
+            s.expandable ? (a(), p("button", {
+              key: 0,
+              type: "button",
+              "data-ui-aside-expand": o.value ? void 0 : "",
+              "data-ui-aside-restore": o.value ? "" : void 0,
+              "data-ui-hit": "",
+              class: n(V),
+              "aria-label": o.value ? f.value.restore : f.value.expand,
+              title: o.value ? f.value.restore : f.value.expand,
+              onClick: l[0] || (l[0] = (m) => o.value ? P() : L())
+            }, [
+              (a(), w(O(o.value ? b(oe) : b(ne)), {
+                class: "size-4",
+                "aria-hidden": "true"
+              }))
+            ], 8, Ye)) : v("", !0),
+            c("button", {
+              type: "button",
+              "data-ui-aside-collapse": "",
+              "data-ui-hit": "",
+              class: n(V),
+              "aria-label": f.value.collapse,
+              title: f.value.collapse,
+              onClick: $
+            }, [
+              Fe(b(Pe), {
+                class: "size-4 rtl:-scale-x-100",
+                "aria-hidden": "true"
+              })
+            ], 8, Ge)
+          ], 2)
+        ], 10, Ke),
+        c("div", {
+          ref: ve,
+          class: "flex min-h-0 flex-1 flex-col"
+        }, null, 512)
+      ], 46, He)) : v("", !0),
+      d.value === "sheet" ? (a(), w(Oe, {
+        key: 3,
+        open: t.value,
+        height: ge.value,
+        "snap-points": ke.value,
+        flush: "",
+        title: s.title,
+        "close-label": b(C)("Close"),
+        "data-ui-aside-panel": "",
+        "data-ui-aside-state": i.value,
+        "onUpdate:open": l[2] || (l[2] = (m) => m || $()),
+        onOpenAutoFocus: be,
+        onCloseAutoFocus: xe
+      }, {
+        header: le(() => [
+          c("div", {
+            "data-ui-aside-header": "",
+            "data-ui-aside-header-layout": h.value ? "inline" : "stacked",
+            class: n(["flex min-w-0", h.value ? "flex-row items-center" : "flex-col"])
+          }, [
+            e.$slots.tabs ? (a(), p("div", {
+              key: 0,
+              "data-ui-aside-tabs": "",
+              class: n(h.value ? "min-w-0 flex-[0_1_auto]" : "me-3 mt-1")
+            }, [
+              z(e.$slots, "tabs", S(B(k.value)))
+            ], 2)) : v("", !0),
+            c("div", {
+              class: n(["flex min-h-11 min-w-0 items-center gap-1", h.value && "flex-1 justify-end ps-2"])
+            }, [
+              h.value ? v("", !0) : (a(), p("p", Qe, te(s.title), 1)),
+              z(e.$slots, "actions", S(B(k.value))),
+              s.expandable ? (a(), p("button", {
+                key: 1,
+                type: "button",
+                "data-ui-aside-expand": o.value ? void 0 : "",
+                "data-ui-aside-restore": o.value ? "" : void 0,
+                class: n([V, "size-11"]),
+                "aria-label": o.value ? f.value.restore : f.value.expand,
+                onClick: l[1] || (l[1] = (m) => o.value ? P() : L())
+              }, [
+                (a(), w(O(o.value ? b(oe) : b(ne)), {
+                  class: "size-5",
+                  "aria-hidden": "true"
+                }))
+              ], 10, Xe)) : v("", !0)
+            ], 2)
+          ], 10, Je)
+        ]),
+        default: le(() => [
+          c("div", {
+            ref: fe,
+            class: "flex min-h-0 flex-1 flex-col"
+          }, null, 512)
+        ]),
+        _: 3
+      }, 8, ["open", "height", "snap-points", "title", "close-label", "data-ui-aside-state"])) : v("", !0),
+      _.value ? (a(), w(Le, {
+        key: 4,
+        to: _.value
+      }, [
+        c("div", {
+          ref_key: "thread",
+          ref: T,
+          "data-ui-aside-body": "",
+          class: "min-h-0 flex-1 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]",
+          onScrollPassive: pe
+        }, [
+          c("div", {
+            class: n(["flex min-h-full flex-col gap-4 px-[var(--ui-inset-x)] py-3", o.value && "mx-auto w-full max-w-[760px]"])
+          }, [
+            z(e.$slots, "default", S(B(k.value)))
+          ], 2)
+        ], 544),
+        e.$slots.composer ? (a(), p("div", {
+          key: 0,
+          "data-ui-aside-composer": "",
+          class: n(["shrink-0 p-3", o.value && "mx-auto w-full max-w-[784px]"])
+        }, [
+          z(e.$slots, "composer", S(B(k.value)))
+        ], 2)) : v("", !0)
+      ], 8, ["to"])) : v("", !0)
+    ], 8, Me));
+  }
+});
+export {
+  sa as default
+};

package/dist/modules/components/app/aside-panel/AsidePanel2.vue.js

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