@aquera/nile-elements 0.0.68 → 0.0.70

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -67,7 +67,8 @@
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2",
-    "x": "^0.1.2"
+    "x": "^0.1.2",
+    "@web/test-runner-puppeteer": "0.16.0"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {

package/plopfile.js

@@ -10,6 +10,11 @@ export default function (plop) {
       },
     ],
     actions: [
+      {
+        type: 'append',
+        path: 'src/index.ts',
+        templateFile: 'plop-templates/lit/litindex.ts.hbs',
+      },
       {
         type: 'add',
         path: 'src/nile-{{name}}/index.ts',

package/rollup.config.js

@@ -9,17 +9,16 @@ import glob from 'glob';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import commonjs from '@rollup/plugin-commonjs';
+import styles from 'rollup-plugin-styles';
 
 const { LERNA_PACKAGE_NAME } = process.env;
 const PACKAGE_ROOT_PATH = process.cwd();
 
-import styles from 'rollup-plugin-styles';
-
 export default [
   {
     input: Object.fromEntries(
       glob.sync('src/**/*.ts').map(file => [
-        // This remove `src/` as well as the file extension from each file, so e.g.
+        // This removes `src/` as well as the file extension from each file, so e.g.
         // src/nested/foo.js becomes nested/foo
         path.relative(
           'src',
@@ -69,7 +68,10 @@ export default [
     },
     plugins: [
       typescript(),
-      replace({ 'Reflect.decorate': 'undefined' }),
+      replace({
+        'Reflect.decorate': 'undefined',
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
       resolve(),
       terser({
         ecma: 2017,
@@ -95,7 +97,10 @@ export default [
     },
     plugins: [
       typescript(),
-      replace({ 'Reflect.decorate': 'undefined' }),
+      replace({
+        'Reflect.decorate': 'undefined',
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
       resolve(),
       terser({
         ecma: 2017,
@@ -111,5 +116,5 @@ export default [
       summary(),
       commonjs()
     ],
-    },
+  },
 ];

package/src/index.ts

@@ -60,4 +60,6 @@ export { NilePageHeader } from './nile-page-header';
 export { NileEmptyState } from './nile-empty-state';
 export { NileHero } from './nile-hero';
 export { NileStepperItem } from './nile-stepper-item';
-export { NileStepper } from './nile-stepper';
+export { NileStepper } from './nile-stepper';
+export { NileHeroHeader } from './nile-hero-header';
+export { NileFormatDate } from './nile-format-date';

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

@@ -13,12 +13,13 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
   }
+
   .text__avatar {
     box-sizing: border-box;
     font-feature-settings: 'clig' off, 'liga' off;
     font-family: var(--nile-font-family-serif);
     font-style: normal;
-    font-weight: 500;
+    font-weight: 600;
     color: var(--nile-colors-white-base);
     text-transform: uppercase;
     display: flex;
@@ -48,22 +49,29 @@ export const styles = css`
   .avatar__medium {
     width: var(--nile-spacing-3-x);
     height: var(--nile-spacing-3-x);
-    font-size: var(--nile-type-scale-1);
-    line-height: var(--nile-type-scale-1);
+    font-size: 12px;
+    line-height: 18px;
   }
 
   .avatar__large {
     width: 32px;
     height: 32px;
-    font-size: 12.8px;
-    line-height: 12.8px;
+    font-size: 14px;
+    line-height: 20px;
   }
 
   .avatar__extralarge {
     height: 40px;
     width: 40px;
-    font-size: var(--nile-type-scale-3);
-    line-height: var(--nile-type-scale-3);
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .avatar__2xl {
+    height: 64px;
+    width: 64px;
+    font-size: 24px;
+    line-height: 32px;
   }
 
   .avatar__rounded {

package/src/nile-avatar/nile-avatar.ts

@@ -57,7 +57,7 @@ export class NileAvatar extends NileElement {
     | 'small'
     | 'medium'
     | 'large'
-    | 'extralarge' = 'medium';
+    | 'extralarge'|'2xl' = 'medium';
 
   /** Gives a border radius of 50% to the Avatar */
   @property({ type: Boolean, reflect: true }) isRounded = false;
@@ -104,6 +104,7 @@ export class NileAvatar extends NileElement {
         avatar__medium: this.size === 'medium',
         avatar__large: this.size === 'large',
         avatar__extralarge: this.size === 'extralarge',
+        avatar__2xl: this.size === '2xl',
         avatar__rounded: this.isRounded,
         variant__orange: variant__code === 0 && !this.bgColor,
         variant__pink: variant__code === 1 && !this.bgColor,

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

@@ -15,20 +15,21 @@ export const styles = css`
   }
 
   .badge {
-    padding: 0 4px;
+    padding: 2px 6px;
     border-radius: 4px;
-    height: 16px;
-    font-size: 10.24px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    box-sizing: border-box;
+    height: 22px;
   }
 
   .badge__content {
     font-family: var(--nile-font-family-serif);
-    font-size: 10.24px;
+    font-size: 12px;
     font-style: normal;
-    font-weight: 400;
+    font-weight: 500;
+    line-height: 18px;
     letter-spacing: 0.2px;
   }
 
@@ -168,6 +169,7 @@ export const styles = css`
   }
 
   .badge--rounded {
+    padding: 2px 8px;
     border-radius: 100px;
   }
 `;

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

@@ -25,9 +25,7 @@ export const styles = css`
     border-style: solid;
     border-width: 1px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
     text-align: center;
     letter-spacing: 0.2px;
     text-decoration: none;
@@ -39,12 +37,14 @@ export const styles = css`
       var(--nile-transition-duration-default) border,
       var(--nile-transition-duration-default) box-shadow;
     cursor: inherit;
-    padding: var(--nile-spacing-2-x);
-    gap: var(--nile-spacing-2-x);
+    font-size: 14px;
+    font-weight: 500;
     border-radius: var(--nile-radius-base-standard);
-    line-height: var(--nile-type-scale-3);
+    padding: 10px 14px;
+    gap: 5px;
+    line-height: 20px;
     box-sizing: border-box;
-    height: 38px;
+    height: 40px;
   }
 
   .button::-moz-focus-inner {
@@ -76,49 +76,37 @@ export const styles = css`
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--nile-colors-button-primary);
-    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-border);
-    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /*for v2 */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-hover);
-    background-color: #005291; /*for v2 */
     border-color: var(--nile-colors-button-primary-hover);
-    border-color: #005291; /*for v2 */
     color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-pressed);
-    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-pressed-border);
-    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
     box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
-      0px 0px 0px 4px rgba(0, 94, 166, 0.15); /*for v2 */
+      0px 0px 0px 4px rgba(0, 94, 166, 0.15);
   }
 
   .button--standard.button--primary.button--disabled {
     background-color: var(--nile-colors-button-primary-disabled);
-    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
-    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
-    color: #98a2b3; /*for v2 */
     cursor: not-allowed;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
     background-color: var(--nile-colors-button-primary-disabled);
-    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
-    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
-    color: #98a2b3; /*for v2 */
     cursor: not-allowed;
   }
 
@@ -617,9 +605,11 @@ export const styles = css`
   }
 
   .button--outline.button--secondary-blue:hover:not(.button--disabled),
-  .button--outline.button--secondary-blue.button--checked:not(.button--disabled) {
+  .button--outline.button--secondary-blue.button--checked:not(
+      .button--disabled
+    ) {
     color: #004678;
-    background-color: #EAF0F8;
+    background-color: #eaf0f8;
   }
 
   .button--outline.button--secondary-blue:active:not(.button--disabled) {
@@ -629,7 +619,7 @@ export const styles = css`
   .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {
     box-shadow: 0px;
   }
-  
+
   @media (forced-colors: active) {
     .button.button--outline.button--checked:not(.button--disabled) {
       outline: solid 2px transparent;

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

@@ -16,10 +16,11 @@ export const styles = css`
 
   .nile-button-toggle {
     display: flex;
-    padding: 12px;
+    padding: 6px 16px 6px 14px;
     border: 1px solid var(--nile-button-toggle-border-color);
     cursor: pointer;
     border-radius: 4px;
+    font-weight: 500;
     color: #000;
     text-align: center;
     font-family: var(--nile-font-family-serif);
@@ -28,15 +29,17 @@ export const styles = css`
     letter-spacing: 0.2px;
     justify-content: center;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
+    height: 40px;
+    box-sizing: border-box;
   }
 
   .nile-button-toggle:hover {
-    background:var(--nile-button-toggle-color-background-non-active-hover);
+    background: var(--nile-button-toggle-color-background-non-active-hover);
   }
 
   .nile-button-toggle:active {
-    background: #e5e9eb; 
+    background: #e5e9eb;
   }
 
   .nile-button-toggle__initial {
@@ -56,12 +59,14 @@ export const styles = css`
   }
 
   .nile-button-toggle__active {
-    background-color:var(--nile-button-toggle-color-background-active-standard);
+    background-color: var(
+      --nile-button-toggle-color-background-active-standard
+    );
     color: var(--nile-button-toggle-text-color-standard);
   }
 
   .nile-button-toggle__active:hover {
-    background-color:var(--nile-button-toggle-color-background-active-hover);
+    background-color: var(--nile-button-toggle-color-background-active-hover);
     color: var(--nile-button-toggle-text-color-hover);
   }
 

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

@@ -1,19 +1,20 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-import {css} from 'lit-element';
+import { css } from 'lit-element';
 
 /**
  * ButtonToggleGroup CSS
  */
 export const styles = css`
-	:host {
+  :host {
     display: inline-flex;
-	}
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
 `;
 
 export default [styles];

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

@@ -28,7 +28,7 @@ export const styles = css`
   :host {
     --border-color: var(--nile-card-color-border);
     --border-radius: 8px;
-    --border-width: 1px;
+    --border-width: 0.5px;
     --padding: 18px;
     display: inline-block;
   }
@@ -36,11 +36,24 @@ export const styles = css`
   .card {
     display: flex;
     flex-direction: column;
+    justify-items: strecth;
     background-color: var(--nile-colors-white-base);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
-    box-shadow: var(--nile-card-box-shadow) rgba(16, 24, 40, 0.05);
-    padding: var(--nile-type-scale-4);
+    min-width: 273px;
+    max-width: 350px;
+    overflow: hidden;
+  }
+
+  .body__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 16px 0 16px;
+  }
+
+  .card__header {
+    display: block;
   }
 
   .card__body {
@@ -48,8 +61,14 @@ export const styles = css`
   }
 
   .card__footer {
+    margin-top: 12px;
     display: block;
-    margin-top: var(--nile-type-scale-4);
+    box-sizing: border-box;
+    align-content: center;
+    align-items: center;
+    padding: 8px 16px;
+    background-color: #f9fafb;
+    height: 40px;
   }
 
   .card:not(.card--has-footer) .card__footer {

package/src/nile-card/nile-card.ts

@@ -5,15 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
 import { customElement } from 'lit/decorators.js';
-import {styles} from './nile-card.css';
+import { styles } from './nile-card.css';
 import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../internal/slot';
 import NileElements from '../internal/nile-element';
 import { CSSResultGroup } from 'lit';
 
-
 /**
  * Nile icon component.
  *
@@ -22,7 +27,6 @@ import { CSSResultGroup } from 'lit';
  */
 @customElement('nile-card')
 export class NileCard extends NileElements {
-
   static styles: CSSResultGroup = styles;
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
@@ -36,15 +40,22 @@ export class NileCard extends NileElements {
           'card--has-footer': this.hasSlotController.test('footer'),
         })}
       >
-        <slot part="body" class="card__body"></slot>
-        <slot name="footer" part="footer" ?hidden="${!this.hasSlotController.test('footer')}"  class="card__footer"></slot>
+        <div class="body__wrapper">
+          <slot name="header" part="header" class="card__header"></slot>
+          <slot part="body" class="card__body"></slot>
+        </div>
+
+        <slot
+          name="footer"
+          part="footer"
+          ?hidden="${!this.hasSlotController.test('footer')}"
+          class="card__footer"
+        ></slot>
       </div>
-      
     `;
   }
 }
 
-
 export default NileCard;
 
 declare global {

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

@@ -22,7 +22,7 @@ export const styles = css`
   .checkbox {
     position: relative;
     display: inline-flex;
-    align-items: top;
+    align-items: stretch;
     font-weight: 400;
     color: var(--nile-colors-dark-900);
     vertical-align: middle;
@@ -30,6 +30,7 @@ export const styles = css`
   }
 
   .checkbox--medium {
+    padding-top: 2px;
     --toggle-size: var(--nile-type-scale-3);
     font-size: var(--nile-type-scale-3);
   }
@@ -44,7 +45,7 @@ export const styles = css`
     height: var(--nile-type-scale-3);
     border: solid 1px var(--nile-checkbox-color-border-standard);
     background-color: var(--nile-checkbox-color-background-standard);
-    border-radius: 4px;
+    border-radius: 3px;
     transition: var(--nile-transition-duration-default border-color),
       var(--nile-transition-duration-default) background-color,
       var(--nile-transition-duration-default) color,
@@ -110,20 +111,33 @@ export const styles = css`
     opacity: 0.3;
     cursor: not-allowed;
   }
-  
 
   .checkbox__label {
-    display: inline-block;
-    line-height: 14px;
-    font-size: 14px;
-    margin-inline-start: 0.5em;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    font-family: var(--nile-font-family-serif);
+    margin-left: 8px;
     user-select: none;
-    margin-top: 2px;
     color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
     font-style: normal;
-    font-weight: 400;
     letter-spacing: 0.2px;
+    box-sizing: border-box;
+  }
+
+  .checkbox__label__text {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    color: #344054;
+  }
+
+  .checkbox__sublabel__text {
+    display: block;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #475467;
   }
 
   :host([required]) .checkbox__label::after {