@aquera/nile-elements 2.0.13 → 2.0.15

package/package.json

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

package/src/nile-auto-complete/nile-auto-complete.css.ts

@@ -62,6 +62,9 @@ export const styles = css`
    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   }
 
+  nile-menu {
+    border-color: var(--nile-custom-color-288, var(--ng-colors-border-primary));
+  }
 
 `;
 

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

@@ -63,11 +63,11 @@ export const styles = css`
   }
 
   .badge--orange {
-    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));
+    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-error-600));
     border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
     border-style: solid;
-    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));
-    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));
+    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-300));
+    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-50));
   }
 
   .badge--purple {
@@ -120,7 +120,7 @@ export const styles = css`
     color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));
     border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
     border-style: solid;
-    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));
+    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-300));
     background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));
   }
 
@@ -153,7 +153,7 @@ export const styles = css`
   }
 
   .badge--orange.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-300));
   }
 
   .badge--purple.badge--pill-outline {
@@ -181,7 +181,7 @@ export const styles = css`
   }
 
   .badge--warning.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-300));
   }
 
   .badge--error.badge--pill-outline {
@@ -202,6 +202,27 @@ export const styles = css`
     padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));
     border-radius: var(--nile-radius-full, var(--ng-radius-full));
   }
+
+  /* Sizes — md is the base .badge rule above, so the default is unchanged. */
+  .badge.badge--sm {
+    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md));
+    height: var(--nile-height-22px, var(--ng-height-22px));
+  }
+
+  .badge--sm .badge__content {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-xs));
+  }
+
+  .badge.badge--lg {
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    height: var(--nile-height-28px, var(--ng-height-28px));
+  }
+
+  .badge--lg .badge__content {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+  }
 `;
 export default [styles];
 

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

@@ -1,6 +1,7 @@
 import { expect, fixture, html, elementUpdated } from '@open-wc/testing';
 import './nile-badge';
 import NileBadge from './nile-badge';
+import { styles } from './nile-badge.css';
 
 describe('NileBadge', () => {
   // === RENDERING ===
@@ -657,4 +658,90 @@ describe('NileBadge', () => {
     const el = await fixture<NileBadge>(html`<nile-badge>\u2713 Done</nile-badge>`);
     expect(el.textContent).to.contain('\u2713');
   });
+
+  // === SIZE TESTS ===
+  it('101. should have size default to md', async () => {
+    const el = await fixture<NileBadge>(html`<nile-badge></nile-badge>`);
+    expect(el.size).to.equal('md');
+    const span = el.shadowRoot!.querySelector('span');
+    expect(span!.classList.contains('badge--md')).to.be.true;
+  });
+
+  it('102. should reflect size attribute', async () => {
+    const el = await fixture<NileBadge>(html`<nile-badge size="lg"></nile-badge>`);
+    expect(el.getAttribute('size')).to.equal('lg');
+  });
+
+  for (const size of ['sm', 'md', 'lg'] as const) {
+    it(`103. should apply only the ${size} size class`, async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge size=${size}>Label</nile-badge>`);
+      const span = el.shadowRoot!.querySelector('span')!;
+      for (const other of ['sm', 'md', 'lg']) {
+        expect(span.classList.contains(`badge--${other}`)).to.equal(other === size);
+      }
+    });
+  }
+
+  it('104. should update size class when size changes', async () => {
+    const el = await fixture<NileBadge>(html`<nile-badge>Label</nile-badge>`);
+    el.size = 'sm';
+    await elementUpdated(el);
+    const span = el.shadowRoot!.querySelector('span')!;
+    expect(span.classList.contains('badge--sm')).to.be.true;
+    expect(span.classList.contains('badge--md')).to.be.false;
+  });
+
+  describe('size dimensions (nxtgen tokens)', () => {
+    let tokens: HTMLStyleElement;
+
+    before(() => {
+      tokens = document.createElement('style');
+      tokens.textContent = `:root {
+        --ng-height-22px: 22px; --ng-height-24px: 24px; --ng-height-28px: 28px;
+        --ng-spacing-xxs: 2px; --ng-spacing-xs: 4px; --ng-spacing-md: 8px;
+        --ng-spacing-md-alt: 10px; --ng-spacing-lg: 12px;
+      }`;
+      document.head.appendChild(tokens);
+    });
+
+    after(() => tokens.remove());
+
+    it('105. should render 22px, 24px and 28px tall for sm, md and lg', async () => {
+      const heights: number[] = [];
+      for (const size of ['sm', 'md', 'lg']) {
+        const el = await fixture<NileBadge>(html`<nile-badge size=${size}>Label</nile-badge>`);
+        heights.push(el.shadowRoot!.querySelector('span')!.getBoundingClientRect().height);
+      }
+      expect(heights).to.deep.equal([22, 24, 28]);
+    });
+
+    it('106. should keep size padding when rounded', async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge size="lg" rounded>Label</nile-badge>`);
+      const style = getComputedStyle(el.shadowRoot!.querySelector('span')!);
+      expect(style.paddingTop).to.equal('4px');
+      expect(style.paddingLeft).to.equal('12px');
+    });
+  });
+
+  describe('error / orange / warning colour tokens', () => {
+    const css = styles.cssText;
+    const rule = (selector: string) => css.slice(css.indexOf(`${selector} {`)).split('}')[0];
+    const ng = (token: string) => `var(--ng-componentcolors-utility-${token})`;
+
+    const cases: [string, string, string, string][] = [
+      ['error', 'error-50', 'error-200', 'error-700'],
+      ['orange', 'orange-50', 'orange-300', 'error-600'],
+      ['warning', 'warning-50', 'warning-300', 'warning-700'],
+    ];
+
+    cases.forEach(([variant, fill, border, text], i) => {
+      it(`${107 + i}. should map ${variant} to ${fill} / ${border} / ${text}`, () => {
+        const base = rule(`.badge--${variant}`);
+        expect(base).to.contain(`background-${variant}, ${ng(fill)})`);
+        expect(base).to.contain(`border-color-${variant}, ${ng(border)})`);
+        expect(base).to.contain(`font-${variant}, ${ng(text)})`);
+        expect(rule(`.badge--${variant}.badge--pill-outline`)).to.contain(`pill-outline-${variant}, ${ng(border)})`);
+      });
+    });
+  });
 });

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

