@aquera/nile-elements 0.1.29-beta-1.2 → 0.1.29

package/package.json

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

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

@@ -1,4 +1,4 @@
- /**
+/**
  * Copyright Aquera Inc 2023
  *
  * This source code is licensed under the BSD-3-Clause license found in the
@@ -57,7 +57,6 @@ static styles: CSSResultGroup = styles;
 @query('.accordian__header') header: HTMLElement;
 @query('.accordian__body') body: HTMLElement;
 @query('.accordian__expand-icon-slot') expandIconSlot: HTMLSlotElement;
-@query('slot[name="summary"]') summarySlot: HTMLSlotElement;  
 
 /**
  * Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you
@@ -94,17 +93,7 @@ firstUpdated() {
   this.body.style.height = this.open ? 'auto' : '0';
 }
 
-  private handleSummaryClick(event: MouseEvent) {
-    const path = event.composedPath();
-    const slotIndex = path.indexOf(this.summarySlot);
-    if (slotIndex !== -1) {
-      for (let i = 0; i < slotIndex; i++) {
-        const el = path[i];
-        if (el instanceof Element && el.matches('input, button, select, textarea, a, label')) {
-          return;  
-        }
-      }
-    }
+private handleSummaryClick() {
   if (!this.disabled) {
     if (this.open) {
       this.hide();

package/src/nile-circular-progressbar/nile-circular-progressbar.css.ts

@@ -1,4 +1,4 @@
- /**
+/**
  * Copyright Aquera Inc 2023
  *
  * This source code is licensed under the BSD-3-Clause license found in the
@@ -11,52 +11,35 @@ import { css } from 'lit';
  * Progressbar CSS
  */
 export const styles = css`
+  :host{
+    
+  }
+  .track {
+    stroke-width: 2px;
+    stroke: var(--nile-colors-yellow-400);
+    opacity: 0.5;
+    fill: none;
+  }
+
+  .progress {
+    stroke-width: 2px;
+    stroke: var(--nile-colors-yellow-500);
+    stroke-linecap: round;
+    fill: none;
+    transform: rotate(270deg);
+    transform-origin: center;
+  }
+
+  .circle__text {
+    color: var(--nile-colors-dark-900);
+    text-align: center;
+    font-size: var(--nile-type-scale-1);
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular);
+    line-height: var(--nile-type-scale-1);
+    letter-spacing: 0.2px;
+    text-transform: uppercase;
+  }
+`;
 
