@aquera/nile-elements 0.1.35-beta-1.7 → 0.1.35-beta-1.8

package/package.json

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

package/plop-templates/lit/index.ts.hbs

@@ -1,5 +1,5 @@
 /**
-* Copyright Aquera Inc 2023
+* Copyright Aquera Inc 2025
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.

package/plop-templates/lit/lit.css.ts.hbs

@@ -1,5 +1,5 @@
 /**
-* Copyright Aquera Inc 2023
+* Copyright Aquera Inc 2025
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.

package/plop-templates/lit/lit.template.ts.hbs

@@ -0,0 +1,3 @@
+/**
+ * Template File for nile-{{name}} component
+ */

package/plop-templates/lit/lit.test.ts.hbs

@@ -0,0 +1,38 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * 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 { fixture, assert, expect, html } from '@open-wc/testing';
+import './nile-{{name}}'; // Just import to register the element
+
+describe('<nile-{{name}}>', () => {
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<nile-{{name}}></nile-{{name}}>`);
+  });
+
+  it('passes accessibility test', async () => {
+    await expect(element).to.be.accessible();
+  });
+
+  it('renders with the correct tag name', () => {
+    expect(element.tagName.toLowerCase()).to.equal('nile-{{name}}');
+  });
+
+  it('renders with slot content when provided', async () => {
+    const testContent = 'Test Content';
+    element = await fixture(html`<nile-{{name}}>${testContent}</nile-{{name}}>`);
+    
+    const slot = (element.shadowRoot!.querySelector('slot') as HTMLSlotElement);
+    assert.exists(slot, 'Slot should exist');
+
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    expect(assignedNodes.length).to.be.greaterThan(0);
+    expect(assignedNodes[0].textContent?.trim()).to.equal(testContent);
+  });
+});

package/plop-templates/lit/lit.ts.hbs

@@ -1,5 +1,5 @@
 /**
- * Copyright Aquera Inc 2023
+ * Copyright Aquera Inc 2025
  *
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
@@ -37,8 +37,12 @@ export class Nile{{pascalCase name}} extends NileElement {
 	 * @slot This is a slot test
 	 */
 	public render(): TemplateResult {
-		return html`
-			<slot> </slot>
+	const time = new Date().toLocaleTimeString();
+  	return html`
+
+    <slot>
+	<div>Hello Nile - ${time}</div>
+    </slot>
 			`;
 	}
 

package/plop-templates/lit/sub-components/index.ts.hbs

@@ -0,0 +1,4 @@
+/**
+ * Sub component  for nile-{{name}} component. 
+ * Follows the same parent folder structure.
+ */

package/plop-templates/lit/types/type.ts.hbs

@@ -0,0 +1,3 @@
+/**
+ * Types for nile-{{name}} component
+ */

package/plop-templates/lit/utils/lit.utils.ts.hbs

@@ -0,0 +1,4 @@
+/**
+ * Utility functions for nile-{{name}} component
+ *  
+ */

package/plopfile.js

@@ -1,7 +1,7 @@
 export default function (plop) {
   // lit generator
   plop.setGenerator('lit', {
-    description: 'create lit-element',
+    description: 'create nile-element',
     prompts: [
       {
         type: 'input',
@@ -30,6 +30,37 @@ export default function (plop) {
         path: 'src/nile-{{name}}/nile-{{name}}.css.ts',
         templateFile: 'plop-templates/lit/lit.css.ts.hbs',
       },
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/nile-{{name}}.template.ts',
+        templateFile: 'plop-templates/lit/lit.template.ts.hbs',
+      },
+     
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/nile-{{name}}.test.ts',
+        templateFile: 'plop-templates/lit/lit.test.ts.hbs',
+      },
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/sub-components/nile-{{name}}.ts',
+        template: '',
+      },
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/utils/nile-{{name}}.utils.ts',
+        template: '',
+      },
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/types/index.ts',
+        templateFile: 'plop-templates/lit/types/index.ts.hbs',
+      },
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/types/{{name}}.type.ts',
+        templateFile: 'plop-templates/lit/types/type.ts.hbs',
+      },
       {
         type: 'modify',
         path: 'package.json',

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

@@ -37,21 +37,21 @@ export const styles = css`
   }
 
   .accordian--lg{
-    --accordian-text-size:var(--nile-type-scale-3);
-    --accordian-heading-padding: var(--nile-spacing-xl) var(--nile-spacing-lg);
-    --accordian-content-padding: var(--nile-spacing-sm) var(--nile-spacing-lg) var(--nile-spacing-xl);
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 16px 12px;
+    --accordian-content-padding: 6px 12px 18px;
   }
 
   .accordian--md{
-    --accordian-text-size:var(--nile-type-scale-3);
-    --accordian-heading-padding: var(--nile-spacing-lg) var(--nile-spacing-lg);
-    --accordian-content-padding: var(--nile-spacing-sm) var(--nile-spacing-lg) var(--nile-spacing-xl);
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 12px 12px;
+    --accordian-content-padding: 6px 12px 18px;
   }
 
   .accordian--sm{
-    --accordian-text-size:var(--nile-type-scale-3);
-    --accordian-heading-padding: var(--nile-spacing-sm) var(--nile-spacing-lg);
-    --accordian-content-padding: var(--nile-spacing-sm) var(--nile-spacing-lg) var(--nile-spacing-lg);
+    --accordian-text-size:var(--sm-tesx, 12px);
+    --accordian-heading-padding: 6px 12px;
+    --accordian-content-padding: 6px 12px 12px;
   }
   
   .accordian {
@@ -64,10 +64,10 @@ export const styles = css`
 
   .accordian__header {
     display: flex;
-    gap:var(--nile-spacing-lg);
+    gap:12px;
     align-items: center;
     border-radius: inherit;
-    font-weight: var(--nile-font-weight-medium);
+    font-weight:500;
     padding: var(--accordian-heading-padding);
     user-select: none;
     cursor: pointer;
@@ -86,7 +86,7 @@ export const styles = css`
   }
 
   .accordian__header:focus-visible {
-    outline: solid 3px var(--nile-colors-blue-500);
+    outline: solid 3px hsl(200.4, 98%, 39.4%);
     outline-offset: calc(1px + 1px);
   }
 
@@ -131,7 +131,7 @@ export const styles = css`
   }
 
   .accordian__content--arrow-left{
-   margin-left: var(--nile-spacing-3xl);  
+   margin-left:28px;
   }
 `;
 

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

@@ -18,9 +18,9 @@ export const styles = css`
     box-sizing: border-box;
     font-family: var(--nile-font-family-serif);
     font-style: normal;
-    font-weight: var(--nile-font-weight-semi-bold);
+    font-weight: 600;
     color: var(--nile-colors-white-base);
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: 4px;
     text-transform: uppercase;
     display: flex;
     flex-direction: column;
@@ -32,7 +32,7 @@ export const styles = css`
   .avatar {
     box-sizing: border-box;
     border: 0.5px solid var(--nile-colors-neutral-500);
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: 4px;
     background-position: 50% 50%;
     background-size: cover;
     background-repeat: no-repeat;
@@ -49,21 +49,21 @@ export const styles = css`
   .avatar__medium {
     width: var(--nile-spacing-3-x);
     height: var(--nile-spacing-3-x);
-    font-size: var(--nile-type-scale-2);
+    font-size: 12px;
     line-height: 18px;
   }
 
   .avatar__large {
     width: 32px;
     height: 32px;
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     line-height: 20px;
   }
 
   .avatar__extralarge {
     height: 40px;
     width: 40px;
-    font-size: var(--nile-type-scale-4);
+    font-size: 16px;
     line-height: 24px;
   }
 

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

@@ -15,8 +15,8 @@ export const styles = css`
   }
 
   .badge {
-    padding: var(--nile-spacing-xxs) var(--nile-spacing-sm);
-    border-radius: var(--nile-radius-radius-xs);
+    padding: 2px 6px;
+    border-radius: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -26,10 +26,10 @@ export const styles = css`
 
   .badge__content {
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-2);
+    font-size: 12px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium);
-    line-height: var(--nile-line-height-small);
+    font-weight: 500;
+    line-height: 18px;
     letter-spacing: 0.2px;
   }
 
