@a4ui/core 0.24.0 → 0.24.2

package/README.md

@@ -206,6 +206,16 @@ import { ProductCard, CartSummary } from '@a4ui/core/commerce'
 import { DonutChart, Sparkline } from '@a4ui/core/charts'
 ```
 
+## Example pages
+
+Full-page templates built entirely with the components above — browse the whole
+gallery at **[a4ui.pages.dev/#/examples](https://a4ui.pages.dev/#/examples)**. Each
+one reskins under every theme.
+
+[![Boutique — a faceted product catalog with a filter sidebar, three switchable product-card styles, and a cart drawer](https://a4ui.pages.dev/showcase-boutique.png)](https://a4ui.pages.dev/#/examples/boutique)
+
+[![Showpiece — a product detail page with a gallery lightbox, price/coupon/financing block, a condition meter, and a spec sheet](https://a4ui.pages.dev/showcase-showpiece.png)](https://a4ui.pages.dev/#/examples/showpiece)
+
 ## Why A4ui
 
 |                         | **A4ui**                                           | Kobalte                | shadcn-solid                      | Hope UI                |

package/dist/{NumberInput-enx_0iVh.js → NumberInput-DcJlXNKq.js}

@@ -447,6 +447,9 @@ function He(e) {
         "aria-label": "Decrement",
         children: "−"
       }), h(_.Input, {
+        get "aria-label"() {
+          return e["aria-label"];
+        },
         class: "w-16 border-y border-input bg-background px-3 py-2 text-center text-sm text-foreground outline-none transition-colors a4-field"
       }), h(_.IncrementTrigger, {
         get class() {

package/dist/commerce.js

@@ -1,7 +1,7 @@
-import { insert as n, createComponent as c, memo as k, effect as b, className as C, template as v, delegateEvents as A, setAttribute as w, setStyleProperty as j } from "solid-js/web";
-import { Show as $, For as S, createSignal as B, createMemo as R } from "solid-js";
+import { insert as n, createComponent as c, memo as k, effect as $, className as C, template as v, delegateEvents as A, setAttribute as w, setStyleProperty as j } from "solid-js/web";
+import { Show as b, For as S, createSignal as B, createMemo as R } from "solid-js";
 import { c as _ } from "./cn-B6yFEsav.js";
-import { B as D, C as O, R as G, a as M, b as z, N as U, c as K } from "./NumberInput-enx_0iVh.js";
+import { B as D, C as O, R as G, a as M, b as z, N as U, c as K } from "./NumberInput-DcJlXNKq.js";
 import { Minus as Q, Plus as V, Trash2 as X, X as Z, CreditCard as H } from "lucide-solid";
 var J = /* @__PURE__ */ v('<span class="text-muted-foreground line-through">'), W = /* @__PURE__ */ v("<div><span>");
 const Y = {
@@ -16,7 +16,7 @@ function L(e) {
   }).format(s), o = () => (e.compareAt ?? 0) > e.amount, r = () => Math.round((1 - e.amount / e.compareAt) * 100);
   return (() => {
     var s = W(), d = s.firstChild;
-    return n(d, () => i(e.amount)), n(s, c($, {
+    return n(d, () => i(e.amount)), n(s, c(b, {
       get when() {
         return o();
       },
@@ -31,7 +31,7 @@ function L(e) {
           }
         })];
       }
-    }), null), b((a) => {
+    }), null), $((a) => {
       var t = _("inline-flex items-center gap-2", e.class), u = _("font-bold text-foreground", Y[e.size ?? "md"]);
       return t !== a.e && C(s, a.e = t), u !== a.t && C(d, a.t = u), a;
     }, {
@@ -49,7 +49,7 @@ function ee(e) {
       class: "h-4 w-4"
     })), n(u, () => e.value), f.$$click = d, n(f, c(V, {
       class: "h-4 w-4"
-    })), b((l) => {
+    })), $((l) => {
       var g = _("inline-flex items-stretch rounded-md border border-input", e.class), h = e.disabled || e.value <= i(), m = e.disabled || e.value >= o();
       return g !== l.e && C(a, l.e = g), h !== l.t && (t.disabled = l.t = h), m !== l.a && (f.disabled = l.a = m), l;
     }, {
@@ -87,15 +87,15 @@ function De(e) {
     get children() {
       return [(() => {
         var i = ne(), o = i.firstChild;
-        return n(i, c($, {
+        return n(i, c(b, {
           get when() {
             return e.badge;
           },
           get children() {
             var r = te();
-            return n(r, () => e.badge), b(() => C(r, _("absolute -right-9 top-3.5 w-32 rotate-45 py-1 text-center text-[11px] font-semibold uppercase tracking-wide shadow-md", ie[ue(e.badge, e.badgeTone)]))), r;
+            return n(r, () => e.badge), $(() => C(r, _("absolute -right-9 top-3.5 w-32 rotate-45 py-1 text-center text-[11px] font-semibold uppercase tracking-wide shadow-md", ie[ue(e.badge, e.badgeTone)]))), r;
           }
-        }), null), b((r) => {
+        }), null), $((r) => {
           var s = e.image, d = e.title;
           return s !== r.e && w(o, "src", r.e = s), d !== r.t && w(o, "alt", r.t = d), r;
         }, {
@@ -104,7 +104,7 @@ function De(e) {
         }), i;
       })(), (() => {
         var i = ae(), o = i.firstChild;
-        return n(i, c($, {
+        return n(i, c(b, {
           get when() {
             return e.brand;
           },
@@ -112,7 +112,7 @@ function De(e) {
             var r = le();
             return n(r, () => e.brand), r;
           }
-        }), o), n(o, () => e.title), n(i, c($, {
+        }), o), n(o, () => e.title), n(i, c(b, {
           get when() {
             return e.category;
           },
@@ -120,7 +120,7 @@ function De(e) {
             var r = re();
             return n(r, () => e.category), r;
           }
-        }), null), n(i, c($, {
+        }), null), n(i, c(b, {
           get when() {
             return e.rating !== void 0;
           },
@@ -146,7 +146,7 @@ function De(e) {
           get locale() {
             return e.locale;
           }
-        }), null), n(i, c($, {
+        }), null), n(i, c(b, {
           get when() {
             return e.onAddToCart;
           },
@@ -169,7 +169,7 @@ var ce = /* @__PURE__ */ v("<div>");
 function Le(e) {
   return (() => {
     var i = ce();
-    return n(i, () => e.children), b(() => C(i, _("grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", e.class))), i;
+    return n(i, () => e.children), $(() => C(i, _("grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", e.class))), i;
   })();
 }
 var de = /* @__PURE__ */ v('<img class="h-16 w-16 shrink-0 rounded-md bg-muted object-cover">'), oe = /* @__PURE__ */ v('<button type=button aria-label="Remove item"class="text-muted-foreground hover:text-foreground">'), se = /* @__PURE__ */ v('<div><div class="min-w-[8rem] flex-1"><p class="line-clamp-1 font-medium text-foreground"></p></div><span class="min-w-[4rem] text-right font-medium tabular-nums text-foreground">');
@@ -180,13 +180,13 @@ function Oe(e) {
   }).format(r);
   return (() => {
     var r = se(), s = r.firstChild, d = s.firstChild, a = s.nextSibling;
-    return n(r, c($, {
+    return n(r, c(b, {
       get when() {
         return e.image;
       },
       get children() {
         var t = de();
-        return b((u) => {
+        return $((u) => {
           var f = e.image, l = e.title;
           return f !== u.e && w(t, "src", u.e = f), l !== u.t && w(t, "alt", u.t = l), u;
         }, {
@@ -214,7 +214,7 @@ function Oe(e) {
         return (u = e.onQuantityChange) == null ? void 0 : u.call(e, t);
       },
       min: 1
-    }), a), n(a, () => o(i())), n(r, c($, {
+    }), a), n(a, () => o(i())), n(r, c(b, {
       get when() {
         return e.onRemove;
       },
@@ -227,7 +227,7 @@ function Oe(e) {
           class: "h-4 w-4"
         })), t;
       }
-    }), null), b(() => C(r, _("flex flex-wrap items-center gap-4", e.class))), r;
+    }), null), $(() => C(r, _("flex flex-wrap items-center gap-4", e.class))), r;
   })();
 }
 A(["click"]);
@@ -247,7 +247,7 @@ function Ge(e) {
         var u = ge(), f = u.firstChild, l = f.nextSibling;
         return n(f, () => t.label), n(l, () => i(t.amount)), u;
       })()
-    }), r), n(a, () => i(e.total)), n(o, c($, {
+    }), r), n(a, () => i(e.total)), n(o, c(b, {
       get when() {
         return e.onCheckout;
       },
@@ -263,7 +263,7 @@ function Ge(e) {
           }
         });
       }
-    }), null), b(() => C(o, _("card glow-edge rounded-xl p-5 text-card-foreground", e.class))), o;
+    }), null), $(() => C(o, _("card glow-edge rounded-xl p-5 text-card-foreground", e.class))), o;
   })();
 }
 var fe = /* @__PURE__ */ v('<div><p class="text-sm font-semibold text-foreground"></p><div class=space-y-1.5>'), ve = /* @__PURE__ */ v('<span class="text-xs text-muted-foreground">'), he = /* @__PURE__ */ v('<div class="flex items-center justify-between gap-2">');
@@ -288,7 +288,7 @@ function q(e) {
           get label() {
             return d.label;
           }
-        }), null), n(a, c($, {
+        }), null), n(a, c(b, {
           get when() {
             return d.count != null;
           },
@@ -298,13 +298,13 @@ function q(e) {
           }
         }), null), a;
       })()
-    })), b(() => C(o, _("space-y-2", e.class))), o;
+    })), $(() => C(o, _("space-y-2", e.class))), o;
   })();
 }
-var xe = /* @__PURE__ */ v('<div class=space-y-2><p class="text-sm font-semibold text-foreground">'), $e = /* @__PURE__ */ v('<p class="text-sm text-muted-foreground"> results'), be = /* @__PURE__ */ v('<div class="flex flex-wrap gap-2">'), _e = /* @__PURE__ */ v('<div><div class="flex items-center justify-between gap-2">'), Ce = /* @__PURE__ */ v('<span class="inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-xs"><button type=button class="text-muted-foreground hover:text-foreground">'), we = /* @__PURE__ */ v('<div class=space-y-2><div class="flex items-center justify-between"><p class="text-sm font-semibold text-foreground">Price</p><p class="text-xs text-muted-foreground">$<!> – $</p></div><div class="flex items-center gap-2"><span class="text-sm text-muted-foreground">–');
+var xe = /* @__PURE__ */ v('<div class=space-y-2><p class="text-sm font-semibold text-foreground">'), be = /* @__PURE__ */ v('<p class="text-sm text-muted-foreground"> results'), $e = /* @__PURE__ */ v('<div class="flex flex-wrap gap-2">'), _e = /* @__PURE__ */ v('<div><div class="flex items-center justify-between gap-2">'), Ce = /* @__PURE__ */ v('<span class="inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-xs"><button type=button class="text-muted-foreground hover:text-foreground">'), we = /* @__PURE__ */ v('<div class=space-y-2><div class="flex items-center justify-between"><p class="text-sm font-semibold text-foreground">Price</p><p class="text-xs text-muted-foreground">$<!> – $</p></div><div class="flex items-center gap-2"><span class="text-sm text-muted-foreground">–');
 function ye(e) {
   const [i, o] = B(e.section.defaultOpen ?? !0);
-  return c($, {
+  return c(b, {
     get when() {
       return e.section.collapsible ?? !0;
     },
@@ -381,15 +381,15 @@ function ze(e) {
   };
   return (() => {
     var d = _e(), a = d.firstChild;
-    return n(a, c($, {
+    return n(a, c(b, {
       get when() {
         return e.resultCount != null;
       },
       get children() {
-        var t = $e(), u = t.firstChild;
+        var t = be(), u = t.firstChild;
         return n(t, () => e.resultCount, u), t;
       }
-    }), null), n(a, c($, {
+    }), null), n(a, c(b, {
       get when() {
         return e.onClearAll;
       },
@@ -404,12 +404,12 @@ function ze(e) {
           children: "Clear all"
         });
       }
-    }), null), n(d, c($, {
+    }), null), n(d, c(b, {
       get when() {
         return i().length > 0;
       },
       get children() {
-        var t = be();
+        var t = $e();
         return n(t, c(S, {
           get each() {
             return i();
@@ -418,11 +418,11 @@ function ze(e) {
             var f = Ce(), l = f.firstChild;
             return n(f, () => u.label, l), l.$$click = () => o(u), n(l, c(Z, {
               class: "h-3 w-3"
-            })), b(() => w(l, "aria-label", `Remove ${u.label}`)), f;
+            })), $(() => w(l, "aria-label", `Remove ${u.label}`)), f;
           })()
         })), t;
       }
-    }), null), n(d, c($, {
+    }), null), n(d, c(b, {
       get when() {
         return e.price;
       },
@@ -440,7 +440,8 @@ function ze(e) {
           },
           get max() {
             return t().value[1];
-          }
+          },
+          "aria-label": "Minimum price"
         }), y), n(x, c(U, {
           get value() {
             return t().value[1];
@@ -451,7 +452,8 @@ function ze(e) {
           },
           get max() {
             return t().max;
-          }
+          },
+          "aria-label": "Maximum price"
         }), null), u;
       })()
     }), null), n(d, c(S, {
@@ -465,11 +467,11 @@ function ze(e) {
         },
         onChange: (u) => e.onChange(t.key, u)
       })
-    }), null), b(() => C(d, _("space-y-5", e.class))), d;
+    }), null), $(() => C(d, _("space-y-5", e.class))), d;
   })();
 }
 A(["click"]);
-var Se = /* @__PURE__ */ v('<span class="text-muted-foreground line-through">'), ke = /* @__PURE__ */ v('<span class="inline-flex items-center gap-1 text-sm text-muted-foreground">As low as <!>/mo'), Ae = /* @__PURE__ */ v('<div><div class="flex flex-wrap items-center gap-2"><span>'), Me = /* @__PURE__ */ v('<span class="text-sm text-muted-foreground"> after code '), Pe = /* @__PURE__ */ v('<div class="flex flex-wrap items-center gap-2"><span class="inline-flex items-center gap-1 rounded-md border border-dashed border-primary/50 px-2 py-0.5 text-xs font-mono text-primary"> ');
+var Se = /* @__PURE__ */ v('<span class="text-muted-foreground line-through">'), ke = /* @__PURE__ */ v('<span class="inline-flex items-center gap-1 text-sm text-muted-foreground">As low as <!>/mo'), Ae = /* @__PURE__ */ v('<div><div class="flex flex-wrap items-center gap-2"><span>'), Me = /* @__PURE__ */ v('<span class="text-sm text-muted-foreground"> after code '), Pe = /* @__PURE__ */ v('<div class="flex flex-wrap items-center gap-2"><span class="inline-flex items-center gap-1 rounded-md border border-dashed border-primary/50 px-2 py-0.5 text-xs font-mono text-foreground"> ');
 const Te = {
   md: "text-xl",
   lg: "text-3xl"
@@ -492,7 +494,7 @@ function Ke(e) {
   };
   return (() => {
     var t = Ae(), u = t.firstChild, f = u.firstChild;
-    return n(f, () => i(e.amount)), n(u, c($, {
+    return n(f, () => i(e.amount)), n(u, c(b, {
       get when() {
         return o();
       },
@@ -507,13 +509,13 @@ function Ke(e) {
           }
         })];
       }
-    }), null), n(t, c($, {
+    }), null), n(t, c(b, {
       get when() {
         return e.coupon;
       },
       children: (l) => (() => {
         var g = Pe(), h = g.firstChild, m = h.firstChild;
-        return n(h, () => l().label ?? "Coupon", m), n(h, () => l().code, null), n(g, c($, {
+        return n(h, () => l().label ?? "Coupon", m), n(h, () => l().code, null), n(g, c(b, {
           get when() {
             return l().amount !== void 0;
           },
@@ -523,7 +525,7 @@ function Ke(e) {
           }
         }), null), g;
       })()
-    }), null), n(t, c($, {
+    }), null), n(t, c(b, {
       get when() {
         return e.financing;
       },
@@ -533,14 +535,14 @@ function Ke(e) {
           class: "h-4 w-4"
         }), g), n(l, () => i(a()), h), l;
       }
-    }), null), n(t, c($, {
+    }), null), n(t, c(b, {
       get when() {
         return e.note;
       },
       get children() {
         return e.note;
       }
-    }), null), b((l) => {
+    }), null), $((l) => {
       var g = _("flex flex-col gap-1", e.class), h = _("font-bold text-foreground", Te[e.size ?? "lg"]);
       return g !== l.e && C(t, l.e = g), h !== l.t && C(f, l.t = h), l;
     }, {
@@ -582,7 +584,7 @@ function Qe(e) {
     return n(u, () => {
       var m;
       return (m = d()) == null ? void 0 : m.label;
-    }), n(t, c($, {
+    }), n(t, c(b, {
       get when() {
         return e.showValue ?? !0;
       },
@@ -598,7 +600,7 @@ function Qe(e) {
         var x = Ne();
         return n(x, () => m == null ? void 0 : m.label), x;
       })()
-    })), b((m) => {
+    })), $((m) => {
       var F;
       var x = _("flex flex-col gap-2", e.class), y = i(), P = o(), T = e.value, E = ((F = d()) == null ? void 0 : F.label) ?? "Condition", I = `${s()}%`, N = `${s()}%`;
       return x !== m.e && C(a, m.e = x), y !== m.t && w(f, "aria-valuemin", m.t = y), P !== m.a && w(f, "aria-valuemax", m.a = P), T !== m.o && w(f, "aria-valuenow", m.o = T), E !== m.i && w(f, "aria-label", m.i = E), I !== m.n && j(l, "width", m.n = I), N !== m.s && j(g, "left", m.s = N), m;

package/dist/elements.css

@@ -22,7 +22,7 @@
   --primary: 217 91% 52%;
   --primary-foreground: 0 0% 100%;
   --accent: 199 89% 55%;
-  --accent-foreground: 0 0% 100%;
+  --accent-foreground: 199 45% 12%;
   --ring: 217 91% 52%;
   --destructive: 0 72% 52%;
   --destructive-foreground: 0 0% 100%;
@@ -58,7 +58,7 @@
   --primary: 217 91% 52%;
   --primary-foreground: 0 0% 100%;
   --accent: 199 89% 48%;
-  --accent-foreground: 0 0% 100%;
+  --accent-foreground: 199 45% 12%;
   --ring: 217 91% 52%;
   --destructive: 0 72% 50%;
   --destructive-foreground: 0 0% 100%;
@@ -3450,6 +3450,10 @@ html.calm .tile-glass {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
 }
+.data-\[checked\]\:text-primary-foreground[data-checked] {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
+}
 .data-\[pressed\]\:text-primary-foreground[data-pressed] {
   --tw-text-opacity: 1;
   color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
@@ -3458,10 +3462,6 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
 }
-.data-\[selected\]\:text-primary-foreground[data-selected] {
-  --tw-text-opacity: 1;
-  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
-}
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }

package/dist/full.css

@@ -22,7 +22,7 @@
   --primary: 217 91% 52%;
   --primary-foreground: 0 0% 100%;
   --accent: 199 89% 55%;
-  --accent-foreground: 0 0% 100%;
+  --accent-foreground: 199 45% 12%;
   --ring: 217 91% 52%;
   --destructive: 0 72% 52%;
   --destructive-foreground: 0 0% 100%;
@@ -58,7 +58,7 @@
   --primary: 217 91% 52%;
   --primary-foreground: 0 0% 100%;
   --accent: 199 89% 48%;
-  --accent-foreground: 0 0% 100%;
+  --accent-foreground: 199 45% 12%;
   --ring: 217 91% 52%;
   --destructive: 0 72% 50%;
   --destructive-foreground: 0 0% 100%;
@@ -3450,6 +3450,10 @@ html.calm .tile-glass {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
 }
+.data-\[checked\]\:text-primary-foreground[data-checked] {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
+}
 .data-\[pressed\]\:text-primary-foreground[data-pressed] {
   --tw-text-opacity: 1;
   color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
@@ -3458,10 +3462,6 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
 }
-.data-\[selected\]\:text-primary-foreground[data-selected] {
-  --tw-text-opacity: 1;
-  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
-}
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export declare const A4UI_VERSION = "0.24.0";
+export declare const A4UI_VERSION = "0.24.2";
 export { cn } from './lib/cn';
 export { useTheme, toggleTheme, setTheme, storedTheme, applyTheme, toggled, type Theme } from './lib/theme';
 export { useEffects, isCalm, setEffects } from './lib/effects';

package/dist/index.js

@@ -1,7 +1,7 @@
 import { c as p } from "./cn-B6yFEsav.js";
 import { createSignal as z, onCleanup as q, onMount as G, For as A, createMemo as Q, Show as S, createEffect as re, createUniqueId as vr, useContext as br, createContext as xr, splitProps as ie, Index as Re, on as Ht, Switch as $r, Match as We, ErrorBoundary as yr, Suspense as wr } from "solid-js";
-import { a as se, d as pr, C as Vt, e as Kt, f as Ut, m as X, B as _r, g as kr, h as Cr, s as Ue, i as Sr, u as Er } from "./NumberInput-enx_0iVh.js";
-import { b as bf, c as xf, N as $f, R as yf, j as wf, S as pf, T as _f, k as kf, l as Cf, n as Sf, p as Ef, r as Mf, o as Tf, q as Lf } from "./NumberInput-enx_0iVh.js";
+import { a as se, d as pr, C as Vt, e as Kt, f as Ut, m as X, B as _r, g as kr, h as Cr, s as Ue, i as Sr, u as Er } from "./NumberInput-DcJlXNKq.js";
+import { b as bf, c as xf, N as $f, R as yf, j as wf, S as pf, T as _f, k as kf, l as Cf, n as Sf, p as Ef, r as Mf, o as Tf, q as Lf } from "./NumberInput-DcJlXNKq.js";
 import { createComponent as o, memo as V, insert as s, template as v, effect as _, setAttribute as T, className as M, delegateEvents as Y, Portal as me, setStyleProperty as O, use as R, classList as qt, spread as ce, mergeProps as de, Dynamic as Gt, addEventListener as Ke, style as ue } from "solid-js/web";
 import { Accordion as _e } from "@kobalte/core/accordion";
 import { ChevronsLeft as Mr, ChevronLeft as Oe, ChevronRight as fe, ChevronsRight as Tr, CalendarDays as Wt, Clock as Lr, File as mt, Check as xe, X as ge, ChevronDown as qe, UploadCloud as Dr, CircleX as Jt, TriangleAlert as Zt, CircleCheck as Qt, Info as er, Copy as Ir, ChevronsUpDown as tr, ChevronsLeftRight as Ar, Inbox as Fr, Star as zr, ServerCrash as Pr, Compass as Rr, ArrowUp as Or, Plus as Br, ChevronUp as jr, Bell as Nr, GripVertical as ht, Loader2 as Yr, Satellite as Xr, Moon as Hr, Sun as Vr, Sparkles as Kr } from "lucide-solid";
@@ -2262,7 +2262,7 @@ function Hu(e) {
           get value() {
             return t.value;
           },
-          class: "relative z-10 flex cursor-pointer items-center px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors data-[selected]:text-primary-foreground",
+          class: "relative z-10 flex cursor-pointer items-center px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors data-[checked]:text-primary-foreground",
           get children() {
             return [o(Ie.ItemInput, {}), o(Ie.ItemLabel, {
               get children() {
@@ -6918,7 +6918,7 @@ const wd = [
     primary: "217 91% 52%",
     "primary-foreground": "0 0% 100%",
     accent: "199 89% 55%",
-    "accent-foreground": "0 0% 100%",
+    "accent-foreground": "199 45% 12%",
     ring: "217 91% 52%",
     destructive: "0 72% 52%",
     "destructive-foreground": "0 0% 100%"
@@ -6935,7 +6935,7 @@ const wd = [
     primary: "217 91% 52%",
     "primary-foreground": "0 0% 100%",
     accent: "199 89% 48%",
-    "accent-foreground": "0 0% 100%",
+    "accent-foreground": "199 45% 12%",
     ring: "217 91% 52%",
     destructive: "0 72% 50%",
     "destructive-foreground": "0 0% 100%"
@@ -7222,7 +7222,7 @@ function ff() {
     }
   Id(e && hr(e) || gt);
 }
-const mf = "0.24.0";
+const mf = "0.24.2";
 export {
   mf as A4UI_VERSION,
   du as Accordion,

package/dist/styles.css

@@ -21,7 +21,7 @@
   --primary: 217 91% 52%;
   --primary-foreground: 0 0% 100%;
   --accent: 199 89% 55%;
-  --accent-foreground: 0 0% 100%;
+  --accent-foreground: 199 45% 12%;
   --ring: 217 91% 52%;
   --destructive: 0 72% 52%;
   --destructive-foreground: 0 0% 100%;
@@ -57,7 +57,7 @@
   --primary: 217 91% 52%;
   --primary-foreground: 0 0% 100%;
   --accent: 199 89% 48%;
-  --accent-foreground: 0 0% 100%;
+  --accent-foreground: 199 45% 12%;
   --ring: 217 91% 52%;
   --destructive: 0 72% 50%;
   --destructive-foreground: 0 0% 100%;

package/dist/ui/NumberInput.d.ts

@@ -6,6 +6,8 @@ interface NumberInputProps {
     min?: number;
     /** Upper bound; the increment trigger disables itself at this value. */
     max?: number;
+    /** Accessible name applied to the input as its `aria-label` (no visible label is rendered). */
+    'aria-label'?: string;
     class?: string;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.24.0",
+  "version": "0.24.2",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/src/commerce/FacetSidebar.tsx

@@ -195,6 +195,7 @@ export function FacetSidebar(props: FacetSidebarProps): JSX.Element {
                 onChange={setMin}
                 min={price().min}
                 max={price().value[1]}
+                aria-label="Minimum price"
               />
               <span class="text-sm text-muted-foreground">–</span>
               <NumberInput
@@ -202,6 +203,7 @@ export function FacetSidebar(props: FacetSidebarProps): JSX.Element {
                 onChange={setMax}
                 min={price().value[0]}
                 max={price().max}
+                aria-label="Maximum price"
               />
             </div>
           </div>

package/src/commerce/PriceBlock.tsx

@@ -110,7 +110,7 @@ export function PriceBlock(props: PriceBlockProps): JSX.Element {
       <Show when={props.coupon}>
         {(coupon) => (
           <div class="flex flex-wrap items-center gap-2">
-            <span class="inline-flex items-center gap-1 rounded-md border border-dashed border-primary/50 px-2 py-0.5 text-xs font-mono text-primary">
+            <span class="inline-flex items-center gap-1 rounded-md border border-dashed border-primary/50 px-2 py-0.5 text-xs font-mono text-foreground">
               {coupon().label ?? 'Coupon'} {coupon().code}
             </span>
             <Show when={coupon().amount !== undefined}>

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.24.0'
+export const A4UI_VERSION = '0.24.2'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'

package/src/themes/palettes.ts

@@ -82,7 +82,7 @@ export const space: ThemeDefinition = {
     primary: '217 91% 52%',
     'primary-foreground': '0 0% 100%',
     accent: '199 89% 55%',
-    'accent-foreground': '0 0% 100%',
+    'accent-foreground': '199 45% 12%',
     ring: '217 91% 52%',
     destructive: '0 72% 52%',
     'destructive-foreground': '0 0% 100%',
@@ -99,7 +99,7 @@ export const space: ThemeDefinition = {
     primary: '217 91% 52%',
     'primary-foreground': '0 0% 100%',
     accent: '199 89% 48%',
-    'accent-foreground': '0 0% 100%',
+    'accent-foreground': '199 45% 12%',
     ring: '217 91% 52%',
     destructive: '0 72% 50%',
     'destructive-foreground': '0 0% 100%',

package/src/ui/NumberInput.tsx

@@ -11,6 +11,8 @@ interface NumberInputProps {
   min?: number
   /** Upper bound; the increment trigger disables itself at this value. */
   max?: number
+  /** Accessible name applied to the input as its `aria-label` (no visible label is rendered). */
+  'aria-label'?: string
   class?: string
 }
 
@@ -39,7 +41,10 @@ export function NumberInput(props: NumberInputProps): JSX.Element {
       <KNumberField.DecrementTrigger class={cn(TRIGGER_CLASS, 'rounded-l-md')} aria-label="Decrement">
         −
       </KNumberField.DecrementTrigger>
-      <KNumberField.Input class="w-16 border-y border-input bg-background px-3 py-2 text-center text-sm text-foreground outline-none transition-colors a4-field" />
+      <KNumberField.Input
+        aria-label={props['aria-label']}
+        class="w-16 border-y border-input bg-background px-3 py-2 text-center text-sm text-foreground outline-none transition-colors a4-field"
+      />
       <KNumberField.IncrementTrigger class={cn(TRIGGER_CLASS, 'rounded-r-md')} aria-label="Increment">
         +
       </KNumberField.IncrementTrigger>

package/src/ui/SegmentedControl.tsx

@@ -49,7 +49,7 @@ export function SegmentedControl(props: SegmentedControlProps): JSX.Element {
         {(option) => (
           <KSegmentedControl.Item
             value={option.value}
-            class="relative z-10 flex cursor-pointer items-center px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors data-[selected]:text-primary-foreground"
+            class="relative z-10 flex cursor-pointer items-center px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors data-[checked]:text-primary-foreground"
           >
             <KSegmentedControl.ItemInput />
             <KSegmentedControl.ItemLabel>{option.label}</KSegmentedControl.ItemLabel>