@aquera/nile-elements 0.1.37 → 0.1.38-beta-1.4

package/dist/src/nile-tab-group/nile-tab-group.css.js

@@ -14,17 +14,17 @@ export const styles = css `
   }
 
   :host {
-    --indicator-color: var(--nile-colors-primary-600);
-    --track-color: var(--nile-colors-neutral-400);
-    --track-width: 2px;
-    --tab-gap: 12px;
+    --indicator-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    --track-color: var(--nile-colors-neutral-400, var(--ng-componentcolors-utility-gray-500));
+    --track-width: var(--nile-width-2px, var(--ng-width-0-5));
+    --tab-gap: var(--nile-spacing-lg, var(--ng-spacing-3));
 
     display: block;
   }
 
   .tab-group {
     display: flex;
-    border-radius: 0;
+    border-radius: var(--nile-radius-none, var(--ng-radius-none));
   }
 
   .tab-group__tabs {
@@ -35,7 +35,7 @@ export const styles = css `
 
   .hide__track {
     --track-width: 0px;
-    --tab-gap: 3px;
+    --tab-gap: var(--nile-spacing-xs, var(--ng-spacing-1));
   }
 
   .tab-group__indicator {
@@ -47,14 +47,14 @@ export const styles = css `
     position: absolute;
     height: var(--track-width);
     width: 100%;
-    background: var(--nile-colors-neutral-400);
+    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));
     bottom:0px;
     z-index:0;
   }
 
   .tab-group--has-scroll-controls .tab-group__nav-container {
     position: relative;
-    padding: 0 10px;
+    padding: var(--nile-spacing-none) var(--ng-spacing-3);
   }
 
   .tab-group__body {
@@ -124,7 +124,7 @@ export const styles = css `
 
   .tab-group--top .tab-group__indicator {
     bottom: 0px;
-    border-bottom: 2px solid var(--nile-colors-primary-600);
+    border-bottom: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
     z-index:0;
   }
 
@@ -133,7 +133,7 @@ export const styles = css `
   }
 
   .tab-group--top ::slotted(nile-tab-panel) {
-    --padding: 10px 0;
+    --padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   /*
@@ -179,7 +179,7 @@ export const styles = css `
   }
 
   .tab-group--bottom ::slotted(nile-tab-panel) {
-    --padding: 10px 0;
+    --padding: var(--nile-spacing-lg) var(--nile-spacing-none);
   }
 
   /*
@@ -216,7 +216,7 @@ export const styles = css `
   }
 
   .tab-group--start ::slotted(nile-tab-panel) {
-    --padding: 0 10px;
+    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-3));
   }
 
   /*
@@ -253,14 +253,14 @@ export const styles = css `
   }
 
   .tab-group--end ::slotted(nile-tab-panel) {
-    --padding: 0 10px;
+    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-3));
   }
 
   .hide__track slot::slotted(nile-tab) {
-    --tab-border-radius: 4px;
-    --tab-padding:8px 12px;
-    --tab-hover-background-color: var(--nile-colors-neutral-100);
-    --tab-active-background-color: var(--nile-colors-brand-50);
+    --tab-border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    --tab-padding:var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-3));
+    --tab-hover-background-color: var(--nile-colors-neutral-100, var(--ng-colors-background-bg-secondary));
+    --tab-active-background-color: var(--nile-colors-brand-50, var(--ng-color-brand-50));
   }
 `;
 export default [styles];

package/dist/src/nile-tab-group/nile-tab-group.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tab-group.css.js","sourceRoot":"","sources":["../../../src/nile-tab-group/nile-tab-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8PxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TabGroup CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --indicator-color: var(--nile-colors-primary-600);\n    --track-color: var(--nile-colors-neutral-400);\n    --track-width: 2px;\n    --tab-gap: 12px;\n\n    display: block;\n  }\n\n  .tab-group {\n    display: flex;\n    border-radius: 0;\n  }\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n    gap: var(--tab-gap);\n  }\n\n  .hide__track {\n    --track-width: 0px;\n    --tab-gap: 3px;\n  }\n\n  .tab-group__indicator {\n    position: absolute;\n    transition: 0.3s translate ease, 0.3s width ease;\n  }\n\n  .tab-group__indicator__path{\n    position: absolute;\n    height: var(--track-width);\n    width: 100%;\n    background: var(--nile-colors-neutral-400);\n    bottom:0px;\n    z-index:0;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    position: relative;\n    padding: 0 10px;\n  }\n\n  .tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  .tab-group__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 20px;\n  }\n\n  .tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--start {\n    left: auto;\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--end {\n    left: 0;\n    right: auto;\n  }\n\n  /*\n   * Top\n   */\n\n  .tab-group--top {\n    flex-direction: column;\n  }\n\n  .tab-group--top .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--top .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--top .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--top .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group--top .tab-group__indicator {\n    bottom: 0px;\n    border-bottom: 2px solid var(--nile-colors-primary-600);\n    z-index:0;\n  }\n\n  .tab-group--top .tab-group__body {\n    order: 2;\n  }\n\n  .tab-group--top ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Bottom\n   */\n\n  .tab-group--bottom {\n    flex-direction: column;\n  }\n\n  .tab-group--bottom .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--bottom .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--bottom .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--bottom .tab-group__indicator {\n    top: calc(-1 * var(--track-width));\n    border-top: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--bottom .tab-group__body {\n    order: 1;\n  }\n\n  .tab-group--bottom ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Start\n   */\n\n  .tab-group--start {\n    flex-direction: row;\n  }\n\n  .tab-group--start .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--start .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-end: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    right: auto;\n    left: calc(-1 * var(--track-width));\n  }\n\n  .tab-group--start .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .tab-group--start ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n\n  /*\n   * End\n   */\n\n  .tab-group--end {\n    flex-direction: row;\n  }\n\n  .tab-group--end .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--end .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    left: calc(-1 * var(--track-width));\n    border-inline-start: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    left: auto;\n  }\n\n  .tab-group--end .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  .tab-group--end ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n\n  .hide__track slot::slotted(nile-tab) {\n    --tab-border-radius: 4px;\n    --tab-padding:8px 12px;\n    --tab-hover-background-color: var(--nile-colors-neutral-100);\n    --tab-active-background-color: var(--nile-colors-brand-50);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tab-group.css.js","sourceRoot":"","sources":["../../../src/nile-tab-group/nile-tab-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8PxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TabGroup CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --indicator-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    --track-color: var(--nile-colors-neutral-400, var(--ng-componentcolors-utility-gray-500));\n    --track-width: var(--nile-width-2px, var(--ng-width-0-5));\n    --tab-gap: var(--nile-spacing-lg, var(--ng-spacing-3));\n\n    display: block;\n  }\n\n  .tab-group {\n    display: flex;\n    border-radius: var(--nile-radius-none, var(--ng-radius-none));\n  }\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n    gap: var(--tab-gap);\n  }\n\n  .hide__track {\n    --track-width: 0px;\n    --tab-gap: var(--nile-spacing-xs, var(--ng-spacing-1));\n  }\n\n  .tab-group__indicator {\n    position: absolute;\n    transition: 0.3s translate ease, 0.3s width ease;\n  }\n\n  .tab-group__indicator__path{\n    position: absolute;\n    height: var(--track-width);\n    width: 100%;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));\n    bottom:0px;\n    z-index:0;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    position: relative;\n    padding: var(--nile-spacing-none) var(--ng-spacing-3);\n  }\n\n  .tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  .tab-group__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 20px;\n  }\n\n  .tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--start {\n    left: auto;\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--end {\n    left: 0;\n    right: auto;\n  }\n\n  /*\n   * Top\n   */\n\n  .tab-group--top {\n    flex-direction: column;\n  }\n\n  .tab-group--top .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--top .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--top .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--top .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .tab-group--top .tab-group__indicator {\n    bottom: 0px;\n    border-bottom: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    z-index:0;\n  }\n\n  .tab-group--top .tab-group__body {\n    order: 2;\n  }\n\n  .tab-group--top ::slotted(nile-tab-panel) {\n    --padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  /*\n   * Bottom\n   */\n\n  .tab-group--bottom {\n    flex-direction: column;\n  }\n\n  .tab-group--bottom .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--bottom .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--bottom .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--bottom .tab-group__indicator {\n    top: calc(-1 * var(--track-width));\n    border-top: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--bottom .tab-group__body {\n    order: 1;\n  }\n\n  .tab-group--bottom ::slotted(nile-tab-panel) {\n    --padding: var(--nile-spacing-lg) var(--nile-spacing-none);\n  }\n\n  /*\n   * Start\n   */\n\n  .tab-group--start {\n    flex-direction: row;\n  }\n\n  .tab-group--start .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--start .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-end: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    right: auto;\n    left: calc(-1 * var(--track-width));\n  }\n\n  .tab-group--start .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .tab-group--start ::slotted(nile-tab-panel) {\n    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-3));\n  }\n\n  /*\n   * End\n   */\n\n  .tab-group--end {\n    flex-direction: row;\n  }\n\n  .tab-group--end .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--end .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    left: calc(-1 * var(--track-width));\n    border-inline-start: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    left: auto;\n  }\n\n  .tab-group--end .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  .tab-group--end ::slotted(nile-tab-panel) {\n    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-3));\n  }\n\n  .hide__track slot::slotted(nile-tab) {\n    --tab-border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    --tab-padding:var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-3));\n    --tab-hover-background-color: var(--nile-colors-neutral-100, var(--ng-colors-background-bg-secondary));\n    --tab-active-background-color: var(--nile-colors-brand-50, var(--ng-color-brand-50));\n  }\n`;\n\nexport default [styles];\n\n"]}

package/dist/src/nile-tab-panel/nile-tab-panel.css.js

@@ -14,7 +14,7 @@ export const styles = css `
   }
 
   :host {
-    --padding: 0;
+    --padding: var(--nile-spacing-none, var(--ng-spacing-none));
 
     display: none;
   }

