coles-solid-library 0.4.5 → 0.4.7

package/dist/index.esm.js

@@ -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,6 +1395,100 @@ 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","disabled":"input-module_disabled__40ZHw","inFormField":"input-module_inFormField__kk-PD","transparent":"input-module_transparent__aXcGX"};
 styleInject(css_248z$e);
@@ -1720,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__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}";
-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"};
+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 {
@@ -1810,54 +1904,13 @@ const SelectContextProvider = props => {
   });
 };
 
-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);
-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 [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 form = useFormProvider();
-  const formContext = useFormContext();
-  const hasForm = !!form?.formName || !!form?.getName || !!form?.getValue || !!form?.setValue || !!form?.getTextInside;
-  const hasFormContext = hasForm && !!formContext?.formGroup;
-  const currentValue = () => {
-    if (hasFormContext) {
-      return formContext.data?.[form?.formName ?? ''];
-    }
-    if (hasForm) {
-      return form.getValue();
-    }
-    return props?.value;
-  };
-  // Signal for dropdown open/closed
-  const [open, setOpen] = createSignal(false);
-  const [optionOrder, setOptionOrder] = createSignal([]);
-  const [highlightedIndex, setHighlightedIndex] = createSignal(-1);
-  const [typeahead, setTypeahead] = createSignal("");
-  let typeaheadTimeoutId;
-  let lastTypeaheadAt = 0;
-  const TYPEAHEAD_TIMEOUT = 650;
-  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();
-  });
+/**
+ * Manages the registry of options for a Select component.
+ * Handles registration, unregistration, ordering, and label resolution.
+ */
+function useSelectOptions() {
   const [options, setOptions] = createStore({});
-  // Register and unregister functions using the store
+  const [optionOrder, setOptionOrder] = createSignal([]);
   const registerOption = (val, label, labelText = "") => {
     const stringVal = JSON.stringify(val);
     setOptions(store => ({
@@ -1890,8 +1943,28 @@ function Select(props) {
     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 = dropdownRef();
+    const dropdown = config.dropdownRef();
     if (!dropdown) return;
     const optionsEls = dropdown.querySelectorAll('[role="option"]');
     const idx = index ?? highlightedIndex();
@@ -1903,42 +1976,71 @@ function Select(props) {
     }
   };
   const moveHighlight = delta => {
-    const entries = optionEntries();
+    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 = optionEntries();
+    const entries = config.optionEntries();
     if (!entries.length) {
       setHighlightedIndex(-1);
       return;
     }
-    let idx = entries.findIndex(entry => isSelected(entry.raw));
+    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 = optionEntries();
+    const entries = config.optionEntries();
     if (!entries.length) return -1;
     const normalized = search.toLowerCase();
-    const start = highlightedIndex() >= 0 ? (highlightedIndex() + 1) % entries.length : 0;
+    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 = getOptionLabelText(entries[idx]).toLowerCase();
+      const label = config.getOptionLabelText(entries[idx]).toLowerCase();
       if (label.startsWith(normalized)) return idx;
     }
     return -1;
   };
-  const resetTypeahead = () => {
-    setTypeahead("");
-    if (typeaheadTimeoutId) {
-      window.clearTimeout(typeaheadTimeoutId);
-      typeaheadTimeoutId = undefined;
-    }
-  };
   const handleTypeahead = key => {
     const now = Date.now();
     const prev = typeahead();
@@ -1946,23 +2048,118 @@ function Select(props) {
     const nextBuffer = isRepeat ? key : `${prev}${key}`;
     lastTypeaheadAt = now;
     setTypeahead(nextBuffer);
-    if (typeaheadTimeoutId) window.clearTimeout(typeaheadTimeoutId);
-    typeaheadTimeoutId = window.setTimeout(() => setTypeahead(""), TYPEAHEAD_TIMEOUT);
+    if (timeoutId) window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => setTypeahead(""), TYPEAHEAD_TIMEOUT);
     const matchIndex = findMatchIndex(nextBuffer);
     if (matchIndex >= 0) {
-      setHighlightedIndex(matchIndex);
-      queueMicrotask(() => scrollHighlightedIntoView(matchIndex));
+      config.onMatch(matchIndex);
     }
   };
-  const getLabel = val => {
-    const stringVal = JSON.stringify(val);
-    return options[stringVal]?.label || String(val);
+  onCleanup(() => {
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+    }
+  });
+  return {
+    handleTypeahead,
+    resetTypeahead
   };
+}
+
+var _tmpl$$g = /*#__PURE__*/template(`<span>`),
+  _tmpl$2$8 = /*#__PURE__*/template(`<span>▲`),
+  _tmpl$3$3 = /*#__PURE__*/template(`<span>▼`),
+  _tmpl$4$2 = /*#__PURE__*/template(`<div>`),
+  _tmpl$5$1 = /*#__PURE__*/template(`<div><button type=button>Done`),
+  _tmpl$6$1 = /*#__PURE__*/template(`<div><div role=dialog aria-modal=true tabindex=-1><div><span></span><button type=button aria-label=Close>✕</button></div><div role=listbox>`),
+  _tmpl$7$1 = /*#__PURE__*/template(`<div is=coles-solid-select role=button tabindex=0><div><span>`, true, false, false);
+function Select(props) {
+  const isMultiple = props.multiple !== undefined || props.multiple === true;
+  const [currStyle, setCurrStyle] = createSignal("primary");
+  const defaultSelected = isMultiple ? props.value ?? props.defaultValue ?? [] : props.value ?? props.defaultValue ?? undefined;
+  const [selected, setSelected] = createSignal(defaultSelected);
+  const [selectRef, setSelectRef] = createSignal();
+  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;
+  const hasFormContext = hasForm && !!formContext?.formGroup;
+  const currentValue = () => {
+    if (hasFormContext) {
+      return formContext.data?.[form?.formName ?? ''];
+    }
+    if (hasForm) {
+      return form.getValue();
+    }
+    return props?.value;
+  };
+  // 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();
+  });
+  // --- 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 => {
@@ -1991,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) {
@@ -2052,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();
@@ -2207,7 +2274,7 @@ 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(() => {
@@ -2215,6 +2282,8 @@ function Select(props) {
   });
   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) {
@@ -2254,35 +2323,62 @@ 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 selectDropX = createMemo(() => `${selectLocation().x}px`);
-  const selectDropY = createMemo(() => `${selectLocation().y}px`);
-  createEffect(() => {
-    if (open()) {
-      // Wait a tick so dropdown renders before measuring
-      queueMicrotask(() => updatePosition());
-    }
-  });
-  createEffect(() => {
-    const entries = optionEntries();
-    if (!entries.length) {
-      if (highlightedIndex() !== -1) setHighlightedIndex(-1);
-      return;
-    }
-    if (highlightedIndex() >= entries.length) {
-      setHighlightedIndex(entries.length - 1);
+  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()) {
       setHighlightToSelectedOrFirst();
+      // Auto-focus mobile popup for keyboard interaction
+      if (resolvedMode() === 'popup') {
+        queueMicrotask(() => mobilePopupRef()?.focus());
+      }
     } else {
       setHighlightedIndex(-1);
       resetTypeahead();
@@ -2293,11 +2389,7 @@ function Select(props) {
       setOpen(false);
     }
   });
-  onCleanup(() => {
-    if (typeaheadTimeoutId) {
-      window.clearTimeout(typeaheadTimeoutId);
-    }
-  });
+  // --- Context provider value ---
   const providerValue = createMemo(() => ({
     isSelected,
     selectValue,
@@ -2311,73 +2403,113 @@ function Select(props) {
     },
     selectRef,
     selectStyle: currStyle,
-    isDisabled
+    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 (isDisabled()) return;
-      if (e.key === "Tab") {
-        setOpen(false);
-        return;
+  // --- 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);
       }
-      if (e.key === "ArrowDown") {
+    } 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();
-        if (!open()) {
-          setOpen(true);
-          setHighlightToSelectedOrFirst();
+        const dropdown = dropdownRef();
+        const optionEls = dropdown?.querySelectorAll('[role="option"]');
+        const optionEl = optionEls?.[idx];
+        if (optionEl) {
+          optionEl.click();
         } else {
-          moveHighlight(1);
+          selectValue(entries[idx].raw);
         }
-      } else if (e.key === "ArrowUp") {
+      }
+    } 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();
-        if (!open()) {
-          setOpen(true);
-          setHighlightToSelectedOrFirst();
+        const popup = mobilePopupRef();
+        const optionEls = popup?.querySelectorAll('[role="option"]');
+        const optionEl = optionEls?.[idx];
+        if (optionEl) {
+          optionEl.click();
         } 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);
-          }
+          selectValue(entries[idx].raw);
         }
-      } 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);
       }
-    };
+    } 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);
@@ -2407,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;
       }