@@ -84,6 +84,9 @@ export class NileBadge extends NileElement {
     | 'pill-outline'
     | 'badge-color'='badge-color';
 
+  /** The badge's size. `md` keeps the existing default dimensions. */
+  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
+
   render() {
     return html`
       <span
@@ -111,6 +114,9 @@ export class NileBadge extends NileElement {
             this.rounded ||
             this.pilltype == 'pill-outline' ||
             this.pilltype == 'pill-color',
+          'badge--sm': this.size === 'sm',
+          'badge--md': this.size === 'md',
+          'badge--lg': this.size === 'lg',
         })}
       >
         <slot part="content" class="badge__content"></slot>

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

@@ -177,9 +177,11 @@ export const styles = css`
 
   nile-auto-complete::part(base) {
     height: auto;
+    background-color: transparent;
   }
 
   .nile-chip:hover:not(.nile-chip--disabled) {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary-hover));
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
     box-shadow: var(--nile-box-shadow-10);
   }

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

@@ -107,7 +107,7 @@ export const styles = css`
   .combobox--focused .combobox__trigger {
     border-color: var(--ng-colors-border-brand);
     box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
   }
 
   .combobox--disabled .combobox__trigger {
@@ -161,7 +161,7 @@ export const styles = css`
 
   .combobox--filled .combobox__trigger {
     border: none;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
   }
 
   .combobox--filled.combobox--open .combobox__trigger,
