@aquera/nile-elements 1.6.2 → 1.6.3

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

@@ -0,0 +1,351 @@
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { HasSlotController } from '../internal/slot';
+import { html } from 'lit';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import { styles } from './nile-checkbox-group.css';
+import { Nile_Events } from '../internal/enum';
+import type { CSSResultGroup, PropertyValues } from 'lit';
+import type NileCheckbox from '../nile-checkbox/nile-checkbox';
+
+/**
+ * @summary Checkbox groups manage multiple [checkboxes](/components/checkbox) so they function as a multi-select form control.
+ * Supports two association modes: slotted children or property-based remote association via `for`/`group`.
+ *
+ * @slot - The default slot where `<nile-checkbox>` elements are placed (slotted mode).
+ * @slot label - The checkbox group's label. Required for proper accessibility. Alternatively, use the `label` attribute.
+ *
+ * @event change - Emitted when the checkbox group's selected values change.
+ * @event input - Emitted when the checkbox group receives user input.
+ *
+ * @csspart form-control - The fieldset wrapper.
+ * @csspart form-control-label - The group label.
+ * @csspart form-control-input - The wrapper around the checkbox options.
+ * @csspart options-base - The container for the checkbox options.
+ */
+@customElement('nile-checkbox-group')
+export class NileCheckboxGroup extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+  private boundDocumentListener: ((event: Event) => void) | null = null;
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  @state() defaultValue: string[] = [];
+
+  /** The checkbox group's label. Required for proper accessibility. */
+  @property() label = '';
+
+  /** The name of the checkbox group, submitted as a name/value pair with form data. */
+  @property() name = '';
+
+  /** The current selected values, as an array of checkbox value strings. */
+  @property({ type: Array }) value: string[] = [];
+
+  /**
+   * Group name for property-based association. When set, the group discovers
+   * checkboxes anywhere in the DOM that have a matching `group` attribute
+   * instead of relying on slotted children.
+   */
+  @property({ reflect: true, attribute: true}) for = '';
+
+  /**
+   * Associates the group with a `<form>` element by its `id`. The form must
+   * be in the same document or shadow root.
+   */
+  @property({ reflect: true }) form = '';
+
+  /** At least one checkbox must be checked before the form can submit. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
+  /** Layout direction of the checkboxes. */
+  @property({ reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';
+
+  /** Display checkboxes in an inline (horizontal) layout. Alias for orientation="horizontal". */
+  @property({ type: Boolean, reflect: true }) labelInline = false;
+
+  /** Disables all associated checkboxes. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @property({ attribute: true, reflect: true }) helpText = '';
+
+  @property({ attribute: true, reflect: true }) errorMessage = '';
+
+  /** Maximum number of checkboxes that can be checked. Unchecked boxes are disabled when the limit is reached. */
+  @property({ type: Number, reflect: true }) max: number | undefined;
+
+  /** Minimum selections required for validation. */
+  @property({ type: Number, reflect: true }) min: number | undefined;
+
+  /** Shows a visible border around the fieldset wrapper. */
+  @property({ type: Boolean, reflect: true }) bordered = false;
+
+  /** Legend text displayed at the top of the fieldset when bordered is enabled. */
+  @property({ type: String, reflect: true }) legend = '';
+
+  private get isHorizontal(): boolean {
+    return this.orientation === 'horizontal' || this.labelInline;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.defaultValue = [...this.value];
+    this.setupDocumentListener();
+    this.emit(Nile_Events.NILE_INIT);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.teardownDocumentListener();
+    this.emit(Nile_Events.NILE_DESTROY);
+  }
+
+  private setupDocumentListener() {
+    if (this.for) {
+      this.boundDocumentListener = (event: Event) => {
+        const target = event.target as NileCheckbox;
+        if (
+          target.tagName?.toLowerCase() === 'nile-checkbox' &&
+          target.group === this.for
+        ) {
+          this.handleCheckboxChange(target);
+        }
+      };
+      document.addEventListener(Nile_Events.NILE_CHANGE, this.boundDocumentListener);
+    }
+  }
+
+  private teardownDocumentListener() {
+    if (this.boundDocumentListener) {
+      document.removeEventListener(Nile_Events.NILE_CHANGE, this.boundDocumentListener);
+      this.boundDocumentListener = null;
+    }
+  }
+
+  @watch('for')
+  handleForChange() {
+    this.teardownDocumentListener();
+    this.setupDocumentListener();
+    this.syncCheckboxStates();
+    this.enforceMaxDisabled();
+  }
+
+  private getAllCheckboxes(): NileCheckbox[] {
+    if (this.for) {
+      const root = this.getRootNode() as Document | ShadowRoot;
+      return [...root.querySelectorAll<NileCheckbox>(`nile-checkbox[group="${this.for}"]`)];
+    }
+    return [...this.querySelectorAll<NileCheckbox>('nile-checkbox')];
+  }
+
+  private handleCheckboxClick(event: MouseEvent) {
+    const target = (event.target as HTMLElement).closest<NileCheckbox>('nile-checkbox');
+    if (!target) return;
+    this.handleCheckboxChange(target);
+  }
+
+  private handleChildInput(event: Event) {
+    event.stopPropagation();
+  }
+
+  private handleCheckboxChange(target: NileCheckbox) {
+    if (target.disabled || this.disabled) return;
+
+    const checkboxes = this.getAllCheckboxes();
+    const checkedCount = checkboxes.filter(cb => cb.checked).length;
+
+    if (this.max !== undefined && checkedCount > this.max) {
+      target.checked = false;
+      return;
+    }
+
+    const newValue = checkboxes
+      .filter(cb => cb.checked)
+      .map(cb => String(cb.value));
+
+    const oldValue = this.value;
+    this.value = newValue;
+
+    this.enforceMaxDisabled();
+
+    if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
+      this.emit(Nile_Events.NILE_CHANGE, { value: this.value });
+    }
+  }
+
+  private enforceMaxDisabled() {
+    if (this.max === undefined) return;
+
+    const checkboxes = this.getAllCheckboxes();
+    const checkedCount = checkboxes.filter(cb => cb.checked).length;
+    const atLimit = checkedCount >= this.max;
+
+    checkboxes.forEach(cb => {
+      if (!cb.checked && !this.disabled) {
+        cb.disabled = atLimit;
+      }
+    });
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('max')) {
+      this.enforceMaxDisabled();
+    }
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.getAllCheckboxes().forEach(cb => {
+        cb.disabled = true;
+      });
+    } else {
+      this.getAllCheckboxes().forEach(cb => {
+        cb.disabled = cb.hasAttribute('disabled');
+      });
+      this.enforceMaxDisabled();
+    }
+  }
+
+  private handleInitialDisabledState() {
+    if (this.disabled) {
+      this.getAllCheckboxes().forEach(cb => {
+        cb.disabled = true;
+      });
+    } else {
+      this.getAllCheckboxes().forEach(cb => {
+        cb.disabled = cb.hasAttribute('disabled') ? true : false;
+      });
+    }
+  }
+
+  private handleLabelClick() {
+    if (this.disabled) return;
+    const checkboxes = this.getAllCheckboxes();
+    const first = checkboxes[0];
+    if (first) {
+      first.focus();
+    }
+  }
+
+  private handleSlotChange() {
+    const checkboxes = this.getAllCheckboxes();
+
+    checkboxes.forEach(cb => {
+      cb.checked = this.value.includes(String(cb.value));
+    });
+
+    this.handleInitialDisabledState();
+    this.enforceMaxDisabled();
+  }
+
+  private syncCheckboxStates() {
+    const checkboxes = this.getAllCheckboxes();
+    checkboxes.forEach(cb => {
+      cb.checked = this.value.includes(String(cb.value));
+    });
+  }
+
+  @watch('value')
+  handleValueChange() {
+    if (this.hasUpdated) {
+      if (this.max !== undefined && this.value.length > this.max) {
+        this.value = this.value.slice(0, this.max);
+      }
+      this.syncCheckboxStates();
+      this.enforceMaxDisabled();
+    }
+  }
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
+
+    const defaultSlot = html`
+      <slot
+        @click=${this.handleCheckboxClick}
+        @input=${this.handleChildInput}
+        @slotchange=${this.handleSlotChange}
+        role="presentation"
+      ></slot>
+    `;
+
+    return html`
+      <fieldset
+        part="form-control"
+        class=${classMap({
+          'form-control': true,
+          'form-control--medium': true,
+          'form-control--checkbox-group': true,
+          'form-control--has-label': hasLabel,
+          'form-control--has-help-text': hasHelpText,
+          'form-control--bordered': this.bordered,
+        })}
+        role="group"
+        aria-labelledby="label"
+        aria-describedby="help-text"
+        aria-errormessage="error-message"
+      >
+        ${this.legend
+          ? html`<legend part="legend legend-label" class="form-control__legend">${this.legend}</legend>`
+          : ``}
+
+        <label
+          part="form-control-label"
+          id="label"
+          class="form-control__label"
+          aria-hidden=${hasLabel ? 'false' : 'true'}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        ${hasLabelSuffixSlot ? html` <slot name="label-suffix"></slot> ` : ``}
+
+        <div part="form-control-input" class="form-control-input" >
+          <div class="visually-hidden" part="validation-hidden">
+            <label class="checkbox-group__validation" part="validation-label" >
+              <input
+                type="text"
+                class="checkbox-group__validation-input"
+                part="validation-input"
+                ?required=${this.required}
+                tabindex="-1"
+                hidden
+              />
+            </label>
+          </div>
+
+          <div part="options-base" class="${this.isHorizontal ? `form-control--inline-checkbox` : ``}">
+            ${defaultSlot}
+          </div>
+        </div>
+
+        ${hasHelpText
+  ? html` <nile-form-help-text id="help-text">${this.helpText}</nile-form-help-text> `
+  : ``}
+
+${hasErrorMessage
+  ? html`
+      <nile-form-error-message id="error-message">${this.errorMessage}</nile-form-error-message>
+            `
+          : ``}
+      </fieldset>
+    `;
+  }
+}
+
+export default NileCheckboxGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-checkbox-group': NileCheckboxGroup;
+  }
+}

