coles-solid-library 0.4.4 → 0.4.5

package/USAGE.html

@@ -175,7 +175,7 @@ addTheme('dark'); // or 'light'
   disabled
   onClick={(e) => {}}
 &gt;Click Me&lt;/Button&gt;</code></pre>
-    <p>Styling: theme tokens map to CSS variables like <code>--primary-color</code>. Prefer using <code>theme</code> rather than custom class names for consistent theming. Pass <code>class</code>/<code>style</code> for bespoke tweaks.</p>
+    <p>Styling: theme tokens map to CSS variables like <code>--primary-color</code>. Prefer using <code>theme</code> rather than custom class names for consistent theming. Pass <code>class</code>/<code>style</code> for bespoke tweaks. Disabled buttons now render with reduced opacity and a not-allowed cursor.</p>
 
     <table class="api"><tr><th>Prop</th><th>Type</th><th>Description</th><th>Default</th></tr>
       <tr><td>theme</td><td><code>ThemeVariables (excludes header/subheader)</code></td><td>Visual color role.</td><td><code>container</code></td></tr>
@@ -201,7 +201,7 @@ const [desc, setDesc] = createSignal("");
   placeholder="Description"
 /&gt;</code></pre>
     <p><strong>Input:</strong> controlled via <code>value</code> (or form context) and <code>onChange</code>. <strong>TextArea:</strong> uses a signal pair <code>text</code>/<code>setText</code> instead of a <code>value</code> prop and auto-grows with content. Wrap in <code>FormField</code> for legend float + error sync.</p>
-  <p><small><strong>Notes:</strong> (1) <code>onChange</code> for <code>Input</code> is invoked after internal form sync (if inside a FormField) so reading form state inside the handler reflects the new value. (2) An <code>Input</code> with <code>type="checkbox"</code> is coerced to text internally for styling; prefer the dedicated <code>Checkbox</code> component for semantics. (3) Required indicator logic appends an asterisk to placeholders when the parent FormField marks the control as required.</small></p>
+  <p><small><strong>Notes:</strong> (1) <code>onChange</code> for <code>Input</code> is invoked after internal form sync (if inside a FormField) so reading form state inside the handler reflects the new value. (2) An <code>Input</code> with <code>type="checkbox"</code> is coerced to text internally for styling; prefer the dedicated <code>Checkbox</code> component for semantics. (3) Required indicator logic appends an asterisk to placeholders when the parent FormField marks the control as required. (4) When <code>disabled</code>, Input/TextArea suppress focus/blur handlers and input updates, and apply a disabled visual style.</small></p>
 
     <table class="api"><tr><th>Component</th><th>Prop</th><th>Type</th><th>Description</th><th>Default</th></tr>
       <tr><td>Input</td><td>value</td><td><code>string</code></td><td>Controlled value (overrides form context).</td><td>-</td></tr>
@@ -234,7 +234,7 @@ const [desc, setDesc] = createSignal("");
   &lt;Option value="a"&gt;Alpha&lt;/Option&gt;
   &lt;Option value="b"&gt;Beta&lt;/Option&gt;
 &lt;/Select&gt;</code></pre>
-    <p><strong>Features:</strong> positioning logic clamps inside viewport; flips above if insufficient space. Multi-select toggles items; consumer tracks selected list via <code>onChange</code> or controlled value (depending on implementation). Provided tests assert viewport constraints.</p>
+    <p><strong>Features:</strong> positioning logic clamps inside viewport; flips above if insufficient space. Multi-select toggles items; consumer tracks selected list via <code>onChange</code> or controlled value (depending on implementation). Keyboard navigation supports Arrow keys, Home/End, Enter, Escape, and type-to-search highlight. Disabled selects do not open or accept selection and expose <code>aria-disabled</code>.</p>
 
     <table class="api"><tr><th>Component</th><th>Prop</th><th>Type</th><th>Description</th><th>Default</th></tr>
       <tr><td>Select</td><td>multiple</td><td><code>boolean</code></td><td>Enable multi selection.</td><td>false</td></tr>
@@ -243,11 +243,12 @@ const [desc, setDesc] = createSignal("");
       <tr><td>Select</td><td>onChange</td><td><code>(val) =&gt; void</code></td><td>Fires on selection state change (may fire on mount).</td><td>-</td></tr>
       <tr><td>Select</td><td>onSelect</td><td><code>(val) =&gt; void</code></td><td>User interaction selection callback.</td><td>-</td></tr>
       <tr><td>Select</td><td>placeholder</td><td><code>string</code></td><td>Trigger placeholder text.</td><td>"Select..."</td></tr>
