@floegence/floe-webapp-core 0.78.0 → 0.78.2

package/dist/components/layout/MobileNavigationPanel.js

@@ -1,21 +1,21 @@
-import { createComponent as b, use as E, setAttribute as a, insert as f, effect as S, memo as N, className as P, template as g, delegateEvents as T } from "solid-js/web";
-import { createUniqueId as j, createEffect as M, onCleanup as q, createMemo as A, Show as _, untrack as I } from "solid-js";
-import { useOverlayMask as K } from "../../hooks/useOverlayMask.js";
-import { createFloatingPresence as O } from "../ui/floatingPresence.js";
-import { cn as F } from "../../utils/cn.js";
-import { deferAfterPaint as z } from "../../utils/defer.js";
-import { X as L } from "../icons/index.js";
-var R = /* @__PURE__ */ g('<header class="flex shrink-0 items-center gap-2 border-b px-4 py-2"><h2 class="min-w-0 flex-1 text-base font-semibold"></h2><button type=button data-floe-autofocus class="flex h-11 w-11 shrink-0 items-center justify-center rounded-md hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">'), U = /* @__PURE__ */ g('<div data-floe-mobile-navigation-overlay class="absolute inset-0 z-50 overflow-hidden p-2"><div class="absolute inset-0 floe-floating-presence floe-floating-backdrop floe-bottom-drawer-backdrop"data-floe-mobile-navigation-backdrop></div><div class="relative pointer-events-none flex h-full min-h-0 items-end justify-center"><div role=dialog tabindex=-1 data-floe-mobile-navigation-panel data-floe-surface=floating data-floe-surface-portal-layer=true style="max-height:min(680px, 86%);border-radius:24px"><div>'), W = /* @__PURE__ */ g("<h2 class=sr-only>");
-function Z(t) {
-  const u = `mobile-navigation-${j()}`, r = O({
+import { createComponent as g, use as T, setAttribute as a, insert as f, effect as S, memo as j, className as M, template as h, delegateEvents as q } from "solid-js/web";
+import { createUniqueId as A, createEffect as _, onCleanup as E, createMemo as F, Show as B, untrack as K } from "solid-js";
+import { useOverlayMask as O } from "../../hooks/useOverlayMask.js";
+import { createFloatingPresence as z } from "../ui/floatingPresence.js";
+import { cn as D } from "../../utils/cn.js";
+import { deferAfterPaint as L } from "../../utils/defer.js";
+import { X as R } from "../icons/index.js";
+var U = /* @__PURE__ */ h('<header class="flex shrink-0 items-center gap-2 border-b px-4 py-2"><h2 class="min-w-0 flex-1 text-base font-semibold"></h2><button type=button data-floe-autofocus class="flex h-11 w-11 shrink-0 items-center justify-center rounded-md hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">'), W = /* @__PURE__ */ h('<div data-floe-mobile-navigation-overlay class="absolute inset-0 z-50 overflow-hidden p-2"><div class="absolute inset-0 floe-floating-presence floe-floating-backdrop floe-bottom-drawer-backdrop"data-floe-mobile-navigation-backdrop></div><div class="relative pointer-events-none flex h-full min-h-0 items-end justify-center"><div role=dialog tabindex=-1 data-floe-mobile-navigation-panel data-floe-surface=floating data-floe-surface-portal-layer=true style="max-height:min(680px, 86%);border-radius:24px"><div>'), X = /* @__PURE__ */ h("<h2 class=sr-only>");
+function p(t) {
+  const v = `mobile-navigation-${A()}`, r = z({
     open: () => t.open,
     exitDurationMs: 180
   });
   let i, d = null;
-  const v = () => {
+  const m = () => {
     d = t.trigger ?? null, t.onOpenChange(!1);
   };
-  M(() => {
+  _(() => {
     const n = r.mounted();
     if (t.onPresenceChange?.(n), !n && d) {
       const l = d;
@@ -23,21 +23,28 @@ function Z(t) {
         preventScroll: !0
       });
     }
-  }), q(() => t.onPresenceChange?.(!1)), M(() => {
-    const n = t.id;
-    t.open && (d = null, z(() => I(() => {
-      if (!t.open || t.id !== n || !i?.isConnected) return;
-      const l = i.ownerDocument.activeElement;
-      l && i.contains(l) || (i.querySelector("[data-floe-autofocus]") ?? i).focus({
+  }), E(() => t.onPresenceChange?.(!1));
+  const I = F(() => t.open ? t.id : null);
+  _(() => {
+    const n = I();
+    if (n === null) return;
+    d = null;
+    let l = !0;
+    E(() => {
+      l = !1;
+    }), L(() => K(() => {
+      if (!l || !t.open || t.id !== n || !i?.isConnected) return;
+      const u = i.ownerDocument.activeElement;
+      u && i.contains(u) || (i.querySelector("[data-floe-autofocus]") ?? i).focus({
         preventScroll: !0
       });
-    })));
-  }), K({
+    }));
+  }), O({
     open: r.mounted,
     root: () => i,
     focusRoots: () => [i, t.navigation()].filter((n) => !!n),
     containsTarget: (n) => n instanceof Node && !!(i?.contains(n) || t.navigation()?.contains(n)),
-    onClose: v,
+    onClose: m,
     lockBodyScroll: !1,
     trapFocus: !0,
     blockWheel: "outside",
@@ -46,36 +53,36 @@ function Z(t) {
     autoFocus: !1,
     restoreFocus: !1
   });
-  const B = A(() => t.children);
-  return b(_, {
+  const N = F(() => t.children);
+  return g(B, {
     get when() {
       return r.mounted();
     },
     get children() {
-      var n = U(), l = n.firstChild, D = l.nextSibling, o = D.firstChild, m = o.firstChild;
+      var n = W(), l = n.firstChild, u = l.nextSibling, o = u.firstChild, b = o.firstChild;
       l.$$click = () => {
-        t.open && v();
+        t.open && m();
       }, o.$$keydown = (e) => t.onKeyDown?.(e);
-      var h = i;
-      return typeof h == "function" ? E(h, o) : i = o, a(o, "aria-labelledby", u), f(o, b(_, {
+      var x = i;
+      return typeof x == "function" ? T(x, o) : i = o, a(o, "aria-labelledby", v), f(o, g(B, {
         get when() {
           return t.header === void 0;
         },
         get fallback() {
           return [(() => {
-            var e = W();
-            return a(e, "id", u), f(e, () => t.title), e;
-          })(), N(() => t.header)];
+            var e = X();
+            return a(e, "id", v), f(e, () => t.title), e;
+          })(), j(() => t.header)];
         },
         get children() {
-          var e = R(), s = e.firstChild, c = s.nextSibling;
-          return a(s, "id", u), f(s, () => t.title), c.$$click = v, f(c, b(L, {
+          var e = U(), s = e.firstChild, c = s.nextSibling;
+          return a(s, "id", v), f(s, () => t.title), c.$$click = m, f(c, g(R, {
             class: "h-5 w-5"
           })), S(() => a(c, "aria-label", t.closeLabel ?? "Close")), e;
         }
-      }), m), f(m, B), S((e) => {
-        var s = r.state(), c = r.state(), x = t.id, w = r.state(), y = r.exiting(), k = r.exiting() ? "true" : void 0, C = F("pointer-events-auto relative flex min-h-0 w-full max-w-[640px] flex-col border border-border bg-card text-card-foreground shadow-xl floe-floating-presence floe-bottom-drawer-panel", t.class), $ = F("flex min-h-0 flex-col overflow-auto overscroll-contain", t.contentClass);
-        return s !== e.e && a(n, "data-floating-presence", e.e = s), c !== e.t && a(l, "data-floating-presence", e.t = c), x !== e.a && a(o, "id", e.a = x), w !== e.o && a(o, "data-floating-presence", e.o = w), y !== e.i && (o.inert = e.i = y), k !== e.n && a(o, "aria-hidden", e.n = k), C !== e.s && P(o, e.s = C), $ !== e.h && P(m, e.h = $), e;
+      }), b), f(b, N), S((e) => {
+        var s = r.state(), c = r.state(), y = t.id, w = r.state(), k = r.exiting(), C = r.exiting() ? "true" : void 0, $ = D("pointer-events-auto relative flex min-h-0 w-full max-w-[640px] flex-col border border-border bg-card text-card-foreground shadow-xl floe-floating-presence floe-bottom-drawer-panel", t.class), P = D("flex min-h-0 flex-col overflow-auto overscroll-contain", t.contentClass);
+        return s !== e.e && a(n, "data-floating-presence", e.e = s), c !== e.t && a(l, "data-floating-presence", e.t = c), y !== e.a && a(o, "id", e.a = y), w !== e.o && a(o, "data-floating-presence", e.o = w), k !== e.i && (o.inert = e.i = k), C !== e.n && a(o, "aria-hidden", e.n = C), $ !== e.s && M(o, e.s = $), P !== e.h && M(b, e.h = P), e;
       }, {
         e: void 0,
         t: void 0,
@@ -89,7 +96,7 @@ function Z(t) {
     }
   });
 }
-T(["click", "keydown"]);
+q(["click", "keydown"]);
 export {
-  Z as MobileNavigationPanel
+  p as MobileNavigationPanel
 };

package/dist/components/ui/Button.js

@@ -1,8 +1,8 @@
-import { spread as d, mergeProps as c, insert as n, createComponent as t, memo as g, Dynamic as u, template as l } from "solid-js/web";
+import { spread as d, mergeProps as c, insert as n, createComponent as t, memo as g, Dynamic as l, template as u } from "solid-js/web";
 import { splitProps as m, Show as b } from "solid-js";
 import { cn as a } from "../../utils/cn.js";
 import { Loader2 as p } from "../icons/index.js";
-var h = /* @__PURE__ */ l("<button type=button data-floe-surface-part=action>");
+var h = /* @__PURE__ */ u("<button type=button data-floe-control=button data-floe-surface-part=action>");
 const v = {
   default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-primary/80",
   primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-primary/80",
@@ -43,7 +43,7 @@ function k(i) {
         return r.loading;
       },
       get fallback() {
-        return g(() => !!r.icon)() && t(u, {
+        return g(() => !!r.icon)() && t(l, {
           get component() {
             return r.icon;
           },

package/dist/components/ui/Dropdown.js

@@ -216,8 +216,8 @@ function $e(e) {
         });
       }
     }), null), F((t) => {
-      var s = k("relative inline-block", e.class), u = k("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), x = e.disabled ? -1 : 0, a = c(), S = e.triggerAriaLabel, E = e.disabled ? "true" : void 0, L = e.triggerInputSurface ? "true" : void 0, p = e.triggerInputSurface ? "inset" : void 0;
-      return s !== t.e && D(r, t.e = s), u !== t.t && D(n, t.t = u), x !== t.a && f(n, "tabindex", t.a = x), a !== t.o && f(n, "aria-expanded", t.o = a), S !== t.i && f(n, "aria-label", t.i = S), E !== t.n && f(n, "aria-disabled", t.n = E), L !== t.s && f(n, "data-floe-input-surface", t.s = L), p !== t.h && f(n, "data-floe-surface", t.h = p), t;
+      var s = k("relative inline-block", e.class), u = k("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), x = e.disabled ? -1 : 0, a = c(), S = e.triggerAriaLabel, E = e.disabled ? "true" : void 0, p = e.triggerInputSurface ? "true" : void 0, L = e.triggerInputSurface ? "inset" : void 0;
+      return s !== t.e && D(r, t.e = s), u !== t.t && D(n, t.t = u), x !== t.a && f(n, "tabindex", t.a = x), a !== t.o && f(n, "aria-expanded", t.o = a), S !== t.i && f(n, "aria-label", t.i = S), E !== t.n && f(n, "aria-disabled", t.n = E), p !== t.s && f(n, "data-floe-input-surface", t.s = p), L !== t.h && f(n, "data-floe-surface", t.h = L), t;
     }, {
       e: void 0,
       t: void 0,
@@ -328,8 +328,8 @@ function ee(e) {
             });
           }
         }), null), F((a) => {
-          var S = k("w-full flex items-center gap-1.5 px-2 py-1 text-xs", "transition-colors duration-75", "focus:outline-none focus:bg-accent", e.item.tone === "danger" && "text-destructive", e.item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), E = e.item.disabled, L = o() ? "menu" : void 0, p = o() ? c() : void 0, K = e.selected && !o() ? "true" : void 0, N = e.item.tone ?? "default";
-          return S !== a.e && D(t, a.e = S), E !== a.t && (t.disabled = a.t = E), L !== a.a && f(t, "aria-haspopup", a.a = L), p !== a.o && f(t, "aria-expanded", a.o = p), K !== a.i && f(t, "data-floe-selected", a.i = K), N !== a.n && f(t, "data-tone", a.n = N), a;
+          var S = k("w-full flex items-center gap-1.5 px-2 py-1 text-xs", "transition-colors duration-75", "focus:outline-none focus:bg-accent", e.item.tone === "danger" && "text-destructive", e.item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), E = e.item.disabled, p = o() ? "menu" : void 0, L = o() ? c() : void 0, K = e.selected && !o() ? "true" : void 0, N = e.item.tone ?? "default";
+          return S !== a.e && D(t, a.e = S), E !== a.t && (t.disabled = a.t = E), p !== a.a && f(t, "aria-haspopup", a.a = p), L !== a.o && f(t, "aria-expanded", a.o = L), K !== a.i && f(t, "data-floe-selected", a.i = K), N !== a.n && f(t, "data-tone", a.n = N), a;
         }, {
           e: void 0,
           t: void 0,
@@ -429,7 +429,7 @@ function Fe(e) {
   return l($e, {
     triggerInputSurface: !0,
     get triggerClass() {
-      return k("flex items-center justify-between gap-2 h-8 px-2.5 w-full", "rounded border border-input bg-background text-xs shadow-sm", "transition-colors duration-100", e.class);
+      return k("flex items-center justify-between gap-2 h-8 px-2.5 w-full", "rounded border border-input bg-background text-[length:var(--floe-type-control)] shadow-sm", "transition-colors duration-100", e.class);
     },
     get trigger() {
       return [(() => {

package/dist/components/ui/Input.js

@@ -2,28 +2,28 @@ import { insert as l, createComponent as f, effect as y, className as C, memo as
 import { splitProps as N, createUniqueId as E, Show as w, createSignal as ie, createEffect as ue, onCleanup as se, For as ce } from "solid-js";
 import { cn as I } from "../../utils/cn.js";
 import { Minus as fe, Plus as he, ChevronDown as ge } from "../icons/index.js";
-var xe = /* @__PURE__ */ z('<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">'), ve = /* @__PURE__ */ z('<div class="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">'), M = /* @__PURE__ */ z('<p class="mt-1 text-[11px] text-error"role=alert>'), R = /* @__PURE__ */ z('<p class="mt-1 text-[11px] text-muted-foreground">'), be = /* @__PURE__ */ z("<div class=relative><input data-floe-surface=inset>"), me = /* @__PURE__ */ z("<div><textarea data-floe-surface=inset>"), pe = /* @__PURE__ */ z('<div><div data-floe-input-surface data-floe-surface=inset><button type=button aria-label="Decrease value"></button><input type=number><button type=button aria-label="Increase value">'), we = /* @__PURE__ */ z("<div><div data-floe-input-surface data-floe-surface=inset><input>"), oe = /* @__PURE__ */ z("<span>"), ye = /* @__PURE__ */ z("<button type=button><span>"), Ie = /* @__PURE__ */ z("<div role=listbox>"), $e = /* @__PURE__ */ z("<button type=button role=option>");
+var ve = /* @__PURE__ */ z('<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">'), xe = /* @__PURE__ */ z('<div class="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">'), M = /* @__PURE__ */ z('<p class="mt-1 text-[11px] text-error"role=alert>'), R = /* @__PURE__ */ z('<p class="mt-1 text-[11px] text-muted-foreground">'), be = /* @__PURE__ */ z("<div class=relative><input data-floe-control=input data-floe-surface=inset>"), me = /* @__PURE__ */ z("<div><textarea data-floe-control=input data-floe-surface=inset>"), pe = /* @__PURE__ */ z('<div><div data-floe-input-surface data-floe-control=compound-input data-floe-surface=inset><button type=button aria-label="Decrease value"></button><input type=number><button type=button aria-label="Increase value">'), we = /* @__PURE__ */ z("<div><div data-floe-input-surface data-floe-control=compound-input data-floe-surface=inset><input>"), oe = /* @__PURE__ */ z("<span>"), ye = /* @__PURE__ */ z("<button type=button><span>"), Ie = /* @__PURE__ */ z("<div role=listbox>"), $e = /* @__PURE__ */ z("<button type=button role=option>");
 const Ce = {
   sm: "h-7 text-xs px-2",
-  md: "h-8 text-xs px-2.5",
+  md: "h-8 text-[length:var(--floe-type-control)] px-2.5",
   lg: "h-9 text-sm px-3"
 };
 function Te(r) {
-  const [e, b] = N(r, ["size", "error", "helperText", "leftIcon", "rightIcon", "class", "id"]), S = E(), m = () => e.id ?? S, h = () => `${m()}-error`, v = () => `${m()}-helper`, $ = () => {
+  const [e, b] = N(r, ["size", "error", "helperText", "leftIcon", "rightIcon", "class", "id"]), S = E(), m = () => e.id ?? S, h = () => `${m()}-error`, x = () => `${m()}-helper`, $ = () => {
     const o = [];
-    return e.error && o.push(h()), e.helperText && !e.error && o.push(v()), o.length > 0 ? o.join(" ") : void 0;
+    return e.error && o.push(h()), e.helperText && !e.error && o.push(x()), o.length > 0 ? o.join(" ") : void 0;
   };
   return (() => {
-    var o = be(), x = o.firstChild;
+    var o = be(), v = o.firstChild;
     return l(o, f(w, {
       get when() {
         return e.leftIcon;
       },
       get children() {
-        var d = xe();
+        var d = ve();
         return l(d, () => e.leftIcon), d;
       }
-    }), x), B(x, L({
+    }), v), B(v, L({
       get id() {
         return m();
       },
@@ -53,7 +53,7 @@ function Te(r) {
         return e.rightIcon;
       },
       get children() {
-        var d = ve();
+        var d = xe();
         return l(d, () => e.rightIcon), d;
       }
     }), null), l(o, f(w, {
@@ -70,19 +70,19 @@ function Te(r) {
       },
       get children() {
         var d = R();
-        return l(d, () => e.helperText), y(() => g(d, "id", v())), d;
+        return l(d, () => e.helperText), y(() => g(d, "id", x())), d;
       }
     }), null), o;
   })();
 }
 function _e(r) {
-  const [e, b] = N(r, ["error", "helperText", "class", "id"]), S = E(), m = () => e.id ?? S, h = () => `${m()}-error`, v = () => `${m()}-helper`, $ = () => {
+  const [e, b] = N(r, ["error", "helperText", "class", "id"]), S = E(), m = () => e.id ?? S, h = () => `${m()}-error`, x = () => `${m()}-helper`, $ = () => {
     const o = [];
-    return e.error && o.push(h()), e.helperText && !e.error && o.push(v()), o.length > 0 ? o.join(" ") : void 0;
+    return e.error && o.push(h()), e.helperText && !e.error && o.push(x()), o.length > 0 ? o.join(" ") : void 0;
   };
   return (() => {
-    var o = me(), x = o.firstChild;
-    return B(x, L({
+    var o = me(), v = o.firstChild;
+    return B(v, L({
       get id() {
         return m();
       },
@@ -93,7 +93,7 @@ function _e(r) {
         return $();
       },
       get class() {
-        return I("w-full min-h-16 rounded border border-input bg-background p-2.5 text-xs shadow-sm", "placeholder:text-muted-foreground", "transition-colors duration-100", "focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", "resize-y", e.error && "border-error", e.class);
+        return I("w-full min-h-16 rounded border border-input bg-background p-2.5 text-[length:var(--floe-type-control)] shadow-sm", "placeholder:text-muted-foreground", "transition-colors duration-100", "focus:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", "resize-y", e.error && "border-error", e.class);
       }
     }, b), !1, !1), l(o, f(w, {
       get when() {
@@ -109,16 +109,16 @@ function _e(r) {
       },
       get children() {
         var d = R();
-        return l(d, () => e.helperText), y(() => g(d, "id", v())), d;
+        return l(d, () => e.helperText), y(() => g(d, "id", x())), d;
       }
     }), null), o;
   })();
 }
 function Pe(r) {
-  const e = E(), b = `${e}-error`, S = `${e}-helper`, m = () => r.step ?? 1, h = () => r.min ?? -1 / 0, v = () => r.max ?? 1 / 0, $ = (t) => Math.min(v(), Math.max(h(), t)), o = () => !r.disabled && r.value > h(), x = () => !r.disabled && r.value < v(), d = () => {
+  const e = E(), b = `${e}-error`, S = `${e}-helper`, m = () => r.step ?? 1, h = () => r.min ?? -1 / 0, x = () => r.max ?? 1 / 0, $ = (t) => Math.min(x(), Math.max(h(), t)), o = () => !r.disabled && r.value > h(), v = () => !r.disabled && r.value < x(), d = () => {
     o() && r.onChange($(r.value - m()));
   }, T = () => {
-    x() && r.onChange($(r.value + m()));
+    v() && r.onChange($(r.value + m()));
   }, P = (t) => {
     const u = parseFloat(t.currentTarget.value);
     isNaN(u) || r.onChange($(u));
@@ -172,7 +172,7 @@ function Pe(r) {
         return g(n, "id", S), l(n, () => r.helperText), n;
       }
     }), null), y((n) => {
-      var V = r.class, j = r.error ? !0 : void 0, A = r.disabled ? !0 : void 0, F = I("inline-flex items-center rounded border border-input bg-background shadow-sm", "transition-colors duration-100", r.disabled && "opacity-50 cursor-not-allowed", r.error && "border-error", a().height), W = !o(), q = I("flex items-center justify-center border-r border-input cursor-pointer", "text-muted-foreground transition-colors", "hover:bg-accent hover:text-foreground", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-muted-foreground", a().btnSize, a().height), H = r.min, G = r.max, U = r.step, X = r.disabled, J = r.inputDisabled, K = r.placeholder, Q = r.error ? !0 : void 0, Y = s(), Z = I("w-16 text-center text-xs bg-transparent border-none", "outline-none focus:outline-none focus:ring-0", "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", r.inputDisabled && "cursor-default"), ee = !x(), te = I("flex items-center justify-center border-l border-input cursor-pointer", "text-muted-foreground transition-colors", "hover:bg-accent hover:text-foreground", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-muted-foreground", a().btnSize, a().height);
+      var V = r.class, j = r.error ? !0 : void 0, A = r.disabled ? !0 : void 0, F = I("inline-flex items-center rounded border border-input bg-background shadow-sm", "transition-colors duration-100", r.disabled && "opacity-50 cursor-not-allowed", r.error && "border-error", a().height), W = !o(), q = I("flex items-center justify-center border-r border-input cursor-pointer", "text-muted-foreground transition-colors", "hover:bg-accent hover:text-foreground", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-muted-foreground", a().btnSize, a().height), H = r.min, G = r.max, U = r.step, X = r.disabled, J = r.inputDisabled, K = r.placeholder, Q = r.error ? !0 : void 0, Y = s(), Z = I("w-16 text-center text-[length:var(--floe-type-control)] bg-transparent border-none", "outline-none focus:outline-none focus:ring-0", "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", r.inputDisabled && "cursor-default"), ee = !v(), te = I("flex items-center justify-center border-l border-input cursor-pointer", "text-muted-foreground transition-colors", "hover:bg-accent hover:text-foreground", "focus:outline-none", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-muted-foreground", a().btnSize, a().height);
       return V !== n.e && C(t, n.e = V), j !== n.t && g(u, "aria-invalid", n.t = j), A !== n.a && g(u, "aria-disabled", n.a = A), F !== n.o && C(u, n.o = F), W !== n.i && (k.disabled = n.i = W), q !== n.n && C(k, n.n = q), H !== n.s && g(p, "min", n.s = H), G !== n.h && g(p, "max", n.h = G), U !== n.r && g(p, "step", n.r = U), X !== n.d && (p.disabled = n.d = X), J !== n.l && (p.readOnly = n.l = J), K !== n.u && g(p, "placeholder", n.u = K), Q !== n.c && g(p, "aria-invalid", n.c = Q), Y !== n.w && g(p, "aria-describedby", n.w = Y), Z !== n.m && C(p, n.m = Z), ee !== n.f && (O.disabled = n.f = ee), te !== n.y && C(O, n.y = te), n;
     }, {
       e: void 0,
@@ -197,9 +197,9 @@ function Pe(r) {
 }
 const D = 8;
 function De(r) {
-  const [e, b] = N(r, ["size", "error", "helperText", "prefix", "suffix", "prefixOptions", "prefixValue", "onPrefixChange", "suffixOptions", "suffixValue", "onSuffixChange", "class", "id"]), S = E(), m = () => e.id ?? S, h = () => `${m()}-error`, v = () => `${m()}-helper`, $ = () => {
+  const [e, b] = N(r, ["size", "error", "helperText", "prefix", "suffix", "prefixOptions", "prefixValue", "onPrefixChange", "suffixOptions", "suffixValue", "onSuffixChange", "class", "id"]), S = E(), m = () => e.id ?? S, h = () => `${m()}-error`, x = () => `${m()}-helper`, $ = () => {
     const s = [];
-    return e.error && s.push(h()), e.helperText && !e.error && s.push(v()), s.length > 0 ? s.join(" ") : void 0;
+    return e.error && s.push(h()), e.helperText && !e.error && s.push(x()), s.length > 0 ? s.join(" ") : void 0;
   }, o = {
     sm: {
       height: "h-7",
@@ -208,7 +208,7 @@ function De(r) {
     },
     md: {
       height: "h-8",
-      text: "text-xs",
+      text: "text-[length:var(--floe-type-control)]",
       px: "px-2.5"
     },
     lg: {
@@ -216,7 +216,7 @@ function De(r) {
       text: "text-sm",
       px: "px-3"
     }
-  }, x = () => o[e.size ?? "md"], d = () => !!e.prefix || e.prefixOptions && e.prefixOptions.length > 0, T = () => !!e.suffix || e.suffixOptions && e.suffixOptions.length > 0, P = () => e.prefix ? e.prefix : e.prefixOptions?.find((s) => s.value === e.prefixValue)?.label ?? e.prefixOptions?.[0]?.label, i = () => e.suffix ? e.suffix : e.suffixOptions?.find((s) => s.value === e.suffixValue)?.label ?? e.suffixOptions?.[0]?.label;
+  }, v = () => o[e.size ?? "md"], d = () => !!e.prefix || e.prefixOptions && e.prefixOptions.length > 0, T = () => !!e.suffix || e.suffixOptions && e.suffixOptions.length > 0, P = () => e.prefix ? e.prefix : e.prefixOptions?.find((s) => s.value === e.prefixValue)?.label ?? e.prefixOptions?.[0]?.label, i = () => e.suffix ? e.suffix : e.suffixOptions?.find((s) => s.value === e.suffixValue)?.label ?? e.suffixOptions?.[0]?.label;
   return (() => {
     var s = we(), c = s.firstChild, a = c.firstChild;
     return l(c, f(w, {
@@ -231,7 +231,7 @@ function De(r) {
           get fallback() {
             return (() => {
               var t = oe();
-              return l(t, () => e.prefix), y(() => C(t, I("flex items-center border-r border-input bg-muted/50 text-muted-foreground", x().text, x().px, x().height))), t;
+              return l(t, () => e.prefix), y(() => C(t, I("flex items-center border-r border-input bg-muted/50 text-muted-foreground", v().text, v().px, v().height))), t;
             })();
           },
           get children() {
@@ -270,7 +270,7 @@ function De(r) {
         return $();
       },
       get class() {
-        return I("flex-1 min-w-0 bg-transparent border-none", "placeholder:text-muted-foreground", "outline-none focus:outline-none focus:ring-0", "disabled:cursor-not-allowed", x().text, x().px);
+        return I("flex-1 min-w-0 bg-transparent border-none", "placeholder:text-muted-foreground", "outline-none focus:outline-none focus:ring-0", "disabled:cursor-not-allowed", v().text, v().px);
       }
     }, b), !1, !1), l(c, f(w, {
       get when() {
@@ -284,7 +284,7 @@ function De(r) {
           get fallback() {
             return (() => {
               var t = oe();
-              return l(t, () => e.suffix), y(() => C(t, I("flex items-center border-l border-input bg-muted/50 text-muted-foreground", x().text, x().px, x().height))), t;
+              return l(t, () => e.suffix), y(() => C(t, I("flex items-center border-l border-input bg-muted/50 text-muted-foreground", v().text, v().px, v().height))), t;
             })();
           },
           get children() {
@@ -326,10 +326,10 @@ function De(r) {
       },
       get children() {
         var t = R();
-        return l(t, () => e.helperText), y(() => g(t, "id", v())), t;
+        return l(t, () => e.helperText), y(() => g(t, "id", x())), t;
       }
     }), null), y((t) => {
-      var u = e.class, k = e.error ? !0 : void 0, p = b.disabled ? !0 : void 0, O = I("inline-flex items-center rounded border border-input bg-background shadow-sm", "transition-colors duration-100", b.disabled && "opacity-50 cursor-not-allowed", e.error && "border-error", x().height);
+      var u = e.class, k = e.error ? !0 : void 0, p = b.disabled ? !0 : void 0, O = I("inline-flex items-center rounded border border-input bg-background shadow-sm", "transition-colors duration-100", b.disabled && "opacity-50 cursor-not-allowed", e.error && "border-error", v().height);
       return u !== t.e && C(s, t.e = u), k !== t.t && g(c, "aria-invalid", t.t = k), p !== t.a && g(c, "aria-disabled", t.a = p), O !== t.o && C(c, t.o = O), t;
     }, {
       e: void 0,
@@ -344,7 +344,7 @@ function le(r) {
     x: -9999,
     y: -9999
   });
-  let h, v;
+  let h, x;
   const $ = {
     sm: {
       height: "h-7",
@@ -353,7 +353,7 @@ function le(r) {
     },
     md: {
       height: "h-8",
-      text: "text-xs",
+      text: "text-[length:var(--floe-type-control)]",
       px: "px-2.5"
     },
     lg: {
@@ -361,16 +361,16 @@ function le(r) {
       text: "text-sm",
       px: "px-3"
     }
-  }, o = () => $[r.size ?? "md"], x = () => {
-    if (!h || !v) return;
-    const i = h.getBoundingClientRect(), s = v.getBoundingClientRect(), c = window.innerWidth, a = window.innerHeight;
+  }, o = () => $[r.size ?? "md"], v = () => {
+    if (!h || !x) return;
+    const i = h.getBoundingClientRect(), s = x.getBoundingClientRect(), c = window.innerWidth, a = window.innerHeight;
     let t = i.left, u = i.bottom + 2;
     t + s.width > c - D && (t = i.right - s.width), t = Math.max(D, t), u + s.height > a - D && (u = i.top - s.height - 2), u = Math.max(D, u), m({
       x: t,
       y: u
     });
   }, d = (i) => {
-    h && !h.contains(i.target) && v && !v.contains(i.target) && b(!1);
+    h && !h.contains(i.target) && x && !x.contains(i.target) && b(!1);
   }, T = (i) => {
     i.key === "Escape" && b(!1);
   }, P = (i) => {
@@ -384,7 +384,7 @@ function le(r) {
       });
       return;
     }
-    typeof document > "u" || (document.addEventListener("mousedown", d), document.addEventListener("keydown", T), requestAnimationFrame(x), se(() => {
+    typeof document > "u" || (document.addEventListener("mousedown", d), document.addEventListener("keydown", T), requestAnimationFrame(v), se(() => {
       document.removeEventListener("mousedown", d), document.removeEventListener("keydown", T);
     }));
   }), [(() => {
@@ -409,8 +409,8 @@ function le(r) {
     get children() {
       return f(ae, {
         get children() {
-          var i = Ie(), s = v;
-          return typeof s == "function" ? ne(s, i) : v = i, l(i, f(ce, {
+          var i = Ie(), s = x;
+          return typeof s == "function" ? ne(s, i) : x = i, l(i, f(ce, {
             get each() {
               return r.options;
             },

package/dist/primitives.css

@@ -4,9 +4,15 @@
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace;
   --floe-type-caption: 0.6875rem;
+  --floe-type-supporting: 0.75rem;
   --floe-type-control: 0.8125rem;
   --floe-type-body: 0.875rem;
   --floe-type-heading: 1rem;
+  --floe-line-control: 1.25rem;
+  --floe-line-body: 1.375rem;
+  --floe-control-height-sm: 1.75rem;
+  --floe-control-height-md: 2rem;
+  --floe-row-height: 2rem;
   --floe-space-1: 0.25rem;
   --floe-space-2: 0.5rem;
   --floe-space-3: 0.75rem;
@@ -16,3 +22,19 @@
   --floe-radius-group: 0.5rem;
   --floe-radius-floating: 12px;
 }
+
+/* Compact visual controls retain usable, non-overlapping touch geometry. */
+@media (pointer: coarse) {
+  [data-floe-control='button'],
+  [data-floe-control='input'],
+  [data-floe-control='compound-input'],
+  [data-floe-control='compound-input'] button,
+  button[data-floe-input-surface] {
+    min-height: 44px;
+  }
+  [data-floe-control='button'],
+  [data-floe-control='compound-input'] button { min-width: 44px; }
+  [data-floe-control='compound-input'] input { font-size: max(16px, 1rem); }
+  [data-floe-control='compound-input'] { height: auto; }
+  [data-floe-control='input'] { font-size: max(16px, 1rem); }
+}

package/dist/styles/tokens.d.ts

@@ -48,9 +48,15 @@ export declare const floeSharedCssVariables: {
     readonly '--font-sans': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
     readonly '--font-mono': "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
     readonly '--floe-type-caption': "0.6875rem";
+    readonly '--floe-type-supporting': "0.75rem";
     readonly '--floe-type-control': "0.8125rem";
     readonly '--floe-type-body': "0.875rem";
     readonly '--floe-type-heading': "1rem";
+    readonly '--floe-line-control': "1.25rem";
+    readonly '--floe-line-body': "1.375rem";
+    readonly '--floe-control-height-sm': "1.75rem";
+    readonly '--floe-control-height-md': "2rem";
+    readonly '--floe-row-height': "2rem";
     readonly '--floe-space-1': "0.25rem";
     readonly '--floe-space-2': "0.5rem";
     readonly '--floe-space-3': "0.75rem";
@@ -1258,9 +1264,15 @@ export declare const floeDesignTokens: {
         readonly '--font-sans': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
         readonly '--font-mono': "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
         readonly '--floe-type-caption': "0.6875rem";
+        readonly '--floe-type-supporting': "0.75rem";
         readonly '--floe-type-control': "0.8125rem";
         readonly '--floe-type-body': "0.875rem";
         readonly '--floe-type-heading': "1rem";
+        readonly '--floe-line-control': "1.25rem";
+        readonly '--floe-line-body': "1.375rem";
+        readonly '--floe-control-height-sm': "1.75rem";
+        readonly '--floe-control-height-md': "2rem";
+        readonly '--floe-row-height': "2rem";
         readonly '--floe-space-1': "0.25rem";
         readonly '--floe-space-2': "0.5rem";
         readonly '--floe-space-3': "0.75rem";

package/dist/styles/tokens.js

@@ -4,9 +4,15 @@ const i = {
   "--font-sans": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
   "--font-mono": "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace",
   "--floe-type-caption": "0.6875rem",
+  "--floe-type-supporting": "0.75rem",
   "--floe-type-control": "0.8125rem",
   "--floe-type-body": "0.875rem",
   "--floe-type-heading": "1rem",
+  "--floe-line-control": "1.25rem",
+  "--floe-line-body": "1.375rem",
+  "--floe-control-height-sm": "1.75rem",
+  "--floe-control-height-md": "2rem",
+  "--floe-row-height": "2rem",
   "--floe-space-1": "0.25rem",
   "--floe-space-2": "0.5rem",
   "--floe-space-3": "0.75rem",