@@ -170,7 +170,7 @@ export const styles = css`
   }
 
   .badge--rounded {
-    padding: var(--nile-spacing-xxs) var(--nile-spacing-md);
+    padding: 2px 8px;
     border-radius: 100px;
   }
 `;

package/src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts

@@ -19,12 +19,12 @@ export const styles = css`
     font-size: var(--nile-font-size-small);
     font-style: normal;
     font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    line-height: 16.8px;
     letter-spacing: 0.2px;
   }
 
   .nile-breadcrumb-item__arrow {
-    margin: 0 var(--nile-spacing-md);
+    margin: 0 8px;
   }
 
   .nile-breadcrumb-item__arrow-hidden {

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

@@ -37,12 +37,12 @@ export const styles = css`
       var(--nile-transition-duration-default) border,
       var(--nile-transition-duration-default) box-shadow;
     cursor: inherit;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-medium);
+    font-size: 14px;
+    font-weight: 500;
     border-radius: var(--nile-radius-base-standard);
-    padding: var(--nile-spacing-lg);
-    gap: var(--nile-spacing-sm);
-    line-height: var(--nile-line-height-small);
+    padding: 10px 14px;
+    gap: 5px;
+    line-height: 20px;
     box-sizing: border-box;
     height: 40px;
   }
