coles-solid-library 0.3.10 → 0.4.1

package/dist/components/Button/Button.d.ts

@@ -1,6 +1,13 @@
 import { Component, JSX } from "solid-js";
 import { ThemeVariables } from "../..";
+/**
+ * Library Button
+ *  - Accepts theme + optional borderTheme variant ("none" disables border styling)
+ *  - "transparent" acts as a boolean presence prop (transparent={false} disables when explicitly false)
+ *  - Forwards all other native button props & ref
+ */
 interface Props extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Apply transparent styling (presence = on; set false to force off) */
     transparent?: boolean;
     theme?: Exclude<ThemeVariables, "header" | "subheader">;
     borderTheme?: Exclude<ThemeVariables, "header" | "subheader"> | "none";

package/dist/components/Form/formHelp/formArray.d.ts

@@ -43,6 +43,8 @@ export declare class FormArray<T extends object> {
      * @private
      */
     private setValues;
+    private readonly _initialValidationDefs;
+    private readonly _initialValuesSnapshot;
     /**
      * Creates an instance of FormArray.
      *
@@ -51,6 +53,16 @@ export declare class FormArray<T extends object> {
      * @param initialValues - Optional initial values for the form controls.
      */
     constructor(arrayValidation: ArrayValidation<T>, initialValues?: T | T[]);
+    /**
+     * Returns true if any validator (array-level or control-level) exists matching the provided errKey.
+     * If no errKey provided, returns true when any validator exists at all.
+     */
+    hasAnyValidator(errKey?: string): boolean;
+    /**
+     * Resets the array to its initial validation definitions and values.
+     * Clears any accumulated errors and added dynamic controls.
+     */
+    reset(): void;
     /**
      * Gets the current values of the form controls in the array.
      *

package/dist/components/Snackbar/snackbar.d.ts

@@ -1,10 +1,18 @@
 import { Component } from "solid-js";
+/**
+ * Snackbar descriptor
+ *  - message: text content
+ *  - severity: maps to style variants
+ *  - closeTimeout: ms before auto close (default 5000)
+ */
 export interface Snackbar {
     message: string;
     severity?: "error" | "warning" | "info" | "success";
     closeTimeout?: number;
 }
-declare const addSnackbar: (snack: Snackbar) => void;
+/** Queue a snackbar to display */
+declare const addSnackbar: (snack: Snackbar) => Snackbar[];
+/** Mount once near app root to render any queued snackbars (portal not required here but container simplifies styling) */
 declare const SnackbarController: Component;
 export { addSnackbar, SnackbarController };
 export default addSnackbar;

package/dist/components/TableV2/table.d.ts

@@ -1,5 +1,19 @@
 import { Accessor, JSX, Setter } from "solid-js";
 import { StyleContainer } from "./tableProvider";
+/**
+ * Core Table component (TableV2): orchestrates a declarative registration system for
+ * columns, headers, rows, dropdown rows, and styling containers. Child components
+ * (Column, Header, Cell, Row, etc.) register themselves through context; this file
+ * renders the actual <table> DOM structure from that accumulated metadata.
+ *
+ * Design goals / constraints (tests rely on these):
+ *  - Changing the first column name must retain dropdown (collapse/expand) metadata.
+ *  - Row click handlers may receive (event, dataItem) when declared with >= 2 params.
+ *  - Cell render errors surface a console.error and render a fallback element unless
+ *    user provided onCellError returns a custom JSX fallback.
+ *  - Dropdown header rows are focusable, toggle with Enter/Space, and manage an
+ *    associated content region row with role="region" + aria-hidden / data attributes.
+ */
 interface TableProps<T = any> {
     children: JSX.Element;
     data: Accessor<T[]>;
@@ -22,6 +36,8 @@ interface TableProps<T = any> {
         row: number;
         dataIndex: number;
     }) => JSX.Element | void;
+    /** Enable verbose debug logging (otherwise suppressed outside tests) */
+    debugLogs?: boolean;
 }
 export declare const Table: <T>(props: TableProps<T>) => JSX.Element;
 export {};

package/dist/index.esm.js

