@aquera/nile-elements 0.1.62 → 0.1.63-beta-1.0

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

@@ -1 +1 @@
-{"version":3,"file":"nile-loader.js","sourceRoot":"","sources":["../../../src/nile-loader/nile-loader.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, css, nothing } from 'lit';\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport styles from './nile-loader.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch';\n\n@customElement('nile-loader')\nexport class NileLoader extends LitElement {\n  @property({ type: String, attribute:'height' }) propHeight = '';\n  @property({ type: String, attribute:'width' }) propWidth = '';\n  @property({ type: String }) label = '';\n  @property({ type: String }) size : 'sm' | 'md' | 'lg' | 'xl'= 'lg';\n  @property({ type: String }) margin = '';\n  @property({ type: String }) variant = 'v1';\n  @property({ type: String }) color = 'var(--nile-colors-primary-600)';\n\n  private height: string;\n  private width: string;\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.setSvgDimensions()\n    if(this.variant==\"v1\" && this.color==\"var(--nile-colors-primary-600)\"){\n      this.color=\"var(--nile-colors-blue-500)\"\n    }\n  }\n\n  static override styles: CSSResultGroup = styles;\n\n  /**\n   * Sets circular loader's dimension.\n   * If either height or width is absent the dimensions defaults to dimension based on size variant\n   */\n  setSvgDimensions(){\n    if (!parseInt(this.propHeight) || !parseInt(this.propWidth)){\n      switch (this.size) {\n        case 'sm':\n          this.height='32';\n          this.width='32';\n          break;\n        case 'md':\n          this.height='48';\n          this.width='48';\n          break;\n        case 'lg':\n          this.height='56';\n          this.width='56';\n          break;\n        default:\n          this.height='64';\n          this.width='64';\n          break;\n      }\n    }\n    else{\n      this.height=this.propHeight;\n      this.width=this.propWidth;\n    }\n  }\n\n  override render(){\n    return html`\n    <div class=\"loader__container\" class=${classMap({\n      \"loader__container\":true,\n      \"loader__container--sm\":this.size=='sm',\n      \"loader__container--md\":this.size=='md',\n      \"loader__container--lg\":this.size=='lg',\n      \"loader__container--xl\":this.size=='xl'\n      })}>\n      <div class=${classMap({\"svg__container\":this.variant!=='v1'})}>${this.getVariant()}</div>\n      ${!this.label?nothing:\n        html`<div class=\"loader__label\">${this.label}</div>`\n      }\n    </div>\n    `\n  }\n\n  private getVariant(): TemplateResult {\n    switch (this.variant) {\n      case 'v1':\n        return this.renderV1();\n      case 'v2':\n        return this.renderV2();\n      case 'v3':\n        return this.renderV3();\n      default:\n        return this.renderV1();\n    }  \n  }\n  \n  private renderV1(): TemplateResult {\n    return html`\n      <div\n        style=\"width: ${this.width}px; \n          height: ${this.height}px; \n          background-size: ${this.width}px; \n          color: ${this.color};\n          margin: ${this.margin}\"\n        class=\"nile-loader__v1\"\n      ></div>\n    `;\n  }\n\n  private renderV2(): TemplateResult {\n    return html`\n      <svg\n        class=\"nile-loader__v2\"\n        width=\"${this.width}\"\n        height=\"${this.height}\"\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g id=\"Loading circle\">\n          <path\n            id=\"Background\"\n            d=\"M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16Z\"\n            stroke=\"var(--nile-colors-dark-200)\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            id=\"Line\"\n            d=\"M16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76925 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16\"\n            stroke=\"${this.color}\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </g>\n      </svg>\n    `;\n  }\n\n  private renderV3(): TemplateResult {\n    return html`\n      <svg\n        class=\"nile-loader__v3\"\n        width=\"${this.width}\"\n        height=\"${this.height}\"\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g id=\"Loading circle\">\n          <path\n            id=\"Background\"\n            d=\"M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16L30 16Z\"\n            stroke=\"white\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            id=\"Line\"\n            d=\"M6.10051 6.1005C7.66275 4.53826 9.57255 3.36793 11.6738 2.68521C13.775 2.00248 16.0079 1.82675 18.1901 2.17236C20.3722 2.51798 22.4416 3.37514 24.229 4.67376C26.0164 5.97238 27.4711 7.67559 28.4741 9.64414C29.4771 11.6127 30 13.7907 30 16C30 18.2093 29.4771 20.3873 28.4741 22.3559C27.4711 24.3244 26.0164 26.0276 24.229 27.3262C22.4416 28.6249 20.3722 29.482 18.1901 29.8276\"\n            stroke=\"${this.color}\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </g>\n      </svg>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"nile-loader.js","sourceRoot":"","sources":["../../../src/nile-loader/nile-loader.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, css, nothing } from 'lit';\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport styles from './nile-loader.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch';\n\n@customElement('nile-loader')\nexport class NileLoader extends LitElement {\n  @property({ type: String, attribute:'height' }) propHeight = '';\n  @property({ type: String, attribute:'width' }) propWidth = '';\n  @property({ type: String }) label = '';\n  @property({ type: String }) size : 'sm' | 'md' | 'lg' | 'xl'= 'lg';\n  @property({ type: String }) margin = '';\n  @property({ type: String }) variant = 'v1';\n  @property({ type: String }) color = 'var(--nile-colors-primary-600,var(--ng-colors-fg-brand-primary-600))';\n\n  private height: string;\n  private width: string;\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.setSvgDimensions()\n    if(this.variant==\"v1\" && this.color==\"var(--nile-colors-primary-600,var(--ng-colors-fg-brand-primary-600))\"){\n      this.color=\"var(--nile-colors-blue-500,var(--ng-colors-fg-brand-primary-600))\"\n    }\n  }\n\n  static override styles: CSSResultGroup = styles;\n\n  /**\n   * Sets circular loader's dimension.\n   * If either height or width is absent the dimensions defaults to dimension based on size variant\n   */\n  setSvgDimensions(){\n    if (!parseInt(this.propHeight) || !parseInt(this.propWidth)){\n      switch (this.size) {\n        case 'sm':\n          this.height='32';\n          this.width='32';\n          break;\n        case 'md':\n          this.height='48';\n          this.width='48';\n          break;\n        case 'lg':\n          this.height='56';\n          this.width='56';\n          break;\n        default:\n          this.height='64';\n          this.width='64';\n          break;\n      }\n    }\n    else{\n      this.height=this.propHeight;\n      this.width=this.propWidth;\n    }\n  }\n\n  override render(){\n    return html`\n    <div class=\"loader__container\" class=${classMap({\n      \"loader__container\":true,\n      \"loader__container--sm\":this.size=='sm',\n      \"loader__container--md\":this.size=='md',\n      \"loader__container--lg\":this.size=='lg',\n      \"loader__container--xl\":this.size=='xl'\n      })}>\n      <div class=${classMap({\"svg__container\":this.variant!=='v1'})}>${this.getVariant()}</div>\n      ${!this.label?nothing:\n        html`<div class=\"loader__label\">${this.label}</div>`\n      }\n    </div>\n    `\n  }\n\n  private getVariant(): TemplateResult {\n    switch (this.variant) {\n      case 'v1':\n        return this.renderV1();\n      case 'v2':\n        return this.renderV2();\n      case 'v3':\n        return this.renderV3();\n      default:\n        return this.renderV1();\n    }  \n  }\n  \n  private renderV1(): TemplateResult {\n    return html`\n      <div\n        style=\"width: ${this.width}px; \n          height: ${this.height}px; \n          background-size: ${this.width}px; \n          color: ${this.color};\n          margin: ${this.margin}\"\n        class=\"nile-loader__v1\"\n      ></div>\n    `;\n  }\n\n  private renderV2(): TemplateResult {\n    return html`\n      <svg\n        class=\"nile-loader__v2\"\n        width=\"${this.width}\"\n        height=\"${this.height}\"\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g id=\"Loading circle\">\n          <path\n            id=\"Background\"\n            d=\"M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16Z\"\n            stroke=\"var(--nile-colors-dark-200, var(--ng-colors-bg-tertiary))\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            id=\"Line\"\n            d=\"M16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76925 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16\"\n            stroke=\"${this.color}\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </g>\n      </svg>\n    `;\n  }\n\n  private renderV3(): TemplateResult {\n    return html`\n      <svg\n        class=\"nile-loader__v3\"\n        width=\"${this.width}\"\n        height=\"${this.height}\"\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g id=\"Loading circle\">\n          <path\n            id=\"Background\"\n            d=\"M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16L30 16Z\"\n            stroke=\"white\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            id=\"Line\"\n            d=\"M6.10051 6.1005C7.66275 4.53826 9.57255 3.36793 11.6738 2.68521C13.775 2.00248 16.0079 1.82675 18.1901 2.17236C20.3722 2.51798 22.4416 3.37514 24.229 4.67376C26.0164 5.97238 27.4711 7.67559 28.4741 9.64414C29.4771 11.6127 30 13.7907 30 16C30 18.2093 29.4771 20.3873 28.4741 22.3559C27.4711 24.3244 26.0164 26.0276 24.229 27.3262C22.4416 28.6249 20.3722 29.482 18.1901 29.8276\"\n            stroke=\"${this.color}\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </g>\n      </svg>\n    `;\n  }\n}\n"]}

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

@@ -12,10 +12,13 @@ export const styles = css `
   :host {
     display: block;
     position: relative;
-    background: hsl(0, 0%, 100%);
-    border: solid 1px hsl(240 5.9% 90%);
-    border-radius: 6px;
+    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));
+    border: solid 1px var(--nile-custom-color-288,var(--ng-colors-border-secondary-alt));
+    border-radius: var(--nile-radius-radius-lg,var(--ng-radius-md));
     overflow: hidden;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
     height: 100%;
     box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
       0px 8px 8px -4px rgba(16, 24, 40, 0.03);
@@ -26,11 +29,11 @@ export const styles = css `
 
   .search__wrapper {
     box-sizing: border-box;
-    padding: 12px 6px;
+    padding: var(--nile-spacing-lg,var(--ng-spacing-lg)) var(--nile-spacing-sm,var(--ng-spacing-sm));
     position: sticky;
     z-index: 999;
     top: 0px;
-    background: hsl(0, 0%, 100%);
+    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));
     height: 64px;
   }
 
