@mono-lit/helper 0.0.4 → 0.0.6

package/dist/{reactive-DFCdZbH9.js → normalize-error-BmLbgANw.js}

@@ -1045,51 +1045,4 @@ function isCanceled(err) {
 }
 
 //#endregion
-//#region src/composables/reactive.ts
-/**
-* Unwrap a `ref()` / `computed()` wrapper and a `reactive()` proxy to the raw
-* target underneath. Returns the value unchanged when it isn't reactive.
-*/
-function unwrapReactive(value) {
-	let out = value;
-	if (out && typeof out === "object" && out.__v_isRef) out = out.value;
-	if (out && typeof out === "object" && out.__v_raw) out = out.__v_raw;
-	return out;
-}
-/**
-* Read a {@link MaybeReactive} option: call a getter, unwrap a ref/computed or a
-* reactive proxy, unbox a plain `{ value }`. Never caches — the caller decides
-* when "now" is.
-*/
-function resolveMaybeReactive(option) {
-	if (option === void 0 || option === null) return void 0;
-	if (typeof option === "function") return option();
-	const raw = unwrapReactive(option);
-	if (raw && typeof raw === "object") {
-		const keys = Object.keys(raw);
-		if (keys.length === 1 && keys[0] === "value") return unwrapReactive(raw.value);
-	}
-	return raw;
-}
-/**
-* {@link unwrapReactive}, then — for an **array** — unwrap each element too.
-*
-* Reading an index off a deep-reactive array yields a proxy of that element, so
-* unwrapping only the container still leaves proxies inside. One level of
-* elements is all the value models here need; this deliberately does not recurse
-* into nested objects, which would rewrite data the consumer owns.
-*/
-function unwrapReactiveDeep(value) {
-	const out = unwrapReactive(value);
-	if (!Array.isArray(out)) return out;
-	let changed = false;
-	const items = out.map((item) => {
-		const raw = unwrapReactive(item);
-		if (raw !== item) changed = true;
-		return raw;
-	});
-	return changed ? items : out;
-}
-
-//#endregion
-export { compileFilterPredicate as A, isWildcardPattern as C, searchEntryFor as D, resolveSearchEntries as E, andFilters as O, hasWildcardSearch as S, plainSearchColumns as T, searchRowPredicate as _, describeError as a, expandWildcard as b, errorTitle as c, resolveErrorMessages as d, setErrorMessages as f, resolveSearchFields as g, mergeSearchFields as h, DEFAULT_ERROR_MESSAGES as i, joinFilters as j, andPredicates as k, isCanceled as l, MonoSourceSearch as m, unwrapReactive as n, errorStatus as o, DEFAULT_SEARCH_FIELDS as p, unwrapReactiveDeep as r, errorText as s, resolveMaybeReactive as t, normalizeError as u, customPredicate as v, normalizeSearchExpr as w, hasCustomSearch as x, customRemoteClause as y };
+export { resolveSearchEntries as C, compileFilterPredicate as D, andPredicates as E, joinFilters as O, plainSearchColumns as S, andFilters as T, expandWildcard as _, errorTitle as a, isWildcardPattern as b, resolveErrorMessages as c, MonoSourceSearch as d, mergeSearchFields as f, customRemoteClause as g, customPredicate as h, errorText as i, setErrorMessages as l, searchRowPredicate as m, describeError as n, isCanceled as o, resolveSearchFields as p, errorStatus as r, normalizeError as s, DEFAULT_ERROR_MESSAGES as t, DEFAULT_SEARCH_FIELDS as u, hasCustomSearch as v, searchEntryFor as w, normalizeSearchExpr as x, hasWildcardSearch as y };

package/dist/nuxt.js

@@ -1,4 +1,4 @@
-import { t as monoSsr } from "./vite-DcyRlTTf.js";
+import { t as monoSsr } from "./vite-CivRCJaf.js";
 import { join } from "node:path";
 import { pathToFileURL } from "node:url";
 import { addComponent, addPlugin, addPluginTemplate, addVitePlugin, createResolver, defineNuxtModule, extendViteConfig, hasNuxtModule, tryResolveModule, useLogger } from "@nuxt/kit";

package/dist/{popup-portal-HWhkd7oy.js → popup-portal-C8ttHDRX.js}

@@ -1,4 +1,4 @@
-import { a as unregisterPopupLayer, r as registerPopupLayer } from "./popup-stack-De05Y-mJ.js";
+import { i as registerPopupLayer, n as pathInLayerAbove, o as unregisterPopupLayer } from "./popup-stack-C64WCuXq.js";
 import { isServer } from "lit";
 
 //#region src/composables/popup-portal.ts