package/dist/src/nile-tab-panel/nile-tab-panel.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tab-panel.css.js","sourceRoot":"","sources":["../../../src/nile-tab-panel/nile-tab-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TabPanel CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --padding: 0;\n\n    display: none;\n  }\n\n  :host([active]) {\n    display: block;\n  }\n\n  .tab-panel {\n    display: block;\n    padding: var(--padding);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tab-panel.css.js","sourceRoot":"","sources":["../../../src/nile-tab-panel/nile-tab-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TabPanel CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --padding: var(--nile-spacing-none, var(--ng-spacing-none));\n\n    display: none;\n  }\n\n  :host([active]) {\n    display: block;\n  }\n\n  .tab-panel {\n    display: block;\n    padding: var(--padding);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table/nile-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table.js","sourceRoot":"","sources":["../../../src/nile-table/nile-table.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult, PropertyValues} from 'lit';\nimport { customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './nile-table.css';\nimport NileElement from '../internal/nile-element';\nimport { NileTableBody } from '../nile-table-body';\nimport { NileTableCellItem } from '../nile-table-cell-item';\nimport { NileTableHeaderItem } from '../nile-table-header-item';\n\n\n/**\n * Nile table component.\n *\n * @tag nile-table\n *\n */\n@customElement('nile-table')\nexport class NileTable extends NileElement {\n  @query('slot') defaultSlot: HTMLSlotElement;\n\tprivate rows:Array<NileTableBody>=[];\n\tprivate primaryRowWidths:Array<number>=[]\n\tprivate resizeObserver:ResizeObserver ;\n\tprivate debounceTimeout:any\n\n\n\t/**\n\t * The styles for nile-table\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.addEventListener('nile-body-load',this.handleRows)\n\t}\n\n\tprotected firstUpdated(_changedProperties: PropertyValues): void {\n\t\tthis.updateComplete.then(()=>{\n\t\t\tthis.handleResizeObserver();\n\t\t})\n\t}\n\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<slot @slotchange=\"${this.repaintTable}\"></slot>\n\t\t\t`;\n\t}\n\n\trepaintTable(){\n\t\tthis.realignStructure();\n\t\tthis.handleBodyCssUpdate();\n\t}\n\n\thandleRows(e:CustomEvent){\n\t\tthis.rows=[...this.rows,e.detail.comp]\n\t}\n\n\thandleBodyCssUpdate(){\n    if (this.rows.length<2) return;\n    const tableBodies = this.rows;\n\t\tconst firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\tif(firstEl) {\n\t\t\tfirstEl.style.borderTopRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tfirstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t\tfirstEl.style.borderBottomRightRadius=\"0px\";\n\t\t\tfirstEl.style.borderBottomLeftRadius = '0px';\n\t\t\tfirstEl.style.borderBottom = 'none';\n\t\t}\n\t\ttableBodies.forEach((tb,i)=>{\n\t\t\tif(i>0 && i<tableBodies.length-1){\n\t\t\t\tconst el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\t\t\tif(el) {\n\t\t\t\t\tel.style.borderTopRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderTopLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottomRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderBottomLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottom = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t\tconst lastEl=tableBodies[tableBodies.length - 1].shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\tif(lastEl){\n\t\t\tlastEl.style.borderTopRightRadius=\"0px\";\n\t\t\tlastEl.style.borderTopLeftRadius = '0px';\n\t\t\tlastEl.style.borderBottomRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tlastEl.style.borderBottomLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t}\n\t}\n\n\tgetPrimaryColumnWidths(){\n\t\tconst primaryTb=this.rows.find(tb=>tb.type=='primary')!;\n\t\tconst widthArray=this.getTableCellFetchQuery(primaryTb).map((e:LitElement)=>e.clientWidth) as Array<number>\n\t\treturn widthArray;\n\t}\n\t\n\trealignStructure(){\n    if (this.rows.length<2) return;\n\t\tconst primaryRowWidths=this.getPrimaryColumnWidths();\n\t\tconst secondaryRows=this.rows.filter(tb=>tb.type!='primary');\n\t\tsecondaryRows.forEach((row)=>{\n\t\t\tlet elements=this.getTableCellFetchQuery(row)\n\t\t\telements?.forEach((el:NileTableCellItem|NileTableHeaderItem,ind)=>{\n\t\t\t\tel.style.setProperty('--cell-width',primaryRowWidths.at(ind)+'px')\n\t\t\t})\n\t\t})\n\t}\n\n\tgetTableCellFetchQuery(row:NileTableBody):Array<Element>{\n\t\treturn row?.shadowRoot?.\n\t\t\tquerySelector<HTMLSlotElement>('slot:not([name])')?.\n\t\t\tassignedElements()[0]\n\t\t\t.shadowRoot?.querySelector<HTMLSlotElement>('slot')?.\n\t\t\tassignedElements()!\n\t}\n\n\thandleResizeObserver(){\n\t\tconst onResize = (entries:ResizeObserverEntry[]): void=> {\n\t\t\tfor (let entry of entries) {\n\t\t\t\tif(this.debounceTimeout){\n\t\t\t\t\tclearTimeout(this.debounceTimeout);\n\t\t\t\t}\n\t\t\t\tthis.debounceTimeout=setTimeout(() => {\n\t\t\t\t\tthis.realignStructure();\n\t\t\t\t\tthis.debounceTimeout=null;\n\t\t\t\t}, 50);\n\t\t\t}\n\t\t};\n\t\tthis.resizeObserver=new ResizeObserver(onResize)\n\t\tthis.resizeObserver.observe(this);\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.resizeObserver.disconnect()\n\t\tsuper.disconnectedCallback()\n\t}\n\t/* #endregion */\n}\n\nexport default NileTable;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table': NileTable;\n  }\n}"]}
+{"version":3,"file":"nile-table.js","sourceRoot":"","sources":["../../../src/nile-table/nile-table.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult, PropertyValues} from 'lit';\nimport { customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './nile-table.css';\nimport NileElement from '../internal/nile-element';\nimport { NileTableBody } from '../nile-table-body';\nimport { NileTableCellItem } from '../nile-table-cell-item';\nimport { NileTableHeaderItem } from '../nile-table-header-item';\n\n\n/**\n * Nile table component.\n *\n * @tag nile-table\n *\n */\n@customElement('nile-table')\nexport class NileTable extends NileElement {\n  @query('slot') defaultSlot: HTMLSlotElement;\n\tprivate rows:Array<NileTableBody>=[];\n\tprivate primaryRowWidths:Array<number>=[]\n\tprivate resizeObserver:ResizeObserver ;\n\tprivate debounceTimeout:any\n\n\n\t/**\n\t * The styles for nile-table\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.addEventListener('nile-body-load',this.handleRows)\n\t}\n\n\tprotected firstUpdated(_changedProperties: PropertyValues): void {\n\t\tthis.updateComplete.then(()=>{\n\t\t\tthis.handleResizeObserver();\n\t\t})\n\t}\n\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<slot @slotchange=\"${this.repaintTable}\"></slot>\n\t\t\t`;\n\t}\n\n\trepaintTable(){\n\t\tthis.realignStructure();\n\t\tthis.handleBodyCssUpdate();\n\t}\n\n\thandleRows(e:CustomEvent){\n\t\tthis.rows=[...this.rows,e.detail.comp]\n\t}\n\n\thandleBodyCssUpdate(){\n    if (this.rows.length<2) return;\n    const tableBodies = this.rows;\n\t\tconst firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base');\n\t\tif(firstEl) {\n\t\t\tfirstEl.style.borderTopRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tfirstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t\tfirstEl.style.borderBottomRightRadius=\"0px\";\n\t\t\tfirstEl.style.borderBottomLeftRadius = '0px';\n\t\t\tfirstEl.style.borderBottom = 'none';\n\t\t}\n\t\ttableBodies.forEach((tb,i)=>{\n\t\t\tif(i>0 && i<tableBodies.length-1){\n\t\t\t\tconst el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base');\n\t\t\t\tif(el) {\n\t\t\t\t\tel.style.borderTopRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderTopLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottomRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderBottomLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottom = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t\tconst lastEl=tableBodies[tableBodies.length - 1].shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\tif(lastEl){\n\t\t\tlastEl.style.borderTopRightRadius=\"0px\";\n\t\t\tlastEl.style.borderTopLeftRadius = '0px';\n\t\t\tlastEl.style.borderBottomRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tlastEl.style.borderBottomLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t}\n\t}\n\n\tgetPrimaryColumnWidths(){\n\t\tconst primaryTb=this.rows.find(tb=>tb.type=='primary')!;\n\t\tconst widthArray=this.getTableCellFetchQuery(primaryTb).map((e:LitElement)=>e.clientWidth) as Array<number>\n\t\treturn widthArray;\n\t}\n\t\n\trealignStructure(){\n    if (this.rows.length<2) return;\n\t\tconst primaryRowWidths=this.getPrimaryColumnWidths();\n\t\tconst secondaryRows=this.rows.filter(tb=>tb.type!='primary');\n\t\tsecondaryRows.forEach((row)=>{\n\t\t\tlet elements=this.getTableCellFetchQuery(row)\n\t\t\telements?.forEach((el:NileTableCellItem|NileTableHeaderItem,ind)=>{\n\t\t\t\tel.style.setProperty('--cell-width',primaryRowWidths.at(ind)+'px')\n\t\t\t})\n\t\t})\n\t}\n\n\tgetTableCellFetchQuery(row:NileTableBody):Array<Element>{\n\t\treturn row?.shadowRoot?.\n\t\t\tquerySelector<HTMLSlotElement>('slot:not([name])')?.\n\t\t\tassignedElements()[0]\n\t\t\t.shadowRoot?.querySelector<HTMLSlotElement>('slot')?.\n\t\t\tassignedElements()!\n\t}\n\n\thandleResizeObserver(){\n\t\tconst onResize = (entries:ResizeObserverEntry[]): void=> {\n\t\t\tfor (let entry of entries) {\n\t\t\t\tif(this.debounceTimeout){\n\t\t\t\t\tclearTimeout(this.debounceTimeout);\n\t\t\t\t}\n\t\t\t\tthis.debounceTimeout=setTimeout(() => {\n\t\t\t\t\tthis.realignStructure();\n\t\t\t\t\tthis.debounceTimeout=null;\n\t\t\t\t}, 50);\n\t\t\t}\n\t\t};\n\t\tthis.resizeObserver=new ResizeObserver(onResize)\n\t\tthis.resizeObserver.observe(this);\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.resizeObserver.disconnect()\n\t\tsuper.disconnectedCallback()\n\t}\n\t/* #endregion */\n}\n\nexport default NileTable;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table': NileTable;\n  }\n}"]}

package/dist/src/nile-table-body/nile-table-body.css.js

@@ -11,16 +11,16 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     box-sizing: border-box;
-    --nile-table-background--odd: var(--nile-colors-base-white);
-    --nile-table-background--even: var(--nile-colors-base-white);
+    --nile-table-background--odd: var(--nile-colors-base-white , var(--ng-colors-bg-primary));
+    --nile-table-background--even: var(--nile-colors-base-white , var(--ng-colors-bg-primary));
   }
 
   .base {
-    background-color: var(--nile-colors-white-base);
-    border: 1px solid var(--nile-table-row-border-color);
-    border-radius: var(--nile-radius-radius-xl);
-    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));
+    border: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-md , var(--ng-radius-xl));
     overflow: hidden;
