@floegence/floe-webapp-core 0.77.3 → 0.78.1

package/dist/components/layout/index.d.ts

@@ -1,4 +1,5 @@
 export { Shell, type ShellProps, type ShellSlotClassNames } from './Shell';
+export type { MobileNavigationPanelProps } from './MobileNavigationPanel';
 export { ActivityBar, type ActivityBarItem, type ActivityBarProps } from './ActivityBar';
 export type { BarItemContextMenuHandler, BarItemContextMenuRequest, BarItemContextMenuSource, } from './barItemContextMenu';
 export { Sidebar, SidebarContent, SidebarItemList, SidebarSection, SidebarItem, type SidebarProps, type SidebarContentProps, type SidebarItemListProps, type SidebarSectionProps, type SidebarItemProps, } from './Sidebar';

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/hooks/useOverlayMask.d.ts

@@ -5,6 +5,8 @@ type MaybeAccessor<T> = T | Accessor<T>;
 export interface UseOverlayMaskOptions {
     open: Accessor<boolean>;
     root: Accessor<HTMLElement | undefined>;
+    /** Ordered focus regions that belong to one overlay, including persistent navigation. */
+    focusRoots?: Accessor<readonly HTMLElement[]>;
     onClose?: () => void;
     /** Treat additional nodes as part of the overlay surface (e.g. portaled layers). */
     containsTarget?: (target: EventTarget | null) => boolean;

package/dist/hooks/useOverlayMask.js

@@ -1,66 +1,66 @@
-import { createEffect as R, onCleanup as V } from "solid-js";
-import { lockBodyStyle as G } from "../utils/bodyStyleLock.js";
-import { deferAfterPaint as S } from "../utils/defer.js";
-import { getFocusableElements as J, getFirstFocusableElement as Q } from "../utils/focus.js";
-import { matchKeybind as U } from "../utils/keybind.js";
-const D = /* @__PURE__ */ new WeakMap();
-function K(t) {
+import { createEffect as Q, onCleanup as U } from "solid-js";
+import { lockBodyStyle as X } from "../utils/bodyStyleLock.js";
+import { deferAfterPaint as K } from "../utils/defer.js";
+import { getFocusableElements as x, getFirstFocusableElement as Y } from "../utils/focus.js";
+import { matchKeybind as Z } from "../utils/keybind.js";
+const H = /* @__PURE__ */ new WeakMap();
+function A(t) {
   return typeof Node < "u" && t instanceof Node;
 }
-function p(t, o, r) {
-  return r ? r(o) : !t || !K(o) ? !1 : t.contains(o);
+function p(t, o, c) {
+  return c ? c(o) : !t || !A(o) ? !1 : t.contains(o);
 }
-function H(t, o, r, a) {
-  return r === "none" ? !1 : r === "all" ? !0 : !p(t, o, a);
+function W(t, o, c, i) {
+  return c === "none" ? !1 : c === "all" ? !0 : !p(t, o, i);
 }
-function X(t) {
+function _(t) {
   return typeof t == "function" ? t() ?? [] : t ?? [];
 }
-function c(t, o) {
+function s(t, o) {
   return typeof t == "function" ? t() ?? o : t ?? o;
 }
-function Y(t, o) {
-  for (const r of X(o)) {
-    const a = r.trim();
-    if (a && U(t, a))
+function $(t, o) {
+  for (const c of _(o)) {
+    const i = c.trim();
+    if (i && Z(t, i))
       return !0;
   }
   return !1;
 }
-function oe(t) {
-  const o = () => c(t.lockBodyScroll, !0), r = () => c(t.trapFocus, !0), a = () => {
-    const l = c(
+function ue(t) {
+  const o = () => s(t.lockBodyScroll, !0), c = () => s(t.trapFocus, !0), i = () => {
+    const f = s(
       t.closeOnEscape,
       !0
     );
-    return l === !1 ? "none" : l === "inside" ? "inside" : l === "none" ? "none" : "always";
-  }, W = () => c(t.blockHotkeys, !0), A = () => c(t.restoreFocus, !0), x = () => c(t.blockWheel, "none"), I = () => c(t.blockTouchMove, "none"), N = () => c(t.autoFocus, !0);
-  R(() => {
+    return f === !1 ? "none" : f === "inside" ? "inside" : f === "none" ? "none" : "always";
+  }, I = () => s(t.blockHotkeys, !0), R = () => s(t.restoreFocus, !0), N = () => s(t.blockWheel, "none"), q = () => s(t.blockTouchMove, "none"), j = () => s(t.autoFocus, !0);
+  Q(() => {
     if (!t.open() || typeof document > "u") return;
-    const l = o(), b = r(), d = a(), m = c(t.escapeKeyPhase, "capture"), q = W(), j = A(), h = x(), k = I(), E = N(), i = D.get(document) ?? [];
-    D.set(document, i);
-    const v = {
-      global: l || d === "always",
+    const f = o(), w = c(), v = i(), h = s(t.escapeKeyPhase, "capture"), z = I(), V = R(), g = N(), k = q(), E = j(), d = H.get(document) ?? [];
+    H.set(document, d);
+    const y = {
+      global: f || v === "always",
       contains: (e) => p(t.root(), e, t.containsTarget)
     };
-    i.push(v);
-    let w = !0;
-    const u = (e) => w && !i.slice(i.indexOf(v) + 1).some((n) => n.global || n.contains(e)), g = document.activeElement instanceof HTMLElement ? document.activeElement : null, z = l ? G({ overflow: "hidden" }) : null;
-    S(() => {
+    d.push(y);
+    let T = !0;
+    const l = (e) => T && !d.slice(d.indexOf(y) + 1).some((n) => n.global || n.contains(e)), b = document.activeElement instanceof HTMLElement ? document.activeElement : null, G = f ? X({ overflow: "hidden" }) : null;
+    K(() => {
       const e = t.root();
-      if (!e?.isConnected || !u(e) || E === !1 || v.contains(document.activeElement)) return;
-      const n = typeof E == "object" ? E.selector : void 0, y = (n ? e.querySelector(n) : null) ?? e.querySelector("[data-floe-autofocus]") ?? Q(e) ?? e;
+      if (!e?.isConnected || !l(e) || E === !1 || y.contains(document.activeElement)) return;
+      const n = typeof E == "object" ? E.selector : void 0, r = (n ? e.querySelector(n) : null) ?? e.querySelector("[data-floe-autofocus]") ?? Y(e) ?? e;
       try {
-        y.focus({ preventScroll: !0 });
+        r.focus({ preventScroll: !0 });
       } catch {
       }
     });
-    const T = (e) => {
-      if (e.key !== "Tab" || !u(e.target)) return;
+    const L = (e) => {
+      if (e.key !== "Tab" || !l(e.target)) return;
       const n = t.root();
       if (!n) return;
-      const s = J(n);
-      if (!s.length) {
+      const m = t.focusRoots?.() ?? [n], r = t.focusRoots ? [...new Set(m.flatMap(x))].filter((u) => u.tabIndex >= 0 && !u.closest('[hidden], [inert], [aria-hidden="true"]')) : x(n);
+      if (!r.length) {
         e.preventDefault();
         try {
           n.focus();
@@ -68,31 +68,36 @@ function oe(t) {
         }
         return;
       }
-      const y = s[0], P = s[s.length - 1], f = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      const D = r[0], P = r[r.length - 1], a = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      if (t.focusRoots) {
+        const u = a ? r.indexOf(a) : -1, J = u < 0 ? e.shiftKey ? r.length - 1 : 0 : (u + (e.shiftKey ? -1 : 1) + r.length) % r.length;
+        e.preventDefault(), r[J]?.focus({ preventScroll: !0 });
+        return;
+      }
       if (e.shiftKey) {
-        if (f === y || !f || !n.contains(f)) {
+        if (a === D || !a || !m.some((u) => u.contains(a))) {
           e.preventDefault();
           try {
             P.focus();
           } catch {
           }
         }
-      } else if (f === P || !f || !n.contains(f)) {
+      } else if (a === P || !a || !m.some((u) => u.contains(a))) {
         e.preventDefault();
         try {
-          y.focus();
+          D.focus();
         } catch {
         }
       }
-    }, L = (e) => {
-      if (e.key !== "Escape" || !u(e.target) || m === "bubble" && (e.defaultPrevented || e.isComposing) || d === "none") return;
-      const n = t.root(), s = p(
+    }, M = (e) => {
+      if (e.key !== "Escape" || !l(e.target) || h === "bubble" && (e.defaultPrevented || e.isComposing) || v === "none") return;
+      const n = t.root(), m = p(
         n,
-        K(e.target) ? e.target : document.activeElement,
+        A(e.target) ? e.target : document.activeElement,
         t.containsTarget
       );
-      if (d === "inside") {
-        if (s) {
+      if (v === "inside") {
+        if (m) {
           e.preventDefault(), e.stopImmediatePropagation(), t.onClose?.();
           return;
         }
@@ -100,41 +105,41 @@ function oe(t) {
         return;
       }
       e.preventDefault(), e.stopImmediatePropagation(), t.onClose?.();
-    }, M = (e) => {
-      if (!u(e.target)) return;
-      const n = t.root();
-      n && q && p(n, e.target, t.containsTarget) && (Y(e, t.allowHotkeys) || e.stopPropagation());
     }, O = (e) => {
-      if (!u(e.target)) return;
+      if (!l(e.target)) return;
       const n = t.root();
-      H(n, e.target, h, t.containsTarget) && e.cancelable && e.preventDefault();
+      n && z && p(n, e.target, t.containsTarget) && ($(e, t.allowHotkeys) || e.stopPropagation());
     }, B = (e) => {
-      u(e.target) && e.stopPropagation();
+      if (!l(e.target)) return;
+      const n = t.root();
+      W(n, e.target, g, t.containsTarget) && e.cancelable && e.preventDefault();
     }, F = (e) => {
-      if (!u(e.target)) return;
+      l(e.target) && e.stopPropagation();
+    }, S = (e) => {
+      if (!l(e.target)) return;
       const n = t.root();
-      H(n, e.target, k, t.containsTarget) && e.cancelable && e.preventDefault();
+      W(n, e.target, k, t.containsTarget) && e.cancelable && e.preventDefault();
     };
-    b && document.addEventListener("keydown", T, !0);
-    const C = m === "capture" ? window : document;
-    d !== "none" && C.addEventListener(
+    w && document.addEventListener("keydown", L, !0);
+    const C = h === "capture" ? window : document;
+    v !== "none" && C.addEventListener(
       "keydown",
-      L,
-      m === "capture"
-    ), document.addEventListener("keydown", M), h !== "none" && (document.addEventListener("wheel", O, { capture: !0, passive: !1 }), document.addEventListener("wheel", B)), k !== "none" && document.addEventListener("touchmove", F, {
+      M,
+      h === "capture"
+    ), document.addEventListener("keydown", O), g !== "none" && (document.addEventListener("wheel", B, { capture: !0, passive: !1 }), document.addEventListener("wheel", F)), k !== "none" && document.addEventListener("touchmove", S, {
       capture: !0,
       passive: !1
-    }), V(() => {
-      w = !1, i.splice(i.indexOf(v), 1), b && document.removeEventListener("keydown", T, !0), d !== "none" && C.removeEventListener(
+    }), U(() => {
+      T = !1, d.splice(d.indexOf(y), 1), w && document.removeEventListener("keydown", L, !0), v !== "none" && C.removeEventListener(
         "keydown",
-        L,
-        m === "capture"
-      ), document.removeEventListener("keydown", M), h !== "none" && (document.removeEventListener("wheel", O, !0), document.removeEventListener("wheel", B)), k !== "none" && document.removeEventListener("touchmove", F, !0), z?.(), j && g && g.isConnected && S(() => {
+        M,
+        h === "capture"
+      ), document.removeEventListener("keydown", O), g !== "none" && (document.removeEventListener("wheel", B, !0), document.removeEventListener("wheel", F)), k !== "none" && document.removeEventListener("touchmove", S, !0), G?.(), V && b && b.isConnected && K(() => {
         if (typeof document > "u") return;
         const e = document.activeElement;
         if (!(e && e !== document.body && e !== document.documentElement))
           try {
-            g.focus({ preventScroll: !0 });
+            b.focus({ preventScroll: !0 });
           } catch {
           }
       });
@@ -142,5 +147,5 @@ function oe(t) {
   });
 }
 export {
-  oe as useOverlayMask
+  ue as useOverlayMask
 };

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",