@ngneers/controls 0.0.1-next.0 → 0.0.1-next.2

package/types/ngneers-controls-api-ng.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Provider, ModelSignal, OutputEmitterRef, Signal, EnvironmentProviders, ComponentRef, InputSignal, InputSignalWithTransform, Injector, ElementRef, OnDestroy } from '@angular/core';
+import { InjectionToken, Provider, ModelSignal, OutputEmitterRef, Signal, EnvironmentProviders, ComponentRef, InputSignal, InputSignalWithTransform, ElementRef, Injector, OnDestroy } from '@angular/core';
 import { Translations } from '@ngneers/controls/i18n';
 import { TimeSpan, LogLevel, DeepPartial } from '@ngneers/controls/utils';
 import { Placement, Strategy, Middleware, ComputePositionReturn, Side, Alignment } from '@floating-ui/dom';
@@ -150,13 +150,6 @@ type ElementArray = Signal<ReadonlyArray<HTMLElement | ElementRef<HTMLElement>>>
 type ElementSingle = Signal<HTMLElement | ElementRef<HTMLElement> | undefined> | HTMLElement | Document | ElementRef<HTMLElement>;
 declare function elementSizeSignal(element: ElementSingle, active?: Signal<boolean>): Signal<Size>;
 declare function elementsSizesSignal(element: ElementArray, active?: Signal<boolean>): Signal<readonly Size[]>;
-/**
- * @todo use dom event functions directly and remove this function
- * @deprecated use dom event functions instead
- */
-declare function abortSignalOnDestroy(options?: {
-    injector?: Injector;
-}): AbortSignal;
 /**
  * Creates an Observable that emits the latest event of the specified type from the given DOM element.
  *
@@ -201,6 +194,16 @@ declare function injectThemeControlKinds<T extends string>(controlName: T): Sign
  * `NgnCustomTypes`.
  * @returns A signal of the available colors.
  */
+/**
+ * Reads the explicit per-control default `color`/`kind` from the active theme's
+ * `meta.defaults`, as a reactive signal. Empty object when none is configured —
+ * callers then fall back to the positional (first-array-entry) default.
+ * @param controlName The name of the control to get defaults for.
+ */
+declare function injectThemeControlDefaults<T extends string>(controlName: T): Signal<{
+    color?: CustomColor;
+    kind?: CustomKind<T>;
+}>;
 declare function injectThemeColors(controlName?: string): Signal<CustomColor[]>;
 
 type DeviceType = 'mobile' | 'desktop' | 'tablet';
@@ -360,5 +363,5 @@ declare class ThemeService implements OnDestroy {
     static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
 }
 
-export { COLOR_SCHEME_STORAGE, COLOR_SCHEME_STORAGE_KEY, COLOR_SCHEME_VALUES, ColorSchemeService, NGN_CONFIG, NgnStorage, NgnTemplate, Platform, ThemeService, abortSignalOnDestroy, autoPositionElement, colorSchemeInitScript, defaultNgnConfig, domEventHandler, domEventObservable, domEventSignal, elementSizeSignal, elementsSizesSignal, getAppliedClasses, injectTheme, injectThemeColors, injectThemeControlKinds, injectThemeTemplate, positionElement, provideNgnConfig, provideNgnControls, roundByDpr, setComponentInput, splitPlacement, templateTypeFn, templateTypesFn, themeTemplateToTemplateInfo, toModalCloseBy, toPopoverCloseBy, withAutoColorScheme };
+export { COLOR_SCHEME_STORAGE, COLOR_SCHEME_STORAGE_KEY, COLOR_SCHEME_VALUES, ColorSchemeService, NGN_CONFIG, NgnStorage, NgnTemplate, Platform, ThemeService, autoPositionElement, colorSchemeInitScript, defaultNgnConfig, domEventHandler, domEventObservable, domEventSignal, elementSizeSignal, elementsSizesSignal, getAppliedClasses, injectTheme, injectThemeColors, injectThemeControlDefaults, injectThemeControlKinds, injectThemeTemplate, positionElement, provideNgnConfig, provideNgnControls, roundByDpr, setComponentInput, splitPlacement, templateTypeFn, templateTypesFn, themeTemplateToTemplateInfo, toModalCloseBy, toPopoverCloseBy, withAutoColorScheme };
 export type { Anchor, AppliedThemeClassCfg, AutoPositioningHandle, CloseBy, ColorScheme, ColorSchemeStorage, ColorSchemeStorageOption, ControlTemplateInfo, DeviceType, NgnConfig, NgnConfigInit, NgnFeature, NgnStorageKind, Openable, Point, PopoverCloseBy, PositioningOptions, PositioningSizeConstraints, Size, TooltipOptions };