@@ -213,7 +213,7 @@ export const styles = css`
 
   .button--standard.button--caution:active:not(.button--disabled) {
     background-color: var(--nile-colors-red-700);
-    border-color: var(--nile-colors-red-700);
+    border-color: #820B0B;
     color: var(--nile-colors-white-base);
   }
 
@@ -227,121 +227,121 @@ export const styles = css`
 
   /* destructive */
   .button--standard.button--destructive {
-    background-color: var(--nile-colors-red-500);
-    border-color:  var(--nile-colors-red-500);
+    background-color: #d92d20;
+    border-color: #d92d20;
     color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--destructive:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-red-700);
-    border-color: var(--nile-colors-red-700);
+    background-color: #b42318;
+    border-color: #b42318;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--destructive:active:not(.button--disabled) {
-    background-color: var(--nile-colors-red-500);
-    border-color:  var(--nile-colors-red-500);
+    background-color: #d92d20;
+    border-color: #d92d20;
     color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
   }
   .button--standard.button--destructive:focus-visible:not(.button--disabled) {
-    background-color: var(--nile-colors-red-500);
-    border-color:  var(--nile-colors-red-500);
+    background-color: #d92d20;
+    border-color: #d92d20;
     color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
   }
 
   .button--standard.button--destructive.button--disabled {
-    background-color: var(--nile-colors-neutral-100);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-500);
+    background-color: #f2f4f7;
+    border-color: #eaecf0;
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   .button--standard.button--destructive.button--disabled:hover,
   .button--standard.button--destructive.button--disabled:active {
-    background-color: var(--nile-colors-neutral-100);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-500);
+    background-color: #f2f4f7;
+    border-color: #eaecf0;
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   /* secondary-Grey */
   .button--standard.button--secondary-grey {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-primary-900);
+    border-color: #d0d5dd;
+    color: #344054;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--secondary-grey:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-100);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
+    background-color: #f9fafb;
+    border-color: #d0d5dd;
+    color: #182230;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--secondary-grey:active:not(.button--disabled) {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-primary-900);
+    border-color: #d0d5dd;
+    color: #344054;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(152, 162, 179, 0.14);
   }
 
   .button--standard.button--secondary-grey.button--disabled {
-    background-color: var(--nile-colors-neutral-400);
+    background-color: #eaecf0;
     border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-500);
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   .button--standard.button--secondary-grey.button--disabled:hover,
   .button--standard.button--secondary-grey.button--disabled:active {
-    background-color: var(--nile-colors-neutral-400);
+    background-color: #eaecf0;
     border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-500);
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   /* secondary-blue */
   .button--standard.button--secondary-blue {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-primary-500);
-    color: var(--nile-colors-primary-700);
+    border-color: #85aad1;
+    color: #005291;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--secondary-blue:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-blue-100);
-    border-color: var(--nile-colors-primary-500);
-    color: var(--nile-colors-primary-700);
+    background-color: #eaf0f8;
+    border-color: #85aad1;
+    color: #004678;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--secondary-blue:active:not(.button--disabled) {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-primary-500);
-    color: var(--nile-colors-primary-700);
+    border-color: #85aad1;
+    color: #005291;
     box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
       0px 0px 0px 4px rgba(0, 94, 166, 0.15);
   }
 
   .button--standard.button--secondary-blue.button--disabled {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-500);
+    border-color: #eaecf0;
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   .button--standard.button--secondary-blue.button--disabled:hover,
   .button--standard.button--secondary-blue.button--disabled:active {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-500);