+    box-shadow: var(--nile-box-shadow-3 , var(--ng-shadow-xs));
   }
 
   .table__header {
@@ -35,7 +35,7 @@ export const styles = css `
   }
 
   slot::slotted(nile-table-row:nth-child(odd)) {
-    border-bottom: 1px solid var(--nile-colors-neutral-400);
+    border-bottom: 1px solid var(--nile-colors-neutral-400 , var(--ng-colors-border-secondary));
     background: var(--nile-table-background--odd);
   }
 

package/dist/src/nile-table-body/nile-table-body.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-body.css.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TableBody CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --nile-table-background--odd: var(--nile-colors-base-white);\n    --nile-table-background--even: var(--nile-colors-base-white);\n  }\n\n  .base {\n    background-color: var(--nile-colors-white-base);\n    border: 1px solid var(--nile-table-row-border-color);\n    border-radius: var(--nile-radius-radius-xl);\n    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),0px 1px 2px 0px rgba(16, 24, 40, 0.06);\n    overflow: hidden;\n  }\n\n  .table__header {\n    display: flex;\n    box-sizing: border-box;\n  }\n\n  .nile__table__body {\n    display: table;\n    border-collapse: collapse;\n    width: 100%;\n  }\n\n  slot::slotted(nile-table-row:nth-child(odd)) {\n    border-bottom: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-table-background--odd);\n  }\n\n  slot::slotted(nile-table-row:nth-child(even)) {\n    background: var(--nile-table-background--even);\n  }\n\n  slot::slotted(nile-table-row:last-child) {\n    border-bottom: 0px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-body.css.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TableBody CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --nile-table-background--odd: var(--nile-colors-base-white , var(--ng-colors-bg-primary));\n    --nile-table-background--even: var(--nile-colors-base-white , var(--ng-colors-bg-primary));\n  }\n\n  .base {\n    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-md , var(--ng-radius-xl));\n    overflow: hidden;\n    box-shadow: var(--nile-box-shadow-3 , var(--ng-shadow-xs));\n  }\n\n  .table__header {\n    display: flex;\n    box-sizing: border-box;\n  }\n\n  .nile__table__body {\n    display: table;\n    border-collapse: collapse;\n    width: 100%;\n  }\n\n  slot::slotted(nile-table-row:nth-child(odd)) {\n    border-bottom: 1px solid var(--nile-colors-neutral-400 , var(--ng-colors-border-secondary));\n    background: var(--nile-table-background--odd);\n  }\n\n  slot::slotted(nile-table-row:nth-child(even)) {\n    background: var(--nile-table-background--even);\n  }\n\n  slot::slotted(nile-table-row:last-child) {\n    border-bottom: 0px;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js

@@ -18,7 +18,7 @@ export const styles = css `
     display: table-cell;
     vertical-align: middle;
     max-width: var(--max--cell-width);
-    padding: 16px 24px;
+    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-2xl , var(--ng-spacing-3xl));
     min-height: var(--min--height);
   }
 
