@floegence/floe-webapp-core 0.88.0 → 0.89.2

package/dist/components/ui/SurfaceAnchoredLayer.js

@@ -1,120 +1,119 @@
-import { createComponent as E, mergeProps as K, memo as N } from "solid-js/web";
-import { splitProps as Q, createSignal as l, createEffect as R, onCleanup as O, onMount as U, Show as X } from "solid-js";
-import { SurfaceFloatingLayer as Z } from "./SurfaceFloatingLayer.js";
-import { resolveFloatingBoundary as _ } from "./surfaceFloatingBoundary.js";
-import { observeViewport as ee } from "../../viewport.js";
-import { resolveSurfacePortalHost as L } from "./dialogSurfaceScope.js";
-function se(C) {
-  const [o, H] = Q(C, ["anchor", "revision", "topOffset", "reservedSpace", "placement", "gap", "children", "class", "style", "layerRef", "onAnchorDisconnect"]), [P, $] = l(!1), [B, V] = l({
+import { createComponent as F, mergeProps as J, memo as K } from "solid-js/web";
+import { splitProps as N, createSignal as f, createEffect as M, onCleanup as R, onMount as Q, Show as U } from "solid-js";
+import { SurfaceFloatingLayer as X } from "./SurfaceFloatingLayer.js";
+import { resolveFloatingBoundary as Z } from "./surfaceFloatingBoundary.js";
+import { observeViewport as _ } from "../../viewport.js";
+import { resolveSurfacePortalHost as E } from "./dialogSurfaceScope.js";
+function ae(L) {
+  const [o, C] = N(L, ["anchor", "revision", "topOffset", "reservedSpace", "placement", "gap", "children", "class", "style", "layerRef", "onAnchorDisconnect"]), [O, H] = f(!1), [$, B] = f({
     x: 0,
     y: 0
-  }), [Y, q] = l("above"), [S, w] = l(!1), [D, W] = l(480), [z, k] = l();
-  let m, x = !1;
-  const [A, T] = l({
+  }), [V, Y] = f("above"), [P, v] = f(!1), [q, D] = f(480), [S, k] = f();
+  let d, w = !1;
+  const [z, T] = f({
     x: 0,
     y: 0
-  }), [j, G] = l(0), I = () => {
-    m = void 0;
-    const n = o.anchor, h = z();
-    if (!n || !h) return;
+  }), [W, j] = f(0), G = () => {
+    d = void 0;
+    const n = o.anchor, l = S();
+    if (!n || !l) return;
     if (!n.isConnected) {
-      w(!1), x || o.onAnchorDisconnect?.(), x = !0;
+      v(!1), w || o.onAnchorDisconnect?.(), w = !0;
       return;
     }
-    x = !1;
-    const t = _(L({
+    w = !1;
+    const t = Z(E({
       owner: n
     }));
     if (!t) {
-      w(!1);
+      v(!1);
       return;
     }
-    const e = n.getBoundingClientRect(), f = Math.max(120, t.width - 24);
-    W(f);
-    const r = h.getBoundingClientRect(), J = (Math.max(t.left, e.left) + Math.min(t.right, e.right)) / 2;
-    let d = Math.max(t.left + 12, Math.min(J - r.width / 2, t.right - r.width - 12));
-    const y = e.top - (o.topOffset ?? 0), i = Math.max(0, o.gap ?? 12), g = y - r.height - i, p = o.reservedSpace, u = t.top + (window.matchMedia("(max-width:760px)").matches ? p?.narrowTop ?? p?.top ?? 12 : p?.top ?? 12), M = Math.max(u, t.bottom - (p?.bottom ?? 12) - r.height), b = (v) => Math.max(u, Math.min(v, M));
-    G(Math.max(0, t.bottom - (p?.bottom ?? 12) - u));
-    let s = g, a = "above";
+    const e = n.getBoundingClientRect(), s = o.reservedSpace, m = t.top + (window.matchMedia("(max-width:760px)").matches ? s?.narrowTop ?? s?.top ?? 12 : s?.top ?? 12);
+    D(Math.max(120, t.width - 24)), j(Math.max(0, t.bottom - (s?.bottom ?? 12) - m));
+    const r = l.getBoundingClientRect(), I = (Math.max(t.left, e.left) + Math.min(t.right, e.right)) / 2;
+    let p = Math.max(t.left + 12, Math.min(I - r.width / 2, t.right - r.width - 12));
+    const x = e.top - (o.topOffset ?? 0), i = Math.max(0, o.gap ?? 12), g = x - r.height - i, y = Math.max(m, t.bottom - (s?.bottom ?? 12) - r.height), u = (b) => Math.max(m, Math.min(b, y));
+    let c = g, a = "above";
     if (o.placement === "right" || o.placement === "left") {
-      const v = e.right + i + r.width <= t.right - 12, F = e.left - i - r.width >= t.left + 12;
-      a = o.placement, a === "right" && !v && F ? a = "left" : a === "left" && !F && v && (a = "right"), d = Math.max(t.left + 12, Math.min(a === "right" ? e.right + i : e.left - r.width - i, t.right - r.width - 12)), s = b(e.top + e.height / 2 - r.height / 2);
-    } else g < u ? e.bottom + i <= M ? (s = e.bottom + i, a = "below") : g >= t.top + 12 ? a = "above" : e.bottom + r.height + i <= t.bottom - 12 ? (s = e.bottom + i, a = "below") : e.right + r.width + i + 12 <= t.right ? (d = e.right + i, s = b(y), a = "right") : e.left - r.width - i - 12 >= t.left ? (d = e.left - r.width - i, s = b(y), a = "left") : (s = b(g), a = "edge") : s = Math.min(s, M);
+      const b = e.right + i + r.width <= t.right - 12, A = e.left - i - r.width >= t.left + 12;
+      a = o.placement, a === "right" && !b && A ? a = "left" : a === "left" && !A && b && (a = "right"), p = Math.max(t.left + 12, Math.min(a === "right" ? e.right + i : e.left - r.width - i, t.right - r.width - 12)), c = u(e.top + e.height / 2 - r.height / 2);
+    } else g < m ? e.bottom + i <= y ? (c = e.bottom + i, a = "below") : g >= t.top + 12 ? a = "above" : e.bottom + r.height + i <= t.bottom - 12 ? (c = e.bottom + i, a = "below") : e.right + r.width + i + 12 <= t.right ? (p = e.right + i, c = u(x), a = "right") : e.left - r.width - i - 12 >= t.left ? (p = e.left - r.width - i, c = u(x), a = "left") : (c = u(g), a = "edge") : c = Math.min(c, y);
     T({
-      x: Math.max(18, Math.min(e.left + e.width / 2 - d, Math.max(18, r.width - 18))),
-      y: Math.max(18, Math.min(e.top + e.height / 2 - s, Math.max(18, r.height - 18)))
-    }), q(a), V({
-      x: Math.round(d),
-      y: Math.round(s)
-    }), w(e.right > t.left && e.left < t.right && e.bottom > t.top && e.top < t.bottom);
-  }, c = () => {
-    m === void 0 && typeof requestAnimationFrame == "function" && (m = requestAnimationFrame(I));
+      x: Math.max(18, Math.min(e.left + e.width / 2 - p, Math.max(18, r.width - 18))),
+      y: Math.max(18, Math.min(e.top + e.height / 2 - c, Math.max(18, r.height - 18)))
+    }), Y(a), B({
+      x: Math.round(p),
+      y: Math.round(c)
+    }), v(e.right > t.left && e.left < t.right && e.bottom > t.top && e.top < t.bottom);
+  }, h = () => {
+    d === void 0 && typeof requestAnimationFrame == "function" && (d = requestAnimationFrame(G));
   };
-  return R(() => {
-    o.anchor, o.revision, o.topOffset, o.reservedSpace, o.placement, o.gap, c();
-  }), R(() => {
-    const n = z();
+  return M(() => {
+    o.anchor, o.revision, o.topOffset, o.reservedSpace, o.placement, o.gap, h();
+  }), M(() => {
+    const n = S();
     if (!n || typeof ResizeObserver > "u") return;
-    const h = new ResizeObserver(c);
-    h.observe(n), O(() => h.disconnect());
-  }), U(() => $(!0)), R(() => {
-    if (!P()) return;
-    const n = o.anchor, h = typeof ResizeObserver == "function" ? new ResizeObserver(c) : void 0, t = L({
+    const l = new ResizeObserver(h);
+    l.observe(n), R(() => l.disconnect());
+  }), Q(() => H(!0)), M(() => {
+    if (!O()) return;
+    const n = o.anchor, l = typeof ResizeObserver == "function" ? new ResizeObserver(h) : void 0, t = E({
       owner: n
     }).boundaryHost;
-    t && h?.observe(t), n && h?.observe(n);
-    const e = new MutationObserver(c);
+    t && l?.observe(t), n && l?.observe(n);
+    const e = new MutationObserver(h);
     n && e.observe(n, {
       attributes: !0,
       attributeFilter: ["style"]
     });
-    let f = n?.parentElement;
-    for (; f && (e.observe(f, {
+    let s = n?.parentElement;
+    for (; s && (e.observe(s, {
       attributes: !0,
       attributeFilter: ["style"],
       childList: !0
-    }), f !== t); )
-      f = f.parentElement;
-    const r = ee(window, c);
-    window.addEventListener("scroll", c, !0), c(), O(() => {
-      h?.disconnect(), e.disconnect(), r(), window.removeEventListener("scroll", c, !0);
+    }), s !== t); )
+      s = s.parentElement;
+    const m = _(window, h);
+    window.addEventListener("scroll", h, !0), h(), R(() => {
+      l?.disconnect(), e.disconnect(), m(), window.removeEventListener("scroll", h, !0);
     });
-  }), O(() => {
-    m !== void 0 && cancelAnimationFrame(m);
-  }), E(X, {
+  }), R(() => {
+    d !== void 0 && cancelAnimationFrame(d);
+  }), F(U, {
     get when() {
-      return N(() => !!P())() && o.anchor;
+      return K(() => !!O())() && o.anchor;
     },
     get children() {
-      return E(Z, K(H, {
+      return F(X, J(C, {
         get owner() {
           return o.anchor;
         },
         get position() {
-          return B();
+          return $();
         },
         get class() {
           return o.class;
         },
         get "data-placement"() {
-          return Y();
+          return V();
         },
         get inert() {
-          return !S();
+          return !P();
         },
         get style() {
           return {
             ...o.style,
-            "--floe-anchored-layer-anchor-x": `${A().x}px`,
-            "--floe-anchored-layer-anchor-y": `${A().y}px`,
-            "--floe-anchored-layer-max-height": `${j()}px`,
-            visibility: S() ? "visible" : "hidden",
-            "max-width": `${D()}px`,
+            "--floe-anchored-layer-anchor-x": `${z().x}px`,
+            "--floe-anchored-layer-anchor-y": `${z().y}px`,
+            "--floe-anchored-layer-max-height": `${W()}px`,
+            visibility: P() ? "visible" : "hidden",
+            "max-width": `${q()}px`,
             "z-index": o.style?.["z-index"] ?? 60
           };
         },
         layerRef: (n) => {
-          k(n), o.layerRef?.(n), c();
+          k(n), o.layerRef?.(n), h();
         },
         get children() {
           return o.children;
@@ -124,5 +123,5 @@ function se(C) {
   });
 }
 export {
-  se as SurfaceAnchoredLayer
+  ae as SurfaceAnchoredLayer
 };

package/dist/components/ui/Tabs.d.ts

@@ -6,6 +6,10 @@ export interface TabItem {
     domId?: string;
     /** DOM identity of the host-owned panel controlled by this tab. */
     panelId?: string;
+    /** Full identity shown when the visible label is truncated. */
+    title?: string;
+    /** Localized accessible close action for this item. */
+    closeLabel?: string;
     icon?: JSX.Element;
     closable?: boolean;
     disabled?: boolean;
@@ -83,6 +87,10 @@ export interface TabsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onC
     slotClassNames?: TabsSlotClassNames;
     /** Accessible name for the tablist container. */
     ariaLabel?: string;
+    labels?: {
+        scrollLeft: string;
+        scrollRight: string;
+    };
 }
 export declare function resolveTabNavigationTargetId(items: Pick<TabItem, 'id' | 'disabled'>[], currentId: string, key: string): string | null;
 export declare function Tabs(props: TabsProps): JSX.Element;