@mono-lit/helper 0.0.4 → 0.0.5

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 {

package/dist/src/components/input/mono-input.shadow.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.shadow.d.ts
 declare const MonoInputShadow_base: Constructor<MonoInputCoreInterface> & typeof LitElement;
@@ -28,9 +28,10 @@ export declare class MonoInputShadow extends MonoInputShadow_base {
   private _slotHasContent;
   private _setSlotState;
   private _onSlotChange;
-  protected renderIcon(_name: 'close'): TemplateResult;
+  protected renderIcon(name: InputIconName): TemplateResult;
   private _renderLabel;
   private _renderHelper;
+  private _renderHelperText;
   protected render(): TemplateResult;
   connectedCallback(): void;
 }

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

@@ -65,6 +65,7 @@ export declare class MonoModalCoreInterface 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 _hasHeadSlotState: boolean;

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

@@ -0,0 +1,5 @@
+/// <reference path="../../../vue.d.ts" />
+import { OtpColor, OtpCssClass, OtpEvents, OtpGroups, OtpLabelPosition, OtpModelEvent, OtpModelEventDetail, OtpProps, OtpSize, OtpType, OtpValidationPosition, OtpValidationState, OtpVariant } from "./otp-types.js";
+import { MonoOtp } from "./mono-otp.js";
+import { OTP_DEFAULT_LENGTH, OtpEdit, backspaceOtp, clampCaret, normaliseOtpValue, parseOtpGroups, removeOtpChar, resolveOtpLength, sanitizeOtpChar, sanitizeOtpText, spliceOtpValue } from "./otp-utils.js";
+export { MonoOtp, OTP_DEFAULT_LENGTH, type OtpColor, type OtpCssClass, type OtpEdit, type OtpEvents, type OtpGroups, type OtpLabelPosition, type OtpModelEvent, type OtpModelEventDetail, type OtpProps, type OtpSize, type OtpType, type OtpValidationPosition, type OtpValidationState, type OtpVariant, backspaceOtp, clampCaret, normaliseOtpValue, parseOtpGroups, removeOtpChar, resolveOtpLength, sanitizeOtpChar, sanitizeOtpText, spliceOtpValue };

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

@@ -0,0 +1,6 @@
+/// <reference path="../../../vue.d.ts" />
+import { OtpColor, OtpCssClass, OtpEvents, OtpGroups, OtpLabelPosition, OtpModelEvent, OtpModelEventDetail, OtpProps, OtpSize, OtpType, OtpValidationPosition, OtpValidationState, OtpVariant } from "./otp-types.js";
+import { MonoOtpCore, OtpSlotName } from "./otp-core.js";
+import { OTP_DEFAULT_LENGTH, OtpEdit, backspaceOtp, clampCaret, normaliseOtpValue, parseOtpGroups, removeOtpChar, resolveOtpLength, sanitizeOtpChar, sanitizeOtpText, spliceOtpValue } from "./otp-utils.js";
+import { MonoOtpShadow } from "./mono-otp.shadow.js";
+export { MonoOtpCore, MonoOtpShadow, OTP_DEFAULT_LENGTH, type OtpColor, type OtpCssClass, type OtpEdit, type OtpEvents, type OtpGroups, type OtpLabelPosition, type OtpModelEvent, type OtpModelEventDetail, type OtpProps, type OtpSize, type OtpSlotName, type OtpType, type OtpValidationPosition, type OtpValidationState, type OtpVariant, backspaceOtp, clampCaret, normaliseOtpValue, parseOtpGroups, removeOtpChar, resolveOtpLength, sanitizeOtpChar, sanitizeOtpText, spliceOtpValue };

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

@@ -0,0 +1,32 @@
+import { Constructor } from "../../composables/hybird-prop.js";
+import { MonoOtpCoreInterface, OtpIconName } from "./otp-core.js";
+import { LitElement, TemplateResult } from "lit";
+//#region src/components/otp/mono-otp.d.ts
+declare const MonoOtp_base: Constructor<MonoOtpCoreInterface> & typeof LitElement;
+/**
+ * Light-DOM `mono-otp` (default build, `@mono-lit/helper/ui/otp`).
+ *
+ * Renders into the host (styled by the global `dist/ui/index.css`). `slot="prefix|suffix|label|helper"`
+ * children are captured on connect and re-placed into `[data-mono-slot]` placeholders after each
+ * render — the same strategy as mono-input. Everything else lives in `MonoOtpCore`; the shadow
+ * build (`mono-shadow-otp`) shares it with native `<slot>`s.
+ */
+export declare class MonoOtp extends MonoOtp_base {
+  static styles: import("lit").CSSResult[];
+  protected createRenderRoot(): HTMLElement;
+  private _slots;
+  private _slotObserver?;
+  /** Capture `slot="…"` children. Safe to re-run: captured nodes lose `slot` and leave the host. */
+  private _captureSlots;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected updated(changed: Map<string, unknown>): void;
+  protected renderIcon(_name: OtpIconName): TemplateResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'mono-otp': MonoOtp;
+  }
+}
+//#endregion
+export {};

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

@@ -0,0 +1,30 @@
+import { Constructor } from "../../composables/hybird-prop.js";
+import { MonoOtpCoreInterface, OtpIconName } from "./otp-core.js";
+import { LitElement, TemplateResult } from "lit";
+//#region src/components/otp/mono-otp.shadow.d.ts
+declare const MonoOtpShadow_base: Constructor<MonoOtpCoreInterface> & typeof LitElement;
+/**
+ * Shadow-DOM `mono-otp` (SSR build, `@mono-lit/helper/ui/shadow/otp`, tag `mono-shadow-otp`).
+ *
+ * Shares every behaviour with the light build through `MonoOtpCore`; only the slot regions
+ * differ: native `<slot name="prefix|suffix|label|helper">` (label / helper carry the prop text as
+ * fallback). Slot presence is unknown during SSR, so both sides default to "empty" and
+ * `firstUpdated()` scans the assigned nodes (Declarative Shadow DOM assigns slotted content at
+ * parse time, so `slotchange` never fires after hydration — same as mono-input).
+ */
+export declare class MonoOtpShadow extends MonoOtpShadow_base {
+  static styles: import("lit").CSSResult[];
+  connectedCallback(): void;
+  firstUpdated(changed: Map<string, unknown>): void;
+  private _slotHasContent;
+  private _setSlotState;
+  private _onSlotChange;
+  protected _renderLabelText(): TemplateResult;
+  /** Always rendered (the slot must exist to be scanned); hidden with `mono-empty` when empty. */
+  protected _renderLabel(): TemplateResult;
+  protected _renderHelperText(base: string): TemplateResult;
+  protected _renderAffix(name: 'prefix' | 'suffix'): TemplateResult;
+  protected renderIcon(_name: OtpIconName): TemplateResult;
+}
+//#endregion
+export {};