@ardium-ui/ui 3.2.6 → 3.3.0-alpha1

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.
      */

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

@@ -0,0 +1,29 @@
+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>;
+    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; }; }, {}, 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,19 @@
+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 alignLabelToLeftByDefault: 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>;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFormFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumFormFieldComponent, "ard-form-field", never, {}, {}, ["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,7 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { SimpleOneAxisAlignment } from './../types/alignment.types';
+export interface ArdFormFieldDefaults {
+    defaultHintAlign: SimpleOneAxisAlignment;
+}
+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,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./form-field.component";
+import * as i2 from "./label/label.component";
+import * as i3 from "./hint/hint.component";
+import * as i4 from "./error/error.component";
+import * as i5 from "@angular/common";
+import * as i6 from "./hint/hint.directive";
+import * as i7 from "./error/error.directive";
+export declare class ArdiumFormFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFormFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumFormFieldModule, [typeof i1.ArdiumFormFieldComponent, typeof i2.ArdiumLabelComponent, typeof i3.ArdiumHintComponent, typeof i4.ArdiumErrorComponent], [typeof i5.CommonModule, typeof i6.ArdiumHintDirective, typeof i7.ArdiumErrorDirective], [typeof i1.ArdiumFormFieldComponent, typeof i2.ArdiumLabelComponent, typeof i3.ArdiumHintComponent, typeof i4.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/index.d.ts

@@ -0,0 +1,7 @@
+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 './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,6 +8,7 @@ import * as i0 from "@angular/core";
 export declare class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
     protected readonly _DEFAULTS: ArdFormFieldFrameDefaults;
     constructor(defaults: ArdFormFieldFrameDefaults);
+    readonly hasError: import("@angular/core").InputSignalWithTransform<boolean, any>;
     isFocused: boolean;
     /**
      * The appearance of the component, aka the styling.
@@ -27,5 +28,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; }; "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>;
 }

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.6",
+  "version": "3.3.0-alpha1",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",

package/prebuilt-themes/default/buttons/button.css

@@ -192,15 +192,8 @@ ard-button {
 .ard-button.ard-appearance-transparent .ard-focus-overlay, .ard-button.ard-appearance-raised .ard-focus-overlay {
   background: var(--ard-cmpcl--overlay-colored);
 }
-.ard-button.ard-appearance-flat, .ard-button.ard-appearance-raised-strong {
-  background: var(--ard-cmpcl--bg);
-  color: var(--ard-cmpcl--on-bg);
-  border: none;
-}
-.ard-button.ard-appearance-flat .ard-focus-overlay, .ard-button.ard-appearance-raised-strong .ard-focus-overlay {
-  background: var(--ard-cmpcl--on-bg);
-}
 .ard-button.ard-appearance-raised, .ard-button.ard-appearance-raised-strong {
+  background: var(--ard-bg);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: var(--ard-simple-shadow);
 }
@@ -231,10 +224,15 @@ ard-button {
   background: var(--ard-cmpcl--bg-colored);
   color: var(--ard-cmpcl--on-bg-colored);
 }
-.ard-button.ard-appearance-raised-strong .ard-focus-overlay, .ard-button.ard-appearance-flat .ard-focus-overlay {
+.ard-button.ard-appearance-flat, .ard-button.ard-appearance-raised-strong {
+  background: var(--ard-cmpcl--bg);
+  color: var(--ard-cmpcl--on-bg);
+  border: none;
+}
+.ard-button.ard-appearance-flat .ard-focus-overlay, .ard-button.ard-appearance-raised-strong .ard-focus-overlay {
   background: var(--ard-cmpcl--on-bg);
 }
-.ard-button.ard-appearance-raised-strong:focus-visible, .ard-button.ard-appearance-flat:focus-visible {
+.ard-button.ard-appearance-flat:focus-visible, .ard-button.ard-appearance-raised-strong:focus-visible {
   outline: solid black;
 }
 .ard-button.ard-appearance-transparent.ard-light-coloring {

package/prebuilt-themes/default/buttons/button.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/button.scss","../../../../../projects/ui/src/themes/default/buttons/_button-mixins.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;;;AAGF;ECFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDJA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AEhBA;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;;ADrHF;EEdA;EACA;EACA;;AFgBA;EEZA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFKE;;AAIA;EACE;;AAKF;EACE;;AAIF;EACE;;AAIJ;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE;EACA,YGjCY;;AHmCZ;EAEE,YGpCW;;AHsCb;EACE,YGtCW;;AHyCf;EACE,YG7EC;EH8ED;EACA;;AAEA;EACE;;AAGJ;EACE,YGtFC;EHuFD;EACA;EAMA;;AAJA;EACE;;AAIF;EAGE;EACA;;AAKF;EACE;;AAEF;EACE;;AAIJ;EACE;;AAEA;EACE;;AD/FJ;EACE;EACA;EACA;;AAIF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EAEE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAMJ;ECuDA;EACA;;AAEA;EACE;EACA;;AAKA;AAAA;EAEE;;AAEF;EACE","file":"button.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/button.scss","../../../../../projects/ui/src/themes/default/buttons/_button-mixins.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;;;AAGF;ECFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDJA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AEhBA;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;;ADrHF;EEdA;EACA;EACA;;AFgBA;EEZA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFKE;;AAIA;EACE;;AAKF;EACE;;AAIF;EACE;;AAIJ;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE,YGvDC;EHwDD;EACA,YGxBY;;AH0BZ;EAEE,YG3BW;;AH6Bb;EACE,YG7BW;;AHgCf;EACE,YGpEC;EHqED;EACA;;AAEA;EACE;;AAGJ;EACE,YG7EC;EH8ED;EACA;EAMA;;AAJA;EACE;;AAIF;EAGE;EACA;;AAGJ;EAEE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAIJ;EACE;;AAEA;EACE;;AD1FJ;EACE;EACA;EACA;;AAIF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EAEE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAMJ;ECkDA;EACA;;AAEA;EACE;EACA;;AAKA;AAAA;EAEE;;AAEF;EACE","file":"button.css"}

package/prebuilt-themes/default/buttons/fab.css

@@ -190,15 +190,8 @@ ard-fab {
 .ard-fab.ard-appearance-transparent .ard-focus-overlay, .ard-fab.ard-appearance-raised .ard-focus-overlay {
   background: var(--ard-cmpcl--overlay-colored);
 }
-.ard-fab.ard-appearance-flat, .ard-fab.ard-appearance-raised-strong {
-  background: var(--ard-cmpcl--bg);
-  color: var(--ard-cmpcl--on-bg);
-  border: none;
-}
-.ard-fab.ard-appearance-flat .ard-focus-overlay, .ard-fab.ard-appearance-raised-strong .ard-focus-overlay {
-  background: var(--ard-cmpcl--on-bg);
-}
 .ard-fab.ard-appearance-raised, .ard-fab.ard-appearance-raised-strong {
+  background: var(--ard-bg);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: var(--ard-simple-shadow);
 }
@@ -229,10 +222,15 @@ ard-fab {
   background: var(--ard-cmpcl--bg-colored);
   color: var(--ard-cmpcl--on-bg-colored);
 }
-.ard-fab.ard-appearance-raised-strong .ard-focus-overlay, .ard-fab.ard-appearance-flat .ard-focus-overlay {
+.ard-fab.ard-appearance-flat, .ard-fab.ard-appearance-raised-strong {
+  background: var(--ard-cmpcl--bg);
+  color: var(--ard-cmpcl--on-bg);
+  border: none;
+}
+.ard-fab.ard-appearance-flat .ard-focus-overlay, .ard-fab.ard-appearance-raised-strong .ard-focus-overlay {
   background: var(--ard-cmpcl--on-bg);
 }
-.ard-fab.ard-appearance-raised-strong:focus-visible, .ard-fab.ard-appearance-flat:focus-visible {
+.ard-fab.ard-appearance-flat:focus-visible, .ard-fab.ard-appearance-raised-strong:focus-visible {
   outline: solid black;
 }
 .ard-fab.ard-appearance-transparent.ard-light-coloring {

package/prebuilt-themes/default/buttons/fab.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/fab.scss","../../../../../projects/ui/src/themes/default/buttons/_button-mixins.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;;;AAGF;ECJE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDFA;EACA;EACA;EACA;EACA;EACA;EACA;;AEfA;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;;ADrHF;EEdA;EACA;EACA;;AFgBA;EEZA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFKE;;AAIA;EACE;;AAKF;EACE;;AAIF;EACE;;AAIJ;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE;EACA,YGjCY;;AHmCZ;EAEE,YGpCW;;AHsCb;EACE,YGtCW;;AHyCf;EACE,YG7EC;EH8ED;EACA;;AAEA;EACE;;AAGJ;EACE,YGtFC;EHuFD;EACA;EAMA;;AAJA;EACE;;AAIF;EAGE;EACA;;AAKF;EACE;;AAEF;EACE;;AAIJ;EACE;;AAEA;EACE;;ADhGJ;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AG3BJ;EACE;EAEA;;AAKA;EACE;;;AH4BJ;ECiEA;EACA;;AAEA;EACE;EACA;;AAKA;AAAA;EAEE;;AAEF;EACE;;;AD3EN;EACE;IACE;;EAEF;IACE;;EAEF;IACE","file":"fab.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/buttons/fab.scss","../../../../../projects/ui/src/themes/default/buttons/_button-mixins.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;;;AAGF;ECJE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDFA;EACA;EACA;EACA;EACA;EACA;EACA;;AEfA;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;;ADrHF;EEdA;EACA;EACA;;AFgBA;EEZA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFKE;;AAIA;EACE;;AAKF;EACE;;AAIF;EACE;;AAIJ;EAEE;EACA;EACA;;AAEA;EACE;;AAGJ;EAEE,YGvDC;EHwDD;EACA,YGxBY;;AH0BZ;EAEE,YG3BW;;AH6Bb;EACE,YG7BW;;AHgCf;EACE,YGpEC;EHqED;EACA;;AAEA;EACE;;AAGJ;EACE,YG7EC;EH8ED;EACA;EAMA;;AAJA;EACE;;AAIF;EAGE;EACA;;AAGJ;EAEE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAIJ;EACE;;AAEA;EACE;;AD3FJ;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AG3BJ;EACE;EAEA;;AAKA;EACE;;;AH4BJ;EC4DA;EACA;;AAEA;EACE;EACA;;AAKA;AAAA;EAEE;;AAEF;EACE;;;ADtEN;EACE;IACE;;EAEF;IACE;;EAEF;IACE","file":"fab.css"}

package/prebuilt-themes/default/buttons/icon-button.css

@@ -196,15 +196,8 @@ ard-icon-button {
 .ard-icon-button.ard-appearance-transparent .ard-focus-overlay, .ard-icon-button.ard-appearance-raised .ard-focus-overlay {
   background: var(--ard-cmpcl--overlay-colored);
 }
-.ard-icon-button.ard-appearance-flat, .ard-icon-button.ard-appearance-raised-strong {
-  background: var(--ard-cmpcl--bg);
-  color: var(--ard-cmpcl--on-bg);
-  border: none;
-}
-.ard-icon-button.ard-appearance-flat .ard-focus-overlay, .ard-icon-button.ard-appearance-raised-strong .ard-focus-overlay {
-  background: var(--ard-cmpcl--on-bg);
-}
 .ard-icon-button.ard-appearance-raised, .ard-icon-button.ard-appearance-raised-strong {
+  background: var(--ard-bg);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: var(--ard-simple-shadow);
 }
@@ -235,10 +228,15 @@ ard-icon-button {
   background: var(--ard-cmpcl--bg-colored);
   color: var(--ard-cmpcl--on-bg-colored);
 }
-.ard-icon-button.ard-appearance-raised-strong .ard-focus-overlay, .ard-icon-button.ard-appearance-flat .ard-focus-overlay {
+.ard-icon-button.ard-appearance-flat, .ard-icon-button.ard-appearance-raised-strong {
+  background: var(--ard-cmpcl--bg);
+  color: var(--ard-cmpcl--on-bg);
+  border: none;
+}
+.ard-icon-button.ard-appearance-flat .ard-focus-overlay, .ard-icon-button.ard-appearance-raised-strong .ard-focus-overlay {
   background: var(--ard-cmpcl--on-bg);
 }
-.ard-icon-button.ard-appearance-raised-strong:focus-visible, .ard-icon-button.ard-appearance-flat:focus-visible {
+.ard-icon-button.ard-appearance-flat:focus-visible, .ard-icon-button.ard-appearance-raised-strong:focus-visible {
   outline: solid black;
 }
 .ard-icon-button.ard-appearance-transparent.ard-light-coloring {