@mono-lit/helper 0.0.4 → 0.0.6

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 {};

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

@@ -0,0 +1,91 @@
+import { Constructor } from "../../composables/hybird-prop.js";
+import { CssSizeValue } from "../../composables/css-size.js";
+import { FieldTooltipController, FieldTooltipValue } from "../../composables/field-tooltip.js";
+import { OtpColor, OtpCssClass, OtpGroups, OtpLabelPosition, OtpSize, OtpType, OtpValidationPosition, OtpValidationState, OtpVariant } from "./otp-types.js";
+import { FieldValidationController } from "../../composables/field-validation.js";
+import { LitElement, TemplateResult, nothing } from "lit";
+//#region src/components/otp/otp-core.d.ts
+export type OtpSlotName = 'prefix' | 'suffix' | 'label' | 'helper';
+/** Glyphs the builds draw: only the clear `×`. */
+export type OtpIconName = 'close';
+/** Public surface added by the core mixin (for typing the wrappers + tag map). */
+export declare class MonoOtpCoreInterface {
+  cssClass: OtpCssClass;
+  cssClassName: string;
+  type: OtpType;
+  length: number | string;
+  groups?: OtpGroups;
+  separator: string;
+  mask: boolean;
+  size: OtpSize;
+  color: OtpColor;
+  variant: OtpVariant;
+  labelPosition: OtpLabelPosition;
+  validationPosition: OtpValidationPosition;
+  modelValue: string;
+  value: string;
+  name: string;
+  placeholder: string;
+  label: string;
+  helperText: string;
+  tooltip: FieldTooltipValue;
+  validationState: OtpValidationState;
+  validationMessage: string;
+  error: boolean;
+  errorMessage: string;
+  success: boolean;
+  successMessage: string;
+  autocomplete: string;
+  inputmode: string;
+  ariaLabelText?: string;
+  disabled: boolean;
+  readonly: boolean;
+  required: boolean;
+  clearable: boolean;
+  autofocus: boolean;
+  width?: CssSizeValue;
+  height?: CssSizeValue;
+  minWidth?: CssSizeValue;
+  maxWidth?: CssSizeValue;
+  minHeight?: CssSizeValue;
+  maxHeight?: CssSizeValue;
+  /** True once every box holds a character. */
+  readonly complete: boolean;
+  /** Focus a box — by default the first empty one (or the last when full). */
+  focus(index?: number | FocusOptions): void;
+  blur(): void;
+  /** Empty every box (fires `input`, `change` and `clear`). */
+  clear(): void;
+  protected readonly _tooltip: FieldTooltipController;
+  protected readonly _validation: FieldValidationController;
+  protected _hasPrefixSlotState: boolean;
+  protected _hasSuffixSlotState: boolean;
+  protected _hasLabelSlotState: boolean;
+  protected _hasHelperSlotState: boolean;
+  protected readonly _otpId: string;
+  protected readonly _messageId: string;
+  protected readonly _resolvedValidationState: OtpValidationState;
+  protected _cls(base: string, key: keyof OtpCssClass): string;
+  protected _renderLabel(): TemplateResult | typeof nothing;
+  protected _renderLabelText(): TemplateResult | string;
+  protected _renderHelperText(base: string): TemplateResult | typeof nothing;
+  protected _renderAffix(name: 'prefix' | 'suffix'): TemplateResult | typeof nothing;
+  protected renderIcon(name: OtpIconName): TemplateResult;
+}
+/**
+ * `MonoOtpCore` — all render-mode-agnostic logic for `mono-otp`: N single-character boxes that
+ * behave as ONE field. The value is a contiguous prefix of the boxes (box i holds `value[i]`), so
+ * focus can never land past the first empty box, Backspace / Delete shift the rest left, and a
+ * paste or an SMS autofill overwrites from the focused box on (see `otp-utils.ts`).
+ *
+ * Same prop surface as mono-input (size / color / variant / label-position / validation-position
+ * / tooltip / messages / states / sizing), wired to `controlMonoForm` through
+ * `MonoFormControlCore`: `input` per edit (live rules), `change` when focus leaves the group
+ * (change rules, marks touched), plus `complete` once every box is filled.
+ *
+ * Each build supplies `createRenderRoot()`, the slot strategy (the `_render*` hooks below) and
+ * `renderIcon()` — light captures `slot="…"` children into `[data-mono-slot]` placeholders,
+ * shadow uses native `<slot>`s.
+ */
+export declare const MonoOtpCore: <T extends Constructor<LitElement>>(superClass: T) => Constructor<MonoOtpCoreInterface> & T;
+//#endregion

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