@@ -40,29 +43,30 @@ export const styles = css `
   }
 
   ::slotted(nile-divider) {
-    --spacing: 0.5rem;
+    --spacing: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
   }
 
   .menu__footer {
-    display: flex;
-    border-radius: var(--nile-radius-radius-sm);
+    display: var(--nile-display-flex, var(--ng-display-none)); 
+    /* No need to tokenize below - token not required*/
+    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
     align-items: stretch;
-    font-size: 1rem;
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-font-size-rem-large, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     line-height: 180%;
     letter-spacing: normal;
-    color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-primary-600,var(--ng-colors-text-brand-secondary-700));
     min-height: 40px;
     transition: 150ms fill;
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
-    padding: 0 var(--nile-spacing-spacing-xl);
-    margin: auto 0;
+    padding: var(--nile-spacing-none) var(--nile-spacing-spacing-xl);
+    margin: auto var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   .menu__footer:hover {
-    background-color:var(--nile-menu-item-background-color);
+    background-color:var(--nile-menu-item-background-color, var(--ng-colors-bg-secondary));
   }
 `;
 export default [styles];

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

@@ -1 +1 @@
-{"version":3,"file":"nile-menu.css.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDxB,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 * Menu CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    position: relative;\n    background: hsl(0, 0%, 100%);\n    border: solid 1px hsl(240 5.9% 90%);\n    border-radius: 6px;\n    overflow: hidden;\n    height: 100%;\n    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n      0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n    /* overscroll-behavior: none; */\n    /* -ms-overflow-style: none; */\n    /* scrollbar-width: none; */\n  }\n\n  .search__wrapper {\n    box-sizing: border-box;\n    padding: 12px 6px;\n    position: sticky;\n    z-index: 999;\n    top: 0px;\n    background: hsl(0, 0%, 100%);\n    height: 64px;\n  }\n\n  .menu__items-wrapper {\n    overflow: auto;\n    max-height: var(--auto-size-available-height);\n  }\n\n  ::slotted(nile-divider) {\n    --spacing: 0.5rem;\n  }\n\n  .menu__footer {\n    display: flex;\n    border-radius: var(--nile-radius-radius-sm);\n    align-items: stretch;\n    font-size: 1rem;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: 180%;\n    letter-spacing: normal;\n    color: var(--nile-colors-primary-600);\n    min-height: 40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: 0 var(--nile-spacing-spacing-xl);\n    margin: auto 0;\n  }\n\n  .menu__footer:hover {\n    background-color:var(--nile-menu-item-background-color);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-menu.css.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DxB,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 * Menu CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    position: relative;\n    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-custom-color-288,var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-radius-lg,var(--ng-radius-md));\n    overflow: hidden;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    height: 100%;\n    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n      0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n    /* overscroll-behavior: none; */\n    /* -ms-overflow-style: none; */\n    /* scrollbar-width: none; */\n  }\n\n  .search__wrapper {\n    box-sizing: border-box;\n    padding: var(--nile-spacing-lg,var(--ng-spacing-lg)) var(--nile-spacing-sm,var(--ng-spacing-sm));\n    position: sticky;\n    z-index: 999;\n    top: 0px;\n    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n    height: 64px;\n  }\n\n  .menu__items-wrapper {\n    overflow: auto;\n    max-height: var(--auto-size-available-height);\n  }\n\n  ::slotted(nile-divider) {\n    --spacing: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .menu__footer {\n    display: var(--nile-display-flex, var(--ng-display-none)); \n    /* No need to tokenize below - token not required*/\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));\n    align-items: stretch;\n    font-size: var(--nile-font-size-rem-large, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: 180%;\n    letter-spacing: normal;\n    color: var(--nile-colors-primary-600,var(--ng-colors-text-brand-secondary-700));\n    min-height: 40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: var(--nile-spacing-none) var(--nile-spacing-spacing-xl);\n    margin: auto var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .menu__footer:hover {\n    background-color:var(--nile-menu-item-background-color, var(--ng-colors-bg-secondary));\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-menu-item/nile-menu-item.css.js

@@ -11,6 +11,9 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     box-sizing: border-box;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host *,
@@ -34,19 +37,19 @@ export const styles = css `
   .menu-item {
     position: relative;
     display: flex;
-    border-radius: 4px;
+    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));
     align-items: stretch;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.8;
+    font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));
+    line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));
     letter-spacing: normal;
-    color: hsl(240 5.3% 26.1%);
+    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));
     min-height:40px;
     transition: 150ms fill;
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
-    padding:0 var(--nile-spacing-spacing-xl);
+    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 
   .menu-item.menu-item--disabled {
@@ -56,7 +59,7 @@ export const styles = css `
   }
 
   .menu-item .menu-item__label {
-    margin: auto 0;
+    margin: auto var(--nile-spacing-none,var(--ng-spacing-none));
     display: inline-flex;
   }
 