@@ -2417,51 +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]} ${isDisabled() ? styles$7.solid_select__disabled : ''} coles-solid-selectControl`,
-        _v$7 = isDisabled() ? false : open(),
-        _v$8 = isDisabled(),
-        _v$9 = props.tooltip,
-        _v$10 = `${styles$7['solid_select__control']} ${props.class || ""} ${isDisabled() ? styles$7.solid_select__disabled : ''}`,
-        _v$11 = !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$12 = 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.ariaDisabled = _p$.o = _v$8);
-      _v$9 !== _p$.i && (_el$7.title = _p$.i = _v$9);
-      _v$10 !== _p$.n && className(_el$8, _p$.n = _v$10);
-      _p$.s = style$9(_el$8, _v$11, _p$.s);
-      _v$12 !== _p$.h && className(_el$9, _p$.h = _v$12);
+        _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,
@@ -2471,12 +2692,13 @@ function Select(props) {
       i: undefined,
       n: undefined,
       s: undefined,
-      h: undefined
+      h: undefined,
+      r: undefined
     });
     return _el$7;
   })();
 }
-delegateEvents(["keydown", "click"]);
+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) {
@@ -2550,8 +2772,11 @@ function Option(props) {
     !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(),
@@ -2724,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(() => {
@@ -2794,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$;
         }
@@ -3140,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 = () => {
@@ -3238,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$;
     }
   });
@@ -3261,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 => {
@@ -3315,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);