-  <tr><td>Select</td><td>renderValue</td><td><code>(val) =&gt; JSX</code></td><td>Custom render of current value(s).</td><td>-</td></tr>
+  <tr><td>Select</td><td>renderValue</td><td><code>(selectedValue) =&gt; JSX</code></td><td>Custom render of current value(s).</td><td>-</td></tr>
   <tr><td>Select</td><td>dropdownClass</td><td><code>string</code></td><td>Class for dropdown portal element.</td><td>-</td></tr>
   <tr><td>Select</td><td>transparent</td><td><code>boolean</code></td><td>Transparent trigger style.</td><td>false</td></tr>
   <tr><td>Select</td><td>tooltip</td><td><code>string</code></td><td>Title attribute tooltip.</td><td>-</td></tr>
   <tr><td>Select</td><td>id</td><td><code>string</code></td><td>DOM id (anchor / tests).</td><td>-</td></tr>
+  <tr><td>Select</td><td>disabled</td><td><code>boolean</code></td><td>Disable opening and selection; applies disabled styling.</td><td>false</td></tr>
   <tr><td>Option</td><td>value</td><td><code>T</code></td><td>Option value token.</td><td>n/a</td></tr>
   <tr><td>Option</td><td>children</td><td><code>JSX</code></td><td>Displayed label (fallback <code>String(value)</code>).</td><td>-</td></tr>
   <tr><td>Option</td><td>class</td><td><code>string</code></td><td>Custom class.</td><td>-</td></tr>
@@ -558,7 +559,7 @@ const asyncOk = syncOk && await form.validateAsync();
 if (asyncOk) doSubmit();</code></pre>
   <h3 id="forms-patterns">Common Patterns</h3>
     <ul>
-      <li>Blur-driven validation via <code>FormField</code>'s outside click detection.</li>
+      <li>Blur-driven validation via <code>FormField</code>'s outside click detection; it validates on blur when the field was focused or already dirty.</li>
       <li>Programmatic: <code>form.validate('field')</code> returns boolean.</li>
       <li>Dynamic rules: <code>form.addValidator('name', Validators.maxLength(20))</code>.</li>
       <li>Reset: <code>form.reset()</code> clears errors + meta + restores initial values.</li>

package/dist/components/Select/select.component.d.ts

@@ -9,10 +9,11 @@ interface SelectProps<T = string, K = boolean> {
     onSelect?: (value: T) => void;
     placeholder?: string;
     tooltip?: string;
-    renderValue?: (selected: T) => JSX.Element;
+    renderValue?: (selectedValue: T) => JSX.Element;
     class?: string;
     dropdownClass?: string;
     children: JSX.Element;
+    disabled?: boolean;
 }
 export declare function Select<T, K extends boolean = false>(props: SelectProps<(K extends true ? T[] : T), K>): JSX.Element;
 export {};

package/dist/components/Select/selectContext.d.ts

@@ -2,10 +2,12 @@ import { JSX } from "solid-js";
 export interface SelectContextValue<T> {
     isSelected: (val: T) => boolean;
     selectValue: (val: T) => void;
-    registerOption?: (val: T, label: JSX.Element) => void;
+    registerOption?: (val: T, label: JSX.Element, labelText?: string) => void;
     unregisterOption?: (val: T) => void;
+    isHighlighted?: (val: T) => boolean;
     selectRef?: (val: HTMLDivElement | undefined) => HTMLDivElement | undefined;
     selectStyle?: () => string;
+    isDisabled?: () => boolean;
 }
 export declare const useSelectContext: () => SelectContextValue<any>;
 export declare const SelectContextProvider: (props: {

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);
 
@@ -1396,7 +1396,7 @@ function useClickOutside(elementRefs, callback) {
 }
 
 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 +1583,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 +1608,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 +1720,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}";
+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"};
 styleInject(css_248z$c);
 
 const manager = new class WinManager {
@@ -1843,6 +1839,17 @@ function Select(props) {
   };
   // 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();
@@ -1851,15 +1858,18 @@ function Select(props) {
   });
   const [options, setOptions] = createStore({});
   // Register and unregister functions using the store
