@ardium-ui/ui 5.0.0-alpha.1 → 5.0.0-alpha.11

package/themes/default/form-field.scss

@@ -42,34 +42,44 @@ ard-horizontal-form-field {
       min-height: 1.1em;
     }
   }
-  .ard-form-field__hints-right {
+  .ard-form-field__hints-right,
+  .ard-form-field__errors-right {
     > * {
-      padding-left: 0.25rem;
+      padding-left: 0.5rem;
     }
   }
   .ard-hint,
   .ard-error {
     font-size: 1em;
-    line-height: 1.1;
-    display: block;
-    height: 1.1em;
+    line-height: 1.2;
+    display: inline-grid;
+    min-height: 1.2em;
   }
   .ard-hint {
     color: ARD.$text2;
   }
-  .ard-error {
+  .ard-error:not(.ard-hint-error),
+  .ard-form-field__errors .ard-hint-error {
     color: ARD.$danger700;
     overflow: hidden;
+  }
+  .ard-error:not(.ard-hint-error) {
     animation: errorAppear 0.25s ARD.$timing-fn forwards;
   }
+  .ard-form-field__default-hint,
+  .ard-form-field__default-error {
+    gap: 0.375em;
+  }
 
   &.ard-form-field__with-error {
-    .ard-label {
+    .ard-label,
+    ard-label {
       color: ARD.$danger700;
     }
   }
   &.ard-form-field__is-success {
-    .ard-label {
+    .ard-label,
+    ard-label {
       color: ARD.$success700;
     }
   }
@@ -90,7 +100,8 @@ ard-horizontal-form-field {
 
   .ard-form-field__label-container {
     width: var(--ard-horizontal-form-field-label-width, 12rem);
-    height: 2.3125rem;
+    min-width: var(--ard-horizontal-form-field-label-width, 12rem);
+    height: ARD.$form-field-height;
     display: flex;
     align-items: center;
     justify-content: var(--ard-horizontal-form-field-label-align, flex-start);
@@ -101,16 +112,20 @@ ard-horizontal-form-field {
 
   &:has(.ard-form-field__input .ard-compact) {
     .ard-form-field__label-container {
-      height: 1.5625rem;
+      height: ARD.$form-field-compact-height;
     }
   }
 }
 
+ard-label {
+  display: flex;
+}
+
 @keyframes errorAppear {
   from {
-    height: 0;
+    grid-template-rows: 0fr;
   }
   to {
-    height: 1.1em;
+    grid-template-rows: 1fr;
   }
 }

package/themes/default/inputs/number-input.scss

@@ -24,11 +24,13 @@ ard-number-input {
 
     & > input {
       width: 100%;
+      padding: 0 0.5rem;
     }
   }
 
   .ard-quick-change-button {
     position: relative;
+    min-width: 2.1875rem;
 
     .ard-button {
       height: 100%;
@@ -114,6 +116,10 @@ ard-number-input {
     min-height: 1.6875rem;
     height: 1.6875rem;
     font-size: 0.925rem;
+
+    .ard-quick-change-button {
+      min-width: 1.6875rem;
+    }
   }
 }
 

package/themes/default/modal.scss

@@ -15,8 +15,9 @@
   .ard-modal-panel {
     padding: 1.25rem;
     padding-top: 1rem;
-    background: ARD.$bg;
     max-width: calc(100vw - 4rem);
+    max-height: calc(100vh - 4rem);
+    background: ARD.$bg;
     position: relative;
     display: flex;
     flex-direction: column;

package/themes/default/radio.scss

@@ -19,14 +19,16 @@ ard-radio {
   outline: none;
   font-size: 1em;
   display: flex;
-  gap: 0.375em;
+  align-items: center;
+  gap: 0.75rem;
   padding: 0;
   width: 100%;
 
   > .ard-radio-circles {
     position: relative;
     width: 1.25em;
-    height: 1.25em;
+    min-width: 1.25em;
+    aspect-ratio: 1;
 
     > .ard-radio-outer-circle {
       position: absolute;
@@ -34,7 +36,7 @@ ard-radio {
       right: 0;
       top: 0;
       bottom: 0;
-      border: 2px solid ARD.$detail;
+      border: 0.125em solid ARD.$detail;
       border-radius: 9999px;
       transition: border-color 0.2s ARD.$timing-fn;
     }