@@ -521,48 +521,48 @@ var style$8 = {"customButtonStyle":"Button-module_customButtonStyle__RCNcn","pri
 styleInject(css_248z$j);
 
 var _tmpl$$o = /*#__PURE__*/template(`<button>`);
+// Map theme -> border theme class key (kept as function to avoid changing test expectations around call order)
+const getBorderThemeName = theme => {
+  switch (theme) {
+    case "primary":
+      return "borderPrimary";
+    case "primaryVariant":
+      return "borderPrimaryVariant";
+    case "secondary":
+      return "borderSecondary";
+    case "secondaryVariant":
+      return "borderSecondaryVariant";
+    case "surface":
+      return "borderSurface";
+    case "surfaceVariant":
+      return "borderSurfaceVariant";
+    case "background":
+      return "borderBackground";
+    case "container":
+      return "borderContainer";
+    case "error":
+      return "borderError";
+    default:
+      return "none";
+  }
+};
 const Button = props => {
   const [local, others] = splitProps(props, ["theme", "transparent", "borderTheme"]);
-  const isTransparent = () => {
-    if (Object.keys(props).includes("transparent") && props.transparent !== false) {
-      return true;
-    }
-    return false;
-  };
-  const [buttonRef, setButtonRef] = createSignal();
+  /** Apply the transparent variant (presence of prop enables; set to false to force off) */
+  const isTransparent = () => "transparent" in props && props.transparent !== false;
   const transparent = createMemo(() => isTransparent() ? style$8.transparent : "");
-  const getBorderThemeName = theme => {
-    switch (theme) {
-      case "primary":
-        return "borderPrimary";
-      case "primaryVariant":
-        return "borderPrimaryVariant";
-      case "secondary":
-        return "borderSecondary";
-      case "secondaryVariant":
-        return "borderSecondaryVariant";
-      case "surface":
-        return "borderSurface";
-      case "surfaceVariant":
-        return "borderSurfaceVariant";
-      case "background":
-        return "borderBackground";
-      case "container":
-        return "borderContainer";
-      case "error":
-        return "borderError";
-      default:
-        return "none";
-    }
-  };
+  // Provide a default type to avoid implicit "submit" in forms when not specified
+  const explicitType = () => props.type ?? 'button';
   return (() => {
     var _el$ = _tmpl$$o();
     use(ref => {
-      setButtonRef(ref);
       // @ts-ignore
       props?.ref?.(ref);
     }, _el$);
     spread(_el$, mergeProps(others, {
+      get type() {
+        return explicitType();
+      },
       get ["class"]() {
         return `${style$8?.[local?.theme ?? "container"] ?? ''} ${style$8?.[getBorderThemeName(local?.borderTheme ?? 'none')] ?? ''} ${style$8?.customButtonStyle} ${transparent()} ${props?.class ?? ""}`;
       }
@@ -1230,12 +1230,18 @@ function createStore(...[store, options]) {
 }
 
 /**
- * Sets the theme attribute on the document body.
- *  - 'dark' or 'light'
- * @param theme - The theme to set. Defaults to 'dark'.
+ * Set the data-theme attribute on <body>.
+ * Accepts only 'dark' | 'light' (case-insensitive). Any invalid value falls back to 'dark'.
+ * Idempotent: won't re-set attribute if already the desired value (avoids needless layout / mutation observers).
+ * Returns the applied normalized theme string.
  */
 function addTheme(theme = 'dark') {
-  document.body.setAttribute('data-theme', theme);
+  const normalized = (theme || 'dark').toLowerCase();
+  const applied = normalized === 'light' || normalized === 'dark' ? normalized : 'dark';
+  if (document.body.getAttribute('data-theme') !== applied) {
+    document.body.setAttribute('data-theme', applied);
+  }
+  return applied;
 }
 function isNullish(params) {
   return params === null || params === undefined;
@@ -1529,9 +1535,27 @@ const Input = props => {
           context.setValue(raw);
           context.setTextInside(true);
         }
+        // If not in a form but controlled value provided
+      } else if (!isNullish(props.value)) {
+        const val = props.value;
+        if (!(typeof val === 'string' && val.trim() === '')) {
+          context.setValue(val);
+          context.setTextInside(true);
+        } else {
+          context.setTextInside(false);
+        }
       }
     }
   });
+  // React to controlled prop value changes outside of form context
+  createEffect(() => {
+    if (isNullish(formContext?.data) && !isNullish(props.value) && !isNullish(context.getName)) {
+      const val = props.value;
+      const empty = typeof val === 'string' ? val.trim() === '' : false;
+      context.setValue(val);
+      context.setTextInside(!empty);
+    }
+  });
   const placeholder = () => {
     const reqText = isRequired() ? " *" : "";
     if (context?.getTextInside?.() && !context?.getFocused?.()) {
@@ -1561,6 +1585,12 @@ const Input = props => {
       "onFocus": () => {
         if (!isNullish(context.getName)) {
           context.setFocused?.(true);
+          // Mark dirty on initial focus if part of a form (requested behavior)
+          const formName = context.formName;
+          if (formName && formContext?.formGroup?.markDirty) {
+            const meta = formContext.formGroup.getMeta(formName);
+            if (meta && !meta.dirty) formContext.formGroup.markDirty(formName);
+          }
         }
       },
       "onBlur": e => {
@@ -2176,7 +2206,20 @@ function Select(props) {
         setOpen(false);
       }
     };
-    _el$7.addEventListener("focus", () => form?.setFocused?.(true));
+    _el$7.$$click = e => {
+      // existing click logic below will toggle dropdown; ensure dirty marking once
+      if (form?.formName && formContext?.formGroup?.markDirty) {
+        const meta = formContext.formGroup.getMeta(form?.formName);
+        if (meta && !meta.dirty) formContext.formGroup.markDirty(form?.formName);
+      }
+    };
+    _el$7.addEventListener("focus", () => {
+      form?.setFocused?.(true);
+      if (form?.formName && formContext?.formGroup?.markDirty) {
+        const meta = formContext.formGroup.getMeta(form?.formName);
+        if (meta && !meta.dirty) formContext.formGroup.markDirty(form?.formName);
+      }
+    });
     _el$7._$owner = getOwner();
     _el$8.$$click = e => {
       const menuRect = menuLocRef()?.getBoundingClientRect();
@@ -2266,7 +2309,7 @@ function Select(props) {
     return _el$7;
   })();
 }
-delegateEvents(["keydown", "click"]);
+delegateEvents(["click", "keydown"]);
 
 var _tmpl$$f = /*#__PURE__*/template(`<div role=option><span></span><span is=coles-select-label>`, true, false, false);
 function Option(props) {
@@ -2473,7 +2516,19 @@ const TextArea = props => {
         return customProps.tooltip;
       },
       "onInput": handleInput,
-      "onFocus": () => fieldCtx?.setFocused?.(true),
+      "onFocus": () => {
+        fieldCtx?.setFocused?.(true);
+        if (formName && formCtx?.formGroup?.markDirty) {
+          const meta = formCtx.formGroup.getMeta(formName);
+          if (meta && !meta.dirty) formCtx.formGroup.markDirty(formName);
+        }
+      },
+      "onClick": () => {
+        if (formName && formCtx?.formGroup?.markDirty) {
+          const meta = formCtx.formGroup.getMeta(formName);
+          if (meta && !meta.dirty) formCtx.formGroup.markDirty(formName);
+        }
+      },
       "onBlur": () => fieldCtx?.setFocused?.(false)
     }), false, false);
     return _el$;
@@ -2492,19 +2547,35 @@ const Modal = props => {
   const isShown = createMemo(() => props.show[0]());
   const [innerPopup, setInnerPopup] = createSignal();
   // const [ignoreClicks, setIgnoreClicks] = createSignal(true);
+  // Maintain a stable entry reference so unregister removes the correct instance.
+  let wmEntry;
   createEffect(() => {
-    const entry = {
-      element: innerPopup(),
-      onClickOutside: e => {
-        props.show[1](false);
+    const el = innerPopup();
+    const visible = isShown();
+    if (visible && el) {
+      if (!wmEntry) {
+        wmEntry = {
+          element: el,
+          onClickOutside: () => props.show[1](false)
+        };
+        // Slight delay retained from original logic (reduced) for potential mount animations
+        setTimeout(() => {
+          // Guard in case it was hidden before timeout fired
+          if (wmEntry && isShown()) registerWindowManager(wmEntry);
+        }, 50);
+      } else {
+        // Update element reference if it changed (shouldn't normally)
+        wmEntry.element = el;
       }
-    };
-    if (isShown()) {
-      setTimeout(() => {
-        registerWindowManager(entry);
-      }, 250);
-    } else {
-      unregisterWindowManager(entry);
+    } else if (!visible && wmEntry) {
+      unregisterWindowManager(wmEntry);
+      wmEntry = undefined;
+    }
+  });
+  onCleanup(() => {
+    if (wmEntry) {
+      unregisterWindowManager(wmEntry);
+      wmEntry = undefined;
     }
   });
   const widthStyle = createMemo(() => {
@@ -2710,74 +2781,65 @@ var style$1 = {"snack":"snackbar-module_snack__Dkcmp","error":"snackbar-module_e
 styleInject(css_248z$8);
 
 var _tmpl$$a = /*#__PURE__*/template(`<div>`),
-  _tmpl$2$5 = /*#__PURE__*/template(`<div><span>`);
+  _tmpl$2$5 = /*#__PURE__*/template(`<div role=status aria-live=polite><span>`);
 const [snackbars, setSnackbars] = createSignal([]);
-const addSnackbar = snack => {
-  setSnackbars(old => [...old, snack]);
-};
-const removeSnackbar = index => {
-  setSnackbars(old => old.filter((_, i) => i !== index));
-};
-const SnackbarController = () => {
-  return createComponent(Show, {
-    get when() {
-      return snackbars().length > 0;
-    },
-    get children() {
-      var _el$ = _tmpl$$a();
-      insert(_el$, createComponent(For, {
-        get each() {
-          return snackbars();
+/** Queue a snackbar to display */
+const addSnackbar = snack => setSnackbars(old => [...old, snack]);
+/** Remove snackbar at index */
+const removeSnackbar = index => setSnackbars(old => old.filter((_, i) => i !== index));
+/** Mount once near app root to render any queued snackbars (portal not required here but container simplifies styling) */
+const SnackbarController = () => createComponent(Show, {
+  get when() {
+    return snackbars().length > 0;
+  },
+  get children() {
+    var _el$ = _tmpl$$a();
+    insert(_el$, createComponent(For, {
+      get each() {
+        return snackbars();
+      },
+      children: (snack, index) => createComponent(Snackbar, mergeProps(snack, {
+        get index() {
+          return index();
         },
-        children: (snack, index) => createComponent(Snackbar, mergeProps(snack, {
-          get index() {
-            return index();
-          },
-          onClose: () => removeSnackbar(index())
-        }))
-      }));
-      createRenderEffect(() => className(_el$, style$1.snackContainer));
-      return _el$;
-    }
-  });
-};
+        onClose: () => removeSnackbar(index())
+      }))
+    }));
+    createRenderEffect(() => className(_el$, style$1.snackContainer));
+    return _el$;
+  }
+});
 const Snackbar = props => {
-  const [isOpen, setIsOpen] = createSignal(true);
-  if (props.closeTimeout) setTimeout(() => props.onClose(), props.closeTimeout);
-  if (!props.closeTimeout) setTimeout(() => props.onClose(), 5000);
-  const messageLength = Math.floor(props.message.length / 17);
+  // Timer management: ensure only one timeout per snackbar instance
+  const timeout = setTimeout(props.onClose, props.closeTimeout ?? 5000);
+  onCleanup(() => clearTimeout(timeout));
+  const messageLinesHeuristic = Math.floor(props.message.length / 17); // maintain original vertical stacking calc
   return createComponent(Portal, {
     get mount() {
       return document.body;
     },
     get children() {
-      return createComponent(Show, {
-        get when() {
-          return isOpen();
+      var _el$2 = _tmpl$2$5(),
+        _el$3 = _el$2.firstChild;
+      insert(_el$3, () => props.message);
+      insert(_el$2, createComponent(Button, {
+        get onClick() {
+          return props.onClose;
         },
-        get children() {
-          var _el$2 = _tmpl$2$5(),
-            _el$3 = _el$2.firstChild;
-          insert(_el$3, () => props.message);
-          insert(_el$2, createComponent(Button, {
-            get onClick() {
-              return props.onClose;
-            },
-            children: "X"
-          }), null);
-          createRenderEffect(_p$ => {
-            var _v$ = `${10 + props.index * (50 + messageLength * 8)}px`,
-              _v$2 = `${style$1.primary} ${style$1.snack} ${style$1[props.severity ?? 'info']}`;
-            _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$2.style.setProperty("bottom", _v$) : _el$2.style.removeProperty("bottom"));
-            _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$2;
-        }
+        "aria-label": "Close notification",
+        children: "X"
+      }), null);
+      createRenderEffect(_p$ => {
+        var _v$ = `${10 + props.index * (50 + messageLinesHeuristic * 8)}px`,
+          _v$2 = `${style$1.primary} ${style$1.snack} ${style$1[props.severity ?? 'info']}`;
+        _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$2.style.setProperty("bottom", _v$) : _el$2.style.removeProperty("bottom"));
+        _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
       });
+      return _el$2;
     }
   });
 };
@@ -2801,7 +2863,7 @@ const Container = props => {
   })();
 };
 
-var css_248z$6 = ".icon-module_icon__K4BP- {\n  outline: none !important;\n  border: none !important;\n}\n.icon-module_icon__K4BP-:focus {\n  outline: none !important;\n  border: none !important;\n}\n.icon-module_icon__K4BP-:active {\n  outline: none !important;\n  border: none !important;\n}";
+var css_248z$6 = ".icon-module_icon__K4BP- {\n  outline: none !important;\n  border: none !important;\n}\n.icon-module_icon__K4BP- svg {\n  fill: var(--header-on-background-color, #fff) !important;\n  color: var(--header-on-background-color, #fff) !important;\n}\n.icon-module_icon__K4BP-:focus {\n  outline: none !important;\n  border: none !important;\n}\n.icon-module_icon__K4BP-:active {\n  outline: none !important;\n  border: none !important;\n}";
 var styles$5 = {"icon":"icon-module_icon__K4BP-"};
 styleInject(css_248z$6);
 
@@ -2844,6 +2906,7 @@ const Icon = props => {
     }, _el$);
     _el$.style.setProperty("display", "inline-block");
     color != null ? _el$.style.setProperty("color", color) : _el$.style.removeProperty("color");
+    color != null ? _el$.style.setProperty("fill", color) : _el$.style.removeProperty("fill");
     createRenderEffect(_p$ => {
       var _v$ = styles$5.icon,
         _v$2 = `${size()}px`,
@@ -2884,18 +2947,29 @@ const Menu = props => {
     }
     return '';
   };
+  // Persist the window manager entry so we unregister the same reference we registered.
+  let wmEntry;
   createEffect(() => {
-    const entry = {
-      element: menuRef(),
-      onClickOutside: e => {
-        props.show[1](false);
+    const visible = props.show[0]();
+    const el = menuRef();
+    if (visible && el) {
+      if (!wmEntry) {
+        wmEntry = {
+          element: el,
+          onClickOutside: () => props.show[1](false)
+        };
+      } else {
+        // update element reference if it changed (shouldn't usually)
+        wmEntry.element = el;
       }
-    };
-    if (props.show[0]() && menuRef()) {
-      entry.element.style.zIndex = `${999 + getEntryAmount()}`;
-      registerWindowManager(entry);
-    } else {
-      unregisterWindowManager(entry);
+      // Avoid duplicate registrations: only register if not already last added.
+      // Heuristic: assign zIndex each time we show and register once.
+      wmEntry.element.style.zIndex = `${999 + getEntryAmount()}`;
+      // If not already in entries array, register (simple containment check by identity).
+      // We can't read the internal array directly besides length heuristic, so best effort:
+      registerWindowManager(wmEntry);
+    } else if (!visible && wmEntry) {
+      unregisterWindowManager(wmEntry);
     }
   });
   const getAndSetPosition = (menu, anchor) => {
@@ -2946,6 +3020,10 @@ const Menu = props => {
     if (!isNullish(menuContext)) {
       menuContext.unregisterWithParent(menuRef());
     }
+    if (wmEntry) {
+      unregisterWindowManager(wmEntry);
+      wmEntry = undefined;
+    }
   });
   return createComponent(Portal, {
     get children() {
@@ -3310,6 +3388,9 @@ class FormArray {
    * @private
    */
   setValues;
+  // Snapshots of initial validation defs & values for reset purposes
+  _initialValidationDefs;
+  _initialValuesSnapshot;
   /**
    * Creates an instance of FormArray.
    *
@@ -3325,6 +3406,29 @@ class FormArray {
     this.setValidation = setValid;
     this.internalValues = values;
     this.setValues = setValues;
+    this._initialValidationDefs = [...arrayValidation[0]];
+    this._initialValuesSnapshot = Array.isArray(initialValues) ? Clone(initialValues) : Clone([initialValues]);
+  }
+  /**
+   * Returns true if any validator (array-level or control-level) exists matching the provided errKey.
+   * If no errKey provided, returns true when any validator exists at all.
+   */
+  hasAnyValidator(errKey) {
+    if (!errKey) {
+      return this.internalArrayValidation.length > 0 || this.internalValidation.some(v => v[1].length > 0);
+    }
+    const inArray = this.internalArrayValidation.some(v => v.errKey === errKey);
+    if (inArray) return true;
+    return this.internalValidation.some(v => v[1].some(val => val.errKey === errKey));
+  }
+  /**
+   * Resets the array to its initial validation definitions and values.
+   * Clears any accumulated errors and added dynamic controls.
+   */
+  reset() {
+    this.setValidation(() => [...this._initialValidationDefs]);
+    this.setValues(() => Clone(this._initialValuesSnapshot));
+    this.errors = [];
   }
   /**
    * Gets the current values of the form controls in the array.
@@ -3332,7 +3436,9 @@ class FormArray {
    * @returns A cloned copy of the values array.
    */
   get() {
-    return this.internalValues;
+    // Return a cloned snapshot so external mutation of returned array/value objects
+    // can't silently mutate internal reactive state or bypass validation/meta tracking.
+    return Clone(this.internalValues);
   }
   /**
    * Gets the value of a specific control in the array.
@@ -3596,15 +3702,45 @@ const FormField2 = props => {
     if (Array.isArray(val) && val.length === 0) return false;
     return true;
   };
+  // Track dirty meta so legend can float once a field has been modified even if some components
+  // didn't properly synchronize their internal value signals yet.
+  const isDirty = () => {
+    if (!local?.formName) return false;
+    try {
+      return !!formContext?.formGroup?.getMeta?.(local.formName)?.dirty;
+    } catch {
+      return false;
+    }
+  };
   const shouldFloat = createMemo(() => {
     let currentVal;
+    // Prefer form context store value
     if (hasValue(formContext?.data?.[local?.formName ?? ''])) {
       currentVal = formContext?.data?.[local?.formName ?? ''];
     }
+    // Fallback to local provider value (some components set this first)
     if (hasValue(context?.getValue?.())) {
       currentVal = context?.getValue?.();
     }
-    return hasValue(currentVal) || context?.getFocused?.();
+    // Float when value present, focused, or control marked dirty (programmatic set)
+    // Access meta directly for reactivity on dirty change
+    const metaDirty = local?.formName ? !!formContext?.formGroup?.getMeta?.(local.formName)?.dirty : false;
+    // Float when there is a value, or focused, or meta marked dirty (programmatic set),
+    // or legacy input marked dirty-on-focus even if still empty (metaDirty && no value yet)
+    if (metaDirty && !hasValue(currentVal)) return true;
+    return hasValue(currentVal) || context?.getFocused?.() || isDirty();
+  });
+  // Effect: if underlying meta resets to pristine and value cleared, ensure focused state cleared
+  createEffect(() => {
+    if (!local?.formName) return;
+    const meta = formContext?.formGroup?.getMeta?.(local.formName);
+    if (!meta) return;
+    // Read current value from form context
+    const value = formContext?.data?.[local.formName];
+    const hasAny = hasValue(value);
+    if (!meta.dirty && !meta.touched && !hasAny && context?.getFocused?.()) {
+      context?.setFocused?.(false);
+    }
   });
   const theChildren = children(() => props.children);
   const formErrors = () => {
@@ -3634,7 +3770,8 @@ const FormField2 = props => {
   createEffect(() => {
     context.setName(props.name);
   });
-  context?.setFocused?.(false);
+  // Initialize focus state only once (was previously resetting every render and preventing focus-based floating)
+  onMount(() => context?.setFocused?.(false));
   useClickOutside([fieldRef], () => {
     if (!isNullish(formContext?.data)) {
       const value = formContext?.data?.[local?.formName ?? ''];
@@ -3876,7 +4013,9 @@ class FormGroup {
       if (value instanceof FormArray) {
         newData[key] = value;
       } else {
-        newData[key] = value[0];
+        // Deep clone initial value so external object mutations after FormGroup construction
+        // do not mutate internal reactive store (primitive clone is cheap, objects safeguarded)
+        newData[key] = CloneStore(value[0]);
         newValidators[key] = value[1];
         newErrors[key] = value[1].map(validator => ({
           key: validator.errKey,
@@ -3958,7 +4097,8 @@ class FormGroup {
    */
   hasValidator(key, errKey) {
     if (this.internalDataSignal[0][key] instanceof FormArray) {
-      return this.internalDataSignal[0][key].hasError();
+      // BUGFIX: previously returned current error state (hasError). Now correctly checks for validator definition presence.
+      return this.internalDataSignal[0][key].hasAnyValidator(errKey);
     }
     return this.errors[0]()?.[key]?.some(error => error.key === errKey) ?? false;
   }
@@ -4035,7 +4175,14 @@ class FormGroup {
   reset() {
     for (const k of this.keys) {
       const m = this.meta[k];
-      this.set(k, CloneStore(m.initialValue));
+      // If control is a FormArray, invoke its own reset to clear dynamic items & errors
+      const current = this.internalDataSignal[0][k];
+      if (current instanceof FormArray) {
+        current.reset();
+      } else {
+        // Direct store write to avoid triggering meta touched/dirty logic in set()
+        this.internalDataSignal[1](k, CloneStore(m.initialValue));
+      }
       m.touched = false;
       m.dirty = false;
       const errs = this.errors[0]();
@@ -4211,16 +4358,26 @@ var _tmpl$$1 = /*#__PURE__*/template(`<span role=alert aria-label="Cell render e
   _tmpl$6 = /*#__PURE__*/template(`<td role=region aria-label="Dropdown row content">`),
   _tmpl$7 = /*#__PURE__*/template(`<td>`);
 const Table = props => {
+  // Trigger to force row subtree reconciliation after toggling dropdown state.
   const [redrawRows, setRedrawRows] = createSignal(false);
+  // Historical mount signal (kept to avoid accidental behavioral shifts).
   const [mounted, setMounted] = createSignal(false);
   const tableContext = {};
+  const debugEnabled = () => props.debugLogs === true;
+  const debug = (...args) => {
+    if (debugEnabled()) console.log('[TableV2 debug]', ...args);
+  };
   const getProps = () => props;
   const tableData = () => {
     redrawRows();
     return props.data() ?? [];
   };
   // Create a reactive memo for columns to handle dynamic changes
+  // Reactive columns accessor; consumers dynamically mutate columns[] causing
+  // re-registration + style reset.
   const reactiveColumns = createMemo(() => getProps().columns);
+  // Convenience helper for frequent first-column lookups.
+  const getFirstColumn = () => reactiveColumns()?.[0];
   // Add effect to reset column styles when columns change
   createEffect(() => {
     const columns = reactiveColumns();
@@ -4229,6 +4386,53 @@ const Table = props => {
       setColumnStyle({});
     }
   });
+  // Preserve dropdown metadata (dropRow / dropHeader) when the first column name changes.
+  // These flags are stored only on the first column's cell for each row. When the first
+  // column is renamed, cells re‑register under the new key and lose the flags. We migrate
+  // the metadata from the old first column key to the new one (or, as a fallback, from any
+  // column in that row that still has the flags) so the table continues to recognize
+  // dropdown header/content rows and render the region cell correctly.
+  let prevFirstColumn;
+  createEffect(() => {
+    const cols = reactiveColumns();
+    if (!cols || cols.length === 0) return;
+    const newFirst = cols[0];
+    if (prevFirstColumn && prevFirstColumn !== newFirst) {
+      // Column rename detected: migrate flags.
+      setRows(old => {
+        const newRows = {
+          ...old
+        };
+        for (const r in newRows) {
+          const row = {
+            ...newRows[r]
+          };
+          const prevCell = prevFirstColumn ? row[prevFirstColumn] : undefined;
+          const newCell = row[newFirst];
+          if (prevCell && newCell) {
+            row[newFirst] = {
+              ...newCell,
+              dropRow: prevCell.dropRow || newCell.dropRow || false,
+              dropHeader: prevCell.dropHeader || newCell.dropHeader || false
+            };
+          } else if (newCell && !newCell.dropRow && !newCell.dropHeader) {
+            // Fallback: scan other columns for any flagged cell (in case implementation changes)
+            const flagged = Object.values(row).find(c => c && (c.dropRow || c.dropHeader));
+            if (flagged && typeof flagged === 'object') {
+              row[newFirst] = {
+                ...newCell,
+                dropRow: flagged.dropRow || newCell.dropRow || false,
+                dropHeader: flagged.dropHeader || newCell.dropHeader || false
+              };
+            }
+          }
+          newRows[r] = row;
+        }
+        return newRows;
+      });
+    }
+    prevFirstColumn = newFirst;
+  });
   tableContext.setDataSource = data => {
     getProps().setData?.(() => [...data]);
   };
@@ -4356,7 +4560,7 @@ const Table = props => {
   const [rowStyle, setRowStyle] = createSignal({});
   tableContext.addRowStyle = (index, style, isDropRow, isDropHeader) => {
     // If this is a dropdown row or dropdown header, update the row data
-    const firstColumn = reactiveColumns()?.[0];
+    const firstColumn = getFirstColumn();
     if (!isNullish(firstColumn)) {
       setRows(old => {
         // Get existing row data
@@ -4388,7 +4592,8 @@ const Table = props => {
           ...style,
           all: {
             ...style?.all,
-            isDropHeader: isDropHeader === true ? true : undefined
+            isDropHeader: isDropHeader === true ? true : undefined,
+            isDropRow: isDropRow === true ? true : undefined
           }
         }
       };
@@ -4431,9 +4636,7 @@ const Table = props => {
       return newStyles;
     });
   };
-  const headerFactory = (index, column) => {
-    return headers()?.[index]?.[column];
-  };
+  const headerFactory = (index, column) => headers()?.[index]?.[column];
   const rowStyleFactory = rowNum => {
     return rowStyle()?.[rowNum] ?? {};
   };
@@ -4450,6 +4653,7 @@ const Table = props => {
           row: row ?? -1,
           dataIndex: index
         };
+        // Intentionally still surfaced (tests assert console error presence); keep single console.error.
         console.error('[TableV2] Error rendering cell', error, ctx);
         const custom = props.onCellError?.(error, ctx);
         if (custom) return custom;
@@ -4473,11 +4677,11 @@ const Table = props => {
     return props.getRowKey?.(dataItem, dataIndex) ?? dataIndex;
   };
   const getIsDropOpen = (rowNum, dataIndex, dataItem) => {
-    // Check if this row should be displayed based on its position
-    const firstColumn = reactiveColumns()?.[0];
-    const rowData = rows()?.[rowNum]?.[firstColumn];
-    // Only treat rows explicitly marked as dropdown content
-    if (rowData?.dropRow) {
+    // Evaluate dropdown visibility once per cell render.
+    const rowData = rows()?.[rowNum]?.[getFirstColumn() ?? ''];
+    const rowLevel = rowStyle()[rowNum]?.all;
+    const hasDropFlag = rowLevel?.isDropRow || rowData?.dropRow;
+    if (hasDropFlag) {
       const key = resolveRowKey(dataItem, dataIndex);
       return dropOpenStore[key] ?? false;
     }
@@ -4485,11 +4689,8 @@ const Table = props => {
   };
   const dropRowStyle = (rowNum, dataIndex, dataItem) => {
     // Only apply dropRow/openDropRow classes to rows that are dropdown content
-    const firstColumn = reactiveColumns()?.[0];
-    const rowMeta = rows()?.[rowNum]?.[firstColumn ?? ''];
-    if (rowMeta?.dropRow) {
-      return getIsDropOpen(rowNum, dataIndex, dataItem) ? styles$1.openDropRow : styles$1.dropRow;
-    }
+    const rowMeta = rows()?.[rowNum]?.[getFirstColumn() ?? ''];
+    if (rowMeta?.dropRow) return getIsDropOpen(rowNum, dataIndex, dataItem) ? styles$1.openDropRow : styles$1.dropRow;
     return '';
   };
   return createComponent(TableProvider, mergeProps(tableContext, {
@@ -4587,80 +4788,108 @@ const Table = props => {
           },
           children: (item, index) => createComponent(For, {
             get each() {
-              return Object.keys(rows()).map(key => parseInt(key)).sort((a, b) => a - b);
+              return Object.keys(rows()).map(k => parseInt(k)).sort((a, b) => a - b);
             },
             children: rowNum => {
               const dataIndex = index();
               const resolvedRowKey = resolveRowKey(item, dataIndex);
-              const firstColumn = reactiveColumns()?.[0];
+              const firstColumn = getFirstColumn();
+              const rowStyleEntry = rowStyleFactory(rowNum);
+              const rowLevelAll = rowStyleEntry?.all;
               const headerCellMeta = rows()?.[rowNum]?.[firstColumn ?? ''];
-              const resolvedKey = resolveRowKey(item, dataIndex);
-              // Initialize dropdown state for header if not yet
-              if (headerCellMeta?.dropHeader && dropOpenStore[resolvedKey] === undefined) {
-                setDropOpenStore(resolvedKey, false);
+              const isHeaderToggle = headerCellMeta?.dropHeader || rowLevelAll?.isDropHeader;
+              if (isHeaderToggle && dropOpenStore[resolvedRowKey] === undefined) {
+                setDropOpenStore(resolvedRowKey, false);
               }
               const firstColumnMeta = rows()?.[rowNum]?.[firstColumn ?? ''];
-              const isContentRow = firstColumnMeta?.dropRow === true;
-              const isOpen = getIsDropOpen(rowNum, dataIndex, item);
-              const computedClass = (() => {
-                const base = dropRowStyle(rowNum, dataIndex, item);
-                return base;
-              })();
+              const isContentRow = rowLevelAll?.isDropRow === true || firstColumnMeta?.dropRow === true;
+              const isOpen = () => getIsDropOpen(rowNum, dataIndex, item);
+              const computedClass = dropRowStyle(rowNum, dataIndex, item);
+              if (rowNum === 1) debug('rowNum=1 dataIndex', dataIndex, 'isContentRow', isContentRow, 'isOpen', isOpen(), 'rowLevelAll', rowLevelAll);
+              const handleToggle = e => {
+                e.preventDefault();
+                const newVal = !dropOpenStore[resolvedRowKey];
+                setDropOpenStore(resolvedRowKey, newVal);
+                setRedrawRows(r => !r);
+                // Immediate DOM attribute sync for region cell to satisfy synchronous test expectations.
+                try {
+                  const selector = `tbody tr[data-row-key="${resolvedRowKey}"][data-drop-row="true"] td[role="region"]`;
+                  const region = document.querySelector(selector);
+                  if (region) {
+                    region.setAttribute('data-drop-state', newVal ? 'open' : 'closed');
+                    region.setAttribute('aria-hidden', newVal ? 'false' : 'true');
+                    debug('manual region sync', selector, 'nowOpen', newVal);
+                  } else {
+                    debug('region not found for selector', selector, 'immediate after click');
+                  }
+                } catch {/* swallow */}
+              };
+              const invokeOriginalRowHandler = e => {
+                const styleAll = rowStyleEntry?.all;
+                const original = styleAll?.__origOnClick ?? styleAll?.onClick;
+                if (typeof original === 'function') {
+                  try {
+                    if (original.length >= 2) original(e, item);else original(e);
+                  } catch (err) {
+                    console.error('[TableV2] Row onClick handler error', err);
+                  }
+                }
+              };
               return (() => {
                 var _el$10 = _tmpl$4();
-                spread(_el$10, mergeProps(() => rowStyleFactory?.(rowNum)?.all, {
+                spread(_el$10, mergeProps(() => rowStyleEntry?.all, {
                   "data-drop-row": isContentRow ? 'true' : undefined,
-                  "data-drop-open": isContentRow ? isOpen ? 'true' : 'false' : undefined,
+                  get ["data-drop-open"]() {
+                    return isContentRow ? isOpen() ? 'true' : 'false' : undefined;
+                  },
                   get style() {
-                    return rowStyleFactory?.(rowNum)?.style;
+                    return rowStyleEntry?.style;
                   },
                   "data-row-key": resolvedRowKey,
                   "onClick": e => {
-                    if (headerCellMeta?.dropHeader === true) {
-                      e.preventDefault();
-                      setDropOpenStore(resolvedRowKey, !dropOpenStore[resolvedRowKey]);
-                      setRedrawRows(r => !r);
-                    }
-                    // Invoke row-level handler stored by Row component. If original handler declared 2+ params pass data item.
-                    if (rowStyleFactory !== undefined) {
-                      const styleAll = rowStyleFactory(rowNum).all;
-                      const original = styleAll?.__origOnClick ?? styleAll?.onClick;
-                      if (typeof original === 'function') {
-                        try {
-                          if (original.length >= 2) {
-                            original(e, item);
-                          } else {
-                            original(e);
-                          }
-                        } catch (err) {
-                          console.error('[TableV2] Row onClick handler error', err);
-                        }
-                      }
-                    }
+                    if (isHeaderToggle) handleToggle(e);
+                    invokeOriginalRowHandler(e);
                   },
                   get ["class"]() {
-                    return `${computedClass} ${rowStyleFactory?.(rowNum)?.all?.class ?? ''}`;
-                  },
-                  get role() {
-                    return headerCellMeta?.dropHeader ? 'button' : undefined;
+                    return `${computedClass} ${rowStyleEntry?.all?.class ?? ''}`;
                   },
+                  "role": isHeaderToggle ? 'button' : undefined,
                   get ["aria-expanded"]() {
-                    return headerCellMeta?.dropHeader ? dropOpenStore[resolvedRowKey] ? 'true' : 'false' : undefined;
-                  },
-                  get tabIndex() {
-                    return headerCellMeta?.dropHeader ? 0 : undefined;
+                    return isHeaderToggle ? dropOpenStore[resolvedRowKey] ? 'true' : 'false' : undefined;
                   },
+                  "tabIndex": isHeaderToggle ? 0 : undefined,
                   "onKeyDown": e => {
                     const isActivator = e.key === 'Enter' || e.key === ' ';
-                    if (isActivator && headerCellMeta?.dropHeader) {
+                    if (isActivator && isHeaderToggle) {
                       e.preventDefault();
-                      setDropOpenStore(resolvedRowKey, !dropOpenStore[resolvedRowKey]);
-                      setRedrawRows(r => !r);
+                      handleToggle(e);
                     }
                   }
                 }), false, true);
                 insert(_el$10, () => {
-                  let renderedDropContent = false;
+                  if (isContentRow) {
+                    // Locate first available cell renderer for this dropdown row.
+                    const firstAvailableColumn = reactiveColumns().find(c => !!rows()[rowNum]?.[c]);
+                    const cellRenderer = firstAvailableColumn ? rows()[rowNum]?.[firstAvailableColumn]?.element : undefined;
+                    return (() => {
+                      var _el$11 = _tmpl$6();
+                      insert(_el$11, () => renderCell(cellRenderer, item, index(), firstAvailableColumn, rowNum));
+                      createRenderEffect(_p$ => {
+                        var _v$4 = reactiveColumns().length,
+                          _v$5 = isOpen() ? 'false' : 'true',
+                          _v$6 = isOpen() ? 'open' : 'closed';
+                        _v$4 !== _p$.e && setAttribute(_el$11, "colspan", _p$.e = _v$4);
+                        _v$5 !== _p$.t && setAttribute(_el$11, "aria-hidden", _p$.t = _v$5);
+                        _v$6 !== _p$.a && setAttribute(_el$11, "data-drop-state", _p$.a = _v$6);
+                        return _p$;
+                      }, {
+                        e: undefined,
+                        t: undefined,
+                        a: undefined
+                      });
+                      return _el$11;
+                    })();
+                  }
                   return createComponent(For, {
                     get each() {
                       return reactiveColumns();
@@ -4668,31 +4897,6 @@ const Table = props => {
                     children: column => {
                       const tableSpot = rows()[rowNum]?.[column];
                       const cell = tableSpot?.element;
-                      // Dropdown content row: render only once (first occurrence) spanning all columns
-                      if (tableSpot?.dropRow && !renderedDropContent) {
-                        renderedDropContent = true;
-                        return (() => {
-                          var _el$11 = _tmpl$6();
-                          insert(_el$11, () => renderCell(cell, item, index(), column, rowNum));
-                          createRenderEffect(_p$ => {
-                            var _v$4 = reactiveColumns().length,
-                              _v$5 = getIsDropOpen(rowNum, dataIndex, item) ? 'false' : 'true',
-                              _v$6 = getIsDropOpen(rowNum, dataIndex, item) ? 'open' : 'closed';
-                            _v$4 !== _p$.e && setAttribute(_el$11, "colspan", _p$.e = _v$4);
-                            _v$5 !== _p$.t && setAttribute(_el$11, "aria-hidden", _p$.t = _v$5);
-                            _v$6 !== _p$.a && setAttribute(_el$11, "data-drop-state", _p$.a = _v$6);
-                            return _p$;
-                          }, {
-                            e: undefined,
-                            t: undefined,
-                            a: undefined
-                          });
-                          return _el$11;
-                        })();
-                      }
-                      if (tableSpot?.dropRow) {
-                        return []; // Skip duplicate columns within same dropdown row
-                      }
                       return !isNullish(cell) ? (() => {
                         var _el$12 = _tmpl$7();
                         spread(_el$12, mergeProps(() => cellStyle?.()?.[rowNum]?.[column]?.all, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coles-solid-library",
-  "version": "0.3.10",
+  "version": "0.4.1",
   "description": "A SolidJS mostly UI library",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",