@aquera/nile-elements 0.0.1-beta.12 → 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.12",
+  "version": "0.0.1-beta.14",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -20,27 +20,31 @@ export const styles = css`
 
   .button {
     display: inline-flex;
-    align-items: stretch;
+    align-items: center;
     justify-content: center;
-    width: 100%;
     border-style: solid;
     border-width: 1px;
     font-style: normal;
     font-weight: 400;
-    font-size: var(--nile-font-size-base);
-    line-height: var(--nile-font-size-base);
+    font-family: var(--nile-font-family-serif);
+    font-size: 14px;
     text-align: center;
     letter-spacing: 0.2px;
     text-decoration: none;
     user-select: none;
     white-space: nowrap;
     vertical-align: middle;
-    padding: var(--nile-spacing-one-half-x);
     transition: var(--nile-transition-duration-default) background-color,
       var(--nile-transition-duration-default) color,
       var(--nile-transition-duration-default) border,
       var(--nile-transition-duration-default) box-shadow;
     cursor: inherit;
+    padding: 12px;
+    gap: 12px;
+    border-radius: var(--nile-radius-base-standard);
+    line-height: 14px;
+    box-sizing: border-box;
+    height: 38px;
   }
 
   .button::-moz-focus-inner {
@@ -65,38 +69,27 @@ export const styles = css`
     pointer-events: none;
   }
 
-  .button__prefix,
-  .button__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    pointer-events: none;
-  }
-  .button__label {
-    display: inline-block;
-  }
-
   .button__label::slotted(nile-icon) {
-    vertical-align: -2px;
+    /* vertical-align: -2px; */
   }
 
   .button--standard.button--secondary {
     background-color: var(--nile-colors-neutral-400);
     border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-900);
   }
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-neutral-500);
-    border-color: var(--nile-colors-neutral-500);
+    border : none;
     box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-900);
   }
 
   .button--standard.button--secondary:active:not(.button--disabled) {
     background-color: var(--nile-colors-neutral-500);
     border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-900);
   }
 
   .button--standard.button--secondary.button--disabled {
@@ -135,17 +128,17 @@ export const styles = css`
   }
 
   .button--standard.button--primary.button--disabled {
-    background-color: var(--nile-colors-primary-600);
-    border-color: var(--nile-colors-primary-600);
-    color: var(--nile-colors-neutral-700);
+    background-color: #777d82;
+    border-color: #777d82;
+    color: #fff;
     cursor: not-allowed;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
-    background-color: var(--nile-colors-primary-600);
-    border-color: var(--nile-colors-primary-600);
-    color: var(--nile-colors-neutral-700);
+    background-color: #777d82;
+    border-color: #777d82;
+    color: #fff;
     box-shadow: none;
   }
 
@@ -170,8 +163,8 @@ export const styles = css`
     color: var(--nile-colors-neutral-700);
   }
   .button--standard.button--tertiary.button--disabled {
-    background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-400);
+    border-color: #e5e9eb;
+    background-color: #fff;
     color: var(--nile-colors-neutral-700);
     cursor: not-allowed;
     box-shadow: none;
@@ -179,8 +172,8 @@ export const styles = css`
 
   .button--standard.button--tertiary.button--disabled:hover,
   .button--standard.button--tertiary.button--disabled:active {
-    background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-400);
+    border-color: #e5e9eb;
+    background-color: #fff;
     color: var(--nile-colors-neutral-700);
     box-shadow: none;
   }
@@ -203,51 +196,6 @@ export const styles = css`
     color: var(--nile-colors-white-base);
   }
 
-  .button--standard.button--tertiary.button--disabled {
-    background-color: var(--nile-colors-neutral-100);
-    border-color: var(--nile-colors-neutral-100);
-    color: var(--nile-colors-neutral-400);
-    cursor: not-allowed;
-    box-shadow: none;
-  }
-
-  .button--standard.button--tertiary.button--disabled:hover,
-  .button--standard.button--tertiary.button--disabled:active {
-    background-color: var(--nile-colors-neutral-100);
-    border-color: var(--nile-colors-neutral-100);
-    color: var(--nile-colors-neutral-400);
-    box-shadow: none;
-  }
-
-  /*
- * Size modifiers
- */
-
-  .button--small {
-    height: auto;
-    min-height: 24px;
-    font-size: 0.875rem;
-    line-height: calc(24px - var(--nile-spacing-one-half-x) * 2);
-    border-radius: var(--nile-radius-base-standard);
-  }
-
-  .button--medium {
-    height: auto;
-    min-height: 38px;
-    font-size: 0.875rem;
-    line-height: calc(38px - var(--nile-spacing-one-half-x) * 2);
-    font-size: var(--nile-font-size-base);
-    border-radius: var(--nile-radius-base-standard);
-  }
-
-  .button--large {
-    height: auto;
-    min-height: 40px;
-    font-size: 1rem;
-    line-height: calc(40px - var(--nile-spacing-one-half-x) * 2);
-    border-radius: 6px;
-  }
-
   /*
  * Pill modifier
  */