@@ -388,10 +388,26 @@ var PopupPortalController = class {
 	* in the library asks this method.
 	*/
 	containsInPath(path) {
+		return this.containsEventPath(path) || this.inLayerAbove(path);
+	}
+	/**
+	* PopupLayer hook — this popup's OWN containment: its portaled panel or a popup
+	* opened from inside it. Never the layers above (that is `inLayerAbove`), so
+	* `pathInLayerAbove` walking the stack does not recurse.
+	*/
+	containsEventPath(path) {
 		if (this._portal && path.includes(this._portal)) return true;
 		return this.ownsNestedInPath(path);
 	}
 	/**
+	* True when the path lands in a layer opened ABOVE this popup while it is open
+	* — a modal opened from a figure in this panel, say. That layer is on top of the
+	* panel, not outside it, so its clicks, focus and Escape are not a dismiss.
+	*/
+	inLayerAbove(path) {
+		return this._registered && pathInLayerAbove(this, path);
+	}
+	/**
 	* True when the path passes through a popup opened from INSIDE this one
 	* (at any depth) — not this popup's own panel.
 	*

package/dist/{popup-stack-De05Y-mJ.js → popup-stack-C64WCuXq.js}

@@ -187,6 +187,26 @@ function setExternalScrollLock(owner, wanted) {
 function getOpenPopupLayers() {
 	return stack;
 }
+/**
+* True when an event's composed path lands inside a layer opened AFTER `layer`
+* — one stacked above it.
+*
+* The other half of the "topmost only" rule modal and drawer apply to their own
+* outside click. A dropdown open under a dialog that was opened from its panel
+* (a figure in a tag-input option opening a breakdown modal) must not read a
+* click or focus in that dialog as "outside": the dialog is not behind the
+* panel, it is on top of it. Ownership (`pathOwnedBy`) cannot tell, because the
+* dialog's element usually lives elsewhere on the page, not inside the panel.
+*
+* A layer opened BEFORE `layer` (the modal a dropdown sits in) is below it and
+* does not count, so a click in that modal's body still closes the dropdown.
+*/
+function pathInLayerAbove(layer, path) {
+	const idx = stack.indexOf(layer);
+	if (idx === -1) return false;
+	for (let i = idx + 1; i < stack.length; i++) if (stack[i].containsEventPath?.(path)) return true;
+	return false;
+}
 
 //#endregion
-export { unregisterPopupLayer as a, setExternalScrollLock as i, refreshPopupStack as n, registerPopupLayer as r, getOpenPopupLayers as t };
+export { setExternalScrollLock as a, registerPopupLayer as i, pathInLayerAbove as n, unregisterPopupLayer as o, refreshPopupStack as r, getOpenPopupLayers as t };

package/dist/src/components/accordion/accordion-core.d.ts

@@ -1,6 +1,6 @@
 import { AccordionColor, AccordionCssClass, AccordionSize } from "./accordion-types.js";
 import { Constructor } from "../../composables/hybird-prop.js";
-import { LitElement } from "lit";
+import { LitElement, TemplateResult, nothing } from "lit";
 //#region src/components/accordion/accordion-core.d.ts
 /**
  * Slot regions the accordion lays out. `default` is the unnamed body region.
@@ -21,6 +21,8 @@ export declare class MonoAccordionCoreInterface {
   label: string;
   /** @deprecated alias of `subtitle` */
   description: string;
+  /** Leading icon — an iconify class or plain text. `slot="icon"` wins over it. */
+  icon: string;
   modelValue: boolean;
   disabled: boolean;
   cssClass: AccordionCssClass;
@@ -46,6 +48,7 @@ export declare class MonoAccordionCoreInterface {
   protected get _hasTitleContent(): boolean;
   protected get _hasSubtitleContent(): boolean;
   protected get _hasIconContent(): boolean;
+  protected _renderIconGlyph(): TemplateResult | typeof nothing;
   protected _setCssClass(value: unknown): void;
   protected _handleClick(event: Event): void;
 }

package/dist/src/components/accordion/mono-accordion.shadow.d.ts

@@ -1,6 +1,6 @@
 import { Constructor } from "../../composables/hybird-prop.js";
 import { MonoAccordionCoreInterface } from "./accordion-core.js";
-import { LitElement, TemplateResult } from "lit";
+import { LitElement, TemplateResult, nothing } from "lit";
 //#region src/components/accordion/mono-accordion.shadow.d.ts
 declare const MonoAccordionShadow_base: Constructor<MonoAccordionCoreInterface> & typeof LitElement;
 /**
@@ -23,6 +23,9 @@ export declare class MonoAccordionShadow extends MonoAccordionShadow_base {
   static styles: import("lit").CSSResult[];
   connectedCallback(): void;
   firstUpdated(changed: Map<string, unknown>): void;
+  protected updated(changed: Map<string, unknown>): void;
+  /** Iconify classes are drawn as inline SVG — page utility CSS cannot reach here. */
+  protected _renderIconGlyph(): TemplateResult | typeof nothing;
   /**
    * Presence of a region that may also answer to an old name (`label` →
    * `title`, `description` → `subtitle`): the union of both slots.

package/dist/src/components/date/date-core.d.ts

@@ -1,6 +1,7 @@
 import { Constructor } from "../../composables/hybird-prop.js";
 import { CssSizeValue } from "../../composables/css-size.js";
 import { DateColor, DateCssClass, DateMode, DateSize, DateType, DateValidationState, DateVariant } from "./date-types.js";
+import { FieldTooltipController, FieldTooltipValue } from "../../composables/field-tooltip.js";
 import { LitElement, TemplateResult } from "lit";
 import { Options } from "flatpickr/dist/types/options";
 //#region src/components/date/date-core.d.ts
@@ -29,6 +30,8 @@ export declare class MonoDateCoreInterface {
   label?: string;
   placeholder?: string;
   helperText?: string;
+  tooltip: FieldTooltipValue;
+  protected readonly _tooltip: FieldTooltipController;
   validationState?: DateValidationState;
   validationMessage?: string;
   error: boolean;

package/dist/src/components/date/date-types.d.ts

@@ -1,4 +1,5 @@
 import { VisibilityProps } from "../../composables/visibility.js";
+import { MonoTooltipOptions } from "../tooltip/tooltip-types.js";
 import { Options } from "flatpickr/dist/types/options";
 //#region src/components/date/date-types.d.ts
 /** Picker mode — drives flatpickr's calendar/time configuration. */
@@ -6,7 +7,15 @@ export type DateType = 'date' | 'datetime' | 'time';
 export type DateSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type DateColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
 export type DateVariant = 'outlined' | 'filled' | 'underlined';
-export type DateValidationState = 'default' | 'error' | 'success';
+/** Where the label sits: above the box (default), notched into its top border (inset for filled / underlined), or beside it. */
+export type DateLabelPosition = 'top' | 'notched' | 'left' | 'right';
+/** Where the validation message shows: under the box (default), behind a state icon inside it, or floating under it on hover / focus. */
+export type DateValidationPosition = 'bottom' | 'icon' | 'float';
+/**
+ * `error` / `success` are the date's own names; `invalid` / `valid` are accepted as
+ * aliases — the names every other control (and `controlMonoForm`) uses.
+ */
+export type DateValidationState = 'default' | 'error' | 'success' | 'invalid' | 'valid';
 /** flatpickr selection mode. */
 export type DateMode = 'single' | 'multiple' | 'range';
 export interface DateCssClass {
@@ -64,11 +73,37 @@ export interface DateProps extends VisibilityProps {
   size?: DateSize;
   color?: DateColor;
   variant?: DateVariant;
+  /**
+   * Where the label sits: `top` (above the box, default), `notched` (on the top
+   * border for outlined; inset inside the box for filled / underlined), or
+   * `left` / `right` of the box. Knobs: `--mono-date-label-width`, `-label-side-gap`,
+   * `-label-notch-font-size`, `-label-notch-bg`.
+   */
+  labelPosition?: DateLabelPosition;
+  'label-position'?: DateLabelPosition;
+  labelposition?: DateLabelPosition;
+  /**
+   * Where the validation message shows. `bottom` (default): the row under the box.
+   * `icon`: a state icon inside the box; hover / tap / keyboard focus shows the message in
+   * a state-coloured bubble. `float`: the message floats under the box only while the field
+   * is hovered or focused. In `icon` / `float` the row under the box keeps the helper text.
+   */
+  validationPosition?: DateValidationPosition;
+  'validation-position'?: DateValidationPosition;
+  validationposition?: DateValidationPosition;
   /** Field label + helper / validation messaging. */
   label?: string;
   placeholder?: string;
   helperText?: string;
   'helper-text'?: string;
+  /**
+   * Info icon at the end of the label; hovering, focusing or tapping it shows this text.
+   * Plain text → a small built-in bubble (no dependency). Full tooltip options
+   * (`:tooltip.prop="{ content, placement, color }"`) → a `mono-tooltip`, which needs the
+   * optional `@floating-ui/dom` + `@floating-ui/core` peers (without them that form renders
+   * no icon). Shown only beside a label.
+   */
+  tooltip?: string | MonoTooltipOptions;
   validationState?: DateValidationState;
   'validation-state'?: DateValidationState;
   validationMessage?: string;

package/dist/src/components/drawer/drawer-core.d.ts

@@ -56,6 +56,7 @@ export declare class MonoDrawerCoreInterface implements PopupLayer {
   get hasBackdrop(): boolean;
   get pinnedZ(): number | undefined;
   onStackEscape(event: KeyboardEvent): void;
+  containsEventPath(path: EventTarget[]): boolean;
   setStackZ(z: number, isTopBackdrop: boolean): void;
   protected _slotsCaptured: boolean;
   protected _hasHeaderSlotState: boolean;

package/dist/src/components/dropdown-table/dropdown-table-core.d.ts

@@ -1,6 +1,7 @@
 import { Constructor } from "../../composables/hybird-prop.js";
 import { CssSizeValue } from "../../composables/css-size.js";
 import { DropdownPlacement } from "../dropdown/dropdown-types.js";
+import { FieldTooltipController, FieldTooltipValue } from "../../composables/field-tooltip.js";
 import { PopupPortalController } from "../../composables/popup-portal.js";
 import { DropdownPanelOptions, DropdownTableChipProps, DropdownTableColor, DropdownTableCssClass, DropdownTableSize, DropdownTableValidationState, DropdownTableVariant } from "./dropdown-table-types.js";
 import { MonoDropdownController } from "./mono-data-dropdown.js";
@@ -15,6 +16,8 @@ export declare class MonoDropdownTableCoreInterface {
   label: string;
   placeholder: string;
   helperText: string;
+  tooltip: FieldTooltipValue;
+  protected readonly _tooltip: FieldTooltipController;
   validationState: DropdownTableValidationState;
   validationMessage: string;
   errorMessage: string;

package/dist/src/components/dropdown-table/dropdown-table-types.d.ts

@@ -2,6 +2,7 @@ import { CssSizeValue, PanelSizeProps } from "../../composables/css-size.js";
 import { DropdownPlacement } from "../dropdown/dropdown-types.js";
 import { VisibilityProps } from "../../composables/visibility.js";
 import { ChipBehaviour, ChipColor, ChipCssClass, ChipRounded, ChipSize, ChipVariant } from "../chip/chip-types.js";
+import { MonoTooltipOptions } from "../tooltip/tooltip-types.js";
 import { ChipLimitProps } from "../../composables/chip-limits.js";
 import { MonoDropdownController, MonoDropdownItem } from "./mono-data-dropdown.js";
 //#region src/components/dropdown-table/dropdown-table-types.d.ts
@@ -62,6 +63,10 @@ export type DropdownTableSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type DropdownTableColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
 /** Field style variant. */
 export type DropdownTableVariant = 'outlined' | 'filled' | 'underlined';
+/** Where the label sits: above the box (default), notched into its top border (inset for filled / underlined), or beside it. */
+export type DropdownTableLabelPosition = 'top' | 'notched' | 'left' | 'right';
+/** Where the validation message shows: under the box (default), behind a state icon inside it, or floating under it on hover / focus. */
+export type DropdownTableValidationPosition = 'bottom' | 'icon' | 'float';
 /** Validation appearance. */
 export type DropdownTableValidationState = 'default' | 'valid' | 'invalid' | 'warning';
 /**
@@ -133,6 +138,24 @@ export interface DropdownTableProps extends VisibilityProps {
   color?: DropdownTableColor;
   /** Field style variant. */
   variant?: DropdownTableVariant;
+  /**
+   * Where the label sits: `top` (above the box, default), `notched` (on the top
+   * border for outlined; inset inside the box for filled / underlined), or
+   * `left` / `right` of the box. Knobs: `--mono-dropdown-table-label-width`, `-label-side-gap`,
+   * `-label-notch-font-size`, `-label-notch-bg`.
+   */
+  labelPosition?: DropdownTableLabelPosition;
+  'label-position'?: DropdownTableLabelPosition;
+  labelposition?: DropdownTableLabelPosition;
+  /**
+   * Where the validation message shows. `bottom` (default): the row under the box.
+   * `icon`: a state icon inside the box; hover / tap / keyboard focus shows the message in
+   * a state-coloured bubble. `float`: the message floats under the box only while the field
+   * is hovered or focused. In `icon` / `float` the row under the box keeps the helper text.
+   */
+  validationPosition?: DropdownTableValidationPosition;
+  'validation-position'?: DropdownTableValidationPosition;
+  validationposition?: DropdownTableValidationPosition;
   /** Text label shown above the field. */
   label?: string;
   /** Placeholder shown in the field when nothing is selected. */
@@ -140,6 +163,14 @@ export interface DropdownTableProps extends VisibilityProps {
   /** Helper text shown below the field. */
   helperText?: string;
   'helper-text'?: string;
+  /**
+   * Info icon at the end of the label; hovering, focusing or tapping it shows this text.
+   * Plain text → a small built-in bubble (no dependency). Full tooltip options
+   * (`:tooltip.prop="{ content, placement, color }"`) → a `mono-tooltip`, which needs the
+   * optional `@floating-ui/dom` + `@floating-ui/core` peers (without them that form renders
+   * no icon). Shown only beside a label.
+   */
+  tooltip?: string | MonoTooltipOptions;
   /** Validation state controlling the field's appearance. */
   validationState?: DropdownTableValidationState;
   'validation-state'?: DropdownTableValidationState;

package/dist/src/components/form/form-types.d.ts

@@ -10,6 +10,8 @@ import { RichTextEditorEvents, RichTextEditorProps } from "../rich-text-editor/r
 import { TagInputEvents, TagInputProps } from "../tag-input/tag-input-types.js";
 import { RadioEvents, RadioProps } from "../radio/radio-types.js";
 import { SwitchEvents, SwitchProps } from "../switch/switch-types.js";
+import { SliderEvents, SliderProps } from "../slider/slider-types.js";
+import { OtpEvents, OtpProps } from "../otp/otp-types.js";
 //#region src/components/form/form-types.d.ts
 /**
  * Tag name → its props, so `inputs[key].props` and `setProp()` autocomplete against the
@@ -32,6 +34,8 @@ export interface MonoFormComponentProps {
   'mono-checkbox': Partial<CheckboxProps> & MonoEventProps<CheckboxEvents>;
   'mono-radio': Partial<RadioProps> & MonoEventProps<RadioEvents>;
   'mono-switch': Partial<SwitchProps> & MonoEventProps<SwitchEvents>;
+  'mono-slider': Partial<SliderProps> & MonoEventProps<SliderEvents>;
+  'mono-otp': Partial<OtpProps> & MonoEventProps<OtpEvents>;
 }
 /** Every component `monoForm` can drive. */
 export type MonoFormComponent = keyof MonoFormComponentProps;
@@ -52,13 +56,27 @@ export interface MonoFormRuleCtx<V = unknown> {
   key: string;
 }
 /**
- * Anything schema-shaped — yup and friends. Duck-typed on purpose: @mono-lit/helper
- * takes no validation dependency, so any object exposing `validateSync` (or an
- * async `validate`) works, and the thrown error's `message` becomes the message.
+ * Anything schema-shaped. Duck-typed on purpose: @mono-lit/helper takes no
+ * validation dependency. Two shapes are accepted:
+ * - yup-shaped: `validateSync` (or an async `validate`) that throws; the
+ *   error's `errors[0]` / `message` becomes the message.
+ * - Standard Schema v1 (Valibot, Zod, ArkType, …): `['~standard'].validate`;
+ *   the first issue's `message` becomes the message.
  */
 export interface MonoFormSchemaLike {
-  validateSync?: (value: unknown, options?: unknown) => unknown;
-  validate?: (value: unknown, options?: unknown) => unknown;
+  validateSync?: (value: unknown, options?: any) => unknown;
+  validate?: (value: unknown, options?: any) => unknown;
+  readonly '~standard'?: {
+    readonly validate: (value: unknown) => {
+      readonly issues?: ReadonlyArray<{
+        readonly message: string;
+      }> | undefined;
+    } | Promise<{
+      readonly issues?: ReadonlyArray<{
+        readonly message: string;
+      }> | undefined;
+    }>;
+  };
 }
 interface MonoFormRuleBase {
   /** Overrides the form-level `validation.type` for this rule only. */

package/dist/src/components/input/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../../vue.d.ts" />
 import { InputFormat, InputFormatCtx, InputFormatDescriptor, InputFormatOn, applyFormat, caretAfterFormat, localeSeparators, normaliseValue, parseFormat, resolveFormat, significantFor, stripFormat } from "./input-format.js";
-import { InputColor, InputEvents, InputProps, InputSize, InputType, InputVariant } from "./input-types.js";
+import { InputColor, InputEvents, InputFileErrorEventDetail, InputModelEventDetail, InputModelValue, InputProps, InputSize, InputType, InputVariant } from "./input-types.js";
 import { MonoInput } from "./mono-input.js";
 import { generateInputAriaAttributes, generateInputAttributes, getInputIcon, validateInputProps } from "./input-utils.js";
-export { type InputColor, type InputEvents, type InputFormat, type InputFormatCtx, type InputFormatDescriptor, type InputFormatOn, type InputProps, type InputSize, type InputType, type InputVariant, MonoInput, applyFormat, caretAfterFormat, generateInputAriaAttributes, generateInputAttributes, getInputIcon, localeSeparators, normaliseValue, parseFormat, resolveFormat, significantFor, stripFormat, validateInputProps };
+export { type InputColor, type InputEvents, type InputFileErrorEventDetail, type InputFormat, type InputFormatCtx, type InputFormatDescriptor, type InputFormatOn, type InputModelEventDetail, type InputModelValue, type InputProps, type InputSize, type InputType, type InputVariant, MonoInput, applyFormat, caretAfterFormat, generateInputAriaAttributes, generateInputAttributes, getInputIcon, localeSeparators, normaliseValue, parseFormat, resolveFormat, significantFor, stripFormat, validateInputProps };

package/dist/src/components/input/index.shadow.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../../vue.d.ts" />
 import { InputFormat, InputFormatCtx, InputFormatDescriptor, InputFormatOn, applyFormat, caretAfterFormat, localeSeparators, normaliseValue, parseFormat, resolveFormat, significantFor, stripFormat } from "./input-format.js";
-import { InputColor, InputEvents, InputProps, InputSize, InputType, InputVariant } from "./input-types.js";
+import { InputColor, InputEvents, InputFileErrorEventDetail, InputModelEventDetail, InputModelValue, InputProps, InputSize, InputType, InputVariant } from "./input-types.js";
 import { InputSlotName, MonoInputCore } from "./input-core.js";
 import { generateInputAriaAttributes, generateInputAttributes, getInputIcon, validateInputProps } from "./input-utils.js";
 import { MonoInputShadow } from "./mono-input.shadow.js";
-export { type InputColor, type InputEvents, type InputFormat, type InputFormatCtx, type InputFormatDescriptor, type InputFormatOn, type InputProps, type InputSize, type InputSlotName, type InputType, type InputVariant, MonoInputCore, MonoInputShadow, applyFormat, caretAfterFormat, generateInputAriaAttributes, generateInputAttributes, getInputIcon, localeSeparators, normaliseValue, parseFormat, resolveFormat, significantFor, stripFormat, validateInputProps };
+export { type InputColor, type InputEvents, type InputFileErrorEventDetail, type InputFormat, type InputFormatCtx, type InputFormatDescriptor, type InputFormatOn, type InputModelEventDetail, type InputModelValue, type InputProps, type InputSize, type InputSlotName, type InputType, type InputVariant, MonoInputCore, MonoInputShadow, applyFormat, caretAfterFormat, generateInputAriaAttributes, generateInputAttributes, getInputIcon, localeSeparators, normaliseValue, parseFormat, resolveFormat, significantFor, stripFormat, validateInputProps };

package/dist/src/components/input/input-core.d.ts

@@ -1,7 +1,9 @@
 import { Constructor } from "../../composables/hybird-prop.js";
 import { CssSizeValue, buildSizeStyle } from "../../composables/css-size.js";
+import { FieldTooltipController, FieldTooltipValue } from "../../composables/field-tooltip.js";
 import { InputFormat, InputFormatOn } from "./input-format.js";
-import { InputColor, InputCssClass, InputSize, InputType, InputValidationState, InputVariant } from "./input-types.js";
+import { InputColor, InputCssClass, InputModelValue, InputSize, InputType, InputValidationState, InputVariant } from "./input-types.js";
+import { FieldValidationController } from "../../composables/field-validation.js";
 import { LitElement, TemplateResult, nothing } from "lit";
 //#region src/components/input/input-core.d.ts
 export declare const numberStringConverter: {
@@ -9,6 +11,8 @@ export declare const numberStringConverter: {
   toAttribute(value: number | undefined): string | null;
 };
 export type InputSlotName = 'prefix' | 'suffix' | 'label' | 'helper';
+/** Glyphs the builds draw: the clear `×`, and the `type="file"` upload cloud. */
+export type InputIconName = 'close' | 'upload';
 /** Public surface added by the core mixin (for typing the wrappers + tag map). */
 export declare class MonoInputCoreInterface {
   cssClass: InputCssClass;
@@ -17,7 +21,11 @@ export declare class MonoInputCoreInterface {
   size: InputSize;
   color: InputColor;
   variant: InputVariant;
-  modelValue: string;
+  modelValue: InputModelValue;
+  accept: string;
+  multiple: boolean;
+  maxFileSize?: number;
+  showValue: boolean;
   formatDisplay?: InputFormat;
   formatValue?: InputFormat;
   formatOn: InputFormatOn;
@@ -27,6 +35,14 @@ export declare class MonoInputCoreInterface {
   placeholder: string;
   label: string;
   helperText: string;
+  tooltip: FieldTooltipValue;
+  protected readonly _tooltip: FieldTooltipController;
+  protected readonly _validation: FieldValidationController;
+  protected get _validationNotice(): {
+    state: string;
+    text: string;
+  } | null;
+  protected _renderMovedMessage(): TemplateResult;
   validationState: InputValidationState;
   validationMessage: string;
   error: boolean;
@@ -69,12 +85,16 @@ export declare class MonoInputCoreInterface {
   protected readonly _resolvedValidationState: InputValidationState;
   protected readonly _wrapperClasses: string;
   protected readonly _fieldClasses: string;
+  protected readonly _isFile: boolean;
+  protected readonly _isRange: boolean;
   protected _cls(base: string, key: keyof InputCssClass): string;
   protected _sizeStyle(): ReturnType<typeof buildSizeStyle>;
   protected _renderWrapper(inner: TemplateResult): TemplateResult;
   protected _renderNative(): TemplateResult;
   protected _renderClear(): TemplateResult | typeof nothing;
-  protected renderIcon(name: 'close'): TemplateResult;
+  protected _renderFileIcon(): TemplateResult | typeof nothing;
+  protected _renderRangeValue(where: 'label' | 'field'): TemplateResult | typeof nothing;
+  protected renderIcon(name: InputIconName): TemplateResult;
 }
 /**
  * `MonoInputCore` — all render-mode-agnostic logic for `mono-input`: reactive

package/dist/src/components/input/input-types.d.ts

@@ -1,17 +1,29 @@
 import { VisibilityProps } from "../../composables/visibility.js";
+import { MonoTooltipOptions } from "../tooltip/tooltip-types.js";
 import { InputFormat, InputFormatCtx, InputFormatOn } from "./input-format.js";
 //#region src/components/input/input-types.d.ts
-export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'date' | 'time' | 'month' | 'week' | 'search';
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'date' | 'time' | 'month' | 'week' | 'search' | 'file' | 'range';
 export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type InputVariant = 'outlined' | 'filled' | 'underlined';
+/** Where the label sits: above the box (default), notched into its top border (inset for filled / underlined), or beside it. */
+export type InputLabelPosition = 'top' | 'notched' | 'left' | 'right';
+/** Where the validation message shows: under the box (default), behind a state icon inside it, or floating under it on hover / focus. */
+export type InputValidationPosition = 'bottom' | 'icon' | 'float';
 export type InputColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
 export type InputValidationState = 'default' | 'valid' | 'invalid' | 'warning';
+/**
+ * What `modelValue` holds: the text for every text-like type; for `type="file"` the picked
+ * `File` (`null` when empty), or `File[]` with `multiple`.
+ */
+export type InputModelValue = string | File | File[] | null;
 export type InputModelEventDetail = {
-  modelValue: string;
-  currentValue: string;
-  oldValue: string;
-  value: string;
+  modelValue: InputModelValue;
+  currentValue: InputModelValue;
+  oldValue: InputModelValue;
+  value: InputModelValue;
   name?: string;
+  /** `type="file"` only — the picked files, always as an array. */
+  files?: File[];
   sourceEvent?: Event;
   /** What the field is SHOWING — differs from `value` once a `format-display` is set. */
   displayValue?: string;
@@ -25,10 +37,23 @@ export interface InputCssClass {
   native?: string;
   clear?: string;
   suffix?: string;
+  /** `type="file"` — the upload icon at the end of the field. */
+  fileIcon?: string;
+  /** `type="range"` — the value readout (end of the label row, or after the slider). */
+  rangeValue?: string;
   messageWrap?: string;
   message?: string;
 }
 export type InputModelEvent = CustomEvent<InputModelEventDetail>;
+/** `type="file"` — a picked file was rejected (same shape as `mono-file-upload`'s `error`). */
+export type InputFileErrorEventDetail = {
+  message: string;
+  reason: 'max-file-size';
+  file?: File;
+  maxFileSize?: number;
+  sourceEvent?: Event;
+};
+export type InputFileErrorEvent = CustomEvent<InputFileErrorEventDetail>;
 export interface InputProps extends VisibilityProps {
   /** Native input type controlling the field's behavior and keyboard. */
   type?: InputType;
@@ -38,16 +63,54 @@ export interface InputProps extends VisibilityProps {
   color?: InputColor;
   /** Visual style of the field (outlined, filled, or underlined). */
   variant?: InputVariant;
+  /**
+   * Where the label sits: `top` (above the box, default), `notched` (on the top
+   * border for outlined; inset inside the box for filled / underlined), or
+   * `left` / `right` of the box. Knobs: `--mono-input-label-width`, `-label-side-gap`,
+   * `-label-notch-font-size`, `-label-notch-bg`.
+   */
+  labelPosition?: InputLabelPosition;
+  'label-position'?: InputLabelPosition;
+  labelposition?: InputLabelPosition;
+  /**
+   * Where the validation message shows. `bottom` (default): the row under the box.
+   * `icon`: a state icon inside the box; hover / tap / keyboard focus shows the message in
+   * a state-coloured bubble. `float`: the message floats under the box only while the field
+   * is hovered or focused. In `icon` / `float` the row under the box keeps the helper text.
+   */
+  validationPosition?: InputValidationPosition;
+  'validation-position'?: InputValidationPosition;
+  validationposition?: InputValidationPosition;
   /** Placeholder text shown when the field is empty. */
   placeholder?: string;
   /** Current input value. */
   value?: string | number;
   /** Form field name submitted with the input. */
   name?: string;
-  /** Two-way bound value for v-model-style usage. */
-  modelValue?: string;
-  'model-value'?: string;
-  modelvalue?: string;
+  /**
+   * Two-way bound value for v-model-style usage. For `type="file"` it is the picked `File`
+   * (`null` when empty), or `File[]` with `multiple`.
+   */
+  modelValue?: InputModelValue;
+  'model-value'?: InputModelValue;
+  modelvalue?: InputModelValue;
+  /** `type="file"` — the native `accept` filter (`"image/*,.pdf"`). */
+  accept?: string;
+  /** `type="file"` — allow picking several files; `modelValue` becomes `File[]`. */
+  multiple?: boolean;
+  /** `type="file"` — reject files larger than this many bytes (emits `error`). */
+  maxFileSize?: number;
+  'max-file-size'?: number;
+  maxfilesize?: number;
+  /**
+   * `type="range"` — show the current value beside the slider (default `true`): at the end of
+   * the label row, or after the slider when there is no label. It is drawn through
+   * `format-display`, so `format-display="Rp {}"` or a function shapes it. `show-value="false"`
+   * hides it.
+   */
+  showValue?: boolean;
+  'show-value'?: boolean;
+  showvalue?: boolean;
   /**
    * How the field is DISPLAYED — a pattern (`#,##0.##`, `{}@gmail.com`) or a function.
    * Never changes the value. A numeric pattern requires `type="text"`.
@@ -86,6 +149,14 @@ export interface InputProps extends VisibilityProps {
   helperText?: string;
   'helper-text'?: string;
   helpertext?: string;
+  /**
+   * Info icon at the end of the label; hovering, focusing or tapping it shows this text.
+   * Plain text → a small built-in bubble (no dependency). Full tooltip options
+   * (`:tooltip.prop="{ content, placement, color }"`) → a `mono-tooltip`, which needs the
+   * optional `@floating-ui/dom` + `@floating-ui/core` peers (without them that form renders
+   * no icon). Shown only beside a label.
+   */
+  tooltip?: string | MonoTooltipOptions;
   /** Explicit validation state for styling and messaging. */
   validationState?: InputValidationState;
   'validation-state'?: InputValidationState;
@@ -170,12 +241,16 @@ export interface InputEvents {
   input: InputModelEvent;
   change: InputModelEvent;
   clear: InputModelEvent;
+  /** `type="file"` — a picked file was rejected. */
+  error: InputFileErrorEvent;
   'mno-input': InputModelEvent;
   mnoInput: InputModelEvent;
   'mno-change': InputModelEvent;
   mnoChange: InputModelEvent;
   'mno-clear': InputModelEvent;
   mnoClear: InputModelEvent;
+  'mno-error': InputFileErrorEvent;
+  mnoError: InputFileErrorEvent;
 }
 //#endregion
 export type { InputFormat, InputFormatCtx, InputFormatOn };

package/dist/src/components/input/mono-input.d.ts

@@ -1,5 +1,5 @@
 import { Constructor } from "../../composables/hybird-prop.js";
-import { MonoInputCoreInterface } from "./input-core.js";
+import { InputIconName, MonoInputCoreInterface } from "./input-core.js";
 import { LitElement, TemplateResult } from "lit";
 //#region src/components/input/mono-input.d.ts
 declare const MonoInput_base: Constructor<MonoInputCoreInterface> & typeof LitElement;
@@ -36,9 +36,10 @@ export declare class MonoInput extends MonoInput_base {
   disconnectedCallback(): void;
   protected updated(changed: Map<string, unknown>): void;
   private _placeSlot;
-  protected renderIcon(_name: 'close'): TemplateResult;
+  protected renderIcon(name: InputIconName): TemplateResult;
   private _renderLabel;
   private _renderHelper;
+  private _renderHelperText;
   protected render(): TemplateResult;
 }
 declare global {