- :host {
-  display: inline-block;
-}
-
-.track {
-  stroke-width: 4px;
-  stroke: var(--nile-colors-neutral-400);
-  opacity: 0.5;
-  fill: none;
-}
-
-.progress {
-  stroke-width: 4px;
-  stroke: var(--nile-colors-primary-600);
-  stroke-linecap: round;
-  fill: none;
-  transform: rotate(270deg);
-  transform-origin: center;
-  transition: stroke-dashoffset 0.8s ease-in-out;  
-}
-
-.circle__text {
-  fill: var(--nile-colors-dark-900);
-  text-align: center;
-  font-size: var(--nile-type-scale-1);
-  font-style: normal;
-  font-weight: var(--nile-font-weight-regular);
-  line-height: var(--nile-type-scale-1);
-  letter-spacing: 0.2px;
-}
-
-.nile-progress-bar__status {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-.nile-progress-bar__message {
-  flex-grow: 1;
-}
-
-.nile-progress-bar__percentage {
-  white-space: nowrap;
-}
-
-`
 export default [styles];

package/src/nile-circular-progressbar/nile-circular-progressbar.ts

@@ -31,11 +31,10 @@ export class NileCircularProgressbar extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
+  @query('.progress') progressCircle: any;
+  @property({ type: Number, reflect: true }) progress = 50;
 
-  @query('.progress') progressCircle!: SVGCircleElement;
-  
-  @property({ type: Number, reflect: true }) value = 0;
-/* #endregion */
+  /* #endregion */
 
   /* #region Methods */
 
@@ -44,62 +43,40 @@ export class NileCircularProgressbar extends NileElement {
    * @slot This is a slot test
    */
   // make reactive to pass through
-  @property({ type: String, reflect: true }) content?: string;
-  @property({ type: Number, reflect: true }) size = 40;  
-
-  private get circleSize() {
-    const radius = this.size / 2 - 4;  
-    return {
-      radius,
-      viewBox: this.size,
-      fontSize: `${this.size * 0.25}px`,  
-    };
-  }
 
   connectedCallback() {
     super.connectedCallback();
     this.updateComplete.then(() => {
-      this.value = Math.max(0, Math.min(100, this.value));
-      this.setProgress(this.value);
+      if (this.progress < 0) {
+        this.progress = 0;
+      }
+      if (this.progress > 100) {
+        this.progress = 100;
+      }
+      this.setProgress(this.progress);
     });
   }
-
   private setProgress(percent: number) {
-    if (this.progressCircle) {
-      const circleRadius = this.progressCircle.r.baseVal.value;
-      const circumference = circleRadius * 2 * Math.PI;
-
-      this.progressCircle.style.transition = 'stroke-dashoffset 0.8s ease-in-out'; 
-      this.progressCircle.style.strokeDasharray = `${circumference}`;
-      this.progressCircle.style.strokeDashoffset = `${circumference - (percent / 100) * circumference}`;
-    }
-  }
-
-  updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has('value')) {
-      this.setProgress(this.value);
-    }
+    const circleRadius = this.progressCircle.r.baseVal.value;
+    let circumference = circleRadius * 2 * Math.PI;
+    this.progressCircle.style.strokeDasharray = circumference;
+    this.progressCircle.style.strokeDashoffset =
+      circumference - (percent / 100) * circumference;
   }
 
   public render(): TemplateResult {
-    const { radius, viewBox, fontSize } = this.circleSize;
-    const innerText = this.content ?? `${Math.round(this.value)}%`;
-
     return html`
-      <svg width="${viewBox}" height="${viewBox}" viewBox="0 0 ${viewBox} ${viewBox}">
-        <circle r="${radius}" cx="${viewBox / 2}" cy="${viewBox / 2}" class="track"></circle>
-        <circle r="${radius}" cx="${viewBox / 2}" cy="${viewBox / 2}" class="progress"></circle>
-        
-       
-          <text
-            x="50%"
-            y="53%"
-            text-anchor="middle"
-            alignment-baseline="middle"
-            class="circle__text"
-            style="font-size: ${fontSize};"
-          >
-          ${innerText}
+      <svg width="40" height="40">
+        <circle r="19" cx="20" cy="20" class="track"></circle>
+        <circle r="19" cx="20" cy="20" class="progress"></circle>
+        <text
+          x="50%"
+          y="50%"
+          text-anchor="middle"
+          alignment-baseline="middle"
+          class="circle__text"
+        >
+          ${this.progress} %
         </text>
       </svg>
     `;

package/src/nile-icon/icons/svg/index.ts

@@ -414,6 +414,8 @@ export { default as refresh } from './refresh';
 export { default as reminder } from './reminder';
 export { default as resize } from './resize';
 export { default as resource } from './resource';
+export { default as resource_analysis } from './resource_analysis';
+export { default as resource_graph } from './resource_graph';
 export { default as restart_alt } from './restart_alt';
 export { default as revocationcycle } from './revocationcycle';
 export { default as revokationcycle } from './revokation-cycle';
@@ -457,6 +459,8 @@ export { default as shield01 } from './shield-01';
 export { default as smalltick } from './smalltick';
 export { default as smartcode } from './smartcode';
 export { default as sort } from './sort';
+export { default as sort_ascending } from './sort_ascending';
+export { default as sort_descending } from './sort_descending';
 export { default as sortascending } from './sortascending';
 export { default as sortdescending } from './sortdescending';
 export { default as sortdown } from './sortdown';
@@ -489,6 +493,7 @@ export { default as thumsup } from './thumsup';
 export { default as tick } from './tick';
 export { default as timeupdate } from './timeupdate';
 export { default as timezone } from './timezone';
+export { default as transaction_monitor } from './transaction_monitor';
 export { default as trash01 } from './trash-01';
 export { default as trash03 } from './trash-03';
 export { default as trashnofill } from './trash-no-fill';

package/src/nile-icon/icons/svg/resource_analysis.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC43MzY4NCA4LjUzODQ3QzUuNzg5NDcgOC41Mzg0NyA2LjY4NDIxIDguMTY5NDcgNy40MjEwNSA3LjQzMTQ3QzguMTU3ODkgNi42OTMzNyA4LjUyNjMyIDUuNzk3MTYgOC41MjYzMiA0Ljc0Mjg0QzguNTI2MzIgMy42ODg1MyA4LjE1Nzg5IDIuNzkyMzcgNy40MjEwNSAyLjA1NDM3QzYuNjg0MjEgMS4zMTYzNyA1Ljc4OTQ3IDAuOTQ3MzY4IDQuNzM2ODQgMC45NDczNjhDMy42ODQyMSAwLjk0NzM2OCAyLjc4OTQ3IDEuMzE2MzcgMi4wNTI2MyAyLjA1NDM3QzEuMzE1NzkgMi43OTIzNyAwLjk0NzM2OCAzLjY4ODUzIDAuOTQ3MzY4IDQuNzQyODRDMC45NDczNjggNS43OTcxNiAxLjMxNTc5IDYuNjkzMzcgMi4wNTI2MyA3LjQzMTQ3QzIuNzg5NDcgOC4xNjk0NyAzLjY4NDIxIDguNTM4NDcgNC43MzY4NCA4LjUzODQ3Wk00LjI2MzE2IDYuNTA0VjIuNDEwODlINS4yMTA1M1Y2LjUwNEg0LjI2MzE2Wk0yLjEwMTI2IDYuNTA0VjMuNjQzNzRIMy4wNDg2M1Y2LjUwNEgyLjEwMTI2Wk02LjQyNTA1IDYuNTA0VjQuMjYzMTZINy4zNzI0MlY2LjUwNEg2LjQyNTA1Wk0xMS4zNDA1IDEyTDcuNzQ0MTEgOC40MDM2M0M3LjMzMjc0IDguNzQwNDcgNi44NzE2OCA5LjAwMyA2LjM2MDk1IDkuMTkxMjFDNS44NTAyMSA5LjM3OTUzIDUuMzA4ODQgOS40NzM2OCA0LjczNjg0IDkuNDczNjhDMy40MTQ1MyA5LjQ3MzY4IDIuMjk0NDcgOS4wMTQ4OSAxLjM3NjY4IDguMDk3MzFDMC40NTg4OTUgNy4xNzk3NCAwIDYuMDU5ODkgMCA0LjczNzc5QzAgMy40MTU2OCAwLjQ1ODc4OSAyLjI5NTUzIDEuMzc2MzcgMS4zNzczMkMyLjI5Mzk1IDAuNDU5MTA1IDMuNDEzNzkgMCA0LjczNTg5IDBDNi4wNTggMCA3LjE3ODE2IDAuNDU4ODk1IDguMDk2MzcgMS4zNzY2OEM5LjAxNDU4IDIuMjk0NDcgOS40NzM2OCAzLjQxNDUzIDkuNDczNjggNC43MzY4NEM5LjQ3MzY4IDUuMzA4ODQgOS4zNzk1MyA1Ljg1MDIxIDkuMTkxMjEgNi4zNjA5NUM5LjAwMyA2Ljg3MTY4IDguNzQwNDcgNy4zMzA3NCA4LjQwMzYzIDcuNzM4MUwxMiAxMS4zMzQ1TDExLjM0MDUgMTJaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/resource_graph.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNSAwLjk5OTk5OUwxMS41IDMuOTA3MTVMMTAuMjExMiAzLjkwNzE1TDEwLjIxMTIgNS41NDY0MkwxMS41IDUuNTQ2NDJMMTEuNSA4LjQ1MzU4TDEwLjIxMTIgOC40NTM1OEwxMC4yMTEyIDEwLjA5MjhMMTEuNSAxMC4wOTI4TDExLjUgMTNMOC4wODQ2OSAxM0w4LjA4NDY5IDEwLjA5MjhMOS4zNzM0OSAxMC4wOTI4TDkuMzczNDkgOC40NTM1OEw4LjA4NDY5IDguNDUzNThMOC4wODQ2OSA3LjQyNjIzTDUuOTE1MzEgNy40MjYyM0w1LjkxNTMxIDguNDUzNThMMi41IDguNDUzNThMMi41IDUuNTQ2NDJMNS45MTUzMSA1LjU0NjQyTDUuOTE1MzEgNi41NzM3N0w4LjA4NDY5IDYuNTczNzdMOC4wODQ2OSA1LjU0NjQyTDkuMzczNDkgNS41NDY0Mkw5LjM3MzQ5IDMuOTA3MTVMOC4wODQ2OSAzLjkwNzE1TDguMDg0NjggMC45OTk5OTlMMTEuNSAwLjk5OTk5OVpNMTAuNjYyMyAxLjg1MjQ1TDguOTIyMzkgMS44NTI0NUw4LjkyMjM5IDMuMDU0N0wxMC42NjIzIDMuMDU0N0wxMC42NjIzIDEuODUyNDVaTTEwLjY2MjMgNi4zOTg4OEw4LjkyMjM5IDYuMzk4ODhMOC45MjIzOSA3LjYwMTEyTDEwLjY2MjMgNy42MDExMkwxMC42NjIzIDYuMzk4ODhaTTUuMDc3NjEgNi4zOTg4OEwzLjMzNzcgNi4zOTg4OEwzLjMzNzcgNy42MDExMkw1LjA3NzYxIDcuNjAxMTJMNS4wNzc2MSA2LjM5ODg4Wk0xMC42NjIzIDEwLjk0NTNMOC45MjIzOSAxMC45NDUzTDguOTIyMzkgMTIuMTQ3NUwxMC42NjIzIDEyLjE0NzVMMTAuNjYyMyAxMC45NDUzWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/sort_ascending.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEgMkg0LjExNjZWMi44MTYzM0gxVjJaTTEwLjQyNyA0Ljg5MjE2TDEzIDcuNTEwMkwxMi40MzI3IDguMDg3NDNMMTAuODI4MSA2LjQ1NDc4VjEySDEwLjAyNThWNi40NTQ3OEw4LjQyMTIyIDguMDg3NDNMNy44NTM5MSA3LjUxMDJMMTAuNDI3IDQuODkyMTZaTTEgNS4wNjEyMkg1LjA0MjMzVjUuODc3NTVIMVY1LjA2MTIyWk0xIDguMTIyNDVINi40MzA5MVY4LjkzODc4SDFWOC4xMjI0NVpNMSAxMS4xODM3SDcuODE5NVYxMkgxVjExLjE4MzdaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/sort_descending.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEgMkg3LjgxOTVWMi44MDI3NUgxVjJaTTEwLjgyODEgNS4wMTAzM1YxMC40NjM0TDEyLjQzMjcgOC44NTc4NUwxMyA5LjQyNTQ4TDEwLjQyNyAxMkw3Ljg1MzkxIDkuNDI1NDhMOC40MjEyMiA4Ljg1Nzg1TDEwLjAyNTggMTAuNDYzNFY1LjAxMDMzSDEwLjgyODFaTTEgNS4wMTAzM0g2LjQzMDkxVjUuODEzMDlIMVY1LjAxMDMzWk0xIDguMDIwNjZINS4wNDIzM1Y4LjgyMzQySDFWOC4wMjA2NlpNMSAxMS4wMzFINC4xMTY2VjExLjgzMzdIMVYxMS4wMzFaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/transaction_monitor.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMS42MzAzNyA1LjQ4NDg1VjMuMDk1NjFDMS42MzAzNyAyLjc4OTQ0IDEuNzI5MjggMi41MzAzIDEuOTI3MTEgMi4zMTgxOEMyLjEyNDk0IDIuMTA2MDYgMi4zNjY2MiAyIDIuNjUyMTUgMkgxMS4zNDc4QzExLjYzMzQgMiAxMS44NzUxIDIuMTA2MDYgMTIuMDcyOSAyLjMxODE4QzEyLjI3MDcgMi41MzAzIDEyLjM2OTYgMi43ODk0NCAxMi4zNjk2IDMuMDk1NjFWNS40ODQ4NUgxMS41MjE4VjMuMDk1NjFDMTEuNTIxOCAzLjA0ODk0IDExLjUwMzcgMy4wMDYyMSAxMS40Njc0IDIuOTY3NDJDMTEuNDMxMiAyLjkyODU0IDExLjM5MTQgMi45MDkwOSAxMS4zNDc4IDIuOTA5MDlIMi42NTIxNUMyLjYwODYzIDIuOTA5MDkgMi41Njg3OCAyLjkyODU0IDIuNTMyNjEgMi45Njc0MkMyLjQ5NjM0IDMuMDA2MjEgMi40NzgyIDMuMDQ4OTQgMi40NzgyIDMuMDk1NjFWNS40ODQ4NUgxLjYzMDM3Wk0yLjY1MjE1IDEwLjQ4NDhDMi4zNjY2MiAxMC40ODQ4IDIuMTI0OTQgMTAuMzc4OCAxLjkyNzExIDEwLjE2NjdDMS43MjkyOCA5Ljk1NDU1IDEuNjMwMzcgOS42OTU0MSAxLjYzMDM3IDkuMzg5MjRWNi4zOTM5NEgyLjQ3ODJWOS4zODkyNEMyLjQ3ODIgOS40MzU5MSAyLjQ5NjM0IDkuNDc4NjkgMi41MzI2MSA5LjUxNzU4QzIuNTY4NzggOS41NTYzNiAyLjYwODYzIDkuNTc1NzYgMi42NTIxNSA5LjU3NTc2SDExLjM0NzhDMTEuMzkxNCA5LjU3NTc2IDExLjQzMTIgOS41NTYzNiAxMS40Njc0IDkuNTE3NThDMTEuNTAzNyA5LjQ3ODY5IDExLjUyMTggOS40MzU5MSAxMS41MjE4IDkuMzg5MjRWNi4zOTM5NEgxMi4zNjk2VjkuMzg5MjRDMTIuMzY5NiA5LjY5NTQxIDEyLjI3MDcgOS45NTQ1NSAxMi4wNzI5IDEwLjE2NjdDMTEuODc1MSAxMC4zNzg4IDExLjYzMzQgMTAuNDg0OCAxMS4zNDc4IDEwLjQ4NDhIMi42NTIxNVpNMSAxMlYxMS4wOTA5SDEzVjEySDFaTTEuNjMwMzcgNi4zOTM5NFY1LjQ4NDg1SDQuNzM5MUM0LjgxNzM5IDUuNDg0ODUgNC44OTE4NSA1LjUwNzM3IDQuOTYyNTEgNS41NTI0MkM1LjAzMzE2IDUuNTk3NTggNS4wODY1NyA1LjY1ODk5IDUuMTIyNzUgNS43MzY2N0w1LjkxMTk0IDcuNDE5N0w3Ljc2NDE4IDMuODk5ODVDNy44MDAzNiAzLjgyODMzIDcuODUwOSAzLjc3MzU0IDcuOTE1ODEgMy43MzU0NkM3Ljk4MDYyIDMuNjk3MzcgOC4wNTIxNyAzLjY3ODMzIDguMTMwNDUgMy42NzgzM0M4LjIwODczIDMuNjc4MzMgOC4yODMyIDMuNjk3MzcgOC4zNTM4NSAzLjczNTQ2QzguNDI0NTEgMy43NzM1NCA4LjQ3NzkyIDMuODM0NTUgOC41MTQxIDMuOTE4NDhMOS4yNDQ2NSA1LjQ4NDg1SDEyLjM2OTZWNi4zOTM5NEg5LjAzMjY5QzguOTM5OSA2LjM5Mzk0IDguODUwOTIgNi4zNjgxMyA4Ljc2NTc2IDYuMzE2NTJDOC42ODA2IDYuMjY0OCA4LjYxNjMxIDYuMTg5MTkgOC41NzI4OCA2LjA4OTdMOC4xMDIxOSA1LjA3Njk3TDYuMjQ0NTggOC41ODUxNUM2LjIwODMxIDguNjYyODMgNi4xNTQ4NSA4LjcyMTA2IDYuMDg0MiA4Ljc1OTg1QzYuMDEzNTQgOC43OTg3NCA1LjkzOTA3IDguODE4MTggNS44NjA3OSA4LjgxODE4QzUuNzgyNiA4LjgxODE4IDUuNzA5NjQgOC43OTU2NiA1LjY0MTkxIDguNzUwNjFDNS41NzQwOCA4LjcwNTU2IDUuNTIyMDggOC42NDQxOSA1LjQ4NTkxIDguNTY2NTJMNC40NzI3NCA2LjM5Mzk0SDEuNjMwMzdaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==";

package/src/nile-progress-bar/nile-progress-bar.css.ts

@@ -22,14 +22,6 @@ export default css`
     width: 100%;
     height: 2px;
     background-color: var(--nile-colors-neutral-400);
-    transition:  stroke-dashoffset 0.8s ease-in-out
-  }
-
- 
-  .nile-progress-bar__progress-bar.rounded li {
-    height: 4px;  
-    border-radius: 4px;
-    overflow: hidden; 
   }
 
   .nile-progress-bar__progress-bar li.changeColor::after {
@@ -41,18 +33,13 @@ export default css`
     top: 0;
     left: 0;
     background-color: var(--nile-colors-primary-600);
-    height: 100%;  
+    height: 2px;
     transition: all 1s linear;
   }
 
-   
-  .nile-progress-bar__progress-bar.rounded li span {
-    border-radius: 4px;
-  }
-
   .nile-progress-bar__reset {
     background-color: var(--nile-colors-neutral-400);
     position: absolute;
     z-index: 1;
   }
-`;
+`;

package/src/nile-progress-bar/nile-progress-bar.ts

@@ -7,16 +7,11 @@ export class NileProgressBar extends LitElement {
   static override styles: CSSResultGroup = styles;
 
   @property({ type: Number }) value = 0;
-  @property({ type: String }) variant: 'normal' | 'rounded' = 'normal';
 
   override render() {
-    const variantClass = this.variant === 'rounded' ? 'rounded' : '';
-    
-    
-
     return html`
       <div class="nile-progress-bar__container">
-        <ul class="nile-progress-bar__progress-bar ${variantClass}">
+        <ul class="nile-progress-bar__progress-bar">
           <li><span style="width: ${this.value}%"></span></li>
         </ul>
       </div>

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

@@ -11,9 +11,6 @@ import {css} from 'lit';
  * Stepper CSS
  */
 export const styles = css`
-	*{
-		box-sizing:border-box;
-	}
 	:host {
 		display:block;
 		height:100%;
@@ -21,14 +18,11 @@ export const styles = css`
 	.nile-stepper--horizontal{
 		display:flex;
 		align-items:center;
-		padding: var(--nile-spacing-spacing-3xl) 0;
 	}
-
 	.nile-stepper--vertical{
 		height:100%;
 		display:flex;
 		flex-direction:column;
-		padding: var(--nile-spacing-spacing-3xl) var(--nile-spacing-spacing-3xl) 0;
 	}
 `;
 

package/src/nile-stepper/nile-stepper.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult, PropertyValueMap } from 'lit';
+import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-stepper.css';
 import NileElement from '../internal/nile-element';
@@ -23,17 +23,17 @@ import { classMap } from 'lit/directives/class-map.js';
 export class NileStepper extends NileElement {
 
 	@property({ type: Boolean, attribute: 'vertical' }) isVertical: boolean = false;
-	@property({ type: Boolean, attribute: true, reflect:true }) contentBelow: boolean = false;
-	@property({ type: Number, attribute: true, reflect:true }) currentStep: number = 0;
-	@property({ type: Number, attribute: true, reflect:true  }) completedStep: number = 0;
-	@property({ type: String, attribute: true, reflect:true  }) size: 'sm' | 'md' | 'lg' = 'md';
+	@property({ type: Boolean, attribute: 'content-below', reflect:true }) contentBelow: boolean = false;
+	@property({ type: Number, attribute: 'currentStep', reflect:true }) currentStep: number = 0;
+	@property({ type: Number, attribute: 'completedStep', reflect:true  }) completedStep: number = 0;
+	@property({ type: String, attribute: 'size', reflect:true  }) size: 'sm' | 'md' | 'lg' = 'md';
 	@property() icon: string = 'tick';
 
-	protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{
-    super.update(changedProperties);
-		if(changedProperties.has('currentStep') || changedProperties.has('completedStep')){
+	connectedCallback() {
+		super.connectedCallback();
+		this.updateComplete.then(() => {
 			this.updateItems();
-		}
+		});
 	}
 
 	@watch('currentStep')
@@ -47,9 +47,9 @@ export class NileStepper extends NileElement {
 		this.updateItems()
 		this.emit('nile-completed-change', { value: this.completedStep });
 	}
-	
+
 	private updateItems() {
-		const items: any = [...this.querySelectorAll(this.isVertical ? 'nile-vertical-stepper-item' : 'nile-stepper-item')];
+		const items: any = [...this.querySelectorAll(this.isVertical?'nile-vertical-stepper-item':'nile-stepper-item')];
 		if (!items.length) return;
 		const haveFlex = items.length < 3;
 

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

@@ -15,7 +15,7 @@ export const styles = css`
 		--stepper-flex-val:1;
 		--bulletin--dot--seperation:30%;
 		
-		display: inline-block;
+		display:inline-block;
 		flex-grow:var(--stepper-flex-val);
 		min-width:var(--nile-stepper-min-width);
 	}
