@aquera/nile-elements 0.0.1-beta.13 → 0.0.1-beta.14

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.1-beta.13",
+  "version": "0.0.1-beta.14",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-input/nile-input.css.ts

@@ -30,16 +30,8 @@ export const styles = css`
     margin-bottom: 12px;
   }
 
-  .form-control--has-label.form-control--small .form-control__label {
-    font-size: 14px;
-  }
-
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: 1rem;
-  }
-
-  .form-control--has-label.form-control--large .form-control__label {
-    font-size: 1.25rem;
+    font-size: 14px;
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
@@ -51,20 +43,23 @@ export const styles = css`
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: hsl(240 3.8% 46.1%);
-    margin-top: 0.125rem;
+    color: #7F7F7F;
+    margin-top: 6px;
   }
 
-  .form-control--has-help-text.form-control--small .form-control__help-text {
-    font-size: 0.75rem;
+  /* Error message */
+  .form-control__error-message {
+    display: block;
+    color: #A4121C;
+    margin-top: 12px;
+    font-size: 12px;
+    font-style: normal;
+    line-height: 12px;
+    letter-spacing: 0.2px;
   }
 
   .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: 0.875rem;
-  }
-
-  .form-control--has-help-text.form-control--large .form-control__help-text {
-    font-size: 1rem;
+    font-size: 10.24px;
   }
 
   .form-control--has-help-text.form-control--radio-group
@@ -97,13 +92,12 @@ export const styles = css`
 
   .input--standard:hover:not(.input--disabled) {
     background-color: hsl(0, 0%, 100%);
-    border-color: #000000;
+    border-color: #000;
   }
 
   .input--standard.input--focused:not(.input--disabled) {
     background-color: hsl(0, 0%, 100%);
     border-color: #005ea6;
-    box-shadow: 0 0 0 3px hsl(198.6 88.7% 48.4% / 40%);
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
@@ -111,8 +105,8 @@ export const styles = css`
   }
 
   .input--standard.input--disabled {
-    background-color: hsl(240 4.8% 95.9%);
-    border-color: hsl(240 4.9% 83.9%);
+    background-color: #fff;
+    border-color: #c7ced4;
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -304,11 +298,11 @@ export const styles = css`
   }
 
   .input--medium .input__prefix::slotted(*) {
-    margin-inline-start: 1rem;
+    margin-inline-start: 12px;
   }
 
   .input--medium .input__suffix::slotted(*) {
-    margin-inline-end: 1rem;
+    margin-inline-end: 12px;
   }
 
   .input--large {

package/src/nile-input/nile-input.ts

@@ -91,6 +91,9 @@ export class NileInput extends NileElement implements NileFormControl {
   /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
   @property({ attribute: 'help-text' }) helpText = '';
 
+  /** The input's error message. If you need to display HTML, use the `error-message` slot instead. */
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
   /** Adds a clear button when the input is not empty. */
   @property({ type: Boolean }) clearable = false;
 
@@ -395,6 +398,7 @@ export class NileInput extends NileElement implements NileFormControl {
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasErrorMessage = this.errorMessage ? true : false;
     const hasClearIcon =
       this.clearable && !this.disabled && !this.readonly && (typeof this.value === 'number' || this.value.length > 0);
 
@@ -536,6 +540,15 @@ export class NileInput extends NileElement implements NileFormControl {
         >
           ${this.helpText}
         </slot>
+        <slot
+          name="error-message"
+          part="form-control-error-message"
+          id="error-message"
+          class="form-control__error-message"
+          aria-hidden=${hasErrorMessage ? 'false' : 'true'}
+        >
+          ${this.errorMessage}
+        </slot>
         </div>
       </div>
     `;