coles-solid-library 0.4.4 → 0.4.6

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/Menu/menu.d.ts

@@ -6,6 +6,7 @@ interface MenuProps extends JSX.HTMLAttributes<HTMLDivElement> {
     show: [Accessor<boolean>, Setter<boolean>];
     areaExclusionRefs?: Accessor<HTMLElement | undefined>[];
     submenu?: boolean;
+    listClass?: string;
 }
 export declare const Menu: Component<MenuProps>;
 export {};

package/dist/components/Menu/menuDropdown.d.ts

@@ -1,6 +1,7 @@
 import { Component, JSX } from "solid-js";
 interface MenuItemProps extends JSX.HTMLAttributes<HTMLLIElement> {
     children: JSX.Element;
+    dropListClass?: string;
     header?: () => JSX.Element;
 }
 export declare const MenuDropdown: Component<MenuItemProps>;

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

@@ -9,10 +9,17 @@ 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;
+    /** Controls mobile popup behavior.
+     * 'auto' (default): uses fullscreen popup on mobile devices, desktop dropdown otherwise.
+     * 'popup': always uses fullscreen popup regardless of device.
+     * 'desktop': always uses desktop dropdown regardless of device.
+     */
+    mobileMode?: 'auto' | 'popup' | 'desktop';
 }
 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,14 @@ import { JSX } from "solid-js";
 export interface SelectContextValue<T> {
     isSelected: (val: T) => boolean;
     selectValue: (val: T) => void;
-    registerOption?: (val: T, label: JSX.Element) => void;
-    unregisterOption?: (val: T) => void;
-    selectRef?: (val: HTMLDivElement | undefined) => HTMLDivElement | undefined;
-    selectStyle?: () => string;
+    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;
+    /** Close the dropdown/popup without changing the value */
+    closeDropdown: () => void;
 }
 export declare const useSelectContext: () => SelectContextValue<any>;
 export declare const SelectContextProvider: (props: {

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

@@ -0,0 +1,21 @@
+import { Accessor } from "solid-js";
+import { OptionEntry } from "./useSelectOptions";
+export interface HighlightConfig<T> {
+    /** Accessor for the ordered option entries */
+    optionEntries: Accessor<OptionEntry<T>[]>;
+    /** Function to check if a value is currently selected */
+    isSelected: (val: T) => boolean;
+    /** Accessor for the dropdown DOM element (for scrollIntoView) */
+    dropdownRef: Accessor<HTMLElement | undefined>;
+}
+/**
+ * Manages highlighted-index state for keyboard navigation in a Select dropdown.
+ * Provides movement, scroll-into-view, and reset-to-selected helpers.
+ */
+export declare function useHighlight<T>(config: HighlightConfig<T>): {
+    highlightedIndex: Accessor<number>;
+    setHighlightedIndex: import("solid-js").Setter<number>;
+    moveHighlight: (delta: number) => void;
+    setHighlightToSelectedOrFirst: () => void;
+    scrollHighlightedIntoView: (index?: number) => void;
+};

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

@@ -0,0 +1,19 @@
+import { JSX } from "solid-js";
+export type OptionEntry<T> = {
+    value: string;
+    raw: T;
+    label: JSX.Element;
+    labelText: string;
+};
+/**
+ * Manages the registry of options for a Select component.
+ * Handles registration, unregistration, ordering, and label resolution.
+ */
+export declare function useSelectOptions<T>(): {
+    options: Record<string, OptionEntry<T>>;
+    registerOption: (val: T, label: JSX.Element, labelText?: string) => void;
+    unregisterOption: (val: T) => void;
+    optionEntries: import("solid-js").Accessor<OptionEntry<T>[]>;
+    getOptionLabelText: (entry: OptionEntry<T>) => string;
+    getLabel: (val: T) => JSX.Element;
+};

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

@@ -0,0 +1,20 @@
+import { Accessor } from "solid-js";
+import { OptionEntry } from "./useSelectOptions";
+export interface TypeaheadConfig<T> {
+    /** Accessor for the ordered option entries */
+    optionEntries: Accessor<OptionEntry<T>[]>;
+    /** Accessor for the current highlighted index */
+    highlightedIndex: Accessor<number>;
+    /** Function to get a label string from an option entry */
+    getOptionLabelText: (entry: OptionEntry<T>) => string;
+    /** Called when a match is found — receives the matching index */
+    onMatch: (index: number) => void;
+}
+/**
+ * Typeahead search for Select. Buffers keystrokes and finds
+ * the first option whose label starts with the typed string.
+ */
+export declare function useTypeahead<T>(config: TypeaheadConfig<T>): {
+    handleTypeahead: (key: string) => void;
+    resetTypeahead: () => void;
+};

package/dist/components/modal/popup.component.d.ts

@@ -12,6 +12,7 @@ type Props = {
     styleType?: "primary" | "accent" | "tertiary";
     onClick?: (e: MouseEvent) => void;
     ref?: JSX.HTMLAttributes<HTMLDivElement>["ref"];
+    noHeader?: boolean;
 };
 export declare const Modal: Component<Props>;
 declare module "solid-js" {