@ardium-ui/ui 3.2.7 → 3.3.0-alpha1

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

@@ -14,17 +14,57 @@ ard-digit-input {
 
 .ard-digit-input {
   display: flex;
-  gap: 0.5em;
+  gap: 0.375em;
+}
+.ard-digit-input.ard-appearance-outlined {
+  --ard-appearance-background: var(--ard-bg);
+  --ard-appearance-border-color: var(--ard-border);
+  --ard-appearance-border: 1px solid var(--ard-appearance-border-color);
+}
+.ard-digit-input.ard-appearance-outlined.ard-focused {
+  --ard-appearance-border-color: var(--ard-border-dark);
+}
+.ard-digit-input.ard-appearance-outlined.ard-has-error {
+  --ard-appearance-background: rgb(var(--ard-danger-50));
+  --ard-appearance-border-color: rgb(var(--ard-danger-500));
+}
+.ard-digit-input.ard-appearance-filled {
+  --ard-appearance-background: var(--ard-bg-filled);
+  --ard-appearance-border: none;
+}
+.ard-digit-input.ard-appearance-filled.ard-has-error {
+  --ard-appearance-background: rgb(var(--ard-danger-50));
+}
+.ard-digit-input.ard-appearance-transparent {
+  --ard-appearance-background: transparent;
+  --ard-appearance-border: none;
+}
+.ard-digit-input.ard-appearance-transparent.ard-has-error {
+  --ard-appearance-border: 1px solid rgba(var(--ard-danger-500), 0.1);
 }
 .ard-digit-input .ard-digit-input__item {
   height: max-content;
   display: flex;
+  height: 2.0625em;
+  box-sizing: border-box;
 }
-.ard-digit-input .ard-digit-input__item .ard-digit-input__input {
+.ard-digit-input .ard-digit-input__item.ard-digit-input__item-with-input {
   width: 2.0625em;
+}
+.ard-digit-input .ard-digit-input__item .ard-digit-input__input {
+  width: 100%;
+  height: 100%;
   box-sizing: border-box;
   text-align: center;
   caret-color: var(--ard-text3);
+  background: var(--ard-appearance-background);
+  border: var(--ard-appearance-border);
+  border-radius: var(--ard-variant-border-radius);
+  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.ard-digit-input .ard-digit-input__item .ard-digit-input__input::placeholder {
+  color: var(--ard-text3);
+  opacity: 60%;
 }
 .ard-digit-input .ard-digit-input__item .ard-digit-input__input:not(.ard-digit-input__input-empty) {
   caret-color: transparent;
@@ -32,14 +72,30 @@ ard-digit-input {
 .ard-digit-input .ard-digit-input__item .ard-digit-input__static {
   width: max-content;
   white-space: nowrap;
+  display: flex;
+  align-items: center;
 }
-.ard-digit-input.ard-shape-square .ard-digit-input__item .ard-digit-input__input {
+.ard-digit-input.ard-shape-square .ard-digit-input__item {
   height: 2.0625em;
 }
+.ard-digit-input.ard-shape-rectangle .ard-digit-input__item {
+  height: 2.68125em;
+}
 .ard-digit-input.ard-shape-rectangle .ard-digit-input__item .ard-digit-input__input {
   font-size: 1.2em;
-  width: 1.71875em;
-  height: 2.234375em;
+}
+.ard-digit-input.ard-has-error .ard-digit-input__item .ard-digit-input__input {
+  background-color: rgb(var(--ard-danger-50));
+  border-color: rgb(var(--ard-danger-500));
+}
+.ard-digit-input.ard-variant-rounded {
+  --ard-variant-border-radius: 0.25em;
+}
+.ard-digit-input.ard-variant-pill {
+  --ard-variant-border-radius: 9999px;
+}
+.ard-digit-input.ard-variant-sharp {
+  --ard-variant-border-radius: 0;
 }
 
 /*# sourceMappingURL=digit-input.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/digit-input.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA,OCCK;;;ADEP;AAAA;AAAA;AAAA;EAIE;EACA;;;AAEF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA,aCnBE;;ADqBF;EACE;;AAGJ;EACE;EACA;;AAKA;EACE;;AAMF;EACE;EACA;EACA","file":"digit-input.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/digit-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAEF;EAEE;EACA;;ACgBA;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAGJ;EACE;EACA;;AAEA;EACE;;ADxCJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA,aE3BE;EF4BF;EACA;EACA;EACA;;AAEA;EACE,OElCA;EFmCA;;AAGF;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;;AAEA;EACE;;AAMJ;EACE,kBELK;EFML;;AAIJ;EACE;;AAEF;EACE;;AAEF;EACE","file":"digit-input.css"}

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

@@ -14,7 +14,6 @@
   gap: 0.625em;
   cursor: text;
   box-sizing: border-box;
-  height: 2.0625em;
   font-size: 1rem;
   line-height: 1.25em;
   padding: 0 0 0 0.375rem;

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;EACA;ECFA;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;;AFpHF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AC3BF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EEzCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFkCI,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;EF3BF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EEoBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EF7CN;EACA;EACA;EE6CM;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;;AJYN;EACE;EACA","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;EEzCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFkCI,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;EF3BF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EEoBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EF7CN;EACA;EACA;EE6CM;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;;AJYN;EACE;EACA","file":"file-input.css"}

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

@@ -10,7 +10,6 @@
   gap: 0.625em;
   cursor: text;
   box-sizing: border-box;
-  height: 2.0625em;
   font-size: 1rem;
   line-height: 1.25em;
   padding: 0 0.375rem;

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/hex-input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACGA;EDCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECTA;EACA;EACA;;ADSA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE5CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EE3BF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFoBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA;EF6CM;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;ADtDJ;EACE;;AAIJ;EACE;EACA,OEZI;EFaJ;EACA;EACA","file":"hex-input.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/hex-input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACGA;EDCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECRA;EACA;EACA;;ADQA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE3CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EE3BF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFoBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA;EF6CM;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;ADtDJ;EACE;;AAIJ;EACE;EACA,OEZI;EFaJ;EACA;EACA","file":"hex-input.css"}

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

@@ -10,7 +10,6 @@
   gap: 0.625em;
   cursor: text;
   box-sizing: border-box;
-  height: 2.0625em;
   font-size: 1rem;
   line-height: 1.25em;
   padding: 0 0.375rem;

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACGA;EDCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECTA;EACA;EACA;;ADSA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE5CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EE3BF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFoBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA;EF6CM;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;ADvDN;EACE;;;AAKF;EACE;EACA;EACA,OEdI;EFeJ;;AAEA;EACE,YEEiB;;AFCnB;EACE;EACA,YEJkB;;AFOpB;EACE;EACA;;AAIF;EACE;EACA;;;AAKJ;EACE;EACA","file":"input.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACGA;EDCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECRA;EACA;EACA;;ADQA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE3CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EE3BF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFoBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA;EF6CM;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;ADvDN;EACE;;;AAKF;EACE;EACA;EACA,OEdI;EFeJ;;AAEA;EACE,YEEiB;;AFCnB;EACE;EACA,YEJkB;;AFOpB;EACE;EACA;;AAIF;EACE;EACA;;;AAKJ;EACE;EACA","file":"input.css"}

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

@@ -1,6 +1,13 @@
 /**
  * Should be applied to the first element in the component's template.
  */
+ard-number-input {
+  width: 9.5rem;
+}
+ard-number-input:not(:has(.ard-quick-change-button)) {
+  width: 6rem;
+}
+
 .ard-number-input {
   position: relative;
   font-family: "Roboto", sans-serif;
@@ -10,9 +17,10 @@
   gap: 0.625em;
   cursor: text;
   box-sizing: border-box;
-  height: 2.0625em;
   font-size: 1rem;
   line-height: 1.25em;
+  min-height: 2.1875rem;
+  height: 2.1875rem;
   gap: 0;
   width: 100%;
 }
@@ -47,16 +55,30 @@
 }
 .ard-number-input.ard-appearance-outlined {
   --ard-appearance-background: var(--ard-bg);
-  --ard-appearance-border: 1px solid var(--ard-border);
+  --ard-appearance-border-color: var(--ard-border);
+  --ard-appearance-border: 1px solid var(--ard-appearance-border-color);
+}
+.ard-number-input.ard-appearance-outlined.ard-focused {
+  --ard-appearance-border-color: var(--ard-border-dark);
+}
+.ard-number-input.ard-appearance-outlined.ard-has-error {
+  --ard-appearance-background: rgb(var(--ard-danger-50));
+  --ard-appearance-border-color: rgb(var(--ard-danger-500));
 }
 .ard-number-input.ard-appearance-filled {
   --ard-appearance-background: var(--ard-bg-filled);
   --ard-appearance-border: none;
 }
+.ard-number-input.ard-appearance-filled.ard-has-error {
+  --ard-appearance-background: rgb(var(--ard-danger-50));
+}
 .ard-number-input.ard-appearance-transparent {
   --ard-appearance-background: transparent;
   --ard-appearance-border: none;
 }
+.ard-number-input.ard-appearance-transparent.ard-has-error {
+  --ard-appearance-border: 1px solid rgba(var(--ard-danger-500), 0.1);
+}
 .ard-number-input .ard-input-container {
   height: 100%;
   max-width: 100%;
@@ -71,7 +93,7 @@
   height: 100%;
   aspect-ratio: 1;
   padding: 0;
-  border-color: var(--ard-border);
+  border-color: var(--ard-appearance-border-color);
   display: flex;
   justify-content: center;
   margin: 0;
@@ -103,28 +125,16 @@
   border-radius: 0;
 }
 .ard-number-input.ard-variant-pill {
-  border-radius: 999px;
-}
-.ard-number-input.ard-variant-pill.ard-appearance-outlined {
-  --ard-appearance-background: var(--ard-bg);
-  --ard-appearance-border: 1px solid var(--ard-border);
-}
-.ard-number-input.ard-variant-pill.ard-appearance-filled {
-  --ard-appearance-background: var(--ard-bg-filled);
-  --ard-appearance-border: none;
-}
-.ard-number-input.ard-variant-pill.ard-appearance-transparent {
-  --ard-appearance-background: transparent;
-  --ard-appearance-border: none;
+  border-radius: 9999px;
 }
 .ard-number-input.ard-variant-pill .ard-button {
-  border-radius: 999px !important;
+  border-radius: 9999px !important;
   height: 30px;
   width: 30px;
   margin: 0 2px;
 }
 .ard-number-input.ard-variant-pill.ard-quick-change-false .ard-input-container {
-  border-radius: 999px;
+  border-radius: 9999px;
 }
 .ard-number-input.ard-variant-rounded:not(.ard-appearance-filled) .ard-input-container, .ard-number-input.ard-variant-sharp:not(.ard-appearance-filled) .ard-input-container {
   box-sizing: border-box;
@@ -140,6 +150,8 @@
   border: var(--ard-appearance-border);
 }
 .ard-number-input.ard-compact {
+  min-height: 1.6875rem;
+  height: 1.6875rem;
   font-size: 0.925rem;
 }
 

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/number-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EDEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECTA;EACA;;ADUA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AEZF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;ADpCF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA,cEZG;EFaH;EACA;EACA;;AAEF;EACE;;AAGF;EACE;;AAEA;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;EACA;;AAMN;EACE;;AAGE;EACE;;AAIN;EACE;;AAEF;EAGE;;ACjCF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;ADyBA;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAIF;EACE;;;AAKF;EACE;EACA;EAMA,YEjHG;;AF6GH;EACE","file":"number-input.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/number-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EACE;;AAEA;EACE;;;AAIJ;EDNE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECAA;EACA;EACA;EACA;;ADDA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AEXF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAGJ;EACE;EACA;;AAEA;EACE;;AD1CJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;;AAEA;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;EACA;;AAMN;EACE;;AAGE;EACE;;AAIN;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAIF;EACE;EACA;EACA;;;AAKF;EACE;EACA;EAMA,YE3HG;;AFuHH;EACE","file":"number-input.css"}

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

@@ -10,7 +10,6 @@
   gap: 0.625em;
   cursor: text;
   box-sizing: border-box;
-  height: 2.0625em;
   font-size: 1rem;
   line-height: 1.25em;
   padding: 0 0.375rem;

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/password-input.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACGA;EDCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECTA;EACA;EACA;;ADSA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;ACrCF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE","file":"password-input.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/password-input.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACGA;EDCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECRA;EACA;EACA;;ADQA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;ACpCF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE","file":"password-input.css"}

package/prebuilt-themes/default/inputs/search-bar.css

@@ -10,7 +10,6 @@
   gap: 0.625em;
   cursor: text;
   box-sizing: border-box;
-  height: 2.0625em;
   font-size: 1rem;
   line-height: 1.25em;
   padding: 0 0.375rem;

package/prebuilt-themes/default/inputs/search-bar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/search-bar.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EDEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECVA;EACA;EACA;;ADUA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE5CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EE3BF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFoBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA;EF6CM;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;;ADtDN;EACE;EACA","file":"search-bar.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/search-bar.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EDEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECTA;EACA;EACA;;ADSA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE3CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EE3BF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFoBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA;EF6CM;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;;ADtDN;EACE;EACA","file":"search-bar.css"}

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

@@ -10,7 +10,6 @@
   gap: 0.625em;
   cursor: text;
   box-sizing: border-box;
-  height: 2.0625em;
   font-size: 1rem;
   line-height: 1.25em;
   padding: 0 0.375rem;

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/simple-input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EDEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECVA;EACA;EACA;;ADUA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE5CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EE3BF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFoBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA;EF6CM;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;;ADtDN;EACE;EACA","file":"simple-input.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/simple-input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EDEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECTA;EACA;EACA;;ADSA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AE3CF;EACE,QCkCgB;EDjChB,OCiCgB;EDhChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OCyBgB;EDxBhB,QCwBgB;EDvBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EE3BF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFoBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA;EF6CM;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;;ADtDN;EACE;EACA","file":"simple-input.css"}

package/prebuilt-themes/default/segment.css

@@ -146,16 +146,30 @@
 }
 .ard-segment-container.ard-appearance-outlined {
   --ard-appearance-background: var(--ard-bg);
-  --ard-appearance-border: 1px solid var(--ard-border);
+  --ard-appearance-border-color: var(--ard-border);
+  --ard-appearance-border: 1px solid var(--ard-appearance-border-color);
+}
+.ard-segment-container.ard-appearance-outlined.ard-focused {
+  --ard-appearance-border-color: var(--ard-border-dark);
+}
+.ard-segment-container.ard-appearance-outlined.ard-has-error {
+  --ard-appearance-background: rgb(var(--ard-danger-50));
+  --ard-appearance-border-color: rgb(var(--ard-danger-500));
 }
 .ard-segment-container.ard-appearance-filled {
   --ard-appearance-background: var(--ard-bg-filled);
   --ard-appearance-border: none;
 }
+.ard-segment-container.ard-appearance-filled.ard-has-error {
+  --ard-appearance-background: rgb(var(--ard-danger-50));
+}
 .ard-segment-container.ard-appearance-transparent {
   --ard-appearance-background: transparent;
   --ard-appearance-border: none;
 }
+.ard-segment-container.ard-appearance-transparent.ard-has-error {
+  --ard-appearance-border: 1px solid rgba(var(--ard-danger-500), 0.1);
+}
 .ard-segment-container.ard-variant-rounded, .ard-segment-container.ard-variant-semirounded {
   --ard-variant-border-radius: 8px;
 }

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/segment.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECoCA;;AChDA;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;;ADlGF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAOF;EAEE;;AAEF;EACE;;AAEF;EACE;;ADxCF;ECZA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDKE;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAQJ;EACE;;AAIF;EACE;;AAIF;EACE;;AAOA;EACE;;AAIF;EACE;;AAOR;EACE;;AAII;EACE;;AAGF;EACE;;AAKR;EAEE,YG7HC;EH8HD;;AAEA;EACE;;AAEA;EACE;EACA;;AAGJ;EAGE;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAOF;EACE;;AAIE;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAMF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAMF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAQN;EACE;;AAEF;EACE;;AAMN;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKE;EACE;;AAIF;EACE;;AAKR;EACE;EACA;;AAGE;EACE;;AAEA;EACE;;AAGA;EACE;;AAGJ;EACE;EACA;;AAEA;EACE;;AAQV;EACE;;AAGE;EACE;;AAIN;EAEE;EACA;;AAGE;EACE;;AAIN;EAEE;;AAGE;EACE;;AAIN;EACE;;AAKA;EACE;EACA;;AAEA;EACE;EACA;;AAMJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;;AAEA;EACE;;AAKA;AAAA;EAEE;;AAEF;EACE","file":"segment.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/segment.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECqDA;;ACjEA;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;;ADlGF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAGJ;EACE;EACA;;AAEA;EACE;;AAQJ;EAEE;;AAEF;EACE;;AAEF;EACE;;ADzDF;ECZA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDKE;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAQJ;EACE;;AAIF;EACE;;AAIF;EACE;;AAOA;EACE;;AAIF;EACE;;AAOR;EACE;;AAII;EACE;;AAGF;EACE;;AAKR;EAEE,YG7HC;EH8HD;;AAEA;EACE;;AAEA;EACE;EACA;;AAGJ;EAGE;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAOF;EACE;;AAIE;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAMF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAMF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAQN;EACE;;AAEF;EACE;;AAMN;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKE;EACE;;AAIF;EACE;;AAKR;EACE;EACA;;AAGE;EACE;;AAEA;EACE;;AAGA;EACE;;AAGJ;EACE;EACA;;AAEA;EACE;;AAQV;EACE;;AAGE;EACE;;AAIN;EAEE;EACA;;AAGE;EACE;;AAIN;EAEE;;AAGE;EACE;;AAIN;EACE;;AAKA;EACE;EACA;;AAEA;EACE;EACA;;AAMJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;;AAEA;EACE;;AAKA;AAAA;EAEE;;AAEF;EACE","file":"segment.css"}

package/public-api.d.ts

@@ -29,6 +29,7 @@ export * from './lib/progress-circle';
 export * from './lib/spinner';
 export * from './lib/color/color-display';
 export * from './lib/dropdown-panel';
+export * from './lib/form-field';
 export * from './lib/form-field-frame';
 export * from './lib/kbd';
 export * from './lib/kbd-shortcut';
@@ -45,6 +46,7 @@ export * from './lib/dialog';
 export * from './lib/modal';
 export * from './lib/snackbar';
 export * from './lib/icon';
+export * from './lib/_internal/public-api';
 export * from './lib/types/alignment.types';
 export * from './lib/types/colors.types';
 export * from './lib/types/item-storage.types';

package/themes/default/_mixins.scss

@@ -1,64 +1,81 @@
-@use '../variables' as ARD;
-
-@mixin icon($fill: 0, $wght: 500, $grad: 0, $opsz: 48) {
-  font-family: 'Material Symbols Outlined';
-  font-size: 1.5em;
-  font-variation-settings: 'FILL' #{$fill}, 'wght' #{$wght}, 'GRAD' #{$grad}, 'opsz' #{$opsz};
-}
-
-@mixin focus-overlay($size: 0) {
-  position: absolute;
-  top: -#{$size};
-  bottom: -#{$size};
-  left: -#{$size};
-  right: -#{$size};
-  opacity: 0;
-  border-radius: inherit;
-  pointer-events: none;
-
-  transition: opacity 0.2s ease;
-}
-@mixin focus-overlay-scale-addon() {
-  > .ard-focus-overlay {
-    transform: scale(0.2);
-
-    transition: opacity 0.2s ease, transform 0.1s ease;
-  }
-
-  &:hover,
-  &:focus {
-    > .ard-focus-overlay {
-      transform: scale(1);
-    }
-  }
-}
-
-@mixin formAppearances() {
-  &.ard-appearance-outlined {
-    --ard-appearance-background: #{ARD.$bg};
-    --ard-appearance-border: 1px solid #{ARD.$border};
-  }
-  &.ard-appearance-filled {
-    --ard-appearance-background: #{ARD.$bg-f};
-    --ard-appearance-border: none;
-  }
-  &.ard-appearance-transparent {
-    --ard-appearance-background: transparent;
-    --ard-appearance-border: none;
-  }
-}
-
-@mixin formVariants() {
-  border-radius: var(--ard-variant-border-radius);
-
-  &.ard-variant-rounded,
-  &.ard-variant-semirounded {
-    --ard-variant-border-radius: 8px;
-  }
-  &.ard-variant-pill {
-    --ard-variant-border-radius: 9999px;
-  }
-  &.ard-variant-sharp {
-    --ard-variant-border-radius: 0;
-  }
-}
+@use '../variables' as ARD;
+
+@mixin icon($fill: 0, $wght: 500, $grad: 0, $opsz: 48) {
+  font-family: 'Material Symbols Outlined';
+  font-size: 1.5em;
+  font-variation-settings: 'FILL' #{$fill}, 'wght' #{$wght}, 'GRAD' #{$grad}, 'opsz' #{$opsz};
+}
+
+@mixin focus-overlay($size: 0) {
+  position: absolute;
+  top: -#{$size};
+  bottom: -#{$size};
+  left: -#{$size};
+  right: -#{$size};
+  opacity: 0;
+  border-radius: inherit;
+  pointer-events: none;
+
+  transition: opacity 0.2s ease;
+}
+@mixin focus-overlay-scale-addon() {
+  > .ard-focus-overlay {
+    transform: scale(0.2);
+
+    transition: opacity 0.2s ease, transform 0.1s ease;
+  }
+
+  &:hover,
+  &:focus {
+    > .ard-focus-overlay {
+      transform: scale(1);
+    }
+  }
+}
+
+@mixin formAppearances() {
+  &.ard-appearance-outlined {
+    --ard-appearance-background: #{ARD.$bg};
+    --ard-appearance-border-color: #{ARD.$border};
+    --ard-appearance-border: 1px solid var(--ard-appearance-border-color);
+
+    &.ard-focused {
+      --ard-appearance-border-color: #{ARD.$border-dark};
+    }
+    &.ard-has-error {
+      --ard-appearance-background: #{ARD.$danger50};
+      --ard-appearance-border-color: #{ARD.$danger500};
+    }
+  }
+  &.ard-appearance-filled {
+    --ard-appearance-background: #{ARD.$bg-f};
+    --ard-appearance-border: none;
+
+    &.ard-has-error {
+      --ard-appearance-background: #{ARD.$danger50};
+    }
+  }
+  &.ard-appearance-transparent {
+    --ard-appearance-background: transparent;
+    --ard-appearance-border: none;
+
+    &.ard-has-error {
+      --ard-appearance-border: 1px solid rgba(#{ARD.$danger500-rgb}, 0.1);
+    }
+  }
+}
+
+@mixin formVariants() {
+  border-radius: var(--ard-variant-border-radius);
+
+  &.ard-variant-rounded,
+  &.ard-variant-semirounded {
+    --ard-variant-border-radius: 8px;
+  }
+  &.ard-variant-pill {
+    --ard-variant-border-radius: 9999px;
+  }
+  &.ard-variant-sharp {
+    --ard-variant-border-radius: 0;
+  }
+}