@a4ui/core 0.35.2 → 0.36.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export declare const A4UI_VERSION = "0.35.2";
+export declare const A4UI_VERSION = "0.36.0";
 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

@@ -1601,17 +1601,27 @@ function M$(e) {
     })), l;
   })();
 }
-var mi = /* @__PURE__ */ x('<div class="w-full overflow-x-auto"><table>'), hi = /* @__PURE__ */ x("<thead>"), vi = /* @__PURE__ */ x("<tbody>"), bi = /* @__PURE__ */ x("<tr>"), xi = /* @__PURE__ */ x("<th>"), $i = /* @__PURE__ */ x("<td>");
+var mi = /* @__PURE__ */ x('<div class="relative w-full overflow-x-auto"><table>'), hi = /* @__PURE__ */ x("<thead>"), vi = /* @__PURE__ */ x("<tbody>"), bi = /* @__PURE__ */ x("<tr>"), xi = /* @__PURE__ */ x("<th>"), $i = /* @__PURE__ */ x("<td>");
 function vr(e) {
   const [t, n] = de(e, ["class", "children"]);
-  return (() => {
-    var r = mi(), l = r.firstChild;
-    return ue(l, ge({
-      get class() {
-        return S("w-full border-collapse text-sm", t.class);
-      }
-    }, n), !1, !0), u(l, () => t.children), r;
-  })();
+  return (
+    // `relative` is load-bearing, not decoration: `overflow` only clips a
+    // descendant whose containing block is inside the scroller. Without a
+    // positioned wrapper, an absolutely-positioned descendant (a
+    // screen-reader-only input inside a cell control, for instance) resolves
+    // against an ancestor further up, escapes the clip at the table's full
+    // scroll width, and drags the whole DOCUMENT into horizontal scrolling —
+    // measured on a phone: a 356 px table inside a 390 px viewport pushed the
+    // page to 413 px.
+    (() => {
+      var r = mi(), l = r.firstChild;
+      return ue(l, ge({
+        get class() {
+          return S("w-full border-collapse text-sm", t.class);
+        }
+      }, n), !1, !0), u(l, () => t.children), r;
+    })()
+  );
 }
 function Rt(e) {
   const [t, n] = de(e, ["class", "children"]);
@@ -4354,8 +4364,12 @@ function Cy(e) {
           onInput: (k) => {
             n(k), a(1);
           },
-          placeholder: "Filter…",
-          "aria-label": "Filter rows"
+          get placeholder() {
+            return e.filterPlaceholder ?? "Filter…";
+          },
+          get "aria-label"() {
+            return e.filterLabel ?? "Filter rows";
+          }
         })), w;
       })();
     })(), null), u(b, i(vr, {
@@ -4419,7 +4433,8 @@ function Cy(e) {
       },
       onChange: a,
       get summary() {
-        return `${f().length} rows`;
+        var y;
+        return ((y = e.rowsSummary) == null ? void 0 : y.call(e, f().length)) ?? `${f().length} rows`;
       }
     }), null), _(() => A(b, S("flex w-full flex-col rounded-lg border border-border bg-background", e.class))), b;
   })();
@@ -10909,7 +10924,7 @@ function Uh(e) {
   })();
 }
 G(["pointerdown"]);
-var Vh = /* @__PURE__ */ x('<div><div class="flex gap-2"><input type=text placeholder="Location label"class="h-9 flex-1 rounded-md border border-border bg-input px-3 text-sm text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:outline-none">');
+var Vh = /* @__PURE__ */ x('<div><div class="flex gap-2"><input type=text class="h-9 flex-1 rounded-md border border-border bg-input px-3 text-sm text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:outline-none">');
 const Kh = 12, Gh = 240;
 function Dw(e) {
   const [t, n] = N(e.value ?? {
@@ -10951,7 +10966,9 @@ function Dw(e) {
     var c = Vh(), d = c.firstChild, f = d.firstChild;
     return f.$$input = (m) => a(m.currentTarget.value), u(d, i(ce, {
       variant: "outline",
-      "aria-label": "Use my location",
+      get "aria-label"() {
+        return e.geolocateLabel ?? "Use my location";
+      },
       onClick: o,
       get children() {
         return i(po, {
@@ -10971,7 +10988,13 @@ function Dw(e) {
         return g();
       },
       onClick: s
-    }), null), _(() => A(c, S("flex flex-col gap-2", e.class))), _(() => f.value = r().label ?? ""), c;
+    }), null), _((m) => {
+      var h = S("flex flex-col gap-2", e.class), $ = e.labelPlaceholder ?? "Location label";
+      return h !== m.e && A(c, m.e = h), $ !== m.t && I(f, "placeholder", m.t = $), m;
+    }, {
+      e: void 0,
+      t: void 0
+    }), _(() => f.value = r().label ?? ""), c;
   })();
 }
 G(["input"]);
@@ -14838,7 +14861,7 @@ function j1() {
     }
   Tx(e && jl(e) || br);
 }