package/src/nile-link/nile-link.ts

@@ -5,14 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
+import { LitElement, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
 import { customElement, state, property } from 'lit/decorators.js';
 import {styles} from './nile-link.css';
 import { HasSlotController } from '../slot';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
-import NileElement from '../internal/nile-element';
+import NileElement, { setupA11yMetadata } from '../internal/nile-element';
 import { watch } from '../internal/watch';
+import { A11yProperty } from '../internal/accessibility/a11y.property.enum';
+import { Role } from '../internal/accessibility/role.enum';
+import { A11yCustomValue } from '../internal/accessibility/a11y.custom-value.enum';
+import { A11yRole } from '../internal/accessibility/a11y.role.enum';
+import { A11yState } from '../internal/accessibility/a11y.state.enum';
 
 /**
  * Nile icon component.
@@ -51,6 +56,20 @@ export class NileLink extends NileElement {
     this.handleHostClick = this.handleHostClick.bind(this);
     this.addEventListener('click', this.handleHostClick);
     this.emit('nile-init');
+
+    setupA11yMetadata(this, {
+      [Role.Role]: A11yRole.Link,
+      [A11yProperty.AriaLabel]: this.textContent?.trim() || A11yCustomValue.Link,
+    });
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+    if (_changedProperties.has('disabled')) {
+      setupA11yMetadata(this, {
+        [A11yState.AriaDisabled]: this.disabled,
+      });
+    }
   }
 
   disconnectedCallback() {

package/src/nile-otp-input/nile-otp-input.test.ts

@@ -92,7 +92,7 @@ describe('NileOtpInput', () => {
 
   it('renders help text when provided', async () => {
     const el = await fixture<NileOtpInput>(
-      html`<nile-otp-input help-text="Enter your code"></nile-otp-input>`
+      html`<nile-otp-input .helpText=${'Enter your code'}></nile-otp-input>`
     );
     const helpText = el.shadowRoot!.querySelector('.form-control__help-text');
     expect(helpText).to.exist;
@@ -101,7 +101,7 @@ describe('NileOtpInput', () => {
 
   it('renders error message when provided', async () => {
     const el = await fixture<NileOtpInput>(
-      html`<nile-otp-input error-message="Invalid code"></nile-otp-input>`
+      html`<nile-otp-input .errorMessage=${'Invalid code'}></nile-otp-input>`
     );
     const errorMsg = el.shadowRoot!.querySelector('.form-control__error-message');
     expect(errorMsg).to.exist;
@@ -110,7 +110,7 @@ describe('NileOtpInput', () => {
 
   it('renders separators with separator-every', async () => {
     const el = await fixture<NileOtpInput>(html`
-      <nile-otp-input separator="-" separator-every="3"></nile-otp-input>
+      <nile-otp-input separator="-" .separatorEvery=${3}></nile-otp-input>
     `);
     const separators = el.shadowRoot!.querySelectorAll('.otp__separator');
     expect(separators.length).to.equal(1);
@@ -305,7 +305,7 @@ describe('NileOtpInput', () => {
     await pressKey(el, 1, 'Delete');
     await aTimeout(0);
 
-    expect(cells[1].value).to.equal('');
+    expect(el.value).to.equal('13');
     expect(el.shadowRoot!.activeElement).to.equal(cells[1]);
   });
 
@@ -713,10 +713,10 @@ describe('NileOtpInput', () => {
     const el = await fixture<NileOtpInput>(html`
       <nile-otp-input
         label="Test"
-        help-text="Help"
-        error-message="Error"
+        .helpText=${'Help'}
+        .errorMessage=${'Error'}
         separator="-"
-        separator-every="3"
+        .separatorEvery=${3}
       ></nile-otp-input>
     `);
 

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

@@ -23,6 +23,13 @@ export const styles = css`
     pointer-events: none;
   }
 
+  :host([disabled]) .range-text,
+  :host([disabled]) .page-size-label,
+  :host([disabled]) .mini-showing-label,
+  :host([disabled]) .mini-of-label {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+  }
+
   .pagination-wrapper {
     display: flex;
     align-items: center;

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

@@ -128,6 +128,10 @@ export const styles = css`
     border: 1px solid var(--nile-colors-dark-100, var(--ng-colors-border-disabled));
   }
 
+  .radio--disabled .radio__label {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+  }
+
   /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
   .radio:not(.radio--checked) svg circle {
     opacity: 0;

package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts

@@ -2,7 +2,8 @@
 import { css } from 'lit';
 
 export const styles = css`
-  .editor { all: revert; }
+  .editor { all: revert;
+  -webkit-user-modify: read-write; }
 
   nile-rich-text-editor {
     position: relative;
@@ -59,9 +60,10 @@ export const styles = css`
 
   nile-rich-text-editor[disabled] .rte-container .editor {
     background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
-    pointer-events: none ;
+    pointer-events: none;
     user-select: none;
     -webkit-user-select: none;
+    -webkit-user-modify: read-only;
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
     color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   }
@@ -155,10 +157,10 @@ nile-rte-preview {
   }
  
   .editor ul,
-.editor ol {
-  list-style-position: inside;  
-  padding: 0px;
-}
+  .editor ol {
+    list-style-position: outside;
+    padding-inline-start: 24px;
+  }
 
 
  

package/src/nile-rich-text-editor/nile-rich-text-editor.ts

@@ -327,11 +327,21 @@ export class NileRichTextEditor extends LitElement {
   }
 
   private onEditorClick = (e: MouseEvent) => {
+    if (this.disabled) { e.preventDefault(); return; }
     const anchor = (e.target as HTMLElement).closest?.('a');
     if (anchor) e.preventDefault();
   };
 
+  private onEditorPaste = (e: ClipboardEvent) => {
+    if (this.disabled) e.preventDefault();
+  };
+
+  private onEditorDrop = (e: DragEvent) => {
+    if (this.disabled) e.preventDefault();
+  };
+
   private onEditorInput = () => {
+    if (this.disabled) return;
     this.ensureAtLeastOneParagraph();
     this.scrubBrokenMentions();
     this.updateContent();
@@ -366,6 +376,8 @@ export class NileRichTextEditor extends LitElement {
     this.editorEl.addEventListener('mouseup', this.onEditorMouseup);
     this.editorEl.addEventListener('keyup', this.onEditorKeyup);
     this.editorEl.addEventListener('keydown', this.onEditorKeydown);
+    this.editorEl.addEventListener('paste', this.onEditorPaste);
+    this.editorEl.addEventListener('drop', this.onEditorDrop);
   }
 
   private unwireEditor() {
@@ -375,9 +387,15 @@ export class NileRichTextEditor extends LitElement {
     this.editorEl.removeEventListener('mouseup', this.onEditorMouseup);
     this.editorEl.removeEventListener('keyup', this.onEditorKeyup);
     this.editorEl.removeEventListener('keydown', this.onEditorKeydown);
+    this.editorEl.removeEventListener('paste', this.onEditorPaste);
+    this.editorEl.removeEventListener('drop', this.onEditorDrop);
   }
 
   private onEditorKeydown = (e: KeyboardEvent) => {
+    if (this.disabled) {
+      e.preventDefault();
+      return;
+    }
     if (this.singleLineEditor && e.key === 'Enter' && e.shiftKey) {
       e.preventDefault();
       return;
@@ -640,6 +658,17 @@ export class NileRichTextEditor extends LitElement {
       (el.textContent ?? '').replace(/\u200B/g, '').trim() === '';
     if (el.childNodes.length === 0 || onlyWhitespace) {
       el.innerHTML = '<p><br></p>';
+      const p = el.querySelector('p');
+      if (p) {
+        const range = document.createRange();
+        range.setStart(p, 0);
+        range.collapse(true);
+        const sel = window.getSelection();
+        if (sel) {
+          sel.removeAllRanges();
+          sel.addRange(range);
+        }
+      }
       return;
     }
 
@@ -663,6 +692,7 @@ export class NileRichTextEditor extends LitElement {
 
   // ---------- Toolbar/commands ----------
   private onToolbarCommand(cmd: string) {
+    if (this.disabled) return;
     this.focusAndRestore();
     switch (cmd) {
       case 'bold':
@@ -889,6 +919,13 @@ export class NileRichTextEditor extends LitElement {
     this.ensureAtLeastOneParagraph();
     const isEmpty = (this.editorEl.textContent ?? '').trim() === '';
     this.editorEl.classList.toggle('empty', isEmpty);
+
+    const sel = window.getSelection();
+    const caretRange =
+      sel && sel.rangeCount > 0 && this.editorEl.contains(sel.getRangeAt(0).startContainer)
+        ? sel.getRangeAt(0).cloneRange()
+        : null;
+
     const clone = this.editorEl.cloneNode(true) as HTMLElement;
   
     if (!this.noStyles) {
@@ -922,6 +959,12 @@ export class NileRichTextEditor extends LitElement {
         el.removeAttribute('style')
       );
     }
+
+    if (caretRange && sel && this.editorEl.contains(caretRange.startContainer)) {
+      sel.removeAllRanges();
+      sel.addRange(caretRange);
+    }
+
     this.content = clone.innerHTML;  
     if (this.previewEl) this.previewEl.innerHTML = this.content;
   

package/src/nile-rich-text-editor/nile-rte-link.test.ts

@@ -191,14 +191,14 @@ describe('NileRteLink', () => {
     expect(normalize('tel:+123')).to.equal('tel:+123');
   });
 
-  it('18. displayUrl strips protocol for display', async () => {
+  it('18. displayUrl returns URL as-is', async () => {
     editor = createEditor();
     const el = await fixture<NileRteLink>(
       html`<nile-rte-link .editorEl=${editor}></nile-rte-link>`
     );
     const display = (el as any).displayUrl.bind(el);
-    expect(display('https://example.com')).to.equal('example.com');
-    expect(display('http://example.com/path')).to.equal('example.com/path');
+    expect(display('https://example.com')).to.equal('https://example.com');
+    expect(display('http://example.com/path')).to.equal('http://example.com/path');
   });
 
   // ── Link Insertion (collapsed selection) ──
@@ -309,7 +309,7 @@ describe('NileRteLink', () => {
     expect((el as any).activeAnchor).to.equal(a);
   });
 
-  it('25. pre-fills input with existing link URL (protocol stripped)', async () => {
+  it('25. pre-fills input with existing link URL', async () => {
     editor = createEditor('<p><a href="https://example.com">link</a></p>');
     const el = await fixture<NileRteLink>(
       html`<nile-rte-link .editorEl=${editor}></nile-rte-link>`
@@ -320,7 +320,7 @@ describe('NileRteLink', () => {
     (el as any).onOpen();
     await elementUpdated(el);
 
-    expect((el as any).linkValue).to.equal('example.com');
+    expect((el as any).linkValue).to.equal(a.href);
   });
 
   it('26. updates existing anchor href on apply', async () => {
@@ -472,6 +472,7 @@ describe('NileRteLink', () => {
     (el as any).ignoreBlur = false;
     (el as any).isApplying = false;
     (el as any).onInputBlur();
+    await sleep(50);
 
     expect((el as any).selectionRange).to.be.null;
   });

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

@@ -253,7 +253,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);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
   }
 
   .select--warning .select__combobox {
@@ -437,6 +437,25 @@ export const styles = css`
     margin-bottom: -8px;
   }
 
+  .select__pre-footer-area {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  }
+
+  .select__custom-footer {
+    display: block;
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg))  ;
+  }
+
+  .select__custom-footer:hover {
+     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
+  }
+
+
   .select__footer {
     position: sticky;
     bottom: 0px;
@@ -520,7 +539,7 @@ export const styles = css`
   box-shadow: 0 0 0 1px  var(--ng-colors-border-brand) inset ;
 }
 
-:host([stickyHeader])  .select__footer{
+:host([stickyHeader]) .select__footer-area {
   z-index: 1;
 }