@@ -0,0 +1,161 @@
+import { VisibilityProps } from "../../composables/visibility.js";
+import { MonoTooltipOptions } from "../tooltip/tooltip-types.js";
+//#region src/components/otp/otp-types.d.ts
+/** Which characters a box accepts: digits (default), letters + digits (uppercased), or any non-space character. */
+export type OtpType = 'numeric' | 'alphanumeric' | 'text';
+export type OtpSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type OtpVariant = 'outlined' | 'filled' | 'underlined';
+/** `notched` is accepted for parity with mono-input but renders as `top` — there is no single box to notch. */
+export type OtpLabelPosition = 'top' | 'notched' | 'left' | 'right';
+export type OtpValidationPosition = 'bottom' | 'icon' | 'float';
+export type OtpColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
+export type OtpValidationState = 'default' | 'valid' | 'invalid' | 'warning';
+/** `groups`: a group size (`3`), a list (`[3, 3]`), or the same list from markup (`"3,3"`). */
+export type OtpGroups = number | number[] | string;
+export type OtpModelEventDetail = {
+  /** The code typed so far — the boxes joined, always a contiguous prefix. */
+  modelValue: string;
+  currentValue: string;
+  oldValue: string;
+  value: string;
+  /** True once every box is filled. */
+  complete: boolean;
+  /** The box the edit happened in (`-1` for a clear or a blur commit). */
+  index: number;
+  name?: string;
+  sourceEvent?: Event;
+};
+export type OtpModelEvent = CustomEvent<OtpModelEventDetail>;
+export interface OtpCssClass {
+  root?: string;
+  label?: string;
+  required?: string;
+  field?: string;
+  group?: string;
+  cell?: string;
+  separator?: string;
+  prefix?: string;
+  suffix?: string;
+  clear?: string;
+  messageWrap?: string;
+  message?: string;
+}
+export interface OtpProps extends VisibilityProps {
+  /** Which characters a box accepts: `numeric` (default), `alphanumeric` (uppercased) or `text`. */
+  type?: OtpType;
+  /** Number of boxes (default 6). */
+  length?: number | string;
+  /**
+   * Split the boxes into groups with a separator between them: a group size (`3` → 3-3),
+   * a list (`[3, 3]`, `[2, 2, 2]`) or the markup form `"3,3"`.
+   */
+  groups?: OtpGroups;
+  /** Text drawn between groups (default `-`). An empty string leaves only the gap. */
+  separator?: string;
+  /** Hide the typed characters like a password. */
+  mask?: boolean;
+  /** Visual size of the boxes. */
+  size?: OtpSize;
+  /** Theme color applied to focus. */
+  color?: OtpColor;
+  /** Visual style of each box (outlined, filled, or underlined). */
+  variant?: OtpVariant;
+  /** Where the label sits: `top` (default), `left` or `right`. `notched` renders as `top`. */
+  labelPosition?: OtpLabelPosition;
+  'label-position'?: OtpLabelPosition;
+  labelposition?: OtpLabelPosition;
+  /** Where the validation message shows: `bottom` (default), `icon` or `float` (see mono-input). */
+  validationPosition?: OtpValidationPosition;
+  'validation-position'?: OtpValidationPosition;
+  validationposition?: OtpValidationPosition;
+  /** A placeholder character drawn in every empty box (e.g. `○` or `-`). */
+  placeholder?: string;
+  /** Current code. */
+  value?: string | number;
+  /** Form field name — a hidden input carries the joined code for a native form submit. */
+  name?: string;
+  /** Two-way bound value. */
+  modelValue?: string | number;
+  'model-value'?: string | number;
+  modelvalue?: string | number;
+  /** Disables interaction and dims the boxes. */
+  disabled?: boolean;
+  /** Makes the boxes read-only while still focusable. */
+  readonly?: boolean;
+  /** Shows a clear button when a code has been typed. */
+  clearable?: boolean;
+  /** Marks the field as required and shows a required indicator. */
+  required?: boolean;
+  /** Focuses the first empty box on first render. */
+  autofocus?: boolean;
+  /** Label text displayed above the boxes. */
+  label?: string;
+  /** Helper text shown below the boxes. */
+  helperText?: string;
+  'helper-text'?: string;
+  helpertext?: string;
+  /** Info icon at the end of the label (plain text, or full `mono-tooltip` options). */
+  tooltip?: string | MonoTooltipOptions;
+  /** Explicit validation state for styling and messaging. */
+  validationState?: OtpValidationState;
+  'validation-state'?: OtpValidationState;
+  validationstate?: OtpValidationState;
+  /** Validation message shown below the boxes. */
+  validationMessage?: string;
+  'validation-message'?: string;
+  validationmessage?: string;
+  /** Marks the field in an error state. */
+  error?: boolean;
+  /** Error message shown below the boxes. */
+  errorMessage?: string;
+  'error-message'?: string;
+  errormessage?: string;
+  /** Marks the field in a success state. */
+  success?: boolean;
+  /** Success message shown below the boxes. */
+  successMessage?: string;
+  'success-message'?: string;
+  successmessage?: string;
+  /** Native autocomplete hint on the first box (default `one-time-code`, which lets phones offer an SMS code). */
+  autocomplete?: string;
+  /** On-screen keyboard hint. Defaults to `numeric` for `type="numeric"`, otherwise `text`. */
+  inputmode?: string;
+  /** Accessible label for the group; each box reads "<label> – character i of n". */
+  ariaLabelText?: string;
+  ariaLabel?: string;
+  'aria-label'?: string;
+  'aria-label-text'?: string;
+  arialabel?: string;
+  arialabeltext?: string;
+  /** Explicit sizing of the root (CSS length or px number). */
+  width?: string | number;
+  height?: string | number;
+  minWidth?: string | number;
+  'min-width'?: string | number;
+  maxWidth?: string | number;
+  'max-width'?: string | number;
+  minHeight?: string | number;
+  'min-height'?: string | number;
+  maxHeight?: string | number;
+  'max-height'?: string | number;
+  /** Per-part class overrides for internal elements. */
+  cssClass?: OtpCssClass;
+  /** Simple HTML root class only. */
+  'css-class'?: string;
+}
+export interface OtpEvents {
+  input: OtpModelEvent;
+  change: OtpModelEvent;
+  /** Every box is filled. */
+  complete: OtpModelEvent;
+  clear: OtpModelEvent;
+  'mno-input': OtpModelEvent;
+  mnoInput: OtpModelEvent;
+  'mno-change': OtpModelEvent;
+  mnoChange: OtpModelEvent;
+  'mno-complete': OtpModelEvent;
+  mnoComplete: OtpModelEvent;
+  'mno-clear': OtpModelEvent;
+  mnoClear: OtpModelEvent;
+}
+//#endregion

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