-const D1 = "0.35.2";
+const D1 = "0.36.0";
 export {
   D1 as A4UI_VERSION,
   g$ as Accordion,

package/dist/ui/DataGrid.d.ts

@@ -18,6 +18,18 @@ export interface DataGridProps {
     pageSize?: number;
     /** Show the global text filter above the table. Defaults to true. */
     filterable?: boolean;
+    /**
+     * Copy overrides, for apps that do not run in English. Every user-visible
+     * string this component renders on its own is here; without them a Spanish
+     * or French page shows "Filter…" and "12 rows" in the middle of its own
+     * table with no way to change it.
+     * @default 'Filter…'
+     */
+    filterPlaceholder?: string;
+    /** Accessible name for the filter box. @default 'Filter rows' */
+    filterLabel?: string;
+    /** Builds the row-count summary. @default (n) => `${n} rows` */
+    rowsSummary?: (count: number) => string;
     class?: string;
 }
 /**

package/dist/ui/LocationPicker.d.ts

@@ -9,6 +9,15 @@ export interface LocationPickerProps {
     value?: LocationValue;
     /** Fires with the full value whenever the label, the pin, or geolocation changes it. */
     onChange?: (v: LocationValue) => void;
+    /**
+     * Placeholder for the free-text label field. Overridable because this was
+     * hardcoded English inside an otherwise fully translatable component — a
+     * Spanish form showed "Location label" in the middle of its own wizard.
+     * @default 'Location label'
+     */
+    labelPlaceholder?: string;
+    /** Accessible name for the "use my location" button. @default 'Use my location' */
+    geolocateLabel?: string;
     class?: string;
 }
 /**

package/package.json

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

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.35.2'
+export const A4UI_VERSION = '0.36.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'

package/src/ui/DataGrid.tsx

@@ -31,6 +31,18 @@ export interface DataGridProps {
   pageSize?: number
   /** Show the global text filter above the table. Defaults to true. */
   filterable?: boolean
+  /**
+   * Copy overrides, for apps that do not run in English. Every user-visible
+   * string this component renders on its own is here; without them a Spanish
+   * or French page shows "Filter…" and "12 rows" in the middle of its own
+   * table with no way to change it.
+   * @default 'Filter…'
+   */
+  filterPlaceholder?: string
+  /** Accessible name for the filter box. @default 'Filter rows' */
+  filterLabel?: string
+  /** Builds the row-count summary. @default (n) => `${n} rows` */
+  rowsSummary?: (count: number) => string
   class?: string
 }
 
@@ -126,8 +138,8 @@ export function DataGrid(props: DataGridProps): JSX.Element {
               setQuery(v)
               setPage(1)
             }}
-            placeholder="Filter…"
-            aria-label="Filter rows"
+            placeholder={props.filterPlaceholder ?? 'Filter…'}
+            aria-label={props.filterLabel ?? 'Filter rows'}
           />
         </div>
       )}
@@ -170,7 +182,7 @@ export function DataGrid(props: DataGridProps): JSX.Element {
         page={Math.min(page(), totalPages())}
         totalPages={totalPages()}
         onChange={setPage}
-        summary={`${sorted().length} rows`}
+        summary={props.rowsSummary?.(sorted().length) ?? `${sorted().length} rows`}
       />
     </div>
   )

package/src/ui/LocationPicker.tsx

@@ -20,6 +20,15 @@ export interface LocationPickerProps {
   value?: LocationValue
   /** Fires with the full value whenever the label, the pin, or geolocation changes it. */
   onChange?: (v: LocationValue) => void
+  /**
+   * Placeholder for the free-text label field. Overridable because this was
+   * hardcoded English inside an otherwise fully translatable component — a
+   * Spanish form showed "Location label" in the middle of its own wizard.
+   * @default 'Location label'
+   */
+  labelPlaceholder?: string
+  /** Accessible name for the "use my location" button. @default 'Use my location' */
+  geolocateLabel?: string
   class?: string
 }
 
@@ -77,10 +86,14 @@ export function LocationPicker(props: LocationPickerProps): JSX.Element {
           type="text"
           value={current().label ?? ''}
           onInput={(event) => setLabel(event.currentTarget.value)}
-          placeholder="Location label"
+          placeholder={props.labelPlaceholder ?? 'Location label'}
           class="h-9 flex-1 rounded-md border border-border bg-input px-3 text-sm text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:outline-none"
         />
-        <Button variant="outline" aria-label="Use my location" onClick={useMyLocation}>
+        <Button
+          variant="outline"
+          aria-label={props.geolocateLabel ?? 'Use my location'}
+          onClick={useMyLocation}
+        >
           <Crosshair class="h-4 w-4" />
         </Button>
       </div>

package/src/ui/Table.tsx

@@ -34,7 +34,15 @@ interface TableProps extends ParentProps {
 export function Table(props: TableProps): JSX.Element {
   const [local, rest] = splitProps(props, ['class', 'children'])
   return (
-    <div class="w-full overflow-x-auto">
+    // `relative` is load-bearing, not decoration: `overflow` only clips a
+    // descendant whose containing block is inside the scroller. Without a
+    // positioned wrapper, an absolutely-positioned descendant (a
+    // screen-reader-only input inside a cell control, for instance) resolves
+    // against an ancestor further up, escapes the clip at the table's full
+    // scroll width, and drags the whole DOCUMENT into horizontal scrolling —
+    // measured on a phone: a 356 px table inside a 390 px viewport pushed the
+    // page to 413 px.
+    <div class="relative w-full overflow-x-auto">
       <table class={cn('w-full border-collapse text-sm', local.class)} {...rest}>
         {local.children}
       </table>