@mono-lit/helper 0.0.4 → 0.0.5

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

@@ -0,0 +1,188 @@
+import { VisibilityProps } from "../../composables/visibility.js";
+import { MonoTooltipOptions } from "../tooltip/tooltip-types.js";
+import { InputFormat, InputFormatCtx } from "../input/input-format.js";
+//#region src/components/slider/slider-types.d.ts
+export type SliderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type SliderColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
+/** Which way the track runs. Vertical puts `min` at the bottom. */
+export type SliderType = 'horizontal' | 'vertical';
+/**
+ * What the coloured part of the track covers.
+ * - `auto`: from `min` to the thumb with one thumb; between the first and last thumb with several.
+ * - `start`: from `min` to the FIRST thumb.
+ * - `end`: from the LAST thumb to `max`.
+ * - `none`: no fill.
+ */
+export type SliderFill = 'auto' | 'start' | 'end' | 'none';
+/** When each thumb shows its value bubble. */
+export type SliderValueTooltip = 'auto' | 'always' | 'never';
+export type SliderValidationState = 'default' | 'valid' | 'invalid' | 'warning';
+/** A slider value: one thumb is a number, several thumbs are an array (its length = the thumb count). */
+export type SliderValue = number | number[];
+/** One tick on the track. A bare number is a tick without a label. */
+export type SliderMark = number | {
+  value: number;
+  label?: string;
+};
+export type SliderModelEventDetail = {
+  /** The value in the shape it came in: a number for a single-number model, an array otherwise. */
+  modelValue: SliderValue;
+  currentValue: SliderValue;
+  oldValue: SliderValue;
+  value: SliderValue;
+  /** Always an array, whatever the model's shape. */
+  values: number[];
+  /** The thumb that moved (-1 when the whole value was replaced, e.g. a segment drag moves two). */
+  index: number;
+  name?: string;
+  sourceEvent?: Event;
+};
+export type SliderModelEvent = CustomEvent<SliderModelEventDetail>;
+export interface SliderCssClass {
+  root?: string;
+  label?: string;
+  required?: string;
+  value?: string;
+  control?: string;
+  track?: string;
+  fill?: string;
+  thumb?: string;
+  tooltip?: string;
+  marks?: string;
+  mark?: string;
+  markLabel?: string;
+  messageWrap?: string;
+  message?: string;
+}
+export interface SliderProps extends VisibilityProps {
+  /**
+   * The value: a number for one thumb, an array for several (`[20, 80]` is a range, `[2, 2, 3]`
+   * is three thumbs). The shape you pass is the shape you get back. A JSON string is accepted.
+   */
+  modelValue?: SliderValue | string;
+  'model-value'?: SliderValue | string;
+  modelvalue?: SliderValue | string;
+  /** The same as `modelValue`. */
+  value?: SliderValue | string;
+  /** Lowest value. Default 0. */
+  min?: number | string;
+  /** Highest value. Default 100. */
+  max?: number | string;
+  /** Snap interval. Default 1; `0` slides continuously. Ignored when `stops` is set. */
+  step?: number | string;
+  /**
+   * Discrete snap points: the thumb can only land on these values (`[0, 10, 25, 50, 100]`).
+   * Replaces `step`. A JSON string is accepted.
+   */
+  stops?: number[] | string;
+  /** Smallest distance kept between neighbouring thumbs. Default 0 (thumbs may stack). */
+  minGap?: number | string;
+  'min-gap'?: number | string;
+  mingap?: number | string;
+  /** `vertical` runs the track bottom (min) to top (max). Give it a `height`. */
+  type?: SliderType;
+  /**
+   * Tick marks: `true` for one at every step (or every stop), or a list of values / `{ value, label }`.
+   * Labels render under the track (beside it when vertical), drawn through `format-display` when
+   * a mark has no label of its own. A JSON string is accepted.
+   */
+  marks?: boolean | SliderMark[] | string;
+  /** What the coloured part of the track covers. Default `auto`. */
+  fill?: SliderFill;
+  /** Empty space cut out of the track around each thumb, in px (Material 3 style). Default 0. */
+  trackGap?: number | string;
+  'track-gap'?: number | string;
+  trackgap?: number | string;
+  /** When each thumb shows its value bubble. Default `auto` (hover, focus or drag). */
+  valueTooltip?: SliderValueTooltip;
+  'value-tooltip'?: SliderValueTooltip;
+  valuetooltip?: SliderValueTooltip;
+  /** Show the value at the end of the label row. Default `true`; `show-value="false"` hides it. */
+  showValue?: boolean;
+  'show-value'?: boolean;
+  showvalue?: boolean;
+  /** Joins the values in the label-row readout. Default `" – "`. */
+  valueSeparator?: string;
+  'value-separator'?: string;
+  valueseparator?: string;
+  /**
+   * How a value is DISPLAYED (readout, bubbles, mark labels, `aria-valuetext`): a pattern
+   * (`"{}%"`, `'"Rp "#,##0'`) or a function `({ value }) => string`. The model stays a number.
+   */
+  formatDisplay?: InputFormat;
+  'format-display'?: InputFormat;
+  formatdisplay?: InputFormat;
+  /** Locale a numeric `format-display` pattern is drawn with. */
+  formatLocale?: string;
+  'format-locale'?: string;
+  formatlocale?: string;
+  /** Visual size: scales the track, thumb and type. */
+  size?: SliderSize;
+  /** Accent colour of the fill and thumb. */
+  color?: SliderColor;
+  /** Label text above the slider. */
+  label?: string;
+  /** Helper text under the slider. */
+  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.
+   * This is NOT the thumb's value bubble — that is `value-tooltip`.
+   */
+  tooltip?: string | MonoTooltipOptions;
+  validationState?: SliderValidationState;
+  'validation-state'?: SliderValidationState;
+  validationstate?: SliderValidationState;
+  validationMessage?: string;
+  'validation-message'?: string;
+  validationmessage?: string;
+  error?: boolean;
+  errorMessage?: string;
+  'error-message'?: string;
+  errormessage?: string;
+  success?: boolean;
+  successMessage?: string;
+  'success-message'?: string;
+  successmessage?: string;
+  /** Disables interaction and dims the slider. */
+  disabled?: boolean;
+  /** Focusable, but the value cannot be changed. */
+  readonly?: boolean;
+  /** Marks the field required (asterisk + `aria-required`). */
+  required?: boolean;
+  /**
+   * Form field name. The element writes one hidden `<input>` per thumb, so a native `<form>`
+   * submits it (`name` for one thumb, `name[]` repeated for several).
+   */
+  name?: string;
+  /** Accessible label (each thumb adds "minimum" / "maximum" / its position). */
+  ariaLabelText?: string;
+  ariaLabel?: string;
+  'aria-label'?: string;
+  arialabel?: string;
+  /** Track length when vertical (CSS length or px number). Default 200px. */
+  height?: string | number;
+  /** Width of the whole field (CSS length or px number). */
+  width?: string | number;
+  /** Per-part class overrides for internal elements. */
+  cssClass?: SliderCssClass;
+  /** Simple root class. */
+  'css-class'?: string;
+}
+export interface SliderEvents {
+  /** While dragging / on every key press. */
+  input: SliderModelEvent;
+  /** On release / when keyboard interaction ends. */
+  change: SliderModelEvent;
+  'mno-input': SliderModelEvent;
+  mnoInput: SliderModelEvent;
+  'mno-change': SliderModelEvent;
+  mnoChange: SliderModelEvent;
+}
+//#endregion
+export type { InputFormat as SliderFormat, InputFormatCtx as SliderFormatCtx };