@@ -0,0 +1,41 @@
+import { OtpGroups, OtpType } from "./otp-types.js";
+//#region src/components/otp/otp-utils.d.ts
+/**
+ * Pure helpers behind `mono-otp`. The value is always a CONTIGUOUS prefix of the boxes — box i
+ * holds `value[i]` — so every edit is a string operation and the boxes are just its characters.
+ */
+export declare const OTP_DEFAULT_LENGTH = 6;
+/** One character cleaned for `type`; `''` when it is not accepted. */
+export declare function sanitizeOtpChar(ch: string, type?: OtpType): string;
+/** A whole string cleaned for `type` — rejected characters are dropped, not kept as holes. */
+export declare function sanitizeOtpText(text: unknown, type?: OtpType): string;
+/** `length` from a prop or attribute: a whole number ≥ 1, else the default. */
+export declare function resolveOtpLength(length: unknown): number;
+/** The model for `length` boxes: cleaned and cut to fit. */
+export declare function normaliseOtpValue(value: unknown, length: number, type?: OtpType): string;
+/**
+ * Group sizes → the box indexes a separator goes BEFORE. `3` repeats (6 boxes → 3-3, 8 → 3-3-2);
+ * a list is taken as given and any boxes past it form one last group.
+ */
+export declare function parseOtpGroups(groups: OtpGroups | null | undefined, length: number): number[];
+export interface OtpEdit {
+  value: string;
+  /** The box to focus next. */
+  caret: number;
+}
+/**
+ * Put `text` at box `index`. One character replaces that box; several (a paste, an SMS
+ * autofill) overwrite from `index` onwards. Rejected characters are dropped first, so pasting
+ * `"123-456"` into a numeric field fills six boxes.
+ */
+export declare function spliceOtpValue(value: string, index: number, text: string, length: number, type?: OtpType): OtpEdit;
+/** Remove the character in box `index`; the boxes after it move left. */
+export declare function removeOtpChar(value: string, index: number, length: number): OtpEdit;
+/**
+ * Backspace in box `index`: clear it when it holds a character, otherwise step back and clear
+ * the one before.
+ */
+export declare function backspaceOtp(value: string, index: number, length: number): OtpEdit;
+/** The furthest box that can take focus: the first empty one, or the last box when full. */
+export declare function clampCaret(index: number, filled: number, length: number): number;
+//#endregion

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

