@a4ui/core 0.24.0 → 0.24.1

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,7 +467,7 @@ 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"]);
@@ -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/index.d.ts

@@ -1,4 +1,4 @@
-export declare const A4UI_VERSION = "0.24.0";
+export declare const A4UI_VERSION = "0.24.1";
 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";
@@ -7222,7 +7222,7 @@ function ff() {
     }
   Id(e && hr(e) || gt);
 }
-const mf = "0.24.0";
+const mf = "0.24.1";
 export {
   mf as A4UI_VERSION,
   du as Accordion,

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.1",
   "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/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.1'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'

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>