@floegence/floe-webapp-core 0.90.4 → 0.90.6

package/dist/components/ui/Checkbox.js

@@ -2,7 +2,7 @@ import { createComponent as n, insert as a, effect as f, className as g, setAttr
 import { splitProps as P, createUniqueId as U, Switch as V, Match as j, Show as b, For as J, useContext as K, createEffect as Q, createContext as R } from "solid-js";
 import { useFormControl as T } from "./formFieldContext.js";
 import { cn as d } from "../../utils/cn.js";
-var W = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M2 6l3 3 5-6">'), X = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round><path d="M2 6h8">'), Y = /* @__PURE__ */ v("<div role=group>"), Z = /* @__PURE__ */ v("<div data-floe-surface=inset data-floe-surface-part=indicator>"), ee = /* @__PURE__ */ v("<input>"), $ = /* @__PURE__ */ v("<span>"), re = /* @__PURE__ */ v('<div class="flex flex-col">'), te = /* @__PURE__ */ v('<label><div class="relative flex items-center justify-center pt-0.5">'), ne = /* @__PURE__ */ v("<label data-floe-surface-part=choice><span class=font-medium>"), oe = /* @__PURE__ */ v('<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>'), le = /* @__PURE__ */ v('<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">'), ae = /* @__PURE__ */ v('<div class="absolute top-1.5 right-1.5"><div class="w-4 h-4 rounded-full bg-primary flex items-center justify-center">'), ie = /* @__PURE__ */ v("<label data-floe-surface-part=choice>"), se = /* @__PURE__ */ v("<div>");
+var W = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M2 6l3 3 5-6">'), X = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round><path d="M2 6h8">'), Y = /* @__PURE__ */ v("<div role=group>"), Z = /* @__PURE__ */ v("<div data-floe-surface=inset data-floe-surface-part=indicator data-floe-choice-kind=checkbox aria-hidden=true>"), ee = /* @__PURE__ */ v("<input>"), $ = /* @__PURE__ */ v("<span>"), re = /* @__PURE__ */ v('<div class="flex flex-col">'), te = /* @__PURE__ */ v('<label data-floe-checkbox-target><div class="relative flex items-center justify-center pt-0.5">'), ne = /* @__PURE__ */ v("<label data-floe-surface-part=choice><span class=font-medium>"), oe = /* @__PURE__ */ v('<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>'), le = /* @__PURE__ */ v('<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">'), ae = /* @__PURE__ */ v('<div class="absolute top-1.5 right-1.5"><div class="w-4 h-4 rounded-full bg-primary flex items-center justify-center">'), ie = /* @__PURE__ */ v("<label data-floe-surface-part=choice>"), se = /* @__PURE__ */ v("<div>");
 const E = R();
 function ce() {
   return K(E);
@@ -48,20 +48,20 @@ const C = {
     icon: "w-8 h-8"
   }
 };
-function O(x) {
+function O(p) {
   return (() => {
     var s = W();
-    return f(() => m(s, "class", x.class)), s;
+    return f(() => m(s, "class", p.class)), s;
   })();
 }
-function fe(x) {
+function fe(p) {
   return (() => {
     var s = X();
-    return f(() => m(s, "class", x.class)), s;
+    return f(() => m(s, "class", p.class)), s;
   })();
 }
-function ve(x) {
-  const [s, p] = P(x, ["value", "onChange", "size", "orientation", "variant", "disabled", "class", "children"]), e = () => s.variant ?? "default", M = {
+function ve(p) {
+  const [s, x] = P(p, ["value", "onChange", "size", "orientation", "variant", "disabled", "class", "children"]), e = () => s.variant ?? "default", M = {
     value: () => s.value ?? [],
     onChange: (h, y) => {
       const u = s.value ?? [], w = y ? [...u, h] : u.filter((k) => k !== h);
@@ -88,13 +88,13 @@ function ve(x) {
         get class() {
           return d(S(), s.class);
         }
-      }, p), !1, !0), a(h, () => s.children), h;
+      }, x), !1, !0), a(h, () => s.children), h;
     }
   });
 }