+    border-color: #eaecf0;
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
@@ -539,21 +539,21 @@ export const styles = css`
 
   /* destructive  */
   .button--outline.button--destructive {
-    border-color: var(--nile-colors-red-400);
-    color: var(--nile-colors-red-700);
+    border-color: #fda29b;
+    color: #b42318;
     box-shadow: 0px;
   }
 
   .button--outline.button--destructive:hover:not(.button--disabled),
   .button--outline.button--destructive.button--checked:not(.button--disabled) {
-    border-color: var(--nile-colors-red-400);
-    color: var(--nile-colors-red-700);
-    background-color: var(--nile-colors-red-100);
+    border-color: #fda29b;
+    color: #912018;
+    background-color: #fef3f2;
   }
 
   .button--outline.button--destructive:active:not(.button--disabled) {
-    border-color: var(--nile-colors-red-400);
-    color: var(--nile-colors-red-700);
+    border-color: #fda29b;
+    color: #b42318;
     background-color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
@@ -561,8 +561,8 @@ export const styles = css`
 
   /* destructive - focus-visible */
   .button--outline.button--destructive:focus-visible:not(.button--disabled) {
-    border-color: var(--nile-colors-red-400);
-    color: var(--nile-colors-red-700);
+    border-color: #fda29b;
+    color: #b42318;
     background-color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
@@ -577,8 +577,8 @@ export const styles = css`
   .button--outline.button--secondary-grey.button--checked:not(
       .button--disabled
     ) {
-    color: var(--nile-colors-primary-900);
-    background-color: var(--nile-colors-neutral-100);
+    color: #344054;
+    background-color: #f9fafb;
   }
 
   .button--outline.button--secondary-grey:active:not(.button--disabled) {
@@ -598,8 +598,8 @@ export const styles = css`
   .button--outline.button--secondary-blue.button--checked:not(
       .button--disabled
     ) {
-    color: var(--nile-colors-primary-700);
-    background-color: var(--nile-colors-blue-100);
+    color: #004678;
+    background-color: #eaf0f8;
   }
 
   .button--outline.button--secondary-blue:active:not(.button--disabled) {
@@ -621,11 +621,11 @@ export const styles = css`
  */
 
   .button--pill.button--small {
-    border-radius: var(--nile-radius-2xl);
+    border-radius: 24px;
   }
 
   .button--pill.button--medium {
-    border-radius: var(--nile-radius-2xl);
+    border-radius: 32px;
   }
 
   /*
@@ -633,8 +633,8 @@ export const styles = css`
  */
 
   .button--circle {
-    padding-left: var(--nile-spacing-none);
-    padding-right: var(--nile-spacing-none);
+    padding-left: 0;
+    padding-right: 0;
   }
 
   .button--circle.button--small {
@@ -684,7 +684,7 @@ export const styles = css`
   .button--loading nile-spinner {
     --indicator-color: currentColor;
     position: absolute;
-    font-size: var(--nile-type-scale-4);
+    font-size: 1em;
     height: 1em;
     width: 1em;
     top: calc(50% - 0.5em);

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

@@ -24,10 +24,10 @@ export const styles = css`
     color: var(--nile-colors-dark-900);
     text-align: center;
     font-feature-settings: 'clig' off, 'liga' off;
-    font-family: var(--nile-font-family-serif);
+    font-family: Colfax-regular;
     font-size: var(--nile-font-size-base);
     font-style: normal;
-    font-weight: var(--nile-font-weight-semi-bold);
+    font-weight: 600;
     line-height: var(--nile-font-size-base); /* 100% */
     letter-spacing: 0.2px;
   }

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

@@ -16,20 +16,20 @@ export const styles = css`
 
   .nile-button-toggle {
     display: flex;
-    padding: var(--nile-spacing-sm) var(--nile-spacing-xl) var(--nile-spacing-sm) var(--nile-spacing-xl);
+    padding: 6px 16px 6px 14px;
     border: 1px solid var(--nile-button-toggle-border-color);
     cursor: pointer;
-    border-radius: var(--nile-radius-radius-xs);
-    font-weight: var(--nile-font-weight-medium);
+    border-radius: 4px;
+    font-weight: 500;
     color: var(--nile-colors-dark-900);
     text-align: center;
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
-    line-height: var(--nile-line-height-xsmall);
+    font-size: 14px;
+    line-height: 14px;
     letter-spacing: 0.2px;
     justify-content: center;
     align-items: center;
-    gap: var(--nile-spacing-md);
+    gap: 8px;
     height: 40px;
     box-sizing: border-box;
   }
@@ -43,19 +43,19 @@ export const styles = css`
   }
 
   .nile-button-toggle__initial {
-    border-radius: var(--nile-radius-radius-xs) var(--nile-radius-radius-none) var(--nile-radius-radius-none) var(--nile-radius-radius-xs);
+    border-radius: 4px 0 0 4px;
   }
 
   .nile-button-toggle__end {
-    border-radius: var(--nile-radius-radius-none) var(--nile-radius-radius-xs) var(--nile-radius-radius-xs) var(--nile-radius-radius-none);
-    border-left: var(--nile-radius-radius-none);
+    border-radius: 0 4px 4px 0;
+    border-left: 0;
   }
 
   .nile-button-toggle__middle {
     border-width: 1px 1px 1px 0;
     border-style: solid;
     border-color: var(--nile-colors-neutral-500);
-    border-radius: var(--nile-radius-radius-none);
+    border-radius: 0;
   }
 
   .nile-button-toggle__active {