package/dist/src/components/tag-input/tag-input-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 { TagInputChipProps, TagInputColor, TagInputCssClass, TagInputDataSource, TagInputDisplayGroup, TagInputDisplayValue, TagInputDropdownOptions, TagInputItem, TagInputLoadMore, TagInputSize, TagInputValidationState, TagInputValue, TagInputVariant } from "./tag-input-types.js";
 import { LateSlotWatcher } from "../../composables/light-slots.js";
 import { LitElement, TemplateResult } from "lit";
@@ -43,6 +44,8 @@ export declare class MonoTagInputCoreInterface {
   label: string;
   placeholder: string;
   helperText: string;
+  tooltip: FieldTooltipValue;
+  protected readonly _tooltip: FieldTooltipController;
   validationState: TagInputValidationState;
   validationMessage: string;
   errorMessage: string;

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

@@ -4,11 +4,16 @@ import { LoadMoreMode, MonoDataSource } from "../../composables/data-source-cont
 import { VisibilityProps } from "../../composables/visibility.js";
 import { MonoSearchValue } from "../../search/data-search.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";
 //#region src/components/tag-input/tag-input-types.d.ts
 export type TagInputSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type TagInputColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
 export type TagInputVariant = '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 TagInputLabelPosition = '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 TagInputValidationPosition = 'bottom' | 'icon' | 'float';
 /**
  * Configuration for the tag chips inside the field, passed as one object:
  * `<mono-tag-input :chip.prop="{ size: 'md', shape: 'rounded', dot: true }">`.
@@ -270,6 +275,24 @@ export interface TagInputProps extends VisibilityProps {
   color?: TagInputColor;
   /** Visual style of the tag input. */
   variant?: TagInputVariant;
+  /**
+   * 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-tag-input-label-width`, `-label-side-gap`,
+   * `-label-notch-font-size`, `-label-notch-bg`.
+   */
+  labelPosition?: TagInputLabelPosition;
+  'label-position'?: TagInputLabelPosition;
+  labelposition?: TagInputLabelPosition;
+  /**
+   * 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?: TagInputValidationPosition;
+  'validation-position'?: TagInputValidationPosition;
+  validationposition?: TagInputValidationPosition;
   /**
    * Tag chip configuration — the `mono-chip` props to apply to every tag.
    * Bind it as a real property (`:chip.prop="{ size: 'md' }"`); a plain
@@ -284,6 +307,14 @@ export interface TagInputProps 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 field styling. */
   validationState?: TagInputValidationState;
   'validation-state'?: TagInputValidationState;

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

@@ -1,5 +1,6 @@
 import { Constructor } from "../../composables/hybird-prop.js";
 import { CssSizeValue } from "../../composables/css-size.js";
+import { FieldTooltipController, FieldTooltipValue } from "../../composables/field-tooltip.js";
 import { TextareaColor, TextareaCssClass, TextareaSize, TextareaValidationState, TextareaVariant } from "./textarea-types.js";
 import { LitElement, TemplateResult } from "lit";
 //#region src/components/textarea/textarea-core.d.ts
@@ -25,6 +26,8 @@ export declare class MonoTextareaCoreInterface {
   placeholder: string;
   label: string;
   helperText: string;
+  tooltip: FieldTooltipValue;
+  protected readonly _tooltip: FieldTooltipController;
   validationState: TextareaValidationState;
   validationMessage: string;
   errorMessage: string;

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

@@ -1,8 +1,13 @@
 import { VisibilityProps } from "../../composables/visibility.js";
+import { MonoTooltipOptions } from "../tooltip/tooltip-types.js";
 //#region src/components/textarea/textarea-types.d.ts
 export type TextareaSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type TextareaColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
 export type TextareaVariant = '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 TextareaLabelPosition = '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 TextareaValidationPosition = 'bottom' | 'icon' | 'float';
 export type TextareaValidationState = 'default' | 'valid' | 'invalid' | 'warning';
 export interface TextareaCssClass {
   root?: string;
@@ -40,6 +45,14 @@ export interface TextareaProps 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 field styling. */
   validationState?: TextareaValidationState;
   'validation-state'?: TextareaValidationState;
@@ -62,6 +75,24 @@ export interface TextareaProps extends VisibilityProps {
   color?: TextareaColor;
   /** Visual style of the textarea. */
   variant?: TextareaVariant;
+  /**
+   * 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-textarea-label-width`, `-label-side-gap`,
+   * `-label-notch-font-size`, `-label-notch-bg`.
+   */
+  labelPosition?: TextareaLabelPosition;
+  'label-position'?: TextareaLabelPosition;
+  labelposition?: TextareaLabelPosition;
+  /**
+   * 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?: TextareaValidationPosition;
+  'validation-position'?: TextareaValidationPosition;
+  validationposition?: TextareaValidationPosition;
   /** Disables interaction with the textarea. */
   disabled?: boolean;
   /** Makes the textarea read-only. */

package/dist/src/composables/field-bubble.d.ts

@@ -0,0 +1,34 @@
+//#region src/composables/field-bubble.d.ts
+export interface FieldBubbleOptions {
+  /** Preferred side of the anchor; flips when it doesn't fit. Default `top`. */
+  side?: 'top' | 'bottom';
+  /** `center` on the anchor (tooltip), or `start` = flush with its left edge (a message under a box). */
+  align?: 'center' | 'start';
+}
+export declare class FieldBubble {
+  /** For `id` / `aria-describedby`. */
+  readonly id: string;
+  private _anchor;
+  private _bubble;
+  private _open;
+  private _hideTimer;
+  private readonly _side;
+  private readonly _align;
+  constructor(options?: FieldBubbleOptions);
+  get isOpen(): boolean;
+  /** `ref` callback for the element the bubble points at. */
+  setAnchor: (el: Element | undefined | null) => void;
+  /** `ref` callback for the bubble itself — a new node closes the old one. */
+  setBubble: (el: Element | undefined) => void;
+  show: () => void;
+  hide: () => void;
+  scheduleHide: () => void;
+  cancelHide: () => void;
+  /** `pointerleave` handler: a touch "leaves" on lift — that would close what the tap just opened. */
+  onPointerLeave: (e: PointerEvent) => void;
+  /** `keydown` handler: Escape closes. */
+  onKeydown: (e: KeyboardEvent) => void;
+  /** Fixed-position the bubble on its side of the anchor (the other if it doesn't fit), clamped to the viewport. */
+  place: () => void;
+}
+//#endregion

package/dist/src/composables/field-icons.d.ts

@@ -14,4 +14,14 @@ export declare function chevronIcon(dir: -1 | 1): TemplateResult;
 export declare function spinnerIcon(): TemplateResult;
 /** ↻ — the retry affordance a field shows after its data source failed. */
 export declare function refreshIcon(): TemplateResult;
+/**
+ * ⓘ — the label's "more information" affordance (`tooltip` prop). The
+ * `mdi:information-outline` path, so the shadow builds draw exactly what the
+ * light build's `i-mdi-information-outline` mask paints.
+ */
+export declare function infoIcon(): TemplateResult;
+/** `validation-position="icon"` — mdi alert-circle-outline (invalid / warning). */
+export declare function alertCircleIcon(): TemplateResult;
+/** `validation-position="icon"` — mdi check-circle-outline (valid). */
+export declare function checkCircleIcon(): TemplateResult;
 //#endregion

package/dist/src/composables/field-tooltip.d.ts

@@ -0,0 +1,52 @@
+import { MonoTooltipOptions } from "../components/tooltip/tooltip-types.js";
+import { ReactiveController, ReactiveControllerHost, TemplateResult, nothing } from "lit";
+//#region src/composables/field-tooltip.d.ts
+/** What the `tooltip` prop accepts: plain text, or full tooltip options. */
+export type FieldTooltipValue = string | MonoTooltipOptions | null | undefined | false;
+/** @internal — tests: forget the cached probe so a re-mocked peer is probed again. */
+export declare function resetFieldTooltipProbe(): void;
+/** `string` → `{ content }`; anything without content → `null` (renders nothing). */
+export declare function normalizeFieldTooltip(value: FieldTooltipValue): MonoTooltipOptions | null;
+/** A click on the bubble is still inside the `<label>` and the icon: neither should react. */
+export declare const stopBubbleClick: (e: Event) => void;
+export declare class FieldTooltipController implements ReactiveController {
+  private readonly host;
+  private readonly read;
+  private _fn;
+  private _ctrl;
+  private _el;
+  /** The options last handed to the controller — keys dropped since get blanked. */
+  private _applied;
+  /** The raw prop value behind `_applied` — a string re-normalizes to a new object every time. */
+  private _raw;
+  private _connected;
+  /** The built-in bubble behind a plain-text tooltip. */
+  private readonly _bubble;
+  constructor(host: ReactiveControllerHost & {
+    readonly renderRoot?: Node;
+  }, read: () => FieldTooltipValue);
+  hostConnected(): void;
+  hostDisconnected(): void;
+  hostUpdated(): void;
+  /** The ⓘ for the end of the label row, or `nothing`. */
+  render(): TemplateResult | typeof nothing;
+  /**
+   * Plain text: the icon carries its own bubble. `aria-describedby` reads the
+   * text to screen readers on focus; hover, focus or a tap shows it, Escape
+   * dismisses it, and the pointer may move onto it without it closing.
+   */
+  private _renderSimple;
+  /**
+   * Light build: the UnoCSS `i-mdi-information-outline` mask (shipped in
+   * `ui/index.css`). Shadow build: the same path inline — the page's icon CSS
+   * cannot reach a shadow root.
+   */
+  private _icon;
+  private _ensureProbe;
+  private _setEl;
+  private _sync;
+  private _unbind;
+  /** Touch has no hover: a tap shows it, and it closes when focus leaves. */
+  private _onIconClick;
+}
+//#endregion

package/dist/src/composables/field-validation.d.ts

@@ -0,0 +1,58 @@
+import { ReactiveController, ReactiveControllerHost, TemplateResult, nothing } from "lit";
+//#region src/composables/field-validation.d.ts
+export type FieldValidationPosition = 'bottom' | 'icon' | 'float';
+/** The normalized state painted on the icon / bubbles. */
+export type FieldValidationTone = 'invalid' | 'warning' | 'valid';
+export interface FieldValidationRead {
+  position: FieldValidationPosition | string | undefined;
+  /** The component's own state name (`invalid` / `error` / `warning` / `valid` / `success` / `default`). */
+  state: string | undefined;
+  /** The validation message; empty → nothing moves. */
+  text: string | undefined | null;
+  /** While the control's own popup (dropdown, calendar) is open the float bubble stays closed. */
+  suppressed?: boolean;
+}
+export interface FieldValidationNotice {
+  position: 'icon' | 'float';
+  tone: FieldValidationTone;
+  text: string;
+}
+export declare class FieldValidationController implements ReactiveController {
+  private readonly host;
+  private readonly read;
+  private readonly getBox;
+  private readonly _iconBubble;
+  private readonly _floatBubble;
+  private _hovered;
+  private _focused;
+  constructor(host: ReactiveControllerHost & HTMLElement, read: () => FieldValidationRead, getBox: () => Element | null | undefined);
+  /** The message that moved out of the bottom row, or `null` (bottom mode / no text). */
+  get notice(): FieldValidationNotice | null;
+  /** True when the bottom row should show the helper and keep the validation text sr-only. */
+  get moved(): boolean;
+  hostConnected(): void;
+  hostDisconnected(): void;
+  hostUpdated(): void;
+  /** Re-evaluate the float bubble — for popups the host opens without a re-render (date's calendar). */
+  refresh(): void;
+  /**
+   * `icon` mode: the state icon for inside the box (before the clear button /
+   * actions). `anchored` wraps it in a zero-height `[mono-validation-anchor]`
+   * — for the textarea, whose box can't hold children.
+   */
+  renderIcon(options?: {
+    anchored?: boolean;
+  }): TemplateResult | typeof nothing;
+  /** `float` mode: the bubble that floats under the box while the field is hovered or focused. */
+  renderFloat(): TemplateResult | typeof nothing;
+  /** Light build: UnoCSS mask icons; shadow build: inline SVG (page icon CSS can't reach a shadow root). */
+  private _glyph;
+  /** Touch has no hover: a tap shows the tip — and must not open / focus the control underneath. */
+  private _onIconClick;
+  private _onEnter;
+  private _onLeave;
+  private _onFocusIn;
+  private _onFocusOut;
+  private _syncFloat;
+}
+//#endregion

package/dist/src/composables/popup-portal.d.ts

@@ -188,6 +188,18 @@ export declare class PopupPortalController implements ReactiveController, PopupL
    * in the library asks this method.
    */
   containsInPath(path: EventTarget[]): boolean;
+  /**
+   * 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: EventTarget[]): boolean;
+  /**
+   * 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: EventTarget[]): boolean;
   /**
    * True when the path passes through a popup opened from INSIDE this one
    * (at any depth) — not this popup's own panel.

package/dist/src/composables/popup-stack.d.ts

@@ -38,6 +38,12 @@ export interface PopupLayer {
    * underneath the very dialog it belongs to.
    */
   readonly pinnedZ?: number;
+  /**
+   * True when an event's composed path lands inside THIS layer — its own
+   * surface and any popup opened from within it, never the layers above it.
+   * What `pathInLayerAbove` asks each layer stacked over another one.
+   */
+  containsEventPath?(path: EventTarget[]): boolean;
 }
 /** Add a layer to the top of the stack (call on open). */
 export declare function registerPopupLayer(layer: PopupLayer): void;
@@ -69,4 +75,19 @@ export declare function setExternalScrollLock(owner: object, wanted: boolean): v
  * own type — filter the returned list by `instanceof`.
  */
 export declare function getOpenPopupLayers(): readonly PopupLayer[];
+/**
+ * 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.
+ */
+export declare function pathInLayerAbove(layer: PopupLayer, path: EventTarget[]): boolean;
 //#endregion

package/dist/src/entries/index.d.ts

@@ -14,6 +14,7 @@ import { MonoChartAgg, MonoChartAggregateCtx, MonoChartController, MonoChartData
 import { arrayToODataString, arrayToTree, odataStringToArray, treeToArray } from "../components/filter/filter-odata.js";
 import { MonoChartOdataRequest, buildChartApply, buildChartOdataRequest, composeApply } from "../components/chart/chart-odata.js";
 import { controlMonoChart as monoChart } from "../components/chart/mono-data-chart.js";
+import { MonoTooltipColor, MonoTooltipContent, MonoTooltipController, MonoTooltipGlobal, MonoTooltipGlobalOptions, MonoTooltipOptions, MonoTooltipPlacement, MonoTooltipSize, MonoTooltipTarget, MonoTooltipTrigger, MonoTooltipVariant } from "../components/tooltip/tooltip-types.js";
 import { MonoDataDropdownOptions, MonoDropdownController, MonoDropdownItem, controlMonoDataDropdown as monoDataDropdown } from "../components/dropdown-table/mono-data-dropdown.js";
 import { controlMonoFilterBuilder as monoFilterBuilder } from "../components/filter/filter-builder.js";
 import { DEFAULT_TEXTS, OPERATOR_ARITY, operatorsFor } from "../components/filter/filter-operators.js";
@@ -24,7 +25,6 @@ import { controlMonoModal as monoModal } from "../components/modal/mono-modal-co
 import { MonoArraySourceOptions, monoArraySource } from "../components/table/array-source.js";
 import { FieldSegment, ODataClause, ParsedFieldPath, getFieldValue, isPath, mergePatch, parseFieldPath, setFieldValue, toODataClause, toODataSelector } from "../search/field-path.js";
 import { TableCheckboxProps, TableDetailProps, TableInfoProps, TableLoadingProps, TablePageSizeProps, TablePagingProps, TableSearchProps, TableSortProps, TableSummaryProps, TableThProps, TableThSort } from "../components/table/table-types.js";
-import { MonoTooltipColor, MonoTooltipContent, MonoTooltipController, MonoTooltipGlobal, MonoTooltipGlobalOptions, MonoTooltipOptions, MonoTooltipPlacement, MonoTooltipSize, MonoTooltipTarget, MonoTooltipTrigger, MonoTooltipVariant } from "../components/tooltip/tooltip-types.js";
 import { controlMonoTooltip, monoTooltip } from "../components/tooltip/control-tooltip.js";
 import { createMonoTooltip, destroyAllMonoTooltips, resetMonoTooltip } from "../components/tooltip/tooltip-declarative.js";
 import { getMonoTooltipGlobal } from "../components/tooltip/tooltip-config.js";

package/dist/src/entries/index.node.d.ts

@@ -14,6 +14,7 @@ import { MonoChartAgg, MonoChartAggregateCtx, MonoChartController, MonoChartData
 import { arrayToODataString, arrayToTree, odataStringToArray, treeToArray } from "../components/filter/filter-odata.js";
 import { MonoChartOdataRequest, buildChartApply, buildChartOdataRequest, composeApply } from "../components/chart/chart-odata.js";
 import { controlMonoChart as monoChart } from "../components/chart/mono-data-chart.js";
+import { MonoTooltipColor, MonoTooltipContent, MonoTooltipController, MonoTooltipGlobal, MonoTooltipGlobalOptions, MonoTooltipOptions, MonoTooltipPlacement, MonoTooltipSize, MonoTooltipTarget, MonoTooltipTrigger, MonoTooltipVariant } from "../components/tooltip/tooltip-types.js";
 import { MonoDataDropdownOptions, MonoDropdownController, MonoDropdownItem, controlMonoDataDropdown as monoDataDropdown } from "../components/dropdown-table/mono-data-dropdown.js";
 import { controlMonoFilterBuilder as monoFilterBuilder } from "../components/filter/filter-builder.js";
 import { DEFAULT_TEXTS, OPERATOR_ARITY, operatorsFor } from "../components/filter/filter-operators.js";
@@ -24,7 +25,6 @@ import { controlMonoModal as monoModal } from "../components/modal/mono-modal-co
 import { MonoArraySourceOptions, monoArraySource } from "../components/table/array-source.js";
 import { FieldSegment, ODataClause, ParsedFieldPath, getFieldValue, isPath, mergePatch, parseFieldPath, setFieldValue, toODataClause, toODataSelector } from "../search/field-path.js";
 import { TableCheckboxProps, TableDetailProps, TableInfoProps, TableLoadingProps, TablePageSizeProps, TablePagingProps, TableSearchProps, TableSortProps, TableSummaryProps, TableThProps, TableThSort } from "../components/table/table-types.js";
-import { MonoTooltipColor, MonoTooltipContent, MonoTooltipController, MonoTooltipGlobal, MonoTooltipGlobalOptions, MonoTooltipOptions, MonoTooltipPlacement, MonoTooltipSize, MonoTooltipTarget, MonoTooltipTrigger, MonoTooltipVariant } from "../components/tooltip/tooltip-types.js";
 import { controlMonoTooltip, monoTooltip } from "../components/tooltip/control-tooltip.js";
 import { createMonoTooltip, destroyAllMonoTooltips, resetMonoTooltip } from "../components/tooltip/tooltip-declarative.js";
 import { getMonoTooltipGlobal } from "../components/tooltip/tooltip-config.js";

package/dist/ssr-lit/runtime/components/LitWrapper.vue

@@ -1,11 +1,11 @@
-<script>
-import { h, defineComponent, defineAsyncComponent } from "vue";
-import LitWrapperClient from "./LitWrapperClient.vue";
-const LitWrapperServer = defineAsyncComponent(() => import("./LitWrapperServer.vue"));
-export default defineComponent({
-  name: "LitWrapper",
-  render() {
-    return h(import.meta.server ? LitWrapperServer : LitWrapperClient, this.$slots.default);
-  }
-});
-</script>
+<script>
+import { h, defineComponent, defineAsyncComponent } from "vue";
+import LitWrapperClient from "./LitWrapperClient.vue";
+const LitWrapperServer = defineAsyncComponent(() => import("./LitWrapperServer.vue"));
+export default defineComponent({
+  name: "LitWrapper",
+  render() {
+    return h(import.meta.server ? LitWrapperServer : LitWrapperClient, this.$slots.default);
+  }
+});
+</script>

package/dist/ssr-lit/runtime/components/LitWrapperClient.vue

@@ -1,11 +1,11 @@
-<script>
-import { defineComponent } from "vue";
-export default defineComponent({
-  setup(_, context) {
-    return () => context.slots.default?.()?.[0];
-  },
-  mounted() {
-    this.$el?.removeAttribute?.("defer-hydration");
-  }
-});
-</script>
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  setup(_, context) {
+    return () => context.slots.default?.()?.[0];
+  },
+  mounted() {
+    this.$el?.removeAttribute?.("defer-hydration");
+  }
+});
+</script>