@@ -26,11 +26,11 @@ export const styles = css `
     min-width:var(--min-cell-width);
     width:var(--cell-width);
     height: 100%;
-    color: var(--nile-colors-gray-light-mode-600);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-tertiary-600));
+    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: var(--nile-font-weight-regular , var(--ng-font-weight-regular));
     /* line-height: var(--nile-type-scale-6); */
     line-height: normal;
     letter-spacing: 0.2px;

package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-cell-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TableCellItem CSS\n */\nexport const styles = css`\n  :host {\n    --min-cell-width:auto;\n    --cell-width:auto;\n    --min--height: 52px;\n    --max--cell-width: auto;\n    box-sizing: border-box;\n    display: table-cell;\n    vertical-align: middle;\n    max-width: var(--max--cell-width);\n    padding: 16px 24px;\n    min-height: var(--min--height);\n  }\n\n  .column {\n    min-width:var(--min-cell-width);\n    width:var(--cell-width);\n    height: 100%;\n    color: var(--nile-colors-gray-light-mode-600);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    /* line-height: var(--nile-type-scale-6); */\n    line-height: normal;\n    letter-spacing: 0.2px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-cell-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TableCellItem CSS\n */\nexport const styles = css`\n  :host {\n    --min-cell-width:auto;\n    --cell-width:auto;\n    --min--height: 52px;\n    --max--cell-width: auto;\n    box-sizing: border-box;\n    display: table-cell;\n    vertical-align: middle;\n    max-width: var(--max--cell-width);\n    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-2xl , var(--ng-spacing-3xl));\n    min-height: var(--min--height);\n  }\n\n  .column {\n    min-width:var(--min-cell-width);\n    width:var(--cell-width);\n    height: 100%;\n    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-tertiary-600));\n    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular , var(--ng-font-weight-regular));\n    /* line-height: var(--nile-type-scale-6); */\n    line-height: normal;\n    letter-spacing: 0.2px;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-header-item/nile-table-header-item.css.js

@@ -22,7 +22,7 @@ export const styles = css `
     display:flex;
     align-items:center;
     box-sizing: border-box;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
+    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-2xl , var(--ng-spacing-3xl));
     min-height: 44px;
     height: 44px;
   }