@@ -356,7 +356,7 @@ export const styles = css`
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     padding: 0;
     max-width: var(--auto-size-available-width);
@@ -416,7 +416,7 @@ export const styles = css`
   }
 
   .combobox__options nile-option[selected] {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));
   }
 
   .combobox__options nile-option[selected]::part(base) {
@@ -441,7 +441,7 @@ export const styles = css`
     justify-content: space-between;
     gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
     user-select: none;
   }
@@ -491,7 +491,7 @@ export const styles = css`
   .combobox__footer {
     flex-shrink: 0;
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -630,7 +630,7 @@ export const styles = css`
   }
 
   .combobox__grid-col {
-    border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
+    border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-primary));
   }
 
   .combobox__grid-col:last-child {
@@ -680,7 +680,7 @@ export const styles = css`
     overflow: hidden;
   }
   .combobox__group-sticky-overlay .combobox__group-header {
-    box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
+    box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
   }
 
   .combobox__group-header {
@@ -704,7 +704,7 @@ export const styles = css`
     letter-spacing: 0.06em;
     color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
+    border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
     pointer-events: none;
     user-select: none;
   }

package/src/nile-command-menu/nile-command-menu.css.ts

@@ -58,7 +58,7 @@ export const styles = css`
     max-height: var(--max-height);
     overflow: hidden;
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-lg, var(--ng-radius-xl));
     box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-xl));
   }
@@ -73,7 +73,7 @@ export const styles = css`
     align-items: center;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
     padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
   }
 
   .command__search-icon {
@@ -112,7 +112,7 @@ export const styles = css`
     flex-wrap: wrap;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
   }
 
   .command__scopes-label {
@@ -154,7 +154,7 @@ export const styles = css`
     align-items: center;
     gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-    border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
   }
@@ -184,7 +184,7 @@ export const styles = css`
     height: 20px;
     padding: 0 5px;
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     font-family: inherit;
     font-size: 11px;

package/src/nile-command-menu-item/nile-command-menu-item.css.ts

@@ -57,7 +57,7 @@ export const styles = css`
   /* Active / selected (keyboard or hover) */
   :host([active]:not([disabled])) .item,
   .item:hover {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));
+    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));
   }
 
@@ -116,7 +116,7 @@ export const styles = css`
     height: 20px;
     padding: 0 5px;
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     font-family: inherit;
     font-size: 11px;

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

@@ -51,7 +51,7 @@ export const styles = css`
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-primary-hover));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     border-radius: var(--nile-radius-none, var(--ng-radius-sm));
   }

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

@@ -287,7 +287,7 @@ export const styles = css`
     white-space: nowrap;
     cursor: pointer;
     border: 1px dashed
-      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
   }
 
@@ -355,12 +355,12 @@ export const styles = css`
   /* Filled selects */
   .select--filled .select__combobox {
     border: none;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .select--filled:hover:not(.select--disabled) .select__combobox {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
   }
 
   .select--filled.select--disabled .select__combobox {
@@ -371,7 +371,7 @@ export const styles = css`
 
   .select--filled:not(.select--disabled).select--open .select__combobox,
   .select--filled:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     outline: 3px solid rgba(0, 89, 255, 0.4);
   }
 
@@ -474,7 +474,7 @@ export const styles = css`
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     padding-block: var(--nile-spacing-none, var(--ng-spacing-none));
     padding-inline: var(--nile-spacing-none, var(--ng-spacing-none));
@@ -532,7 +532,7 @@ export const styles = css`
 
   .select__custom-footer {
     display: block;
-    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     padding: var(--nile-spacing-lg, var(--ng-spacing-lg))  ;
   }
@@ -547,7 +547,7 @@ export const styles = css`
     position: sticky;
     bottom: 0px;
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     height: 15px;
     /* Auto layout */
     display: var(--nile-display-flex, var(--ng-display-flex));

package/src/nile-virtual-select/nile-virtual-select.css.ts

@@ -298,7 +298,7 @@ export const styles = css`
     white-space: nowrap;
     cursor: pointer;
     border: 1px dashed
