@ardium-ui/ui 3.2.7 → 3.3.0-alpha.3

package/lib/_internal/focusable-component.d.ts

@@ -26,8 +26,8 @@ export declare abstract class _FocusableComponentBase extends _DisablableCompone
     /**
      * The component's overall tab index. If the component is disabled, it is always `-1`. Coercible into a number, defaults to `0`.
      */
-    readonly tabIndex: import("@angular/core").Signal<any>;
-    readonly _tabIndex: import("@angular/core").InputSignalWithTransform<any, number>;
+    readonly tabIndex: import("@angular/core").Signal<number>;
+    readonly _tabIndex: import("@angular/core").InputSignalWithTransform<number, any>;
     /**
      * The event emitter responsible for firing `focus` events.
      */
@@ -39,7 +39,8 @@ export declare abstract class _FocusableComponentBase extends _DisablableCompone
     /**
      * Whether the component is currently focused.
      */
-    isFocused: boolean;
+    readonly isFocused: import("@angular/core").WritableSignal<boolean>;
+    readonly wasTouched: import("@angular/core").WritableSignal<boolean>;
     /**
      * Function to handle when an element is focused. Sets `isFocused` and fires the `focus` event.
      * @param event The focus event to emit.

package/lib/_internal/form-field-component.d.ts

@@ -0,0 +1,30 @@
+import { Injector, OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { _NgModelComponentBase, _NgModelComponentDefaults } from './ngmodel-component';
+import * as i0 from "@angular/core";
+export interface _FormFieldComponentDefaults extends _NgModelComponentDefaults {
+    required: boolean | undefined;
+}
+export declare const _formFieldComponentDefaults: _FormFieldComponentDefaults;
+/**
+ * Common code for components which implement the ControlValueAccessor.
+ *
+ * **Warning**: `writeValue` function should be implemented on the child component!
+ */
+export declare abstract class _FormFieldComponentBase extends _NgModelComponentBase implements ControlValueAccessor, OnInit, OnDestroy {
+    protected readonly _DEFAULTS: _FormFieldComponentDefaults;
+    protected readonly _injector: Injector;
+    private _statusChangesSub?;
+    ngOnInit(): void;
+    protected _ngControl: NgControl | null;
+    readonly _required: import("@angular/core").InputSignalWithTransform<boolean | undefined, any>;
+    get required(): boolean;
+    readonly htmlId: import("@angular/core").InputSignal<string>;
+    readonly _hasError: import("@angular/core").InputSignalWithTransform<boolean | undefined, any>;
+    private readonly _hasErrorInControl;
+    readonly hasError: import("@angular/core").Signal<boolean>;
+    readonly isSuccess: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_FormFieldComponentBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_FormFieldComponentBase, never, never, { "_required": { "alias": "required"; "required": false; "isSignal": true; }; "htmlId": { "alias": "htmlId"; "required": false; "isSignal": true; }; "_hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "isSuccess": { "alias": "isSuccess"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
+}

package/lib/_internal/ngmodel-component.d.ts

@@ -2,6 +2,7 @@ import { ControlValueAccessor } from '@angular/forms';
 import { _FocusableComponentBase, _FocusableComponentDefaults } from './focusable-component';
 import * as i0 from "@angular/core";
 export interface _NgModelComponentDefaults extends _FocusableComponentDefaults {
+    required: boolean | undefined;
 }
 export declare const _ngModelComponentDefaults: _NgModelComponentDefaults;
 /**

package/lib/_internal/public-api.d.ts

@@ -0,0 +1,3 @@
+import { _FormFieldComponentBase } from './form-field-component';
+export interface ArdFormFieldComponent extends _FormFieldComponentBase {
+}

package/lib/form-field/error/error.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./error.directive";
+export declare class ArdiumErrorComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumErrorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumErrorComponent, "ard-error", never, {}, {}, never, ["*"], false, [{ directive: typeof i1.ArdiumErrorDirective; inputs: {}; outputs: {}; }]>;
+}

package/lib/form-field/error/error.directive.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class ArdiumErrorDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumErrorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdiumErrorDirective, "[ard-error]", never, {}, {}, never, never, true, never>;
+}

package/lib/form-field/form-field.component.d.ts

@@ -0,0 +1,20 @@
+import { OnInit } from '@angular/core';
+import { _FormFieldComponentBase } from '../_internal/form-field-component';
+import { ArdiumErrorDirective } from './error/error.directive';
+import { ArdiumHintDirective } from './hint/hint.directive';
+import { ArdiumLabelComponent } from './label/label.component';
+import * as i0 from "@angular/core";
+export declare class ArdiumFormFieldComponent implements OnInit {
+    protected readonly _DEFAULTS: import("./form-field.defaults").ArdFormFieldDefaults;
+    readonly alignHintToLeftByDefault: boolean;
+    readonly control: import("@angular/core").Signal<_FormFieldComponentBase | undefined>;
+    readonly controlId: import("@angular/core").Signal<string | undefined>;
+    readonly label: import("@angular/core").Signal<ArdiumLabelComponent | undefined>;
+    readonly hints: import("@angular/core").Signal<readonly ArdiumHintDirective[]>;
+    readonly errors: import("@angular/core").Signal<readonly ArdiumErrorDirective[]>;
+    readonly hasAnyError: import("@angular/core").Signal<boolean>;
+    readonly reserveHintLine: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFormFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumFormFieldComponent, "ard-form-field", never, { "reserveHintLine": { "alias": "reserveHintLine"; "required": false; "isSignal": true; }; }, {}, ["control", "label", "hints", "errors"], ["ard-label, [ard-label]", "*", "ard-error, [ard-error]", "ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])", "ard-hint[left], [ard-hint][left]", "ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])", "ard-hint[right], [ard-hint][right]"], false, never>;
+}

package/lib/form-field/form-field.defaults.d.ts

@@ -0,0 +1,8 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { SimpleOneAxisAlignment } from './../types/alignment.types';
+export interface ArdFormFieldDefaults {
+    defaultHintAlign: SimpleOneAxisAlignment;
+    reserveHintLine: boolean;
+}
+export declare const ARD_FORM_FIELD_DEFAULTS: InjectionToken<ArdFormFieldDefaults>;
+export declare function provideFormFieldDefaults(config: Partial<ArdFormFieldDefaults>): Provider;

package/lib/form-field/form-field.module.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./form-field.component";
+import * as i2 from "./horizontal-form-field.component";
+import * as i3 from "./label/label.component";
+import * as i4 from "./hint/hint.component";
+import * as i5 from "./error/error.component";
+import * as i6 from "@angular/common";
+import * as i7 from "./hint/hint.directive";
+import * as i8 from "./error/error.directive";
+export declare class ArdiumFormFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFormFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumFormFieldModule, [typeof i1.ArdiumFormFieldComponent, typeof i2.ArdiumHorizontalFormFieldComponent, typeof i3.ArdiumLabelComponent, typeof i4.ArdiumHintComponent, typeof i5.ArdiumErrorComponent], [typeof i6.CommonModule, typeof i7.ArdiumHintDirective, typeof i8.ArdiumErrorDirective], [typeof i1.ArdiumFormFieldComponent, typeof i2.ArdiumHorizontalFormFieldComponent, typeof i3.ArdiumLabelComponent, typeof i4.ArdiumHintComponent, typeof i5.ArdiumErrorComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumFormFieldModule>;
+}

package/lib/form-field/hint/hint.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./hint.directive";
+export declare class ArdiumHintComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumHintComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumHintComponent, "ard-hint", never, {}, {}, never, ["*"], false, [{ directive: typeof i1.ArdiumHintDirective; inputs: { "left": "left"; "right": "right"; }; outputs: {}; }]>;
+}

package/lib/form-field/hint/hint.directive.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class ArdiumHintDirective {
+    readonly left: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly right: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumHintDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdiumHintDirective, "[ard-hint]", never, { "left": { "alias": "left"; "required": false; "isSignal": true; }; "right": { "alias": "right"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/form-field/horizontal-form-field.component.d.ts

@@ -0,0 +1,20 @@
+import { OnInit } from '@angular/core';
+import { _FormFieldComponentBase } from '../_internal/form-field-component';
+import { ArdiumErrorDirective } from './error/error.directive';
+import { ArdiumHintDirective } from './hint/hint.directive';
+import { ArdiumLabelComponent } from './label/label.component';
+import * as i0 from "@angular/core";
+export declare class ArdiumHorizontalFormFieldComponent implements OnInit {
+    protected readonly _DEFAULTS: import("./form-field.defaults").ArdFormFieldDefaults;
+    readonly alignHintToLeftByDefault: boolean;
+    readonly control: import("@angular/core").Signal<_FormFieldComponentBase | undefined>;
+    readonly controlId: import("@angular/core").Signal<string | undefined>;
+    readonly label: import("@angular/core").Signal<ArdiumLabelComponent | undefined>;
+    readonly hints: import("@angular/core").Signal<readonly ArdiumHintDirective[]>;
+    readonly errors: import("@angular/core").Signal<readonly ArdiumErrorDirective[]>;
+    readonly hasAnyError: import("@angular/core").Signal<boolean>;
+    readonly reserveHintLine: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumHorizontalFormFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumHorizontalFormFieldComponent, "ard-horizontal-form-field", never, { "reserveHintLine": { "alias": "reserveHintLine"; "required": false; "isSignal": true; }; }, {}, ["control", "label", "hints", "errors"], ["ard-label, [ard-label]", "*", "ard-error, [ard-error]", "ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])", "ard-hint[left], [ard-hint][left]", "ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])", "ard-hint[right], [ard-hint][right]"], false, never>;
+}

package/lib/form-field/index.d.ts

@@ -0,0 +1,8 @@
+export * from './error/error.component';
+export * from './error/error.directive';
+export * from './form-field.component';
+export * from './form-field.module';
+export * from './hint/hint.component';
+export * from './hint/hint.directive';
+export * from './horizontal-form-field.component';
+export * from './label/label.component';

package/lib/form-field/label/label.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class ArdiumLabelComponent {
+    readonly required: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly optional: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumLabelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumLabelComponent, "ard-label", never, { "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
+}

package/lib/form-field-frame/form-field-frame.component.d.ts

@@ -8,7 +8,9 @@ import * as i0 from "@angular/core";
 export declare class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
     protected readonly _DEFAULTS: ArdFormFieldFrameDefaults;
     constructor(defaults: ArdFormFieldFrameDefaults);
-    isFocused: boolean;
+    readonly hasError: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly isSuccess: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    set _setIsFocused(v: boolean);
     /**
      * The appearance of the component, aka the styling.
      */
@@ -27,5 +29,5 @@ export declare class ArdiumFormFieldFrameComponent extends _FocusableComponentBa
     readonly prefixTemplate: import("@angular/core").Signal<ArdFormFieldPrefixTemplateDirective | undefined>;
     readonly suffixTemplate: import("@angular/core").Signal<ArdFormFieldSuffixTemplateDirective | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFormFieldFrameComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumFormFieldFrameComponent, "ard-form-field-frame", never, { "isFocused": { "alias": "isFocused"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "prefixTemplateInput": { "alias": "prefixTemplate"; "required": false; "isSignal": true; }; "suffixTemplateInput": { "alias": "suffixTemplate"; "required": false; "isSignal": true; }; }, {}, ["prefixTemplate", "suffixTemplate"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumFormFieldFrameComponent, "ard-form-field-frame", never, { "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "isSuccess": { "alias": "isSuccess"; "required": false; "isSignal": true; }; "_setIsFocused": { "alias": "isFocused"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "prefixTemplateInput": { "alias": "prefixTemplate"; "required": false; "isSignal": true; }; "suffixTemplateInput": { "alias": "suffixTemplate"; "required": false; "isSignal": true; }; }, {}, ["prefixTemplate", "suffixTemplate"], ["*"], false, never>;
 }

package/lib/inputs/_simple-input-base.d.ts

@@ -1,11 +1,11 @@
 import { AfterViewInit, ElementRef } from '@angular/core';
-import { _NgModelComponentBase, _NgModelComponentDefaults } from '../_internal/ngmodel-component';
+import { _FormFieldComponentBase, _FormFieldComponentDefaults } from '../_internal/form-field-component';
 import { SimpleOneAxisAlignment } from './../types/alignment.types';
 import { FormElementAppearance, FormElementVariant } from './../types/theming.types';
 import { Nullable } from './../types/utility.types';
 import { SimpleInputModel } from './input-utils';
 import * as i0 from "@angular/core";
-export interface _SimpleInputComponentDefaults extends _NgModelComponentDefaults {
+export interface _SimpleInputComponentDefaults extends _FormFieldComponentDefaults {
     appearance: FormElementAppearance;
     variant: FormElementVariant;
     compact: boolean;
@@ -17,7 +17,7 @@ export interface _SimpleInputComponentDefaults extends _NgModelComponentDefaults
     maxLength: Nullable<number>;
 }
 export declare const _simpleInputComponentDefaults: _SimpleInputComponentDefaults;
-export declare abstract class _SimpleInputComponentBase extends _NgModelComponentBase implements AfterViewInit {
+export declare abstract class _SimpleInputComponentBase extends _FormFieldComponentBase implements AfterViewInit {
     protected readonly _DEFAULTS: _SimpleInputComponentDefaults;
     readonly textInputEl: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
     protected readonly inputModel: SimpleInputModel;

package/lib/inputs/digit-input/digit-input.component.d.ts

@@ -1,12 +1,12 @@
-import { ElementRef } from '@angular/core';
+import { ElementRef, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { _NgModelComponentBase } from '../../_internal/ngmodel-component';
+import { _FormFieldComponentBase } from '../../_internal/form-field-component';
 import { FormElementAppearance, FormElementVariant } from '../../types/theming.types';
 import { ArdDigitInputDefaults } from './digit-input.defaults';
 import { DigitInputConfig, DigitInputShape } from './digit-input.types';
 import { DigitInputModelHost } from './digit-input.utils';
 import * as i0 from "@angular/core";
-export declare class ArdiumDigitInputComponent extends _NgModelComponentBase implements ControlValueAccessor, DigitInputModelHost {
+export declare class ArdiumDigitInputComponent extends _FormFieldComponentBase implements ControlValueAccessor, DigitInputModelHost, OnInit {
     protected readonly _DEFAULTS: ArdDigitInputDefaults;
     constructor(defaults: ArdDigitInputDefaults);
     readonly inputs: import("@angular/core").Signal<readonly ElementRef<HTMLInputElement>[]>;
@@ -20,10 +20,12 @@ export declare class ArdiumDigitInputComponent extends _NgModelComponentBase imp
     readonly configArrayData: import("@angular/core").Signal<import("./digit-input.utils").DigitInputConfigData[]>;
     private _oldConfigArrayDataLength;
     readonly configArrayDataEffect: import("@angular/core").EffectRef;
+    ngOnInit(): void;
     isInputEmpty(index: number): boolean;
     writeValue(v: any): void;
     private _writeValue;
     readonly outputAsString: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly outputControlValueAccessorOnFinish: import("@angular/core").InputSignalWithTransform<boolean, any>;
     set value(v: string | (string | null)[] | null);
     readonly valueChange: import("@angular/core").OutputEmitterRef<string | (string | null)[] | null>;
     readonly stringValue: import("@angular/core").Signal<string>;
@@ -41,5 +43,5 @@ export declare class ArdiumDigitInputComponent extends _NgModelComponentBase imp
     protected _emitChange(): void;
     onKeydown(event: KeyboardEvent, index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumDigitInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumDigitInputComponent, "ard-digit-input", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": true; "isSignal": true; }; "outputAsString": { "alias": "outputAsString"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "finishedValue": "finishedValue"; "focusIndexEvent": "focusIndex"; "blurIndexEvent": "blurIndex"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumDigitInputComponent, "ard-digit-input", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": true; "isSignal": true; }; "outputAsString": { "alias": "outputAsString"; "required": false; "isSignal": true; }; "outputControlValueAccessorOnFinish": { "alias": "outputControlValueAccessorOnFinish"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "finishedValue": "finishedValue"; "focusIndexEvent": "focusIndex"; "blurIndexEvent": "blurIndex"; }, never, never, false, never>;
 }

package/lib/inputs/digit-input/digit-input.defaults.d.ts

@@ -1,8 +1,8 @@
 import { InjectionToken, Provider } from '@angular/core';
-import { _NgModelComponentDefaults } from '../../_internal/ngmodel-component';
+import { _FormFieldComponentDefaults } from '../../_internal/form-field-component';
 import { FormElementAppearance, FormElementVariant } from './../../types/theming.types';
 import { DigitInputShape } from './digit-input.types';
-export interface ArdDigitInputDefaults extends _NgModelComponentDefaults {
+export interface ArdDigitInputDefaults extends _FormFieldComponentDefaults {
     appearance: FormElementAppearance;
     variant: FormElementVariant;
     shape: DigitInputShape;

package/lib/inputs/digit-input/digit-input.model.d.ts

@@ -16,7 +16,10 @@ export declare class DigitInputModel {
     private _updateInputElements;
     setConfig(config: DigitInputConfig): void;
     private _setConfig;
-    validateInputAndSetValue(input: string, index: number): false | [boolean, string | null];
+    validateInputAndSetValue(input: string, index: number): null | {
+        wasChanged: boolean;
+        resultChar: string | null;
+    };
     validateValueAndUpdate(): void;
     private _validateSingleChar;
 }

package/lib/inputs/digit-input/digit-input.types.d.ts

@@ -19,6 +19,7 @@ export interface DigitInputAcceptObject {
     accept: string | RegExp | ((char: string, charsBefore: string) => boolean);
     transform?: TransformType | null;
     readonly?: boolean;
+    placeholder?: string;
 }
 export interface DigitInputStaticObject {
     static: string;

package/lib/inputs/digit-input/digit-input.utils.d.ts

@@ -4,6 +4,7 @@ export interface DigitInputConfigData {
     char?: string;
     index?: number;
     readonly?: boolean;
+    placeholder?: string;
 }
 export interface DigitInputModelHost {
     readonly inputs: Signal<readonly ElementRef<HTMLInputElement>[]>;

package/lib/inputs/hex-input/hex-input.component.d.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, ElementRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { _NgModelComponentBase } from '../../_internal/ngmodel-component';
+import { _FormFieldComponentBase } from '../../_internal/form-field-component';
 import { FormElementAppearance, FormElementVariant } from '../../types/theming.types';
 import { Nullable } from '../../types/utility.types';
 import { CaseTransformerType } from '../input-types';
@@ -8,7 +8,7 @@ import { ArdHexInputDefaults } from './hex-input.defaults';
 import { ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective } from './hex-input.directives';
 import { HexInputModel, HexInputModelHost } from './hex-input.model';
 import * as i0 from "@angular/core";
-export declare class ArdiumHexInputComponent extends _NgModelComponentBase implements ControlValueAccessor, HexInputModelHost, AfterViewInit {
+export declare class ArdiumHexInputComponent extends _FormFieldComponentBase implements ControlValueAccessor, HexInputModelHost, AfterViewInit {
     protected readonly _DEFAULTS: ArdHexInputDefaults;
     constructor(defaults: ArdHexInputDefaults);
     readonly textInputEl: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;

package/lib/inputs/hex-input/hex-input.defaults.d.ts

@@ -1,9 +1,9 @@
 import { InjectionToken, Provider } from '@angular/core';
-import { _NgModelComponentDefaults } from '../../_internal/ngmodel-component';
+import { _FormFieldComponentDefaults } from '../../_internal/form-field-component';
 import { Nullable } from '../../types/utility.types';
 import { CaseTransformerType } from '../input-types';
 import { FormElementAppearance, FormElementVariant } from './../../types/theming.types';
-export interface ArdHexInputDefaults extends _NgModelComponentDefaults {
+export interface ArdHexInputDefaults extends _FormFieldComponentDefaults {
     appearance: FormElementAppearance;
     variant: FormElementVariant;
     compact: boolean;

package/lib/inputs/number-input/number-input.component.d.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, ElementRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { _NgModelComponentBase } from '../../_internal/ngmodel-component';
+import { _FormFieldComponentBase } from '../../_internal/form-field-component';
 import { ButtonAppearance, ButtonVariant } from '../../buttons/general-button.types';
 import { OneAxisAlignment } from '../../types/alignment.types';
 import { FormElementAppearance, FormElementVariant } from '../../types/theming.types';
@@ -9,7 +9,7 @@ import { NumberInputModel, NumberInputModelHost } from '../input-utils';
 import { ArdNumberInputDefaults } from './number-input.defaults';
 import { ArdNumberInputPlaceholderTemplateDirective } from './number-input.directives';
 import * as i0 from "@angular/core";
-export declare class ArdiumNumberInputComponent extends _NgModelComponentBase implements ControlValueAccessor, NumberInputModelHost, AfterViewInit {
+export declare class ArdiumNumberInputComponent extends _FormFieldComponentBase implements ControlValueAccessor, NumberInputModelHost, AfterViewInit {
     protected readonly _DEFAULTS: ArdNumberInputDefaults;
     constructor(defaults: ArdNumberInputDefaults);
     readonly inputEl: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;

package/lib/inputs/number-input/number-input.defaults.d.ts

@@ -1,8 +1,8 @@
 import { InjectionToken, Provider } from '@angular/core';
-import { _NgModelComponentDefaults } from '../../_internal/ngmodel-component';
+import { _FormFieldComponentDefaults } from '../../_internal/form-field-component';
 import { OneAxisAlignment } from './../../types/alignment.types';
 import { FormElementAppearance, FormElementVariant } from './../../types/theming.types';
-export interface ArdNumberInputDefaults extends _NgModelComponentDefaults {
+export interface ArdNumberInputDefaults extends _FormFieldComponentDefaults {
     appearance: FormElementAppearance;
     variant: FormElementVariant;
     compact: boolean;

package/lib/inputs/password-input/password-input.component.d.ts

@@ -1,13 +1,13 @@
 import { ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { _NgModelComponentBase } from '../../_internal/ngmodel-component';
+import { _FormFieldComponentBase } from '../../_internal/form-field-component';
 import { FormElementAppearance, FormElementVariant } from '../../types/theming.types';
 import { Nullable } from '../../types/utility.types';
 import { ArdPasswordInputDefaults } from './password-input.defaults';
 import { ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective } from './password-input.directives';
 import { PasswordInputRevealButtonContext } from './password-input.types';
 import * as i0 from "@angular/core";
-export declare class ArdiumPasswordInputComponent extends _NgModelComponentBase implements ControlValueAccessor, OnInit, OnDestroy {
+export declare class ArdiumPasswordInputComponent extends _FormFieldComponentBase implements ControlValueAccessor, OnInit, OnDestroy {
     protected readonly _DEFAULTS: ArdPasswordInputDefaults;
     constructor(defaults: ArdPasswordInputDefaults);
     readonly textInputEl: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;

package/lib/inputs/password-input/password-input.defaults.d.ts

@@ -1,8 +1,8 @@
 import { InjectionToken, Provider } from '@angular/core';
-import { _NgModelComponentDefaults } from '../../_internal/ngmodel-component';
+import { _FormFieldComponentDefaults } from '../../_internal/form-field-component';
 import { FormElementAppearance, FormElementVariant } from './../../types/theming.types';
 import { Nullable } from './../../types/utility.types';
-export interface ArdPasswordInputDefaults extends _NgModelComponentDefaults {
+export interface ArdPasswordInputDefaults extends _FormFieldComponentDefaults {
     appearance: FormElementAppearance;
     variant: FormElementVariant;
     compact: boolean;

package/lib/select/select.component.d.ts

@@ -1,7 +1,7 @@
 import { AfterContentInit, AfterViewInit, ElementRef, OnChanges, OnDestroy, OnInit, QueryList, Signal, SimpleChanges, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { _FormFieldComponentBase } from '../_internal/form-field-component';
 import { ItemStorage, ItemStorageHost } from '../_internal/item-storages/dropdown-item-storage';
-import { _NgModelComponentBase } from '../_internal/ngmodel-component';
 import { ArdiumDropdownPanelComponent } from '../dropdown-panel/dropdown-panel.component';
 import { DropdownPanelAppearance, DropdownPanelVariant } from '../dropdown-panel/dropdown-panel.types';
 import { ArdiumOptionComponent } from '../option/option.component';
@@ -13,7 +13,7 @@ import { ArdSelectDefaults } from './select.defaults';
 import { ArdAddCustomTemplateDirective, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdValueTemplateDirective } from './select.directive';
 import { AddCustomFn, CustomOptionContext, GroupContext, ItemDisplayLimitContext, ItemLimitContext, PlaceholderContext, SearchContext, StatsContext, ValueContext } from './select.types';
 import * as i0 from "@angular/core";
-export declare class ArdiumSelectComponent extends _NgModelComponentBase implements OnChanges, AfterViewInit, AfterContentInit, OnInit, OnDestroy, ControlValueAccessor, ItemStorageHost {
+export declare class ArdiumSelectComponent extends _FormFieldComponentBase implements OnChanges, AfterViewInit, AfterContentInit, OnInit, OnDestroy, ControlValueAccessor, ItemStorageHost {
     protected readonly _DEFAULTS: ArdSelectDefaults;
     constructor(defaults: ArdSelectDefaults);
     readonly _componentId: string;
@@ -39,7 +39,6 @@ export declare class ArdiumSelectComponent extends _NgModelComponentBase impleme
     readonly searchInputId: import("@angular/core").InputSignal<Nullable<string>>;
     readonly inputAttrs: import("@angular/core").InputSignal<Record<string, any>>;
     readonly isLoading: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly htmlId: import("@angular/core").InputSignal<string>;
     readonly itemsAlreadyGrouped: import("@angular/core").InputSignalWithTransform<boolean, any>;
     readonly invertDisabled: import("@angular/core").InputSignalWithTransform<boolean, any>;
     readonly noGroupActions: import("@angular/core").InputSignalWithTransform<boolean, any>;
@@ -194,5 +193,5 @@ export declare class ArdiumSelectComponent extends _NgModelComponentBase impleme
     private _onBackspaceOrDeletePress;
     private _onCtrlAPress;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumSelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumSelectComponent, "ard-select", never, { "valueFrom": { "alias": "valueFrom"; "required": false; "isSignal": true; }; "labelFrom": { "alias": "labelFrom"; "required": false; "isSignal": true; }; "disabledFrom": { "alias": "disabledFrom"; "required": false; "isSignal": true; }; "groupLabelFrom": { "alias": "groupLabelFrom"; "required": false; "isSignal": true; }; "groupDisabledFrom": { "alias": "groupDisabledFrom"; "required": false; "isSignal": true; }; "childrenFrom": { "alias": "childrenFrom"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "clearButtonTitle": { "alias": "clearButtonTitle"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "noItemsFoundText": { "alias": "noItemsFoundText"; "required": false; "isSignal": true; }; "loadingPlaceholderText": { "alias": "loadingPlaceholderText"; "required": false; "isSignal": true; }; "searchInputId": { "alias": "searchInputId"; "required": false; "isSignal": true; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "htmlId": { "alias": "htmlId"; "required": false; "isSignal": true; }; "itemsAlreadyGrouped": { "alias": "itemsAlreadyGrouped"; "required": false; "isSignal": true; }; "invertDisabled": { "alias": "invertDisabled"; "required": false; "isSignal": true; }; "noGroupActions": { "alias": "noGroupActions"; "required": false; "isSignal": true; }; "autoHighlightFirst": { "alias": "autoHighlightFirst"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "hideSelected": { "alias": "hideSelected"; "required": false; "isSignal": true; }; "noBackspaceClear": { "alias": "noBackspaceClear"; "required": false; "isSignal": true; }; "sortMultipleValues": { "alias": "sortMultipleValues"; "required": false; "isSignal": true; }; "searchCaseSensitive": { "alias": "searchCaseSensitive"; "required": false; "isSignal": true; }; "keepSearchAfterSelect": { "alias": "keepSearchAfterSelect"; "required": false; "isSignal": true; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; "isSignal": true; }; "itemDisplayLimit": { "alias": "itemDisplayLimit"; "required": false; "isSignal": true; }; "searchFn": { "alias": "searchFn"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "dropdownAppearance": { "alias": "dropdownAppearance"; "required": false; "isSignal": true; }; "dropdownVariant": { "alias": "dropdownVariant"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; }; "multiselectable": { "alias": "multiselectable"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "addCustom": { "alias": "addCustom"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "changeEvent": "change"; "addEvent": "add"; "failedToAddEvent": "failedToAdd"; "removeEvent": "remove"; "clearEvent": "clear"; "openEvent": "open"; "closeEvent": "close"; "scrollEvent": "scroll"; "scrollToEndEvent": "scrollToEnd"; "searchEvent": "search"; "isOpen": "isOpenChange"; }, ["optionTemplate", "optgroupTemplate", "valueTemplate", "placeholderTemplate", "loadingSpinnerTemplate", "loadingPlaceholderTemplate", "dropdownHeaderTemplate", "dropdownFooterTemplate", "noItemsFoundTemplate", "addCustomTemplate", "itemLimitReachedTemplate", "itemDisplayLimitTemplate", "prefixTemplate", "suffixTemplate", "optionComponents"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumSelectComponent, "ard-select", never, { "valueFrom": { "alias": "valueFrom"; "required": false; "isSignal": true; }; "labelFrom": { "alias": "labelFrom"; "required": false; "isSignal": true; }; "disabledFrom": { "alias": "disabledFrom"; "required": false; "isSignal": true; }; "groupLabelFrom": { "alias": "groupLabelFrom"; "required": false; "isSignal": true; }; "groupDisabledFrom": { "alias": "groupDisabledFrom"; "required": false; "isSignal": true; }; "childrenFrom": { "alias": "childrenFrom"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "clearButtonTitle": { "alias": "clearButtonTitle"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "noItemsFoundText": { "alias": "noItemsFoundText"; "required": false; "isSignal": true; }; "loadingPlaceholderText": { "alias": "loadingPlaceholderText"; "required": false; "isSignal": true; }; "searchInputId": { "alias": "searchInputId"; "required": false; "isSignal": true; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "itemsAlreadyGrouped": { "alias": "itemsAlreadyGrouped"; "required": false; "isSignal": true; }; "invertDisabled": { "alias": "invertDisabled"; "required": false; "isSignal": true; }; "noGroupActions": { "alias": "noGroupActions"; "required": false; "isSignal": true; }; "autoHighlightFirst": { "alias": "autoHighlightFirst"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "hideSelected": { "alias": "hideSelected"; "required": false; "isSignal": true; }; "noBackspaceClear": { "alias": "noBackspaceClear"; "required": false; "isSignal": true; }; "sortMultipleValues": { "alias": "sortMultipleValues"; "required": false; "isSignal": true; }; "searchCaseSensitive": { "alias": "searchCaseSensitive"; "required": false; "isSignal": true; }; "keepSearchAfterSelect": { "alias": "keepSearchAfterSelect"; "required": false; "isSignal": true; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; "isSignal": true; }; "itemDisplayLimit": { "alias": "itemDisplayLimit"; "required": false; "isSignal": true; }; "searchFn": { "alias": "searchFn"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "dropdownAppearance": { "alias": "dropdownAppearance"; "required": false; "isSignal": true; }; "dropdownVariant": { "alias": "dropdownVariant"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; }; "multiselectable": { "alias": "multiselectable"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "addCustom": { "alias": "addCustom"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "changeEvent": "change"; "addEvent": "add"; "failedToAddEvent": "failedToAdd"; "removeEvent": "remove"; "clearEvent": "clear"; "openEvent": "open"; "closeEvent": "close"; "scrollEvent": "scroll"; "scrollToEndEvent": "scrollToEnd"; "searchEvent": "search"; "isOpen": "isOpenChange"; }, ["optionTemplate", "optgroupTemplate", "valueTemplate", "placeholderTemplate", "loadingSpinnerTemplate", "loadingPlaceholderTemplate", "dropdownHeaderTemplate", "dropdownFooterTemplate", "noItemsFoundTemplate", "addCustomTemplate", "itemLimitReachedTemplate", "itemDisplayLimitTemplate", "prefixTemplate", "suffixTemplate", "optionComponents"], never, false, never>;
 }

package/lib/select/select.defaults.d.ts

@@ -1,11 +1,11 @@
 import { InjectionToken, Provider } from '@angular/core';
-import { _NgModelComponentDefaults } from '../_internal/ngmodel-component';
+import { _FormFieldComponentDefaults } from '../_internal/form-field-component';
 import { DropdownPanelAppearance, DropdownPanelVariant } from '../dropdown-panel';
 import { ArdPanelPosition, GroupByFn, SearchFn } from '../types/item-storage.types';
 import { Nullable } from '../types/utility.types';
 import { FormElementAppearance, FormElementVariant } from './../types/theming.types';
 import { AddCustomFn } from './select.types';
-export interface ArdSelectDefaults extends _NgModelComponentDefaults {
+export interface ArdSelectDefaults extends _FormFieldComponentDefaults {
     valueFrom: string;
     labelFrom: string;
     disabledFrom: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ardium-ui/ui",
-  "version": "3.2.7",
+  "version": "3.3.0-alpha.3",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",

package/prebuilt-themes/default/chips.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/chips.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_clear-button.scss"],"names":[],"mappings":"AAMA;EC6CE;EDxCA;EACA,OEJM;EFKN,YEbG;EFcH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AGtBA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AClIF;EACE,QFkCgB;EEjChB,OFiCgB;EEhChB;;AAGF;EACE;EACA;EACA,OFGK;EEFL,OFyBgB;EExBhB,QFwBgB;EEvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EH3BF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EGoBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EH7CN;EACA;EACA;EG6CM;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;AHfN;EAEE;;AAEF;EACE;;AAEF;EACE;;ADlCF;EACE;;AAEF;ECrBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDcE,YE9BM;EF+BN;;AAGF;EACE;EACA;EACA;;AAIE;EACE;;AAIF;EACE;;AAIJ;EClDF;EACA;EACA;;ADmDI;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE,kBE/DC;EFgED,OE7DE;EF8DF,YACE;;AAIF;EACE;EACA;;AAIN;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE,YACE;;AAGF;EACE;EACA;;AAIA;EACE;;AAIF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIA;EACE;;AAIF;EACE;;AAOR;EACE;EACA;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEA;EACE;;AAIN;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEA;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEF;EACE;EACA;;;AAMJ;EACE;EACA;;AAEA;EACE","file":"chips.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/chips.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_clear-button.scss"],"names":[],"mappings":"AAMA;ECgEE;ED3DA;EACA,OEJM;EFKN,YEbG;EFcH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AGtBA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AClIF;EACE,QFkCgB;EEjChB,OFiCgB;EEhChB;;AAGF;EACE;EACA;EACA,OFGK;EEFL,OFyBgB;EExBhB,QFwBgB;EEvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EH3BF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EGoBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EH7CN;EACA;EACA;EG6CM;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;AHIN;EAEE;;AAEF;EACE;;AAEF;EACE;;ADrDF;EACE;;AAEF;ECrBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDcE,YE9BM;EF+BN;;AAGF;EACE;EACA;EACA;;AAIE;EACE;;AAIF;EACE;;AAIJ;EClDF;EACA;EACA;;ADmDI;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE,kBE/DC;EFgED,OE7DE;EF8DF,YACE;;AAIF;EACE;EACA;;AAIN;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE,YACE;;AAGF;EACE;EACA;;AAIA;EACE;;AAIF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIA;EACE;;AAIF;EACE;;AAOR;EACE;EACA;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEA;EACE;;AAIN;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEA;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEF;EACE;EACA;;;AAMJ;EACE;EACA;;AAEA;EACE","file":"chips.css"}

package/prebuilt-themes/default/core.css

@@ -45,7 +45,7 @@
   --ard-secondary-500: 145, 13, 182;
   --ard-secondary-700: 103, 10, 129;
   --ard-secondary-900: 69, 7, 85;
-  --ard-danger-50: 247, 197, 196;
+  --ard-danger-50: 255, 233, 233;
   --ard-danger-100: 243, 151, 149;
   --ard-danger-300: 245, 103, 100;
   --ard-danger-500: 243, 55, 52;
@@ -78,6 +78,8 @@
   --ard-simple-shadow3: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
     0px 3px 14px 2px rgba(0, 0, 0, 0.12);
   --ard-spinner-color: rgba(0, 0, 0, 50%);
+  --ard-horizontal-form-field-label-width: 12rem;
+  --ard-horizontal-form-field-label-align: flex-start;
 }
 
 .ard-disabled {

package/prebuilt-themes/default/core.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/core.scss"],"names":[],"mappings":"AAEQ;AACA;AAER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAGA;;;AAGF;EACE","file":"core.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/core.scss"],"names":[],"mappings":"AAEQ;AACA;AAER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAGA;EAEA;EACA;;;AAGF;EACE","file":"core.css"}

package/prebuilt-themes/default/form-field-frame.css

@@ -1,6 +1,6 @@
 .ard-form-field-frame {
   box-sizing: border-box;
-  min-height: 2.1875rem;
+  min-height: 2.3125rem;
   height: max-content;
   max-width: 100%;
   display: flex;
@@ -17,7 +17,10 @@
 }
 .ard-form-field-frame .ard-form-field-content-container {
   flex-grow: 1;
-  min-height: 100%;
+  min-height: inherit;
+}
+.ard-form-field-frame .ard-form-field-content-container > * {
+  min-height: inherit;
 }
 .ard-form-field-frame .ard-form-field-prefix-container,
 .ard-form-field-frame .ard-form-field-suffix-container {
@@ -39,12 +42,29 @@
 }
 .ard-form-field-frame.ard-appearance-outlined {
   --ard-appearance-background: var(--ard-bg);
-  --ard-appearance-border: 1px solid var(--ard-border);
+  --ard-appearance-border-color: var(--ard-border);
+  --ard-appearance-border: 1px solid var(--ard-appearance-border-color);
+}
+.ard-form-field-frame.ard-appearance-outlined.ard-focused {
+  --ard-appearance-border-color: var(--ard-border-dark);
+}
+.ard-form-field-frame.ard-appearance-outlined.ard-is-success {
+  --ard-appearance-border-color: rgb(var(--ard-success-500));
+}
+.ard-form-field-frame.ard-appearance-outlined.ard-has-error {
+  --ard-appearance-background: rgb(var(--ard-danger-50));
+  --ard-appearance-border-color: rgb(var(--ard-danger-500));
 }
 .ard-form-field-frame.ard-appearance-filled {
   --ard-appearance-background: var(--ard-bg-filled);
   --ard-appearance-border: none;
 }
+.ard-form-field-frame.ard-appearance-filled.ard-is-success {
+  --ard-appearance-background: rgb(var(--ard-success-50));
+}
+.ard-form-field-frame.ard-appearance-filled.ard-has-error {
+  --ard-appearance-background: rgb(var(--ard-danger-50));
+}
 .ard-form-field-frame.ard-appearance-transparent {
   --ard-appearance-background: transparent;
   --ard-appearance-border: none;
@@ -66,9 +86,6 @@
 .ard-form-field-frame:hover .ard-form-field-overlay {
   opacity: 3%;
 }
-.ard-form-field-frame.ard-focused {
-  border-color: var(--ard-border-dark);
-}
 .ard-form-field-frame.ard-focused .ard-form-field-overlay {
   opacity: 6%;
 }