package/types/ngneers-controls-badge.d.ts

@@ -0,0 +1,67 @@
+import * as _angular_core from '@angular/core';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { NgnBase } from '@ngneers/controls/base';
+
+/** One of the four corners the badge indicator can sit in. */
+type BadgePosition = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
+/**
+ * @internal
+ * The overlay element rendered by the {@link NgnBadge} directive. Not intended
+ * to be used directly in templates.
+ * @category control
+ */
+declare class NgnBadgeIndicator extends NgnBase<'badge'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"badge", ["root", "dot", "circular", "top-end", "top-start", "bottom-end", "bottom-start"], readonly []>>;
+    /** The rendered badge text (already max-clamped by the directive). */
+    readonly text: _angular_core.InputSignal<string>;
+    /** Whether to render as a dot (no text). @default false */
+    readonly dot: _angular_core.InputSignal<boolean>;
+    /** Which corner the badge sits in. @default top-end */
+    readonly position: _angular_core.InputSignal<BadgePosition>;
+    /** Position on a circular anchor's edge (~45°) instead of the box corner. @default false */
+    readonly circular: _angular_core.InputSignal<boolean>;
+    /** CSS color value or `var(...)` reference for the badge fill. */
+    readonly bgColor: _angular_core.InputSignal<string | undefined>;
+    protected readonly display: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnBadgeIndicator, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnBadgeIndicator, "ngn-badge-indicator", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "circular": { "alias": "circular"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Overlays a small badge (count, text, or dot) onto its host element — an icon,
+ * button, or avatar. The badge is injected as an absolutely-positioned overlay,
+ * so the host is made `position: relative` when it is currently static.
+ */
+declare class NgnBadge {
+    private readonly _vcr;
+    private readonly _host;
+    private readonly _destroyRef;
+    private _ref?;
+    /** Badge content. A number is clamped by {@link max}; empty hides the badge unless {@link dot}. */
+    readonly value: _angular_core.InputSignal<string | number | undefined>;
+    /** Clamp a numeric {@link value} to `"{max}+"` when it exceeds this. */
+    readonly max: _angular_core.InputSignal<number | undefined>;
+    /** Render a dot with no text, ignoring {@link value}. @default false */
+    readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show the badge even when {@link value} is `0`. @default false */
+    readonly showZero: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Which corner the badge sits in. @default top-end */
+    readonly position: _angular_core.InputSignal<BadgePosition>;
+    /** CSS color value (hex/rgb) or `var(...)` reference for the badge fill. */
+    readonly color: _angular_core.InputSignal<string | undefined>;
+    /** Hide the badge without removing the host. @default false */
+    readonly hidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Anchor on a circular host's edge (~45°) instead of the box corner (e.g. avatars). @default false */
+    readonly circular: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly _platform;
+    constructor();
+    /** Returns the string to render, or `null` when the badge should not show. */
+    private resolveText;
+    private teardown;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnBadge, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnBadge, "[ngnBadge], [ngnBadgeDot]", never, { "value": { "alias": "ngnBadge"; "required": false; "isSignal": true; }; "max": { "alias": "ngnBadgeMax"; "required": false; "isSignal": true; }; "dot": { "alias": "ngnBadgeDot"; "required": false; "isSignal": true; }; "showZero": { "alias": "ngnBadgeShowZero"; "required": false; "isSignal": true; }; "position": { "alias": "ngnBadgePosition"; "required": false; "isSignal": true; }; "color": { "alias": "ngnBadgeColor"; "required": false; "isSignal": true; }; "hidden": { "alias": "ngnBadgeHidden"; "required": false; "isSignal": true; }; "circular": { "alias": "ngnBadgeCircular"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgnBadge, NgnBadgeIndicator };
+export type { BadgePosition };

package/types/ngneers-controls-base.d.ts

@@ -63,6 +63,13 @@ declare abstract class NgnBase<T extends ControlName | null> {
      * Overridden with `true` by input, mask-input, calendar, select, ….
      */
     readonly isFieldControl: boolean;
+    /**
+     * Whether the control holds no user-entered content. Field controls override
+     * this from their eager entry state — not {@link isFieldControl}'s `value`,
+     * which can lag behind typing until the entry is valid (mask-input, calendar)
+     * — so a wrapping `ngn-input-field` can float its label reliably.
+     */
+    readonly empty: Signal<boolean>;
     /**
      * Hook for placing focus/selection from a pointer event that originated in the
      * surrounding field (or the control itself). The default does nothing and
@@ -238,6 +245,19 @@ declare function getNgnInstance(element: HTMLElement): FullAnyNgnBase;
 declare function getNearestNgnInstance<T extends Type<Omit<AnyNgnBase, 'kind'>>>(element: HTMLElement, kind?: T): InstanceType<T> | null;
 declare function getNearestNgnInstanceSig<T extends Type<AnyNgnBase>>(element: HTMLElement, kind?: T): Signal<InstanceType<T> | null>;
 
+/**
+ * When a control surfaces its invalid styling (border / `aria-invalid`):
+ * - `touched` — after the user has blurred the control (default).
+ * - `dirty` — once the value has changed.
+ * - `immediate` — as soon as it is invalid (e.g. explicit `[invalid]`).
+ * - `never` — never style invalid.
+ */
+type NgnInvalidTrigger = 'touched' | 'dirty' | 'immediate' | 'never';
+/**
+ * Gates a raw invalid flag by an {@link NgnInvalidTrigger} against the given
+ * interaction state. Shared by {@link ValueControlBase} and `NgnInput`.
+ */
+declare function resolveInvalidState(invalid: boolean, trigger: NgnInvalidTrigger, touched: boolean, dirty: boolean): boolean;
 declare abstract class ValueControlBase<C extends ControlName, T> extends NgnBase<C> implements FormValueControl<T> {
     /**
      * The label for the control.
@@ -254,10 +274,26 @@ declare abstract class ValueControlBase<C extends ControlName, T> extends NgnBas
      */
     readonly inputId: _angular_core.InputSignal<string>;
     /**
-     * Explicitly apply invalid state styling
+     * The raw invalid flag. A bound signal-forms field writes it in from the
+     * field's validity (`FormUiControl` `invalid` input); the app may also set it
+     * explicitly. Whether it actually *shows* is gated by {@link invalidOn} — map
+     * the theme's invalid part (and any `aria-invalid`) to {@link invalidState},
+     * not this.
      * @default false
      */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * When the control surfaces its invalid styling. The control owns this timing
+     * (independent of `ngnErrors`, which governs only the error *message*).
+     * @default touched
+     */
+    readonly invalidOn: _angular_core.InputSignal<NgnInvalidTrigger>;
+    /**
+     * The invalid state the theme should render: {@link invalid} gated by
+     * {@link invalidOn} against {@link touched} / {@link dirty}. Controls map their
+     * theme `invalid` part (and any `aria-invalid`) to this.
+     */
+    protected readonly invalidState: _angular_core.Signal<boolean>;
     /**
      * The value of the control.
      */
@@ -267,11 +303,32 @@ declare abstract class ValueControlBase<C extends ControlName, T> extends NgnBas
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The touched state. A bound signal-forms field writes it in via the
+     * `FormUiControl` `touched` input; the control writes it out through
+     * {@link markTouched} on blur.
+     */
     readonly touched: _angular_core.ModelSignal<boolean>;
     readonly dirty: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Emits when focus leaves the control (the `FormUiControl` `touch` contract).
+     * The `Field` directive listens to this to mark the bound field touched — it's
+     * the only channel signal forms observes for blur, so plain `touched` writes
+     * don't reach the field.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Marks the control touched: flips {@link touched} for local / no-form
+     * consumers (e.g. `ngnErrors`) and emits {@link touch} so a bound signal-forms
+     * field is marked touched too. Each control calls this from its own blur/close
+     * logic — composite controls with an out-of-DOM overlay (select, calendar)
+     * call it from their popover-aware blur, so opening the overlay isn't mistaken
+     * for a blur.
+     */
+    protected markTouched(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ValueControlBase<any, any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ValueControlBase<any, any>, never, never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "labelledBy"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ValueControlBase<any, any>, never, never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "labelledBy"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "invalidOn": { "alias": "invalidOn"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
-export { NGN_CONTROL, NgnBase, NgnPt, NgnPtEngine, ValueControlBase, getNearestNgnInstance, getNearestNgnInstanceSig, getNgnInstance, provideSelf, setNgnInstance };
-export type { AnyNgnBase, AnyNgnPassthrough, DepClass, FullAnyNgnBase, NgnBaseSafe, NgnPassthrough, PassthroughValue };
+export { NGN_CONTROL, NgnBase, NgnPt, NgnPtEngine, ValueControlBase, getNearestNgnInstance, getNearestNgnInstanceSig, getNgnInstance, provideSelf, resolveInvalidState, setNgnInstance };
+export type { AnyNgnBase, AnyNgnPassthrough, DepClass, FullAnyNgnBase, NgnBaseSafe, NgnInvalidTrigger, NgnPassthrough, PassthroughValue };

package/types/ngneers-controls-breadcrumb.d.ts

@@ -182,6 +182,9 @@ declare class NgnBreadcrumb extends BreadcrumbTemplates {
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };
@@ -239,6 +242,8 @@ declare class NgnBreadcrumb extends BreadcrumbTemplates {
             selectedCount: string;
             page: string;
             resultCount: string;
+            retry: string;
+            loadError: string;
         };
         state: {
             loading: string;
@@ -247,6 +252,18 @@ declare class NgnBreadcrumb extends BreadcrumbTemplates {
             error: string;
             cancelled: string;
         };
+        errors: {
+            pending: string;
+            required: string;
+            email: string;
+            minlength: string;
+            maxlength: string;
+            minLength: string;
+            maxLength: string;
+            min: string;
+            max: string;
+            pattern: string;
+        };
     }, "_">;
     /**
      * The breadcrumb entries to render, ordered from root to the current page.

package/types/ngneers-controls-calendar.d.ts

@@ -261,6 +261,9 @@ declare class NgnCalendar extends CalendarTemplates {
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };
@@ -318,6 +321,8 @@ declare class NgnCalendar extends CalendarTemplates {
             selectedCount: string;
             page: string;
             resultCount: string;
+            retry: string;
+            loadError: string;
         };
         state: {
             loading: string;
@@ -326,6 +331,18 @@ declare class NgnCalendar extends CalendarTemplates {
             error: string;
             cancelled: string;
         };
+        errors: {
+            pending: string;
+            required: string;
+            email: string;
+            minlength: string;
+            maxlength: string;
+            minLength: string;
+            maxLength: string;
+            min: string;
+            max: string;
+            pattern: string;
+        };
     }, "_">;
     readonly isFieldControl = true;
     protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"calendar", ["root", "inline", "invalid", "details", "header", "navigation", "days", "week-day", "day", "day-selected", "day-today", "day-other-month", "months", "month", "time", "input-field"], readonly [{
@@ -345,7 +362,7 @@ declare class NgnCalendar extends CalendarTemplates {
         readonly template: _ngneers_controls_themes.ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
     }, {
         readonly class: "current-month";
-        readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+        readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "empty", "placeholder", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
             readonly class: "popover";
             readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
         }, {
@@ -359,7 +376,7 @@ declare class NgnCalendar extends CalendarTemplates {
             }]>;
         }, {
             readonly class: "filter";
-            readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
                 readonly class: "input";
                 readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
                 readonly projected: true;
@@ -367,7 +384,7 @@ declare class NgnCalendar extends CalendarTemplates {
         }]>;
     }, {
         readonly class: "current-year";
-        readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+        readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "empty", "placeholder", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
             readonly class: "popover";
             readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
         }, {
@@ -381,7 +398,7 @@ declare class NgnCalendar extends CalendarTemplates {
             }]>;
         }, {
             readonly class: "filter";
-            readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
                 readonly class: "input";
                 readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
                 readonly projected: true;
@@ -389,19 +406,20 @@ declare class NgnCalendar extends CalendarTemplates {
         }]>;
     }, {
         readonly class: "current-month-field";
-        readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+        readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
             readonly class: "input";
             readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
             readonly projected: true;
         }]>;
     }, {
         readonly class: "current-year-field";
-        readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+        readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
             readonly class: "input";
             readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
             readonly projected: true;
         }]>;
     }]>>;
+    readonly empty: Signal<boolean>;
     protected get anchorElement(): HTMLElement;
     protected readonly year: _angular_core.WritableSignal<number>;
     protected readonly month: _angular_core.WritableSignal<number>;

package/types/ngneers-controls-chip.d.ts

@@ -107,6 +107,9 @@ declare class NgnChip extends NgnBase<'chip'> {
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };
@@ -164,6 +167,8 @@ declare class NgnChip extends NgnBase<'chip'> {
             selectedCount: string;
             page: string;
             resultCount: string;
+            retry: string;
+            loadError: string;
         };
         state: {
             loading: string;
@@ -172,6 +177,18 @@ declare class NgnChip extends NgnBase<'chip'> {
             error: string;
             cancelled: string;
         };
+        errors: {
+            pending: string;
+            required: string;
+            email: string;
+            minlength: string;
+            maxlength: string;
+            minLength: string;
+            maxLength: string;
+            min: string;
+            max: string;
+            pattern: string;
+        };
     }, "_">;
     /**
      * Set whether the chip can be closed (removed).

package/types/ngneers-controls-color-picker.d.ts

@@ -0,0 +1,119 @@
+import * as _angular_core from '@angular/core';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import { Openable, Anchor } from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { ValueControlBase } from '@ngneers/controls/base';
+import { NgnDragInfo } from '@ngneers/controls/directives';
+import { ColorFormat, HSVA } from '@ngneers/controls/utils';
+
+/**
+ * @category control
+ */
+declare class NgnColorPicker extends ValueControlBase<'color-picker', string> implements Openable {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"color-picker", ["root", "inline", "trigger", "preview", "panel", "sv-area", "sv-thumb", "hue-track", "hue-thumb", "alpha-track", "alpha-thumb", "swatches", "swatch", "fields", "channels", "channel", "channel-hex", "channel-label", "format-toggle", "invalid", "disabled"], readonly [{
+        readonly class: "popover";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+    }]>>;
+    private readonly _svArea;
+    private readonly _hueTrack;
+    private readonly _alphaTrack;
+    private readonly _popover;
+    /** Output/display format. @default hex */
+    readonly format: _angular_core.InputSignal<ColorFormat>;
+    /** Show the alpha channel. @default true */
+    readonly alpha: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Preset swatch colors. */
+    readonly swatches: _angular_core.InputSignal<string[] | undefined>;
+    /** Render the panel inline instead of behind a trigger. @default false */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Headless mode: render no trigger of its own and open in a popover anchored to
+     * {@link anchor}, driven imperatively via {@link show}/{@link hide}/{@link toggle}
+     * (like `ngn-menu`). Requires {@link anchor}. @default false
+     */
+    readonly popover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The external element the headless popover anchors to. Required when {@link popover} is set. */
+    readonly anchor: _angular_core.InputSignal<Anchor | undefined>;
+    /** Open state of the popover (headless or built-in trigger); two-way bindable. @default false */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Emits when the popover has fully closed (part of the `Openable` contract). */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /** Internal HSVA source of truth. */
+    protected readonly hsva: _angular_core.WritableSignal<HSVA>;
+    /** The format the text field/toggle currently displays; seeded from {@link format}. */
+    protected readonly activeFormat: _angular_core.WritableSignal<ColorFormat>;
+    /** Current color as a CSS string for previews. */
+    protected readonly cssColor: _angular_core.Signal<string>;
+    /** The last value string this component itself wrote via {@link commit}. */
+    private _lastCommitted;
+    /**
+     * The raw text the user is currently typing in the hex/value field, or `null`
+     * when not editing. While editing, the field shows this verbatim (so a short
+     * form like `#ff0` isn't reformatted mid-typing) even though the color updates
+     * live from it.
+     */
+    protected readonly editText: _angular_core.WritableSignal<string | null>;
+    constructor();
+    /** Open the popover (headless or built-in trigger). */
+    show(): void;
+    /** Close the popover. */
+    hide(): void;
+    /** Toggle the popover. */
+    toggle(): void;
+    /** Commit the current HSVA to the model value, formatted in the currently active format. */
+    private commit;
+    /**
+     * Set the color from an RGBA and commit, preserving the current hue when the new color is
+     * achromatic (s=0 or v=0). Otherwise the RGB→HSV round-trip collapses hue to 0, so it would be
+     * lost the moment a channel/swatch edit lands on a grey/black — mirrors the SV-drag path, which
+     * keeps hue in the `hsva` signal. `alpha` defaults to the incoming rgba's alpha.
+     */
+    private setFromRgba;
+    protected onSvDrag(info: NgnDragInfo): void;
+    protected onHueDrag(info: NgnDragInfo): void;
+    protected onAlphaDrag(info: NgnDragInfo): void;
+    protected selectSwatch(color: string): void;
+    protected toggleOpen(): void;
+    /** Popover `closed` handler: run the blur check and re-emit for consumers. */
+    protected onPopoverClosed(): void;
+    protected potentiallyBlurred(): void;
+    protected cycleFormat(): void;
+    protected readonly textValue: _angular_core.Signal<string>;
+    /**
+     * What the hex/value field displays: the user's in-progress text while editing,
+     * otherwise the canonical formatted value.
+     */
+    protected readonly displayText: _angular_core.Signal<string>;
+    /**
+     * Per-keystroke handler: keep the field showing the raw text, but update the color
+     * live from it when it parses. The field is NOT reformatted while typing.
+     */
+    protected onHexInput(text: string | null): void;
+    /** Commit handler (change / Enter / blur): apply the final text and normalize the field. */
+    protected onHexCommit(text: string | null): void;
+    /** RGBA channel values for the RGB boxes. r/g/b are 0–255. */
+    protected readonly rgbaChannels: _angular_core.Signal<{
+        r: number;
+        g: number;
+        b: number;
+    }>;
+    /** HSL channel values for the HSL boxes. h 0–360, s/l 0–100 (%). */
+    protected readonly hslChannels: _angular_core.Signal<{
+        h: number;
+        s: number;
+        l: number;
+    }>;
+    /** Alpha as an integer percentage (0–100) for the alpha box. */
+    protected readonly alphaPercent: _angular_core.Signal<number>;
+    protected setRgbChannel(ch: 'r' | 'g' | 'b', value: number | null): void;
+    protected setHslChannel(ch: 'h' | 's' | 'l', value: number | null): void;
+    protected setAlphaPercent(value: number | null): void;
+    protected readonly svThumbLeft: _angular_core.Signal<number>;
+    protected readonly svThumbTop: _angular_core.Signal<number>;
+    protected readonly hueThumbLeft: _angular_core.Signal<number>;
+    protected readonly alphaThumbLeft: _angular_core.Signal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnColorPicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnColorPicker, "ngn-color-picker", never, { "format": { "alias": "format"; "required": false; "isSignal": true; }; "alpha": { "alias": "alpha"; "required": false; "isSignal": true; }; "swatches": { "alias": "swatches"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "popover": { "alias": "popover"; "required": false; "isSignal": true; }; "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, never, true, never>;
+}
+
+export { NgnColorPicker };

package/types/ngneers-controls-dialog.d.ts

@@ -214,6 +214,9 @@ declare class NgnDialog<T, Buttons extends NgnActionButtonConfig<T extends Promp
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };
@@ -271,6 +274,8 @@ declare class NgnDialog<T, Buttons extends NgnActionButtonConfig<T extends Promp
             selectedCount: string;
             page: string;
             resultCount: string;
+            retry: string;
+            loadError: string;
         };
         state: {
             loading: string;
@@ -279,6 +284,18 @@ declare class NgnDialog<T, Buttons extends NgnActionButtonConfig<T extends Promp
             error: string;
             cancelled: string;
         };
+        errors: {
+            pending: string;
+            required: string;
+            email: string;
+            minlength: string;
+            maxlength: string;
+            minLength: string;
+            maxLength: string;
+            min: string;
+            max: string;
+            pattern: string;
+        };
     }, "_">;
     protected readonly headerId: string;
     private readonly _dialogElement;

package/types/ngneers-controls-directives.d.ts

@@ -151,6 +151,10 @@ declare class NgnResizable {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnResizable, "[ngnResizable]", never, { "ngnResizable": { "alias": "ngnResizable"; "required": false; "isSignal": true; }; "ngnResizableSizeLimits": { "alias": "ngnResizableSizeLimits"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/** Remaining scrollable distance to the end, clamped at 0. Pure for testing. */
+declare function computeDistanceFromEnd(scrollSize: number, clientSize: number, scrollPos: number): number;
+/** Whether the current end-distance is within the trigger threshold. Pure for testing. */
+declare function isWithinEndZone(distanceFromEnd: number, threshold: number): boolean;
 declare class NgnScrollAmount {
     private readonly _el;
     /**
@@ -158,14 +162,39 @@ declare class NgnScrollAmount {
      * dimensions are tracked on this element instead of the host element.
      */
     readonly container: _angular_core.InputSignal<HTMLElement | undefined>;
+    /**
+     * Distance (px) from the end at which {@link endReached} fires.
+     * @default 0
+     */
+    readonly endThreshold: _angular_core.InputSignal<number>;
+    /**
+     * Fires once when scrolling crosses within {@link endThreshold} of the bottom
+     * (edge-triggered). For simple "load more" lists; guarded consumers should
+     * read {@link distanceFromEnd} instead.
+     */
+    readonly endReached: _angular_core.OutputEmitterRef<void>;
     readonly scrollTarget: _angular_core.Signal<HTMLElement>;
     readonly scrollTop: _angular_core.WritableSignal<number>;
     readonly scrollLeft: _angular_core.WritableSignal<number>;
+    private readonly _containerSize;
+    private readonly _hostSize;
+    readonly scrollHeight: _angular_core.WritableSignal<number>;
+    readonly clientHeight: _angular_core.WritableSignal<number>;
+    readonly scrollWidth: _angular_core.WritableSignal<number>;
+    readonly clientWidth: _angular_core.WritableSignal<number>;
+    /** Remaining vertical scroll distance to the bottom (px), clamped at 0. */
+    readonly distanceFromEnd: _angular_core.Signal<number>;
+    /** Remaining horizontal scroll distance to the right edge (px), clamped at 0. */
+    readonly distanceFromRight: _angular_core.Signal<number>;
     private readonly _scrollEvent;
+    /** Syncs the vertical scroll-size signals. */
+    private _syncVerticalGeometry;
+    /** Syncs all four scroll-geometry signals off `target`. */
+    private _syncGeometry;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnScrollAmount, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnScrollAmount, "[ngnScrollAmount]", never, { "container": { "alias": "ngnScrollAmountContainer"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnScrollAmount, "[ngnScrollAmount]", never, { "container": { "alias": "ngnScrollAmountContainer"; "required": false; "isSignal": true; }; "endThreshold": { "alias": "ngnScrollAmountEndThreshold"; "required": false; "isSignal": true; }; }, { "endReached": "endReached"; }, never, never, true, never>;
 }
 
-export { NgnAutofocus, NgnDrag, NgnDragScroll, NgnMovable, NgnResizable, NgnScrollAmount };
+export { NgnAutofocus, NgnDrag, NgnDragScroll, NgnMovable, NgnResizable, NgnScrollAmount, computeDistanceFromEnd, isWithinEndZone };
 export type { NgnDragInfo };

package/types/ngneers-controls-drawer.d.ts

@@ -161,6 +161,9 @@ declare class NgnDrawer extends DrawerTemplates implements Openable {
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };
@@ -218,6 +221,8 @@ declare class NgnDrawer extends DrawerTemplates implements Openable {
             selectedCount: string;
             page: string;
             resultCount: string;
+            retry: string;
+            loadError: string;
         };
         state: {
             loading: string;
@@ -226,6 +231,18 @@ declare class NgnDrawer extends DrawerTemplates implements Openable {
             error: string;
             cancelled: string;
         };
+        errors: {
+            pending: string;
+            required: string;
+            email: string;
+            minlength: string;
+            maxlength: string;
+            minLength: string;
+            maxLength: string;
+            min: string;
+            max: string;
+            pattern: string;
+        };
     }, "_">;
     protected readonly headerId: string;
     private _focusTrap?;