@@ -33,12 +33,12 @@ export const styles = css `
     align-items: center;
     height: auto;
     width: 100%;
-    gap: 8px;
-    color: var(--nile-colors-gray-light-mode-600);
-    font-family: var(--nile-font-family-serif);
+    gap: var(--nile-spacing-md , var(--ng-spacing-xs));
+    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-quaternary-500));
+    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-2);
-    font-weight: 500;
+    font-size: var(--nile-type-scale-2 , var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-600));
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;

package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TableHeaderItem CSS\n */\nexport const styles = css`\n  :host {\n    --cell-min-width: auto;\n    --cell-width: auto;\n    display: table-cell;\n    box-sizing: border-box;\n  }\n  \n  .header__item__wrapper{\n    min-width:var(--cell-min-width);\n    width:var(--cell-width);\n    display:flex;\n    align-items:center;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);\n    min-height: 44px;\n    height: 44px;\n  }\n\n  .headers {\n    overflow:hidden;\n    display: flex;\n    align-items: center;\n    height: auto;\n    width: 100%;\n    gap: 8px;\n    color: var(--nile-colors-gray-light-mode-600);\n    font-family: var(--nile-font-family-serif);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2);\n    font-weight: 500;\n    font-style: normal;\n    /* line-height: var(--nile-type-scale-5); */\n    line-height: normal;\n  }\n\n  nile-icon {\n    cursor: pointer;\n  }\n\n  .sorting__icons {\n    display: flex;\n    flex-direction: column;\n    align-items: centre;\n  }\n\n  .sorting__icons nile-icon:hover {\n    opacity: 0.4;\n  }\n\n  .hover__arrow {\n    opacity: 0;\n  }\n\n  .headers:hover .hover__arrow {\n    opacity: 0.3;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TableHeaderItem CSS\n */\nexport const styles = css`\n  :host {\n    --cell-min-width: auto;\n    --cell-width: auto;\n    display: table-cell;\n    box-sizing: border-box;\n  }\n  \n  .header__item__wrapper{\n    min-width:var(--cell-min-width);\n    width:var(--cell-width);\n    display:flex;\n    align-items:center;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-2xl , var(--ng-spacing-3xl));\n    min-height: 44px;\n    height: 44px;\n  }\n\n  .headers {\n    overflow:hidden;\n    display: flex;\n    align-items: center;\n    height: auto;\n    width: 100%;\n    gap: var(--nile-spacing-md , var(--ng-spacing-xs));\n    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2 , var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-600));\n    font-style: normal;\n    /* line-height: var(--nile-type-scale-5); */\n    line-height: normal;\n  }\n\n  nile-icon {\n    cursor: pointer;\n  }\n\n  .sorting__icons {\n    display: flex;\n    flex-direction: column;\n    align-items: centre;\n  }\n\n  .sorting__icons nile-icon:hover {\n    opacity: 0.4;\n  }\n\n  .hover__arrow {\n    opacity: 0;\n  }\n\n  .headers:hover .hover__arrow {\n    opacity: 0.3;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-row/nile-table-row.css.js

@@ -14,16 +14,15 @@ export const styles = css `
     width: 100%;
     height: 100%;
     height: max-content;
-    --nile-header-background: var(--nile-table-header-background-color);
-    border-bottom: 1px solid var(--nile-table-row-border-color);
+    border-bottom: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));
   }
 
   slot::slotted(nile-table-header-item) {
-    background-color: var(--nile-header-background);
+    background-color: var(--nile-table-header-background-color , var(--ng-colors-bg-secondary));
   }
 
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
-    color: red;
+    color: var(--nile-colors-red-500);
   }
 `;
 export default [styles];

package/dist/src/nile-table-row/nile-table-row.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-row.css.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TableRow CSS\n */\nexport const styles = css`\n  :host {\n    display: table-row;\n    width: 100%;\n    height: 100%;\n    height: max-content;\n    --nile-header-background: var(--nile-table-header-background-color);\n    border-bottom: 1px solid var(--nile-table-row-border-color);\n  }\n\n  slot::slotted(nile-table-header-item) {\n    background-color: var(--nile-header-background);\n  }\n\n  nile-table-row > slot::slotted(nile-table-cell-item:first-child) {\n    color: red;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-row.css.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TableRow CSS\n */\nexport const styles = css`\n  :host {\n    display: table-row;\n    width: 100%;\n    height: 100%;\n    height: max-content;\n    border-bottom: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));\n  }\n\n  slot::slotted(nile-table-header-item) {\n    background-color: var(--nile-table-header-background-color , var(--ng-colors-bg-secondary));\n  }\n\n  nile-table-row > slot::slotted(nile-table-cell-item:first-child) {\n    color: var(--nile-colors-red-500);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tag/nile-tag.css.js

@@ -20,23 +20,30 @@ export const styles = css `
     line-height: 1;
     white-space: nowrap;
     user-select: none;
-    border-radius: 4px;
-    gap: 6px;
+    border-radius: var(--nile-radius-sm , var(--ng-radius-sm));
+    gap: var(--nile-spacing-sm , var(--ng-spacing-1-5));
   }
 
   .tag__remove::part(base) {
     color: inherit;
-    padding: 0;
+    padding: var(--nile-spacing-none , var(--ng-spacing-none));
   }
 
   /*
    * Variant modifiers
    */
 
