coles-solid-library 0.4.9 → 0.5.0

package/dist/index.esm.js

@@ -1,495 +1,6 @@
-import { sharedConfig, untrack, createRenderEffect, getOwner, createEffect, runWithOwner, createMemo, createSignal, createRoot, onCleanup, splitProps, mergeProps, createContext, useContext, createComponent, Show, onMount, For, $PROXY, batch, $TRACK, getListener, children } from 'solid-js';
-
-const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
-const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
-const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
-const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
-  className: "class",
-  htmlFor: "for"
-});
-const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
-  class: "className",
-  formnovalidate: {
-    $: "formNoValidate",
-    BUTTON: 1,
-    INPUT: 1
-  },
-  ismap: {
-    $: "isMap",
-    IMG: 1
-  },
-  nomodule: {
-    $: "noModule",
-    SCRIPT: 1
-  },
-  playsinline: {
-    $: "playsInline",
-    VIDEO: 1
-  },
-  readonly: {
-    $: "readOnly",
-    INPUT: 1,
-    TEXTAREA: 1
-  }
-});
-function getPropAlias(prop, tagName) {
-  const a = PropAliases[prop];
-  return typeof a === "object" ? a[tagName] ? a["$"] : undefined : a;
-}
-const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
-const SVGNamespace = {
-  xlink: "http://www.w3.org/1999/xlink",
-  xml: "http://www.w3.org/XML/1998/namespace"
-};
-function reconcileArrays(parentNode, a, b) {
-  let bLength = b.length,
-    aEnd = a.length,
-    bEnd = bLength,
-    aStart = 0,
-    bStart = 0,
-    after = a[aEnd - 1].nextSibling,
-    map = null;
-  while (aStart < aEnd || bStart < bEnd) {
-    if (a[aStart] === b[bStart]) {
-      aStart++;
-      bStart++;
-      continue;
-    }
-    while (a[aEnd - 1] === b[bEnd - 1]) {
-      aEnd--;
-      bEnd--;
-    }
-    if (aEnd === aStart) {
-      const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
-      while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
-    } else if (bEnd === bStart) {
-      while (aStart < aEnd) {
-        if (!map || !map.has(a[aStart])) a[aStart].remove();
-        aStart++;
-      }
-    } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-      const node = a[--aEnd].nextSibling;
-      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
-      parentNode.insertBefore(b[--bEnd], node);
-      a[aEnd] = b[bEnd];
-    } else {
-      if (!map) {
-        map = new Map();
-        let i = bStart;
-        while (i < bEnd) map.set(b[i], i++);
-      }
-      const index = map.get(a[aStart]);
-      if (index != null) {
-        if (bStart < index && index < bEnd) {
-          let i = aStart,
-            sequence = 1,
-            t;
-          while (++i < aEnd && i < bEnd) {
-            if ((t = map.get(a[i])) == null || t !== index + sequence) break;
-            sequence++;
-          }
-          if (sequence > index - bStart) {
-            const node = a[aStart];
-            while (bStart < index) parentNode.insertBefore(b[bStart++], node);
-          } else parentNode.replaceChild(b[bStart++], a[aStart++]);
-        } else aStart++;
-      } else a[aStart++].remove();
-    }
-  }
-}
-const $$EVENTS = "_$DX_DELEGATE";
-function template(html, isImportNode, isSVG, isMathML) {
-  let node;
-  const create = () => {
-    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
-    t.innerHTML = html;
-    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
-  };
-  const fn = isImportNode ? () => untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
-  fn.cloneNode = fn;
-  return fn;
-}
-function delegateEvents(eventNames, document = window.document) {
-  const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
-  for (let i = 0, l = eventNames.length; i < l; i++) {
-    const name = eventNames[i];
-    if (!e.has(name)) {
-      e.add(name);
-      document.addEventListener(name, eventHandler);
-    }
-  }
-}
-function setAttribute(node, name, value) {
-  if (isHydrating(node)) return;
-  if (value == null) node.removeAttribute(name);else node.setAttribute(name, value);
-}
-function setAttributeNS(node, namespace, name, value) {
-  if (isHydrating(node)) return;
-  if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
-}
-function setBoolAttribute(node, name, value) {
-  if (isHydrating(node)) return;
-  value ? node.setAttribute(name, "") : node.removeAttribute(name);
-}
-function className(node, value) {
-  if (isHydrating(node)) return;
-  if (value == null) node.removeAttribute("class");else node.className = value;
-}
-function addEventListener(node, name, handler, delegate) {
-  if (delegate) {
-    if (Array.isArray(handler)) {
-      node[`$$${name}`] = handler[0];
-      node[`$$${name}Data`] = handler[1];
-    } else node[`$$${name}`] = handler;
-  } else if (Array.isArray(handler)) {
-    const handlerFn = handler[0];
-    node.addEventListener(name, handler[0] = e => handlerFn.call(node, handler[1], e));
-  } else node.addEventListener(name, handler, typeof handler !== "function" && handler);
-}
-function classList(node, value, prev = {}) {
-  const classKeys = Object.keys(value || {}),
-    prevKeys = Object.keys(prev);
-  let i, len;
-  for (i = 0, len = prevKeys.length; i < len; i++) {
-    const key = prevKeys[i];
-    if (!key || key === "undefined" || value[key]) continue;
-    toggleClassKey(node, key, false);
-    delete prev[key];
-  }
-  for (i = 0, len = classKeys.length; i < len; i++) {
-    const key = classKeys[i],
-      classValue = !!value[key];
-    if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
-    toggleClassKey(node, key, true);
-    prev[key] = classValue;
-  }
-  return prev;
-}
-function style$9(node, value, prev) {
-  if (!value) return prev ? setAttribute(node, "style") : value;
-  const nodeStyle = node.style;
-  if (typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
-  prev || (prev = {});
-  value || (value = {});
-  let v, s;
-  for (s in prev) {
-    value[s] == null && nodeStyle.removeProperty(s);
-    delete prev[s];
-  }
-  for (s in value) {
-    v = value[s];
-    if (v !== prev[s]) {
-      nodeStyle.setProperty(s, v);
-      prev[s] = v;
-    }
-  }
-  return prev;
-}
-function spread(node, props = {}, isSVG, skipChildren) {
-  const prevProps = {};
-  if (!skipChildren) {
-    createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
-  }
-  createRenderEffect(() => typeof props.ref === "function" && use(props.ref, node));
-  createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
-  return prevProps;
-}
-function use(fn, element, arg) {
-  return untrack(() => fn(element, arg));
-}
-function insert(parent, accessor, marker, initial) {
-  if (marker !== undefined && !initial) initial = [];
-  if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
-  createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
-}
-function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
-  props || (props = {});
-  for (const prop in prevProps) {
-    if (!(prop in props)) {
-      if (prop === "children") continue;
-      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef, props);
-    }
-  }
-  for (const prop in props) {
-    if (prop === "children") {
-      continue;
-    }
-    const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef, props);
-  }
-}
-function isHydrating(node) {
-  return !!sharedConfig.context && !sharedConfig.done && (!node || node.isConnected);
-}
-function toPropertyName(name) {
-  return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
-}
-function toggleClassKey(node, key, value) {
-  const classNames = key.trim().split(/\s+/);
-  for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
-}
-function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
-  let isCE, isProp, isChildProp, propAlias, forceProp;
-  if (prop === "style") return style$9(node, value, prev);
-  if (prop === "classList") return classList(node, value, prev);
-  if (value === prev) return prev;
-  if (prop === "ref") {
-    if (!skipRef) value(node);
-  } else if (prop.slice(0, 3) === "on:") {
-    const e = prop.slice(3);
-    prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
-    value && node.addEventListener(e, value, typeof value !== "function" && value);
-  } else if (prop.slice(0, 10) === "oncapture:") {
-    const e = prop.slice(10);
-    prev && node.removeEventListener(e, prev, true);
-    value && node.addEventListener(e, value, true);
-  } else if (prop.slice(0, 2) === "on") {
-    const name = prop.slice(2).toLowerCase();
-    const delegate = DelegatedEvents.has(name);
-    if (!delegate && prev) {
-      const h = Array.isArray(prev) ? prev[0] : prev;
-      node.removeEventListener(name, h);
-    }
-    if (delegate || value) {
-      addEventListener(node, name, value, delegate);
-      delegate && delegateEvents([name]);
-    }
-  } else if (prop.slice(0, 5) === "attr:") {
-    setAttribute(node, prop.slice(5), value);
-  } else if (prop.slice(0, 5) === "bool:") {
-    setBoolAttribute(node, prop.slice(5), value);
-  } else if ((forceProp = prop.slice(0, 5) === "prop:") || (isChildProp = ChildProperties.has(prop)) || !isSVG && ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-") || "is" in props)) {
-    if (forceProp) {
-      prop = prop.slice(5);
-      isProp = true;
-    } else if (isHydrating(node)) return value;
-    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[propAlias || prop] = value;
-  } else {
-    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
-    if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
-  }
-  return value;
-}
-function eventHandler(e) {
-  if (sharedConfig.registry && sharedConfig.events) {
-    if (sharedConfig.events.find(([el, ev]) => ev === e)) return;
-  }
-  let node = e.target;
-  const key = `$$${e.type}`;
-  const oriTarget = e.target;
-  const oriCurrentTarget = e.currentTarget;
-  const retarget = value => Object.defineProperty(e, "target", {
-    configurable: true,
-    value
-  });
-  const handleNode = () => {
-    const handler = node[key];
-    if (handler && !node.disabled) {
-      const data = node[`${key}Data`];
-      data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
-      if (e.cancelBubble) return;
-    }
-    node.host && typeof node.host !== "string" && !node.host._$host && node.contains(e.target) && retarget(node.host);
-    return true;
-  };
-  const walkUpTree = () => {
-    while (handleNode() && (node = node._$host || node.parentNode || node.host));
-  };
-  Object.defineProperty(e, "currentTarget", {
-    configurable: true,
-    get() {
-      return node || document;
-    }
-  });
-  if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = _$HY.done = true;
-  if (e.composedPath) {
-    const path = e.composedPath();
-    retarget(path[0]);
-    for (let i = 0; i < path.length - 2; i++) {
-      node = path[i];
-      if (!handleNode()) break;
-      if (node._$host) {
-        node = node._$host;
-        walkUpTree();
-        break;
-      }
-      if (node.parentNode === oriCurrentTarget) {
-        break;
-      }
-    }
-  } else walkUpTree();
-  retarget(oriTarget);
-}
-function insertExpression(parent, value, current, marker, unwrapArray) {
-  const hydrating = isHydrating(parent);
-  if (hydrating) {
-    !current && (current = [...parent.childNodes]);
-    let cleaned = [];
-    for (let i = 0; i < current.length; i++) {
-      const node = current[i];
-      if (node.nodeType === 8 && node.data.slice(0, 2) === "!$") node.remove();else cleaned.push(node);
-    }
-    current = cleaned;
-  }
-  while (typeof current === "function") current = current();
-  if (value === current) return current;
-  const t = typeof value,
-    multi = marker !== undefined;
-  parent = multi && current[0] && current[0].parentNode || parent;
-  if (t === "string" || t === "number") {
-    if (hydrating) return current;
-    if (t === "number") {
-      value = value.toString();
-      if (value === current) return current;
-    }
-    if (multi) {
-      let node = current[0];
-      if (node && node.nodeType === 3) {
-        node.data !== value && (node.data = value);
-      } else node = document.createTextNode(value);
-      current = cleanChildren(parent, current, marker, node);
-    } else {
-      if (current !== "" && typeof current === "string") {
-        current = parent.firstChild.data = value;
-      } else current = parent.textContent = value;
-    }
-  } else if (value == null || t === "boolean") {
-    if (hydrating) return current;
-    current = cleanChildren(parent, current, marker);
-  } else if (t === "function") {
-    createRenderEffect(() => {
-      let v = value();
-      while (typeof v === "function") v = v();
-      current = insertExpression(parent, v, current, marker);
-    });
-    return () => current;
-  } else if (Array.isArray(value)) {
-    const array = [];
-    const currentArray = current && Array.isArray(current);
-    if (normalizeIncomingArray(array, value, current, unwrapArray)) {
-      createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
-      return () => current;
-    }
-    if (hydrating) {
-      if (!array.length) return current;
-      if (marker === undefined) return current = [...parent.childNodes];
-      let node = array[0];
-      if (node.parentNode !== parent) return current;
-      const nodes = [node];
-      while ((node = node.nextSibling) !== marker) nodes.push(node);
-      return current = nodes;
-    }
-    if (array.length === 0) {
-      current = cleanChildren(parent, current, marker);
-      if (multi) return current;
-    } else if (currentArray) {
-      if (current.length === 0) {
-        appendNodes(parent, array, marker);
-      } else reconcileArrays(parent, current, array);
-    } else {
-      current && cleanChildren(parent);
-      appendNodes(parent, array);
-    }
-    current = array;
-  } else if (value.nodeType) {
-    if (hydrating && value.parentNode) return current = multi ? [value] : value;
-    if (Array.isArray(current)) {
-      if (multi) return current = cleanChildren(parent, current, marker, value);
-      cleanChildren(parent, current, null, value);
-    } else if (current == null || current === "" || !parent.firstChild) {
-      parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
-    current = value;
-  } else ;
-  return current;
-}
-function normalizeIncomingArray(normalized, array, current, unwrap) {
-  let dynamic = false;
-  for (let i = 0, len = array.length; i < len; i++) {
-    let item = array[i],
-      prev = current && current[normalized.length],
-      t;
-    if (item == null || item === true || item === false) ;else if ((t = typeof item) === "object" && item.nodeType) {
-      normalized.push(item);
-    } else if (Array.isArray(item)) {
-      dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
-    } else if (t === "function") {
-      if (unwrap) {
-        while (typeof item === "function") item = item();
-        dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
-      } else {
-        normalized.push(item);
-        dynamic = true;
-      }
-    } else {
-      const value = String(item);
-      if (prev && prev.nodeType === 3 && prev.data === value) normalized.push(prev);else normalized.push(document.createTextNode(value));
-    }
-  }
-  return dynamic;
-}
-function appendNodes(parent, array, marker = null) {
-  for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
-}
-function cleanChildren(parent, current, marker, replacement) {
-  if (marker === undefined) return parent.textContent = "";
-  const node = replacement || document.createTextNode("");
-  if (current.length) {
-    let inserted = false;
-    for (let i = current.length - 1; i >= 0; i--) {
-      const el = current[i];
-      if (node !== el) {
-        const isParent = el.parentNode === parent;
-        if (!inserted && !i) isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);else isParent && el.remove();
-      } else inserted = true;
-    }
-  } else parent.insertBefore(node, marker);
-  return [node];
-}
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function createElement(tagName, isSVG = false) {
-  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
-}
-function Portal(props) {
-  const {
-      useShadow
-    } = props,
-    marker = document.createTextNode(""),
-    mount = () => props.mount || document.body,
-    owner = getOwner();
-  let content;
-  let hydrating = !!sharedConfig.context;
-  createEffect(() => {
-    if (hydrating) getOwner().user = hydrating = false;
-    content || (content = runWithOwner(owner, () => createMemo(() => props.children)));
-    const el = mount();
-    if (el instanceof HTMLHeadElement) {
-      const [clean, setClean] = createSignal(false);
-      const cleanup = () => setClean(true);
-      createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
-      onCleanup(cleanup);
-    } else {
-      const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
-        renderRoot = useShadow && container.attachShadow ? container.attachShadow({
-          mode: "open"
-        }) : container;
-      Object.defineProperty(container, "_$host", {
-        get() {
-          return marker.parentNode;
-        },
-        configurable: true
-      });
-      insert(renderRoot, content);
-      el.appendChild(container);
-      props.ref && props.ref(container);
-      onCleanup(() => el.removeChild(container));
-    }
-  }, undefined, {
-    render: !hydrating
-  });
-  return marker;
-}
+import { use, spread, mergeProps, insert, template, effect, createComponent, className, memo, delegateEvents, addEventListener, classList, setAttribute, getOwner, Portal, setStyleProperty, style as style$9 } from 'solid-js/web';
+import { splitProps, createMemo, createContext, createSignal, useContext, Show, onMount, onCleanup, For, createEffect, children, createResource } from 'solid-js';
+import { unwrap, createStore } from 'solid-js/store';
 
 function styleInject(css, ref) {
   if (ref === void 0) ref = {};
@@ -671,7 +182,7 @@ const Carousel = ({
   };
   // ----- Effects -----
   // Keep internal signal in sync when switching from uncontrolled to controlled or external changes
-  createRenderEffect(() => {
+  effect(() => {
     if (!propIndex.currentIndex) return; // controlled only
     // Mirror external index into internal for consistency (e.g., if component logic elsewhere reads internalIndex)
     if (internalIndex() !== propIndex.currentIndex[0]()) {
@@ -687,7 +198,7 @@ const Carousel = ({
       var _el$6 = _tmpl$4$3(),
         _el$7 = _el$6.firstChild,
         _el$8 = _el$7.firstChild,
-        _el$11 = _el$7.nextSibling;
+        _el$1 = _el$7.nextSibling;
       insert(_el$7, createComponent(Button, {
         get ["class"]() {
           return `${style$7.carouselButton}`;
@@ -703,7 +214,7 @@ const Carousel = ({
         get children() {
           var _el$9 = _tmpl$3$5();
           insert(_el$9, slideName);
-          createRenderEffect(() => className(_el$9, `${style$7.carouselSlide}`));
+          effect(() => className(_el$9, `${style$7.carouselSlide}`));
           return _el$9;
         }
       }), null);
@@ -712,10 +223,10 @@ const Carousel = ({
           return Object.keys(props).includes('children');
         },
         get children() {
-          var _el$10 = _tmpl$3$5();
-          insert(_el$10, slideName);
-          createRenderEffect(() => className(_el$10, `${style$7.carouselSlide}`));
-          return _el$10;
+          var _el$0 = _tmpl$3$5();
+          insert(_el$0, slideName);
+          effect(() => className(_el$0, `${style$7.carouselSlide}`));
+          return _el$0;
         }
       }), null);
       insert(_el$7, createComponent(Button, {
@@ -725,8 +236,8 @@ const Carousel = ({
         onClick: nextSlide,
         children: "\u276F"
       }), null);
-      insert(_el$11, slideElement);
-      createRenderEffect(_p$ => {
+      insert(_el$1, slideElement);
+      effect(_p$ => {
         var _v$ = `${style$7.carousel}`,
           _v$2 = `${style$7.carouselHeader}`,
           _v$3 = `${style$7.carouselSlides}`,
@@ -734,7 +245,7 @@ const Carousel = ({
         _v$ !== _p$.e && className(_el$6, _p$.e = _v$);
         _v$2 !== _p$.t && className(_el$7, _p$.t = _v$2);
         _v$3 !== _p$.a && className(_el$8, _p$.a = _v$3);
-        _v$4 !== _p$.o && className(_el$11, _p$.o = _v$4);
+        _v$4 !== _p$.o && className(_el$1, _p$.o = _v$4);
         return _p$;
       }, {
         e: undefined,
@@ -752,7 +263,7 @@ const Slide = props => {
   onMount(() => {
     setTitle(old => [...old, props.title]);
   });
-  return createMemo(() => props.children);
+  return memo(() => props.children);
 };
 
 var css_248z$h = ".Chip-module_Chip__HWK4W {\n  display: flex;\n  flex-direction: row;\n  padding: 5px 10px;\n  margin-left: 8px;\n  border-radius: 15px;\n  height: -moz-max-content;\n  height: max-content;\n  min-width: -moz-min-content;\n  min-width: min-content;\n  max-width: -moz-max-content;\n  max-width: max-content;\n  margin: 5px;\n}\n.Chip-module_Chip__HWK4W span {\n  margin: 0px 2px;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: 10em;\n  text-overflow: ellipsis;\n}\n.Chip-module_Chip__HWK4W button {\n  font-size: 1rem !important;\n  height: -moz-min-content;\n  height: min-content;\n  margin: auto 0px;\n  padding: 0px 4px !important;\n  margin-left: 5px !important;\n  border-radius: 8px;\n}\n\n.Chip-module_removeChipButton__kl1mU {\n  margin: 0 !important;\n  margin-left: 5px !important;\n  padding: 0 !important;\n  font-size: 1rem !important;\n}\n\n.Chip-module_hover__fvVQS:hover {\n  cursor: pointer;\n}\n\n.Chip-module_tertiary__TtdnV {\n  background-color: inherit;\n  color: var(--on-container-color, #000);\n  border: 1px solid var(--primary-color, #4CAF50);\n  margin-right: 6px;\n}\n.Chip-module_tertiary__TtdnV button {\n  background-color: inherit;\n  color: var(--on-container-color, #000);\n  font-weight: 700;\n}";
@@ -798,7 +309,7 @@ const Chip = props => {
         });
       }
     }), null);
-    createRenderEffect(() => className(_el$, `${style$6['tertiary']} ${style$6.Chip} ${props.class ?? ""} ${hoverChip}`));
+    effect(() => className(_el$, `${style$6['tertiary']} ${style$6.Chip} ${props.class ?? ""} ${hoverChip}`));
     return _el$;
   })();
 };
@@ -810,6 +321,9 @@ styleInject(css_248z$g);
 
 var _tmpl$$l = /*#__PURE__*/template(`<span>`),
   _tmpl$2$a = /*#__PURE__*/template(`<div><div>`);
+// Single union signature: babel-preset-solid rewrites this `function Chipbar` into
+// `var Chipbar = _$$component(...)`, which orphans TS overload signatures and breaks
+// vite 8's Oxc transformer. Runtime already discriminates the two shapes via `hasSignalChips`.
 function Chipbar(props) {
   const hasSignalChips = props.chips !== undefined;
   const [chipContainer, setChipContainer] = createSignal();
@@ -842,7 +356,7 @@ function Chipbar(props) {
       chipContainer().removeEventListener("scroll", scrollFunction);
     }
   });
-  createRenderEffect(() => {
+  effect(() => {
     const isChildArr = Array.isArray(props.children);
     if (isChildArr) {
       if (props.children.length > 0) {
@@ -875,14 +389,14 @@ function Chipbar(props) {
           onMouseDown: scrollLeft,
           children: "\u2190"
         }));
-        createRenderEffect(() => className(_el$2, `${style$5.leftArrow}`));
+        effect(() => className(_el$2, `${style$5.leftArrow}`));
         return _el$2;
       }
     }), _el$3);
     use(setChipContainer, _el$3);
     insert(_el$3, createComponent(Show, {
       get when() {
-        return (hasSignalChips || !hasSignalChips && props.clearAll !== undefined);
+        return memo(() => true)() && (hasSignalChips || !hasSignalChips && props.clearAll !== undefined);
       },
       get children() {
         var _el$4 = _tmpl$$l();
@@ -934,11 +448,11 @@ function Chipbar(props) {
           onMouseDown: scrollRight,
           children: "\u2192"
         }));
-        createRenderEffect(() => className(_el$5, `${style$5.rightArrow}`));
+        effect(() => className(_el$5, `${style$5.rightArrow}`));
         return _el$5;
       }
     }), null);
-    createRenderEffect(_p$ => {
+    effect(_p$ => {
       var _v$ = `${style$5.chipbar}`,
         _v$2 = `${style$5.chipContainer}`;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
@@ -979,6 +493,7 @@ const Provider$1 = props => {
   const [getValue, setValue] = createSignal(props.value ?? "");
   const [getFieldType, setFieldType] = createSignal(props.type ?? "text");
   const [getFormFieldRef, setFormFieldRef] = createSignal();
+  const [getOverlayRef, setOverlayRef] = createSignal();
   const [getErrors, setErrors] = createSignal({
     err: []
   });
@@ -997,6 +512,8 @@ const Provider$1 = props => {
         setFieldType,
         getFormFieldRef,
         setFormFieldRef,
+        getOverlayRef,
+        setOverlayRef,
         getErrors,
         setErrors,
         formName: props.formName
@@ -1015,220 +532,6 @@ function useFormProvider() {
   return context;
 }
 
-const $RAW = Symbol("store-raw"),
-  $NODE = Symbol("store-node"),
-  $HAS = Symbol("store-has"),
-  $SELF = Symbol("store-self");
-function wrap$1(value) {
-  let p = value[$PROXY];
-  if (!p) {
-    Object.defineProperty(value, $PROXY, {
-      value: p = new Proxy(value, proxyTraps$1)
-    });
-    if (!Array.isArray(value)) {
-      const keys = Object.keys(value),
-        desc = Object.getOwnPropertyDescriptors(value);
-      for (let i = 0, l = keys.length; i < l; i++) {
-        const prop = keys[i];
-        if (desc[prop].get) {
-          Object.defineProperty(value, prop, {
-            enumerable: desc[prop].enumerable,
-            get: desc[prop].get.bind(p)
-          });
-        }
-      }
-    }
-  }
-  return p;
-}
-function isWrappable(obj) {
-  let proto;
-  return obj != null && typeof obj === "object" && (obj[$PROXY] || !(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype || Array.isArray(obj));
-}
-function unwrap(item, set = new Set()) {
-  let result, unwrapped, v, prop;
-  if (result = item != null && item[$RAW]) return result;
-  if (!isWrappable(item) || set.has(item)) return item;
-  if (Array.isArray(item)) {
-    if (Object.isFrozen(item)) item = item.slice(0);else set.add(item);
-    for (let i = 0, l = item.length; i < l; i++) {
-      v = item[i];
-      if ((unwrapped = unwrap(v, set)) !== v) item[i] = unwrapped;
-    }
-  } else {
-    if (Object.isFrozen(item)) item = Object.assign({}, item);else set.add(item);
-    const keys = Object.keys(item),
-      desc = Object.getOwnPropertyDescriptors(item);
-    for (let i = 0, l = keys.length; i < l; i++) {
-      prop = keys[i];
-      if (desc[prop].get) continue;
-      v = item[prop];
-      if ((unwrapped = unwrap(v, set)) !== v) item[prop] = unwrapped;
-    }
-  }
-  return item;
-}
-function getNodes(target, symbol) {
-  let nodes = target[symbol];
-  if (!nodes) Object.defineProperty(target, symbol, {
-    value: nodes = Object.create(null)
-  });
-  return nodes;
-}
-function getNode(nodes, property, value) {
-  if (nodes[property]) return nodes[property];
-  const [s, set] = createSignal(value, {
-    equals: false,
-    internal: true
-  });
-  s.$ = set;
-  return nodes[property] = s;
-}
-function proxyDescriptor$1(target, property) {
-  const desc = Reflect.getOwnPropertyDescriptor(target, property);
-  if (!desc || desc.get || !desc.configurable || property === $PROXY || property === $NODE) return desc;
-  delete desc.value;
-  delete desc.writable;
-  desc.get = () => target[$PROXY][property];
-  return desc;
-}
-function trackSelf(target) {
-  getListener() && getNode(getNodes(target, $NODE), $SELF)();
-}
-function ownKeys(target) {
-  trackSelf(target);
-  return Reflect.ownKeys(target);
-}
-const proxyTraps$1 = {
-  get(target, property, receiver) {
-    if (property === $RAW) return target;
-    if (property === $PROXY) return receiver;
-    if (property === $TRACK) {
-      trackSelf(target);
-      return receiver;
-    }
-    const nodes = getNodes(target, $NODE);
-    const tracked = nodes[property];
-    let value = tracked ? tracked() : target[property];
-    if (property === $NODE || property === $HAS || property === "__proto__") return value;
-    if (!tracked) {
-      const desc = Object.getOwnPropertyDescriptor(target, property);
-      if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property)) && !(desc && desc.get)) value = getNode(nodes, property, value)();
-    }
-    return isWrappable(value) ? wrap$1(value) : value;
-  },
-  has(target, property) {
-    if (property === $RAW || property === $PROXY || property === $TRACK || property === $NODE || property === $HAS || property === "__proto__") return true;
-    getListener() && getNode(getNodes(target, $HAS), property)();
-    return property in target;
-  },
-  set() {
-    return true;
-  },
-  deleteProperty() {
-    return true;
-  },
-  ownKeys: ownKeys,
-  getOwnPropertyDescriptor: proxyDescriptor$1
-};
-function setProperty(state, property, value, deleting = false) {
-  if (!deleting && state[property] === value) return;
-  const prev = state[property],
-    len = state.length;
-  if (value === undefined) {
-    delete state[property];
-    if (state[$HAS] && state[$HAS][property] && prev !== undefined) state[$HAS][property].$();
-  } else {
-    state[property] = value;
-    if (state[$HAS] && state[$HAS][property] && prev === undefined) state[$HAS][property].$();
-  }
-  let nodes = getNodes(state, $NODE),
-    node;
-  if (node = getNode(nodes, property, prev)) node.$(() => value);
-  if (Array.isArray(state) && state.length !== len) {
-    for (let i = state.length; i < len; i++) (node = nodes[i]) && node.$();
-    (node = getNode(nodes, "length", len)) && node.$(state.length);
-  }
-  (node = nodes[$SELF]) && node.$();
-}
-function mergeStoreNode(state, value) {
-  const keys = Object.keys(value);
-  for (let i = 0; i < keys.length; i += 1) {
-    const key = keys[i];
-    setProperty(state, key, value[key]);
-  }
-}
-function updateArray(current, next) {
-  if (typeof next === "function") next = next(current);
-  next = unwrap(next);
-  if (Array.isArray(next)) {
-    if (current === next) return;
-    let i = 0,
-      len = next.length;
-    for (; i < len; i++) {
-      const value = next[i];
-      if (current[i] !== value) setProperty(current, i, value);
-    }
-    setProperty(current, "length", len);
-  } else mergeStoreNode(current, next);
-}
-function updatePath(current, path, traversed = []) {
-  let part,
-    prev = current;
-  if (path.length > 1) {
-    part = path.shift();
-    const partType = typeof part,
-      isArray = Array.isArray(current);
-    if (Array.isArray(part)) {
-      for (let i = 0; i < part.length; i++) {
-        updatePath(current, [part[i]].concat(path), traversed);
-      }
-      return;
-    } else if (isArray && partType === "function") {
-      for (let i = 0; i < current.length; i++) {
-        if (part(current[i], i)) updatePath(current, [i].concat(path), traversed);
-      }
-      return;
-    } else if (isArray && partType === "object") {
-      const {
-        from = 0,
-        to = current.length - 1,
-        by = 1
-      } = part;
-      for (let i = from; i <= to; i += by) {
-        updatePath(current, [i].concat(path), traversed);
-      }
-      return;
-    } else if (path.length > 1) {
-      updatePath(current[part], path, [part].concat(traversed));
-      return;
-    }
-    prev = current[part];
-    traversed = [part].concat(traversed);
-  }
-  let value = path[0];
-  if (typeof value === "function") {
-    value = value(prev, traversed);
-    if (value === prev) return;
-  }
-  if (part === undefined && value == undefined) return;
-  value = unwrap(value);
-  if (part === undefined || isWrappable(prev) && isWrappable(value) && !Array.isArray(value)) {
-    mergeStoreNode(prev, value);
-  } else setProperty(current, part, value);
-}
-function createStore(...[store, options]) {
-  const unwrappedStore = unwrap(store || {});
-  const isArray = Array.isArray(unwrappedStore);
-  const wrappedStore = wrap$1(unwrappedStore);
-  function setStore(...args) {
-    batch(() => {
-      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
-    });
-  }
-  return [wrappedStore, setStore];
-}
-
 /**
  * Set the data-theme attribute on <body>.
  * Accepts only 'dark' | 'light' (case-insensitive). Any invalid value falls back to 'dark'.
@@ -1363,33 +666,24 @@ function Clone(obj, maintainFunctions, seen = new WeakMap()) {
  * @param callback - The function to execute when a click occurs outside all the target elements.
  */
 function useClickOutside(elementRefs, callback) {
-  // Handler that checks if the click is outside all the elements.
+  // Single handler reference, used for BOTH add and remove so cleanup actually
+  // detaches the listener (previously a second handler was registered in onMount
+  // while onCleanup removed an unrelated one, leaking the listener past unmount).
+  // Uses composedPath so clicks inside portaled overlays are still counted as inside.
   const handleClick = event => {
-    // Loop through each element reference.
-    for (const ref of elementRefs) {
+    const path = event.composedPath();
+    // If the click is inside ANY ref'ed element, do nothing.
+    if (elementRefs.some(ref => {
       const el = ref();
-      // If the element exists and the click occurred inside it, do nothing.
-      if (el && el.contains(event.target)) {
-        return;
-      }
-    }
-    // If the click was not inside any of the referenced elements, execute the callback.
+      return el && path.includes(el);
+    })) return;
     callback();
   };
   // Set up the event listener when the component mounts.
   onMount(() => {
-    const handleClick = event => {
-      const path = event.composedPath();
-      // If click is inside ANY ref’ed element, do nothing
-      if (elementRefs.some(ref => {
-        const el = ref();
-        return el && path.includes(el);
-      })) return;
-      callback();
-    };
-    document.addEventListener('pointerdown', handleClick); // capture phase
+    document.addEventListener('pointerdown', handleClick);
   });
-  // Clean up the event listener when the component unmounts.
+  // Clean up the same listener when the component unmounts.
   onCleanup(() => {
     document.removeEventListener('pointerdown', handleClick);
   });
@@ -1408,6 +702,7 @@ function useClickOutside(elementRefs, callback) {
 function useOverlayPosition(anchorRef, overlayRef, open, config) {
   const VIEWPORT_MARGIN = 4;
   const MIN_HEIGHT = 160;
+  const MAX_HEIGHT = 304;
   const [dropTop, setDropTop] = createSignal(false);
   const getOverlayMetrics = () => {
     const el = overlayRef();
@@ -1416,10 +711,11 @@ function useOverlayPosition(anchorRef, overlayRef, open, config) {
       width: 0
     };
     const rect = el.getBoundingClientRect();
-    // When scaled/hidden, height can be 0; fallback to scrollHeight
-    const height = rect.height === 0 ? el.scrollHeight || rect.height : rect.height;
+    // scrollHeight is the overlay's *natural* content height, independent of any
+    // max-height currently applied (base CSS or a previous run's inline style) and
+    // of the scaleY(0) open/close transform — so placement is stable across runs.
     return {
-      height,
+      height: el.scrollHeight || rect.height,
       width: rect.width
     };
   };
@@ -1429,44 +725,47 @@ function useOverlayPosition(anchorRef, overlayRef, open, config) {
     if (!overlay || !anchor) return;
     const baseRect = anchor.getBoundingClientRect();
     const {
-      height: overlayHeight
+      height: contentHeight
     } = getOverlayMetrics();
+    // The overlay never renders taller than MAX_HEIGHT — longer lists scroll.
+    const desired = Math.min(contentHeight, MAX_HEIGHT);
     const spaceBelow = window.innerHeight - baseRect.bottom;
     const spaceAbove = baseRect.top;
-    // Decide orientation: prefer below if it fits, else above, else whichever has more room
+    // Decide orientation: prefer below if the (capped) overlay fits, else above,
+    // else whichever side has more room.
     let placeAbove = false;
-    if (overlayHeight + VIEWPORT_MARGIN <= spaceBelow) {
+    if (desired + VIEWPORT_MARGIN <= spaceBelow) {
       placeAbove = false;
-    } else if (overlayHeight + VIEWPORT_MARGIN <= spaceAbove) {
+    } else if (desired + VIEWPORT_MARGIN <= spaceAbove) {
       placeAbove = true;
     } else {
       placeAbove = spaceAbove > spaceBelow;
     }
     setDropTop(placeAbove);
-    // Clamp max-height to available space
-    const availableSpace = (placeAbove ? spaceAbove : spaceBelow) - VIEWPORT_MARGIN;
-    const maxHeight = Math.max(MIN_HEIGHT, availableSpace);
-    let newY;
-    if (!placeAbove) {
-      newY = baseRect.bottom + window.scrollY;
-      if (newY + overlayHeight + VIEWPORT_MARGIN > window.scrollY + window.innerHeight) {
-        newY = window.scrollY + window.innerHeight - overlayHeight - VIEWPORT_MARGIN;
-      }
-    } else {
-      newY = baseRect.top + window.scrollY - overlayHeight;
-      if (newY < window.scrollY + VIEWPORT_MARGIN) {
-        newY = window.scrollY + VIEWPORT_MARGIN;
-      }
-    }
-    // Final guard
+    // Actual rendered height: capped to MAX_HEIGHT and to the room on the chosen
+    // side (never below MIN_HEIGHT). Using this same value for both max-height and
+    // the y-offset keeps the overlay flush with the control instead of overlapping
+    // it — the old code measured one height but applied a much larger one.
+    const available = (placeAbove ? spaceAbove : spaceBelow) - VIEWPORT_MARGIN;
+    const overlayHeight = Math.min(desired, Math.max(available, MIN_HEIGHT));
+    // Attach flush to the anchor: directly below it, or its bottom against the
+    // anchor's top when placing above.
+    let newY = placeAbove ? baseRect.top + window.scrollY - overlayHeight : baseRect.bottom + window.scrollY;
     if (newY < window.scrollY + VIEWPORT_MARGIN) {
       newY = window.scrollY + VIEWPORT_MARGIN;
     }
+    // Clamp the bottom edge inside the viewport. On a very small viewport both
+    // sides can be shorter than MIN_HEIGHT, so overlayHeight floors to MIN_HEIGHT
+    // and a below-placed overlay would otherwise run past the bottom edge.
+    const maxBottom = window.scrollY + window.innerHeight - VIEWPORT_MARGIN;
+    if (newY + overlayHeight > maxBottom) {
+      newY = Math.max(window.scrollY + VIEWPORT_MARGIN, maxBottom - overlayHeight);
+    }
     const newX = baseRect.left + window.scrollX;
     overlay.style.left = `${newX}px`;
     overlay.style.top = `${newY}px`;
     overlay.style.width = `${baseRect.width}px`;
-    overlay.style.maxHeight = `${maxHeight}px`;
+    overlay.style.maxHeight = `${overlayHeight}px`;
   };
   // Re-position when open changes
   createEffect(() => {
@@ -1503,17 +802,17 @@ class FormArray {
    * Array-level validators that validate the entire array of form group values.
    * @private
    */
-  internalArrayValidation;
+
   /**
    * The FormGroup instances managed by this array.
    * @private
    */
-  groups;
+
   /**
    * Solid store setter for the groups array.
    * @private
    */
-  setGroups;
+
   /**
    * Array-level errors (from array-level validators only).
    * Per-item errors live in each FormGroup.
@@ -1524,7 +823,7 @@ class FormArray {
    * Snapshot of initial groups for reset.
    * @private
    */
-  _initialGroups;
+
   /**
    * Creates an instance of FormArray.
    *
@@ -1763,6 +1062,20 @@ class FormArray {
   validateCurrent(index) {
     return this.validate(index);
   }
+  /**
+   * Validates a SINGLE field within the group at the given index, without
+   * touching that group's other fields or the array-level validators. Used by
+   * direct field bindings (e.g. an Input/Select bound to one array-item property)
+   * so blurring one field does not eagerly flag its siblings.
+   *
+   * @param index - The index of the group.
+   * @param key - The property key to validate.
+   * @returns `true` if the field is valid (or the group is missing), else `false`.
+   */
+  validateField(index, key) {
+    const group = this.getGroup(index);
+    return group ? group.validate(key) : false;
+  }
   /**
    * Validates the form array.
    *
@@ -1789,6 +1102,31 @@ class FormArray {
     const allGroupsValid = groupResults.every(Boolean);
     return allGroupsValid && arrayValid;
   }
+  /**
+   * Async counterpart to {@link validate}. Awaits async (and sync) array-level
+   * validators and each group's `validateAsync`, so forms with async validators
+   * are correctly enforced on submit.
+   *
+   * @param index - (Optional) The index of a single group to validate.
+   * @returns A promise resolving to `true` if all validations pass.
+   */
+  async validateAsync(index) {
+    const values = this.get();
+    this.arrayErrors = await Promise.all(this.internalArrayValidation.map(async validator => ({
+      key: validator.errKey,
+      hasError: !(await validator.revalidate(values))
+    })));
+    const arrayValid = this.arrayErrors.every(e => !e.hasError);
+    if (index !== undefined && index !== null) {
+      const group = this.getGroup(index);
+      if (!group) return false;
+      const groupValid = await group.validateAsync();
+      return groupValid && arrayValid;
+    }
+    const groupResults = await Promise.all(this.groups.map(g => g.validateAsync()));
+    const allGroupsValid = groupResults.every(Boolean);
+    return allGroupsValid && arrayValid;
+  }
 }
 
 var _tmpl$$j = /*#__PURE__*/template(`<form>`);
@@ -1840,10 +1178,12 @@ const Form = props => {
 const FormInner = props => {
   const [formRef, setFormRef] = createSignal();
   const formData = useFormContext();
-  const submitFunction = e => {
-    const submitData = CloneStore(formData?.data ?? {});
+  const submitFunction = async e => {
     e.preventDefault();
-    if (formData.formGroup?.validate()) {
+    const submitData = CloneStore(formData?.data ?? {});
+    // Use validateAsync so async validators are actually enforced before submit
+    // (sync validate() optimistically treats pending async validators as passing).
+    if (await formData.formGroup?.validateAsync()) {
       props?.onSubmit?.(submitData);
     }
   };
@@ -1862,9 +1202,10 @@ const FormInner = props => {
 };
 const FormInnerArray = props => {
   const [formRef, setFormRef] = createSignal();
-  const submitFunction = e => {
+  const submitFunction = async e => {
     e.preventDefault();
-    if (props.formArray.validateCurrent()) {
+    // Await async validators (see FormInner) before submitting the array data.
+    if (await props.formArray.validateAsync()) {
       props.onSubmit(props.formArray.get());
     }
   };
@@ -1890,7 +1231,17 @@ const Provider = props => {
     const raw = props.formGroup._unsafeRaw(); // reactive read of underlying store
     for (const k in raw) {
       const nextVal = raw[k];
-      if (data[k] !== nextVal) {
+      // Plain objects/arrays are cloned at the boundary so the context store never
+      // shares references with the FormGroup's internal store (a mutation of one
+      // would otherwise silently mutate the other). FormArray instances and
+      // primitives pass through by reference. The structural compare prevents an
+      // infinite re-clone loop (a fresh clone is never reference-equal).
+      const isPlainObject = nextVal && typeof nextVal === 'object' && !(nextVal instanceof FormArray);
+      if (isPlainObject) {
+        if (JSON.stringify(data[k]) !== JSON.stringify(nextVal)) {
+          setData(k, CloneStore(nextVal));
+        }
+      } else if (data[k] !== nextVal) {
         setData(k, nextVal);
       }
     }
@@ -1946,9 +1297,12 @@ function useDirectFormBinding(props) {
     if (formContext?.formArray) {
       return formContext.formArray;
     }
-    // FormArray within FormGroup
+    // FormArray within FormGroup. Read the raw store value (the live FormArray
+    // instance) rather than getR(), which returns the array's plain values and
+    // would never be `instanceof FormArray`.
     if (props.formArrayName && formContext?.formGroup) {
-      const field = formContext.formGroup.getR(props.formArrayName);
+      const raw = formContext.formGroup._unsafeRaw();
+      const field = raw?.[props.formArrayName];
       if (field instanceof FormArray) {
         return field;
       }
@@ -1973,10 +1327,11 @@ function useDirectFormBinding(props) {
       fa.setProperty(props.formIndex, resolvedFormName, val);
       return;
     }
-    // Simple FormGroup binding
+    // Simple FormGroup binding. The Form Provider bridge effect mirrors the
+    // FormGroup store into the context store, so an explicit setData here is
+    // redundant (and would double-write the same key).
     if (resolvedFormName && formContext?.formGroup) {
       formContext.formGroup.set(resolvedFormName, val);
-      formContext.setData?.(resolvedFormName, val);
     }
   };
   const markDirty = () => {
@@ -1998,6 +1353,10 @@ function useDirectFormBinding(props) {
   const validate = () => {
     const fa = resolvedFormArray();
     if (fa && props.formIndex !== undefined) {
+      // Validate only the bound field, not the whole row + array-level validators.
+      if (resolvedFormName) {
+        return fa.validateField(props.formIndex, resolvedFormName);
+      }
       return fa.validateCurrent(props.formIndex);
     }
     if (resolvedFormName && formContext?.formGroup) {
@@ -2165,7 +1524,7 @@ const Input = props => {
         }
       },
       get type() {
-        return props.type === "checkbox" ? "text" : props.type ?? "text";
+        return memo(() => props.type === "checkbox")() ? "text" : props.type ?? "text";
       },
       "onChange": onChange,
       get ["class"]() {
@@ -2251,15 +1610,15 @@ function Checkbox(props) {
       _el$3 = _el$2.nextSibling;
     _el$2.addEventListener("change", handleChange);
     insert(_el$, (() => {
-      var _c$ = createMemo(() => !!props.label);
+      var _c$ = memo(() => !!props.label);
       return () => _c$() && (() => {
         var _el$4 = _tmpl$2$9();
         insert(_el$4, () => props.label);
-        createRenderEffect(() => className(_el$4, styles$8["checkbox__label"]));
+        effect(() => className(_el$4, styles$8["checkbox__label"]));
         return _el$4;
       })();
     })(), null);
-    createRenderEffect(_p$ => {
+    effect(_p$ => {
       var _v$ = styles$8.checkbox,
         _v$2 = {
           [styles$8["checkbox--disabled"]]: props.disabled,
@@ -2284,12 +1643,12 @@ function Checkbox(props) {
       i: undefined,
       n: undefined
     });
-    createRenderEffect(() => _el$2.checked = checkedState());
+    effect(() => _el$2.checked = checkedState());
     return _el$;
   })();
 }
 
-var css_248z$c = ".selectStyles-module_solid_select__placeholder__VO5-- {\n  opacity: var(--text-emphasis-medium, 87%);\n  transition: all 0.7s ease;\n}\n\n.selectStyles-module_solid_select__transparent__nOpvm {\n  background-color: transparent;\n}\n\n.selectStyles-module_solid_select__3plh1 {\n  display: inline-block;\n  position: relative;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  text-align: left;\n  border-radius: 8px;\n  width: 100%;\n  margin: 0px 6px;\n}\n\n.selectStyles-module_solid_select__control__Wmmpg {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  max-height: 48px;\n  border-radius: 8px;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  cursor: pointer;\n  transition: border 0.7s ease, padding 0.7s ease;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.selectStyles-module_solid_select__control__Wmmpg:first-child {\n  flex-grow: 1;\n}\n.selectStyles-module_solid_select__control__Wmmpg:last-child {\n  padding: 0px 6px;\n  margin: 0px;\n}\n\n.selectStyles-module_solid_select__control_no_form__Cq9Sc {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 48px;\n  border-radius: 8px;\n  width: 200px;\n  margin-top: 2px;\n  cursor: pointer;\n}\n.selectStyles-module_solid_select__control_no_form__Cq9Sc:first-child {\n  flex-grow: 1;\n}\n.selectStyles-module_solid_select__control_no_form__Cq9Sc:last-child {\n  padding: 0px 6px;\n  margin: 0px;\n}\n\n.selectStyles-module_solid_select__disabled__5rUz8 {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.selectStyles-module_solid_select__arrow__OPCZo {\n  font-size: 0.7em;\n}\n\n.selectStyles-module_solid_select__value__rNtqF {\n  flex-grow: 1;\n  transition: all 0.3s ease;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n}\n\n.selectStyles-module_multiselect-value__UUhhP {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n\n.selectStyles-module_solid_select__dropdown__UCt-N {\n  position: absolute;\n  background-color: var(--surface-color, #EEEEEE);\n  top: 100%;\n  left: 0;\n  z-index: 999999999999999;\n  max-height: 200px;\n  border-radius: 8px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n  transform-origin: top;\n  transform: scaleY(0);\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n  opacity: 0;\n}\n\n.selectStyles-module_dropTop__IVz9p {\n  transform-origin: bottom;\n}\n\n.selectStyles-module_dropBottom__cYJF0 {\n  transform-origin: top;\n}\n\n.selectStyles-module_open__f8zLA {\n  transform: scaleY(1);\n  opacity: 1;\n}\n\n.selectStyles-module_solid_select__option__47WMY {\n  padding: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  border-radius: 8px;\n}\n.selectStyles-module_solid_select__option__47WMY:hover {\n  border: 2px inset var(--primary-color-varient, #43A047);\n}\n.selectStyles-module_solid_select__option__47WMY:has(.selectStyles-module_selected__1-CKm) {\n  font-weight: bold;\n}\n\n.selectStyles-module_solid_select__option_highlight__hPSRL {\n  border: 2px inset var(--primary-color-varient, #43A047);\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n\n.selectStyles-module_solid_select__option_disabled__IZBcA {\n  cursor: not-allowed;\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n.selectStyles-module_checkmark__UWcbd {\n  display: inline-block;\n  width: 1.2em;\n  margin-right: 4px;\n  text-align: center;\n}\n\n.selectStyles-module_option-label__bBFSW {\n  width: -moz-max-content;\n  width: max-content;\n  height: -moz-max-content;\n  height: max-content;\n}\n\n.selectStyles-module_solid_select__mobile_backdrop__MQU3O {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999999999999999;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  animation: selectStyles-module_mobileBackdropFadeIn__BMxpT 0.2s ease-out;\n}\n\n.selectStyles-module_solid_select__mobile_popup__-MO-i {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 90vw;\n  max-width: 400px;\n  max-height: 60vh;\n  border-radius: 16px 16px 0 0;\n  background-color: var(--surface-color, #EEEEEE);\n  color: var(--on-surface-color, #000000);\n  overflow: hidden;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.45);\n  animation: selectStyles-module_mobileSlideUp__JlYpt 0.3s ease-out;\n}\n\n.selectStyles-module_solid_select__mobile_header__gpULA {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 16px;\n  min-height: 48px;\n  background-color: var(--surface-color, #EEEEEE);\n  color: var(--on-surface-color, #000000);\n  border-bottom: 1px solid var(--surface-color-variant, #ccc);\n  flex-shrink: 0;\n}\n\n.selectStyles-module_solid_select__mobile_title__MNbIa {\n  font-size: 18px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.selectStyles-module_solid_select__mobile_close__RgfaX {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--on-surface-color, #000000);\n  font-size: 18px;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: background-color 0.15s ease;\n}\n.selectStyles-module_solid_select__mobile_close__RgfaX:hover {\n  background-color: var(--surface-color-variant, #ccc);\n}\n.selectStyles-module_solid_select__mobile_close__RgfaX:active {\n  background-color: var(--surface-color-variant, #ccc);\n}\n\n.selectStyles-module_solid_select__mobile_options__01rHy {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 8px 0;\n  -webkit-overflow-scrolling: touch;\n}\n\n.selectStyles-module_solid_select__mobile_footer__U08m7 {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px 16px;\n  min-height: 52px;\n  background-color: var(--surface-color, #EEEEEE);\n  border-top: 1px solid var(--surface-color-variant, #ccc);\n  flex-shrink: 0;\n}\n\n.selectStyles-module_solid_select__mobile_done__Xp6Gu {\n  padding: 8px 24px;\n  border: none;\n  border-radius: 8px;\n  background-color: var(--primary-color, #4CAF50);\n  color: var(--on-primary-color, #fff);\n  font-size: 16px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n}\n.selectStyles-module_solid_select__mobile_done__Xp6Gu:hover {\n  background-color: var(--primary-color-varient, #43A047);\n}\n.selectStyles-module_solid_select__mobile_done__Xp6Gu:active {\n  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n@keyframes selectStyles-module_mobileBackdropFadeIn__BMxpT {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes selectStyles-module_mobileSlideUp__JlYpt {\n  from {\n    transform: translateY(30%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}";
+var css_248z$c = ".selectStyles-module_solid_select__placeholder__VO5-- {\n  opacity: var(--text-emphasis-medium, 87%);\n  transition: all 0.7s ease;\n}\n\n.selectStyles-module_solid_select__transparent__nOpvm {\n  background-color: transparent;\n}\n\n.selectStyles-module_solid_select__3plh1 {\n  display: inline-block;\n  position: relative;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  text-align: left;\n  border-radius: 8px;\n  width: 100%;\n  margin: 0px 6px;\n}\n\n.selectStyles-module_solid_select__control__Wmmpg {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  max-height: 48px;\n  border-radius: 8px;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  cursor: pointer;\n  transition: border 0.7s ease, padding 0.7s ease;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.selectStyles-module_solid_select__control__Wmmpg:first-child {\n  flex-grow: 1;\n}\n.selectStyles-module_solid_select__control__Wmmpg:last-child {\n  padding: 0px 6px;\n  margin: 0px;\n}\n\n.selectStyles-module_solid_select__control_no_form__Cq9Sc {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 48px;\n  border-radius: 8px;\n  width: 200px;\n  margin-top: 2px;\n  cursor: pointer;\n}\n.selectStyles-module_solid_select__control_no_form__Cq9Sc:first-child {\n  flex-grow: 1;\n}\n.selectStyles-module_solid_select__control_no_form__Cq9Sc:last-child {\n  padding: 0px 6px;\n  margin: 0px;\n}\n\n.selectStyles-module_solid_select__disabled__5rUz8 {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.selectStyles-module_solid_select__arrow__OPCZo {\n  font-size: 0.7em;\n}\n\n.selectStyles-module_solid_select__value__rNtqF {\n  flex-grow: 1;\n  transition: all 0.3s ease;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n}\n\n.selectStyles-module_multiselect-value__UUhhP {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n\n.selectStyles-module_solid_select__dropdown__UCt-N {\n  position: absolute;\n  background-color: var(--surface-color, #EEEEEE);\n  top: 100%;\n  left: 0;\n  z-index: 999999999999999;\n  max-height: 200px;\n  border-radius: 8px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n  transform-origin: top;\n  transform: scaleY(0);\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n  opacity: 0;\n}\n\n.selectStyles-module_dropTop__IVz9p {\n  transform-origin: bottom;\n}\n\n.selectStyles-module_dropBottom__cYJF0 {\n  transform-origin: top;\n}\n\n.selectStyles-module_open__f8zLA {\n  transform: scaleY(1);\n  opacity: 1;\n}\n\n.selectStyles-module_solid_select__option__47WMY {\n  padding: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  border-radius: 8px;\n}\n.selectStyles-module_solid_select__option__47WMY:hover {\n  border: 2px inset var(--primary-color-varient, #43A047);\n}\n.selectStyles-module_solid_select__option__47WMY:has(.selectStyles-module_selected__1-CKm) {\n  font-weight: bold;\n}\n\n.selectStyles-module_solid_select__option_highlight__hPSRL {\n  border: 2px inset var(--primary-color-varient, #43A047);\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n\n.selectStyles-module_solid_select__option_disabled__IZBcA {\n  cursor: not-allowed;\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n.selectStyles-module_checkmark__UWcbd {\n  display: inline-block;\n  width: 1.2em;\n  margin-right: 4px;\n  text-align: center;\n}\n\n.selectStyles-module_option-label__bBFSW {\n  width: -moz-max-content;\n  width: max-content;\n  height: -moz-max-content;\n  height: max-content;\n}\n\n.selectStyles-module_solid_select__mobile_backdrop__MQU3O {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999999999999999;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  animation: selectStyles-module_mobileBackdropFadeIn__BMxpT 0.2s ease-out;\n}\n\n.selectStyles-module_solid_select__mobile_popup__-MO-i {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 90vw;\n  max-width: 400px;\n  max-height: 60vh;\n  border-radius: 16px 16px 0 0;\n  background-color: var(--surface-color, #EEEEEE);\n  color: var(--on-surface-color, #000000);\n  overflow: hidden;\n  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.45);\n  animation: selectStyles-module_mobileSlideUp__JlYpt 0.3s ease-out;\n}\n\n.selectStyles-module_solid_select__mobile_header__gpULA {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 16px;\n  min-height: 48px;\n  background-color: var(--surface-color, #EEEEEE);\n  color: var(--on-surface-color, #000000);\n  border-bottom: 1px solid var(--surface-color-variant, #ccc);\n  flex-shrink: 0;\n}\n\n.selectStyles-module_solid_select__mobile_title__MNbIa {\n  font-size: 18px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.selectStyles-module_solid_select__mobile_close__RgfaX {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--on-surface-color, #000000);\n  font-size: 18px;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: background-color 0.15s ease;\n}\n.selectStyles-module_solid_select__mobile_close__RgfaX:hover {\n  background-color: var(--surface-color-variant, #ccc);\n}\n.selectStyles-module_solid_select__mobile_close__RgfaX:active {\n  background-color: var(--surface-color-variant, #ccc);\n}\n\n.selectStyles-module_solid_select__mobile_options__01rHy {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 8px 0;\n  -webkit-overflow-scrolling: touch;\n}\n\n.selectStyles-module_solid_select__mobile_footer__U08m7 {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px 16px;\n  min-height: 52px;\n  background-color: var(--surface-color, #EEEEEE);\n  border-top: 1px solid var(--surface-color-variant, #ccc);\n  flex-shrink: 0;\n}\n\n.selectStyles-module_solid_select__mobile_done__Xp6Gu {\n  padding: 8px 24px;\n  border: none;\n  border-radius: 8px;\n  background-color: var(--primary-color, #4CAF50);\n  color: var(--on-primary-color, #fff);\n  font-size: 16px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n}\n.selectStyles-module_solid_select__mobile_done__Xp6Gu:hover {\n  background-color: var(--primary-color-varient, #43A047);\n}\n.selectStyles-module_solid_select__mobile_done__Xp6Gu:active {\n  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n@keyframes selectStyles-module_mobileBackdropFadeIn__BMxpT {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes selectStyles-module_mobileSlideUp__JlYpt {\n  from {\n    transform: translateY(30%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}";
 var styles$7 = {"solid_select__placeholder":"selectStyles-module_solid_select__placeholder__VO5--","solid_select__transparent":"selectStyles-module_solid_select__transparent__nOpvm","solid_select":"selectStyles-module_solid_select__3plh1","solid_select__control":"selectStyles-module_solid_select__control__Wmmpg","solid_select__control_no_form":"selectStyles-module_solid_select__control_no_form__Cq9Sc","solid_select__disabled":"selectStyles-module_solid_select__disabled__5rUz8","solid_select__arrow":"selectStyles-module_solid_select__arrow__OPCZo","solid_select__value":"selectStyles-module_solid_select__value__rNtqF","multiselect-value":"selectStyles-module_multiselect-value__UUhhP","solid_select__dropdown":"selectStyles-module_solid_select__dropdown__UCt-N","dropTop":"selectStyles-module_dropTop__IVz9p","dropBottom":"selectStyles-module_dropBottom__cYJF0","open":"selectStyles-module_open__f8zLA","solid_select__option":"selectStyles-module_solid_select__option__47WMY","selected":"selectStyles-module_selected__1-CKm","solid_select__option_highlight":"selectStyles-module_solid_select__option_highlight__hPSRL","solid_select__option_disabled":"selectStyles-module_solid_select__option_disabled__IZBcA","checkmark":"selectStyles-module_checkmark__UWcbd","option-label":"selectStyles-module_option-label__bBFSW","solid_select__mobile_backdrop":"selectStyles-module_solid_select__mobile_backdrop__MQU3O","mobileBackdropFadeIn":"selectStyles-module_mobileBackdropFadeIn__BMxpT","solid_select__mobile_popup":"selectStyles-module_solid_select__mobile_popup__-MO-i","mobileSlideUp":"selectStyles-module_mobileSlideUp__JlYpt","solid_select__mobile_header":"selectStyles-module_solid_select__mobile_header__gpULA","solid_select__mobile_title":"selectStyles-module_solid_select__mobile_title__MNbIa","solid_select__mobile_close":"selectStyles-module_solid_select__mobile_close__RgfaX","solid_select__mobile_options":"selectStyles-module_solid_select__mobile_options__01rHy","solid_select__mobile_footer":"selectStyles-module_solid_select__mobile_footer__U08m7","solid_select__mobile_done":"selectStyles-module_solid_select__mobile_done__Xp6Gu"};
 styleInject(css_248z$c);
 
@@ -2544,19 +1903,23 @@ function useTypeahead(config) {
   };
 }
 
-var _tmpl$$g = /*#__PURE__*/template(`<span>`),
-  _tmpl$2$8 = /*#__PURE__*/template(`<span>▲`),
-  _tmpl$3$3 = /*#__PURE__*/template(`<span>▼`),
-  _tmpl$4$2 = /*#__PURE__*/template(`<div>`),
-  _tmpl$5$1 = /*#__PURE__*/template(`<div><button type=button>Done`),
-  _tmpl$6$1 = /*#__PURE__*/template(`<div><div role=dialog aria-modal=true tabindex=-1><div><span></span><button type=button aria-label=Close>✕</button></div><div role=listbox>`),
-  _tmpl$7$1 = /*#__PURE__*/template(`<div is=coles-solid-select role=button tabindex=0><div><span>`, true, false, false);
+var _tmpl$$g = /*#__PURE__*/template(`<span style=opacity:0>`),
+  _tmpl$2$8 = /*#__PURE__*/template(`<span>`),
+  _tmpl$3$3 = /*#__PURE__*/template(`<span style=width:100%;height:100%>`),
+  _tmpl$4$2 = /*#__PURE__*/template(`<span>▲`),
+  _tmpl$5$2 = /*#__PURE__*/template(`<span>▼`),
+  _tmpl$6$1 = /*#__PURE__*/template(`<div>`),
+  _tmpl$7$1 = /*#__PURE__*/template(`<div><button type=button>Done`),
+  _tmpl$8 = /*#__PURE__*/template(`<div><div role=dialog aria-modal=true tabindex=-1><div><span></span><button type=button aria-label=Close>✕</button></div><div role=listbox>`),
+  _tmpl$9 = /*#__PURE__*/template(`<div is=coles-solid-select role=button tabindex=0><div style=height:100%><span>`, true, false, false);
 function Select(props) {
   const isMultiple = props.multiple !== undefined || props.multiple === true;
   const [currStyle, setCurrStyle] = createSignal("primary");
   const defaultSelected = isMultiple ? props.value ?? props.defaultValue ?? [] : props.value ?? props.defaultValue ?? undefined;
   const [selected, setSelected] = createSignal(defaultSelected);
   const [selectRef, setSelectRef] = createSignal();
+  // Outer wrapper (role="button") — the full-size clickable field box.
+  const [controlRef, setControlRef] = createSignal();
   const [dropdownRef, setDropdownRef] = createSignal();
   const [mobilePopupRef, setMobilePopupRef] = createSignal();
   let mobileOptionsRef;
@@ -2579,17 +1942,22 @@ function Select(props) {
   const hasForm = !!effectiveFormName || !!effectiveFormName || !!form?.getName || !!form?.getValue || !!form?.setValue || !!form?.getTextInside;
   const hasFormContext = hasForm && !!formContext?.formGroup;
   const currentValue = () => {
+    // FormArray-bound select reads the bound array-item property.
+    if (binding.isFormArray) {
+      return binding.getValue();
+    }
     if (hasFormContext) {
       return formContext.data?.[effectiveFormName ?? ''];
     }
     if (hasForm) {
       return form.getValue();
     }
-    return props?.value;
+    // Uncontrolled standalone: fall back to the internal selection signal so the
+    // displayed value (and multi-select toggling) reflect what the user picked.
+    return !isNullish(props?.value) ? props?.value : selected();
   };
   // Signal for dropdown open/closed
   const [open, setOpen] = createSignal(false);
-  const [menuRect, setMenuRect] = createSignal();
   const isDisabled = () => {
     const fieldset = form?.getFormFieldRef?.();
     const fieldsetDisabled = !!fieldset?.hasAttribute?.('disabled');
@@ -2653,8 +2021,10 @@ function Select(props) {
       if (meta && !meta.dirty) formContext.formGroup.markDirty(effectiveFormName);
     }
     if (isMultiple) {
-      // For multi-select, toggle the value in the array
-      const current = props?.value ?? [];
+      // For multi-select, toggle the value in the array. Use currentValue() (which
+      // resolves controlled props, form values, or the internal signal) instead of
+      // props.value — otherwise uncontrolled toggling always starts from [] and breaks.
+      const current = currentValue() ?? [];
       let newSelected;
       if (current.includes(val)) {
         newSelected = current.filter(item => item !== val);
@@ -2678,6 +2048,28 @@ function Select(props) {
       setOpen(false);
     }
   };
+  // Commit a value through the Select's direct binding when it targets a FormArray
+  // item (formIndex / formArrayName). The Option's FormContext/FormField fallbacks
+  // cannot reach an array item, so without this the write is silently dropped.
+  const commitValue = val => {
+    if (!binding.isFormArray) return false;
+    binding.markDirty?.();
+    if (isMultiple) {
+      const cur = binding.getValue() ?? [];
+      const next = cur.includes(val) ? cur.filter(v => v !== val) : [...cur, val];
+      binding.setValue(next);
+      setSelected(() => next);
+      props?.onChange?.(next);
+      props?.onSelect?.(next);
+    } else {
+      binding.setValue(val);
+      setSelected(() => val);
+      props?.onChange?.(val);
+      props?.onSelect?.(val);
+      setOpen(false);
+    }
+    return true;
+  };
   // Compute the content to display in the closed select (trigger area)
   const displayValue = createMemo(() => {
     const current = currentValue();
@@ -2687,15 +2079,14 @@ function Select(props) {
         if (hasForm && form.getTextInside() && !form.getFocused()) {
           return (() => {
             var _el$ = _tmpl$$g();
-            _el$.style.setProperty("opacity", "0");
-            createRenderEffect(() => className(_el$, `${styles$7["solid_select__placeholder"]}`));
+            effect(() => className(_el$, `${styles$7["solid_select__placeholder"]}`));
             return _el$;
           })();
         }
         return (() => {
-          var _el$2 = _tmpl$$g();
+          var _el$2 = _tmpl$2$8();
           insert(_el$2, () => props.placeholder || "Select...");
-          createRenderEffect(() => className(_el$2, `${styles$7["solid_select__placeholder"]}`));
+          effect(() => className(_el$2, `${styles$7["solid_select__placeholder"]}`));
           return _el$2;
         })();
       }
@@ -2704,11 +2095,9 @@ function Select(props) {
       } else {
         const labels = selectedArray.map(val => options[JSON.stringify(val)]?.label || String(val));
         return (() => {
-          var _el$3 = _tmpl$$g();
-          _el$3.style.setProperty("width", "100%");
-          _el$3.style.setProperty("height", "100%");
+          var _el$3 = _tmpl$3$3();
           insert(_el$3, () => labels.join(', '));
-          createRenderEffect(() => className(_el$3, `${styles$7["solid_select__value"]} ${styles$7["multiselect-value"]}`));
+          effect(() => className(_el$3, `${styles$7["solid_select__value"]} ${styles$7["multiselect-value"]}`));
           return _el$3;
         })();
       }
@@ -2718,41 +2107,29 @@ function Select(props) {
       if (isNullish(singleVal) || typeof singleVal === "string" && !!!singleVal.trim()) {
         if (hasForm && form.getTextInside() && !form.getFocused()) {
           return (() => {
-            var _el$4 = _tmpl$$g();
-            createRenderEffect(() => className(_el$4, `${styles$7["solid_select__placeholder"]}`));
+            var _el$4 = _tmpl$2$8();
+            effect(() => className(_el$4, `${styles$7["solid_select__placeholder"]}`));
             return _el$4;
           })();
         }
         return (() => {
-          var _el$5 = _tmpl$$g();
+          var _el$5 = _tmpl$2$8();
           insert(_el$5, () => props.placeholder || "Select...");
-          createRenderEffect(() => className(_el$5, `${styles$7["solid_select__placeholder"]}`));
+          effect(() => className(_el$5, `${styles$7["solid_select__placeholder"]}`));
           return _el$5;
         })();
       } else if (props.renderValue) {
         return props.renderValue(singleVal);
       } else {
         return (() => {
-          var _el$6 = _tmpl$$g();
+          var _el$6 = _tmpl$2$8();
           insert(_el$6, () => getLabel(singleVal));
-          createRenderEffect(() => className(_el$6, `${styles$7["solid_select__value"]}`));
+          effect(() => className(_el$6, `${styles$7["solid_select__value"]}`));
           return _el$6;
         })();
       }
     }
   });
-  // --- Width sync effect ---
-  createEffect(() => {
-    const dropdown = dropdownRef();
-    const select = selectRef();
-    if (select && dropdown) {
-      const dropdownWidth = dropdown.getBoundingClientRect().width;
-      const selectWidth = select.getBoundingClientRect().width;
-      if (dropdownWidth !== selectWidth) {
-        dropdown.style.width = `${selectWidth}px`;
-      }
-    }
-  });
   // --- Form sync effects ---
   createEffect(() => {
     if (hasFormContext) {
@@ -2772,7 +2149,7 @@ function Select(props) {
   createEffect(() => {
     !!props?.onChange ? props.onChange(currentValue()) : null;
   });
-  useClickOutside([dropdownRef, selectRef], () => {
+  useClickOutside([dropdownRef, controlRef, selectRef], () => {
     if (isDisabled()) return;
     // Desktop mode uses click-outside; mobile popup uses backdrop tap
     if (resolvedMode() === 'popup') return;
@@ -2785,7 +2162,6 @@ function Select(props) {
     });
   });
   onMount(() => {
-    setMenuRect(menuLocRef()?.getBoundingClientRect());
     if (hasForm) {
       const formValue = currentValue() ?? isMultiple ? [] : undefined;
       const typedFormValue = isMultiple ? formValue : formValue;
@@ -2827,42 +2203,16 @@ function Select(props) {
     });
   };
   children(() => props.children);
-  const selectLocation = createMemo(() => {
-    const select = selectRef();
-    const menuLoc = menuLocRef();
-    const getLocation = rect => {
-      if (dropTop()) {
-        return {
-          x: rect.left,
-          y: rect.top - rect.height
-        };
-      }
-      return {
-        x: rect.left,
-        y: rect.bottom
-      };
-    };
-    if (hasForm || hasFormContext) {
-      if (menuLoc) {
-        const rect = menuRect() ?? menuLoc.getBoundingClientRect();
-        return getLocation(rect);
-      } else if (select) {
-        const rect = select.getBoundingClientRect();
-        return getLocation(rect);
-      }
-    } else {
-      if (select) {
-        const rect = select.getBoundingClientRect();
-        return getLocation(rect);
-      }
-    }
-    return {
-      x: 0,
-      y: 0
-    };
+  // --- Publish active overlay element to the form provider so a wrapping
+  //     FormField can treat clicks inside the (portaled) dropdown/popup as
+  //     "inside" the field. Without this, the FormField click-outside fires on
+  //     every option click (the overlay lives in a Portal outside the fieldset). ---
+  createEffect(() => {
+    const overlay = resolvedMode() === 'popup' ? mobilePopupRef() : dropdownRef();
+    form?.setOverlayRef?.(overlay);
   });
-  const selectDropX = createMemo(() => `${selectLocation().x}px`);
-  const selectDropY = createMemo(() => `${selectLocation().y}px`);
+  // Don't leave a dangling overlay ref in a FormField that outlives this Select.
+  onCleanup(() => form?.setOverlayRef?.(undefined));
   // --- Open/close effects ---
   createEffect(() => {
     if (open()) {
@@ -2899,7 +2249,8 @@ function Select(props) {
     closeDropdown: () => {
       if (!isMultiple) setOpen(false);
     },
-    formName: effectiveFormName
+    formName: effectiveFormName,
+    commitValue
   }));
   // --- Keyboard handler ---
   const handleKeyDown = e => {
@@ -2999,10 +2350,21 @@ function Select(props) {
     }
   };
   return (() => {
-    var _el$7 = _tmpl$7$1(),
+    var _el$7 = _tmpl$9(),
       _el$8 = _el$7.firstChild,
       _el$9 = _el$8.firstChild;
     addEventListener(_el$7, "keydown", resolvedMode() === 'popup' ? undefined : handleKeyDown, true);
+    _el$7.$$click = e => {
+      if (isDisabled()) return;
+      // Ignore clicks that originate inside the portaled dropdown / mobile popup —
+      // options manage their own selection. The trigger toggle handler lives here
+      // (on the full-size wrapper) so the entire field box is clickable, not just
+      // the inner control.
+      const target = e.target;
+      if (dropdownRef()?.contains(target) || mobilePopupRef()?.contains(target)) return;
+      e.currentTarget?.focus?.();
+      setOpen(old => !old);
+    };
     _el$7.addEventListener("focus", () => {
       if (isDisabled()) return;
       form?.setFocused?.(true);
@@ -3011,14 +2373,8 @@ function Select(props) {
         if (meta && !meta.dirty) formContext.formGroup.markDirty(effectiveFormName);
       }
     });
+    use(setControlRef, _el$7);
     _el$7._$owner = getOwner();
-    _el$8.$$click = e => {
-      if (isDisabled()) return;
-      e.currentTarget?.parentElement?.focus?.();
-      const menuRect = menuLocRef()?.getBoundingClientRect();
-      setMenuRect(menuRect);
-      setOpen(old => !old);
-    };
     use(setSelectRef, _el$8);
     insert(_el$9, displayValue);
     insert(_el$8, createComponent(Show, {
@@ -3026,9 +2382,9 @@ function Select(props) {
         return open();
       },
       get children() {
-        var _el$10 = _tmpl$2$8();
-        createRenderEffect(() => className(_el$10, styles$7['solid_select__arrow']));
-        return _el$10;
+        var _el$0 = _tmpl$4$2();
+        effect(() => className(_el$0, styles$7['solid_select__arrow']));
+        return _el$0;
       }
     }), null);
     insert(_el$8, createComponent(Show, {
@@ -3036,9 +2392,9 @@ function Select(props) {
         return !open();
       },
       get children() {
-        var _el$11 = _tmpl$3$3();
-        createRenderEffect(() => className(_el$11, styles$7['solid_select__arrow']));
-        return _el$11;
+        var _el$1 = _tmpl$5$2();
+        effect(() => className(_el$1, styles$7['solid_select__arrow']));
+        return _el$1;
       }
     }), null);
     insert(_el$7, createComponent(SelectContextProvider, {
@@ -3053,26 +2409,11 @@ function Select(props) {
           get children() {
             return createComponent(Portal, {
               get children() {
-                var _el$12 = _tmpl$4$2();
-                use(setDropdownRef, _el$12);
-                insert(_el$12, () => props.children);
-                createRenderEffect(_p$ => {
-                  var _v$ = `${styles$7['solid_select__dropdown']} ${dropTop() ? styles$7.dropTop : styles$7.dropBottom} ${open() ? styles$7.open : ''} ${props.dropdownClass || ""}`,
-                    _v$2 = selectDropY(),
-                    _v$3 = selectDropX(),
-                    _v$4 = `${menuLocRef()?.getBoundingClientRect().width ?? 100}px !important`;
-                  _v$ !== _p$.e && className(_el$12, _p$.e = _v$);
-                  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$12.style.setProperty("top", _v$2) : _el$12.style.removeProperty("top"));
-                  _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$12.style.setProperty("left", _v$3) : _el$12.style.removeProperty("left"));
-                  _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$12.style.setProperty("width", _v$4) : _el$12.style.removeProperty("width"));
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined,
-                  a: undefined,
-                  o: undefined
-                });
-                return _el$12;
+                var _el$10 = _tmpl$6$1();
+                use(setDropdownRef, _el$10);
+                insert(_el$10, () => props.children);
+                effect(() => className(_el$10, `${styles$7['solid_select__dropdown']} ${dropTop() ? styles$7.dropTop : styles$7.dropBottom} ${open() ? styles$7.open : ''} ${props.dropdownClass || ""}`));
+                return _el$10;
               }
             });
           }
@@ -3088,60 +2429,60 @@ function Select(props) {
                     return open();
                   },
                   get children() {
-                    var _el$13 = _tmpl$6$1(),
+                    var _el$11 = _tmpl$8(),
+                      _el$12 = _el$11.firstChild,
+                      _el$13 = _el$12.firstChild,
                       _el$14 = _el$13.firstChild,
-                      _el$15 = _el$14.firstChild,
-                      _el$16 = _el$15.firstChild,
-                      _el$17 = _el$16.nextSibling,
-                      _el$18 = _el$15.nextSibling;
-                    _el$13.$$mousedown = e => {
+                      _el$15 = _el$14.nextSibling,
+                      _el$16 = _el$13.nextSibling;
+                    _el$11.$$mousedown = e => {
                       // Close when clicking the backdrop itself (outside the popup)
                       if (e.target === e.currentTarget) {
                         closeMobilePopup();
                       }
                     };
-                    use(el => ignoreWindowManager(el), _el$13);
-                    _el$14.$$keydown = handleMobileKeyDown;
-                    use(setMobilePopupRef, _el$14);
-                    insert(_el$16, mobilePopupTitle);
-                    _el$17.$$click = () => closeMobilePopup();
+                    use(el => ignoreWindowManager(el), _el$11);
+                    _el$12.$$keydown = handleMobileKeyDown;
+                    use(setMobilePopupRef, _el$12);
+                    insert(_el$14, mobilePopupTitle);
+                    _el$15.$$click = () => closeMobilePopup();
                     var _ref$ = mobileOptionsRef;
-                    typeof _ref$ === "function" ? use(_ref$, _el$18) : mobileOptionsRef = _el$18;
-                    insert(_el$18, () => props.children);
-                    insert(_el$14, createComponent(Show, {
+                    typeof _ref$ === "function" ? use(_ref$, _el$16) : mobileOptionsRef = _el$16;
+                    insert(_el$16, () => props.children);
+                    insert(_el$12, createComponent(Show, {
                       when: isMultiple,
                       get children() {
-                        var _el$19 = _tmpl$5$1(),
-                          _el$20 = _el$19.firstChild;
-                        _el$20.$$click = () => closeMobilePopup();
-                        createRenderEffect(_p$ => {
-                          var _v$5 = styles$7['solid_select__mobile_footer'],
-                            _v$6 = styles$7['solid_select__mobile_done'];
-                          _v$5 !== _p$.e && className(_el$19, _p$.e = _v$5);
-                          _v$6 !== _p$.t && className(_el$20, _p$.t = _v$6);
+                        var _el$17 = _tmpl$7$1(),
+                          _el$18 = _el$17.firstChild;
+                        _el$18.$$click = () => closeMobilePopup();
+                        effect(_p$ => {
+                          var _v$ = styles$7['solid_select__mobile_footer'],
+                            _v$2 = styles$7['solid_select__mobile_done'];
+                          _v$ !== _p$.e && className(_el$17, _p$.e = _v$);
+                          _v$2 !== _p$.t && className(_el$18, _p$.t = _v$2);
                           return _p$;
                         }, {
                           e: undefined,
                           t: undefined
                         });
-                        return _el$19;
+                        return _el$17;
                       }
                     }), null);
-                    createRenderEffect(_p$ => {
-                      var _v$7 = styles$7['solid_select__mobile_backdrop'],
-                        _v$8 = mobilePopupTitle() || undefined,
-                        _v$9 = `${styles$7['solid_select__mobile_popup']} ${props.dropdownClass || ""}`,
-                        _v$10 = styles$7['solid_select__mobile_header'],
-                        _v$11 = styles$7['solid_select__mobile_title'],
-                        _v$12 = styles$7['solid_select__mobile_close'],
-                        _v$13 = styles$7['solid_select__mobile_options'];
-                      _v$7 !== _p$.e && className(_el$13, _p$.e = _v$7);
-                      _v$8 !== _p$.t && setAttribute(_el$14, "aria-label", _p$.t = _v$8);
-                      _v$9 !== _p$.a && className(_el$14, _p$.a = _v$9);
-                      _v$10 !== _p$.o && className(_el$15, _p$.o = _v$10);
-                      _v$11 !== _p$.i && className(_el$16, _p$.i = _v$11);
-                      _v$12 !== _p$.n && className(_el$17, _p$.n = _v$12);
-                      _v$13 !== _p$.s && className(_el$18, _p$.s = _v$13);
+                    effect(_p$ => {
+                      var _v$3 = styles$7['solid_select__mobile_backdrop'],
+                        _v$4 = mobilePopupTitle() || undefined,
+                        _v$5 = `${styles$7['solid_select__mobile_popup']} ${props.dropdownClass || ""}`,
+                        _v$6 = styles$7['solid_select__mobile_header'],
+                        _v$7 = styles$7['solid_select__mobile_title'],
+                        _v$8 = styles$7['solid_select__mobile_close'],
+                        _v$9 = styles$7['solid_select__mobile_options'];
+                      _v$3 !== _p$.e && className(_el$11, _p$.e = _v$3);
+                      _v$4 !== _p$.t && setAttribute(_el$12, "aria-label", _p$.t = _v$4);
+                      _v$5 !== _p$.a && className(_el$12, _p$.a = _v$5);
+                      _v$6 !== _p$.o && className(_el$13, _p$.o = _v$6);
+                      _v$7 !== _p$.i && className(_el$14, _p$.i = _v$7);
+                      _v$8 !== _p$.n && className(_el$15, _p$.n = _v$8);
+                      _v$9 !== _p$.s && className(_el$16, _p$.s = _v$9);
                       return _p$;
                     }, {
                       e: undefined,
@@ -3152,7 +2493,7 @@ function Select(props) {
                       n: undefined,
                       s: undefined
                     });
-                    return _el$13;
+                    return _el$11;
                   }
                 });
               }
@@ -3161,27 +2502,23 @@ function Select(props) {
         })];
       }
     }), null);
-    createRenderEffect(_p$ => {
-      var _v$14 = props.id,
-        _v$15 = `${styles$7.solid_select__control_no_form} ${styles$7[styleClassTransparent]} ${isDisabled() ? styles$7.solid_select__disabled : ''} coles-solid-selectControl`,
-        _v$16 = resolvedMode() === 'popup' ? 'dialog' : 'listbox',
-        _v$17 = isDisabled() ? false : open(),
-        _v$18 = isDisabled(),
-        _v$19 = props.tooltip,
-        _v$20 = `${styles$7['solid_select__control']} ${props.class || ""} ${isDisabled() ? styles$7.solid_select__disabled : ''}`,
-        _v$21 = !hasForm ? {
-          height: '48px'
-        } : {},
-        _v$22 = styles$7['solid_select__value'];
-      _v$14 !== _p$.e && (_el$7.id = _p$.e = _v$14);
-      _v$15 !== _p$.t && className(_el$7, _p$.t = _v$15);
-      _v$16 !== _p$.a && (_el$7.ariaHaspopup = _p$.a = _v$16);
-      _v$17 !== _p$.o && (_el$7.ariaExpanded = _p$.o = _v$17);
-      _v$18 !== _p$.i && (_el$7.ariaDisabled = _p$.i = _v$18);
-      _v$19 !== _p$.n && (_el$7.title = _p$.n = _v$19);
-      _v$20 !== _p$.s && className(_el$8, _p$.s = _v$20);
-      _p$.h = style$9(_el$8, _v$21, _p$.h);
-      _v$22 !== _p$.r && className(_el$9, _p$.r = _v$22);
+    effect(_p$ => {
+      var _v$0 = props.id,
+        _v$1 = `${styles$7.solid_select__control_no_form} ${styles$7[styleClassTransparent]} ${isDisabled() ? styles$7.solid_select__disabled : ''} coles-solid-selectControl`,
+        _v$10 = resolvedMode() === 'popup' ? 'dialog' : 'listbox',
+        _v$11 = isDisabled() ? false : open(),
+        _v$12 = isDisabled(),
+        _v$13 = props.tooltip,
+        _v$14 = `${styles$7['solid_select__control']} ${props.class || ""} ${isDisabled() ? styles$7.solid_select__disabled : ''}`,
+        _v$15 = styles$7['solid_select__value'];
+      _v$0 !== _p$.e && (_el$7.id = _p$.e = _v$0);
+      _v$1 !== _p$.t && className(_el$7, _p$.t = _v$1);
+      _v$10 !== _p$.a && (_el$7.ariaHaspopup = _p$.a = _v$10);
+      _v$11 !== _p$.o && (_el$7.ariaExpanded = _p$.o = _v$11);
+      _v$12 !== _p$.i && (_el$7.ariaDisabled = _p$.i = _v$12);
+      _v$13 !== _p$.n && (_el$7.title = _p$.n = _v$13);
+      _v$14 !== _p$.s && className(_el$8, _p$.s = _v$14);
+      _v$15 !== _p$.h && className(_el$9, _p$.h = _v$15);
       return _p$;
     }, {
       e: undefined,
@@ -3191,13 +2528,12 @@ function Select(props) {
       i: undefined,
       n: undefined,
       s: undefined,
-      h: undefined,
-      r: undefined
+      h: undefined
     });
     return _el$7;
   })();
 }
-delegateEvents(["keydown", "click", "mousedown"]);
+delegateEvents(["click", "keydown", "mousedown"]);
 
 var _tmpl$$f = /*#__PURE__*/template(`<div role=option><span></span><span is=coles-select-label>`, true, false, false);
 function Option(props) {
@@ -3267,8 +2603,13 @@ function Option(props) {
   const handleClick = e => {
     if (select?.isDisabled?.()) return;
     e.stopPropagation();
-    const contextSuccess = selectFormContextValue(props.value);
-    !contextSuccess ? selectFormFieldValue(props.value) : true;
+    // FormArray-bound selects commit through the Select's own binding first
+    // (FormContext/FormField fallbacks cannot address an array item).
+    const arrayHandled = select?.commitValue?.(props.value) ?? false;
+    const contextSuccess = arrayHandled ? true : selectFormContextValue(props.value);
+    if (!arrayHandled && !contextSuccess) {
+      selectFormFieldValue(props.value);
+    }
     if (!formField?.getName?.() && !select?.formName) {
       select.selectValue?.(props.value);
     } else {
@@ -3287,7 +2628,7 @@ function Option(props) {
     typeof _ref$ === "function" ? use(_ref$, _el$3) : labelRef = _el$3;
     _el$3._$owner = getOwner();
     insert(_el$3, () => props.children ?? "");
-    createRenderEffect(_p$ => {
+    effect(_p$ => {
       var _v$ = select?.isSelected?.(props.value) ?? false,
         _v$2 = select?.isDisabled?.() ?? false,
         _v$3 = `${styles$7['solid_select__option']} ${props.class || ""} ${select?.isDisabled?.() ? styles$7.solid_select__option_disabled : ""}`,
@@ -3424,7 +2765,7 @@ const TextArea = props => {
         return `${style$4.areaStyle} ${props.disabled ? style$4.disabled : ''} ${customProps.class ?? ''} ${customProps.transparent ? customProps.transparent : ''}`;
       },
       get placeholder() {
-        return fieldCtx?.getTextInside?.() && !fieldCtx?.getFocused?.() ? '' : props.placeholder;
+        return memo(() => !!(fieldCtx?.getTextInside?.() && !fieldCtx?.getFocused?.()))() ? '' : props.placeholder;
       },
       get title() {
         return customProps.tooltip;
@@ -3461,7 +2802,8 @@ styleInject(css_248z$a);
 var _tmpl$$d = /*#__PURE__*/template(`<b>X`),
   _tmpl$2$7 = /*#__PURE__*/template(`<div><h2></h2><span>`),
   _tmpl$3$2 = /*#__PURE__*/template(`<div>`),
-  _tmpl$4$1 = /*#__PURE__*/template(`<div><div>`);
+  _tmpl$4$1 = /*#__PURE__*/template(`<div style=height:100%>`),
+  _tmpl$5$1 = /*#__PURE__*/template(`<div><div>`);
 const Modal = props => {
   const defaultX = createMemo(() => props.translate?.x ?? "-50%");
   const defaultY = createMemo(() => props.translate?.y ?? "-50%");
@@ -3536,7 +2878,7 @@ const Modal = props => {
     get children() {
       return createComponent(Portal, {
         get children() {
-          var _el$ = _tmpl$4$1(),
+          var _el$ = _tmpl$5$1(),
             _el$2 = _el$.firstChild;
           use(el => {
             setInnerPopup(el);
@@ -3560,12 +2902,12 @@ const Modal = props => {
                     return _tmpl$$d();
                   }
                 }));
-                createRenderEffect(() => className(_el$3, style$3.header));
+                effect(() => className(_el$3, style$3.header));
                 return _el$3;
               })(), (() => {
                 var _el$7 = _tmpl$3$2();
                 insert(_el$7, () => props.children);
-                createRenderEffect(() => className(_el$7, style$3.body));
+                effect(() => className(_el$7, style$3.body));
                 return _el$7;
               })()];
             }
@@ -3575,23 +2917,22 @@ const Modal = props => {
               return !showHeader();
             },
             get children() {
-              var _el$8 = _tmpl$3$2();
-              _el$8.style.setProperty("height", "100%");
+              var _el$8 = _tmpl$4$1();
               insert(_el$8, () => props.children);
-              createRenderEffect(() => className(_el$8, style$3.body));
+              effect(() => className(_el$8, style$3.body));
               return _el$8;
             }
           }), null);
-          createRenderEffect(_p$ => {
+          effect(_p$ => {
             var _v$ = style$3.backdrop,
               _v$2 = widthStyle(),
               _v$3 = heightStyle(),
               _v$4 = shouldTranslate(),
               _v$5 = `${style$3["primary"]} ${style$3.wrapper} ${style$3.popup}`;
             _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-            _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$2.style.setProperty("width", _v$2) : _el$2.style.removeProperty("width"));
-            _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("height", _v$3) : _el$2.style.removeProperty("height"));
-            _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$2.style.setProperty("transform", _v$4) : _el$2.style.removeProperty("transform"));
+            _v$2 !== _p$.t && setStyleProperty(_el$2, "width", _p$.t = _v$2);
+            _v$3 !== _p$.a && setStyleProperty(_el$2, "height", _p$.a = _v$3);
+            _v$4 !== _p$.o && setStyleProperty(_el$2, "transform", _p$.o = _v$4);
             _v$5 !== _p$.i && className(_el$2, _p$.i = _v$5);
             return _p$;
           }, {
@@ -3637,7 +2978,7 @@ const DownArrow = props => {
   })();
 };
 
-var _tmpl$$b = /*#__PURE__*/template(`<div><div><span></span></div><div>`);
+var _tmpl$$b = /*#__PURE__*/template(`<div><div><span style=width:min-content;height:min-content></span></div><div>`);
 const ExpansionPanel = props => {
   const [open, setOpen] = createSignal(!!props.startOpen);
   return (() => {
@@ -3650,8 +2991,6 @@ const ExpansionPanel = props => {
         return `${style$2.totalPanel}`;
       }
     }), false, true);
-    _el$3.style.setProperty("width", "min-content");
-    _el$3.style.setProperty("height", "min-content");
     insert(_el$3, () => props.children[0]);
     insert(_el$2, createComponent(Button, {
       style: {
@@ -3708,7 +3047,7 @@ const ExpansionPanel = props => {
       }
     }), null);
     insert(_el$4, () => props.children[1]);
-    createRenderEffect(_p$ => {
+    effect(_p$ => {
       var _v$ = `${style$2['accent']} ${style$2.header} ${open() ? style$2.opened : style$2.closed}`,
         _v$2 = `${style$2['accent']} ${style$2.body} ${open() ? style$2.open : ''}`;
       _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
@@ -3751,7 +3090,7 @@ const SnackbarController = () => createComponent(Show, {
         onClose: () => removeSnackbar(index())
       }))
     }));
-    createRenderEffect(() => className(_el$, style$1.snackContainer));
+    effect(() => className(_el$, style$1.snackContainer));
     return _el$;
   }
 });
@@ -3775,10 +3114,10 @@ const Snackbar = props => {
         "aria-label": "Close notification",
         children: "X"
       }), null);
-      createRenderEffect(_p$ => {
+      effect(_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$ !== _p$.e && setStyleProperty(_el$2, "bottom", _p$.e = _v$);
         _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
         return _p$;
       }, {
@@ -3813,40 +3152,65 @@ var css_248z$6 = ".icon-module_icon__K4BP- {\n  outline: none !important;\n  bor
 var styles$5 = {"icon":"icon-module_icon__K4BP-"};
 styleInject(css_248z$6);
 
-var _tmpl$$8 = /*#__PURE__*/template(`<div>`);
-// @ts-ignore
-const icons = import.meta.glob('/node_modules/@material-symbols/svg-400/**/*.svg', {
-  query: '?raw',
-  import: 'default'
-});
+var _tmpl$$8 = /*#__PURE__*/template(`<div style=display:inline-block>`);
+const REGISTRY_LOADERS = {
+  outlined: () => import('./generated/registries/outlined.js'),
+  rounded: () => import('./generated/registries/rounded.js'),
+  sharp: () => import('./generated/registries/sharp.js')
+};
+const sizeMap = {
+  small: 16,
+  medium: 24,
+  large: 32
+};
+// Shared across all <Icon> instances: dedupe chunk loads + SVG parsing for repeated icons.
+const svgCache = new Map();
+const registryCache = new Map();
 const Icon = props => {
-  const [rawSvg, setRawSvg] = createSignal("");
-  const [svg, setSvg] = createSignal("");
-  const sizeMap = {
-    small: 16,
-    medium: 24,
-    large: 32
-  };
   const size = createMemo(() => {
-    if (typeof props.size === "number") {
-      return props.size;
-    }
-    if (props.size && sizeMap[props.size]) {
-      return sizeMap[props.size];
-    }
+    if (typeof props.size === "number") return props.size;
+    const key = props.size;
+    if (props.size && sizeMap[key]) return sizeMap[key];
     return 24;
   });
   const color = createMemo(() => props.color ?? "currentColor");
-  const variant = props.variant ?? "outlined";
-  const key = `/node_modules/@material-symbols/svg-400/${variant}/${props.name}.svg`;
-  if (!icons[key]) throw new Error(`Icon not found: ${key}`);
-  icons[key]().then(raw => {
-    setRawSvg(raw);
-  }).catch(console.error);
-  const [iconRef, setIconRef] = createSignal();
-  createEffect(() => {
+  const variant = createMemo(() => props.variant ?? "outlined");
+  // Name precedence: explicit `name` prop, else a trimmed text-node child (<Icon>home</Icon>).
+  const childName = children(() => props.children);
+  const resolvedName = createMemo(() => {
+    if (props.name) return props.name;
+    const c = childName();
+    return typeof c === "string" ? c.trim() : undefined;
+  });
+  // Resource stays idle (no fetch) when a static `icon` string is supplied or no name is present.
+  const [loaded] = createResource(() => props.icon ? null : resolvedName() ? `${variant()}/${resolvedName()}` : null, async key => {
+    const cached = svgCache.get(key);
+    if (cached !== undefined) return cached;
+    const slash = key.indexOf("/");
+    const v = key.slice(0, slash);
+    const name = key.slice(slash + 1);
+    const loader = REGISTRY_LOADERS[v];
+    if (!loader) return "";
+    let registry = registryCache.get(v);
+    if (!registry) {
+      registry = await loader();
+      registryCache.set(v, registry);
+    }
+    if (!registry.has(name)) {
+      console.warn(`[coles-solid-library] Icon not found: ${v}/${name}`);
+      svgCache.set(key, "");
+      return "";
+    }
+    const raw = (await registry.load(name)) ?? "";
+    svgCache.set(key, raw);
+    return raw;
+  });
+  // Static `icon` string short-circuits the async path.
+  const rawSvg = createMemo(() => props.icon ?? loaded() ?? "");
+  // Recolor + resize the raw SVG markup (preserved verbatim from the original implementation).
+  const svg = createMemo(() => {
     const markup = rawSvg();
-    if (!markup) return;
+    if (!markup) return "";
     const nextColor = color();
     const nextSize = size();
     let nextMarkup = markup.replace(/width=".*?"/g, `width="${nextSize}"`).replace(/height=".*?"/g, `height="${nextSize}"`);
@@ -3861,24 +3225,21 @@ const Icon = props => {
         return `<svg${attrs}${spacer}fill="${nextColor}">`;
       });
     }
-    setSvg(nextMarkup);
+    return nextMarkup;
   });
   return (() => {
     var _el$ = _tmpl$$8();
-    use(ref => {
-      setIconRef(ref);
-      // @ts-ignore
-      props?.ref?.(ref);
+    use(el => {
+      props?.ref?.(el);
     }, _el$);
-    _el$.style.setProperty("display", "inline-block");
-    createRenderEffect(_p$ => {
+    effect(_p$ => {
       var _v$ = styles$5.icon,
         _v$2 = `${size()}px`,
         _v$3 = `${size()}px`,
         _v$4 = svg();
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("width", _v$2) : _el$.style.removeProperty("width"));
-      _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("height", _v$3) : _el$.style.removeProperty("height"));
+      _v$2 !== _p$.t && setStyleProperty(_el$, "width", _p$.t = _v$2);
+      _v$3 !== _p$.a && setStyleProperty(_el$, "height", _p$.a = _v$3);
       _v$4 !== _p$.o && (_el$.innerHTML = _p$.o = _v$4);
       return _p$;
     }, {
@@ -4000,7 +3361,7 @@ const Menu = props => {
         }
       }), false, true);
       insert(_el$2, () => local.children);
-      createRenderEffect(() => className(_el$2, `${styles$4.list} ${local.listClass ?? ''}`));
+      effect(() => className(_el$2, `${styles$4.list} ${local.listClass ?? ''}`));
       return _el$;
     }
   });
@@ -4074,7 +3435,7 @@ const MenuDropdown = props => {
       }
     }), null);
     insert(_el$4, () => props.children);
-    createRenderEffect(_p$ => {
+    effect(_p$ => {
       var _v$ = `${styles$4.listHeader}`,
         _v$2 = `${styles$4.header}`,
         _v$3 = `${styles$4.list} ${styles$4.droplist}  ${isOpen() ? styles$4.openDropList : ''} ${local.dropListClass ?? ''}`;
@@ -4182,12 +3543,12 @@ function RadioGroup(props) {
     var _el$ = _tmpl$$4(),
       _el$2 = _el$.firstChild;
     insert(_el$, (() => {
-      var _c$ = createMemo(() => !!props.label);
+      var _c$ = memo(() => !!props.label);
       return () => _c$() && (() => {
         var _el$3 = _tmpl$2$4();
         setAttribute(_el$3, "id", `${groupName}-label`);
         insert(_el$3, () => props.label);
-        createRenderEffect(() => className(_el$3, styles$3["radio-group__label"]));
+        effect(() => className(_el$3, styles$3["radio-group__label"]));
         return _el$3;
       })();
     })(), _el$2);
@@ -4197,7 +3558,7 @@ function RadioGroup(props) {
         return props.children;
       }
     }));
-    createRenderEffect(_p$ => {
+    effect(_p$ => {
       var _v$ = styles$3["radio-group"],
         _v$2 = {
           [styles$3["radio-group--disabled"]]: props.disabled
@@ -4273,15 +3634,15 @@ function Radio(props) {
     var _ref$ = inputRef;
     typeof _ref$ === "function" ? use(_ref$, _el$2) : inputRef = _el$2;
     insert(_el$, (() => {
-      var _c$ = createMemo(() => !!props.label);
+      var _c$ = memo(() => !!props.label);
       return () => _c$() && (() => {
         var _el$4 = _tmpl$2$3();
         insert(_el$4, () => props.label);
-        createRenderEffect(() => className(_el$4, styles$2["radio__label"]));
+        effect(() => className(_el$4, styles$2["radio__label"]));
         return _el$4;
       })();
     })(), null);
-    createRenderEffect(_p$ => {
+    effect(_p$ => {
       var _v$ = styles$2.radio,
         _v$2 = {
           [styles$2["radio--disabled"]]: isDisabled(),
@@ -4309,8 +3670,8 @@ function Radio(props) {
       n: undefined,
       s: undefined
     });
-    createRenderEffect(() => _el$2.value = props.value.toString());
-    createRenderEffect(() => _el$2.checked = checkedState());
+    effect(() => _el$2.value = props.value.toString());
+    effect(() => _el$2.checked = checkedState());
     return _el$;
   })();
 }
@@ -4409,7 +3770,7 @@ const FormField2 = props => {
   });
   // Initialize focus state only once (was previously resetting every render and preventing focus-based floating)
   onMount(() => context?.setFocused?.(false));
-  useClickOutside([fieldRef], () => {
+  useClickOutside([fieldRef, context.getOverlayRef], () => {
     if (!isNullish(formContext?.data)) {
       const value = formContext?.data?.[local?.formName ?? ''];
       context?.setTextInside(!hasValue(value));
@@ -4459,11 +3820,11 @@ const FormField2 = props => {
         return hasRequired();
       },
       get children() {
-        return [createMemo(() => context?.getName()), " *"];
+        return [memo(() => context?.getName()), " *"];
       }
     }), null);
     insert(_el$, theChildren, null);
-    createRenderEffect(_p$ => {
+    effect(_p$ => {
       var _v$ = `${local?.legendClass ?? ''}`,
         _v$2 = `${style.legendStyle}`;
       _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
@@ -4484,7 +3845,7 @@ const FormField2 = props => {
         return (() => {
           var _el$5 = _tmpl$2$2();
           insert(_el$5, () => error.display);
-          createRenderEffect(_p$ => {
+          effect(_p$ => {
             var _v$3 = style.error,
               _v$4 = getErrorLocStyle(index());
             _v$3 !== _p$.e && className(_el$5, _p$.e = _v$3);
@@ -4498,7 +3859,7 @@ const FormField2 = props => {
         })();
       }
     }));
-    createRenderEffect(() => className(_el$4, style.errorContainer));
+    effect(() => className(_el$4, style.errorContainer));
     return _el$4;
   })()];
 };
@@ -4545,7 +3906,12 @@ class Validators {
    */
   static email() {
     const errKey = 'email';
-    return this.createValidatorResult(errKey, value => /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(value));
+    return this.createValidatorResult(errKey, value => {
+      // Blank passes — `Required` owns emptiness, so an optional email field left
+      // empty does not surface a format error.
+      if (isNullish(value) || typeof value === 'string' && value.trim() === '') return true;
+      return /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(value);
+    });
   }
   /**
    * A getter that returns the email validator.
@@ -4627,21 +3993,41 @@ class Validators {
   }
 }
 
+/**
+ * Structural, key-order-insensitive equality used for dirty tracking. Unlike a
+ * `JSON.stringify` comparison it does not flag a field dirty just because an
+ * object's keys were inserted in a different order, and it treats NaN/Dates
+ * correctly. Behaviourally equivalent to the old check for primitives & arrays.
+ */
+function valuesEqual(a, b) {
+  if (a === b) return true;
+  if (typeof a === 'number' && typeof b === 'number') {
+    return Number.isNaN(a) && Number.isNaN(b);
+  }
+  if (a instanceof Date || b instanceof Date) {
+    return a instanceof Date && b instanceof Date && a.getTime() === b.getTime();
+  }
+  if (a === null || b === null || typeof a !== 'object' || typeof b !== 'object') {
+    return false;
+  }
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  const ka = Object.keys(a);
+  const kb = Object.keys(b);
+  if (ka.length !== kb.length) return false;
+  return ka.every(k => Object.prototype.hasOwnProperty.call(b, k) && valuesEqual(a[k], b[k]));
+}
 /**
  * Represents a group of form controls and manages their state, validation, and errors.
  *
  * @template T - The shape of the form's data, where each property corresponds to a form control.
  */
 class FormGroup {
-  data;
-  internalDataSignal;
   validators = {};
-  errors;
   meta = {};
   keys = [];
   /** Reactive memo that returns a cloned snapshot of the full form state.
    *  FormArray fields resolve via `.get()` (plain array), others via `CloneStore`. */
-  formChangeValue;
+
   /** Returns a per-field reactive accessor. Each call creates an independent memo. */
   fieldChangeValue = key => {
     return createMemo(() => {
@@ -4907,14 +4293,16 @@ class FormGroup {
       }
       return;
     }
+    // Clone on write to match the construct/read contract: external mutation of the
+    // caller's object after set() must not leak into the internal reactive store.
     this.internalDataSignal[1](old => ({
       ...old,
-      [key]: value
+      [key]: CloneStore(value)
     }));
     const m = this.meta[key];
     if (m) {
       if (!m.touched) m.touched = true;
-      if (!m.dirty && JSON.stringify(m.initialValue) !== JSON.stringify(value)) m.dirty = true;
+      if (!m.dirty && !valuesEqual(m.initialValue, value)) m.dirty = true;
     }
   }
   /**
@@ -5020,8 +4408,8 @@ function useFormFieldBinding(key) {
     setValue: v => fg.set(key, v),
     errors: () => fg.getErrors(key) ?? [],
     hasError: () => fg.hasError(key),
-    touched: () => fg.getMeta(key)?.touched,
-    dirty: () => fg.getMeta(key)?.dirty,
+    touched: () => fg.getMeta(key)?.touched ?? false,
+    dirty: () => fg.getMeta(key)?.dirty ?? false,
     validate: () => fg.validate(key)
   };
 }
@@ -5376,7 +4764,7 @@ const Table = props => {
         if (custom) return custom;
         return (() => {
           var _el$ = _tmpl$$1();
-          createRenderEffect(() => className(_el$, styles$1.errorCell));
+          effect(() => className(_el$, styles$1.errorCell));
           return _el$;
         })();
       }
@@ -5553,8 +4941,8 @@ const Table = props => {
                 }
               };
               return (() => {
-                var _el$10 = _tmpl$4();
-                spread(_el$10, mergeProps(() => rowStyleEntry?.all, {
+                var _el$0 = _tmpl$4();
+                spread(_el$0, mergeProps(() => rowStyleEntry?.all, {
                   "data-drop-row": isContentRow ? 'true' : undefined,
                   get ["data-drop-open"]() {
                     return isContentRow ? isOpen() ? 'true' : 'false' : undefined;
@@ -5583,28 +4971,28 @@ const Table = props => {
                     }
                   }
                 }), false, true);
-                insert(_el$10, () => {
+                insert(_el$0, () => {
                   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 _el$1 = _tmpl$6();
+                      insert(_el$1, () => renderCell(cellRenderer, item, index(), firstAvailableColumn, rowNum));
+                      effect(_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);
+                        _v$4 !== _p$.e && setAttribute(_el$1, "colspan", _p$.e = _v$4);
+                        _v$5 !== _p$.t && setAttribute(_el$1, "aria-hidden", _p$.t = _v$5);
+                        _v$6 !== _p$.a && setAttribute(_el$1, "data-drop-state", _p$.a = _v$6);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined,
                         a: undefined
                       });
-                      return _el$11;
+                      return _el$1;
                     })();
                   }
                   return createComponent(For, {
@@ -5615,8 +5003,8 @@ const Table = props => {
                       const tableSpot = rows()[rowNum]?.[column];
                       const cell = tableSpot?.element;
                       return !isNullish(cell) ? (() => {
-                        var _el$12 = _tmpl$7();
-                        spread(_el$12, mergeProps(() => cellStyle?.()?.[rowNum]?.[column]?.all, {
+                        var _el$10 = _tmpl$7();
+                        spread(_el$10, mergeProps(() => cellStyle?.()?.[rowNum]?.[column]?.all, {
                           get style() {
                             return cellStyle()[rowNum]?.[column]?.style;
                           },
@@ -5624,13 +5012,13 @@ const Table = props => {
                             return cellStyle()[rowNum]?.[column]?.class;
                           }
                         }), false, true);
-                        insert(_el$12, () => renderCell(cell, item, index(), column, rowNum));
-                        return _el$12;
+                        insert(_el$10, () => renderCell(cell, item, index(), column, rowNum));
+                        return _el$10;
                       })() : [];
                     }
                   });
                 });
-                return _el$10;
+                return _el$0;
               })();
             }
           })
@@ -5649,8 +5037,8 @@ const Table = props => {
           },
           children: rowNum => {
             return (() => {
-              var _el$13 = _tmpl$4();
-              spread(_el$13, mergeProps(() => footerStyle()[rowNum]?.all, {
+              var _el$11 = _tmpl$4();
+              spread(_el$11, mergeProps(() => footerStyle()[rowNum]?.all, {
                 get style() {
                   return footerStyle()[rowNum]?.style;
                 },
@@ -5658,15 +5046,15 @@ const Table = props => {
                   return footerStyle()[rowNum]?.class;
                 }
               }), false, true);
-              insert(_el$13, createComponent(For, {
+              insert(_el$11, createComponent(For, {
                 get each() {
                   return reactiveColumns();
                 },
                 children: column => {
                   const footCell = footerCell()[rowNum]?.[column];
                   return !!footCell ? (() => {
-                    var _el$14 = _tmpl$7();
-                    spread(_el$14, mergeProps(() => footCellStyle()?.[rowNum]?.[column]?.all, {
+                    var _el$12 = _tmpl$7();
+                    spread(_el$12, mergeProps(() => footCellStyle()?.[rowNum]?.[column]?.all, {
                       get style() {
                         return footCellStyle()[rowNum]?.[column]?.style;
                       },
@@ -5674,16 +5062,16 @@ const Table = props => {
                         return footCellStyle()[rowNum]?.[column]?.class;
                       }
                     }), false, true);
-                    insert(_el$14, footCell);
-                    return _el$14;
+                    insert(_el$12, footCell);
+                    return _el$12;
                   })() : [];
                 }
               }));
-              return _el$13;
+              return _el$11;
             })();
           }
         }));
-        createRenderEffect(_p$ => {
+        effect(_p$ => {
           var _v$ = getProps().id,
             _v$2 = `${styles$1.table} ${getProps().class || ''}`,
             _v$3 = getProps().style;
@@ -5697,7 +5085,7 @@ const Table = props => {
           a: undefined
         });
         return _el$2;
-      })(), createMemo(() => props.children)];
+      })(), memo(() => props.children)];
     }
   }));
 };
@@ -5753,7 +5141,7 @@ const Row = props => {
         break;
     }
   });
-  return createMemo(() => local.children);
+  return memo(() => local.children);
 };
 
 const Column = props => {
@@ -5990,7 +5378,7 @@ const TabBar = props => {
         _el$5.$$click = () => props.onTabChange?.(label, index());
         use(el => tabRefs[index()] = el, _el$5);
         insert(_el$5, label);
-        createRenderEffect(_p$ => {
+        effect(_p$ => {
           var _v$6 = {
               [styles.tabButton]: true,
               [styles.active]: index() === props.activeTab,
@@ -6023,11 +5411,11 @@ const TabBar = props => {
       },
       get children() {
         var _el$3 = _tmpl$();
-        createRenderEffect(() => className(_el$3, styles.barRail));
+        effect(() => className(_el$3, styles.barRail));
         return _el$3;
       }
     }), _el$4);
-    createRenderEffect(_p$ => {
+    effect(_p$ => {
       var _v$ = styles.tabBarContainer,
         _v$2 = containerStyle,
         _v$3 = `${getPosition()} ${props?.class ?? ''}`,
@@ -6059,17 +5447,28 @@ const ColeError = props => {
   createEffect(() => {
     if (!!formField?.formName && !!props.errorName) {
       formField?.setErrors(prev => {
+        const existing = prev?.err ?? [];
         const newError = {
           key: props.errorName,
           hasError: false,
           display: props.children
         };
+        // Upsert by key so re-runs / duplicate registrations don't accumulate copies.
+        const filtered = existing.filter(e => e.key !== props.errorName);
         return {
-          err: [...prev?.err, newError]
+          err: [...filtered, newError]
         };
       });
     }
   });
+  // Remove this error display when the component unmounts.
+  onCleanup(() => {
+    if (!!formField?.formName && !!props.errorName) {
+      formField?.setErrors(prev => ({
+        err: (prev?.err ?? []).filter(e => e.key !== props.errorName)
+      }));
+    }
+  });
   return [];
 };