@ardium-ui/ui 4.1.1 → 4.2.0

package/lib/file-inputs/file-drop-area/file-drop-area.component.d.ts

@@ -1,9 +1,9 @@
-import { TemplateRef } from '@angular/core';
 import { ComponentColor } from '../../types/colors.types';
 import { FormElementVariant } from '../../types/theming.types';
 import { _FileInputComponentBase } from '../file-input-base';
 import { FileInputBrowseContext, FileInputFileAmountContext, FileInputFilesContext } from '../file-input-types';
 import { ArdFileDropAreaDefaults } from './file-drop-area.defaults';
+import { ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaUploadedContentTemplateDirective } from './file-drop-area.directives';
 import * as i0 from "@angular/core";
 export declare class ArdiumFileDropAreaComponent extends _FileInputComponentBase {
     protected readonly _DEFAULTS: ArdFileDropAreaDefaults;
@@ -15,9 +15,9 @@ export declare class ArdiumFileDropAreaComponent extends _FileInputComponentBase
     protected _wasMousedownOnElement: true | null;
     onMousedown(): void;
     onMouseup(): void;
-    idleTemplate: TemplateRef<FileInputBrowseContext> | null;
-    dragoverTemplate: TemplateRef<FileInputFilesContext> | null;
-    uploadedTemplate: TemplateRef<FileInputFilesContext> | null;
+    readonly idleTemplate: import("@angular/core").Signal<ArdiumFileDropAreaIdleContentTemplateDirective | undefined>;
+    readonly dragoverTemplate: import("@angular/core").Signal<ArdiumFileDropAreaDragoverContentTemplateDirective | undefined>;
+    readonly uploadedTemplate: import("@angular/core").Signal<ArdiumFileDropAreaUploadedContentTemplateDirective | undefined>;
     getIdleContext(): FileInputBrowseContext;
     getDragoverContext(): FileInputFileAmountContext;
     getUploadedContext(): FileInputFilesContext;

package/lib/file-inputs/file-drop-area/file-drop-area.module.d.ts

@@ -7,6 +7,6 @@ import * as i5 from "../../icon/icon.module";
 import * as i6 from "@ardium-ui/devkit";
 export declare class ArdiumFileDropAreaModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFileDropAreaModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumFileDropAreaModule, [typeof i1.ArdiumFileDropAreaComponent, typeof i2.ArdiumFileDropAreaIdleContentTemplateDirective, typeof i2.ArdiumFileDropAreaDragoverContentTemplateDirective, typeof i2.ArdiumFileDropAreaUploadedContentTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumButtonModule, typeof i5.ArdiumIconModule, typeof i6.ArdiumFilesizePipeModule, typeof i6.ArdiumFilenamePipeModule, typeof i6.ArdiumFileextPipeModule, typeof i6.ArdiumClickOutsideEventModule], [typeof i1.ArdiumFileDropAreaComponent, typeof i2.ArdiumFileDropAreaIdleContentTemplateDirective, typeof i2.ArdiumFileDropAreaDragoverContentTemplateDirective, typeof i2.ArdiumFileDropAreaUploadedContentTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumFileDropAreaModule, [typeof i1.ArdiumFileDropAreaComponent, typeof i2.ArdiumFileDropAreaIdleContentTemplateDirective, typeof i2.ArdiumFileDropAreaDragoverContentTemplateDirective, typeof i2.ArdiumFileDropAreaUploadedContentTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumButtonModule, typeof i5.ArdiumIconModule, typeof i6.ArdiumFilePipesModule, typeof i6.ArdiumClickOutsideModule], [typeof i1.ArdiumFileDropAreaComponent, typeof i2.ArdiumFileDropAreaIdleContentTemplateDirective, typeof i2.ArdiumFileDropAreaDragoverContentTemplateDirective, typeof i2.ArdiumFileDropAreaUploadedContentTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumFileDropAreaModule>;
 }

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

@@ -1,9 +1,9 @@
-import { TemplateRef } from '@angular/core';
 import { ComponentColor } from '../../types/colors.types';
 import { FormElementAppearance, FormElementVariant } from '../../types/theming.types';
 import { _FileInputComponentBase } from '../file-input-base';
 import { FileInputBrowseContext, FileInputFileAmountContext, FileInputFilesContext } from '../file-input-types';
 import { ArdFileInputDefaults } from './file-input.defaults';
+import { ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputUploadedContentTemplateDirective } from './file-input.directives';
 import * as i0 from "@angular/core";
 export declare class ArdiumFileInputComponent extends _FileInputComponentBase {
     protected readonly _DEFAULTS: ArdFileInputDefaults;
@@ -15,7 +15,7 @@ export declare class ArdiumFileInputComponent extends _FileInputComponentBase {
     readonly inputAttrs: import("@angular/core").InputSignal<Record<string, any>>;
     readonly placeholder: import("@angular/core").InputSignal<string>;
     readonly ngClasses: import("@angular/core").Signal<string>;
-    placeholderTemplate?: TemplateRef<any>;
+    readonly placeholderTemplate: import("@angular/core").Signal<ArdFileInputPlaceholderTemplateDirective | undefined>;
     get shouldDisplayPlaceholder(): boolean;
     readonly clearable: import("@angular/core").InputSignalWithTransform<boolean, any>;
     readonly clearButtonTitle: import("@angular/core").InputSignal<string>;
@@ -24,14 +24,15 @@ export declare class ArdiumFileInputComponent extends _FileInputComponentBase {
     clear(): void;
     readonly clearEvent: import("@angular/core").OutputEmitterRef<void>;
     readonly touched: import("@angular/core").WritableSignal<boolean>;
-    prefixTemplate?: TemplateRef<any>;
-    suffixTemplate?: TemplateRef<any>;
-    idleTemplate: TemplateRef<FileInputBrowseContext> | null;
-    dragoverTemplate: TemplateRef<FileInputFilesContext> | null;
-    uploadedTemplate: TemplateRef<FileInputFilesContext> | null;
+    readonly prefixTemplate: import("@angular/core").Signal<ArdFileInputPrefixTemplateDirective | undefined>;
+    readonly suffixTemplate: import("@angular/core").Signal<ArdFileInputSuffixTemplateDirective | undefined>;
+    readonly idleTemplate: import("@angular/core").Signal<ArdiumFileInputIdleContentTemplateDirective | undefined>;
+    readonly dragoverTemplate: import("@angular/core").Signal<ArdiumFileInputDragoverContentTemplateDirective | undefined>;
+    readonly uploadedTemplate: import("@angular/core").Signal<ArdiumFileInputUploadedContentTemplateDirective | undefined>;
+    readonly folderIconTemplate: import("@angular/core").Signal<ArdiumFileInputFolderIconTemplateDirective | undefined>;
     getIdleContext(): FileInputBrowseContext;
     getDragoverContext(): FileInputFileAmountContext;
     getUploadedContext(): FileInputFilesContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFileInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumFileInputComponent, "ard-file-input", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearButtonTitle": { "alias": "clearButtonTitle"; "required": false; "isSignal": true; }; }, { "clearEvent": "clear"; }, ["placeholderTemplate", "prefixTemplate", "suffixTemplate", "idleTemplate", "dragoverTemplate", "uploadedTemplate"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumFileInputComponent, "ard-file-input", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearButtonTitle": { "alias": "clearButtonTitle"; "required": false; "isSignal": true; }; }, { "clearEvent": "clear"; }, ["placeholderTemplate", "prefixTemplate", "suffixTemplate", "idleTemplate", "dragoverTemplate", "uploadedTemplate", "folderIconTemplate"], never, false, never>;
 }

package/lib/file-inputs/file-input/file-input.directives.d.ts

@@ -37,3 +37,9 @@ export declare class ArdiumFileInputUploadedContentTemplateDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFileInputUploadedContentTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ArdiumFileInputUploadedContentTemplateDirective, "ard-file-input > ng-template[ard-dropped-content-tmp]", never, {}, {}, never, never, false, never>;
 }
+export declare class ArdiumFileInputFolderIconTemplateDirective {
+    template: TemplateRef<undefined>;
+    constructor(template: TemplateRef<undefined>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFileInputFolderIconTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdiumFileInputFolderIconTemplateDirective, "ard-file-input > ng-template[ard-folder-icon-tmp]", never, {}, {}, never, never, false, never>;
+}

package/lib/file-inputs/file-input/file-input.module.d.ts

@@ -1,11 +1,13 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./file-input.component";
-import * as i2 from "@angular/common";
-import * as i3 from "../../form-field-frame/form-field-frame.module";
-import * as i4 from "../../_internal/clear-button/clear-button.module";
-import * as i5 from "../../icon/icon.module";
+import * as i2 from "./file-input.directives";
+import * as i3 from "@angular/common";
+import * as i4 from "../../form-field-frame/form-field-frame.module";
+import * as i5 from "../../_internal/clear-button/clear-button.module";
+import * as i6 from "../../icon/icon.module";
+import * as i7 from "@ardium-ui/devkit";
 export declare class ArdiumFileInputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFileInputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumFileInputModule, [typeof i1.ArdiumFileInputComponent], [typeof i2.CommonModule, typeof i3.ArdiumFormFieldFrameModule, typeof i4._ClearButtonModule, typeof i5.ArdiumIconModule], [typeof i1.ArdiumFileInputComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumFileInputModule, [typeof i1.ArdiumFileInputComponent, typeof i2.ArdiumFileInputFolderIconTemplateDirective, typeof i2.ArdiumFileInputUploadedContentTemplateDirective, typeof i2.ArdiumFileInputDragoverContentTemplateDirective, typeof i2.ArdiumFileInputIdleContentTemplateDirective, typeof i2.ArdFileInputSuffixTemplateDirective, typeof i2.ArdFileInputPrefixTemplateDirective, typeof i2.ArdFileInputPlaceholderTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumFormFieldFrameModule, typeof i5._ClearButtonModule, typeof i6.ArdiumIconModule, typeof i7.ArdiumFilePipesModule], [typeof i1.ArdiumFileInputComponent, typeof i2.ArdiumFileInputFolderIconTemplateDirective, typeof i2.ArdiumFileInputUploadedContentTemplateDirective, typeof i2.ArdiumFileInputDragoverContentTemplateDirective, typeof i2.ArdiumFileInputIdleContentTemplateDirective, typeof i2.ArdFileInputSuffixTemplateDirective, typeof i2.ArdFileInputPrefixTemplateDirective, typeof i2.ArdFileInputPlaceholderTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumFileInputModule>;
 }

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

@@ -1,9 +1,13 @@
 import { AfterViewInit, ElementRef, OnInit } from '@angular/core';
-import { _NgModelComponentBase } from '../_internal/ngmodel-component';
+import { FileSystemStartDirectory } from '@ardium-ui/devkit';
+import { _FormFieldComponentBase } from '../_internal/form-field-component';
+import { Nullable } from '../types/utility.types';
 import { _FileInputBaseDefaults } from './file-input-base.defaults';
+import { FileInputFailedUpload, FileInputFileTypes } from './file-input-types';
 import * as i0 from "@angular/core";
-export declare abstract class _FileInputComponentBase extends _NgModelComponentBase implements OnInit, AfterViewInit {
+export declare abstract class _FileInputComponentBase extends _FormFieldComponentBase implements OnInit, AfterViewInit {
     protected readonly _DEFAULTS: _FileInputBaseDefaults;
+    private readonly _fileSystemService;
     abstract readonly componentId: string;
     readonly fileInputEl: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
     readonly name: import("@angular/core").InputSignal<string>;
@@ -12,14 +16,27 @@ export declare abstract class _FileInputComponentBase extends _NgModelComponentB
     ngAfterViewInit(): void;
     readonly compact: import("@angular/core").InputSignalWithTransform<boolean, any>;
     readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly maxFiles: import("@angular/core").InputSignalWithTransform<Nullable<number>, any>;
+    readonly maxFilesWithMultiple: import("@angular/core").Signal<number>;
     readonly blockAfterUpload: import("@angular/core").InputSignalWithTransform<boolean, any>;
     get shouldBeBlocked(): boolean;
+    readonly maxFileSizeBytes: import("@angular/core").InputSignalWithTransform<Nullable<number>, any>;
+    readonly accept: import("@angular/core").InputSignal<string | string[]>;
+    readonly directoryId: import("@angular/core").InputSignal<Nullable<string>>;
+    readonly startDirectory: import("@angular/core").InputSignal<Nullable<FileSystemStartDirectory>>;
+    readonly fileTypes: import("@angular/core").InputSignal<Nullable<FileInputFileTypes>>;
+    readonly acceptString: import("@angular/core").Signal<string>;
+    readonly acceptedMimeTypes: import("@angular/core").Signal<{
+        mimeType: string;
+        extensions: Set<string>;
+    }[] | null>;
     protected _value: File[] | null;
     get value(): File[] | null;
     set value(v: File | File[] | null);
     readonly valueChange: import("@angular/core").OutputEmitterRef<File[] | null>;
     readonly changeEvent: import("@angular/core").OutputEmitterRef<File[] | null>;
-    readonly dragFilesEvent: import("@angular/core").OutputEmitterRef<File[] | null>;
+    readonly dragFilesEvent: import("@angular/core").OutputEmitterRef<File[]>;
+    readonly failedUploadEvent: import("@angular/core").OutputEmitterRef<FileInputFailedUpload[]>;
     protected _valueBeforeInit: File[] | null;
     writeValue(v: File | File[] | null): void;
     protected _writeValue(v: File | File[] | null, emitEvents?: boolean): void;
@@ -32,8 +49,9 @@ export declare abstract class _FileInputComponentBase extends _NgModelComponentB
     onDragleave(): void;
     onDrop(event: DragEvent): void;
     onInputChange(): void;
+    private _filterFilesBasedOnSizeAndCount;
     protected _countDragenterFiles(data: DataTransfer | null): number | null;
     protected _updateElementValue(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<_FileInputComponentBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_FileInputComponentBase, never, never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "blockAfterUpload": { "alias": "blockAfterUpload"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "changeEvent": "change"; "dragFilesEvent": "dragFiles"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_FileInputComponentBase, never, never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "blockAfterUpload": { "alias": "blockAfterUpload"; "required": false; "isSignal": true; }; "maxFileSizeBytes": { "alias": "maxFileSizeBytes"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "directoryId": { "alias": "directoryId"; "required": false; "isSignal": true; }; "startDirectory": { "alias": "startDirectory"; "required": false; "isSignal": true; }; "fileTypes": { "alias": "fileTypes"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "changeEvent": "change"; "dragFilesEvent": "dragFiles"; "failedUploadEvent": "failedUpload"; }, never, never, false, never>;
 }

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

@@ -1,10 +1,41 @@
 export interface FileInputBrowseContext {
     browse: () => void;
 }
-export interface FileInputFileAmountContext {
+export interface FileInputFileAmountContext extends FileInputBrowseContext {
     amount: number;
 }
 export interface FileInputFilesContext extends FileInputFileAmountContext {
     $implicit: File[];
     files: File[];
 }
+export type FileInputFileType = {
+    /**
+     * An optional desciption of the category of file types allowed. Default to be an empty string.
+     */
+    description?: string;
+    /**
+     * An object with the keys set to the MIME type and the values an array of file extensions (see below for an example).
+     * ```ts
+     * readonly FILE_TYPES = [
+     *   {
+     *     description: "Text file",
+     *     accept: { "text/plain": [".txt"] },
+     *   },
+     * ];
+     * ```
+     */
+    accept: Record<string, string[]>;
+};
+export type FileInputFileTypes = FileInputFileType[];
+export declare const FileInputFailedUploadReason: {
+    readonly InvalidMimeType: "InvalidMimeType";
+    readonly MimeTypeFoundButExtensionNotAllowed: "MimeTypeFoundButExtensionNotAllowed";
+    readonly InvalidExtension: "InvalidExtension";
+    readonly FileTooBig: "FileTooBig";
+    readonly TooManyFiles: "TooManyFiles";
+};
+export type FileInputFailedUploadReason = typeof FileInputFailedUploadReason[keyof typeof FileInputFailedUploadReason];
+export interface FileInputFailedUpload {
+    file: File;
+    reason: FileInputFailedUploadReason;
+}

package/lib/inputs/date-input/date-input.module.d.ts

@@ -9,6 +9,6 @@ import * as i7 from "../../buttons/icon-button/icon-button.module";
 import * as i8 from "../../icon/icon.module";
 export declare class ArdiumDateInputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumDateInputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumDateInputModule, [typeof i1.ArdiumDateInputComponent], [typeof i2.CommonModule, typeof i3.ArdiumFormFieldFrameModule, typeof i4.ArdiumDropdownPanelModule, typeof i5.ArdiumClickOutsideEventModule, typeof i6.ArdiumCalendarModule, typeof i7.ArdiumIconButtonModule, typeof i8.ArdiumIconModule], [typeof i1.ArdiumDateInputComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumDateInputModule, [typeof i1.ArdiumDateInputComponent], [typeof i2.CommonModule, typeof i3.ArdiumFormFieldFrameModule, typeof i4.ArdiumDropdownPanelModule, typeof i5.ArdiumClickOutsideModule, typeof i6.ArdiumCalendarModule, typeof i7.ArdiumIconButtonModule, typeof i8.ArdiumIconModule], [typeof i1.ArdiumDateInputComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumDateInputModule>;
 }

package/lib/inputs/input/input.module.d.ts

@@ -8,6 +8,6 @@ import * as i6 from "../../dropdown-panel/dropdown-panel.module";
 import * as i7 from "@ardium-ui/devkit";
 export declare class ArdiumInputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumInputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumInputModule, [typeof i1.ArdiumInputComponent, typeof i2.ArdInputSuggestionTemplateDirective, typeof i2.ArdInputPlaceholderTemplateDirective, typeof i2.ArdInputLoadingTemplateDirective, typeof i2.ArdInputPrefixTemplateDirective, typeof i2.ArdInputSuffixTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumFormFieldFrameModule, typeof i5._ClearButtonModule, typeof i6.ArdiumDropdownPanelModule, typeof i7.ArdiumClickOutsideEventModule], [typeof i1.ArdiumInputComponent, typeof i2.ArdInputSuggestionTemplateDirective, typeof i2.ArdInputPlaceholderTemplateDirective, typeof i2.ArdInputLoadingTemplateDirective, typeof i2.ArdInputPrefixTemplateDirective, typeof i2.ArdInputSuffixTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumInputModule, [typeof i1.ArdiumInputComponent, typeof i2.ArdInputSuggestionTemplateDirective, typeof i2.ArdInputPlaceholderTemplateDirective, typeof i2.ArdInputLoadingTemplateDirective, typeof i2.ArdInputPrefixTemplateDirective, typeof i2.ArdInputSuffixTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumFormFieldFrameModule, typeof i5._ClearButtonModule, typeof i6.ArdiumDropdownPanelModule, typeof i7.ArdiumClickOutsideModule], [typeof i1.ArdiumInputComponent, typeof i2.ArdInputSuggestionTemplateDirective, typeof i2.ArdInputPlaceholderTemplateDirective, typeof i2.ArdInputLoadingTemplateDirective, typeof i2.ArdInputPrefixTemplateDirective, typeof i2.ArdInputSuffixTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumInputModule>;
 }

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

@@ -6,6 +6,6 @@ import * as i4 from "@ardium-ui/devkit";
 import * as i5 from "../../buttons/button/button.module";
 export declare class ArdiumNumberInputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumNumberInputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumNumberInputModule, [typeof i1.ArdiumNumberInputComponent, typeof i2.ArdNumberInputPlaceholderTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumHoldEventModule, typeof i5.ArdiumButtonModule], [typeof i1.ArdiumNumberInputComponent, typeof i2.ArdNumberInputPlaceholderTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumNumberInputModule, [typeof i1.ArdiumNumberInputComponent, typeof i2.ArdNumberInputPlaceholderTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumHoldModule, typeof i5.ArdiumButtonModule], [typeof i1.ArdiumNumberInputComponent, typeof i2.ArdNumberInputPlaceholderTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumNumberInputModule>;
 }

package/lib/select/select.module.d.ts

@@ -9,6 +9,6 @@ import * as i7 from "@ardium-ui/devkit";
 import * as i8 from "../_internal/clear-button/clear-button.module";
 export declare class ArdiumSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumSelectModule, [typeof i1.ArdiumSelectComponent, typeof i2.ArdOptionTemplateDirective, typeof i2.ArdOptgroupTemplateDirective, typeof i2.ArdValueTemplateDirective, typeof i2.ArdSelectPlaceholderTemplateDirective, typeof i2.ArdLoadingSpinnerTemplateDirective, typeof i2.ArdLoadingPlaceholderTemplateDirective, typeof i2.ArdDropdownHeaderTemplateDirective, typeof i2.ArdDropdownFooterTemplateDirective, typeof i2.ArdNoItemsFoundTemplateDirective, typeof i2.ArdValueChipTemplateDirective, typeof i2.ArdItemLimitReachedTemplateDirective, typeof i2.ArdItemDisplayLimitTemplateDirective, typeof i2.ArdAddCustomTemplateDirective, typeof i2.ArdSelectPrefixTemplateDirective, typeof i2.ArdSelectSuffixTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumFormFieldFrameModule, typeof i5.ArdiumDropdownPanelModule, typeof i6.ArdiumChipModule, typeof i7.ArdiumClickOutsideEventModule, typeof i8._ClearButtonModule, typeof i7.ArdiumInnerHTMLModule], [typeof i1.ArdiumSelectComponent, typeof i2.ArdOptionTemplateDirective, typeof i2.ArdOptgroupTemplateDirective, typeof i2.ArdValueTemplateDirective, typeof i2.ArdSelectPlaceholderTemplateDirective, typeof i2.ArdLoadingSpinnerTemplateDirective, typeof i2.ArdLoadingPlaceholderTemplateDirective, typeof i2.ArdDropdownHeaderTemplateDirective, typeof i2.ArdDropdownFooterTemplateDirective, typeof i2.ArdNoItemsFoundTemplateDirective, typeof i2.ArdValueChipTemplateDirective, typeof i2.ArdItemLimitReachedTemplateDirective, typeof i2.ArdItemDisplayLimitTemplateDirective, typeof i2.ArdAddCustomTemplateDirective, typeof i2.ArdSelectPrefixTemplateDirective, typeof i2.ArdSelectSuffixTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumSelectModule, [typeof i1.ArdiumSelectComponent, typeof i2.ArdOptionTemplateDirective, typeof i2.ArdOptgroupTemplateDirective, typeof i2.ArdValueTemplateDirective, typeof i2.ArdSelectPlaceholderTemplateDirective, typeof i2.ArdLoadingSpinnerTemplateDirective, typeof i2.ArdLoadingPlaceholderTemplateDirective, typeof i2.ArdDropdownHeaderTemplateDirective, typeof i2.ArdDropdownFooterTemplateDirective, typeof i2.ArdNoItemsFoundTemplateDirective, typeof i2.ArdValueChipTemplateDirective, typeof i2.ArdItemLimitReachedTemplateDirective, typeof i2.ArdItemDisplayLimitTemplateDirective, typeof i2.ArdAddCustomTemplateDirective, typeof i2.ArdSelectPrefixTemplateDirective, typeof i2.ArdSelectSuffixTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumFormFieldFrameModule, typeof i5.ArdiumDropdownPanelModule, typeof i6.ArdiumChipModule, typeof i7.ArdiumClickOutsideModule, typeof i8._ClearButtonModule, typeof i7.ArdiumEscapeHTMLModule], [typeof i1.ArdiumSelectComponent, typeof i2.ArdOptionTemplateDirective, typeof i2.ArdOptgroupTemplateDirective, typeof i2.ArdValueTemplateDirective, typeof i2.ArdSelectPlaceholderTemplateDirective, typeof i2.ArdLoadingSpinnerTemplateDirective, typeof i2.ArdLoadingPlaceholderTemplateDirective, typeof i2.ArdDropdownHeaderTemplateDirective, typeof i2.ArdDropdownFooterTemplateDirective, typeof i2.ArdNoItemsFoundTemplateDirective, typeof i2.ArdValueChipTemplateDirective, typeof i2.ArdItemLimitReachedTemplateDirective, typeof i2.ArdItemDisplayLimitTemplateDirective, typeof i2.ArdAddCustomTemplateDirective, typeof i2.ArdSelectPrefixTemplateDirective, typeof i2.ArdSelectSuffixTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumSelectModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ardium-ui/ui",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
@@ -12,7 +12,7 @@
     "first-last": "^1.1.1",
     "more-rounding": "^4.2.2",
     "resolve-object-path": "^2.0.0",
-    "@ardium-ui/devkit": "^1.3.10",
+    "@ardium-ui/devkit": "^7.7.1",
     "simple-bool": "^3.0.1",
     "take-chance": "^4.3.2",
     "color": "^4.2.3"

package/prebuilt-themes/default/inputs/file-input.css

@@ -16,10 +16,10 @@
   box-sizing: border-box;
   font-size: 1rem;
   line-height: 1.25em;
-  padding: 0 0 0 0.375rem;
+  padding: 0 0.375rem;
   min-width: 10rem;
   max-width: 100%;
-  gap: 0.125rem;
+  gap: 0.375rem;
   cursor: default;
   border-radius: var(--ard-variant-border-radius);
 }
@@ -301,5 +301,26 @@
 .ard-file-input .ard-clear-btn-wrapper:active .ard-focus-overlay {
   opacity: 15%;
 }
+.ard-file-input .ard-input-container {
+  white-space: nowrap;
+}
+.ard-file-input .ard-input-container,
+.ard-file-input .ard-file-input__value,
+.ard-file-input .ard-file-input__uploaded,
+.ard-file-input .ard-file-input__full-file-name,
+.ard-file-input .ard-file-input__file-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.ard-file-input .ard-file-input__full-file-name {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  font-weight: 500;
+}
+
+ard-file-input .ard-form-field-content-container {
+  max-width: 100%;
+}
 
 /*# sourceMappingURL=file-input.css.map */

package/prebuilt-themes/default/inputs/file-input.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/file-input.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACKE;EACE;;;AAGJ;EDLE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECDA;EACA;EACA;EACA;EACA;EACA;;AChBA;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;;AFrHF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AC1BF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EErCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EF8BI,YGlDI;EHmDJ;;AAGA;EACE;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE;;AIpEN;EACE,QDkCgB;ECjChB,ODiCgB;EChChB;;AAGF;EACE;EACA;EACA,ODGK;ECFL,ODyBgB;ECxBhB,QDwBgB;ECvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EFvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EEgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EF7CN;EACA;EACA,yBACE;EE4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE","file":"file-input.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/file-input.scss","../../../../../projects/ui/src/themes/default/_coloring.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACKE;EACE;;;AAGJ;EDLE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECDA;EACA;EACA;EACA;EACA;EACA;;AChBA;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;;AFrHF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AC1BF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EErCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EF8BI,YGlDI;EHmDJ;;AAGA;EACE;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE;;AIpEN;EACE,QDkCgB;ECjChB,ODiCgB;EChChB;;AAGF;EACE;EACA;EACA,ODGK;ECFL,ODyBgB;ECxBhB,QDwBgB;ECvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EFvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EEgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EF7CN;EACA;EACA,yBACE;EE4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;AJWN;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AAGJ;EACE","file":"file-input.css"}

package/themes/_variables.scss

@@ -1,121 +1,121 @@
-$bg: var(--ard-bg);
-$bg-alt: var(--ard-bg-alt);
-$overlay: var(--ard-overlay);
-$overlay-rgb: var(--ard-overlay-rgb);
-$bg-d: var(--ard-bg-darker);
-$bg-f: var(--ard-bg-filled);
-$bg-f-alt: var(--ard-bg-filled-alt);
-$text: var(--ard-text);
-$text2: var(--ard-text2);
-$text3: var(--ard-text3);
-$text-alt: var(--ard-text-alt);
-$text2-alt: var(--ard-text2-alt);
-$text3-alt: var(--ard-text3-alt);
-$border-dark: var(--ard-border-dark);
-$border: var(--ard-border);
-$border-light: var(--ard-border-light);
-$detail: var(--ard-detail);
-$detail-light: var(--ard-detail-light);
-$detail-ultralight: var(--ard-detail-ultralight);
-$detail-ultralight-solid: var(--ard-detail-ultralight-solid);
-
-$lighten-overlay: var(--ard-lighten-overlay);
-$lighten-overlay-strong: var(--ard-lighten-overlay-strong);
-$lighten-overlay-medium: var(--ard-lighten-overlay-medium);
-$lighten-overlay-light: var(--ard-lighten-overlay-light);
-$darken-overlay: var(--ard-darken-overlay);
-$darken-overlay-strong: var(--ard-darken-overlay-strong);
-$darken-overlay-medium: var(--ard-darken-overlay-medium);
-$darken-overlay-light: var(--ard-darken-overlay-light);
-$darken-overlay-ultralight: var(--ard-darken-overlay-ultralight);
-
-$box-shadow: var(--ard-box-shadow);
-$card-shadow: var(--ard-card-shadow);
-$simple-shadow: var(--ard-simple-shadow);
-$simple-shadow2: var(--ard-simple-shadow2);
-$simple-shadow3: var(--ard-simple-shadow3);
-
-$timing-fn: cubic-bezier(0.4, 0, 0.2, 1);
-
-$clear-button-size: var(--ard-clear-button-size);
-$dropdown-button-size: var(--ard-dropdown-button-size);
-
-$gold: var(--ard-gold);
-
-$main50: rgb(var(--ard-primary-50));
-$main50-rgb: var(--ard-primary-50);
-$main100: rgb(var(--ard-primary-100));
-$main100-rgb: var(--ard-primary-100);
-$main300: rgb(var(--ard-primary-300));
-$main300-rgb: var(--ard-primary-300);
-$main500: rgb(var(--ard-primary-500));
-$main500-rgb: var(--ard-primary-500);
-$main700: rgb(var(--ard-primary-700));
-$main700-rgb: var(--ard-primary-700);
-$main900: rgb(var(--ard-primary-900));
-$main900-rgb: var(--ard-primary-900);
-
-$scnd50: rgb(var(--ard-secondary-50));
-$scnd50-rgb: var(--ard-secondary-50);
-$scnd100: rgb(var(--ard-secondary-100));
-$scnd100-rgb: var(--ard-secondary-100);
-$scnd300: rgb(var(--ard-secondary-300));
-$scnd300-rgb: var(--ard-secondary-300);
-$scnd500: rgb(var(--ard-secondary-500));
-$scnd500-rgb: var(--ard-secondary-500);
-$scnd700: rgb(var(--ard-secondary-700));
-$scnd700-rgb: var(--ard-secondary-700);
-$scnd900: rgb(var(--ard-secondary-900));
-$scnd900-rgb: var(--ard-secondary-900);
-
-$danger50: rgb(var(--ard-danger-50));
-$danger50-rgb: var(--ard-danger-50);
-$danger100: rgb(var(--ard-danger-100));
-$danger100-rgb: var(--ard-danger-100);
-$danger300: rgb(var(--ard-danger-300));
-$danger300-rgb: var(--ard-danger-300);
-$danger500: rgb(var(--ard-danger-500));
-$danger500-rgb: var(--ard-danger-500);
-$danger700: rgb(var(--ard-danger-700));
-$danger700-rgb: var(--ard-danger-700);
-$danger900: rgb(var(--ard-danger-900));
-$danger900-rgb: var(--ard-danger-900);
-
-$warn50: rgb(var(--ard-warn-50));
-$warn50-rgb: var(--ard-warn-50);
-$warn100: rgb(var(--ard-warn-100));
-$warn100-rgb: var(--ard-warn-100);
-$warn300: rgb(var(--ard-warn-300));
-$warn300-rgb: var(--ard-warn-300);
-$warn500: rgb(var(--ard-warn-500));
-$warn500-rgb: var(--ard-warn-500);
-$warn700: rgb(var(--ard-warn-700));
-$warn700-rgb: var(--ard-warn-700);
-$warn900: rgb(var(--ard-warn-900));
-$warn900-rgb: var(--ard-warn-900);
-
-$success50: rgb(var(--ard-success-50));
-$success50-rgb: var(--ard-success-50);
-$success100: rgb(var(--ard-success-100));
-$success100-rgb: var(--ard-success-100);
-$success300: rgb(var(--ard-success-300));
-$success300-rgb: var(--ard-success-300);
-$success500: rgb(var(--ard-success-500));
-$success500-rgb: var(--ard-success-500);
-$success700: rgb(var(--ard-success-700));
-$success700-rgb: var(--ard-success-700);
-$success900: rgb(var(--ard-success-900));
-$success900-rgb: var(--ard-success-900);
-
-$info50: rgb(var(--ard-info-50));
-$info50-rgb: var(--ard-info-50);
-$info100: rgb(var(--ard-info-100));
-$info100-rgb: var(--ard-info-100);
-$info300: rgb(var(--ard-info-300));
-$info300-rgb: var(--ard-info-300);
-$info500: rgb(var(--ard-info-500));
-$info500-rgb: var(--ard-info-500);
-$info700: rgb(var(--ard-info-700));
-$info700-rgb: var(--ard-info-700);
-$info900: rgb(var(--ard-info-900));
-$info900-rgb: var(--ard-info-900);
+$bg: var(--ard-bg);
+$bg-alt: var(--ard-bg-alt);
+$overlay: var(--ard-overlay);
+$overlay-rgb: var(--ard-overlay-rgb);
+$bg-d: var(--ard-bg-darker);
+$bg-f: var(--ard-bg-filled);
+$bg-f-alt: var(--ard-bg-filled-alt);
+$text: var(--ard-text);
+$text2: var(--ard-text2);
+$text3: var(--ard-text3);
+$text-alt: var(--ard-text-alt);
+$text2-alt: var(--ard-text2-alt);
+$text3-alt: var(--ard-text3-alt);
+$border-dark: var(--ard-border-dark);
+$border: var(--ard-border);
+$border-light: var(--ard-border-light);
+$detail: var(--ard-detail);
+$detail-light: var(--ard-detail-light);
+$detail-ultralight: var(--ard-detail-ultralight);
+$detail-ultralight-solid: var(--ard-detail-ultralight-solid);
+
+$lighten-overlay: var(--ard-lighten-overlay);
+$lighten-overlay-strong: var(--ard-lighten-overlay-strong);
+$lighten-overlay-medium: var(--ard-lighten-overlay-medium);
+$lighten-overlay-light: var(--ard-lighten-overlay-light);
+$darken-overlay: var(--ard-darken-overlay);
+$darken-overlay-strong: var(--ard-darken-overlay-strong);
+$darken-overlay-medium: var(--ard-darken-overlay-medium);
+$darken-overlay-light: var(--ard-darken-overlay-light);
+$darken-overlay-ultralight: var(--ard-darken-overlay-ultralight);
+
+$box-shadow: var(--ard-box-shadow);
+$card-shadow: var(--ard-card-shadow);
+$simple-shadow: var(--ard-simple-shadow);
+$simple-shadow2: var(--ard-simple-shadow2);
+$simple-shadow3: var(--ard-simple-shadow3);
+
+$timing-fn: cubic-bezier(0.4, 0, 0.2, 1);
+
+$clear-button-size: var(--ard-clear-button-size);
+$dropdown-button-size: var(--ard-dropdown-button-size);
+
+$gold: var(--ard-gold);
+
+$main50: rgb(var(--ard-primary-50));
+$main50-rgb: var(--ard-primary-50);
+$main100: rgb(var(--ard-primary-100));
+$main100-rgb: var(--ard-primary-100);
+$main300: rgb(var(--ard-primary-300));
+$main300-rgb: var(--ard-primary-300);
+$main500: rgb(var(--ard-primary-500));
+$main500-rgb: var(--ard-primary-500);
+$main700: rgb(var(--ard-primary-700));
+$main700-rgb: var(--ard-primary-700);
+$main900: rgb(var(--ard-primary-900));
+$main900-rgb: var(--ard-primary-900);
+
+$scnd50: rgb(var(--ard-secondary-50));
+$scnd50-rgb: var(--ard-secondary-50);
+$scnd100: rgb(var(--ard-secondary-100));
+$scnd100-rgb: var(--ard-secondary-100);
+$scnd300: rgb(var(--ard-secondary-300));
+$scnd300-rgb: var(--ard-secondary-300);
+$scnd500: rgb(var(--ard-secondary-500));
+$scnd500-rgb: var(--ard-secondary-500);
+$scnd700: rgb(var(--ard-secondary-700));
+$scnd700-rgb: var(--ard-secondary-700);
+$scnd900: rgb(var(--ard-secondary-900));
+$scnd900-rgb: var(--ard-secondary-900);
+
+$danger50: rgb(var(--ard-danger-50));
+$danger50-rgb: var(--ard-danger-50);
+$danger100: rgb(var(--ard-danger-100));
+$danger100-rgb: var(--ard-danger-100);
+$danger300: rgb(var(--ard-danger-300));
+$danger300-rgb: var(--ard-danger-300);
+$danger500: rgb(var(--ard-danger-500));
+$danger500-rgb: var(--ard-danger-500);
+$danger700: rgb(var(--ard-danger-700));
+$danger700-rgb: var(--ard-danger-700);
+$danger900: rgb(var(--ard-danger-900));
+$danger900-rgb: var(--ard-danger-900);
+
+$warn50: rgb(var(--ard-warn-50));
+$warn50-rgb: var(--ard-warn-50);
+$warn100: rgb(var(--ard-warn-100));
+$warn100-rgb: var(--ard-warn-100);
+$warn300: rgb(var(--ard-warn-300));
+$warn300-rgb: var(--ard-warn-300);
+$warn500: rgb(var(--ard-warn-500));
+$warn500-rgb: var(--ard-warn-500);
+$warn700: rgb(var(--ard-warn-700));
+$warn700-rgb: var(--ard-warn-700);
+$warn900: rgb(var(--ard-warn-900));
+$warn900-rgb: var(--ard-warn-900);
+
+$success50: rgb(var(--ard-success-50));
+$success50-rgb: var(--ard-success-50);
+$success100: rgb(var(--ard-success-100));
+$success100-rgb: var(--ard-success-100);
+$success300: rgb(var(--ard-success-300));
+$success300-rgb: var(--ard-success-300);
+$success500: rgb(var(--ard-success-500));
+$success500-rgb: var(--ard-success-500);
+$success700: rgb(var(--ard-success-700));
+$success700-rgb: var(--ard-success-700);
+$success900: rgb(var(--ard-success-900));
+$success900-rgb: var(--ard-success-900);
+
+$info50: rgb(var(--ard-info-50));
+$info50-rgb: var(--ard-info-50);
+$info100: rgb(var(--ard-info-100));
+$info100-rgb: var(--ard-info-100);
+$info300: rgb(var(--ard-info-300));
+$info300-rgb: var(--ard-info-300);
+$info500: rgb(var(--ard-info-500));
+$info500-rgb: var(--ard-info-500);
+$info700: rgb(var(--ard-info-700));
+$info700-rgb: var(--ard-info-700);
+$info900: rgb(var(--ard-info-900));
+$info900-rgb: var(--ard-info-900);