+  .tag--medium {
+    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
+    height: var(--nile-height-26px , var(--ng-height-auto));
+    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
+    padding: var(--nile-spacing-none , var(--ng-spacing-1)) var(--nile-spacing-lg , var(--ng-spacing-2));
+  }
+
   .tag--primary {
     background: var(--nile-colors-primary-600);
-    border-color: var(--nile-colors-primary-600);
-    border: 2px solid  var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-primary));
+    border: 2px solid  var(--nile-colors-primary-600, var(--ng-colors-border-primary));
     color: var(--nile-colors-white-base);
   }
 
@@ -45,90 +52,82 @@ export const styles = css `
   }
 
   .tag--primary:active > nile-icon-button {
-    color: hsl(200.4 98% 39.4%);
+    color: var(--nile-colors-blue-700);
   }
 
   .tag--success {
     background: var(--nile-colors-green-400);
-    border: 2px solid var(--nile-colors-green-400);
+    border: 2px solid var(--nile-colors-green-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--success:hover {
-    border: 2px solid var(--nile-colors-green-500);
+    border: 2px solid var(--nile-colors-green-500, var(--ng-colors-border-primary));
   }
 
   .tag--success:active > nile-icon-button {
-    color: hsl(142.1 76.2% 36.3%);
+    color: var(--nile-colors-green-700);
   }
 
   .tag--normal {
-    background: var(--nile-colors-neutral-400);
-    border: 2px solid var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-900);
+    background: var(--nile-colors-neutral-400 , var(--ng-colors-bg-primary));
+    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
+    color: var(--nile-colors-dark-900 , var(--ng-colors-text-secondary-700));
   }
-
+  
   .tag--normal:hover {
-    border: 2px solid var(--nile-colors-neutral-500);
+    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
   }
 
-
   .tag--normal:active > nile-icon-button {
-    color: hsl(240 5.2% 33.9%);
+    color: var(--nile-colors-neutral-700);
   }
 
   .tag--warning {
     background: var(--nile-colors-yellow-400);
-    border: 2px solid var(--nile-colors-yellow-400);
+    border: 2px solid var(--nile-colors-yellow-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--warning:hover {
-    border: 2px solid var(--nile-colors-yellow-500);
+    border: 2px solid var(--nile-colors-yellow-500, var(--ng-colors-border-primary));
   }
 
   .tag--warning:active > nile-icon-button {
-    color: hsl(32.1 94.6% 43.7%);
+    color: var(--nile-colors-yellow-500);
   }
 
 
   .tag--error {
     background: var(--nile-colors-red-400);
-    border: 2px solid var(--nile-colors-red-400);
+    border: 2px solid var(--nile-colors-red-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--error:hover {
-    border: 2px solid var(--nile-colors-red-500);
+    border: 2px solid var(--nile-colors-red-500, var(--ng-colors-border-primary));
   }
 
   .tag--error:active > nile-icon-button {
-    color: hsl(0 72.2% 50.6%);
+    color: var(--nile-colors-red-500);
   }
 
   .tag--info {
     background: var(--nile-colors-blue-400);
-    border: 2px solid var(--nile-colors-blue-400);
+    border: 2px solid var(--nile-colors-blue-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--info:hover {
-    border: 2px solid var(--nile-colors-blue-500);
+    border: 2px solid var(--nile-colors-blue-500, var(--ng-colors-border-primary));
   }
 
   .tag--info:active > nile-icon-button {
-    color: hsl(0 72.2% 50.6%);
-  }
-
-
-  .tag--medium {
-    font-size: 14px;
-    height: 26px;
-    padding: 0 0.75rem;
+    color: var(--nile-colors-red-500);
   }
 
   .tag__remove {
-    margin-inline-start: 0.5rem;
+    margin-inline-start: var(--nile-spacing-md , var(--ng-spacing-2));
   }
 
   /*
@@ -136,17 +135,21 @@ export const styles = css `
    */
 
   .tag--pill {
-    border-radius: 9999px;
+    border-radius: var(--nile-radius-full , var(--ng-spacing-20));
   }
 
   .tag__prefix {
-  padding: 3px 6px;
+  padding: var(--nile-spacing-xs , var(--ng-spacing-1)) var(--nile-spacing-sm , var(--ng-spacing-1-5));
 }
 
  .tag__content {
-  font-size: 14px;
+  font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
 }
 
