@aquera/nile-elements 1.7.2 → 1.7.3

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

@@ -139,9 +139,10 @@ export const styles = css `
   /* Size: medium */
   .combobox--medium .combobox__trigger {
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    padding: var(--nile-spacing-5px, var(--ng-spacing-md)) var(--nile-spacing-10px, var(--ng-spacing-lg));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
     min-height: var(--nile-height-40px, var(--ng-height-40px));
+    box-sizing: border-box;
   }
 
   /* Size: large */
@@ -254,10 +255,10 @@ export const styles = css `
     margin: 0;
     -webkit-appearance: none;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    font-size: inherit;
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-overflow: ellipsis;
-    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
   }
 
   .combobox__input::placeholder {
@@ -634,6 +635,78 @@ export const styles = css `
     border-radius: 0;
   }
 
+  /* ── Group headers (data-driven grouping) ── */
+
+  /* Plain (non-virtualized) listbox: sticky relative to the scroll container.
+   * Activated only when the host has [sticky-group-header]. */
+  :host([sticky-group-header]) .combobox__options-plain .combobox__group-header {
+    position: sticky;
+    top: calc(var(--group-depth, 0) * 28px);
+    z-index: 1;
+  }
+
+  /* Virtualized listbox: each row is absolutely positioned by the virtualizer.
+   * Sticky doesn't pin against the scroll container because the row wrapper's
+   * transform creates a containing block. Instead we render a separate
+   * overlay inside the listbox that mirrors the currently-active group
+   * header (computed on scroll). */
+  .combobox__group-header-slot {
+    pointer-events: none;
+  }
+  .combobox__group-header-slot .combobox__group-header {
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .combobox__group-sticky-overlay {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+  .combobox__group-sticky-overlay .combobox__group-header {
+    box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
+  }
+
+  .combobox__group-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    /* Match the listbox's natural inline padding so the header sits like a
+     * section divider, edge-to-edge with options. Nested groups indent by
+     * depth. Override with --combobox-group-header-indent if needed. */
+    padding-block: 8px;
+    padding-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding-inline-start: calc(var(--combobox-group-header-indent, var(--nile-spacing-lg, var(--ng-spacing-lg))) + var(--group-depth, 0) * 16px);
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));
+    line-height: 1;
+    text-transform: uppercase;
+    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));
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .combobox__group-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .combobox__group-prefix {
+    flex-shrink: 0;
+    color: inherit;
+  }
+
   /* ── Help / Error ── */
 
   .form-control__help-text {

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

@@ -1 +1 @@
-{"version":3,"file":"nile-combobox.css.js","sourceRoot":"","sources":["../../../src/nile-combobox/nile-combobox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAioBxB,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\nexport const styles = css`\n  :host {\n    display: block;\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;\n  }\n\n  /* ── Form control ── */\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  :host([disabled]) .form-control--has-label .form-control__label {\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  /* ── Popup ── */\n\n  .combobox-popup {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .combobox-popup::part(popup) {\n    z-index: 9999;\n  }\n\n  .combobox-popup[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .combobox-popup[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* ── Trigger: outer row that never scrolls ── */\n\n  .combobox__trigger {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    letter-spacing: normal;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow, 150ms background-color;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    outline: none;\n  }\n\n  .combobox__trigger:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n  }\n\n  .combobox--open .combobox__trigger,\n  .combobox--focused .combobox__trigger {\n    border-color: var(--ng-colors-border-brand);\n    box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n  }\n\n  .combobox--disabled .combobox__trigger {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    cursor: not-allowed;\n    user-select: none;\n  }\n\n  .combobox--warning .combobox__trigger {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n  }\n\n  .combobox--error .combobox__trigger {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n  }\n\n  .combobox--success .combobox__trigger {\n    border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n  }\n\n  /* Size: small */\n  .combobox--small .combobox__trigger {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    padding: var(--nile-spacing-md, var(--ng-spacing-sm)) var(--nile-spacing-md, var(--ng-spacing-md));\n    min-height: var(--nile-height-32px, var(--ng-height-32px));\n  }\n\n  /* Size: medium */\n  .combobox--medium .combobox__trigger {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    padding: var(--nile-spacing-5px, var(--ng-spacing-md)) var(--nile-spacing-10px, var(--ng-spacing-lg));\n    min-height: var(--nile-height-40px, var(--ng-height-40px));\n  }\n\n  /* Size: large */\n  .combobox--large .combobox__trigger {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    min-height: var(--nile-height-48px, var(--ng-height-48px));\n  }\n\n  .combobox--pill .combobox__trigger {\n    border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n  }\n\n  .combobox--filled .combobox__trigger {\n    border: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n  }\n\n  .combobox--filled.combobox--open .combobox__trigger,\n  .combobox--filled.combobox--focused .combobox__trigger {\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  /* ── Inner area: holds tags + input ── */\n\n  .combobox__scroll-area {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 4px;\n    overflow: hidden;\n  }\n\n  /* Single-line: horizontal scroll for overflowing tags */\n  .combobox__scroll-area--single-line {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    overflow-y: hidden;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: thin;\n    scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary)) transparent;\n  }\n\n  .combobox__scroll-area--single-line::-webkit-scrollbar {\n    height: 3px;\n  }\n\n  .combobox__scroll-area--single-line::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .combobox__scroll-area--single-line::-webkit-scrollbar-thumb {\n    background: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary));\n    border-radius: 3px;\n  }\n\n  .combobox__scroll-area--single-line::-webkit-scrollbar-thumb:hover {\n    background: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n  }\n\n  /* Wrap: tags flow to multiple lines, trigger grows in height */\n  .combobox__scroll-area--wrap {\n    flex-wrap: wrap;\n    overflow: visible;\n  }\n\n  /* ── Tags inside the scroll area ── */\n\n  .combobox__scroll-area nile-tag {\n    cursor: pointer;\n    flex-shrink: 0;\n  }\n\n  .combobox--disabled .combobox__scroll-area nile-tag {\n    cursor: not-allowed;\n  }\n\n  .combobox__tags-count {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  /* ── Input wrapper inside scroll area ── */\n\n  .combobox__input-wrapper {\n    flex: 1;\n    min-width: 60px;\n    display: flex;\n    align-items: center;\n  }\n\n  .combobox__input {\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    text-overflow: ellipsis;\n    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n  }\n\n  .combobox__input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n  }\n\n  .combobox__input:focus {\n    outline: none;\n  }\n\n  .combobox--disabled .combobox__input {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  /* ── Hidden form value input ── */\n\n  .combobox__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n  }\n\n  /* ── Action icons (clear, expand) ── */\n\n  .combobox__actions {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    margin-inline-start: auto;\n  }\n\n  .combobox__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: none;\n    padding: 0;\n    cursor: pointer;\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n    transition: 150ms color;\n  }\n\n  .combobox__clear:hover {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .combobox__clear:focus {\n    outline: none;\n  }\n\n  .combobox__expand-icon {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    transition: 250ms rotate ease;\n    rotate: 0;\n  }\n\n  .combobox--open .combobox__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* ── Prefix / suffix ── */\n\n  .combobox__prefix,\n  .combobox__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .combobox__prefix {\n    margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  /* ── Listbox (dropdown) ── */\n\n  .combobox__listbox {\n    display: block;\n    position: relative;\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-regular));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n    overscroll-behavior: none;\n    overflow-y: auto;\n    max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n    box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  /* ── Options ── */\n\n  .combobox__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: rgb(133, 129, 129);\n    width: 100%;\n  }\n\n  .combobox__options.loading {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  .combobox__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    text-align: center;\n  }\n\n  .combobox__no-results-title {\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    color: var(--nile-colors-dark-700, var(--ng-colors-text-secondary-700));\n  }\n\n  .combobox__no-results-subtitle {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  /* ── Options (both virtual and plain) ── */\n\n  .combobox__options nile-option {\n    width: 100%;\n    display: block;\n  }\n\n  .combobox__options nile-option[selected] {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n  }\n\n  .combobox__options nile-option[selected]::part(base) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .combobox__options-plain {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .combobox__options-plain nile-option {\n    flex-shrink: 0;\n  }\n\n  /* ── Top actions (Select All + Selected/All filter toggle) ── */\n\n  .combobox__top-actions {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    user-select: none;\n  }\n\n  .combobox__top-actions--disabled {\n    opacity: 0.6;\n    pointer-events: none;\n  }\n\n  .combobox__select-all {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    cursor: pointer;\n    flex: 1 1 auto;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary));\n  }\n\n  .combobox__show-toggle {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    border: none;\n    background: none;\n    padding: 0;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n    cursor: pointer;\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n  }\n\n  .combobox__show-toggle[disabled] {\n    color: var(--nile-colors-primary-500, var(--ng-colors-fg-quaternary-400));\n    cursor: not-allowed;\n  }\n\n  /* ── Footer ── */\n\n  .combobox__footer {\n    position: sticky;\n    bottom: 0;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    justify-content: space-between;\n  }\n\n  .combobox__footer.loading {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  .combobox__footer-clear {\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    border: none;\n    background: none;\n    padding: 0;\n    cursor: pointer;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .combobox__footer-clear:hover {\n    text-decoration: underline;\n  }\n\n  /* ── Loader ── */\n\n  .combobox__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .combobox__loader--icon {\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    animation: combobox-spin 0.6s linear infinite;\n  }\n\n  .combobox__loader--center {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 75%;\n  }\n\n  @keyframes combobox-spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n  }\n\n  .combobox__add-option::part(base) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  /* ── Grid layout ── */\n\n  :host([grid-columns]) .combobox__listbox {\n    overflow-y: auto;\n  }\n\n  .combobox__grid-row {\n    width: 100%;\n  }\n\n  .combobox__grid-row nile-option {\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .combobox__grid-row nile-option::part(base) {\n    border-radius: var(--nile-radius-xs, var(--ng-radius-sm));\n  }\n\n  /* ── Bidirectional grid layout (vertical + horizontal scroll) ── */\n\n  .combobox__listbox.combobox__listbox--bidirectional {\n    overflow: auto;\n    max-width: none;\n    scrollbar-width: thin;\n    scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;\n  }\n\n  .combobox__listbox--bidirectional .combobox__options {\n    width: max-content;\n    min-width: 100%;\n  }\n\n  .combobox__listbox--bidirectional .combobox__grid-row {\n    width: max-content;\n    min-width: 100%;\n  }\n\n  /* ── Horizontal grid layout ── */\n\n  .combobox__listbox.combobox__listbox--horizontal {\n    overflow-x: auto;\n    overflow-y: hidden;\n    max-height: none;\n    max-width: none;\n    width: 100%;\n    scrollbar-width: thin;\n    scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;\n  }\n\n  .combobox__listbox--horizontal::-webkit-scrollbar {\n    height: 6px;\n  }\n\n  .combobox__listbox--horizontal::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .combobox__listbox--horizontal::-webkit-scrollbar-thumb {\n    background: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary));\n    border-radius: 3px;\n  }\n\n  .combobox__listbox--horizontal::-webkit-scrollbar-thumb:hover {\n    background: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n  }\n\n  .combobox__options--horizontal {\n    display: block;\n    width: max-content;\n    min-width: 100%;\n  }\n\n  .combobox__grid-col {\n    border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n  }\n\n  .combobox__grid-col:last-child {\n    border-right: none;\n  }\n\n  .combobox__grid-col nile-option {\n    width: 100%;\n    display: block;\n  }\n\n  .combobox__grid-col nile-option::part(base) {\n    border-radius: 0;\n  }\n\n  /* ── Help / Error ── */\n\n  .form-control__help-text {\n    display: none;\n  }\n\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-combobox.css.js","sourceRoot":"","sources":["../../../src/nile-combobox/nile-combobox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0sBxB,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\nexport const styles = css`\n  :host {\n    display: block;\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;\n  }\n\n  /* ── Form control ── */\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  :host([disabled]) .form-control--has-label .form-control__label {\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  /* ── Popup ── */\n\n  .combobox-popup {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .combobox-popup::part(popup) {\n    z-index: 9999;\n  }\n\n  .combobox-popup[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .combobox-popup[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* ── Trigger: outer row that never scrolls ── */\n\n  .combobox__trigger {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    letter-spacing: normal;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow, 150ms background-color;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    outline: none;\n  }\n\n  .combobox__trigger:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n  }\n\n  .combobox--open .combobox__trigger,\n  .combobox--focused .combobox__trigger {\n    border-color: var(--ng-colors-border-brand);\n    box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n  }\n\n  .combobox--disabled .combobox__trigger {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    cursor: not-allowed;\n    user-select: none;\n  }\n\n  .combobox--warning .combobox__trigger {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n  }\n\n  .combobox--error .combobox__trigger {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n  }\n\n  .combobox--success .combobox__trigger {\n    border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n  }\n\n  /* Size: small */\n  .combobox--small .combobox__trigger {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    padding: var(--nile-spacing-md, var(--ng-spacing-sm)) var(--nile-spacing-md, var(--ng-spacing-md));\n    min-height: var(--nile-height-32px, var(--ng-height-32px));\n  }\n\n  /* Size: medium */\n  .combobox--medium .combobox__trigger {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    min-height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  /* Size: large */\n  .combobox--large .combobox__trigger {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    min-height: var(--nile-height-48px, var(--ng-height-48px));\n  }\n\n  .combobox--pill .combobox__trigger {\n    border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n  }\n\n  .combobox--filled .combobox__trigger {\n    border: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n  }\n\n  .combobox--filled.combobox--open .combobox__trigger,\n  .combobox--filled.combobox--focused .combobox__trigger {\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  /* ── Inner area: holds tags + input ── */\n\n  .combobox__scroll-area {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 4px;\n    overflow: hidden;\n  }\n\n  /* Single-line: horizontal scroll for overflowing tags */\n  .combobox__scroll-area--single-line {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    overflow-y: hidden;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: thin;\n    scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary)) transparent;\n  }\n\n  .combobox__scroll-area--single-line::-webkit-scrollbar {\n    height: 3px;\n  }\n\n  .combobox__scroll-area--single-line::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .combobox__scroll-area--single-line::-webkit-scrollbar-thumb {\n    background: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary));\n    border-radius: 3px;\n  }\n\n  .combobox__scroll-area--single-line::-webkit-scrollbar-thumb:hover {\n    background: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n  }\n\n  /* Wrap: tags flow to multiple lines, trigger grows in height */\n  .combobox__scroll-area--wrap {\n    flex-wrap: wrap;\n    overflow: visible;\n  }\n\n  /* ── Tags inside the scroll area ── */\n\n  .combobox__scroll-area nile-tag {\n    cursor: pointer;\n    flex-shrink: 0;\n  }\n\n  .combobox--disabled .combobox__scroll-area nile-tag {\n    cursor: not-allowed;\n  }\n\n  .combobox__tags-count {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  /* ── Input wrapper inside scroll area ── */\n\n  .combobox__input-wrapper {\n    flex: 1;\n    min-width: 60px;\n    display: flex;\n    align-items: center;\n  }\n\n  .combobox__input {\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: inherit;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    text-overflow: ellipsis;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n  }\n\n  .combobox__input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n  }\n\n  .combobox__input:focus {\n    outline: none;\n  }\n\n  .combobox--disabled .combobox__input {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  /* ── Hidden form value input ── */\n\n  .combobox__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n  }\n\n  /* ── Action icons (clear, expand) ── */\n\n  .combobox__actions {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    margin-inline-start: auto;\n  }\n\n  .combobox__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: none;\n    padding: 0;\n    cursor: pointer;\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n    transition: 150ms color;\n  }\n\n  .combobox__clear:hover {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .combobox__clear:focus {\n    outline: none;\n  }\n\n  .combobox__expand-icon {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    transition: 250ms rotate ease;\n    rotate: 0;\n  }\n\n  .combobox--open .combobox__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* ── Prefix / suffix ── */\n\n  .combobox__prefix,\n  .combobox__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .combobox__prefix {\n    margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  /* ── Listbox (dropdown) ── */\n\n  .combobox__listbox {\n    display: block;\n    position: relative;\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-regular));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n    overscroll-behavior: none;\n    overflow-y: auto;\n    max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n    box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  /* ── Options ── */\n\n  .combobox__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: rgb(133, 129, 129);\n    width: 100%;\n  }\n\n  .combobox__options.loading {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  .combobox__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    text-align: center;\n  }\n\n  .combobox__no-results-title {\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    color: var(--nile-colors-dark-700, var(--ng-colors-text-secondary-700));\n  }\n\n  .combobox__no-results-subtitle {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  /* ── Options (both virtual and plain) ── */\n\n  .combobox__options nile-option {\n    width: 100%;\n    display: block;\n  }\n\n  .combobox__options nile-option[selected] {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n  }\n\n  .combobox__options nile-option[selected]::part(base) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  .combobox__options-plain {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .combobox__options-plain nile-option {\n    flex-shrink: 0;\n  }\n\n  /* ── Top actions (Select All + Selected/All filter toggle) ── */\n\n  .combobox__top-actions {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    user-select: none;\n  }\n\n  .combobox__top-actions--disabled {\n    opacity: 0.6;\n    pointer-events: none;\n  }\n\n  .combobox__select-all {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    cursor: pointer;\n    flex: 1 1 auto;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary));\n  }\n\n  .combobox__show-toggle {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    border: none;\n    background: none;\n    padding: 0;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n    cursor: pointer;\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n  }\n\n  .combobox__show-toggle[disabled] {\n    color: var(--nile-colors-primary-500, var(--ng-colors-fg-quaternary-400));\n    cursor: not-allowed;\n  }\n\n  /* ── Footer ── */\n\n  .combobox__footer {\n    position: sticky;\n    bottom: 0;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    justify-content: space-between;\n  }\n\n  .combobox__footer.loading {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  .combobox__footer-clear {\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    border: none;\n    background: none;\n    padding: 0;\n    cursor: pointer;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .combobox__footer-clear:hover {\n    text-decoration: underline;\n  }\n\n  /* ── Loader ── */\n\n  .combobox__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .combobox__loader--icon {\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    animation: combobox-spin 0.6s linear infinite;\n  }\n\n  .combobox__loader--center {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 75%;\n  }\n\n  @keyframes combobox-spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n  }\n\n  .combobox__add-option::part(base) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  /* ── Grid layout ── */\n\n  :host([grid-columns]) .combobox__listbox {\n    overflow-y: auto;\n  }\n\n  .combobox__grid-row {\n    width: 100%;\n  }\n\n  .combobox__grid-row nile-option {\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .combobox__grid-row nile-option::part(base) {\n    border-radius: var(--nile-radius-xs, var(--ng-radius-sm));\n  }\n\n  /* ── Bidirectional grid layout (vertical + horizontal scroll) ── */\n\n  .combobox__listbox.combobox__listbox--bidirectional {\n    overflow: auto;\n    max-width: none;\n    scrollbar-width: thin;\n    scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;\n  }\n\n  .combobox__listbox--bidirectional .combobox__options {\n    width: max-content;\n    min-width: 100%;\n  }\n\n  .combobox__listbox--bidirectional .combobox__grid-row {\n    width: max-content;\n    min-width: 100%;\n  }\n\n  /* ── Horizontal grid layout ── */\n\n  .combobox__listbox.combobox__listbox--horizontal {\n    overflow-x: auto;\n    overflow-y: hidden;\n    max-height: none;\n    max-width: none;\n    width: 100%;\n    scrollbar-width: thin;\n    scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;\n  }\n\n  .combobox__listbox--horizontal::-webkit-scrollbar {\n    height: 6px;\n  }\n\n  .combobox__listbox--horizontal::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .combobox__listbox--horizontal::-webkit-scrollbar-thumb {\n    background: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary));\n    border-radius: 3px;\n  }\n\n  .combobox__listbox--horizontal::-webkit-scrollbar-thumb:hover {\n    background: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n  }\n\n  .combobox__options--horizontal {\n    display: block;\n    width: max-content;\n    min-width: 100%;\n  }\n\n  .combobox__grid-col {\n    border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n  }\n\n  .combobox__grid-col:last-child {\n    border-right: none;\n  }\n\n  .combobox__grid-col nile-option {\n    width: 100%;\n    display: block;\n  }\n\n  .combobox__grid-col nile-option::part(base) {\n    border-radius: 0;\n  }\n\n  /* ── Group headers (data-driven grouping) ── */\n\n  /* Plain (non-virtualized) listbox: sticky relative to the scroll container.\n   * Activated only when the host has [sticky-group-header]. */\n  :host([sticky-group-header]) .combobox__options-plain .combobox__group-header {\n    position: sticky;\n    top: calc(var(--group-depth, 0) * 28px);\n    z-index: 1;\n  }\n\n  /* Virtualized listbox: each row is absolutely positioned by the virtualizer.\n   * Sticky doesn't pin against the scroll container because the row wrapper's\n   * transform creates a containing block. Instead we render a separate\n   * overlay inside the listbox that mirrors the currently-active group\n   * header (computed on scroll). */\n  .combobox__group-header-slot {\n    pointer-events: none;\n  }\n  .combobox__group-header-slot .combobox__group-header {\n    height: 100%;\n    box-sizing: border-box;\n  }\n\n  .combobox__group-sticky-overlay {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    pointer-events: none;\n  }\n  .combobox__group-sticky-overlay .combobox__group-header {\n    box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n  }\n\n  .combobox__group-header {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    /* Match the listbox's natural inline padding so the header sits like a\n     * section divider, edge-to-edge with options. Nested groups indent by\n     * depth. Override with --combobox-group-header-indent if needed. */\n    padding-block: 8px;\n    padding-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-inline-start: calc(var(--combobox-group-header-indent, var(--nile-spacing-lg, var(--ng-spacing-lg))) + var(--group-depth, 0) * 16px);\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n    line-height: 1;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .combobox__group-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .combobox__group-prefix {\n    flex-shrink: 0;\n    color: inherit;\n  }\n\n  /* ── Help / Error ── */\n\n  .form-control__help-text {\n    display: none;\n  }\n\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -96,6 +96,14 @@ export declare class NileCombobox extends NileElement implements NileFormControl
     selectedOptions: ComboboxOption[];
     /** The items displayed after filtering. Renderer reads from this. */
     filteredData: any[];
+    /**
+     * Mixed (header + option) row list, only populated when `data` contains
+     * group entries (`type: 'group'`). When non-empty, the listbox renders from
+     * this instead of `filteredData`. `filteredData` stays in sync as the
+     * option-only projection so existing select-all / strict-match / etc. logic
+     * keeps working unchanged.
+     */
+    private filteredRows;
     /** The complete unfiltered dataset (preserved for re-filtering). */
     private originalData;
     showNoResults: boolean;
@@ -104,6 +112,12 @@ export declare class NileCombobox extends NileElement implements NileFormControl
     private showSelectedOnly;
     private selectAllChecked;
     private selectAllIndeterminate;
+    /**
+     * Index into `filteredRows` of the group header that should be pinned at
+     * the top of the (virtualized) listbox right now. -1 means none.
+     * Recomputed on scroll.
+     */
+    private stickyHeaderIndex;
     name: string;
     data: any[];
     value: string | string[];
@@ -144,6 +158,13 @@ export declare class NileCombobox extends NileElement implements NileFormControl
      * non-disabled options (respects the active search filter).
      */
     selectAllEnabled: boolean;
+    /**
+     * When true (default), data-driven group headers stick to the top of the
+     * listbox while scrolling through that group's options (Atlassian-style).
+     * Works in both plain and virtualized rendering modes. Set to false for
+     * inline-only headers that scroll away with their options.
+     */
+    stickyGroupHeader: boolean;
     portal: boolean;
     hoist: boolean;
     placement: ComboboxPlacement;
@@ -184,12 +205,23 @@ export declare class NileCombobox extends NileElement implements NileFormControl
     protected firstUpdated(_changed: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
     private get isHorizontalGrid();
+    /** True when the source data contains at least one group entry. */
+    private get hasGroupedData();
+    /**
+     * Walk filteredRows and find the index of the deepest group header whose
+     * virtual position is at or above `scrollTop`. That's the header that
+     * should be pinned at the top of the listbox right now.
+     */
+    private updateStickyHeader;
+    /** Recursively keep only options whose value is in `selectedSet`; drop empty groups. */
+    private pruneTreeBySelection;
     private get hasActiveFilter();
     private renderEmptyState;
     private get isBidirectionalGrid();
     private get virtualRowCount();
     private get virtualColumnCount();
     private updateVirtualizerCount;
+    private lastVirtualizerGrouped;
     private getDisplayText;
     private getItemValue;
     private getSearchText;
@@ -273,6 +305,7 @@ export declare class NileCombobox extends NileElement implements NileFormControl
     private renderTrigger;
     private renderInlineTags;
     private renderClearButton;
+    private renderStickyHeaderOverlay;
     private renderListbox;
     private renderHorizontalListbox;
     private renderLoader;

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

@@ -30,6 +30,7 @@ import { ComboboxSelectionManager } from './selection-manager.js';
 import { ComboboxSearchManager } from './search-manager.js';
 import { ComboboxRenderer } from './renderer.js';
 import { ComboboxPortalManager } from './portal-manager.js';
+import { hasGroups, flattenRows, filterRows, getOptionRows } from './group-utils.js';
 import { VisibilityManager } from '../utilities/visibility-manager.js';
 /**
  * @summary A data-driven combobox with virtualized options, inline search, multi-select tags,
@@ -120,6 +121,14 @@ let NileCombobox = class NileCombobox extends NileElement {
         this.selectedOptions = [];
         /** The items displayed after filtering. Renderer reads from this. */
         this.filteredData = [];
+        /**
+         * Mixed (header + option) row list, only populated when `data` contains
+         * group entries (`type: 'group'`). When non-empty, the listbox renders from
+         * this instead of `filteredData`. `filteredData` stays in sync as the
+         * option-only projection so existing select-all / strict-match / etc. logic
+         * keeps working unchanged.
+         */
+        this.filteredRows = [];
         /** The complete unfiltered dataset (preserved for re-filtering). */
         this.originalData = [];
         this.showNoResults = false;
@@ -128,6 +137,12 @@ let NileCombobox = class NileCombobox extends NileElement {
         this.showSelectedOnly = false;
         this.selectAllChecked = false;
         this.selectAllIndeterminate = false;
+        /**
+         * Index into `filteredRows` of the group header that should be pinned at
+         * the top of the (virtualized) listbox right now. -1 means none.
+         * Recomputed on scroll.
+         */
+        this.stickyHeaderIndex = -1;
         // ── Public properties ──
         this.name = '';
         this.data = [];
@@ -169,6 +184,13 @@ let NileCombobox = class NileCombobox extends NileElement {
          * non-disabled options (respects the active search filter).
          */
         this.selectAllEnabled = false;
+        /**
+         * When true (default), data-driven group headers stick to the top of the
+         * listbox while scrolling through that group's options (Atlassian-style).
+         * Works in both plain and virtualized rendering modes. Set to false for
+         * inline-only headers that scroll away with their options.
+         */
+        this.stickyGroupHeader = true;
         this.portal = false;
         this.hoist = false;
         this.placement = 'bottom';
@@ -201,6 +223,7 @@ let NileCombobox = class NileCombobox extends NileElement {
         this.gridRows = 0;
         /** Width of each column in horizontal grid mode (px). */
         this.gridColumnWidth = 160;
+        this.lastVirtualizerGrouped = false;
     }
     // ── Accessors ──
     get validity() {
@@ -261,6 +284,51 @@ let NileCombobox = class NileCombobox extends NileElement {
     get isHorizontalGrid() {
         return this.gridRows > 0 && this.gridColumns <= 1;
     }
+    /** True when the source data contains at least one group entry. */
+    get hasGroupedData() {
+        const base = this.originalData.length > 0 ? this.originalData : this.data;
+        return hasGroups(base);
+    }
+    /**
+     * Walk filteredRows and find the index of the deepest group header whose
+     * virtual position is at or above `scrollTop`. That's the header that
+     * should be pinned at the top of the listbox right now.
+     */
+    updateStickyHeader(scrollTop) {
+        if (!this.stickyGroupHeader || !this.hasGroupedData) {
+            if (this.stickyHeaderIndex !== -1)
+                this.stickyHeaderIndex = -1;
+            return;
+        }
+        let offset = 0;
+        let stuck = -1;
+        for (let i = 0; i < this.filteredRows.length; i++) {
+            const row = this.filteredRows[i];
+            const size = row.kind === 'header' ? 32 : 38;
+            if (offset > scrollTop)
+                break;
+            if (row.kind === 'header')
+                stuck = i;
+            offset += size;
+        }
+        if (stuck !== this.stickyHeaderIndex)
+            this.stickyHeaderIndex = stuck;
+    }
+    /** Recursively keep only options whose value is in `selectedSet`; drop empty groups. */
+    pruneTreeBySelection(items, selectedSet) {
+        const out = [];
+        for (const item of items) {
+            if (item && typeof item === 'object' && item.type === 'group' && Array.isArray(item.options)) {
+                const kept = this.pruneTreeBySelection(item.options, selectedSet);
+                if (kept.length > 0)
+                    out.push({ ...item, options: kept });
+            }
+            else if (selectedSet.has(String(this.getItemValue(item)))) {
+                out.push(item);
+            }
+        }
+        return out;
+    }
     get hasActiveFilter() {
         return !!this.searchValue || this.showSelectedOnly;
     }
@@ -277,6 +345,9 @@ let NileCombobox = class NileCombobox extends NileElement {
         if (this.gridColumns > 1) {
             return Math.ceil(this.filteredData.length / this.gridColumns);
         }
+        if (this.hasGroupedData) {
+            return this.filteredRows.length;
+        }
         return this.filteredData.length;
     }
     get virtualColumnCount() {
@@ -298,12 +369,20 @@ let NileCombobox = class NileCombobox extends NileElement {
         else {
             const virtualizer = this.virtualizerCtrl.getVirtualizer();
             const count = this.virtualRowCount;
-            if (virtualizer.options.count !== count) {
+            const grouped = this.hasGroupedData;
+            const countChanged = virtualizer.options.count !== count;
+            const modeChanged = this.lastVirtualizerGrouped !== grouped;
+            if (countChanged || modeChanged) {
+                const estimateSize = grouped
+                    ? (index) => (this.filteredRows[index]?.kind === 'header' ? 32 : 38)
+                    : () => 38;
                 virtualizer.setOptions({
                     ...virtualizer.options,
                     count,
+                    estimateSize,
                 });
                 virtualizer.measure();
+                this.lastVirtualizerGrouped = grouped;
             }
         }
     }
@@ -334,7 +413,10 @@ let NileCombobox = class NileCombobox extends NileElement {
     }
     // ── Selection ──
     syncSelection() {
-        const items = this.originalData.length > 0 ? this.originalData : this.data;
+        const baseData = this.originalData.length > 0 ? this.originalData : this.data;
+        const items = this.hasGroupedData
+            ? getOptionRows(flattenRows(baseData)).map(r => r.item)
+            : baseData;
         this.selectedOptions = ComboboxSelectionManager.createOptionsFromValues(this.value, items, this.getDisplayText.bind(this), this.renderItemConfig?.getValue);
         if (!this.multiple) {
             const label = this.selectedOptions[0]?.getTextLabel() ?? '';
@@ -649,15 +731,34 @@ let NileCombobox = class NileCombobox extends NileElement {
     }
     filterOptions(search, preserveScroll = false) {
         const baseData = this.originalData.length > 0 ? this.originalData : this.data;
-        let source = baseData;
-        if (this.showSelectedOnly) {
-            const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
-            const selectedSet = new Set(selectedValues.map(v => String(v)));
-            source = baseData.filter((item) => selectedSet.has(String(this.getItemValue(item))));
+        if (this.hasGroupedData) {
+            // Grouped path: filter the tree, derive options-only projection.
+            let tree = baseData;
+            if (this.showSelectedOnly) {
+                const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
+                const selectedSet = new Set(selectedValues.map(v => String(v)));
+                tree = this.pruneTreeBySelection(baseData, selectedSet);
+            }
+            const { rows } = filterRows(tree, search, this.getSearchText.bind(this));
+            this.filteredRows = rows;
+            this.filteredData = getOptionRows(rows).map(r => r.item);
+            this.showNoResults = this.filteredData.length === 0;
+            // Recompute sticky header at current scroll (defaults to top on filter).
+            const st = this.scrollElementRef.value?.scrollTop ?? 0;
+            this.updateStickyHeader(st);
+        }
+        else {
+            let source = baseData;
+            if (this.showSelectedOnly) {
+                const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
+                const selectedSet = new Set(selectedValues.map(v => String(v)));
+                source = baseData.filter((item) => selectedSet.has(String(this.getItemValue(item))));
+            }
+            const { filteredItems, showNoResults } = this.searchManager.filter(search, source, this.getSearchText.bind(this));
+            this.filteredData = filteredItems;
+            this.filteredRows = [];
+            this.showNoResults = showNoResults;
         }
-        const { filteredItems, showNoResults } = this.searchManager.filter(search, source, this.getSearchText.bind(this));
-        this.filteredData = filteredItems;
-        this.showNoResults = showNoResults;
         this.portalManager.resetMeasuredHeight();
         if (!preserveScroll) {
             this.resetScrollPosition();
@@ -684,7 +785,10 @@ let NileCombobox = class NileCombobox extends NileElement {
             return;
         if (!this.multiple) {
             if (this.strict) {
-                const allItems = this.originalData.length > 0 ? this.originalData : this.data;
+                const baseData = this.originalData.length > 0 ? this.originalData : this.data;
+                const allItems = this.hasGroupedData
+                    ? getOptionRows(flattenRows(baseData)).map(r => r.item)
+                    : baseData;
                 const match = allItems.find((item) => this.getDisplayText(item).toLowerCase() === this.searchValue.toLowerCase());
                 if (match) {
                     const val = this.getItemValue(match);
@@ -812,26 +916,14 @@ let NileCombobox = class NileCombobox extends NileElement {
         if (this.selectedOptions.length === 0)
             return;
         this.showSelectedOnly = !this.showSelectedOnly;
-        if (this.showSelectedOnly) {
+        if (this.showSelectedOnly)
             this.searchValue = '';
-            const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
-            this.filteredData = this.originalData.filter((item) => {
-                const iv = this.getItemValue(item);
-                return selectedValues.some(val => String(val) === String(iv));
-            });
-        }
-        else {
-            this.filteredData = [...this.originalData];
-        }
-        this.portalManager.resetMeasuredHeight();
-        this.resetScrollPosition();
-        this.updateSelectAllState();
-        this.requestUpdate();
+        this.filterOptions(this.searchValue);
     }
     clearAll() {
         this.showSelectedOnly = false;
         this.value = this.multiple ? [] : '';
-        this.filteredData = [...this.originalData];
+        this.filterOptions('');
         this.syncSelection();
         this.emit('nile-change', { value: this.value, name: this.name });
         this.emit('nile-clear', { value: this.value, name: this.name });
@@ -839,9 +931,10 @@ let NileCombobox = class NileCombobox extends NileElement {
     }
     // ── Scroll ──
     onScroll(e) {
+        const target = e.target;
+        this.updateStickyHeader(target.scrollTop);
         if (this.showSelectedOnly)
             return;
-        const target = e.target;
         this.emit('nile-scroll', { scrollTop: target.scrollTop, scrollLeft: target.scrollLeft, name: this.name });
         if (!this.scrolling) {
             this.scrolling = true;
@@ -893,8 +986,14 @@ let NileCombobox = class NileCombobox extends NileElement {
         if (this.originalData.length === 0 && this.data.length > 0) {
             this.originalData = [...this.data];
         }
-        this.filteredData = [...(this.originalData.length > 0 ? this.originalData : this.data)];
-        this.showNoResults = this.filteredData.length === 0;
+        if (this.hasGroupedData) {
+            this.filterOptions(this.searchValue);
+        }
+        else {
+            this.filteredData = [...(this.originalData.length > 0 ? this.originalData : this.data)];
+            this.filteredRows = [];
+            this.showNoResults = this.filteredData.length === 0;
+        }
         await stopAnimations(this);
         if (this.popup?.popup) {
             this.popup.popup.style.visibility = 'hidden';
@@ -944,7 +1043,13 @@ let NileCombobox = class NileCombobox extends NileElement {
         if (this.data.length > 0 && !this.showSelectedOnly) {
             this.originalData = [...this.data];
         }
-        this.filteredData = [...this.data];
+        if (this.hasGroupedData) {
+            this.filterOptions(this.searchValue);
+        }
+        else {
+            this.filteredData = [...this.data];
+            this.filteredRows = [];
+        }
         this.syncSelection();
         this.updateSelectAllState();
         if (!this.optionsLoading && !this.loading && this.data.length === 0) {
@@ -1189,6 +1294,21 @@ let NileCombobox = class NileCombobox extends NileElement {
       </button>
     `;
     }
