coles-solid-library 0.4.4 → 0.4.6

package/dist/index.esm.js

@@ -516,7 +516,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$j = ".Button-module_customButtonStyle__RCNcn {\n  border-radius: 8px;\n  font-family: \"Roboto, sans-serif\";\n  padding: 8px 8px;\n  border: none;\n  outline: none;\n  transition: transform 0.2s ease, background 0.2s ease;\n}\n.Button-module_customButtonStyle__RCNcn:active {\n  transform: scale(0.9);\n  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);\n}\n.Button-module_customButtonStyle__RCNcn:not(:disabled):hover {\n  cursor: pointer;\n  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);\n}\n.Button-module_customButtonStyle__RCNcn:disabled:hover {\n  cursor: not-allowed;\n}\n\n.Button-module_primary__st6yY {\n  background-color: var(--primary-color, #4CAF50);\n  color: var(--on-primary-color, #fff);\n}\n\n.Button-module_primaryVariant__ObiQc {\n  background-color: var(--primary-color-varient, #43A047);\n  color: var(--on-primary-color, #fff);\n}\n\n.Button-module_secondary__j-3rj {\n  background-color: var(--secondary-color, #14b9c3);\n  color: var(--on-secondary-color, #000000);\n}\n\n.Button-module_secondaryVariant__xFdCV {\n  background-color: var(--secondary-color-varient, #0b969f);\n  color: var(--on-secondary-color, #000000);\n}\n\n.Button-module_background__ebjke {\n  background-color: var(--background-color, #ffffff);\n  color: var(--on-background-color, #000000);\n}\n\n.Button-module_surface__wzdJD {\n  background-color: var(--surface-color, #EEEEEE);\n  color: var(--on-surface-color, #000000);\n}\n\n.Button-module_surfaceVariant__SkL3X {\n  background-color: var(--surface-color-variant, #ccc);\n  color: var(--on-surface-color, #000000);\n}\n\n.Button-module_container__0j8md {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n\n.Button-module_error__1zBsf {\n  background-color: var(--error-color, #B00020);\n  color: var(--on-error-color, #ffffff);\n}\n\n.Button-module_borderPrimary__k5fYt {\n  border: 1px solid var(--primary-color, #4CAF50);\n}\n\n.Button-module_borderPrimaryVariant__-uFUm {\n  border: 1px solid var(--primary-color-varient, #43A047);\n}\n\n.Button-module_borderSecondary__hzoGk {\n  border: 1px solid var(--secondary-color, #14b9c3);\n}\n\n.Button-module_borderSecondaryVariant__-75Li {\n  border: 1px solid var(--secondary-color-varient, #0b969f);\n}\n\n.Button-module_borderBackground__Uyf-G {\n  border: 1px solid var(--background-color, #ffffff);\n}\n\n.Button-module_borderSurface__q9bRE {\n  border: 1px solid var(--surface-color, #EEEEEE);\n}\n\n.Button-module_borderSurfaceVariant__ZHVd0 {\n  border: 1px solid var(--surface-color-variant, #ccc);\n}\n\n.Button-module_borderContainer__mXwj- {\n  border: 1px solid var(--container-color, #ffffff);\n}\n\n.Button-module_borderError__IChtd {\n  border: 1px solid var(--error-color, #B00020);\n}\n\n.Button-module_none__YrUD1 {\n  border: none;\n}\n\n.Button-module_transparent__6v0QA {\n  background-color: transparent !important;\n  border: none;\n  outline: none;\n  padding: 0px;\n  margin: 0px;\n}";
+var css_248z$j = ".Button-module_customButtonStyle__RCNcn {\n  border-radius: 8px;\n  font-family: \"Roboto, sans-serif\";\n  padding: 8px 8px;\n  border: none;\n  outline: none;\n  transition: transform 0.2s ease, background 0.2s ease;\n}\n.Button-module_customButtonStyle__RCNcn:active {\n  transform: scale(0.9);\n  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);\n}\n.Button-module_customButtonStyle__RCNcn:not(:disabled):hover {\n  cursor: pointer;\n  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);\n}\n.Button-module_customButtonStyle__RCNcn:disabled {\n  opacity: 0.6;\n}\n.Button-module_customButtonStyle__RCNcn:disabled:hover {\n  cursor: not-allowed;\n}\n\n.Button-module_primary__st6yY {\n  background-color: var(--primary-color, #4CAF50);\n  color: var(--on-primary-color, #fff);\n}\n\n.Button-module_primaryVariant__ObiQc {\n  background-color: var(--primary-color-varient, #43A047);\n  color: var(--on-primary-color, #fff);\n}\n\n.Button-module_secondary__j-3rj {\n  background-color: var(--secondary-color, #14b9c3);\n  color: var(--on-secondary-color, #000000);\n}\n\n.Button-module_secondaryVariant__xFdCV {\n  background-color: var(--secondary-color-varient, #0b969f);\n  color: var(--on-secondary-color, #000000);\n}\n\n.Button-module_background__ebjke {\n  background-color: var(--background-color, #ffffff);\n  color: var(--on-background-color, #000000);\n}\n\n.Button-module_surface__wzdJD {\n  background-color: var(--surface-color, #EEEEEE);\n  color: var(--on-surface-color, #000000);\n}\n\n.Button-module_surfaceVariant__SkL3X {\n  background-color: var(--surface-color-variant, #ccc);\n  color: var(--on-surface-color, #000000);\n}\n\n.Button-module_container__0j8md {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n\n.Button-module_error__1zBsf {\n  background-color: var(--error-color, #B00020);\n  color: var(--on-error-color, #ffffff);\n}\n\n.Button-module_borderPrimary__k5fYt {\n  border: 1px solid var(--primary-color, #4CAF50);\n}\n\n.Button-module_borderPrimaryVariant__-uFUm {\n  border: 1px solid var(--primary-color-varient, #43A047);\n}\n\n.Button-module_borderSecondary__hzoGk {\n  border: 1px solid var(--secondary-color, #14b9c3);\n}\n\n.Button-module_borderSecondaryVariant__-75Li {\n  border: 1px solid var(--secondary-color-varient, #0b969f);\n}\n\n.Button-module_borderBackground__Uyf-G {\n  border: 1px solid var(--background-color, #ffffff);\n}\n\n.Button-module_borderSurface__q9bRE {\n  border: 1px solid var(--surface-color, #EEEEEE);\n}\n\n.Button-module_borderSurfaceVariant__ZHVd0 {\n  border: 1px solid var(--surface-color-variant, #ccc);\n}\n\n.Button-module_borderContainer__mXwj- {\n  border: 1px solid var(--container-color, #ffffff);\n}\n\n.Button-module_borderError__IChtd {\n  border: 1px solid var(--error-color, #B00020);\n}\n\n.Button-module_none__YrUD1 {\n  border: none;\n}\n\n.Button-module_transparent__6v0QA {\n  background-color: transparent !important;\n  border: none;\n  outline: none;\n  padding: 0px;\n  margin: 0px;\n}";
 var style$8 = {"customButtonStyle":"Button-module_customButtonStyle__RCNcn","primary":"Button-module_primary__st6yY","primaryVariant":"Button-module_primaryVariant__ObiQc","secondary":"Button-module_secondary__j-3rj","secondaryVariant":"Button-module_secondaryVariant__xFdCV","background":"Button-module_background__ebjke","surface":"Button-module_surface__wzdJD","surfaceVariant":"Button-module_surfaceVariant__SkL3X","container":"Button-module_container__0j8md","error":"Button-module_error__1zBsf","borderPrimary":"Button-module_borderPrimary__k5fYt","borderPrimaryVariant":"Button-module_borderPrimaryVariant__-uFUm","borderSecondary":"Button-module_borderSecondary__hzoGk","borderSecondaryVariant":"Button-module_borderSecondaryVariant__-75Li","borderBackground":"Button-module_borderBackground__Uyf-G","borderSurface":"Button-module_borderSurface__q9bRE","borderSurfaceVariant":"Button-module_borderSurfaceVariant__ZHVd0","borderContainer":"Button-module_borderContainer__mXwj-","borderError":"Button-module_borderError__IChtd","none":"Button-module_none__YrUD1","transparent":"Button-module_transparent__6v0QA"};
 styleInject(css_248z$j);
 
@@ -578,8 +578,8 @@ styleInject(css_248z$i);
 
 var _tmpl$$n = /*#__PURE__*/template(`<div>No <!> Found`),
   _tmpl$2$c = /*#__PURE__*/template(`<div>No Elements Found`),