@@ -67,7 +70,7 @@ export const styles = css `
   }
 
   .menu-item .menu-item__prefix::slotted(*) {
-    margin-inline-end: 0.5rem;
+    margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));
   }
 
   .menu-item .menu-item__suffix {
@@ -77,7 +80,7 @@ export const styles = css `
   }
 
   .menu-item .menu-item__suffix::slotted(*) {
-    margin-inline-start: 0.5rem;
+    margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));
   }
 
   :host(:focus-visible) {
@@ -85,14 +88,14 @@ export const styles = css `
   }
 
   :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
-    background-color: var(--nile-colors-neutral-100);
-    color: hsl(0, 0%, 0%);
+    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
+    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
   }
 
   :host(:focus-visible) .menu-item {
     outline: none;
-    background-color: hsl(200.4 98% 39.4%);
-    color: hsl(0, 0%, 100%);
+    background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));
+    color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));
     opacity: 1;
   }
 

package/dist/src/nile-menu-item/nile-menu-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GxB,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 * MenuItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    border-radius: 4px;\n    align-items: stretch;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.8;\n    letter-spacing: normal;\n    color: hsl(240 5.3% 26.1%);\n    min-height:40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding:0 var(--nile-spacing-spacing-xl);\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item .menu-item__label {\n    margin: auto 0;\n    display: inline-flex;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: 0.5rem;\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: var(--nile-colors-neutral-100);\n    color: hsl(0, 0%, 0%);\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: hsl(200.4 98% 39.4%);\n    color: hsl(0, 0%, 100%);\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHxB,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 * MenuItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));\n    align-items: stretch;\n    font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n    min-height:40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item .menu-item__label {\n    margin: auto var(--nile-spacing-none,var(--ng-spacing-none));\n    display: inline-flex;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));\n    color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -12,6 +12,9 @@ export const styles = css `
   :host {
     display: block;
     user-select: none;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host(:focus) {
@@ -22,30 +25,34 @@ export const styles = css `
     position: relative;
     display: flex;
     align-items: center;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.8;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
+    line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));
     letter-spacing: normal;
-    color: hsl(240 5.3% 26.1%);
-    padding: 6px 0;
+    color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));
+    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));
     transition: 150ms fill;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     cursor: pointer;
+    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )
   }
 
   .option--single-select {
-    padding: 9px 12px;
+    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: rgba(0, 94, 166, 0.1);
-    color: hsl(0, 0%, 0%);
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    border-radius: var(--nile-radius-none, var(--ng-radius-sm));
   }
 
   .option--current,
   .option--current.option--disabled {
-    background-color: rgba(0, 94, 166, 0.1);
-    color: var(--nile-colors-primary-600);
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
     opacity: 1;
+    border-radius: var(--nile-radius-none, var(--ng-radius-sm));
   }
 
   .option--disabled {
@@ -67,7 +74,7 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     visibility: hidden;
-    padding-inline-end: 0.25rem;
+    padding-inline-end: var(--nile-spacing-xs);
   }
 
   .option--selected .option__check {
@@ -82,20 +89,26 @@ export const styles = css `
   }
 
   .option__prefix::slotted(*) {
-    margin-inline-end: 0.5rem;
+    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
   }
 
   .option__suffix::slotted(*) {
-    margin-inline-start: 0.5rem;
+    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
+  }
+
+  :host(:not([aria-selected='true'])) .option .option__suffix{
+    display: var(--nile-display-block, var(--ng-display-none));
   }
 
   .option--checkbox{
     pointer-events: none;
-    margin-left: 12px;
-    margin-right: 12px;
+    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
     width:auto;
+    display:var(--nile-display-inline-block, var(--ng-display-none));
   }
 
+
   @media (forced-colors: active) {
     :host(:hover:not([aria-disabled='true'])) .option {
       outline: dashed 1px SelectedItem;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FxB,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 * Option_2 CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    user-select: none;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.8;\n    letter-spacing: normal;\n    color: hsl(240 5.3% 26.1%);\n    padding: 6px 0;\n    transition: 150ms fill;\n    cursor: pointer;\n  }\n\n  .option--single-select {\n    padding: 9px 12px;\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: rgba(0, 94, 166, 0.1);\n    color: hsl(0, 0%, 0%);\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: rgba(0, 94, 166, 0.1);\n    color: var(--nile-colors-primary-600);\n    opacity: 1;\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: 1.4;\n    word-break: break-all;\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: 0.25rem;\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: 0.5rem;\n  }\n\n  .option--checkbox{\n    pointer-events: none;\n    margin-left: 12px;\n    margin-right: 12px;\n    width:auto;\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,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 * Option_2 CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    user-select: none;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n    transition: 150ms fill;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    cursor: pointer;\n    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n  }\n\n  .option--single-select {\n    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n    opacity: 1;\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: 1.4;\n    word-break: break-all;\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: var(--nile-spacing-xs);\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  :host(:not([aria-selected='true'])) .option .option__suffix{\n    display: var(--nile-display-block, var(--ng-display-none));\n  }\n\n  .option--checkbox{\n    pointer-events: none;\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    width:auto;\n    display:var(--nile-display-inline-block, var(--ng-display-none));\n  }\n\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-page-header/nile-page-header.css.js

@@ -12,6 +12,9 @@ export const styles = css `
   :host {
     display: block;
     width: 100%;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .header {
@@ -38,7 +41,7 @@ export const styles = css `
     font-style: normal;
     font-weight: var(--nile-page-header-subheading-font-weight);
     line-height: var(--nile-page-header-subheading-line-height);
-    margin-top: 3px;
+    margin-top: var(--nile-spacing-xs);
   }
 
   [hidden] {

package/dist/src/nile-page-header/nile-page-header.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-page-header.css.js","sourceRoot":"","sources":["../../../src/nile-page-header/nile-page-header.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxB,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 * PageHeader CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    text-align: start;\n    font-family: var(--nile-font-family-sans-serif);\n    font-style: normal;\n  }\n\n  .header__heading {\n    display: block;\n    color: var(--nile-page-header-heading-font-color);\n    font-size: var(--nile-page-header-heading-font-size);\n    font-style: normal;\n    font-weight: var(--nile-page-header-heading-font-weight);\n    line-height: var(--nile-page-header-heading-line-height);\n  }\n\n  .header__subheading {\n    display: block;\n    color: var(--nile-page-header-subheading-font-color);\n    font-size: var(--nile-page-header-subheading-font-size);\n    font-style: normal;\n    font-weight: var(--nile-page-header-subheading-font-weight);\n    line-height: var(--nile-page-header-subheading-line-height);\n    margin-top: 3px;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-page-header.css.js","sourceRoot":"","sources":["../../../src/nile-page-header/nile-page-header.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxB,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 * PageHeader CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    text-align: start;\n    font-family: var(--nile-font-family-sans-serif);\n    font-style: normal;\n  }\n\n  .header__heading {\n    display: block;\n    color: var(--nile-page-header-heading-font-color);\n    font-size: var(--nile-page-header-heading-font-size);\n    font-style: normal;\n    font-weight: var(--nile-page-header-heading-font-weight);\n    line-height: var(--nile-page-header-heading-line-height);\n  }\n\n  .header__subheading {\n    display: block;\n    color: var(--nile-page-header-subheading-font-color);\n    font-size: var(--nile-page-header-subheading-font-size);\n    font-style: normal;\n    font-weight: var(--nile-page-header-subheading-font-weight);\n    line-height: var(--nile-page-header-subheading-line-height);\n    margin-top: var(--nile-spacing-xs);\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -16,23 +16,23 @@ export const styles = css `
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg) ;
+    padding: var(--nile-spacing-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) ;
   }
 
  
   .pagination-wrapper.v2 .pager-container {
     flex-direction: row;
     align-items: center;
-    gap: var(--nile-spacing-spacing-md);
-    margin-right: var(--nile-spacing-spacing-xl);
+    gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    margin-right: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)); 
   }
 
   .pagination-wrapper.v2 .range-text {
-    margin-right: var(--nile-spacing-spacing-md);
-    font-size: var(--nile-font-size-small);
-    color: var(--nile-colors-dark-900);
+    margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-900, var( --ng-colors-text-primary-900));
     font-feature-settings: 'liga' off, 'clig' off;
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
  
@@ -44,20 +44,20 @@ export const styles = css `
 
 
 .pagination-wrapper.compact .range-text {
-  margin-right: var(--nile-spacing-spacing-md);
+  margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
   white-space: nowrap;
 }
 
 
 .pagination-wrapper.compact .pager-container {
-  gap: var(--nile-spacing-spacing-md);
+  gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
 }
 
 
   .pagination-wrapper.compact .pager-container {
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-spacing-md);
+    gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
   }
 
   .pagination-wrapper.compact .page-size-dropdown ::part(base) {
@@ -80,14 +80,14 @@ export const styles = css `
   .compact-pagination {
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-spacing-xs);
+    gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));
     list-style: none;
     margin: 0;
     padding: 0;
   }
   .page-dropdown .current-page-btn {
     padding: 2px;
-    font-size: var(--nile-font-size-small);
+    font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));
   }
 
   nile-button.current-page-btn::part(base){
@@ -101,16 +101,16 @@ export const styles = css `
   .pager-container {
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-spacing-3xl);
+    gap: var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
   }
 
 .pagination-wrapper.compact .pager-container {
-  gap: var(--nile-spacing-xxs) !important;
+  gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) !important;
 }
 
   .range-text {
-    font-size: var(--nile-font-size-small);
-    color: var(--nile-colors-dark-900);
+    font-size: var(--nile-font-size-small,  var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-900,var( --ng-colors-text-primary-900) );
     white-space: nowrap;
   }
 
@@ -122,13 +122,13 @@ export const styles = css `
   ul.pagination {
     display: flex;
     list-style: none;
-    padding: var(--nile-spacing-spacing-none);
-    margin: var(--nile-spacing-spacing-none);
-    gap: var(--nile-radius-radius-xxs);
+    padding: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
+    gap: var(--nile-radius-radius-xxs, var(--ng-radius-xxs));
   }
 
   ul.pagination li {
-    margin: var(--nile-spacing-spacing-none);
+    margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
   }
 
   .ellipsis-scroll-wrapper {
@@ -150,13 +150,13 @@ export const styles = css `
   }
   .compact-dropdown nile-menu {
     overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
   
     .page-size-dropdown nile-menu {
     overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
@@ -168,20 +168,20 @@ export const styles = css `
 
   .compact-dropdown1 nile-menu {
     overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
   
     .compact-dropdown1 nile-menu {
     overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
 
   .ellipsis-dropdown nile-menu {
     overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
@@ -191,19 +191,19 @@ export const styles = css `
   }
 
 .pagination-wrapper.fluid ul.pagination li:first-child {
-  margin-right: var(--nile-spacing-spacing-xs);
+  margin-right: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));
 }
 .pagination-wrapper.fluid ul.pagination li:last-child {
-  margin-left: var(--nile-spacing-spacing-md);
+  margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
 }
 
 
   .page-size-label {
-    font-size: var(--nile-type-scale-3);
-    color: var(--nile-colors-dark-500);
-    margin-left: var(--nile-spacing-spacing-md);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-primary-500));
+    margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
     font-feature-settings: 'liga' off, 'clig' off;