@@ -260,10 +208,6 @@ export const styles = css`
     border-radius: 32px;
   }
 
-  .button--pill.button--large {
-    border-radius: 40px;
-  }
-
   /*
  * Circle modifier
  */
@@ -285,12 +229,6 @@ export const styles = css`
     border-radius: 50%;
   }
 
-  .button--circle.button--large {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-  }
-
   .button--circle .button__prefix,
   .button--circle .button__suffix,
   .button--circle .button__caret {
@@ -343,80 +281,4 @@ export const styles = css`
     translate: 50% -50%;
     pointer-events: none;
   }
-
-  .button--rtl ::slotted(nile-badge) {
-    right: auto;
-    left: 0;
-    translate: -50% -50%;
-  }
-
-  /*
- * Button spacing
- */
-
-  .button--has-label.button--small .button__label {
-    padding: 0 var(--nile-spacing-one-half-x);
-  }
-
-  .button--has-label.button--medium .button__label {
-    padding: 0 var(--nile-spacing-2-x);
-  }
-
-  .button--has-label.button--large .button__label {
-    padding: 0 var(--nile-spacing-3-x);
-  }
-
-  .button--has-prefix.button--small {
-    padding-inline-start: var(--nile-spacing-one-half-x);
-  }
-
-  .button--has-prefix.button--small .button__label {
-    padding-inline-start: var(--nile-spacing-one-half-x);
-  }
-
-  .button--has-prefix.button--medium {
-    padding-inline-start: var(--nile-spacing-2-x);
-  }
-
-  .button--has-prefix.button--medium .button__label {
-    padding-inline-start: var(--nile-spacing-2-x);
-  }
-
-  .button--has-prefix.button--large {
-    padding-inline-start: var(--nile-spacing-2-x);
-  }
-
-  .button--has-prefix.button--large .button__label {
-    padding-inline-start: var(--nile-spacing-2-x);
-  }
-
-  .button--has-suffix.button--small,
-  .button--caret.button--small {
-    padding-inline-end: var(--nile-spacing-one-half-x);
-  }
-
-  .button--has-suffix.button--small .button__label,
-  .button--caret.button--small .button__label {
-    padding-inline-end: var(--nile-spacing-one-half-x);
-  }
-
-  .button--has-suffix.button--medium,
-  .button--caret.button--medium {
-    padding-inline-end: var(--nile-spacing-2-x);
-  }
-
-  .button--has-suffix.button--medium .button__label,
-  .button--caret.button--medium .button__label {
-    padding-inline-end: var(--nile-spacing-2-x);
-  }
-
-  .button--has-suffix.button--large,
-  .button--caret.button--large {
-    padding-inline-end: var(--nile-spacing-2-x);
-  }
-
-  .button--has-suffix.button--large .button__label,
-  .button--caret.button--large .button__label {
-    padding-inline-end: var(--nile-spacing-2-x);
-  }
 `;

package/src/nile-button/nile-button.ts

@@ -65,7 +65,7 @@ export class NileButton extends NileElement implements NileFormControl {
   @property({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' | 'caution'  = 'primary';
 
   /** The button's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({ reflect: true }) size:  'medium' = 'medium';
 
   /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
   @property({ type: Boolean, reflect: true }) caret = false;
@@ -290,9 +290,7 @@ export class NileButton extends NileElement implements NileFormControl {
           'button--secondary': this.variant === 'secondary',
           'button--tertiary': this.variant === 'tertiary',
           'button--caution': this.variant === 'caution',
-          'button--small': this.size === 'small',
           'button--medium': this.size === 'medium',
-          'button--large': this.size === 'large',
           'button--caret': this.caret,
           'button--circle': this.circle,
           'button--disabled': this.disabled,

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

@@ -27,19 +27,11 @@ export const styles = css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: 0.125rem;
-  }
-
-  .form-control--has-label.form-control--small .form-control__label {
-    font-size: 0.875rem;
+    margin-bottom: 12px;
   }
 
   .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>
     `;