@@ -25,7 +25,7 @@ export const styles = css`
 	}
 
 	.stepper__item--sm {
-		--item-spacing: var(--nile-spacing-spacing-md);
+		--item-spacing: var(--nile-spacing-spacing-lg,12px);
 		--stepper-item-title-size:14px;
 		--stepper-item-subtitle-size:14px;
 		--stepper-item-text-line-height:20px;
@@ -33,17 +33,17 @@ export const styles = css`
 	}
 
 	.stepper__item--md {
-		--item-spacing: var(--nile-spacing-spacing-md);
+		--item-spacing: var(--nile-spacing-spacing-xl, 16px);
 		--stepper-item-title-size:16px;
-		--stepper-item-subtitle-size:14px;
-		--stepper-item-text-line-height:24px;
+		--stepper-item-subtitle-size:16px;
+		--stepper-item-text-line-heightt:24px;
 		--circle-height:20px;
 	}
 
 	.stepper__item--lg {
-		--item-spacing: var(--nile-spacing-spacing-lg);
+		--item-spacing: var(--nile-spacing-spacing-xl, 16px);
 		--stepper-item-title-size:16px;
-		--stepper-item-subtitle-size:14px;
+		--stepper-item-subtitle-size:16px;
 		--stepper-item-text-line-height:24px;
 		--circle-height:28px;
 	}
