@floegence/floe-webapp-core 0.86.58 → 0.86.62

package/dist/components/ui/Radio.js

@@ -1,10 +1,10 @@
-import { createComponent as l, spread as G, mergeProps as I, insert as a, effect as f, className as v, setAttribute as p, template as b } from "solid-js/web";
-import { splitProps as j, createUniqueId as M, For as A, Switch as B, Match as R, Show as x, createContext as D, useContext as F } from "solid-js";
+import { createComponent as a, spread as E, mergeProps as I, insert as l, effect as g, className as f, setAttribute as m, template as h } from "solid-js/web";
+import { splitProps as j, createUniqueId as G, For as A, Switch as B, Match as S, Show as x, createContext as D, useContext as F } from "solid-js";
 import { cn as c } from "../../utils/cn.js";
-var H = /* @__PURE__ */ b("<div role=radiogroup>"), U = /* @__PURE__ */ b("<input data-floe-choice-input type=radio>"), V = /* @__PURE__ */ b("<div data-floe-surface=inset data-floe-surface-part=indicator><div data-floe-surface=flat data-floe-surface-part=radio-dot>"), $ = /* @__PURE__ */ b("<span>"), J = /* @__PURE__ */ b('<div class="flex flex-col">'), K = /* @__PURE__ */ b('<label><div class="relative flex items-center justify-center pt-0.5">'), Q = /* @__PURE__ */ b("<label data-floe-surface-part=choice><span class=font-medium>"), T = /* @__PURE__ */ b('<div class="absolute top-2 right-2"><svg class="w-4 h-4 text-primary"fill=currentColor viewBox="0 0 20 20"><path fill-rule=evenodd d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"clip-rule=evenodd>'), W = /* @__PURE__ */ b('<label data-floe-surface-part=choice><div class="flex items-start gap-3"><div class="flex items-center justify-center pt-0.5"></div><div class="flex flex-col flex-1 min-w-0">'), X = /* @__PURE__ */ b('<div class="absolute top-1.5 right-1.5"><div class="w-2 h-2 rounded-full bg-primary">'), Y = /* @__PURE__ */ b("<label data-floe-surface-part=choice>"), Z = /* @__PURE__ */ b("<div>");
-const O = D();
+var H = /* @__PURE__ */ h("<div role=radiogroup>"), U = /* @__PURE__ */ h("<input data-floe-choice-input type=radio>"), V = /* @__PURE__ */ h("<div data-floe-surface=inset data-floe-surface-part=indicator><div data-floe-surface=flat data-floe-surface-part=radio-dot>"), $ = /* @__PURE__ */ h("<span>"), J = /* @__PURE__ */ h('<div class="flex flex-col">'), K = /* @__PURE__ */ h('<label><div class="relative flex items-center justify-center pt-0.5">'), Q = /* @__PURE__ */ h("<label data-floe-surface-part=choice><span class=font-medium>"), T = /* @__PURE__ */ h('<div class="absolute top-2 right-2"><svg class="w-4 h-4 text-[var(--floe-accent-ink)]"fill=currentColor viewBox="0 0 20 20"><path fill-rule=evenodd d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"clip-rule=evenodd>'), W = /* @__PURE__ */ h('<label data-floe-surface-part=choice><div class="flex items-start gap-3"><div class="flex items-center justify-center pt-0.5"></div><div class="flex flex-col flex-1 min-w-0">'), X = /* @__PURE__ */ h('<div class="absolute top-1.5 right-1.5"><div class="w-2 h-2 rounded-full bg-primary">'), Y = /* @__PURE__ */ h("<label data-floe-surface-part=choice>"), Z = /* @__PURE__ */ h("<div>");
+const M = D();
 function ee() {
-  const y = F(O);
+  const y = F(M);
   if (!y)
     throw new Error("RadioOption must be used within a RadioGroup");
   return y;
@@ -14,13 +14,13 @@ const C = {
     outer: "w-3.5 h-3.5",
     inner: "w-1.5 h-1.5",
     label: "text-xs",
-    description: "text-[10px]"
+    description: "text-caption"
   },
   md: {
     outer: "w-4 h-4",
     inner: "w-2 h-2",
-    label: "text-xs",
-    description: "text-[11px]"
+    label: "text-sm",
+    description: "text-caption"
   },
   lg: {
     outer: "w-5 h-5",
@@ -36,7 +36,7 @@ const C = {
   sm: "p-2.5",
   md: "p-3",
   lg: "p-4"
-}, E = {
+}, q = {
   sm: {
     container: "p-3 min-w-[80px]",
     icon: "w-5 h-5"
@@ -50,23 +50,23 @@ const C = {
     icon: "w-8 h-8"
   }
 };
-function ne(y) {
-  const [s, t] = j(y, ["value", "onChange", "size", "orientation", "variant", "disabled", "name", "class", "children"]), w = M(), k = () => s.name ?? w, _ = () => s.variant ?? "default", g = {
-    value: () => s.value,
-    onChange: (u) => s.onChange?.(u),
-    size: () => s.size ?? "md",
+function oe(y) {
+  const [d, t] = j(y, ["value", "onChange", "size", "orientation", "variant", "disabled", "name", "class", "children"]), w = G(), R = () => d.name ?? w, _ = () => d.variant ?? "default", v = {
+    value: () => d.value,
+    onChange: (u) => d.onChange?.(u),
+    size: () => d.size ?? "md",
     variant: _,
-    disabled: () => s.disabled ?? !1,
-    name: k
-  }, h = () => {
-    const u = _(), d = s.orientation === "horizontal";
-    return u === "button" ? c("inline-flex rounded-md border border-border overflow-hidden", d ? "flex-row" : "flex-col") : u === "card" || u === "tile" ? c("grid gap-2", d ? "grid-flow-col auto-cols-fr" : "grid-cols-1") : c("flex", d ? "flex-row flex-wrap gap-4" : "flex-col gap-2");
+    disabled: () => d.disabled ?? !1,
+    name: R
+  }, p = () => {
+    const u = _(), s = d.orientation === "horizontal";
+    return u === "button" ? c("inline-flex rounded-group border border-[var(--floe-line)] overflow-hidden", s ? "flex-row" : "flex-col") : u === "card" || u === "tile" ? c("grid gap-2", s ? "grid-flow-col auto-cols-fr" : "grid-cols-1") : c("flex", s ? "flex-row flex-wrap gap-4" : "flex-col gap-2");
   };
-  return l(O.Provider, {
-    value: g,
+  return a(M.Provider, {
+    value: v,
     get children() {
       var u = H();
-      return G(u, I({
+      return E(u, I({
         get "data-floe-surface"() {
           return _() === "button" ? "inset" : void 0;
         },
@@ -74,29 +74,29 @@ function ne(y) {
           return _() === "button" ? "rail" : void 0;
         },
         get class() {
-          return c(h(), s.class);
+          return c(p(), d.class);
         }
-      }, t), !1, !0), a(u, () => s.children), u;
+      }, t), !1, !0), l(u, () => d.children), u;
     }
   });
 }
-function oe(y) {
-  const s = ee(), [t, w] = j(y, ["value", "label", "description", "icon", "size", "class", "disabled", "id"]), k = M(), _ = () => t.id ?? k, g = () => t.size ?? s.size(), h = () => s.variant(), u = () => t.disabled ?? s.disabled(), d = () => s.value() === t.value, q = () => {
-    u() || s.onChange(t.value);
-  }, S = (e) => (() => {
+function ne(y) {
+  const d = ee(), [t, w] = j(y, ["value", "label", "description", "icon", "size", "class", "disabled", "id"]), R = G(), _ = () => t.id ?? R, v = () => t.size ?? d.size(), p = () => d.variant(), u = () => t.disabled ?? d.disabled(), s = () => d.value() === t.value, O = () => {
+    u() || d.onChange(t.value);
+  }, k = (e) => (() => {
     var r = U();
-    return r.addEventListener("change", q), G(r, I({
+    return r.addEventListener("change", O), E(r, I({
       get id() {
         return _();
       },
       get name() {
-        return s.name();
+        return d.name();
       },
       get value() {
         return t.value;
       },
       get checked() {
-        return d();
+        return s();
       },
       get disabled() {
         return u();
@@ -107,60 +107,60 @@ function oe(y) {
     }, w), !1, !1), r;
   })(), L = () => (() => {
     var e = V(), r = e.firstChild;
-    return f((n) => {
-      var i = d() ? "true" : void 0, o = c("rounded-full border-2 transition-colors duration-150", "flex items-center justify-center", C[g()].outer, d() ? "border-primary bg-primary" : c("border-input bg-background", h() === "default" && "hover:border-primary/50"), u() && "cursor-not-allowed", "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"), m = c("rounded-full bg-primary-foreground transition-transform duration-150", C[g()].inner, d() ? "scale-100" : "scale-0");
-      return i !== n.e && p(e, "data-floe-selected", n.e = i), o !== n.t && v(e, n.t = o), m !== n.a && v(r, n.a = m), n;
+    return g((o) => {
+      var i = s() ? "true" : void 0, n = c("rounded-full border-2 transition-colors duration-[var(--floe-duration-fast)]", "flex items-center justify-center", C[v()].outer, s() ? "border-primary bg-primary" : c("border-[var(--floe-control-edge)] bg-transparent", p() === "default" && "hover:border-[var(--floe-control-edge-hover)]"), u() && "cursor-not-allowed", "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"), b = c("rounded-full bg-primary-foreground transition-transform duration-[var(--floe-duration-fast)]", C[v()].inner, s() ? "scale-100" : "scale-0");
+      return i !== o.e && m(e, "data-floe-selected", o.e = i), n !== o.t && f(e, o.t = n), b !== o.a && f(r, o.a = b), o;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     }), e;
   })();
-  return l(B, {
+  return a(B, {
     get children() {
-      return [l(R, {
+      return [a(S, {
         get when() {
-          return h() === "default";
+          return p() === "default";
         },
         get children() {
           var e = K(), r = e.firstChild;
-          return a(r, l(S, {}), null), a(r, l(L, {}), null), a(e, l(x, {
+          return l(r, a(k, {}), null), l(r, a(L, {}), null), l(e, a(x, {
             get when() {
               return t.label || t.description;
             },
             get children() {
-              var n = J();
-              return a(n, l(x, {
+              var o = J();
+              return l(o, a(x, {
                 get when() {
                   return t.label;
                 },
                 get children() {
                   var i = $();
-                  return a(i, () => t.label), f(() => v(i, c("text-foreground", C[g()].label))), i;
+                  return l(i, () => t.label), g(() => f(i, c("text-foreground", C[v()].label))), i;
                 }
-              }), null), a(n, l(x, {
+              }), null), l(o, a(x, {
                 get when() {
                   return t.description;
                 },
                 get children() {
                   var i = $();
-                  return a(i, () => t.description), f(() => v(i, c("text-muted-foreground", C[g()].description))), i;
+                  return l(i, () => t.description), g(() => f(i, c("text-[var(--floe-ink-soft)]", C[v()].description))), i;
                 }
-              }), null), n;
+              }), null), o;
             }
-          }), null), f(() => v(e, c("inline-flex items-start gap-2 cursor-pointer select-none", u() && "opacity-50 cursor-not-allowed", t.class))), e;
+          }), null), g(() => f(e, c("inline-flex items-start gap-2 cursor-pointer select-none", u() && "opacity-50 cursor-not-allowed", t.class))), e;
         }
-      }), l(R, {
+      }), a(S, {
         get when() {
-          return h() === "button";
+          return p() === "button";
         },
         get children() {
           var e = Q(), r = e.firstChild;
-          return a(e, l(S, {
+          return l(e, a(k, {
             class: "sr-only"
-          }), r), a(r, () => t.label), f((n) => {
-            var i = d() ? "inset" : "raised", o = d() ? "true" : void 0, m = h(), z = c("cursor-pointer select-none transition-colors duration-150", "border-r border-border last:border-r-0", re[g()], d() ? "bg-primary text-primary-foreground" : "bg-background text-foreground hover:bg-muted", u() && "opacity-50 cursor-not-allowed", t.class);
-            return i !== n.e && p(e, "data-floe-surface", n.e = i), o !== n.t && p(e, "data-floe-selected", n.t = o), m !== n.a && p(e, "data-floe-choice-variant", n.a = m), z !== n.o && v(e, n.o = z), n;
+          }), r), l(r, () => t.label), g((o) => {
+            var i = s() ? "inset" : "raised", n = s() ? "true" : void 0, b = p(), z = c("cursor-pointer select-none transition-colors duration-[var(--floe-duration-fast)]", "border-r border-[var(--floe-line)] last:border-r-0", re[v()], s() ? "bg-[var(--primary)] text-[var(--primary-foreground)] border-[var(--primary)]" : "bg-transparent text-[var(--floe-ink-soft)] hover:bg-[var(--floe-state-hover)] hover:text-[var(--floe-ink)]", u() && "opacity-50 cursor-not-allowed", t.class);
+            return i !== o.e && m(e, "data-floe-surface", o.e = i), n !== o.t && m(e, "data-floe-selected", o.t = n), b !== o.a && m(e, "data-floe-choice-variant", o.a = b), z !== o.o && f(e, o.o = z), o;
           }, {
             e: void 0,
             t: void 0,
@@ -168,38 +168,38 @@ function oe(y) {
             o: void 0
           }), e;
         }
-      }), l(R, {
+      }), a(S, {
         get when() {
-          return h() === "card";
+          return p() === "card";
         },
         get children() {
-          var e = W(), r = e.firstChild, n = r.firstChild, i = n.nextSibling;
-          return a(e, l(S, {}), r), a(n, l(L, {})), a(i, l(x, {
+          var e = W(), r = e.firstChild, o = r.firstChild, i = o.nextSibling;
+          return l(e, a(k, {}), r), l(o, a(L, {})), l(i, a(x, {
             get when() {
               return t.label;
             },
             get children() {
-              var o = $();
-              return a(o, () => t.label), f(() => v(o, c("font-medium text-foreground", C[g()].label))), o;
+              var n = $();
+              return l(n, () => t.label), g(() => f(n, c("font-medium text-foreground", C[v()].label))), n;
             }
-          }), null), a(i, l(x, {
+          }), null), l(i, a(x, {
             get when() {
               return t.description;
             },
             get children() {
-              var o = $();
-              return a(o, () => t.description), f(() => v(o, c("text-muted-foreground mt-0.5", C[g()].description))), o;
+              var n = $();
+              return l(n, () => t.description), g(() => f(n, c("text-[var(--floe-ink-soft)] mt-0.5", C[v()].description))), n;
             }
-          }), null), a(e, l(x, {
+          }), null), l(e, a(x, {
             get when() {
-              return d();
+              return s();
             },
             get children() {
               return T();
             }
-          }), null), f((o) => {
-            var m = d() ? "inset" : "raised", z = d() ? "true" : void 0, N = h(), P = c("relative cursor-pointer select-none rounded-lg border-2 transition-[background-color,border-color,color] duration-120", te[g()], d() ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50", u() && "opacity-50 cursor-not-allowed", t.class);
-            return m !== o.e && p(e, "data-floe-surface", o.e = m), z !== o.t && p(e, "data-floe-selected", o.t = z), N !== o.a && p(e, "data-floe-choice-variant", o.a = N), P !== o.o && v(e, o.o = P), o;
+          }), null), g((n) => {
+            var b = s() ? "inset" : "raised", z = s() ? "true" : void 0, N = p(), P = c("relative cursor-pointer select-none rounded-group border transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", te[v()], s() ? "border-[var(--floe-accent-line)] bg-[var(--floe-state-selected)]" : "border-[var(--floe-line)] bg-transparent hover:border-[var(--floe-line-strong)] hover:bg-[var(--floe-state-hover)]", u() && "opacity-50 cursor-not-allowed", t.class);
+            return b !== n.e && m(e, "data-floe-surface", n.e = b), z !== n.t && m(e, "data-floe-selected", n.t = z), N !== n.a && m(e, "data-floe-choice-variant", n.a = N), P !== n.o && f(e, n.o = P), n;
           }, {
             e: void 0,
             t: void 0,
@@ -207,55 +207,55 @@ function oe(y) {
             o: void 0
           }), e;
         }
-      }), l(R, {
+      }), a(S, {
         get when() {
-          return h() === "tile";
+          return p() === "tile";
         },
         get children() {
           var e = Y();
-          return a(e, l(S, {
+          return l(e, a(k, {
             class: "sr-only"
-          }), null), a(e, l(x, {
+          }), null), l(e, a(x, {
             get when() {
               return t.icon;
             },
             children: (r) => {
-              const n = r();
+              const o = r();
               return (() => {
                 var i = Z();
-                return a(i, l(n, {
+                return l(i, a(o, {
                   get class() {
-                    return E[g()].icon;
+                    return q[v()].icon;
                   }
-                })), f(() => v(i, c("mb-2 transition-colors duration-150", d() ? "text-primary" : "text-muted-foreground"))), i;
+                })), g(() => f(i, c("mb-2 transition-colors duration-[var(--floe-duration-fast)]", s() ? "text-[var(--floe-accent-ink)]" : "text-[var(--floe-ink-quiet)]"))), i;
               })();
             }
-          }), null), a(e, l(x, {
+          }), null), l(e, a(x, {
             get when() {
               return t.label;
             },
             get children() {
               var r = $();
-              return a(r, () => t.label), f(() => v(r, c("font-medium transition-colors duration-150", C[g()].label, d() ? "text-primary" : "text-foreground"))), r;
+              return l(r, () => t.label), g(() => f(r, c("font-medium transition-colors duration-[var(--floe-duration-fast)]", C[v()].label, s() ? "text-[var(--floe-ink)]" : "text-[var(--floe-ink-soft)]"))), r;
             }
-          }), null), a(e, l(x, {
+          }), null), l(e, a(x, {
             get when() {
               return t.description;
             },
             get children() {
               var r = $();
-              return a(r, () => t.description), f(() => v(r, c("text-muted-foreground mt-0.5", C[g()].description))), r;
+              return l(r, () => t.description), g(() => f(r, c("text-[var(--floe-ink-soft)] mt-0.5", C[v()].description))), r;
             }
-          }), null), a(e, l(x, {
+          }), null), l(e, a(x, {
             get when() {
-              return d();
+              return s();
             },
             get children() {
               return X();
             }
-          }), null), f((r) => {
-            var n = d() ? "inset" : "raised", i = d() ? "true" : void 0, o = h(), m = c("relative flex flex-col items-center justify-center cursor-pointer select-none", "rounded-lg border-2 transition-[background-color,border-color,color] duration-120 text-center", E[g()].container, d() ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50", u() && "opacity-50 cursor-not-allowed", t.class);
-            return n !== r.e && p(e, "data-floe-surface", r.e = n), i !== r.t && p(e, "data-floe-selected", r.t = i), o !== r.a && p(e, "data-floe-choice-variant", r.a = o), m !== r.o && v(e, r.o = m), r;
+          }), null), g((r) => {
+            var o = s() ? "inset" : "raised", i = s() ? "true" : void 0, n = p(), b = c("relative flex flex-col items-center justify-center cursor-pointer select-none", "rounded-control border transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)] text-center", q[v()].container, s() ? "border-[var(--floe-accent-line)] bg-[var(--floe-state-selected)]" : "border-[var(--floe-line)] bg-transparent hover:border-[var(--floe-line-strong)] hover:bg-[var(--floe-state-hover)]", u() && "opacity-50 cursor-not-allowed", t.class);
+            return o !== r.e && m(e, "data-floe-surface", r.e = o), i !== r.t && m(e, "data-floe-selected", r.t = i), n !== r.a && m(e, "data-floe-choice-variant", r.a = n), b !== r.o && f(e, r.o = b), r;
           }, {
             e: void 0,
             t: void 0,
@@ -267,15 +267,15 @@ function oe(y) {
     }
   });
 }
-function de(y) {
-  const [s, t] = j(y, ["options"]);
-  return l(ne, I(t, {
+function se(y) {
+  const [d, t] = j(y, ["options"]);
+  return a(oe, I(t, {
     get children() {
-      return l(A, {
+      return a(A, {
         get each() {
-          return s.options;
+          return d.options;
         },
-        children: (w) => l(oe, {
+        children: (w) => a(ne, {
           get value() {
             return w.value;
           },
@@ -297,7 +297,7 @@ function de(y) {
   }));
 }
 export {
-  ne as RadioGroup,
-  de as RadioList,
-  oe as RadioOption
+  oe as RadioGroup,
+  se as RadioList,
+  ne as RadioOption
 };

package/dist/components/ui/SegmentedControl.js

@@ -1,58 +1,58 @@
-import { spread as _, mergeProps as k, insert as a, createComponent as v, memo as w, effect as z, setAttribute as b, className as $, template as p, delegateEvents as S } from "solid-js/web";
+import { spread as C, mergeProps as w, insert as i, createComponent as g, memo as z, effect as _, setAttribute as m, className as $, template as p, delegateEvents as S } from "solid-js/web";
 import { splitProps as P, For as A } from "solid-js";
-import { cn as g } from "../../utils/cn.js";
-var D = /* @__PURE__ */ p("<div role=group data-floe-surface=inset data-floe-surface-part=rail>"), E = /* @__PURE__ */ p('<button type=button role=radio data-floe-surface-part=segment><span class="inline-flex items-center gap-1.5">');
+import { cn as b } from "../../utils/cn.js";
+var D = /* @__PURE__ */ p("<div role=group data-floe-surface=inset data-floe-surface-part=rail>"), E = /* @__PURE__ */ p('<button type=button role=radio data-floe-surface-part=segment data-floe-interactive=item><span class="inline-flex items-center gap-1.5">');
 const F = {
   sm: {
     container: "p-0.5 gap-0.5",
-    button: "px-2 py-1 text-[11px]",
+    button: "h-[var(--floe-control-height-xs)] px-[var(--floe-control-padding-sm)] rounded-sm",
     icon: "w-3 h-3"
   },
   md: {
     container: "p-0.5 gap-0.5",
-    button: "px-3 py-1.5 text-xs",
+    button: "h-[var(--floe-control-height-sm)] px-[var(--floe-control-padding-md)] rounded-sm",
     icon: "w-3.5 h-3.5"
   },
   lg: {
-    container: "p-1 gap-1",
-    button: "px-4 py-2 text-sm",
+    container: "p-1 gap-0.5",
+    button: "h-[var(--floe-control-height-md)] px-[var(--floe-control-padding-lg)] rounded-md",
     icon: "w-4 h-4"
   }
 };
-function B(x) {
-  const [t, h] = P(x, ["value", "onChange", "options", "size", "disabled", "class"]), y = () => t.size ?? "md", s = () => F[y()], C = (n, r) => {
-    t.disabled || r || n !== t.value && t.onChange(n);
+function B(h) {
+  const [o, x] = P(h, ["value", "onChange", "options", "size", "disabled", "class"]), y = () => o.size ?? "md", a = () => F[y()], k = (n, r) => {
+    o.disabled || r || n !== o.value && o.onChange(n);
   };
   return (() => {
     var n = D();
-    return _(n, k({
+    return C(n, w({
       get class() {
-        return g("floe-segmented-control inline-flex items-center rounded-lg border", s().container, t.disabled && "opacity-50 pointer-events-none", t.class);
+        return b("floe-segmented-control inline-flex items-center border", "rounded-group", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", a().container, o.disabled && "opacity-50 pointer-events-none", o.class);
       }
-    }, h), !1, !0), a(n, v(A, {
+    }, x), !1, !0), i(n, g(A, {
       get each() {
-        return t.options;
+        return o.options;
       },
       children: (r) => {
-        const l = () => t.value === r.value, i = () => t.disabled || r.disabled;
+        const l = () => o.value === r.value, s = () => o.disabled || r.disabled;
         return (() => {
-          var o = E(), c = o.firstChild;
-          return o.$$click = () => C(r.value, r.disabled), a(c, (() => {
-            var e = w(() => !!r.icon);
-            return () => e() && v(r.icon, {
+          var t = E(), c = t.firstChild;
+          return t.$$click = () => k(r.value, r.disabled), i(c, (() => {
+            var e = z(() => !!r.icon);
+            return () => e() && g(r.icon, {
               get class() {
-                return s().icon;
+                return a().icon;
               }
             });
-          })(), null), a(c, () => r.label, null), z((e) => {
-            var d = l() ? "raised" : "flat", u = l(), f = i(), m = g("floe-segmented-control__item font-medium rounded-md transition-[background-color,border-color,color] duration-120 cursor-pointer", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", s().button, "border", l() && "floe-segmented-control__item--active", i() && "cursor-not-allowed opacity-50");
-            return d !== e.e && b(o, "data-floe-surface", e.e = d), u !== e.t && b(o, "aria-checked", e.t = u), f !== e.a && (o.disabled = e.a = f), m !== e.o && $(o, e.o = m), e;
+          })(), null), i(c, () => r.label, null), _((e) => {
+            var d = l() ? "raised" : "flat", f = l(), u = s(), v = b("floe-segmented-control__item font-medium cursor-pointer border", "transition-[background-color,border-color,color,box-shadow] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", a().button, l() ? "text-[var(--primary-foreground)]" : "text-[var(--floe-ink-soft)] hover:text-foreground", s() && "cursor-not-allowed opacity-50");
+            return d !== e.e && m(t, "data-floe-surface", e.e = d), f !== e.t && m(t, "aria-checked", e.t = f), u !== e.a && (t.disabled = e.a = u), v !== e.o && $(t, e.o = v), e;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
             o: void 0
-          }), o;
+          }), t;
         })();
       }
     })), n;