@geomak/ui 7.2.0 → 7.2.1

package/dist/index.cjs

@@ -5416,6 +5416,7 @@ function EditableCell({
       "input",
       {
         autoFocus: true,
+        size: 1,
         defaultValue: value == null ? "" : String(value),
         onBlur: (e) => commit(e.target.value),
         onKeyDown: (e) => {
@@ -5428,7 +5429,7 @@ function EditableCell({
           }
         },
         "aria-label": `Edit ${typeof col.label === "string" ? col.label : col.keyBind}`,
-        className: "w-full rounded border border-accent bg-surface px-2 py-1 text-sm text-foreground outline-none"
+        className: "box-border w-full min-w-0 rounded border border-accent bg-surface px-2 py-1 text-sm text-foreground outline-none"
       }
     );
   }
@@ -5478,7 +5479,7 @@ function TableBody({
                 onClick: () => toggleRow(rowKey),
                 "aria-expanded": isExpanded,
                 "aria-label": isExpanded ? "Collapse row" : "Expand row",
-                className: `w-9 h-9 inline-flex items-center justify-center rounded-md hover:bg-background transition-transform duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isExpanded && !expandRow.collapseIcon ? "rotate-180" : ""}`,
+                className: `w-9 h-9 inline-flex items-center justify-center rounded-md text-foreground-muted hover:text-foreground transition-[transform,color] duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isExpanded && !expandRow.collapseIcon ? "rotate-180" : ""}`,
                 children: isExpanded ? expandRow.collapseIcon ?? expandRow.expandIcon ?? DefaultExpandIcon : expandRow.expandIcon ?? DefaultExpandIcon
               }
             ) }),
@@ -5536,7 +5537,7 @@ function Pagination({
   const chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 6l6 6-6 6" }) });
   const doubleChevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l6 6-6 6M12 6l6 6-6 6" }) });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-3", children: [
-    options.withPicker && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-auto flex items-center gap-2", children: [
+    options.withPicker !== false && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-auto flex items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-xs text-foreground-muted", children: "Rows per page" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         MenuButton,
@@ -6878,13 +6879,19 @@ function PasswordStrength({
   const matches = value.length > 0 && value === confirmValue;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col gap-2", className), style, "aria-live": "polite", children: [
     !hideMeter && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", role: "meter", "aria-valuemin": 0, "aria-valuemax": 4, "aria-valuenow": score, "aria-label": "Password strength", children: [1, 2, 3, 4].map((seg) => /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: cx("h-1.5 flex-1 rounded-full transition-colors duration-200", seg <= score ? BAR_COLOR[score] : "bg-border")
-        },
-        seg
-      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", role: "meter", "aria-valuemin": 0, "aria-valuemax": 4, "aria-valuenow": score, "aria-label": "Password strength", children: [1, 2, 3, 4].map((seg) => {
+        const active = seg <= score;
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cx(
+              "h-full origin-left rounded-full transition-[transform,background-color] duration-300 ease-out motion-reduce:transition-none",
+              score > 0 ? BAR_COLOR[score] : "bg-border"
+            ),
+            style: { transform: `scaleX(${active ? 1 : 0})`, transitionDelay: active ? `${(seg - 1) * 70}ms` : "0ms" }
+          }
+        ) }, seg);
+      }) }),
       label && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted", children: "Strength: " }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("font-medium", TEXT_COLOR[score]), children: label })
@@ -6958,11 +6965,12 @@ function RadioTile({
               value: opt.value,
               disabled: opt.disabled,
               className: cx(
-                "group relative flex flex-col gap-1 rounded-xl border bg-surface text-left transition-all duration-150",
+                "group relative flex flex-col gap-1 rounded-xl border bg-surface text-left transition-colors duration-150",
                 PAD2[size],
                 "border-border hover:border-border-strong",
                 "data-[state=checked]:border-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent",
-                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                // Keyboard focus only (no mouse-click flash); ring is instant, not animated.
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface",
                 "disabled:cursor-not-allowed disabled:opacity-50"
               ),
               children: [