@@ -1,6 +1,7 @@
 import { Constructor } from "../../composables/hybird-prop.js";
 import { CssSizeValue } from "../../composables/css-size.js";
 import { MonoSearchValue } from "../../search/data-search.js";
+import { FieldTooltipController, FieldTooltipValue } from "../../composables/field-tooltip.js";
 import { SelectColor, SelectCssClass, SelectDataSource, SelectDisplayGroup, SelectDisplayValue, SelectDropdownOptions, SelectItem, SelectLoadMore, SelectSize, SelectValidationState, SelectValue, SelectVariant } from "./select-types.js";
 import { LateSlotWatcher } from "../../composables/light-slots.js";
 import { LitElement, TemplateResult } from "lit";
@@ -31,6 +32,8 @@ export declare class MonoSelectCoreInterface {
   label: string;
   placeholder: string;
   helperText: string;
+  tooltip: FieldTooltipValue;
+  protected readonly _tooltip: FieldTooltipController;
   validationState: SelectValidationState;
   validationMessage: string;
   errorMessage: string;

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

@@ -3,6 +3,7 @@ import { DescribedError } from "../../utils/normalize-error.js";
 import { LoadMoreMode, MonoDataSource } from "../../composables/data-source-controller.js";
 import { VisibilityProps } from "../../composables/visibility.js";
 import { MonoSearchValue } from "../../search/data-search.js";
+import { MonoTooltipOptions } from "../tooltip/tooltip-types.js";
 //#region src/components/select/select-types.d.ts
 /**
  * Sizes the popup PANEL only, independent of the field — the same object
@@ -13,6 +14,10 @@ export type SelectDropdownOptions = PanelSizeProps;
 export type SelectSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type SelectColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
 export type SelectVariant = '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 SelectLabelPosition = '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 SelectValidationPosition = 'bottom' | 'icon' | 'float';
 export type SelectValidationState = 'default' | 'valid' | 'invalid' | 'warning';
 export type SelectValue = unknown;
 export interface SelectItem {
@@ -187,6 +192,24 @@ export interface SelectProps extends VisibilityProps {
   color?: SelectColor;
   /** Visual style variant of the select. */
   variant?: SelectVariant;
+  /**
+   * 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-select-label-width`, `-label-side-gap`,
+   * `-label-notch-font-size`, `-label-notch-bg`.
+   */
+  labelPosition?: SelectLabelPosition;
+  'label-position'?: SelectLabelPosition;
+  labelposition?: SelectLabelPosition;
+  /**
+   * 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?: SelectValidationPosition;
+  'validation-position'?: SelectValidationPosition;
+  validationposition?: SelectValidationPosition;
   /** Text label shown above the select. */
   label?: string;
   /** Placeholder text shown when no value is selected. */
@@ -195,6 +218,14 @@ export interface SelectProps 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;
   /** Validation state controlling the select's appearance. */
   validationState?: SelectValidationState;
   'validation-state'?: SelectValidationState;

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

@@ -0,0 +1,5 @@
+/// <reference path="../../../vue.d.ts" />
+import { SliderColor, SliderCssClass, SliderEvents, SliderFill, SliderMark, SliderModelEvent, SliderModelEventDetail, SliderProps, SliderSize, SliderType, SliderValidationState, SliderValue, SliderValueTooltip } from "./slider-types.js";
+import { MonoSlider } from "./mono-slider.js";
+import { SliderMarkPoint, SliderPiece, SliderScale, coerceNumbers, fromRatio, markPoints, moveRun, moveThumb, nearestThumb, normalise, resolveScale, snap, stepFrom, thumbBounds, toPercent, trackPieces } from "./slider-math.js";
+export { MonoSlider, type SliderColor, type SliderCssClass, type SliderEvents, type SliderFill, type SliderMark, type SliderMarkPoint, type SliderModelEvent, type SliderModelEventDetail, type SliderPiece, type SliderProps, type SliderScale, type SliderSize, type SliderType, type SliderValidationState, type SliderValue, type SliderValueTooltip, coerceNumbers, fromRatio, markPoints, moveRun, moveThumb, nearestThumb, normalise, resolveScale, snap, stepFrom, thumbBounds, toPercent, trackPieces };

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

@@ -0,0 +1,6 @@
+/// <reference path="../../../vue.d.ts" />
+import { SliderColor, SliderCssClass, SliderEvents, SliderFill, SliderMark, SliderModelEvent, SliderModelEventDetail, SliderProps, SliderSize, SliderType, SliderValidationState, SliderValue, SliderValueTooltip } from "./slider-types.js";
+import { MonoSliderCore } from "./slider-core.js";
+import { SliderMarkPoint, SliderPiece, SliderScale, coerceNumbers, fromRatio, markPoints, moveRun, moveThumb, nearestThumb, normalise, resolveScale, snap, stepFrom, thumbBounds, toPercent, trackPieces } from "./slider-math.js";
+import { MonoSliderShadow } from "./mono-slider.shadow.js";
+export { MonoSliderCore, MonoSliderShadow, type SliderColor, type SliderCssClass, type SliderEvents, type SliderFill, type SliderMark, type SliderMarkPoint, type SliderModelEvent, type SliderModelEventDetail, type SliderPiece, type SliderProps, type SliderScale, type SliderSize, type SliderType, type SliderValidationState, type SliderValue, type SliderValueTooltip, coerceNumbers, fromRatio, markPoints, moveRun, moveThumb, nearestThumb, normalise, resolveScale, snap, stepFrom, thumbBounds, toPercent, trackPieces };

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

@@ -0,0 +1,33 @@
+import { Constructor } from "../../composables/hybird-prop.js";
+import { MonoSliderCoreInterface } from "./slider-core.js";
+import { LitElement } from "lit";
+//#region src/components/slider/mono-slider.d.ts
+declare const MonoSlider_base: Constructor<MonoSliderCoreInterface> & typeof LitElement;
+/**
+ * Light-DOM `mono-slider` (default build, `@mono-lit/helper/ui/slider`).
+ *
+ * Renders into the host (styled by the global `dist/ui/index.css`). `slot="label"` /
+ * `slot="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
+ * `MonoSliderCore`; the shadow build (`mono-shadow-slider`) shares it with native `<slot>`s.
+ */
+export declare class MonoSlider extends MonoSlider_base {
+  static styles: import("lit").CSSResult[];
+  protected createRenderRoot(): HTMLElement;
+  private _slotLabel;
+  private _slotHelper;
+  private _slotObserver?;
+  /** Capture `slot="label|helper"` 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;
+  private _placeSlot;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'mono-slider': MonoSlider;
+  }
+}
+//#endregion
+export {};

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

@@ -0,0 +1,29 @@
+import { Constructor } from "../../composables/hybird-prop.js";
+import { MonoSliderCoreInterface } from "./slider-core.js";
+import { LitElement, TemplateResult } from "lit";
+//#region src/components/slider/mono-slider.shadow.d.ts
+declare const MonoSliderShadow_base: Constructor<MonoSliderCoreInterface> & typeof LitElement;
+/**
+ * Shadow-DOM `mono-slider` (SSR build, `@mono-lit/helper/ui/shadow/slider`, tag
+ * `mono-shadow-slider`).
+ *
+ * Shares every behaviour with the light build through `MonoSliderCore`; only the label and helper
+ * regions differ: native `<slot name="label|helper">` with 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 / mono-switch).
+ */
+export declare class MonoSliderShadow extends MonoSliderShadow_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 _renderMessage(): TemplateResult;
+}
+//#endregion
+export {};

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

@@ -0,0 +1,77 @@
+import { Constructor } from "../../composables/hybird-prop.js";
+import { CssSizeValue } from "../../composables/css-size.js";
+import { FieldTooltipController, FieldTooltipValue } from "../../composables/field-tooltip.js";
+import { InputFormat } from "../input/input-format.js";
+import { SliderColor, SliderCssClass, SliderFill, SliderSize, SliderType, SliderValidationState, SliderValue, SliderValueTooltip } from "./slider-types.js";
+import { LitElement, TemplateResult, nothing } from "lit";
+//#region src/components/slider/slider-core.d.ts
+export type SliderSlotName = 'label' | 'helper';
+/** A model that holds the same numbers in the same shape is not a change (Vue re-sends arrays). */
+export declare function sliderValueHasChanged(value: unknown, old: unknown): boolean;
+/** Public surface added by the core mixin (for typing the wrappers + tag map). */
+export declare class MonoSliderCoreInterface {
+  modelValue: SliderValue | string;
+  value: SliderValue | string;
+  min: number | string;
+  max: number | string;
+  step: number | string;
+  stops?: number[] | string;
+  minGap: number | string;
+  type: SliderType;
+  marks: boolean | unknown[] | string;
+  fill: SliderFill;
+  trackGap: number | string;
+  valueTooltip: SliderValueTooltip;
+  showValue: boolean;
+  valueSeparator: string;
+  formatDisplay?: InputFormat;
+  formatLocale?: string;
+  size: SliderSize;
+  color: SliderColor;
+  label: string;
+  helperText: string;
+  tooltip: FieldTooltipValue;
+  validationState: SliderValidationState;
+  validationMessage: string;
+  error: boolean;
+  errorMessage: string;
+  success: boolean;
+  successMessage: string;
+  disabled: boolean;
+  readonly: boolean;
+  required: boolean;
+  name: string;
+  ariaLabelText?: string;
+  width?: CssSizeValue;
+  height?: CssSizeValue;
+  cssClass: SliderCssClass;
+  cssClassName: string;
+  /** The thumb positions, always as a sorted array. */
+  readonly values: number[];
+  focus(options?: FocusOptions): void;
+  blur(): void;
+  protected _hasLabelSlotState: boolean;
+  protected _hasHelperSlotState: boolean;
+  protected readonly _sliderId: string;
+  protected readonly _messageId: string;
+  protected readonly _tooltip: FieldTooltipController;
+  protected readonly _resolvedValidationState: SliderValidationState;
+  protected readonly _hasLabel: boolean;
+  protected _cls(base: string, key: keyof SliderCssClass): string;
+  protected _renderLabel(): TemplateResult | typeof nothing;
+  protected _renderLabelText(): TemplateResult | string;
+  protected _renderMessage(): TemplateResult | typeof nothing;
+  protected _renderReadout(): TemplateResult;
+}
+/**
+ * `MonoSliderCore` — everything `mono-slider` does that does not depend on light vs shadow DOM:
+ * props + hybrid aliases, the value maths (slider-math.ts), pointer + keyboard interaction,
+ * events, form binding, and the shared `render()`. The label / message regions are hooks the
+ * shadow build overrides with native `<slot>`s (the light build captures `slot="label|helper"`
+ * children and drops them into `[data-mono-slot]` placeholders, like mono-input).
+ *
+ * Thumbs are `role="slider"` elements, not native range inputs: N thumbs on one track, blocking,
+ * stops, gaps and segment drags are all beyond `<input type="range">`.
+ */
+export declare const MonoSliderCore: <T extends Constructor<LitElement>>(superClass: T) => Constructor<MonoSliderCoreInterface> & T;
+//#endregion