@ardium-ui/ui 4.1.1 → 4.1.2

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-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,12 @@
 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";
 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 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,8 +1,8 @@
 import { AfterViewInit, ElementRef, OnInit } from '@angular/core';
-import { _NgModelComponentBase } from '../_internal/ngmodel-component';
+import { _FormFieldComponentBase } from '../_internal/form-field-component';
 import { _FileInputBaseDefaults } from './file-input-base.defaults';
 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;
     abstract readonly componentId: string;
     readonly fileInputEl: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;

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

@@ -1,7 +1,7 @@
 export interface FileInputBrowseContext {
     browse: () => void;
 }
-export interface FileInputFileAmountContext {
+export interface FileInputFileAmountContext extends FileInputBrowseContext {
     amount: number;
 }
 export interface FileInputFilesContext extends FileInputFileAmountContext {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ardium-ui/ui",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",

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);

package/themes/default/_clear-button.scss

@@ -1,73 +1,73 @@
-@use './mixins' as defaultMixins;
-@use '../variables' as ARD;
-
-@mixin clearButton() {
-  ard-clear-button {
-    height: ARD.$clear-button-size;
-    width: ARD.$clear-button-size;
-    position: relative;
-  }
-
-  .ard-clear-btn-wrapper {
-    cursor: pointer;
-    font-size: medium;
-    color: ARD.$detail;
-    width: ARD.$clear-button-size;
-    height: ARD.$clear-button-size;
-    line-height: 1em;
-    border-radius: 999px;
-    border: none;
-    padding: 0;
-    background: transparent;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    outline: none;
-    color: inherit;
-
-    .ard-hitbox {
-      position: absolute;
-      left: -1px;
-      right: -1px;
-      top: -1px;
-      bottom: -1px;
-    }
-
-    .ard-focus-overlay {
-      @include defaultMixins.focus-overlay(1px);
-      background: currentColor;
-    }
-
-    .ard-clear-btn {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-
-      &::before {
-        content: 'close';
-        @include defaultMixins.icon;
-        font-size: 70%;
-      }
-    }
-
-    &:hover {
-      .ard-focus-overlay {
-        opacity: 5%;
-      }
-    }
-
-    &:focus {
-      .ard-focus-overlay {
-        opacity: 8%;
-      }
-    }
-
-    &:active {
-      .ard-focus-overlay {
-        opacity: 15%;
-      }
-    }
-  }
-}
+@use './mixins' as defaultMixins;
+@use '../variables' as ARD;
+
+@mixin clearButton() {
+  ard-clear-button {
+    height: ARD.$clear-button-size;
+    width: ARD.$clear-button-size;
+    position: relative;
+  }
+
+  .ard-clear-btn-wrapper {
+    cursor: pointer;
+    font-size: medium;
+    color: ARD.$detail;
+    width: ARD.$clear-button-size;
+    height: ARD.$clear-button-size;
+    line-height: 1em;
+    border-radius: 999px;
+    border: none;
+    padding: 0;
+    background: transparent;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    outline: none;
+    color: inherit;
+
+    .ard-hitbox {
+      position: absolute;
+      left: -1px;
+      right: -1px;
+      top: -1px;
+      bottom: -1px;
+    }
+
+    .ard-focus-overlay {
+      @include defaultMixins.focus-overlay(1px);
+      background: currentColor;
+    }
+
+    .ard-clear-btn {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      &::before {
+        content: 'close';
+        @include defaultMixins.icon;
+        font-size: 70%;
+      }
+    }
+
+    &:hover {
+      .ard-focus-overlay {
+        opacity: 5%;
+      }
+    }
+
+    &:focus {
+      .ard-focus-overlay {
+        opacity: 8%;
+      }
+    }
+
+    &:active {
+      .ard-focus-overlay {
+        opacity: 15%;
+      }
+    }
+  }
+}