-  _tmpl$3$4 = /*#__PURE__*/template(`<div>`),
-  _tmpl$4$2 = /*#__PURE__*/template(`<div><div><div></div></div><div>`);
+  _tmpl$3$5 = /*#__PURE__*/template(`<div>`),
+  _tmpl$4$3 = /*#__PURE__*/template(`<div><div><div></div></div><div>`);
 const carouselTitleContext = createContext(createSignal([]));
 const Provider$2 = props => {
   return createComponent(carouselTitleContext.Provider, {
@@ -684,7 +684,7 @@ const Carousel = ({
       return createSignal([]);
     },
     get children() {
-      var _el$6 = _tmpl$4$2(),
+      var _el$6 = _tmpl$4$3(),
         _el$7 = _el$6.firstChild,
         _el$8 = _el$7.firstChild,
         _el$11 = _el$7.nextSibling;
@@ -701,7 +701,7 @@ const Carousel = ({
           return Object.keys(props).includes('elements');
         },
         get children() {
-          var _el$9 = _tmpl$3$4();
+          var _el$9 = _tmpl$3$5();
           insert(_el$9, slideName);
           createRenderEffect(() => className(_el$9, `${style$7.carouselSlide}`));
           return _el$9;
@@ -712,7 +712,7 @@ const Carousel = ({
           return Object.keys(props).includes('children');
         },
         get children() {
-          var _el$10 = _tmpl$3$4();
+          var _el$10 = _tmpl$3$5();
           insert(_el$10, slideName);
           createRenderEffect(() => className(_el$10, `${style$7.carouselSlide}`));
           return _el$10;
@@ -761,11 +761,11 @@ styleInject(css_248z$h);
 
 var _tmpl$$m = /*#__PURE__*/template(`<span>`),
   _tmpl$2$b = /*#__PURE__*/template(`<span>:`),
-  _tmpl$3$3 = /*#__PURE__*/template(`<span><span>`);
+  _tmpl$3$4 = /*#__PURE__*/template(`<span><span>`);
 const Chip = props => {
   const hoverChip = props.onClick ? `${style$6.hover}` : "";
   return (() => {
-    var _el$ = _tmpl$3$3(),
+    var _el$ = _tmpl$3$4(),
       _el$4 = _el$.firstChild;
     addEventListener(_el$, "click", props.onClick, true);
     insert(_el$, createComponent(Show, {
@@ -1395,8 +1395,102 @@ function useClickOutside(elementRefs, callback) {
   });
 }
 
+/**
+ * Shared hook for positioning overlay elements (dropdowns, menus, etc.)
+ * relative to an anchor element. Handles viewport boundary detection,
+ * above/below placement, scroll and resize tracking.
+ *
+ * @param anchorRef  - Accessor returning the anchor DOM element
+ * @param overlayRef - Accessor returning the overlay DOM element
+ * @param open       - Accessor returning whether the overlay is currently open
+ * @param config     - Optional positioning configuration
+ */
+function useOverlayPosition(anchorRef, overlayRef, open, config) {
+  const VIEWPORT_MARGIN = 4;
+  const MIN_HEIGHT = 160;
+  const [dropTop, setDropTop] = createSignal(false);
+  const getOverlayMetrics = () => {
+    const el = overlayRef();
+    if (!el) return {
+      height: 0,
+      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;
+    return {
+      height,
+      width: rect.width
+    };
+  };
+  const updatePosition = () => {
+    const overlay = overlayRef();
+    const anchor = anchorRef();
+    if (!overlay || !anchor) return;
+    const baseRect = anchor.getBoundingClientRect();
+    const {
+      height: overlayHeight
+    } = getOverlayMetrics();
+    const spaceBelow = window.innerHeight - baseRect.bottom;
+    const spaceAbove = baseRect.top;
+    // Decide orientation: prefer below if it fits, else above, else whichever has more room
+    let placeAbove = false;
+    if (overlayHeight + VIEWPORT_MARGIN <= spaceBelow) {
+      placeAbove = false;
+    } else if (overlayHeight + 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
+    if (newY < window.scrollY + VIEWPORT_MARGIN) {
+      newY = window.scrollY + VIEWPORT_MARGIN;
+    }
+    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`;
+  };
+  // Re-position when open changes
+  createEffect(() => {
+    if (open()) {
+      queueMicrotask(() => updatePosition());
+    }
+  });
+  // Attach scroll/resize listeners
+  onMount(() => {
+    document.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+    onCleanup(() => {
+      document.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+    });
+  });
+  return {
+    dropTop,
+    updatePosition
+  };
+}
+
 var css_248z$e = "@charset \"UTF-8\";\n.input-module_input__-LMoi {\n  width: 100%;\n  max-width: 400px;\n  border-radius: var(--border-radius-lg, 16px);\n  font-size: var(--font-size-base, 16px);\n  transition: border 0.7s ease, padding 0.7s ease;\n}\n@media screen and (max-width: 768px) {\n  .input-module_input__-LMoi {\n    width: 100%;\n    max-width: 100%;\n  }\n}\n.input-module_input__-LMoi[type=checkbox] {\n  width: -moz-min-content;\n  width: min-content;\n  -webkit-appearance: none;\n  border: 1px solid #cacece;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);\n  padding: var(--spacing-1, 8px);\n  border-radius: var(--border-radius-sm);\n  display: inline-block;\n  position: relative;\n}\n.input-module_input__-LMoi[type=checkbox]:checked {\n  background-color: inherit;\n  border: 1px solid #adb8c0;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);\n  color: inherit;\n}\n.input-module_input__-LMoi[type=checkbox]:checked:after {\n  content: \"✔\";\n  position: absolute;\n  top: -15%;\n  left: 15%;\n  width: 10px;\n  height: 10px;\n  border-radius: 10%;\n}\n.input-module_input__-LMoi:not([type=checkbox])::-moz-placeholder {\n  opacity: 0;\n}\n.input-module_input__-LMoi:not([type=checkbox])::placeholder {\n  opacity: 0;\n}\n.input-module_input__-LMoi:focus {\n  outline: none;\n}\n.input-module_input__-LMoi.input-module_error__vs2kz {\n  border: 1px solid var(--warn-color);\n}\n.input-module_input__-LMoi.input-module_success__beiu5 {\n  border: 1px solid green;\n}\n.input-module_input__-LMoi.input-module_warning__b6S5s {\n  border: 1px solid orange;\n}\n.input-module_input__-LMoi.input-module_info__pWO0n {\n  border: 1px solid blue;\n}\n.input-module_input__-LMoi.input-module_disabled__40ZHw {\n  border: 1px solid gray;\n}\n\n.input-module_inFormField__kk-PD {\n  border: none;\n  outline: none;\n  transition: padding 0.7s ease;\n}\n\n.input-module_checkbox__Yu-9M {\n  cursor: pointer;\n}\n\n.input-module_transparent__aXcGX {\n  background-color: inherit !important;\n  opacity: 1;\n  color: inherit !important;\n  border: none;\n}\n.input-module_transparent__aXcGX :focus {\n  outline: none;\n}";
-var styles$9 = {"input":"input-module_input__-LMoi","inFormField":"input-module_inFormField__kk-PD","transparent":"input-module_transparent__aXcGX"};
+var styles$9 = {"input":"input-module_input__-LMoi","disabled":"input-module_disabled__40ZHw","inFormField":"input-module_inFormField__kk-PD","transparent":"input-module_transparent__aXcGX"};
 styleInject(css_248z$e);
 
 var _tmpl$$j = /*#__PURE__*/template(`<form>`);
@@ -1583,17 +1677,13 @@ const Input = props => {
         return inputValue();
       },
       "onFocus": () => {
+        if (props.disabled) return;
         if (!isNullish(context.getName)) {
           context.setFocused?.(true);
-          // Mark dirty on initial focus if part of a form (requested behavior)
-          const formName = context.formName;
-          if (formName && formContext?.formGroup?.markDirty) {
-            const meta = formContext.formGroup.getMeta(formName);
-            if (meta && !meta.dirty) formContext.formGroup.markDirty(formName);
-          }
         }
       },
       "onBlur": e => {
+        if (props.disabled) return;
         if (!isNullish(context.getName)) {
           context?.setFocused?.(prev => {
             if (prev) {
@@ -1612,7 +1702,7 @@ const Input = props => {
       },
       "onChange": onChange,
       get ["class"]() {
-        return `${styles$9.input} ${customProps.transparent ? styles$9.transparent : ""} ${!!context?.getName?.() ? styles$9.inFormField : ""} ${props?.class ?? ""}`;
+        return `${styles$9.input} ${props.disabled ? styles$9.disabled : ""} ${customProps.transparent ? styles$9.transparent : ""} ${!!context?.getName?.() ? styles$9.inFormField : ""} ${props?.class ?? ""}`;
       },
       get title() {
         return customProps.tooltip;
@@ -1724,8 +1814,8 @@ function Checkbox(props) {
   })();
 }
 
-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__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_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}";
-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__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","checkmark":"selectStyles-module_checkmark__UWcbd","option-label":"selectStyles-module_option-label__bBFSW"};
+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 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);
 
 const manager = new class WinManager {
@@ -1814,20 +1904,191 @@ const SelectContextProvider = props => {
   });
 };
 
+/**
+ * Manages the registry of options for a Select component.
+ * Handles registration, unregistration, ordering, and label resolution.
+ */
+function useSelectOptions() {
+  const [options, setOptions] = createStore({});
+  const [optionOrder, setOptionOrder] = createSignal([]);
+  const registerOption = (val, label, labelText = "") => {
+    const stringVal = JSON.stringify(val);
+    setOptions(store => ({
+      ...store,
+      [stringVal]: {
+        value: stringVal,
+        raw: val,
+        label,
+        labelText
+      }
+    }));
+    setOptionOrder(prev => prev.includes(stringVal) ? prev : [...prev, stringVal]);
+  };
+  const unregisterOption = val => {
+    const stringVal = JSON.stringify(val);
+    setOptions(store => {
+      const newStore = {
+        ...store
+      };
+      delete newStore[stringVal];
+      return newStore;
+    });
+    setOptionOrder(prev => prev.filter(key => key !== stringVal));
+  };
+  const optionEntries = createMemo(() => optionOrder().map(key => options[key]).filter(entry => !!entry));
+  const getOptionLabelText = entry => {
+    if (!entry) return "";
+    const text = entry.labelText?.trim();
+    if (text) return text;
+    if (typeof entry.label === "string" || typeof entry.label === "number") return String(entry.label);
+    return String(entry.raw ?? entry.value ?? "").trim();
+  };
+  const getLabel = val => {
+    const stringVal = JSON.stringify(val);
+    return options[stringVal]?.label || String(val);
+  };
+  return {
+    options,
+    registerOption,
+    unregisterOption,
+    optionEntries,
+    getOptionLabelText,
+    getLabel
+  };
+}
+
+/**
+ * Manages highlighted-index state for keyboard navigation in a Select dropdown.
+ * Provides movement, scroll-into-view, and reset-to-selected helpers.
+ */
+function useHighlight(config) {
+  const [highlightedIndex, setHighlightedIndex] = createSignal(-1);
+  const scrollHighlightedIntoView = index => {
+    const dropdown = config.dropdownRef();
+    if (!dropdown) return;
+    const optionsEls = dropdown.querySelectorAll('[role="option"]');
+    const idx = index ?? highlightedIndex();
+    const el = optionsEls[idx];
+    if (el && typeof el.scrollIntoView === "function") {
+      el.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  };
+  const moveHighlight = delta => {
+    const entries = config.optionEntries();
+    if (!entries.length) return;
+    const nextIndex = ((highlightedIndex() < 0 ? 0 : highlightedIndex()) + delta + entries.length) % entries.length;
+    setHighlightedIndex(nextIndex);
+    queueMicrotask(() => scrollHighlightedIntoView(nextIndex));
+  };
+  const setHighlightToSelectedOrFirst = () => {
+    const entries = config.optionEntries();
+    if (!entries.length) {
+      setHighlightedIndex(-1);
+      return;
+    }
+    let idx = entries.findIndex(entry => config.isSelected(entry.raw));
+    if (idx < 0) idx = 0;
+    setHighlightedIndex(idx);
+    queueMicrotask(() => scrollHighlightedIntoView(idx));
+  };
+  // Clamp highlighted index when entries change
+  createEffect(() => {
+    const entries = config.optionEntries();
+    if (!entries.length) {
+      if (highlightedIndex() !== -1) setHighlightedIndex(-1);
+      return;
+    }
+    if (highlightedIndex() >= entries.length) {
+      setHighlightedIndex(entries.length - 1);
+    }
+  });
+  return {
+    highlightedIndex,
+    setHighlightedIndex,
+    moveHighlight,
+    setHighlightToSelectedOrFirst,
+    scrollHighlightedIntoView
+  };
+}
+
+const TYPEAHEAD_TIMEOUT = 650;
+/**
+ * Typeahead search for Select. Buffers keystrokes and finds
+ * the first option whose label starts with the typed string.
+ */
+function useTypeahead(config) {
+  const [typeahead, setTypeahead] = createSignal("");
+  let timeoutId;
+  let lastTypeaheadAt = 0;
+  const resetTypeahead = () => {
+    setTypeahead("");
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+      timeoutId = undefined;
+    }
+  };
+  const findMatchIndex = search => {
+    const entries = config.optionEntries();
+    if (!entries.length) return -1;
+    const normalized = search.toLowerCase();
+    const start = config.highlightedIndex() >= 0 ? (config.highlightedIndex() + 1) % entries.length : 0;
+    for (let i = 0; i < entries.length; i += 1) {
+      const idx = (start + i) % entries.length;
+      const label = config.getOptionLabelText(entries[idx]).toLowerCase();
+      if (label.startsWith(normalized)) return idx;
+    }
+    return -1;
+  };
+  const handleTypeahead = key => {
+    const now = Date.now();
+    const prev = typeahead();
+    const isRepeat = prev.length === 1 && prev === key && now - lastTypeaheadAt < TYPEAHEAD_TIMEOUT;
+    const nextBuffer = isRepeat ? key : `${prev}${key}`;
+    lastTypeaheadAt = now;
+    setTypeahead(nextBuffer);
+    if (timeoutId) window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => setTypeahead(""), TYPEAHEAD_TIMEOUT);
+    const matchIndex = findMatchIndex(nextBuffer);
+    if (matchIndex >= 0) {
+      config.onMatch(matchIndex);
+    }
+  };
+  onCleanup(() => {
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+    }
+  });
+  return {
+    handleTypeahead,
+    resetTypeahead
+  };
+}
+
 var _tmpl$$g = /*#__PURE__*/template(`<span>`),
   _tmpl$2$8 = /*#__PURE__*/template(`<span>▲`),
-  _tmpl$3$2 = /*#__PURE__*/template(`<span>▼`),
-  _tmpl$4$1 = /*#__PURE__*/template(`<div>`),
-  _tmpl$5$1 = /*#__PURE__*/template(`<div is=coles-solid-select role=button aria-haspopup=listbox tabindex=0><div><span>`, true, false, false);
+  _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);
 function Select(props) {
-  const isMultiple = Object.keys(props).includes("multiple") || props.multiple === true;
-  const [placeholder, setPlaceholder] = createSignal(props?.placeholder ?? "Select...");
-  // Internal state for selected value(s). Use provided value or defaultValue or an initial default.
+  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();
   const [dropdownRef, setDropdownRef] = createSignal();
+  const [mobilePopupRef, setMobilePopupRef] = createSignal();
+  // Resolved rendering mode: 'popup' for fullscreen mobile popup, 'desktop' for traditional dropdown
+  const resolvedMode = createMemo(() => {
+    const mode = props.mobileMode ?? 'auto';
+    if (mode === 'popup') return 'popup';
+    if (mode === 'desktop') return 'desktop';
+    // 'auto': detect mobile at runtime
+    return isMobile() ? 'popup' : 'desktop';
+  });
   const form = useFormProvider();
   const formContext = useFormContext();
   const hasForm = !!form?.formName || !!form?.getName || !!form?.getValue || !!form?.setValue || !!form?.getTextInside;
@@ -1843,46 +2104,69 @@ function Select(props) {
   };
   // 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');
+    return !!props.disabled || fieldsetDisabled;
+  };
   const menuLocRef = createMemo(() => {
     if (!!form?.getFormFieldRef) {
       return form.getFormFieldRef();
     }
     return selectRef();
   });
-  const [options, setOptions] = createStore({});
-  // Register and unregister functions using the store
-  const registerOption = (val, label) => {
-    const stringVal = JSON.stringify(val);
-    setOptions(store => ({
-      ...store,
-      [stringVal]: {
-        value: stringVal,
-        label
-      }
-    }));
-  };
-  const unregisterOption = val => {
-    const stringVal = JSON.stringify(val);
-    setOptions(store => {
-      const newStore = {
-        ...store
-      };
-      delete newStore[stringVal];
-      return newStore;
-    });
-  };
-  const getLabel = val => {
-    const stringVal = JSON.stringify(val);
-    return options[stringVal]?.label || String(val);
-  };
+  // --- Option registry (extracted hook) ---
+  const {
+    options,
+    registerOption,
+    unregisterOption,
+    optionEntries,
+    getOptionLabelText,
+    getLabel
+  } = useSelectOptions();
   // Helper to check if a value is selected (for Option highlighting)
   const isSelected = val => {
     const current = currentValue();
     return isMultiple ? Array.isArray(current) && current.includes(val) : current === val;
   };
+  // --- Highlight management (extracted hook) ---
+  // Use combined ref so scrollIntoView works in both desktop dropdown and mobile popup modes
+  const activeListRef = createMemo(() => resolvedMode() === 'popup' ? mobilePopupRef() : dropdownRef());
+  const {
+    highlightedIndex,
+    setHighlightedIndex,
+    moveHighlight,
+    setHighlightToSelectedOrFirst,
+    scrollHighlightedIntoView
+  } = useHighlight({
+    optionEntries,
+    isSelected,
+    dropdownRef: activeListRef
+  });
+  // --- Typeahead search (extracted hook) ---
+  const {
+    handleTypeahead,
+    resetTypeahead
+  } = useTypeahead({
+    optionEntries,
+    highlightedIndex,
+    getOptionLabelText,
+    onMatch: index => {
+      setHighlightedIndex(index);
+      queueMicrotask(() => scrollHighlightedIntoView(index));
+    }
+  });
+  // --- Overlay positioning (extracted hook) ---
+  const {
+    dropTop} = useOverlayPosition(menuLocRef, dropdownRef, open);
   // Function to handle selecting/toggling an option for single or multi-select
   // When not using a form or greater FormContext
   const selectValue = val => {
+    if (form?.formName && formContext?.formGroup?.markDirty) {
+      const meta = formContext.formGroup.getMeta(form?.formName);
+      if (meta && !meta.dirty) formContext.formGroup.markDirty(form?.formName);
+    }
     if (isMultiple) {
       // For multi-select, toggle the value in the array
       const current = props?.value ?? [];
@@ -1904,7 +2188,7 @@ function Select(props) {
   };
   // Compute the content to display in the closed select (trigger area)
   const displayValue = createMemo(() => {
-    const current = currentValue(); //selected();
+    const current = currentValue();
     if (isMultiple) {
       const selectedArray = Array.isArray(current) ? current : [];
       if (selectedArray.length === 0) {
@@ -1965,149 +2249,19 @@ function Select(props) {
       }
     }
   });
-  const VIEWPORT_MARGIN = 4; // minimal gap from screen edges
-  const getDropdownMetrics = () => {
-    const dr = dropdownRef();
-    if (!dr) return {
-      height: 0,
-      width: 0
-    };
-    const rect = dr.getBoundingClientRect();
-    // When scaled closed, height can be 0; fallback to scrollHeight
-    const height = rect.height === 0 ? dr.scrollHeight || rect.height : rect.height;
-    return {
-      height,
-      width: rect.width
-    };
-  };
-  const dropdownBelowScreen = () => {
-    const menuLoc = menuLocRef();
-    if (menuLoc && dropdownRef()) {
-      const selectRect = menuLoc.getBoundingClientRect();
-      const {
-        height
-      } = getDropdownMetrics();
-      return selectRect.bottom + height + VIEWPORT_MARGIN > window.innerHeight && selectRect.top - height - VIEWPORT_MARGIN >= 0 ? true : selectRect.bottom + height + VIEWPORT_MARGIN > window.innerHeight;
-    }
-    return false;
-  };
-  const [menuRect, setMenuRect] = createSignal();
-  const selectLocation = createMemo(() => {
-    const select = selectRef();
-    const menuLoc = menuLocRef();
-    const getLocation = rect => {
-      if (dropdownBelowScreen()) {
-        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
-    };
-  });
-  const selectWidth = () => {
-    if (menuLocRef()) {
-      return menuLocRef().getBoundingClientRect().width;
-    }
-    return 0;
-  };
-  createMemo(() => {
-    const value = currentValue();
-    if (isMultiple) {
-      const selectedArray = Array.isArray(value) ? value : [];
-      if (selectedArray.length === 0) {
-        return 0;
-      }
-      const labels = selectedArray.map(val => options[JSON.stringify(val)]?.label || String(val));
-      return labels.join(", ").length * 8; // Approximate width based on character count
-    } else {
-      return selectWidth();
-    }
-  });
-  const updatePosition = () => {
+  // --- Width sync effect ---
+  createEffect(() => {
     const dropdown = dropdownRef();
     const select = selectRef();
-    const anchor = menuLocRef();
-    if (!dropdown || !(select || anchor)) return;
-    const baseRect = (anchor ?? select).getBoundingClientRect();
-    const {
-      height: ddHeight
-    } = getDropdownMetrics();
-    const spaceBelow = window.innerHeight - baseRect.bottom;
-    const spaceAbove = baseRect.top;
-    // Decide orientation: prefer below if it fits fully else choose the side with more space.
-    let placeAbove = false;
-    if (ddHeight + VIEWPORT_MARGIN <= spaceBelow) {
-      placeAbove = false;
-    } else if (ddHeight + VIEWPORT_MARGIN <= spaceAbove) {
-      placeAbove = true;
-    } else {
-      // Neither fits: pick side with more space
-      placeAbove = spaceAbove > spaceBelow;
-    }
-    // store orientation for class assignment
-    setDropTop(placeAbove);
-    // Compute available vertical space for dropdown and clamp to a sensible minimum
-    const availableSpace = (placeAbove ? spaceAbove : spaceBelow) - VIEWPORT_MARGIN;
-    const maxHeight = Math.max(160, availableSpace); // ensure at least 160px so a few options are visible
-    let newY;
-    if (!placeAbove) {
-      newY = baseRect.bottom + window.scrollY; // default below
-      // Clamp if overflow
-      if (newY + ddHeight + VIEWPORT_MARGIN > window.scrollY + window.innerHeight) {
-        newY = window.scrollY + window.innerHeight - ddHeight - VIEWPORT_MARGIN;
-      }
-    } else {
-      newY = baseRect.top + window.scrollY - ddHeight; // above
-      if (newY < window.scrollY + VIEWPORT_MARGIN) {
-        newY = window.scrollY + VIEWPORT_MARGIN;
-      }
-    }
-    // Final guard: ensure dropdown not negative even for huge heights
-    if (newY < window.scrollY + VIEWPORT_MARGIN) {
-      newY = window.scrollY + VIEWPORT_MARGIN;
-    }
-    const newX = baseRect.left + window.scrollX;
-    dropdown.style.left = `${newX}px`;
-    dropdown.style.top = `${newY}px`;
-    dropdown.style.width = `${baseRect.width}px`;
-    dropdown.style.maxHeight = `${maxHeight}px`;
-  };
-  // Update width of select to match option text width
-  createEffect(() => {
-    if (selectRef() && dropdownRef()) {
-      const dropdownWidth = dropdownRef().getBoundingClientRect().width;
-      const selectWidth = selectRef().getBoundingClientRect().width;
+    if (select && dropdown) {
+      const dropdownWidth = dropdown.getBoundingClientRect().width;
+      const selectWidth = select.getBoundingClientRect().width;
       if (dropdownWidth !== selectWidth) {
-        setDropdownRef(old => {
-          if (!old) return;
-          old.style.width = `${selectWidth}px`;
-          return old;
-        });
+        dropdown.style.width = `${selectWidth}px`;
       }
     }
   });
+  // --- Form sync effects ---
   createEffect(() => {
     if (hasFormContext) {
       const value = currentValue();
@@ -2120,13 +2274,16 @@ function Select(props) {
       form.setValue?.(value);
     }
   });
-  const isTransparent = Object.keys(props).includes("transparent") || props.transparent === true;
+  const isTransparent = props.transparent !== undefined || props.transparent === true;
   const styleClassTransparent = isTransparent ? "solid_select__transparent" : "";
   // Give Current Value to Props
   createEffect(() => {
     !!props?.onChange ? props.onChange(currentValue()) : null;
   });
   useClickOutside([dropdownRef, selectRef], () => {
+    if (isDisabled()) return;
+    // Desktop mode uses click-outside; mobile popup uses backdrop tap
+    if (resolvedMode() === 'popup') return;
     setOpen(false);
     form?.setFocused?.(prev => {
       if (prev) {
@@ -2166,62 +2323,201 @@ function Select(props) {
     if (dropdown) {
       ignoreWindowManager(dropdown);
     }
-    document.addEventListener('scroll', updatePosition, true);
-    window.addEventListener('resize', updatePosition);
-    onCleanup(() => {
-      document.removeEventListener('scroll', updatePosition, true);
-      window.removeEventListener('resize', updatePosition);
-    });
   });
+  // --- Mobile popup window manager lifecycle ---
+  const closeMobilePopup = () => {
+    setOpen(false);
+    form?.setFocused?.(prev => {
+      if (prev) {
+        formContext?.formGroup?.validate?.(form?.formName ?? '');
+      }
+      return false;
+    });
+  };
   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
+    };
+  });
   const selectDropX = createMemo(() => `${selectLocation().x}px`);
   const selectDropY = createMemo(() => `${selectLocation().y}px`);
+  // --- Open/close effects ---
   createEffect(() => {
     if (open()) {
-      // Wait a tick so dropdown renders before measuring
-      queueMicrotask(() => updatePosition());
+      setHighlightToSelectedOrFirst();
+      // Auto-focus mobile popup for keyboard interaction
+      if (resolvedMode() === 'popup') {
+        queueMicrotask(() => mobilePopupRef()?.focus());
+      }
+    } else {
+      setHighlightedIndex(-1);
+      resetTypeahead();
+    }
+  });
+  createEffect(() => {
+    if (props.disabled) {
+      setOpen(false);
     }
   });
+  // --- Context provider value ---
   const providerValue = createMemo(() => ({
     isSelected,
     selectValue,
     registerOption,
     unregisterOption,
+    isHighlighted: val => {
+      const stringVal = JSON.stringify(val);
+      const entries = optionEntries();
+      const index = entries.findIndex(entry => entry.value === stringVal);
+      return index >= 0 && index === highlightedIndex();
+    },
     selectRef,
-    selectStyle: currStyle
+    selectStyle: currStyle,
+    isDisabled,
+    closeDropdown: () => {
+      if (!isMultiple) setOpen(false);
+    }
   }));
-  const [dropTop, setDropTop] = createSignal(false);
-  return (() => {
-    var _el$7 = _tmpl$5$1(),
-      _el$8 = _el$7.firstChild,
-      _el$9 = _el$8.firstChild;
-    _el$7.$$keydown = e => {
-      if (e.key === "ArrowDown") {
-        // Open dropdown if not open and set highlightedIndex to 0
-        if (!open()) {
-          setOpen(true);
-          // set highlightedIndex(0);
+  // --- Keyboard handler ---
+  const handleKeyDown = e => {
+    if (isDisabled()) return;
+    if (e.key === "Tab") {
+      setOpen(false);
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open()) {
+        setOpen(true);
+        setHighlightToSelectedOrFirst();
+      } else {
+        moveHighlight(1);
+      }
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!open()) {
+        setOpen(true);
+        setHighlightToSelectedOrFirst();
+      } else {
+        moveHighlight(-1);
+      }
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      if (!open()) setOpen(true);
+      if (optionEntries().length) {
+        setHighlightedIndex(0);
+        queueMicrotask(() => scrollHighlightedIntoView(0));
+      }
+    } else if (e.key === "End") {
+      e.preventDefault();
+      if (!open()) setOpen(true);
+      const entries = optionEntries();
+      if (entries.length) {
+        const last = entries.length - 1;
+        setHighlightedIndex(last);
+        queueMicrotask(() => scrollHighlightedIntoView(last));
+      }
+    } else if (e.key === "Enter") {
+      const entries = optionEntries();
+      const idx = highlightedIndex();
+      if (open() && entries.length && idx >= 0 && idx < entries.length) {
+        e.preventDefault();
+        const dropdown = dropdownRef();
+        const optionEls = dropdown?.querySelectorAll('[role="option"]');
+        const optionEl = optionEls?.[idx];
+        if (optionEl) {
+          optionEl.click();
+        } else {
+          selectValue(entries[idx].raw);
         }
-      } else if (e.key === "ArrowUp") ; else if (e.key === "Enter") ; else if (e.key === "Escape") {
-        setOpen(false);
       }
-    };
-    _el$7.$$click = e => {
-      // existing click logic below will toggle dropdown; ensure dirty marking once
-      if (form?.formName && formContext?.formGroup?.markDirty) {
-        const meta = formContext.formGroup.getMeta(form?.formName);
-        if (meta && !meta.dirty) formContext.formGroup.markDirty(form?.formName);
+    } else if (e.key === "Escape") {
+      setOpen(false);
+    } else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      if (!open()) setOpen(true);
+      e.preventDefault();
+      handleTypeahead(e.key);
+    }
+  };
+  // --- Mobile popup keyboard handler ---
+  const mobilePopupTitle = createMemo(() => {
+    const formLabel = form?.getName?.();
+    if (formLabel && formLabel.trim()) return formLabel.trim();
+    if (props.placeholder) return props.placeholder;
+    return '';
+  });
+  const handleMobileKeyDown = e => {
+    if (isDisabled()) return;
+    if (e.key === "Escape") {
+      closeMobilePopup();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      moveHighlight(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      moveHighlight(-1);
+    } else if (e.key === "Enter") {
+      const entries = optionEntries();
+      const idx = highlightedIndex();
+      if (entries.length && idx >= 0 && idx < entries.length) {
+        e.preventDefault();
+        const popup = mobilePopupRef();
+        const optionEls = popup?.querySelectorAll('[role="option"]');
+        const optionEl = optionEls?.[idx];
+        if (optionEl) {
+          optionEl.click();
+        } else {
+          selectValue(entries[idx].raw);
+        }
       }
-    };
+    } else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      e.preventDefault();
+      handleTypeahead(e.key);
+    }
+  };
+  return (() => {
+    var _el$7 = _tmpl$7$1(),
+      _el$8 = _el$7.firstChild,
+      _el$9 = _el$8.firstChild;
+    addEventListener(_el$7, "keydown", resolvedMode() === 'popup' ? undefined : handleKeyDown, true);
     _el$7.addEventListener("focus", () => {
+      if (isDisabled()) return;
       form?.setFocused?.(true);
-      if (form?.formName && formContext?.formGroup?.markDirty) {
-        const meta = formContext.formGroup.getMeta(form?.formName);
-        if (meta && !meta.dirty) formContext.formGroup.markDirty(form?.formName);
-      }
     });
     _el$7._$owner = getOwner();
     _el$8.$$click = e => {
+      if (isDisabled()) return;
+      e.currentTarget?.parentElement?.focus?.();
       const menuRect = menuLocRef()?.getBoundingClientRect();
       setMenuRect(menuRect);
       setOpen(old => !old);
@@ -2243,7 +2539,7 @@ function Select(props) {
         return !open();
       },
       get children() {
-        var _el$11 = _tmpl$3$2();
+        var _el$11 = _tmpl$3$3();
         createRenderEffect(() => className(_el$11, styles$7['solid_select__arrow']));
         return _el$11;
       }
@@ -2253,49 +2549,140 @@ function Select(props) {
         return providerValue();
       },
       get children() {
-        return createComponent(Portal, {
+        return [createComponent(Show, {
+          get when() {
+            return resolvedMode() === 'desktop';
+          },
           get children() {
-            var _el$12 = _tmpl$4$1();
-            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 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;
+              }
             });
-            return _el$12;
           }
-        });
+        }), createComponent(Show, {
+          get when() {
+            return resolvedMode() === 'popup';
+          },
+          get children() {
+            return createComponent(Portal, {
+              get children() {
+                return createComponent(Show, {
+                  get when() {
+                    return open();
+                  },
+                  get children() {
+                    var _el$13 = _tmpl$6$1(),
+                      _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 => {
+                      // 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();
+                    insert(_el$18, () => props.children);
+                    insert(_el$14, 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);
+                          return _p$;
+                        }, {
+                          e: undefined,
+                          t: undefined
+                        });
+                        return _el$19;
+                      }
+                    }), 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);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined,
+                      a: undefined,
+                      o: undefined,
+                      i: undefined,
+                      n: undefined,
+                      s: undefined
+                    });
+                    return _el$13;
+                  }
+                });
+              }
+            });
+          }
+        })];
       }
     }), null);
     createRenderEffect(_p$ => {
-      var _v$5 = props.id,
-        _v$6 = `${styles$7.solid_select__control_no_form} ${styles$7[styleClassTransparent]} coles-solid-selectControl`,
-        _v$7 = open(),
-        _v$8 = props.tooltip,
-        _v$9 = `${styles$7['solid_select__control']} ${props.class || ""}`,
-        _v$10 = !hasForm ? {
+      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$11 = styles$7['solid_select__value'];
-      _v$5 !== _p$.e && (_el$7.id = _p$.e = _v$5);
-      _v$6 !== _p$.t && className(_el$7, _p$.t = _v$6);
-      _v$7 !== _p$.a && (_el$7.ariaExpanded = _p$.a = _v$7);
-      _v$8 !== _p$.o && (_el$7.title = _p$.o = _v$8);
-      _v$9 !== _p$.i && className(_el$8, _p$.i = _v$9);
-      _p$.n = style$9(_el$8, _v$10, _p$.n);
-      _v$11 !== _p$.s && className(_el$9, _p$.s = _v$11);
+        _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);
       return _p$;
     }, {
       e: undefined,
@@ -2304,20 +2691,24 @@ function Select(props) {
       o: undefined,
       i: undefined,
       n: undefined,
-      s: undefined
+      s: undefined,
+      h: undefined,
+      r: undefined
     });
     return _el$7;
   })();
 }
-delegateEvents(["click", "keydown"]);
+delegateEvents(["keydown", "click", "mousedown"]);
 
 var _tmpl$$f = /*#__PURE__*/template(`<div role=option><span></span><span is=coles-select-label>`, true, false, false);
 function Option(props) {
   const formField = useFormProvider();
   const formContext = useFormContext();
   const select = useSelectContext();
+  let labelRef;
   onMount(() => {
-    select.registerOption?.(props.value, props.children);
+    const labelText = labelRef?.textContent?.trim() ?? (typeof props.children === "string" || typeof props.children === "number" ? String(props.children) : "");
+    select.registerOption?.(props.value, props.children, labelText);
   });
   onCleanup(() => select.unregisterOption?.(props.value));
   const selectFormFieldValue = value => {
@@ -2375,13 +2766,17 @@ function Option(props) {
     return false;
   };
   const handleClick = e => {
+    if (select?.isDisabled?.()) return;
     e.stopPropagation();
     const contextSuccess = selectFormContextValue(props.value);
     !contextSuccess ? selectFormFieldValue(props.value) : true;
     if (!formField?.getName?.()) {
       select.selectValue?.(props.value);
-      formField?.setFocused?.(true);
+    } else {
+      // Form handled the value — still need to close for single select
+      select.closeDropdown?.();
     }
+    formField?.setFocused?.(true);
   };
   return (() => {
     var _el$ = _tmpl$$f(),
@@ -2389,34 +2784,42 @@ function Option(props) {
       _el$3 = _el$2.nextSibling;
     _el$.$$click = handleClick;
     insert(_el$2, () => select?.isSelected?.(props.value) ?? false ? "✓" : "");
+    var _ref$ = labelRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$3) : labelRef = _el$3;
     _el$3._$owner = getOwner();
     insert(_el$3, () => props.children ?? "");
     createRenderEffect(_p$ => {
       var _v$ = select?.isSelected?.(props.value) ?? false,
-        _v$2 = `${styles$7['solid_select__option']} ${props.class || ""}`,
-        _v$3 = !!(select?.isSelected?.(props.value) ?? false),
-        _v$4 = `${styles$7['checkmark']}`,
-        _v$5 = `${styles$7['option-label']}`;
+        _v$2 = select?.isDisabled?.() ?? false,
+        _v$3 = `${styles$7['solid_select__option']} ${props.class || ""} ${select?.isDisabled?.() ? styles$7.solid_select__option_disabled : ""}`,
+        _v$4 = {
+          "selected": select?.isSelected?.(props.value) ?? false,
+          [styles$7.solid_select__option_highlight]: select?.isHighlighted?.(props.value) ?? false
+        },
+        _v$5 = `${styles$7['checkmark']}`,
+        _v$6 = `${styles$7['option-label']}`;
       _v$ !== _p$.e && setAttribute(_el$, "aria-selected", _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
-      _v$3 !== _p$.a && _el$.classList.toggle("selected", _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$2, _p$.o = _v$4);
-      _v$5 !== _p$.i && className(_el$3, _p$.i = _v$5);
+      _v$2 !== _p$.t && setAttribute(_el$, "aria-disabled", _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$, _p$.a = _v$3);
+      _p$.o = classList(_el$, _v$4, _p$.o);
+      _v$5 !== _p$.i && className(_el$2, _p$.i = _v$5);
+      _v$6 !== _p$.n && className(_el$3, _p$.n = _v$6);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined
     });
     return _el$;
   })();
 }
 delegateEvents(["click"]);
 
-var css_248z$b = ".TextArea-module_areaStyle__AshKi {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  padding: 0.5rem;\n  margin-right: calc(var(--spacing-1, 8px) / 2);\n  border: 1px solid #ccc;\n  border-radius: var(--border-radius-md, 6px);\n  width: 98%;\n  height: 100%;\n  resize: none;\n}\n@media screen and (max-width: 768px) {\n  .TextArea-module_areaStyle__AshKi {\n    width: 90%;\n  }\n}\n.TextArea-module_areaStyle__AshKi::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.TextArea-module_areaStyle__AshKi::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n\n.TextArea-module_picButton__TV9ZE {\n  padding: calc(var(--spacing-1, 8px) / 2) var(--spacing-1, 8px) !important;\n  background-color: transparent;\n  border-top: 1px solid white;\n  border-bottom: 1px solid white;\n}\n\n.TextArea-module_transparent__pwXRO {\n  background-color: transparent;\n  border: none;\n  color: white;\n  padding: 0.5rem;\n  width: inherit;\n  height: 100%;\n  resize: none;\n}\n.TextArea-module_transparent__pwXRO:focus {\n  outline: none;\n  border: none;\n}";
-var style$4 = {"areaStyle":"TextArea-module_areaStyle__AshKi"};
+var css_248z$b = ".TextArea-module_areaStyle__AshKi {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  padding: 0.5rem;\n  margin-right: calc(var(--spacing-1, 8px) / 2);\n  border: 1px solid #ccc;\n  border-radius: var(--border-radius-md, 6px);\n  width: 98%;\n  height: 100%;\n  resize: none;\n}\n@media screen and (max-width: 768px) {\n  .TextArea-module_areaStyle__AshKi {\n    width: 90%;\n  }\n}\n.TextArea-module_areaStyle__AshKi::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.TextArea-module_areaStyle__AshKi::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n\n.TextArea-module_disabled__lHxCa {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.TextArea-module_picButton__TV9ZE {\n  padding: calc(var(--spacing-1, 8px) / 2) var(--spacing-1, 8px) !important;\n  background-color: transparent;\n  border-top: 1px solid white;\n  border-bottom: 1px solid white;\n}\n\n.TextArea-module_transparent__pwXRO {\n  background-color: transparent;\n  border: none;\n  color: white;\n  padding: 0.5rem;\n  width: inherit;\n  height: 100%;\n  resize: none;\n}\n.TextArea-module_transparent__pwXRO:focus {\n  outline: none;\n  border: none;\n}";
+var style$4 = {"areaStyle":"TextArea-module_areaStyle__AshKi","disabled":"TextArea-module_disabled__lHxCa"};
 styleInject(css_248z$b);
 
 var _tmpl$$e = /*#__PURE__*/template(`<textarea>`);
@@ -2480,6 +2883,7 @@ const TextArea = props => {
     queueMicrotask(resizeToContent);
   });
   const handleInput = e => {
+    if (props.disabled) return;
     const newVal = e.currentTarget.value;
     // Update whichever source is active
     if (formName && formCtx?.formGroup) {
@@ -2507,7 +2911,7 @@ const TextArea = props => {
         return areaValue();
       },
       get ["class"]() {
-        return `${style$4.areaStyle} ${customProps.class ?? ''} ${customProps.transparent ? customProps.transparent : ''}`;
+        return `${style$4.areaStyle} ${props.disabled ? style$4.disabled : ''} ${customProps.class ?? ''} ${customProps.transparent ? customProps.transparent : ''}`;
       },
       get placeholder() {
         return fieldCtx?.getTextInside?.() && !fieldCtx?.getFocused?.() ? '' : props.placeholder;
@@ -2517,6 +2921,7 @@ const TextArea = props => {
       },
       "onInput": handleInput,
       "onFocus": () => {
+        if (props.disabled) return;
         fieldCtx?.setFocused?.(true);
         if (formName && formCtx?.formGroup?.markDirty) {
           const meta = formCtx.formGroup.getMeta(formName);
@@ -2524,12 +2929,16 @@ const TextArea = props => {
         }
       },
       "onClick": () => {
+        if (props.disabled) return;
         if (formName && formCtx?.formGroup?.markDirty) {
           const meta = formCtx.formGroup.getMeta(formName);
           if (meta && !meta.dirty) formCtx.formGroup.markDirty(formName);
         }
       },
-      "onBlur": () => fieldCtx?.setFocused?.(false)
+      "onBlur": () => {
+        if (props.disabled) return;
+        fieldCtx?.setFocused?.(false);
+      }
     }), false, false);
     return _el$;
   })();
@@ -2540,13 +2949,20 @@ var style$3 = {"popup":"popup-module_popup__5A6Ji","wrapper":"popup-module_wrapp
 styleInject(css_248z$a);
 
 var _tmpl$$d = /*#__PURE__*/template(`<b>X`),
-  _tmpl$2$7 = /*#__PURE__*/template(`<div><div><div><h2></h2><span></span></div><div>`);
+  _tmpl$2$7 = /*#__PURE__*/template(`<div><h2></h2><span>`),
+  _tmpl$3$2 = /*#__PURE__*/template(`<div>`),
+  _tmpl$4$1 = /*#__PURE__*/template(`<div><div>`);
 const Modal = props => {
   const defaultX = createMemo(() => props.translate?.x ?? "-50%");
   const defaultY = createMemo(() => props.translate?.y ?? "-50%");
   const isShown = createMemo(() => props.show[0]());
   const [innerPopup, setInnerPopup] = createSignal();
   // const [ignoreClicks, setIgnoreClicks] = createSignal(true);
+  const showHeader = createMemo(() => {
+    const hasKey = Object.keys(props).includes("noHeader");
+    if (hasKey && props.noHeader === undefined) return false;
+    return !props.noHeader;
+  });
   // Maintain a stable entry reference so unregister removes the correct instance.
   let wmEntry;
   createEffect(() => {
@@ -2610,50 +3026,70 @@ const Modal = props => {
     get children() {
       return createComponent(Portal, {
         get children() {
-          var _el$ = _tmpl$2$7(),
-            _el$2 = _el$.firstChild,
-            _el$3 = _el$2.firstChild,
-            _el$4 = _el$3.firstChild,
-            _el$5 = _el$4.nextSibling,
-            _el$7 = _el$3.nextSibling;
+          var _el$ = _tmpl$4$1(),
+            _el$2 = _el$.firstChild;
           use(el => {
             setInnerPopup(el);
             // @ts-ignore
             props?.ref?.(el);
           }, _el$2);
-          insert(_el$4, () => props.title ?? "Modal");
-          insert(_el$5, createComponent(Button, {
-            transparent: true,
-            onClick: () => props.show[1](false),
+          insert(_el$2, createComponent(Show, {
+            get when() {
+              return showHeader();
+            },
             get children() {
-              return _tmpl$$d();
+              return [(() => {
+                var _el$3 = _tmpl$2$7(),
+                  _el$4 = _el$3.firstChild,
+                  _el$5 = _el$4.nextSibling;
+                insert(_el$4, () => props.title ?? "Modal");
+                insert(_el$5, createComponent(Button, {
+                  transparent: true,
+                  onClick: () => props.show[1](false),
+                  get children() {
+                    return _tmpl$$d();
+                  }
+                }));
+                createRenderEffect(() => 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));
+                return _el$7;
+              })()];
             }
-          }));
-          insert(_el$7, () => props.children);
+          }), null);
+          insert(_el$2, createComponent(Show, {
+            get when() {
+              return !showHeader();
+            },
+            get children() {
+              var _el$8 = _tmpl$3$2();
+              _el$8.style.setProperty("height", "100%");
+              insert(_el$8, () => props.children);
+              createRenderEffect(() => className(_el$8, style$3.body));
+              return _el$8;
+            }
+          }), null);
           createRenderEffect(_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$6 = style$3.header,
-              _v$7 = style$3.body;
+              _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$5 !== _p$.i && className(_el$2, _p$.i = _v$5);
-            _v$6 !== _p$.n && className(_el$3, _p$.n = _v$6);
-            _v$7 !== _p$.s && className(_el$7, _p$.s = _v$7);
             return _p$;
           }, {
             e: undefined,
             t: undefined,
             a: undefined,
             o: undefined,
-            i: undefined,
-            n: undefined,
-            s: undefined
+            i: undefined
           });
           return _el$;
         }
@@ -2956,7 +3392,7 @@ const useMenuContext = () => {
 
 var _tmpl$$7 = /*#__PURE__*/template(`<div><ul>`);
 const Menu = props => {
-  const [local, others] = splitProps(props, ['anchorElement', 'children', 'ref', 'show', 'position']);
+  const [local, others] = splitProps(props, ['anchorElement', 'children', 'ref', 'show', 'position', 'listClass']);
   const [menuRef, setMenuRef] = createSignal();
   const menuContext = useMenuContext();
   const openStyle = () => {
@@ -3054,7 +3490,7 @@ const Menu = props => {
         }
       }), false, true);
       insert(_el$2, () => local.children);
-      createRenderEffect(() => className(_el$2, `${styles$4.list}`));
+      createRenderEffect(() => className(_el$2, `${styles$4.list} ${local.listClass ?? ''}`));
       return _el$;
     }
   });
@@ -3077,7 +3513,7 @@ const MenuItem = props => {
 
 var _tmpl$$5 = /*#__PURE__*/template(`<li><span><span></span></span><ul>`);
 const MenuDropdown = props => {
-  const [local, others] = splitProps(props, ['children', 'class', 'header']);
+  const [local, others] = splitProps(props, ['children', 'class', 'header', 'dropListClass']);
   const [isOpen, setIsOpen] = createSignal(false);
   const onButtonClick = e => {
     setIsOpen(old => {
@@ -3131,7 +3567,7 @@ const MenuDropdown = props => {
     createRenderEffect(_p$ => {
       var _v$ = `${styles$4.listHeader}`,
         _v$2 = `${styles$4.header}`,
-        _v$3 = `${styles$4.list} ${styles$4.droplist}  ${isOpen() ? styles$4.openDropList : ''}`;
+        _v$3 = `${styles$4.list} ${styles$4.droplist}  ${isOpen() ? styles$4.openDropList : ''} ${local.dropListClass ?? ''}`;
       _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
       _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
@@ -3690,7 +4126,7 @@ class FormArray {
   }
 }
 
-var css_248z$2 = ".formfield-module_formField__w6mH9:focus-within > legend, .formfield-module_has-focus__9ingx > legend {\n  top: -8px !important;\n  font-size: 0.75rem !important;\n}\n\n.formfield-module_formField__w6mH9 {\n  position: relative;\n  display: inline-block;\n  border-radius: var(--border-radius-md);\n  box-sizing: border-box;\n  border: none;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  margin-top: 0px !important;\n  margin-bottom: 0px !important;\n}\n.formfield-module_formField__w6mH9 > legend {\n  position: absolute;\n  left: 12px;\n  top: calc(50% - 0.5em);\n  font-size: 1rem;\n  transition: top 0.25s ease, font-size 0.25s ease;\n  pointer-events: none;\n}\n.formfield-module_formField__w6mH9 input::-moz-placeholder, .formfield-module_formField__w6mH9 select::-moz-placeholder {\n  opacity: 0 !important;\n  -moz-transition: opacity 0.25s ease;\n  transition: opacity 0.25s ease;\n}\n.formfield-module_formField__w6mH9 input::placeholder,\n.formfield-module_formField__w6mH9 select::placeholder {\n  opacity: 0 !important;\n  transition: opacity 0.25s ease;\n}\n.formfield-module_formField__w6mH9 label {\n  position: relative;\n  top: -0.5rem;\n  padding-right: 10px;\n}\n.formfield-module_formField__w6mH9:has(textarea) {\n  position: relative;\n  margin: 8px;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  width: auto;\n  min-width: 95%;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  padding-bottom: 8px;\n  border: none;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea:focus {\n  outline: none;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_formField__w6mH9:has(textarea) legend {\n  height: 24px;\n  position: absolute;\n  left: 8px;\n  transition: all 0.25s ease;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) {\n  position: relative;\n  height: 48px !important;\n  padding: 0px !important;\n  width: 100%;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) legend {\n  height: 16px;\n  max-height: 16px;\n  transition: all 0.25s ease;\n  top: calc(50% - 1em);\n  z-index: 10000;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) [is=coles-solid-select] {\n  position: absolute;\n  left: 0px;\n  right: 0px;\n  padding: 0px !important;\n  margin: 0px !important;\n  height: 48px !important;\n  border-radius: 4px;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  width: auto;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) [is=coles-solid-select]:nth-child(n) {\n  border-radius: 4px;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) {\n  height: 48px;\n  position: relative;\n  width: 100%;\n  margin-top: 16px;\n  margin-bottom: 16px;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) legend {\n  position: absolute;\n  height: 24px;\n  left: 8px;\n  transition: all 0.25s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text] {\n  background-color: transparent !important;\n  height: 24px;\n  border-radius: 4px;\n  margin: 8px 0px;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  width: 100%;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::-moz-placeholder {\n  opacity: 0;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::placeholder {\n  opacity: 0;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) {\n  height: 48px;\n  position: relative;\n  width: 100%;\n  margin-top: 16px;\n  margin-bottom: 16px;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) legend {\n  height: 24px;\n  position: absolute;\n  left: 8px;\n  transition: all 0.25s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number] {\n  background-color: transparent !important;\n  color: var(--on-primary-color, #fff);\n  height: 24px;\n  border-radius: 4px;\n  margin: 8px 0px;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  width: 100%;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number]::-moz-placeholder {\n  opacity: 0;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number]::placeholder {\n  opacity: 0;\n}\n@media screen and (max-width: 768px) {\n  .formfield-module_formField__w6mH9 {\n    max-width: 75%;\n  }\n}\n\n.formfield-module_topMargin__dahW5 {\n  margin-top: 12px;\n}\n\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text] {\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text]::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text]::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number] {\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number]::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number]::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has([is=coles-solid-select]) [is=coles-solid-select] {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(textarea) {\n  width: 100%;\n  height: auto;\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n\n.formfield-module_legendStyle__gnI49 {\n  background-color: transparent;\n  opacity: var(--text-emphasis-medium, 87%);\n  width: 100%;\n  transition: all 0.3s ease;\n}\n\n.formfield-module_checkboxPadding__DU1CG {\n  padding: 0px;\n  padding-bottom: 10px;\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.formfield-module_errorContainer__HR4PL {\n  position: relative;\n  min-height: 2rem;\n}\n\n.formfield-module_error__wNBh2 {\n  position: absolute;\n  background: transparent;\n  color: var(--error-color, #B00020);\n  font-size: 10px;\n}";
+var css_248z$2 = ".formfield-module_formField__w6mH9:focus-within > legend, .formfield-module_has-focus__9ingx > legend {\n  top: -8px !important;\n  font-size: 0.75rem !important;\n}\n\n.formfield-module_formField__w6mH9 {\n  position: relative;\n  display: inline-block;\n  border-radius: var(--border-radius-md);\n  box-sizing: border-box;\n  border: none;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  margin-top: 0px !important;\n  margin-bottom: 0px !important;\n}\n.formfield-module_formField__w6mH9 > legend {\n  position: absolute;\n  left: 12px;\n  top: calc(50% - 0.5em);\n  font-size: 1rem;\n  transition: top 0.25s ease, font-size 0.25s ease;\n  pointer-events: none;\n}\n.formfield-module_formField__w6mH9 input::-moz-placeholder, .formfield-module_formField__w6mH9 select::-moz-placeholder {\n  opacity: 0 !important;\n  -moz-transition: opacity 0.25s ease;\n  transition: opacity 0.25s ease;\n}\n.formfield-module_formField__w6mH9 input::placeholder,\n.formfield-module_formField__w6mH9 select::placeholder {\n  opacity: 0 !important;\n  transition: opacity 0.25s ease;\n}\n.formfield-module_formField__w6mH9 label {\n  position: relative;\n  top: -0.5rem;\n  padding-right: 10px;\n}\n.formfield-module_formField__w6mH9:has(textarea) {\n  position: relative;\n  margin: 8px;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  width: auto;\n  min-width: 95%;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  padding-bottom: 8px;\n  border: none;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea:focus {\n  outline: none;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_formField__w6mH9:has(textarea) legend {\n  height: 24px;\n  position: absolute;\n  left: 8px;\n  transition: all 0.25s ease;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) {\n  position: relative;\n  height: 48px !important;\n  padding: 0px !important;\n  width: 100%;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) legend {\n  height: 16px;\n  max-height: 16px;\n  transition: all 0.25s ease;\n  top: calc(50% - 1em);\n  z-index: 1;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) [is=coles-solid-select] {\n  position: absolute;\n  left: 0px;\n  right: 0px;\n  padding: 0px !important;\n  margin: 0px !important;\n  height: 48px !important;\n  border-radius: 4px;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  width: auto;\n  min-width: 95%;\n  z-index: 0;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) [is=coles-solid-select]:nth-child(n) {\n  border-radius: 4px;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) {\n  height: 48px;\n  position: relative;\n  width: 100%;\n  margin-top: 16px;\n  margin-bottom: 16px;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) legend {\n  position: absolute;\n  height: 24px;\n  left: 8px;\n  transition: all 0.25s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text] {\n  background-color: transparent !important;\n  height: 24px;\n  border-radius: 4px;\n  margin: 8px 0px;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  width: 100%;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::-moz-placeholder {\n  opacity: 0;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::placeholder {\n  opacity: 0;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) {\n  height: 48px;\n  position: relative;\n  width: 100%;\n  margin-top: 16px;\n  margin-bottom: 16px;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) legend {\n  height: 24px;\n  position: absolute;\n  left: 8px;\n  transition: all 0.25s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number] {\n  background-color: transparent !important;\n  color: var(--on-primary-color, #fff);\n  height: 24px;\n  border-radius: 4px;\n  margin: 8px 0px;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  width: 100%;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number]::-moz-placeholder {\n  opacity: 0;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number]::placeholder {\n  opacity: 0;\n}\n@media screen and (max-width: 768px) {\n  .formfield-module_formField__w6mH9 {\n    max-width: 75%;\n  }\n}\n\n.formfield-module_topMargin__dahW5 {\n  margin-top: 12px;\n}\n\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text] {\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text]::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text]::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number] {\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number]::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number]::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has([is=coles-solid-select]) [is=coles-solid-select] {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(textarea) {\n  width: 100%;\n  height: auto;\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n\n.formfield-module_legendStyle__gnI49 {\n  background-color: transparent;\n  opacity: var(--text-emphasis-medium, 87%);\n  width: 100%;\n  transition: all 0.3s ease;\n}\n\n.formfield-module_checkboxPadding__DU1CG {\n  padding: 0px;\n  padding-bottom: 10px;\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.formfield-module_errorContainer__HR4PL {\n  position: relative;\n  min-height: 2rem;\n}\n\n.formfield-module_error__wNBh2 {\n  position: absolute;\n  background: transparent;\n  color: var(--error-color, #B00020);\n  font-size: 10px;\n}";
 var style = {"formField":"formfield-module_formField__w6mH9","has-focus":"formfield-module_has-focus__9ingx","primary":"formfield-module_primary__7BYyQ","legendStyle":"formfield-module_legendStyle__gnI49","errorContainer":"formfield-module_errorContainer__HR4PL","error":"formfield-module_error__wNBh2"};
 styleInject(css_248z$2);
 
@@ -3732,12 +4168,15 @@ const FormField2 = props => {
   };
   const shouldFloat = createMemo(() => {
     let currentVal;
-    // Prefer form context store value
-    if (hasValue(formContext?.data?.[local?.formName ?? ''])) {
-      currentVal = formContext?.data?.[local?.formName ?? ''];
-    }
-    // Fallback to local provider value (some components set this first)
-    if (hasValue(context?.getValue?.())) {
+    const hasFormContext = !!local?.formName && !!formContext?.formGroup;
+    // Prefer form context store value when available
+    if (hasFormContext) {
+      const formVal = formContext?.data?.[local?.formName ?? ''];
+      if (hasValue(formVal)) {
+        currentVal = formVal;
+      }
+    } else if (hasValue(context?.getValue?.())) {
+      // Fallback to local provider value only when no form context
       currentVal = context?.getValue?.();
     }
     // Float when value present, focused, or control marked dirty (programmatic set)
@@ -3745,8 +4184,8 @@ const FormField2 = props => {
     const metaDirty = local?.formName ? !!formContext?.formGroup?.getMeta?.(local.formName)?.dirty : false;
     // Float when there is a value, or focused, or meta marked dirty (programmatic set),
     // or legacy input marked dirty-on-focus even if still empty (metaDirty && no value yet)
-    if (metaDirty && !hasValue(currentVal)) return true;
-    return hasValue(currentVal) || context?.getFocused?.() || isDirty();
+    const hasAnyValue = hasValue(currentVal);
+    return hasAnyValue || context?.getFocused?.() || metaDirty && hasAnyValue || isDirty() && hasAnyValue;
   });
   // Effect: if underlying meta resets to pristine and value cleared, ensure focused state cleared
   createEffect(() => {
@@ -3798,12 +4237,12 @@ const FormField2 = props => {
       const val = context?.getValue?.();
       context?.setTextInside(!hasValue(val));
     }
-    context?.setFocused(prev => {
-      if (prev) {
-        formContext?.formGroup?.validate?.(local?.formName ?? '');
-      }
-      return false;
-    });
+    const metaDirty = local?.formName ? !!formContext?.formGroup?.getMeta?.(local.formName)?.dirty : false;
+    const shouldValidate = !!context?.getFocused?.() || metaDirty;
+    if (shouldValidate) {
+      formContext?.formGroup?.validate?.(local?.formName ?? '');
+    }
+    context?.setFocused(false);
   });
   onMount(() => {
     if (context?.getValue !== undefined) {