+  .cross_icon {
+    margin-left: auto;
+  }
+
 `;
 export default [styles];
 //# sourceMappingURL=nile-tag.css.js.map

package/dist/src/nile-tag/nile-tag.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tag.css.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tag CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .tag {\n    display: flex;\n    align-items: center;\n    border: solid 2px;\n    line-height: 1;\n    white-space: nowrap;\n    user-select: none;\n    border-radius: 4px;\n    gap: 6px;\n  }\n\n  .tag__remove::part(base) {\n    color: inherit;\n    padding: 0;\n  }\n\n  /*\n   * Variant modifiers\n   */\n\n  .tag--primary {\n    background: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600);\n    border: 2px solid  var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .tag--primary:hover {\n    border: 2px solid rgba(0, 94, 166, 0.50);\n  }\n\n  .tag--primary:active > nile-icon-button {\n    color: hsl(200.4 98% 39.4%);\n  }\n\n  .tag--success {\n    background: var(--nile-colors-green-400);\n    border: 2px solid var(--nile-colors-green-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--success:hover {\n    border: 2px solid var(--nile-colors-green-500);\n  }\n\n  .tag--success:active > nile-icon-button {\n    color: hsl(142.1 76.2% 36.3%);\n  }\n\n  .tag--normal {\n    background: var(--nile-colors-neutral-400);\n    border: 2px solid var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--normal:hover {\n    border: 2px solid var(--nile-colors-neutral-500);\n  }\n\n\n  .tag--normal:active > nile-icon-button {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .tag--warning {\n    background: var(--nile-colors-yellow-400);\n    border: 2px solid var(--nile-colors-yellow-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--warning:hover {\n    border: 2px solid var(--nile-colors-yellow-500);\n  }\n\n  .tag--warning:active > nile-icon-button {\n    color: hsl(32.1 94.6% 43.7%);\n  }\n\n\n  .tag--error {\n    background: var(--nile-colors-red-400);\n    border: 2px solid var(--nile-colors-red-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--error:hover {\n    border: 2px solid var(--nile-colors-red-500);\n  }\n\n  .tag--error:active > nile-icon-button {\n    color: hsl(0 72.2% 50.6%);\n  }\n\n  .tag--info {\n    background: var(--nile-colors-blue-400);\n    border: 2px solid var(--nile-colors-blue-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--info:hover {\n    border: 2px solid var(--nile-colors-blue-500);\n  }\n\n  .tag--info:active > nile-icon-button {\n    color: hsl(0 72.2% 50.6%);\n  }\n\n\n  .tag--medium {\n    font-size: 14px;\n    height: 26px;\n    padding: 0 0.75rem;\n  }\n\n  .tag__remove {\n    margin-inline-start: 0.5rem;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .tag--pill {\n    border-radius: 9999px;\n  }\n\n  .tag__prefix {\n  padding: 3px 6px;\n}\n\n .tag__content {\n  font-size: 14px;\n}\n\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tag.css.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8IxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tag CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .tag {\n    display: flex;\n    align-items: center;\n    border: solid 2px;\n    line-height: 1;\n    white-space: nowrap;\n    user-select: none;\n    border-radius: var(--nile-radius-sm , var(--ng-radius-sm));\n    gap: var(--nile-spacing-sm , var(--ng-spacing-1-5));\n  }\n\n  .tag__remove::part(base) {\n    color: inherit;\n    padding: var(--nile-spacing-none , var(--ng-spacing-none));\n  }\n\n  /*\n   * Variant modifiers\n   */\n\n  .tag--medium {\n    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n    height: var(--nile-height-26px , var(--ng-height-auto));\n    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));\n    padding: var(--nile-spacing-none , var(--ng-spacing-1)) var(--nile-spacing-lg , var(--ng-spacing-2));\n  }\n\n  .tag--primary {\n    background: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n    border: 2px solid  var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n    color: var(--nile-colors-white-base);\n  }\n\n  .tag--primary:hover {\n    border: 2px solid rgba(0, 94, 166, 0.50);\n  }\n\n  .tag--primary:active > nile-icon-button {\n    color: var(--nile-colors-blue-700);\n  }\n\n  .tag--success {\n    background: var(--nile-colors-green-400);\n    border: 2px solid var(--nile-colors-green-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--success:hover {\n    border: 2px solid var(--nile-colors-green-500, var(--ng-colors-border-primary));\n  }\n\n  .tag--success:active > nile-icon-button {\n    color: var(--nile-colors-green-700);\n  }\n\n  .tag--normal {\n    background: var(--nile-colors-neutral-400 , var(--ng-colors-bg-primary));\n    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900 , var(--ng-colors-text-secondary-700));\n  }\n  \n  .tag--normal:hover {\n    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));\n  }\n\n  .tag--normal:active > nile-icon-button {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .tag--warning {\n    background: var(--nile-colors-yellow-400);\n    border: 2px solid var(--nile-colors-yellow-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--warning:hover {\n    border: 2px solid var(--nile-colors-yellow-500, var(--ng-colors-border-primary));\n  }\n\n  .tag--warning:active > nile-icon-button {\n    color: var(--nile-colors-yellow-500);\n  }\n\n\n  .tag--error {\n    background: var(--nile-colors-red-400);\n    border: 2px solid var(--nile-colors-red-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--error:hover {\n    border: 2px solid var(--nile-colors-red-500, var(--ng-colors-border-primary));\n  }\n\n  .tag--error:active > nile-icon-button {\n    color: var(--nile-colors-red-500);\n  }\n\n  .tag--info {\n    background: var(--nile-colors-blue-400);\n    border: 2px solid var(--nile-colors-blue-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--info:hover {\n    border: 2px solid var(--nile-colors-blue-500, var(--ng-colors-border-primary));\n  }\n\n  .tag--info:active > nile-icon-button {\n    color: var(--nile-colors-red-500);\n  }\n\n  .tag__remove {\n    margin-inline-start: var(--nile-spacing-md , var(--ng-spacing-2));\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .tag--pill {\n    border-radius: var(--nile-radius-full , var(--ng-spacing-20));\n  }\n\n  .tag__prefix {\n  padding: var(--nile-spacing-xs , var(--ng-spacing-1)) var(--nile-spacing-sm , var(--ng-spacing-1-5));\n}\n\n .tag__content {\n  font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n}\n\n  .cross_icon {\n    margin-left: auto;\n  }\n\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tag/nile-tag.d.ts

@@ -40,7 +40,7 @@ export declare class NileTag extends NileElement {
     /** Makes the tag removable and shows a remove button. */
     removable: boolean;
     private handleRemoveClick;
-    getCloseButtonColor(): "--nile-colors-blue-500" | "--nile-colors-green-500" | "--nile-colors-dark-500" | "--nile-colors-yellow-500" | "--nile-colors-red-500";
+    getCloseButtonColor(): string;
     render(): TemplateResult<1>;
 }
 export default NileTag;

package/dist/src/nile-tag/nile-tag.js

@@ -48,22 +48,30 @@ let NileTag = class NileTag extends NileElement {
         this.emit('nile-remove');
     }
     getCloseButtonColor() {
+        let primaryColor;
         switch (this.variant) {
             case 'primary':
-                return '--nile-colors-blue-500';
+                primaryColor = '--nile-colors-blue-500';
+                break;
             case 'success':
-                return '--nile-colors-green-500';
+                primaryColor = '--nile-colors-green-500';
+                break;
             case 'normal':
-                return '--nile-colors-dark-500';
+                primaryColor = '--nile-colors-dark-500';
+                break;
             case 'warning':
-                return '--nile-colors-yellow-500';
+                primaryColor = '--nile-colors-yellow-500';
+                break;
             case 'error':
-                return '--nile-colors-red-500';
+                primaryColor = '--nile-colors-red-500';
+                break;
             case 'info':
-                return '--nile-colors-blue-500';
+                primaryColor = '--nile-colors-blue-500';
+                break;
             default:
-                return '--nile-colors-dark-500';
+                primaryColor = '--nile-colors-dark-500';
         }
+        return `var(${primaryColor}, var(--ng-colors-fg-quaternary-400))`;
     }
     render() {
         const colorVariable = this.getCloseButtonColor();
@@ -100,10 +108,10 @@ let NileTag = class NileTag extends NileElement {
                 name="close"
                 library="system"
                 label="remove"
-                class="tag__remove"
+                class="tag__remove cross_icon"
                 @click=${this.handleRemoveClick}
                 tabindex="-1"
-                color="var(${colorVariable})"
+                 color=${this.getCloseButtonColor()}
               ></nile-icon-button>
             `
             : ''}