@@ -67,24 +67,13 @@ export const styles = css`
 	.stepper__line {
 		display: block;
 		border: 0;
-		border-top: 2px solid var(--nile-colors-neutral-500);
+		border-top: 2px solid var(--nile-colors-gray-light-mode-200);
 	}
 
 	.stepper__line--active {
 		border-top: 2px solid var(--nile-colors-primary-600);
 	}
 
-	.stepper__item__content--above{
-		position:relative;
-		padding: 0 var(--nile-spacing-spacing-md);
-	}
-
-	.stepper__item__content--above .stepper__content__subtitle{
-		position: absolute;
-    top: 100%;
-    white-space: nowrap;
-	}
-
 	.stepper__item__content--below {
 		margin-top: var(--item-spacing);
 		display:flex;
@@ -98,35 +87,25 @@ export const styles = css`
 		margin:0 -1px;
 	}
 
-	.stepper__item__bulletin{
-		margin-left: 6px;
-		margin-right: 6px;
-	}
-
-	.stepper__item__bulletin--inline{
-		margin-right: 0px;
-	}
-
 	.stepper__content__title {
-		color:var(--nile-colors-dark-900);
+		color:var(--nile-colors-gray-light-mode-700);
 		font-size: var(--stepper-item-title-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var(--nile-font-family-medium);
-		font-weight: 400;
+		font-weight: 600;
 	}
 
 	.stepper__content__title--inline{
 		padding: 0 8px;
-		color:var(--nile-colors-dark-900);
+		color:var(--nile-colors-gray-light-mode-500);
 	}
 
 	.stepper__content__title--active{
-		color:var(--nile-colors-primary-600);
-		font-weight: 600;
+		color:var(--nile-colors-primary-700);
 	}
 
 	.stepper__content__subtitle {
-		color:var(--nile-colors-dark-500);
+		color:var(--nile-colors-gray-light-mode-600);
 		font-size: var(--stepper-item-subtitle-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var(--nile-font-family-sans-serif);
@@ -141,13 +120,13 @@ export const styles = css`
 		width: var(--circle-height);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		background: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));
-		border: 2px solid var(--nile-colors-neutral-500);
+		background: radial-gradient(var(--nile-colors-gray-light-mode-300) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50) var(--bulletin--dot--seperation));
+		border: 2px solid var(--nile-colors-gray-light-mode-200);
 	}
 
 	.stepper__bulletin__dot--active{
 		background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
-		border: 2px solid var(--nile-colors-primary-500);
+		border: 2px solid var(--nile-colors-primary-400);
 	}
 
 	.stepper__bulletin--icon {