-      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
   }
 
@@ -349,7 +349,7 @@ export const styles = css`
 
   .select--standard:not(.select--disabled).select--open .select__combobox,
   .select--standard:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
   }
 
   .select--warning .select__combobox {
@@ -368,12 +368,12 @@ export const styles = css`
   /* Filled selects */
   .select--filled .select__combobox {
     border: none;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .select--filled:hover:not(.select--disabled) .select__combobox {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
   }
 
   .select--filled.select--disabled .select__combobox {
@@ -384,7 +384,7 @@ export const styles = css`
 
   .select--filled:not(.select--disabled).select--open .select__combobox,
   .select--filled:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     outline: 3px solid rgba(0, 89, 255, 0.4);
   }
 
@@ -481,7 +481,7 @@ export const styles = css`
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));
     padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));
@@ -529,7 +529,7 @@ export const styles = css`
     position: sticky;
     bottom: 0px;
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     display: flex;
     height: 15px;
     /* Auto layout */
@@ -624,7 +624,7 @@ export const styles = css`
   }
 
   .virtualized nile-option[selected] {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));
   }
 
   .virtualized nile-option[selected]::part(base) {

package/vscode-html-custom-data.json

@@ -496,7 +496,7 @@
     },
     {
       "name": "nile-badge",
-      "description": "Events:\n\n  * `nile-remove` {} - Emitted when the remove button is activated.\n\nSlots:\n\n  * ` ` {} - The badge's content.\n\nAttributes:\n\n  * `variant` {`\"primary\" | \"success\" | \"normal\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"brand\" | \"blue-light\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\" | \"blue-gray\" | \"gray-blue\"`} - The badge's theme variant.\n\n  * `rounded` {`boolean`} - Draws a pill-style badge with rounded edges.\n\n  * `pilltype` {`\"pill-color\" | \"pill-outline\" | \"badge-color\"`} - \n\nProperties:\n\n  * `styles` - \n\n  * `variant` {`\"primary\" | \"success\" | \"normal\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"brand\" | \"blue-light\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\" | \"blue-gray\" | \"gray-blue\"`} - The badge's theme variant.\n\n  * `rounded` {`boolean`} - Draws a pill-style badge with rounded edges.\n\n  * `pilltype` {`\"pill-color\" | \"pill-outline\" | \"badge-color\"`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-remove` {} - Emitted when the remove button is activated.\n\nSlots:\n\n  * ` ` {} - The badge's content.\n\nAttributes:\n\n  * `variant` {`\"primary\" | \"success\" | \"normal\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"brand\" | \"blue-light\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\" | \"blue-gray\" | \"gray-blue\"`} - The badge's theme variant.\n\n  * `rounded` {`boolean`} - Draws a pill-style badge with rounded edges.\n\n  * `pilltype` {`\"pill-color\" | \"pill-outline\" | \"badge-color\"`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - The badge's size. `md` keeps the existing default dimensions.\n\nProperties:\n\n  * `styles` - \n\n  * `variant` {`\"primary\" | \"success\" | \"normal\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"brand\" | \"blue-light\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\" | \"blue-gray\" | \"gray-blue\"`} - The badge's theme variant.\n\n  * `rounded` {`boolean`} - Draws a pill-style badge with rounded edges.\n\n  * `pilltype` {`\"pill-color\" | \"pill-outline\" | \"badge-color\"`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - The badge's size. `md` keeps the existing default dimensions.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "variant",
@@ -572,6 +572,21 @@
             }
           ]
         },
+        {
+          "name": "size",
+          "description": "`size` {`\"sm\" | \"md\" | \"lg\"`} - The badge's size. `md` keeps the existing default dimensions.\n\nProperty: size\n\nDefault: md",
+          "values": [
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            }
+          ]
+        },
         {
           "name": "onnile-remove",
           "description": "`nile-remove` {} - Emitted when the remove button is activated."