@ardium-ui/ui 5.0.0-alpha.2 → 5.0.0-alpha.21

package/lib/select/select.utils.d.ts

@@ -0,0 +1,2 @@
+import { Nullable } from '../types/utility.types';
+export declare function transformDropdownPanelSize(v: Nullable<number | string>): Nullable<number | string>;

package/lib/slider/abstract-slider.d.ts

@@ -1,5 +1,6 @@
 import { Overlay, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
+import { BooleanLike, NumberLike } from '@ardium-ui/devkit';
 import { _NgModelComponentBase, _NgModelComponentDefaults } from '../_internal/ngmodel-component';
 import { SimpleComponentColor } from '../types/colors.types';
 import { Nullable } from '../types/utility.types';
@@ -32,22 +33,22 @@ export declare abstract class _AbstractSlider<T> extends _NgModelComponentBase {
     protected readonly overlay: Overlay;
     protected readonly scrollStrategyOpts: ScrollStrategyOptions;
     protected readonly viewContainerRef: ViewContainerRef;
-    readonly noTooltip: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly noTooltip: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly tooltipFormatFn: import("@angular/core").InputSignal<Nullable<SliderTooltipFormatFn>>;
     protected abstract _updateTooltipValue(): void;
-    readonly min: import("@angular/core").InputSignalWithTransform<number, any>;
-    readonly max: import("@angular/core").InputSignalWithTransform<number, any>;
-    readonly step: import("@angular/core").InputSignalWithTransform<number, any>;
-    readonly shiftMultiplier: import("@angular/core").InputSignalWithTransform<number, any>;
+    readonly min: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
+    readonly max: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
+    readonly step: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
+    readonly shiftMultiplier: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
     protected readonly _stepSizeComputed: import("@angular/core").Signal<number>;
-    readonly showValueTicks: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly showValueTicks: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly percentStepSize: import("@angular/core").Signal<number>;
     protected readonly _tickArray: import("@angular/core").Signal<string[]>;
     readonly labelPosition: import("@angular/core").InputSignal<SliderDecorationPosition>;
     readonly labels: import("@angular/core").InputSignal<number[] | SliderLabelObject[] | null>;
     readonly labelObjects: import("@angular/core").Signal<_InternalSliderLabelObject[]>;
     readonly color: import("@angular/core").InputSignal<SimpleComponentColor>;
-    readonly compact: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly compact: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly ngClasses: import("@angular/core").Signal<string>;
     readonly sliderTransition: import("@angular/core").Signal<string>;
     private readonly _totalSteps;

package/lib/star/rating-display/rating-display.component.d.ts

@@ -1,3 +1,4 @@
+import { NumberLike } from '@ardium-ui/devkit';
 import { StarColor, StarFillMode } from './../star.types';
 import { ArdRatingDisplayStarTemplateDirective } from './rating-display.directives';
 import { ArdRatingDisplayStarTemplateContext } from './rating-display.types';
@@ -7,7 +8,7 @@ export declare class ArdiumRatingDisplayComponent {
     protected readonly _DEFAULTS: import("./rating-display.defaults").ArdRatingDisplayDefaults;
     readonly color: import("@angular/core").InputSignal<StarColor>;
     readonly ngClasses: import("@angular/core").Signal<string>;
-    readonly max: import("@angular/core").InputSignalWithTransform<number, any>;
+    readonly max: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
     readonly value: import("@angular/core").InputSignalWithTransform<number | StarFillMode[], string | number | StarFillMode[]>;
     readonly starArray: import("@angular/core").Signal<StarFillMode[]>;
     readonly starTemplate: import("@angular/core").Signal<ArdRatingDisplayStarTemplateDirective | undefined>;

package/lib/star/rating-input/rating-input.component.d.ts

@@ -1,4 +1,5 @@
 import { ControlValueAccessor } from '@angular/forms';
+import { NumberLike } from '@ardium-ui/devkit';
 import { _NgModelComponentBase } from '../../_internal/ngmodel-component';
 import { ArdiumStarButtonComponent } from '../star-button/star-button.component';
 import { StarColor } from '../star.types';
@@ -14,7 +15,7 @@ export declare class ArdiumRatingInputComponent extends _NgModelComponentBase im
     readonly highlightEvent: import("@angular/core").OutputEmitterRef<number>;
     readonly value: import("@angular/core").ModelSignal<number | null>;
     constructor(defaults: ArdRatingInputDefaults);
-    readonly max: import("@angular/core").InputSignalWithTransform<number, any>;
+    readonly max: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
     readonly starButtonInstances: import("@angular/core").Signal<readonly ArdiumStarButtonComponent[]>;
     private readonly _highlightedStarIndex;
     readonly starArray: import("@angular/core").Signal<number[]>;

package/lib/tabber/index.d.ts

@@ -2,4 +2,6 @@ export * from './tab/tab.component';
 export * from './tab/tab.defaults';
 export * from './tabber.component';
 export * from './tabber.defaults';
+export * from './tabber.directives';
 export * from './tabber.module';
+export * from './tabber.types';

package/lib/tabber/tab/tab.component.d.ts

@@ -1,19 +1,25 @@
+import { OnDestroy, TemplateRef } from '@angular/core';
+import { BooleanLike } from '@ardium-ui/devkit';
+import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class ArdiumTabComponent {
+export declare class ArdiumTabComponent implements OnDestroy {
     protected readonly _DEFAULTS: import("./tab.defaults").ArdTabDefaults;
-    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly selected: import("@angular/core").WritableSignal<boolean>;
     set _selected(v: any);
     setSelected(state: boolean): void;
-    get _selectedHostAttribute(): boolean;
     private _emitChange;
     readonly focused: import("@angular/core").WritableSignal<boolean>;
-    readonly _label: import("@angular/core").InputSignal<string | null>;
-    readonly label: import("@angular/core").Signal<string>;
-    readonly tabId: import("@angular/core").InputSignal<string>;
+    readonly _label: import("@angular/core").InputSignal<string | TemplateRef<any> | null>;
+    readonly label: import("@angular/core").Signal<string | TemplateRef<any>>;
+    _isTabIdInitialized: boolean;
+    readonly tabId: import("@angular/core").InputSignalWithTransform<string, string>;
     readonly focusEvent: import("@angular/core").OutputEmitterRef<void>;
     readonly blurEvent: import("@angular/core").OutputEmitterRef<void>;
     readonly selectedChange: import("@angular/core").OutputEmitterRef<boolean>;
+    readonly selectedChangeInternal$: Subject<boolean>;
+    private _selectedChangeSub;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTabComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabComponent, "ard-tab", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "_selected": { "alias": "selected"; "required": false; }; "_label": { "alias": "label"; "required": false; "isSignal": true; }; "tabId": { "alias": "tabId"; "required": true; "isSignal": true; }; }, { "focusEvent": "focusEvent"; "blurEvent": "blurEvent"; "selectedChange": "selectedChange"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabComponent, "ard-tab", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "_selected": { "alias": "selected"; "required": false; }; "_label": { "alias": "label"; "required": false; "isSignal": true; }; "tabId": { "alias": "tabId"; "required": true; "isSignal": true; }; }, { "focusEvent": "focus"; "blurEvent": "blur"; "selectedChange": "selectedChange"; }, never, ["*"], false, never>;
 }

package/lib/tabber/tabber.component.d.ts

@@ -1,28 +1,45 @@
-import { AfterContentInit } from '@angular/core';
+import { AfterContentInit, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import { BooleanLike } from '@ardium-ui/devkit';
 import { OneAxisAlignment } from '../types/alignment.types';
 import { ComponentColor } from '../types/colors.types';
 import { ArdiumTabComponent } from './tab/tab.component';
+import { ArdTabberLabelTemplateDirective } from './tabber.directives';
+import { TabberLabelContext } from './tabber.types';
 import * as i0 from "@angular/core";
-export declare class ArdiumTabberComponent implements AfterContentInit {
+export declare class ArdiumTabberComponent implements AfterContentInit, OnChanges {
     protected readonly _DEFAULTS: import("./tabber.defaults").ArdTabberDefaults;
     readonly tabs: import("@angular/core").Signal<readonly ArdiumTabComponent[]>;
-    readonly currentTab: import("@angular/core").WritableSignal<ArdiumTabComponent | null>;
-    readonly currentFocusedTab: import("@angular/core").WritableSignal<ArdiumTabComponent | null>;
+    readonly selectedTabId: import("@angular/core").ModelSignal<string | null>;
+    readonly selectedTab: import("@angular/core").Signal<ArdiumTabComponent | null>;
+    readonly focusedTabId: import("@angular/core").WritableSignal<string | null>;
+    readonly focusedTab: import("@angular/core").Signal<ArdiumTabComponent | null>;
+    readonly focusedTabIdChange: import("@angular/core").OutputEmitterRef<string>;
+    private _selectedTabIdToCheck;
+    ngOnChanges(changes: SimpleChanges): void;
+    private _validateSelectedTabId;
     readonly initialTab: import("@angular/core").InputSignal<string | undefined>;
     ngAfterContentInit(): void;
-    onTabClick(tab: ArdiumTabComponent): void;
+    selectTab(tab: ArdiumTabComponent): void;
+    private _unselectSpecificTab;
+    private _unselectCurrentTab;
+    private _selectNewTab;
     onTabFocus(tab: ArdiumTabComponent): void;
     onTabBlur(tab: ArdiumTabComponent): void;
     readonly focusEvent: import("@angular/core").OutputEmitterRef<string>;
     readonly blurEvent: import("@angular/core").OutputEmitterRef<string>;
-    readonly changeTab: import("@angular/core").OutputEmitterRef<string>;
     readonly color: import("@angular/core").InputSignal<ComponentColor>;
     readonly ngClasses: import("@angular/core").Signal<string>;
-    readonly stretchTabs: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly uniformTabWidths: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly stretchTabs: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly uniformTabWidths: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly tabAlignment: import("@angular/core").InputSignal<OneAxisAlignment>;
     readonly tabContainerClasses: import("@angular/core").Signal<string>;
     readonly tabIndex: import("@angular/core").InputSignal<string | number>;
+    readonly labelTemplate: import("@angular/core").Signal<ArdTabberLabelTemplateDirective | undefined>;
+    readonly tabsWithTemplates: import("@angular/core").Signal<{
+        tab: ArdiumTabComponent;
+        template: TemplateRef<any> | null;
+        templateContext: TabberLabelContext | null;
+    }[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTabberComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabberComponent, "ard-tabber", never, { "initialTab": { "alias": "initialTab"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "stretchTabs": { "alias": "stretchTabs"; "required": false; "isSignal": true; }; "uniformTabWidths": { "alias": "uniformTabWidths"; "required": false; "isSignal": true; }; "tabAlignment": { "alias": "tabAlignment"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, { "focusEvent": "focus"; "blurEvent": "blur"; "changeTab": "changeTab"; }, ["tabs"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTabberComponent, "ard-tabber", never, { "selectedTabId": { "alias": "selectedTab"; "required": false; "isSignal": true; }; "initialTab": { "alias": "initialTab"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "stretchTabs": { "alias": "stretchTabs"; "required": false; "isSignal": true; }; "uniformTabWidths": { "alias": "uniformTabWidths"; "required": false; "isSignal": true; }; "tabAlignment": { "alias": "tabAlignment"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, { "selectedTabId": "selectedTabChange"; "focusedTabIdChange": "focusedTabIdChange"; "focusEvent": "focus"; "blurEvent": "blur"; }, ["tabs", "labelTemplate"], ["*"], false, never>;
 }

package/lib/tabber/tabber.directives.d.ts

@@ -0,0 +1,9 @@
+import { TemplateRef } from '@angular/core';
+import { TabberLabelContext } from './tabber.types';
+import * as i0 from "@angular/core";
+export declare class ArdTabberLabelTemplateDirective {
+    template: TemplateRef<TabberLabelContext>;
+    constructor(template: TemplateRef<TabberLabelContext>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdTabberLabelTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdTabberLabelTemplateDirective, "ng-template[ard-tabber-label-tmp]", never, {}, {}, never, never, false, never>;
+}

package/lib/tabber/tabber.module.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./tabber.component";
 import * as i2 from "./tab/tab.component";
-import * as i3 from "@angular/common";
+import * as i3 from "./tabber.directives";
+import * as i4 from "@angular/common";
 export declare class ArdiumTabberModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTabberModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumTabberModule, [typeof i1.ArdiumTabberComponent, typeof i2.ArdiumTabComponent], [typeof i3.CommonModule], [typeof i1.ArdiumTabberComponent, typeof i2.ArdiumTabComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumTabberModule, [typeof i1.ArdiumTabberComponent, typeof i2.ArdiumTabComponent, typeof i3.ArdTabberLabelTemplateDirective], [typeof i4.CommonModule], [typeof i1.ArdiumTabberComponent, typeof i2.ArdiumTabComponent, typeof i3.ArdTabberLabelTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumTabberModule>;
 }

package/lib/tabber/tabber.types.d.ts

@@ -0,0 +1,5 @@
+export interface TabberLabelContext {
+    $implicit: string;
+    label: string;
+    tabId: string;
+}

package/lib/table/table.component.d.ts

@@ -1,4 +1,5 @@
 import { AfterContentInit, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import { BooleanLike, NumberLike } from '@ardium-ui/devkit';
 import { _FocusableComponentBase } from '../_internal/focusable-component';
 import { ProgressBarMode } from '../progress-bar';
 import { CurrentItemsFormatFn, PaginationAlign } from '../table-pagination/table-pagination.types';
@@ -15,15 +16,15 @@ export declare class ArdiumTableComponent extends _FocusableComponentBase implem
     private readonly _itemStorage;
     readonly rowDisabledFrom: import("@angular/core").InputSignal<string>;
     readonly rowBoldFrom: import("@angular/core").InputSignal<string>;
-    readonly invertRowDisabled: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly invertRowBold: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly selectableRows: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly invertRowDisabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly invertRowBold: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly selectableRows: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly maxSelectedItems: import("@angular/core").InputSignalWithTransform<Nullable<number>, any>;
-    readonly clickableRows: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly clickableRows: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly caption: import("@angular/core").InputSignal<Nullable<string>>;
-    readonly isLoading: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly loadingProgress: import("@angular/core").InputSignalWithTransform<number, any>;
-    readonly loadingProgressBuffer: import("@angular/core").InputSignalWithTransform<number, any>;
+    readonly isLoading: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly loadingProgress: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
+    readonly loadingProgressBuffer: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
     readonly loadingBarMode: import("@angular/core").InputSignal<ProgressBarMode>;
     readonly loadingBarColor: import("@angular/core").InputSignal<ComponentColor>;
     readonly appearance: import("@angular/core").InputSignal<TableAppearance>;
@@ -31,11 +32,11 @@ export declare class ArdiumTableComponent extends _FocusableComponentBase implem
     readonly color: import("@angular/core").InputSignal<ComponentColor>;
     readonly align: import("@angular/core").InputSignal<TableAlignType>;
     readonly headerAlign: import("@angular/core").InputSignal<TableAlignType>;
-    readonly compact: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly zebra: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly stickyHeader: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly compact: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly zebra: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly stickyHeader: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly ngClasses: import("@angular/core").Signal<string>;
-    readonly paginated: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly paginated: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly paginationStrategy: import("@angular/core").InputSignal<TablePaginationStrategy>;
     readonly paginationOptions: import("@angular/core").InputSignalWithTransform<number[] | {
         value: number;
@@ -49,9 +50,9 @@ export declare class ArdiumTableComponent extends _FocusableComponentBase implem
     readonly paginationAlign: import("@angular/core").InputSignal<PaginationAlign>;
     readonly itemsPerPageText: import("@angular/core").InputSignal<string>;
     readonly currentItemsFormatFn: import("@angular/core").InputSignal<CurrentItemsFormatFn>;
-    readonly pageFillRemaining: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly paginationDisabled: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly useFirstLastButtons: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly pageFillRemaining: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly paginationDisabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly useFirstLastButtons: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly itemsPerPage: import("@angular/core").ModelSignal<number>;
     readonly page: import("@angular/core").ModelSignal<number>;
     readonly isDefinedTotalItems: import("@angular/core").Signal<boolean>;
@@ -63,7 +64,7 @@ export declare class ArdiumTableComponent extends _FocusableComponentBase implem
     private _data;
     set data(v: any[]);
     get data(): any[];
-    readonly treatDataSourceAsString: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly treatDataSourceAsString: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly checkboxTemplate: import("@angular/core").Signal<TemplateRef<TableCheckboxContext> | undefined>;
     readonly headerCheckboxTemplate: import("@angular/core").Signal<TemplateRef<TableHeaderCheckboxContext> | undefined>;
     readonly captionTemplate: import("@angular/core").Signal<TemplateRef<TableCaptionContext> | undefined>;

package/lib/table-pagination/table-pagination.component.d.ts

@@ -1,4 +1,5 @@
 import { OnInit } from '@angular/core';
+import { BooleanLike } from '@ardium-ui/devkit';
 import { _FocusableComponentBase } from '../_internal/focusable-component';
 import { ComponentColor } from '../types/colors.types';
 import { ArdTablePaginationDefaults } from './table-pagination.defaults';
@@ -21,10 +22,10 @@ export declare class ArdiumTablePaginationComponent extends _FocusableComponentB
     ngOnInit(): void;
     readonly color: import("@angular/core").InputSignal<ComponentColor>;
     readonly align: import("@angular/core").InputSignal<PaginationAlign>;
-    readonly compact: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly compact: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly ngClasses: import("@angular/core").Signal<string>;
-    readonly useFirstLastButtons: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    readonly isLoading: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly useFirstLastButtons: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
+    readonly isLoading: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     readonly itemsPerPageText: import("@angular/core").InputSignal<string>;
     readonly currentItemsFormatFn: import("@angular/core").InputSignal<CurrentItemsFormatFn>;
     readonly getCurrentItemsContext: import("@angular/core").Signal<import("../_internal/models/pagination.model").PaginationCurrentItemsContext>;

package/lib/text-list/text-list.component.d.ts

@@ -1,8 +1,9 @@
+import { BooleanLike } from '@ardium-ui/devkit';
 import * as i0 from "@angular/core";
 export declare class ArdiumTextListComponent {
     readonly values: import("@angular/core").InputSignal<any[]>;
     readonly separator: import("@angular/core").InputSignal<string>;
-    readonly filter: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly filter: import("@angular/core").InputSignalWithTransform<boolean, BooleanLike>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumTextListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumTextListComponent, "ard-text-list", never, { "values": { "alias": "values"; "required": true; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ardium-ui/ui",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.21",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",

package/prebuilt-themes/default/checkbox-list.css

@@ -1,19 +1,44 @@
+:root {
+  --ard-checkbox-list-padding: 0.375rem 0;
+  --ard-checkbox-list-item-hover-opacity: 5%;
+  --ard-checkbox-list-item-active-opacity: 15%;
+  --ard-checkbox-list-item-height: 3rem;
+  --ard-checkbox-list-item-height-compact: 2rem;
+  --ard-checkbox-list-checkbox-min-width: 1.25rem;
+  --ard-checkbox-list-checkbox-padding: 0.625rem;
+  --ard-checkbox-list-item-padding: 0 0.5rem 0 0;
+  --ard-checkbox-list-gap: 0;
+  --ard-checkbox-list-gap-compact: 0;
+  --ard-checkbox-list-item-gap: 0.5rem;
+  --ard-checkbox-list-item-gap-compact: 0.325rem;
+  --ard-checkbox-list-disabled-opacity: 50%;
+}
+
 .ard-checkbox-list {
   display: flex;
   flex-direction: column;
+  padding: var(--ard-checkbox-list-padding, 0.375rem 0);
+  gap: var(--ard-checkbox-list-gap, 0);
 }
 .ard-checkbox-list .ard-checkbox-list__item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0 1rem;
+  justify-content: stretch;
+  gap: var(--ard-checkbox-list-item-gap, 0.5rem);
+  padding: var(--ard-checkbox-list-item-padding, 0 0.5rem 0 0);
   position: relative;
   cursor: pointer;
-  height: 3rem;
+  height: max-content;
+  min-height: var(--ard-checkbox-list-item-height, 3rem);
 }
 .ard-checkbox-list .ard-checkbox-list__item > label {
   pointer-events: none;
   user-select: none;
+  flex-grow: 1;
+  padding: 0;
+  min-height: var(--ard-checkbox-list-item-height, 3rem);
+  display: flex;
+  align-items: center;
 }
 .ard-checkbox-list .ard-checkbox-list__item > .ard-focus-overlay {
   position: absolute;
@@ -28,13 +53,14 @@
   background: var(--ard-overlay);
 }
 .ard-checkbox-list .ard-checkbox-list__item.ard-item-highlighted > .ard-focus-overlay {
-  opacity: 5%;
+  opacity: var(--ard-checkbox-list-item-hover-opacity, 5%);
 }
 .ard-checkbox-list .ard-checkbox-list__item:active > .ard-focus-overlay {
-  opacity: 15%;
+  opacity: var(--ard-checkbox-list-item-active-opacity, 15%);
 }
 .ard-checkbox-list .ard-checkbox-list__item ard-checkbox {
-  padding: 0.625rem;
+  padding: var(--ard-checkbox-list-checkbox-padding, 0.625rem);
+  min-width: var(--ard-checkbox-list-checkbox-min-width, 1.25rem);
 }
 .ard-checkbox-list .ard-checkbox-list__item ard-checkbox .ard-checkbox .ard-focus-overlay {
   display: none;
@@ -43,23 +69,23 @@
   pointer-events: none;
 }
 .ard-checkbox-list .ard-checkbox-list__item.ard-item-disabled > label {
-  opacity: 50%;
-}
-.ard-checkbox-list.ard-compact .ard-checkbox-list__item {
-  gap: 0.325rem;
-  height: 2rem;
+  opacity: var(--ard-checkbox-list-disabled-opacity, 50%);
 }
-.ard-checkbox-list.ard-align-left-clumped .ard-checkbox-list__item, .ard-checkbox-list.ard-align-left-split .ard-checkbox-list__item {
-  flex-direction: row;
+.ard-checkbox-list.ard-compact {
+  gap: var(--ard-checkbox-list-gap-compact, 0);
 }
-.ard-checkbox-list.ard-align-right-clumped .ard-checkbox-list__item, .ard-checkbox-list.ard-align-right-split .ard-checkbox-list__item {
-  flex-direction: row-reverse;
+.ard-checkbox-list.ard-compact .ard-checkbox-list__item {
+  gap: var(--ard-checkbox-list-item-gap-compact, 0.325rem);
+  height: var(--ard-checkbox-list-item-height-compact, 2rem);
 }
-.ard-checkbox-list.ard-align-left-clumped .ard-checkbox-list__item, .ard-checkbox-list.ard-align-right-clumped .ard-checkbox-list__item {
+.ard-checkbox-list.ard-align-left-clumped .ard-checkbox-list__item label, .ard-checkbox-list.ard-align-right-split .ard-checkbox-list__item label {
   justify-content: flex-start;
 }
-.ard-checkbox-list.ard-align-left-split .ard-checkbox-list__item, .ard-checkbox-list.ard-align-right-split .ard-checkbox-list__item {
-  justify-content: space-between;
+.ard-checkbox-list.ard-align-left-split .ard-checkbox-list__item label, .ard-checkbox-list.ard-align-right-clumped .ard-checkbox-list__item label {
+  justify-content: flex-end;
+}
+.ard-checkbox-list.ard-align-right-split .ard-checkbox-list__item, .ard-checkbox-list.ard-align-right-clumped .ard-checkbox-list__item {
+  flex-direction: row-reverse;
 }
 
 /*# sourceMappingURL=checkbox-list.css.map */

package/prebuilt-themes/default/checkbox-list.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/checkbox-list.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;ECPF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDAI,YEpBI;;AFuBJ;EACE;;AAIF;EACE;;AAGJ;EACE;;AAGE;EACE;;AAIN;EACE;;AAEA;EACE;;AAKJ;EACE;EACA;;AAMF;EACE;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE","file":"checkbox-list.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/checkbox-list.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EChCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDyBI,YE7CI;;AFgDJ;EACE;;AAIF;EACE;;AAGJ;EACE;EACA;;AAGE;EACE;;AAIN;EACE;;AAEA;EACE;;AAIN;EACE;;AAEA;EACE;EACA;;AAOA;EACE;;AAOF;EACE;;AAMJ;EACE","file":"checkbox-list.css"}

package/prebuilt-themes/default/chips.css

@@ -293,20 +293,25 @@
 }
 .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected {
   color: var(--ard-cmpcl--content);
+  border-color: var(--ard-cmpcl--content);
 }
 .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected > .ard-focus-overlay {
-  opacity: 7.5%;
+  opacity: 12%;
 }
 .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:focus > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:focus > .ard-focus-overlay {
-  opacity: 15%;
+  opacity: 17%;
 }
 .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:active > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:active > .ard-focus-overlay {
-  opacity: 20%;
+  opacity: 22%;
 }
 .ard-chip-wrapper.ard-appearance-outlined-strong > .ard-focus-overlay {
-  opacity: 7.5%;
+  opacity: 12%;
   background: var(--ard-cmpcl--bg-colored);
 }
+.ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable {
+  color: var(--ard-text2);
+  border: 1px solid var(--ard-detail-light);
+}
 .ard-chip-wrapper.ard-chip-align-left {
   flex-direction: row;
   padding-left: 2px;

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;ECsEE;EDjEA;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;EHvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EGgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EH7CN;EACA;EACA,yBACE;EG4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;AHUN;EAEE;;AAEF;EACE;;AAEF;EACE;;AD3DF;EACE;;AAEF;ECjBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDUE,YE9BM;EF+BN;;AAGF;EACE;EACA;EACA;;AAIE;EACE;;AAIF;EACE;;AAIJ;EClDF;EACA;EACA,yBACE;;ADkDE;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;ECsEE;EDjEA;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;EHvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EGgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EH7CN;EACA;EACA,yBACE;EG4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;AHUN;EAEE;;AAEF;EACE;;AAEF;EACE;;AD3DF;EACE;;AAEF;ECjBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDUE,YE9BM;EF+BN;;AAGF;EACE;EACA;EACA;;AAIE;EACE;;AAIF;EACE;;AAIJ;EClDF;EACA;EACA,yBACE;;ADkDE;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE,kBE/DC;EFgED,OE7DE;EF8DF;;AAEA;EACE;EACA;;AAIN;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAIA;EACE;;AAIF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAIA;EACE;;AAIF;EACE;;AAOR;EACE;EACA;;AAEF;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

@@ -33,6 +33,12 @@
   --ard-gold: #ffc107;
   --ard-clear-button-size: 0.9rem;
   --ard-dropdown-button-size: 0.4rem;
+  --ard-form-field-height: 2.3125rem;
+  --ard-form-field-height-compact: 1.6875rem;
+  --ard-form-field-font-size: 1rem;
+  --ard-form-field-font-size-compact: 1rem;
+  --ard-form-field-padding: 0 0.375rem;
+  --ard-form-field-padding-compact: 0 0.375rem;
   --ard-primary-50: 234, 235, 243;
   --ard-primary-100: 159, 167, 228;
   --ard-primary-300: 78, 99, 219;

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;EAEA;EACA;;;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;EACA;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;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.3125rem;
+  min-height: var(--ard-form-field-height);
   height: max-content;
   max-width: 100%;
   display: flex;
@@ -36,7 +36,7 @@
   padding-right: 0.375em;
 }
 .ard-form-field-frame.ard-compact {
-  min-height: 1.6875rem;
+  min-height: var(--ard-form-field-height-compact);
   font-size: 0.85rem;
   line-height: 1;
 }
@@ -98,4 +98,8 @@
   opacity: 4.5%;
 }
 
+.ard-readonly .ard-form-field-frame:hover .ard-form-field-overlay {
+  opacity: 0;
+}
+
 /*# sourceMappingURL=form-field-frame.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field-frame.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EC8DA;ED5BA;EACA;EACA;;AAlCA;EACE;EACA;;AAEA;EACE;;AAGJ;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;;ACAF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;AAOF;EAEE;;AAEF;EACE;;AAEF;EACE;;ADlCF;EACE,YEnDM;EFoDN;EACA,YACE;;AAKF;EACE;;AAIF;EACE;;;AAIN;EACE;EACA;;AAGE;EACE","file":"form-field-frame.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field-frame.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAGA;EACE;EACA,YCoCkB;EDnClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EE8DA;EF5BA;EACA;EACA;;AAlCA;EACE;EACA;;AAEA;EACE;;AAGJ;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE,YCEwB;EDDxB;EACA;;AEAF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;AAOF;EAEE;;AAEF;EACE;;AAEF;EACE;;AFlCF;EACE,YCnDM;EDoDN;EACA;;AAIA;EACE;;AAIF;EACE;;;AAIN;EACE;EACA;;AAGE;EACE;;;AAMF;EACE","file":"form-field-frame.css"}

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

@@ -40,34 +40,51 @@ ard-horizontal-form-field {
   min-height: 1.1em;
 }
 .ard-form-field .ard-form-field__hints-right > *,
-.ard-horizontal-form-field .ard-form-field__hints-right > * {
-  padding-left: 0.25rem;
+.ard-form-field .ard-form-field__errors-right > *,
+.ard-horizontal-form-field .ard-form-field__hints-right > *,
+.ard-horizontal-form-field .ard-form-field__errors-right > * {
+  padding-left: 0.5rem;
 }
 .ard-form-field .ard-hint,
 .ard-form-field .ard-error,
 .ard-horizontal-form-field .ard-hint,
 .ard-horizontal-form-field .ard-error {
   font-size: 1em;
-  line-height: 1.1;
-  display: block;
-  height: 1.1em;
+  line-height: 1.2;
+  display: inline-grid;
+  min-height: 1.2em;
 }
 .ard-form-field .ard-hint,
 .ard-horizontal-form-field .ard-hint {
   color: var(--ard-text2);
 }
-.ard-form-field .ard-error,
-.ard-horizontal-form-field .ard-error {
+.ard-form-field .ard-error:not(.ard-hint-error),
+.ard-form-field .ard-form-field__errors .ard-hint-error,
+.ard-horizontal-form-field .ard-error:not(.ard-hint-error),
+.ard-horizontal-form-field .ard-form-field__errors .ard-hint-error {
   color: rgb(var(--ard-danger-700));
   overflow: hidden;
+}
+.ard-form-field .ard-error:not(.ard-hint-error),
+.ard-horizontal-form-field .ard-error:not(.ard-hint-error) {
   animation: errorAppear 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
+.ard-form-field .ard-form-field__default-hint,
+.ard-form-field .ard-form-field__default-error,
+.ard-horizontal-form-field .ard-form-field__default-hint,
+.ard-horizontal-form-field .ard-form-field__default-error {
+  gap: 0.375em;
+}
 .ard-form-field.ard-form-field__with-error .ard-label,
-.ard-horizontal-form-field.ard-form-field__with-error .ard-label {
+.ard-form-field.ard-form-field__with-error ard-label,
+.ard-horizontal-form-field.ard-form-field__with-error .ard-label,
+.ard-horizontal-form-field.ard-form-field__with-error ard-label {
   color: rgb(var(--ard-danger-700));
 }
 .ard-form-field.ard-form-field__is-success .ard-label,
-.ard-horizontal-form-field.ard-form-field__is-success .ard-label {
+.ard-form-field.ard-form-field__is-success ard-label,
+.ard-horizontal-form-field.ard-form-field__is-success .ard-label,
+.ard-horizontal-form-field.ard-form-field__is-success ard-label {
   color: rgb(var(--ard-success-700));
 }
 .ard-form-field.ard-form-field__control-disabled .ard-label,
@@ -87,7 +104,8 @@ ard-horizontal-form-field {
 }
 .ard-horizontal-form-field .ard-form-field__label-container {
   width: var(--ard-horizontal-form-field-label-width, 12rem);
-  height: 2.3125rem;
+  min-width: var(--ard-horizontal-form-field-label-width, 12rem);
+  height: var(--ard-form-field-height);
   display: flex;
   align-items: center;
   justify-content: var(--ard-horizontal-form-field-label-align, flex-start);
@@ -96,15 +114,19 @@ ard-horizontal-form-field {
   flex-grow: 1;
 }
 .ard-horizontal-form-field:has(.ard-form-field__input .ard-compact) .ard-form-field__label-container {
-  height: 1.5625rem;
+  height: var(--ard-form-field-height-compact);
+}
+
+ard-label {
+  display: flex;
 }
 
 @keyframes errorAppear {
   from {
-    height: 0;
+    grid-template-rows: 0fr;
   }
   to {
-    height: 1.1em;
+    grid-template-rows: 1fr;
   }
 }