@aquera/nile-elements 0.0.68 → 0.0.70

package/src/nile-tab-group/nile-tab-group.ts

@@ -48,7 +48,7 @@ import type NileTabPanel from '../nile-tab-panel/nile-tab-panel';
 @customElement('nile-tab-group')
 export class NileTabGroup extends NileElement {
 
-	static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = styles;
 
   private activeTab?: NileTab;
   private mutationObserver: MutationObserver;
@@ -66,6 +66,10 @@ export class NileTabGroup extends NileElement {
   /** The placement of the tabs. */
   @property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top';
 
+
+  /** Track for showing Indicators and Background. */
+  @property({ type: Boolean, reflect: true,attribute:'no-track'}) noTrack = false;
+
   /**
    * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
    * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
@@ -113,11 +117,11 @@ export class NileTabGroup extends NileElement {
       whenAllDefined.then(() => {
         // Set initial tab state when the tabs become visible
         const intersectionObserver = new IntersectionObserver((entries, observer) => {
-          if (entries[0].intersectionRatio > 0) {
-            this.setAriaLabels();
+            if (entries[0].intersectionRatio > 0) {
+              this.setAriaLabels();
             this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });
-            observer.unobserve(entries[0].target);
-          }
+              observer.unobserve(entries[0].target);
+            }
         });
         intersectionObserver.observe(this.tabGroup);
       });
@@ -231,8 +235,8 @@ export class NileTabGroup extends NileElement {
     this.nav.scroll({
       left:
         true
-          ? this.nav.scrollLeft + this.nav.clientWidth
-          : this.nav.scrollLeft - this.nav.clientWidth,
+        ? this.nav.scrollLeft + this.nav.clientWidth
+        : this.nav.scrollLeft - this.nav.clientWidth,
       behavior: 'smooth'
     });
   }
@@ -241,8 +245,8 @@ export class NileTabGroup extends NileElement {
     this.nav.scroll({
       left:
         true
-          ? this.nav.scrollLeft - this.nav.clientWidth
-          : this.nav.scrollLeft + this.nav.clientWidth,
+        ? this.nav.scrollLeft - this.nav.clientWidth
+        : this.nav.scrollLeft + this.nav.clientWidth,
       behavior: 'smooth'
     });
   }
@@ -309,8 +313,8 @@ export class NileTabGroup extends NileElement {
     const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));
     const offset = precedingTabs.reduce(
       (previous, current) => ({
-        left: previous.left + current.clientWidth + 24,
-        top: previous.top + current.clientHeight + 24
+        left: previous.left + current.clientWidth + 10,
+        top: previous.top + current.clientHeight + 10
       }),
       { left: 0, top: 0 }
     );
@@ -353,7 +357,7 @@ export class NileTabGroup extends NileElement {
     } else {
       this.hasScrollControls =
         ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
-        this.hasScrollControls = false;
+      this.hasScrollControls = false;
     }
   }
 
@@ -391,7 +395,8 @@ export class NileTabGroup extends NileElement {
           'tab-group--start': this.placement === 'start',
           'tab-group--end': this.placement === 'end',
           'tab-group--rtl': true,
-          'tab-group--has-scroll-controls': this.hasScrollControls
+          'tab-group--has-scroll-controls': this.hasScrollControls,
+          'hide__track':this.noTrack
         })}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
@@ -413,8 +418,13 @@ export class NileTabGroup extends NileElement {
 
           <div class="tab-group__nav">
             <div part="tabs" class="tab-group__tabs" role="tablist">
-              <div part="active-tab-indicator" class="tab-group__indicator"></div>
-              <slot name="nav" @slotchange=${this.syncTabsAndPanels}></slot>
+              <div
+                part="active-tab-indicator"
+                class=${classMap({
+                  'tab-group__indicator': !this.noTrack,
+                })}
+              ></div>
+              <slot name="nav"  @slotchange=${this.syncTabsAndPanels}></slot>
             </div>
           </div>
 

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -16,6 +16,7 @@ export const styles = css`
     box-sizing: border-box;
     padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
     min-height: 44px;
+    height: 44px;
   }
 
   .headers {
@@ -24,7 +25,7 @@ export const styles = css`
     height: auto;
     width: 100%;
     gap: 8px;
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-gray-light-mode-600);
     font-family: var(--nile-font-family-serif);
     font-feature-settings: 'clig' off, 'liga' off;
     font-size: var(--nile-type-scale-2);
@@ -44,7 +45,6 @@ export const styles = css`
   .sorting__icons {
     display: flex;
     flex-direction: column;
-    /* justify-content: space-between; */
     align-items: centre;
   }
 

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

@@ -21,12 +21,14 @@ export const styles = css`
   .alert {
     position: relative;
     display: flex;
-    align-items: stretch;
+    align-items: flex-start;
     border: solid 2px 2px;
-    border-radius: var(--nile-radius-base-standard);
+    border-radius: 8px;
     margin: inherit;
-    padding: 12px;
-    gap: 10px;
+    padding: 16px;
+    gap: 16px;
+    width: max-content;
+    min-width: 400px;
   }
 
   .alert:not(.alert--has-icon) .alert__icon,
@@ -35,10 +37,8 @@ export const styles = css`
   }
 
   .alert__prefix-icon-container {
-    height: 26px;
-    width: 26px;
+    background-color: red;
     border-radius: 4px;
-    padding: 6px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
@@ -111,10 +111,9 @@ export const styles = css`
   .alert--black .alert__prefix-icon-container {
     background: var(--nile-toast-color-icon-background-color-black);
   }
-  
+
   .alert__message {
     flex: 1 1 auto;
-    display: block;
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -122,17 +121,19 @@ export const styles = css`
     align-items: flex-start;
     font-family: var(--nile-font-family-serif);
     font-size: 14px;
-    font-weight: 400;
-    line-height: 14px;
+    line-height: 20px;
     color: black;
+    gap:3px;
   }
 
   .alert__message--title {
     font-weight: 600;
+    color:#344054;
   }
 
   .alert__message--content {
-    line-height: 21px;
+    font-weight:400;
+    color:#475467;
   }
 
   .alert__message--content-only {
@@ -168,11 +169,11 @@ export const styles = css`
     padding: 0 6px;
 
     color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
-    font-size: 12px;
+    font-family: var
+    font-size: 14px;
     font-style: normal;
-    font-weight: 500;
-    line-height: 12px;
+    font-weight: 400;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 

package/src/nile-toast/nile-toast.ts

@@ -192,15 +192,15 @@ export class NileToast extends NileElement {
       case 'success':
         return 'check-circle';
       case 'info':
-        return 'info-icon';
+        return 'info-circle';
       case 'warning':
-        return 'info-icon';
+        return 'alert-circle';
       case 'error':
-        return 'info-icon';
+        return 'alert-circle';
       case 'gray':
-        return 'info-icon';
+        return 'info-circle';
       case 'black':
-        return 'info-icon';
+        return 'info-circle';
     }
   }
 
@@ -310,8 +310,9 @@ export class NileToast extends NileElement {
                 >
                   <nile-icon
                     name="${this.getIconNameByVariant()}"
-                    size="15"
+                    size="20"
                     color="${this.getIconColorByVariant()}"
+                    method="stroke"
                   ></nile-icon>
                 </div>
               `
@@ -364,7 +365,8 @@ export class NileToast extends NileElement {
                 class="alert__close-button"
                 name="close"
                 label="close"
-                size="14"
+                size="20"
+                color="#98A2B3"
                 @click=${this.handleCloseClick}
               ></nile-icon-button>
             `

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

@@ -21,7 +21,7 @@ export const styles = css`
 
   .tooltip {
     --arrow-size: 6px;
-    --arrow-color: hsl(240 3.7% 15.9%);
+    --arrow-color: var(--nile-tooltip-color-background);
   }
 
   .tooltip::part(popup) {
@@ -49,13 +49,13 @@ export const styles = css`
     display: block;
     width: max-content;
     max-width: var(--max-width);
-    border-radius: 0.25rem;
+    border-radius: 4px;
     background-color: var(--nile-tooltip-color-background);
-    font-size:var(--nile-tooltip-font-size-sm);
-    font-weight:var( --nile-tooltip-font-weight-sm);
-    line-height:var(--nile-tooltip-line-height-sm);
+    font-size: var(--nile-tooltip-font-size-sm);
+    font-weight: var(--nile-tooltip-font-weight-sm);
+    line-height: var(--nile-tooltip-line-height-sm);
     padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
-    color: hsl(0, 0%, 100%);
+    color: #ffffff;
     pointer-events: none;
     word-break: break-word;
   }

package/tsconfig.json

@@ -18,5 +18,7 @@
     "strictPropertyInitialization": false,
     "strictFunctionTypes": false,
   },
-  "include": ["**/*.ts"]
+  "include": [
+    "src/**/*.ts"
+  ]
 }

package/web-test-runner.config.mjs

@@ -1,10 +1,10 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
+import { puppeteerLauncher } from '@web/test-runner-puppeteer';
 
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode', 'Multiple versions of Lit loaded', 'The main \'lit-element\' module entrypoint is deprecated'];
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Test files to run */
-  files: 'dist/test/**/*.test.js',
+  files: 'dist/src/**/*.test.js',
 
   /** Resolve bare module imports */
   nodeResolve: {
@@ -21,21 +21,34 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
     return true;
   },
 
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
   /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
+  concurrentBrowsers: 2,
 
   /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
+  concurrency: 1,
 
   /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
+  browsers: [
+    puppeteerLauncher({ launchOptions: { headless: true } }),
+  ],
+
+  /** Test framework configuration */
+  testFramework: {
+    config: {
+      timeout: 5000 // Increase the default timeout to 5 seconds
+    }
+  },
 
-  // See documentation for all available options
+  /** Coverage configuration */
+  coverageConfig: {
+    include: ['dist/src/**/*.js'],
+    exclude: ['dist/src/**/*.test.js'],
+    reporter: ['html', 'text-summary'],
+    thresholds: {
+      statements: 100,
+      branches: 100,
+      functions: 100,
+      lines: 100,
+    },
+  },
 });

package/dist/stories/icons.stories.d.ts

@@ -1,29 +0,0 @@
-import { TemplateResult } from 'lit';
-import '../src/nile-button';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        name: {
-            control: string;
-        };
-        textColor: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    title?: string;
-    name?: string;
-    textColor?: string;
-    slot?: TemplateResult;
-}
-export declare const Regular: Story<ArgTypes>;
-export declare const CustomTitle: Story<ArgTypes>;
-export declare const SlottedContent: Story<ArgTypes>;

package/dist/stories/icons.stories.js

@@ -1,27 +0,0 @@
-import { html } from 'lit';
-import '../src/nile-button';
-export default {
-    title: 'Nile Icons',
-    component: 'nile-icon',
-    argTypes: {
-        name: { control: 'text' },
-        textColor: { control: 'color' },
-    },
-};
-const Template = ({ title = 'Agents', textColor, name, slot, }) => html `
-  <h1>heading 2 ${name}</h1>
-`;
-export const Regular = Template.bind({});
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-    title: 'Agent Icon',
-    name: 'agents',
-};
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-    slot: html `<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-    slot: { table: { disable: true } },
-};
-//# sourceMappingURL=icons.stories.js.map

package/dist/stories/icons.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons.stories.js","sourceRoot":"","sources":["../../stories/icons.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,oBAAoB,CAAC;AAE5B,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAC;AAeF,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,QAAQ,EAChB,SAAS,EACT,IAAI,EACJ,IAAI,GACK,EAAE,EAAE,CAAC,IAAI,CAAA;kBACF,IAAI;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE7C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAC;AACF,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport '../src/nile-button';\n\nexport default {\n  title: 'Nile Icons',\n  component: 'nile-icon',\n  argTypes: {\n    name: { control: 'text' },\n    textColor: { control: 'color' },\n  },\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ninterface ArgTypes {\n  title?: string;\n  name?: string;\n  textColor?: string;\n  slot?: TemplateResult;\n}\n\nconst Template: Story<ArgTypes> = ({\n  title = 'Agents',\n  textColor,\n  name,\n  slot,\n}: ArgTypes) => html`\n  <h1>heading 2 ${name}</h1>\n`;\n\nexport const Regular = Template.bind({});\n\nexport const CustomTitle = Template.bind({});\n\nCustomTitle.args = {\n  title: 'Agent Icon',\n  name: 'agents',\n};\n\nexport const SlottedContent = Template.bind({});\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`,\n};\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } },\n};\n"]}

package/dist/stories/index.stories.d.ts

@@ -1,33 +0,0 @@
-import { TemplateResult } from 'lit';
-import '../src/nile-button';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        title: {
-            control: string;
-        };
-        counter: {
-            control: string;
-        };
-        textColor: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    name?: string;
-    counter?: number;
-    textColor?: string;
-    slot?: TemplateResult;
-}
-export declare const Regular: Story<ArgTypes>;
-export declare const CustomTitle: Story<ArgTypes>;
-export declare const CustomCounter: Story<ArgTypes>;
-export declare const SlottedContent: Story<ArgTypes>;

package/dist/stories/index.stories.js

@@ -1,37 +0,0 @@
-import { html } from 'lit';
-import '../src/nile-button';
-export default {
-    title: 'NileButton',
-    component: 'nile-button',
-    argTypes: {
-        title: { control: 'text' },
-        counter: { control: 'number' },
-        textColor: { control: 'color' },
-    },
-};
-const Template = ({ name = 'Primary', counter = 5, textColor, slot, }) => html `
-  <nile-button
-    style="--nile-elements-text-color: ${textColor || 'black'}"
-    .name=${name}
-    .counter=${counter}
-  >
-    ${slot}
-  </nile-button>
-`;
-export const Regular = Template.bind({});
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-    name: 'Primary',
-};
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-    counter: 123456,
-};
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-    slot: html `<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-    slot: { table: { disable: true } },
-};
-//# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,oBAAoB,CAAC;AAE5B,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAC;AAeF,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,CAAC,EACX,SAAS,EACT,IAAI,GACK,EAAE,EAAE,CAAC,IAAI,CAAA;;yCAEqB,SAAS,IAAI,OAAO;YACjD,IAAI;eACD,OAAO;;MAEhB,IAAI;;CAET,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,SAAS;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAC;AACF,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport '../src/nile-button';\n\nexport default {\n  title: 'NileButton',\n  component: 'nile-button',\n  argTypes: {\n    title: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' },\n  },\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ninterface ArgTypes {\n  name?: string;\n  counter?: number;\n  textColor?: string;\n  slot?: TemplateResult;\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'Primary',\n  counter = 5,\n  textColor,\n  slot,\n}: ArgTypes) => html`\n  <nile-button\n    style=\"--nile-elements-text-color: ${textColor || 'black'}\"\n    .name=${name}\n    .counter=${counter}\n  >\n    ${slot}\n  </nile-button>\n`;\n\nexport const Regular = Template.bind({});\n\nexport const CustomTitle = Template.bind({});\nCustomTitle.args = {\n  name: 'Primary',\n};\n\nexport const CustomCounter = Template.bind({});\nCustomCounter.args = {\n  counter: 123456,\n};\n\nexport const SlottedContent = Template.bind({});\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`,\n};\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } },\n};\n"]}