-function he(x) {
-  const s = T(), p = ce(), [e, M] = P(x, ["value", "checked", "onChange", "label", "description", "icon", "size", "variant", "indeterminate", "ref", "class", "disabled", "id"]), S = U(), h = () => e.id ?? (p ? S : s.id) ?? S, y = () => p !== void 0, u = () => e.size ?? p?.size() ?? "md", w = () => e.variant ?? p?.variant() ?? "default", k = () => e.disabled ?? (p?.disabled() || s.disabled || !1), c = () => y() && e.value ? p.value().includes(e.value) : e.checked ?? !1, H = () => {
-    k() || (y() && e.value ? p.onChange(e.value, !c()) : e.onChange?.(!c()));
+function he(p) {
+  const s = T(), x = ce(), [e, M] = P(p, ["value", "checked", "onChange", "label", "description", "icon", "size", "variant", "indeterminate", "ref", "class", "disabled", "id"]), S = U(), h = () => e.id ?? (x ? S : s.id) ?? S, y = () => x !== void 0, u = () => e.size ?? x?.size() ?? "md", w = () => e.variant ?? x?.variant() ?? "default", k = () => e.disabled ?? (x?.disabled() || s.disabled || !1), c = () => y() && e.value ? x.value().includes(e.value) : e.checked ?? !1, H = () => {
+    k() || (y() && e.value ? x.onChange(e.value, !c()) : e.onChange?.(!c()));
   }, q = () => (() => {
     var t = Z();
     return a(t, n(b, {
@@ -120,7 +120,7 @@ function he(x) {
         });
       }
     }), null), f((r) => {
-      var o = c() || e.indeterminate ? "true" : void 0, l = d("rounded-xs border-2 transition-[background-color,border-color,color,transform] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "flex items-center justify-center", C[u()].box, c() || e.indeterminate ? "border-primary bg-primary text-primary-foreground" : "border-[var(--floe-control-edge)] bg-transparent hover:border-[var(--floe-control-edge-hover)]", k() && "cursor-not-allowed");
+      var o = c() || e.indeterminate ? "true" : void 0, l = d("rounded-xs border transition-[background-color,border-color,color,transform] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "flex items-center justify-center", C[u()].box, c() || e.indeterminate ? "border-primary bg-primary text-primary-foreground" : "border-[var(--floe-control-edge)] bg-transparent hover:border-[var(--floe-control-edge-hover)]", k() && "cursor-not-allowed");
       return o !== r.e && m(t, "data-floe-selected", r.e = o), l !== r.t && g(t, r.t = l), r;
     }, {
       e: void 0,
@@ -153,7 +153,7 @@ function he(x) {
           return k();
         },
         onClick: (l) => {
-          (x.readOnly ?? s.readOnly) && l.preventDefault();
+          (p.readOnly ?? s.readOnly) && l.preventDefault();
         },
         onChange: H,
         get class() {
@@ -318,9 +318,9 @@ function he(x) {
     }
   });
 }
-function xe(x) {
-  const [s, p] = P(x, ["options"]);
-  return n(ve, B(p, {
+function pe(p) {
+  const [s, x] = P(p, ["options"]);
+  return n(ve, B(x, {
     get children() {
       return n(J, {
         get each() {
@@ -350,5 +350,5 @@ function xe(x) {
 export {
   he as Checkbox,
   ve as CheckboxGroup,
-  xe as CheckboxList
+  pe as CheckboxList
 };

package/dist/language.css

@@ -77,9 +77,10 @@
   --floe-field-edge-hover: color-mix(in srgb, var(--foreground) 32%, var(--card));
   --floe-field-placeholder: color-mix(in srgb, var(--foreground) 42%, var(--background));
   /* An unchecked box or switch has no fill of its own, so its boundary *is*
-  * the control and must clear 3:1 against every plane it can sit on. */
-  --floe-control-edge: color-mix(in srgb, var(--foreground) 50%, var(--card));
-  --floe-control-edge-hover: color-mix(in srgb, var(--foreground) 66%, var(--card));
+  * the control and must clear 3:1 against every plane it can sit on. The 66%
+  * default covers the built-in planes; low-ink palettes own stronger overrides. */
+  --floe-control-edge: color-mix(in srgb, var(--foreground) 66%, var(--card));
+  --floe-control-edge-hover: color-mix(in srgb, var(--foreground) 80%, var(--card));
 
   /* ---------------------------------------------------------------------
    * State — the only hover/press/selection values in the system. They are

package/dist/styles/themes/presets.js

@@ -643,6 +643,10 @@ const C = {
   }),
   o({
     name: "solarized-light",
+    semanticTokens: {
+      "--floe-control-edge": "color-mix(in srgb, #586E75 85%, #FFFDF4)",
+      "--floe-control-edge-hover": "#586E75"
+    },
     inlineCode: { foreground: "#135BA7", background: "#F2EFE0" },
     displayName: "Solarized Light",
     description: "Solarized warmth with measured cyan, green, and amber syntax.",
@@ -964,7 +968,7 @@ const C = {
     card: "#30312B",
     muted: "#3A3B34",
     mutedForeground: "#C5C8B5",
-    primary: "#F92672",
+    primary: "#FA2874",
     // Preserve the pink action fill while keeping its darker hover state readable.
     primaryForeground: "#050604",
     border: "#494A42",