+    renderStickyHeaderOverlay(grouped, useVirtual) {
+        if (!this.stickyGroupHeader || !grouped || !useVirtual)
+            return html ``;
+        const idx = this.stickyHeaderIndex;
+        if (idx < 0 || idx >= this.filteredRows.length)
+            return html ``;
+        const row = this.filteredRows[idx];
+        if (row.kind !== 'header')
+            return html ``;
+        return html `
+      <div class="combobox__group-sticky-overlay">
+        ${ComboboxRenderer.renderGroupHeader(row)}
+      </div>
+    `;
+    }
     renderListbox() {
         const showAddOption = this.allowCustomValue
             && this.searchValue.trim()
@@ -1204,7 +1324,10 @@ let NileCombobox = class NileCombobox extends NileElement {
             return this.renderHorizontalListbox(!!showAddOption);
         }
         const isGrid = this.gridColumns > 1 || this.isBidirectionalGrid;
-        const useVirtual = ComboboxRenderer.shouldUseVirtualizer(this.filteredData, this.gridColumns);
+        const grouped = this.hasGroupedData && !isGrid;
+        const useVirtual = grouped
+            ? this.filteredRows.length >= 5
+            : ComboboxRenderer.shouldUseVirtualizer(this.filteredData, this.gridColumns);
         const virtualizer = this.virtualizerCtrl.getVirtualizer();
         const virtualItems = (useVirtual || isGrid) ? virtualizer.getVirtualItems() : [];
         const totalSize = (useVirtual || isGrid) ? virtualizer.getTotalSize() : 0;
@@ -1225,13 +1348,18 @@ let NileCombobox = class NileCombobox extends NileElement {
       >
         ${this.renderLoader()}
         ${this.renderSelectAll()}
+        ${this.renderStickyHeaderOverlay(grouped, useVirtual)}
         ${this.showNoResults && !this.optionsLoading && !this.loading
             ? this.renderEmptyState()
             : isGrid
                 ? ComboboxRenderer.renderVirtualizedGrid(virtualItems, totalSize, this.filteredData, this.value, this.multiple, this.gridColumns, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined, this.isBidirectionalGrid ? this.gridColumnWidth : undefined)
-                : useVirtual
-                    ? ComboboxRenderer.renderVirtualizedOptions(virtualItems, totalSize, this.filteredData, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, virtualizer.measureElement, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined)
-                    : ComboboxRenderer.renderPlainOptions(this.filteredData, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.showNoResults, this.noResultsMessage, this.optionsLoading || this.loading, this.onScroll.bind(this), this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined, undefined, this.hasActiveFilter ? this.noResultsSubtitle : undefined)}
+                : grouped
+                    ? (useVirtual
+                        ? ComboboxRenderer.renderRowsVirtualized(virtualItems, totalSize, this.filteredRows, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined)
+                        : ComboboxRenderer.renderRowsPlain(this.filteredRows, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.showNoResults, this.noResultsMessage, this.optionsLoading || this.loading, this.onScroll.bind(this), this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined, undefined, this.hasActiveFilter ? this.noResultsSubtitle : undefined))
+                    : useVirtual
+                        ? ComboboxRenderer.renderVirtualizedOptions(virtualItems, totalSize, this.filteredData, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, virtualizer.measureElement, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined)
+                        : ComboboxRenderer.renderPlainOptions(this.filteredData, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.showNoResults, this.noResultsMessage, this.optionsLoading || this.loading, this.onScroll.bind(this), this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined, undefined, this.hasActiveFilter ? this.noResultsSubtitle : undefined)}
         ${showAddOption ? html `
           <div @mouseup=${(e) => { e.stopPropagation(); this.addCustomValue(this.searchValue.trim()); }}>
             ${ComboboxRenderer.renderAddCustomOption(this.searchValue.trim(), this.multiple)}
@@ -1375,6 +1503,9 @@ __decorate([
 __decorate([
     state()
 ], NileCombobox.prototype, "filteredData", void 0);
+__decorate([
+    state()
+], NileCombobox.prototype, "filteredRows", void 0);
 __decorate([
     state()
 ], NileCombobox.prototype, "originalData", void 0);
@@ -1396,6 +1527,9 @@ __decorate([
 __decorate([
     state()
 ], NileCombobox.prototype, "selectAllIndeterminate", void 0);
+__decorate([
+    state()
+], NileCombobox.prototype, "stickyHeaderIndex", void 0);
 __decorate([
     property()
 ], NileCombobox.prototype, "name", void 0);
@@ -1470,6 +1604,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'select-all-enabled' })
 ], NileCombobox.prototype, "selectAllEnabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'sticky-group-header' })
+], NileCombobox.prototype, "stickyGroupHeader", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileCombobox.prototype, "portal", void 0);