-    font-weight: var(--nile-font-weight-regular); 
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular)); 
   }
 
   nile-button::part(base) {
@@ -212,7 +212,24 @@ export const styles = css `
     padding: 0px 6px;
     box-shadow: none;
   }
+  
+   nile-button.down::part(base) {
+    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+  }
+
+  nile-button.down::part(base):active {
+    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+  }
+
 
+  nile-button.current-page-btn::part(base) {
+    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary)); 
+  }
+
+  nile-button.current-page-btn::part(base):active {
+    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+  }
+  
   nile-button::part(base):active {
     min-width: 32px;
     height: 32px;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-pagination.css.js","sourceRoot":"","sources":["../../../src/nile-pagination/nile-pagination.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6OxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\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 * Pagination CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .pagination-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg) ;\n  }\n\n \n  .pagination-wrapper.v2 .pager-container {\n    flex-direction: row;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-md);\n    margin-right: var(--nile-spacing-spacing-xl);\n  }\n\n  .pagination-wrapper.v2 .range-text {\n    margin-right: var(--nile-spacing-spacing-md);\n    font-size: var(--nile-font-size-small);\n    color: var(--nile-colors-dark-900);\n    font-feature-settings: 'liga' off, 'clig' off;\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n \n  .pagination-wrapper.compact {\n    min-width: 324px;\n    justify-content: space-between;\n  }\n\n\n\n.pagination-wrapper.compact .range-text {\n  margin-right: var(--nile-spacing-spacing-md);\n  white-space: nowrap;\n}\n\n\n.pagination-wrapper.compact .pager-container {\n  gap: var(--nile-spacing-spacing-md);\n}\n\n\n  .pagination-wrapper.compact .pager-container {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-md);\n  }\n\n  .pagination-wrapper.compact .page-size-dropdown ::part(base) {\n    min-width: 32px;\n    height: 32px;\n    padding: 0 6px;\n  }\n\n  .pagination-wrapper.compact .page-size-dropdown .chevron {\n    transition: transform 0.2s;\n  }\n  .pagination-wrapper.compact .page-size-dropdown .open .chevron {\n    transform: rotate(180deg);\n  }\n\n  .pagination-wrapper.compact ul.pagination:not(.compact-pagination) {\n    display: none;\n  }\n\n  .compact-pagination {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-xs);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .page-dropdown .current-page-btn {\n    padding: 2px;\n    font-size: var(--nile-font-size-small);\n  }\n\n  nile-button.current-page-btn::part(base){\n    min-width: 51px;\n  }\n\n  nile-button.current-page-btn::part(base):active {\n  min-width: 51px;\n}\n\n  .pager-container {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-3xl);\n  }\n\n.pagination-wrapper.compact .pager-container {\n  gap: var(--nile-spacing-xxs) !important;\n}\n\n  .range-text {\n    font-size: var(--nile-font-size-small);\n    color: var(--nile-colors-dark-900);\n    white-space: nowrap;\n  }\n\n  .page-size-select {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  ul.pagination {\n    display: flex;\n    list-style: none;\n    padding: var(--nile-spacing-spacing-none);\n    margin: var(--nile-spacing-spacing-none);\n    gap: var(--nile-radius-radius-xxs);\n  }\n\n  ul.pagination li {\n    margin: var(--nile-spacing-spacing-none);\n  }\n\n  .ellipsis-scroll-wrapper {\n    max-height: 194px;\n    overflow-y: auto;\n    width: 66px;\n  }\n    .down-scroll-wrapper {\n    max-height: 150px;\n    overflow-y: auto;\n    width: 60px;\n  }\n\n\n    .compact-scroll-wrapper {\n    max-height: 160px;\n    overflow-y: auto;\n    width: 60px;\n  }\n  .compact-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n  \n    .page-size-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n      .compact-scroll-wrapper1 {\n    max-height: 164px;\n    overflow-y: auto;\n    width: 60px;\n  }\n\n  .compact-dropdown1 nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n  \n    .compact-dropdown1 nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n\n  .ellipsis-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .page-size-menu {\n    max-height: 144px;\n    overflow-y: auto;\n  }\n\n.pagination-wrapper.fluid ul.pagination li:first-child {\n  margin-right: var(--nile-spacing-spacing-xs);\n}\n.pagination-wrapper.fluid ul.pagination li:last-child {\n  margin-left: var(--nile-spacing-spacing-md);\n}\n\n\n  .page-size-label {\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-500);\n    margin-left: var(--nile-spacing-spacing-md);\n    font-feature-settings: 'liga' off, 'clig' off;\n    font-weight: var(--nile-font-weight-regular); \n  }\n\n  nile-button::part(base) {\n    min-width: 32px;\n    height: 32px;\n    padding: 0px 6px;\n    box-shadow: none;\n  }\n\n  nile-button::part(base):active {\n    min-width: 32px;\n    height: 32px;\n    padding: 0px 6px;\n    box-shadow: none;\n    border: none;\n  }\n\n  nile-button.down::part(base) {\n    min-width: 62px;\n  }\n\n  nile-button.compactbtn:part(base){\n    background-color: red;\n  }\n  .page-size-dropdown .chevron {\n    transition: transform 0.2s;\n  }\n  .page-size-dropdown .open .chevron {\n    transform: rotate(180deg);\n  }\n \n  .pagination-wrapper.compact .compact-dropdown .chevron,\n  .pagination-wrapper.compact .compact-dropdown1 .chevron {\n    transition: transform 0.2s;\n  }\n  .pagination-wrapper.compact .compact-dropdown .down.open .chevron,\n  .pagination-wrapper.compact .compact-dropdown1 .current-page-btn.open .chevron {\n    transform: rotate(180deg);\n  }\n\n\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-pagination.css.js","sourceRoot":"","sources":["../../../src/nile-pagination/nile-pagination.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 2025\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 * Pagination CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .pagination-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--nile-spacing-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) ;\n  }\n\n \n  .pagination-wrapper.v2 .pager-container {\n    flex-direction: row;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    margin-right: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)); \n  }\n\n  .pagination-wrapper.v2 .range-text {\n    margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-900, var( --ng-colors-text-primary-900));\n    font-feature-settings: 'liga' off, 'clig' off;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n  }\n\n \n  .pagination-wrapper.compact {\n    min-width: 324px;\n    justify-content: space-between;\n  }\n\n\n\n.pagination-wrapper.compact .range-text {\n  margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  white-space: nowrap;\n}\n\n\n.pagination-wrapper.compact .pager-container {\n  gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n}\n\n\n  .pagination-wrapper.compact .pager-container {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  }\n\n  .pagination-wrapper.compact .page-size-dropdown ::part(base) {\n    min-width: 32px;\n    height: 32px;\n    padding: 0 6px;\n  }\n\n  .pagination-wrapper.compact .page-size-dropdown .chevron {\n    transition: transform 0.2s;\n  }\n  .pagination-wrapper.compact .page-size-dropdown .open .chevron {\n    transform: rotate(180deg);\n  }\n\n  .pagination-wrapper.compact ul.pagination:not(.compact-pagination) {\n    display: none;\n  }\n\n  .compact-pagination {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .page-dropdown .current-page-btn {\n    padding: 2px;\n    font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));\n  }\n\n  nile-button.current-page-btn::part(base){\n    min-width: 51px;\n  }\n\n  nile-button.current-page-btn::part(base):active {\n  min-width: 51px;\n}\n\n  .pager-container {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n  }\n\n.pagination-wrapper.compact .pager-container {\n  gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) !important;\n}\n\n  .range-text {\n    font-size: var(--nile-font-size-small,  var(--ng-font-weight-regular));\n    color: var(--nile-colors-dark-900,var( --ng-colors-text-primary-900) );\n    white-space: nowrap;\n  }\n\n  .page-size-select {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  ul.pagination {\n    display: flex;\n    list-style: none;\n    padding: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n    gap: var(--nile-radius-radius-xxs, var(--ng-radius-xxs));\n  }\n\n  ul.pagination li {\n    margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n  }\n\n  .ellipsis-scroll-wrapper {\n    max-height: 194px;\n    overflow-y: auto;\n    width: 66px;\n  }\n    .down-scroll-wrapper {\n    max-height: 150px;\n    overflow-y: auto;\n    width: 60px;\n  }\n\n\n    .compact-scroll-wrapper {\n    max-height: 160px;\n    overflow-y: auto;\n    width: 60px;\n  }\n  .compact-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n  \n    .page-size-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n      .compact-scroll-wrapper1 {\n    max-height: 164px;\n    overflow-y: auto;\n    width: 60px;\n  }\n\n  .compact-dropdown1 nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n  \n    .compact-dropdown1 nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n\n  .ellipsis-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .page-size-menu {\n    max-height: 144px;\n    overflow-y: auto;\n  }\n\n.pagination-wrapper.fluid ul.pagination li:first-child {\n  margin-right: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n}\n.pagination-wrapper.fluid ul.pagination li:last-child {\n  margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n}\n\n\n  .page-size-label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-primary-500));\n    margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    font-feature-settings: 'liga' off, 'clig' off;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular)); \n  }\n\n  nile-button::part(base) {\n    min-width: 32px;\n    height: 32px;\n    padding: 0px 6px;\n    box-shadow: none;\n  }\n  \n   nile-button.down::part(base) {\n    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n  }\n\n  nile-button.down::part(base):active {\n    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n  }\n\n\n  nile-button.current-page-btn::part(base) {\n    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary)); \n  }\n\n  nile-button.current-page-btn::part(base):active {\n    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n  }\n  \n  nile-button::part(base):active {\n    min-width: 32px;\n    height: 32px;\n    padding: 0px 6px;\n    box-shadow: none;\n    border: none;\n  }\n\n  nile-button.down::part(base) {\n    min-width: 62px;\n  }\n\n  nile-button.compactbtn:part(base){\n    background-color: red;\n  }\n  .page-size-dropdown .chevron {\n    transition: transform 0.2s;\n  }\n  .page-size-dropdown .open .chevron {\n    transform: rotate(180deg);\n  }\n \n  .pagination-wrapper.compact .compact-dropdown .chevron,\n  .pagination-wrapper.compact .compact-dropdown1 .chevron {\n    transition: transform 0.2s;\n  }\n  .pagination-wrapper.compact .compact-dropdown .down.open .chevron,\n  .pagination-wrapper.compact .compact-dropdown1 .current-page-btn.open .chevron {\n    transform: rotate(180deg);\n  }\n\n\n`;\n\nexport default [styles];\n"]}

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

@@ -89,7 +89,6 @@ let NilePagination = class NilePagination extends NileElement {
             <nile-icon
               name="chevrondown"
               size="14"
-              color="var(--nile-colors-dark-500)"
               class="chevron"
             ></nile-icon>
           </nile-button>
@@ -128,7 +127,6 @@ let NilePagination = class NilePagination extends NileElement {
           <nile-icon
             name="chevrondown"
             size="14"
-            color="var(--nile-colors-dark-500)"
             class="chevron"
           ></nile-icon>
         </nile-button>