-  const registerOption = (val, label) => {
+  const registerOption = (val, label, labelText = "") => {
     const stringVal = JSON.stringify(val);
     setOptions(store => ({
       ...store,
       [stringVal]: {
         value: stringVal,
-        label
+        raw: val,
+        label,
+        labelText
       }
     }));
+    setOptionOrder(prev => prev.includes(stringVal) ? prev : [...prev, stringVal]);
   };
   const unregisterOption = val => {
     const stringVal = JSON.stringify(val);
@@ -1870,6 +1880,79 @@ function Select(props) {
       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 scrollHighlightedIntoView = index => {
+    const dropdown = 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 = 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();
+    if (!entries.length) {
+      setHighlightedIndex(-1);
+      return;
+    }
+    let idx = entries.findIndex(entry => isSelected(entry.raw));
+    if (idx < 0) idx = 0;
+    setHighlightedIndex(idx);
+    queueMicrotask(() => scrollHighlightedIntoView(idx));
+  };
+  const findMatchIndex = search => {
+    const entries = optionEntries();
+    if (!entries.length) return -1;
+    const normalized = search.toLowerCase();
+    const start = highlightedIndex() >= 0 ? (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();
+      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();
+    const isRepeat = prev.length === 1 && prev === key && now - lastTypeaheadAt < TYPEAHEAD_TIMEOUT;
+    const nextBuffer = isRepeat ? key : `${prev}${key}`;
+    lastTypeaheadAt = now;
+    setTypeahead(nextBuffer);
+    if (typeaheadTimeoutId) window.clearTimeout(typeaheadTimeoutId);
+    typeaheadTimeoutId = window.setTimeout(() => setTypeahead(""), TYPEAHEAD_TIMEOUT);
+    const matchIndex = findMatchIndex(nextBuffer);
+    if (matchIndex >= 0) {
+      setHighlightedIndex(matchIndex);
+      queueMicrotask(() => scrollHighlightedIntoView(matchIndex));
+    }
   };
   const getLabel = val => {
     const stringVal = JSON.stringify(val);
@@ -1883,6 +1966,10 @@ function Select(props) {
   // 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 ?? [];
@@ -2127,6 +2214,7 @@ function Select(props) {
     !!props?.onChange ? props.onChange(currentValue()) : null;
   });
   useClickOutside([dropdownRef, selectRef], () => {
+    if (isDisabled()) return;
     setOpen(false);
     form?.setFocused?.(prev => {
       if (prev) {
@@ -2182,13 +2270,48 @@ function Select(props) {
       queueMicrotask(() => updatePosition());
     }
   });
+  createEffect(() => {
+    const entries = optionEntries();
+    if (!entries.length) {
+      if (highlightedIndex() !== -1) setHighlightedIndex(-1);
+      return;
+    }
+    if (highlightedIndex() >= entries.length) {
+      setHighlightedIndex(entries.length - 1);
+    }
+  });
+  createEffect(() => {
+    if (open()) {
+      setHighlightToSelectedOrFirst();
+    } else {
+      setHighlightedIndex(-1);
+      resetTypeahead();
+    }
+  });
+  createEffect(() => {
+    if (props.disabled) {
+      setOpen(false);
+    }
+  });
+  onCleanup(() => {
+    if (typeaheadTimeoutId) {
+      window.clearTimeout(typeaheadTimeoutId);
+    }
+  });
   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
   }));
   const [dropTop, setDropTop] = createSignal(false);
   return (() => {
@@ -2196,32 +2319,73 @@ function Select(props) {
       _el$8 = _el$7.firstChild,
       _el$9 = _el$8.firstChild;
     _el$7.$$keydown = e => {
+      if (isDisabled()) return;
+      if (e.key === "Tab") {
+        setOpen(false);
+        return;
+      }
       if (e.key === "ArrowDown") {
-        // Open dropdown if not open and set highlightedIndex to 0
+        e.preventDefault();
         if (!open()) {
           setOpen(true);
-          // set highlightedIndex(0);
+          setHighlightToSelectedOrFirst();
+        } else {
+          moveHighlight(1);
+        }
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!open()) {
+          setOpen(true);
+          setHighlightToSelectedOrFirst();
+        } else {
+          moveHighlight(-1);
         }
-      } else if (e.key === "ArrowUp") ; else if (e.key === "Enter") ; else if (e.key === "Escape") {
+      } 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 === "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.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        if (!open()) setOpen(true);
+        e.preventDefault();
+        handleTypeahead(e.key);
       }
     };
     _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);
@@ -2281,21 +2445,23 @@ function Select(props) {
     }), 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 ? {
+        _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 ? {
           height: '48px'
         } : {},
-        _v$11 = styles$7['solid_select__value'];
+        _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.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$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);
       return _p$;
     }, {
       e: undefined,
@@ -2304,20 +2470,23 @@ function Select(props) {
       o: undefined,
       i: undefined,
       n: undefined,
-      s: undefined
+      s: undefined,
+      h: undefined
     });
     return _el$7;
   })();
 }
-delegateEvents(["click", "keydown"]);
+delegateEvents(["keydown", "click"]);
 
 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,6 +2544,7 @@ function Option(props) {
     return false;
   };
   const handleClick = e => {
+    if (select?.isDisabled?.()) return;
     e.stopPropagation();
     const contextSuccess = selectFormContextValue(props.value);
     !contextSuccess ? selectFormFieldValue(props.value) : true;
@@ -2389,34 +2559,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 +2658,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 +2686,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 +2696,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 +2704,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$;
   })();
@@ -3690,7 +3874,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 +3916,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 +3932,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 +3985,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) {

package/package.json

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