@aquera/nile-elements 2.0.4 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/README.md +5 -0
  2. package/demo/nxtgen-classes.css +594 -0
  3. package/demo/nxtgen-dark.css +240 -21
  4. package/demo/nxtgen-utilities.css +594 -0
  5. package/demo/nxtgen.css +55 -0
  6. package/dist/index.js +51 -47
  7. package/dist/nile-combobox/nile-combobox.cjs.js +1 -1
  8. package/dist/nile-combobox/nile-combobox.cjs.js.map +1 -1
  9. package/dist/nile-combobox/nile-combobox.css.cjs.js +1 -1
  10. package/dist/nile-combobox/nile-combobox.css.cjs.js.map +1 -1
  11. package/dist/nile-combobox/nile-combobox.css.esm.js +28 -15
  12. package/dist/nile-combobox/nile-combobox.esm.js +11 -8
  13. package/dist/nile-combobox/portal-manager.cjs.js +1 -1
  14. package/dist/nile-combobox/portal-manager.cjs.js.map +1 -1
  15. package/dist/nile-combobox/portal-manager.esm.js +1 -1
  16. package/dist/nile-combobox/renderer.cjs.js +1 -1
  17. package/dist/nile-combobox/renderer.cjs.js.map +1 -1
  18. package/dist/nile-combobox/renderer.esm.js +31 -43
  19. package/dist/src/nile-combobox/nile-combobox.css.js +28 -15
  20. package/dist/src/nile-combobox/nile-combobox.css.js.map +1 -1
  21. package/dist/src/nile-combobox/nile-combobox.js +49 -10
  22. package/dist/src/nile-combobox/nile-combobox.js.map +1 -1
  23. package/dist/src/nile-combobox/portal-manager.js +2 -22
  24. package/dist/src/nile-combobox/portal-manager.js.map +1 -1
  25. package/dist/src/nile-combobox/renderer.d.ts +2 -3
  26. package/dist/src/nile-combobox/renderer.js +14 -45
  27. package/dist/src/nile-combobox/renderer.js.map +1 -1
  28. package/dist/src/version.d.ts +1 -1
  29. package/dist/src/version.js +11 -3
  30. package/dist/src/version.js.map +1 -1
  31. package/dist/tsconfig.tsbuildinfo +1 -1
  32. package/dist/version.cjs.js +1 -1
  33. package/dist/version.cjs.js.map +1 -1
  34. package/dist/version.esm.js +1 -1
  35. package/package.json +2 -1
  36. package/scripts/replace-version.cjs +12 -10
  37. package/src/nile-combobox/nile-combobox.css.ts +28 -15
  38. package/src/nile-combobox/nile-combobox.ts +61 -12
  39. package/src/nile-combobox/portal-manager.ts +4 -22
  40. package/src/nile-combobox/renderer.ts +26 -69
  41. package/src/version.ts +11 -2
package/dist/nile-combobox/nile-combobox.css.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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 /* \u2500\u2500 Form control \u2500\u2500 */\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 /* \u2500\u2500 Popup \u2500\u2500 */\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 /* \u2500\u2500 Trigger: outer row that never scrolls \u2500\u2500 */\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 /* \u2500\u2500 Inner area: holds tags + input \u2500\u2500 */\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 /* \u2500\u2500 Tags inside the scroll area \u2500\u2500 */\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 /* \u2500\u2500 Input wrapper inside scroll area \u2500\u2500 */\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 /* \u2500\u2500 Hidden form value input \u2500\u2500 */\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 /* \u2500\u2500 Action icons (clear, expand) \u2500\u2500 */\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 /* \u2500\u2500 Prefix / suffix \u2500\u2500 */\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 /* \u2500\u2500 Listbox (dropdown) \u2500\u2500 */\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 /* \u2500\u2500 Options \u2500\u2500 */\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 /* \u2500\u2500 Options (both virtual and plain) \u2500\u2500 */\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 /* \u2500\u2500 Top actions (Select All + Selected/All filter toggle) \u2500\u2500 */\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-900));\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 /* \u2500\u2500 Footer \u2500\u2500 */\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 /* \u2500\u2500 Loader \u2500\u2500 */\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 /* \u2500\u2500 Grid layout \u2500\u2500 */\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 /* \u2500\u2500 Bidirectional grid layout (vertical + horizontal scroll) \u2500\u2500 */\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 /* \u2500\u2500 Horizontal grid layout \u2500\u2500 */\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 /* \u2500\u2500 Group headers (data-driven grouping) \u2500\u2500 */\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 /* \u2500\u2500 Help / Error \u2500\u2500 */\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"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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 /* \u2500\u2500 Form control \u2500\u2500 */\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 /* \u2500\u2500 Popup \u2500\u2500 */\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 /* \u2500\u2500 Trigger: outer row that never scrolls \u2500\u2500 */\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 /* \u2500\u2500 Inner area: holds tags + input \u2500\u2500 */\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 /* \u2500\u2500 Tags inside the scroll area \u2500\u2500 */\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 /* \u2500\u2500 Input wrapper inside scroll area \u2500\u2500 */\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 /* \u2500\u2500 Hidden form value input \u2500\u2500 */\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 /* \u2500\u2500 Action icons (clear, expand) \u2500\u2500 */\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 /* \u2500\u2500 Prefix / suffix \u2500\u2500 */\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 /* \u2500\u2500 Listbox (dropdown) \u2500\u2500 */\n\n .combobox__listbox {\n display: flex;\n flex-direction: column;\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: 0;\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 overflow: hidden; /* Scrolling is handled by .combobox__options-scroll below */\n box-sizing: border-box;\n }\n\n .combobox__options-scroll {\n overflow-y: auto;\n flex: 0 1 auto;\n min-height: 0;\n }\n\n /* \u2500\u2500 Options \u2500\u2500 */\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 display: block;\n position: relative;\n width: 100%;\n padding-bottom: 0;\n box-sizing: border-box;\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 /* \u2500\u2500 Options (both virtual and plain) \u2500\u2500 */\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 /* \u2500\u2500 Top actions (Select All + Selected/All filter toggle) \u2500\u2500 */\n\n .combobox__top-actions {\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-900));\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 /* \u2500\u2500 Footer \u2500\u2500 */\n\n .combobox__footer {\n flex-shrink: 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: center;\n justify-content: space-between;\n padding: var(--nile-spacing-md, 8px) var(--nile-spacing-lg, 12px);\n margin-top: 0;\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 /* \u2500\u2500 Loader \u2500\u2500 */\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 /* \u2500\u2500 Grid layout \u2500\u2500 */\n\n :host([grid-columns]) .combobox__options-scroll {\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 /* \u2500\u2500 Bidirectional grid layout (vertical + horizontal scroll) \u2500\u2500 */\n\n .combobox__listbox.combobox__listbox--bidirectional {\n max-width: none;\n }\n\n .combobox__listbox--bidirectional .combobox__options-scroll {\n overflow: auto;\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 /* \u2500\u2500 Horizontal grid layout \u2500\u2500 */\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 /* \u2500\u2500 Group headers (data-driven grouping) \u2500\u2500 */\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 z-index: 3;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\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 height: 32px;\n overflow: hidden;\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 /* \u2500\u2500 Help / Error \u2500\u2500 */\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"]))));}};});
2
2
  //# sourceMappingURL=nile-combobox.css.cjs.js.map
package/dist/nile-combobox/nile-combobox.css.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-combobox.css.cjs.js","sources":["../../../src/nile-combobox/nile-combobox.css.ts"],"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-900));\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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTASaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-combobox.css.cjs.js","sources":["../../../src/nile-combobox/nile-combobox.css.ts"],"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: flex;\n flex-direction: column;\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: 0;\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 overflow: hidden; /* Scrolling is handled by .combobox__options-scroll below */\n box-sizing: border-box;\n }\n\n .combobox__options-scroll {\n overflow-y: auto;\n flex: 0 1 auto;\n min-height: 0;\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 display: block;\n position: relative;\n width: 100%;\n padding-bottom: 0;\n box-sizing: border-box;\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 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-900));\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 flex-shrink: 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: center;\n justify-content: space-between;\n padding: var(--nile-spacing-md, 8px) var(--nile-spacing-lg, 12px);\n margin-top: 0;\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__options-scroll {\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 max-width: none;\n }\n\n .combobox__listbox--bidirectional .combobox__options-scroll {\n overflow: auto;\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 z-index: 3;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\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 height: 32px;\n overflow: hidden;\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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTASaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
package/dist/nile-combobox/nile-combobox.css.esm.js CHANGED
@@ -341,20 +341,26 @@ import{css as o}from"lit";const r=o`
341
341
  /* ── Listbox (dropdown) ── */
342
342
 
343
343
  .combobox__listbox {
344
- display: block;
344
+ display: flex;
345
+ flex-direction: column;
345
346
  position: relative;
346
347
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
347
348
  font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
348
349
  background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
349
350
  border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
350
351
  border-radius: var(--nile-radius-sm, var(--ng-radius-md));
351
- padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));
352
- padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));
353
- overscroll-behavior: none;
354
- overflow-y: auto;
352
+ padding: 0;
355
353
  max-width: var(--auto-size-available-width);
356
354
  max-height: var(--auto-size-available-height);
357
355
  box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);
356
+ overflow: hidden; /* Scrolling is handled by .combobox__options-scroll below */
357
+ box-sizing: border-box;
358
+ }
359
+
360
+ .combobox__options-scroll {
361
+ overflow-y: auto;
362
+ flex: 0 1 auto;
363
+ min-height: 0;
358
364
  }
359
365
 
360
366
  /* ── Options ── */
@@ -362,7 +368,11 @@ import{css as o}from"lit";const r=o`
362
368
  .combobox__options {
363
369
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
364
370
  color: rgb(133, 129, 129);
371
+ display: block;
372
+ position: relative;
365
373
  width: 100%;
374
+ padding-bottom: 0;
375
+ box-sizing: border-box;
366
376
  }
367
377
 
368
378
  .combobox__options.loading {
@@ -416,9 +426,6 @@ import{css as o}from"lit";const r=o`
416
426
  /* ── Top actions (Select All + Selected/All filter toggle) ── */
417
427
 
418
428
  .combobox__top-actions {
419
- position: sticky;
420
- top: 0;
421
- z-index: 2;
422
429
  display: flex;
423
430
  flex-direction: row;
424
431
  align-items: center;
@@ -473,16 +480,15 @@ import{css as o}from"lit";const r=o`
473
480
  /* ── Footer ── */
474
481
 
475
482
  .combobox__footer {
476
- position: sticky;
477
- bottom: 0;
483
+ flex-shrink: 0;
478
484
  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
479
485
  border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
480
486
  display: flex;
481
487
  flex-direction: row;
482
- align-items: flex-start;
483
- 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));
484
- gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
488
+ align-items: center;
485
489
  justify-content: space-between;
490
+ padding: var(--nile-spacing-md, 8px) var(--nile-spacing-lg, 12px);
491
+ margin-top: 0;
486
492
  }
487
493
 
488
494
  .combobox__footer.loading {
@@ -540,7 +546,7 @@ import{css as o}from"lit";const r=o`
540
546
 
541
547
  /* ── Grid layout ── */
542
548
 
543
- :host([grid-columns]) .combobox__listbox {
549
+ :host([grid-columns]) .combobox__options-scroll {
544
550
  overflow-y: auto;
545
551
  }
546
552
 
@@ -560,8 +566,11 @@ import{css as o}from"lit";const r=o`
560
566
  /* ── Bidirectional grid layout (vertical + horizontal scroll) ── */
561
567
 
562
568
  .combobox__listbox.combobox__listbox--bidirectional {
563
- overflow: auto;
564
569
  max-width: none;
570
+ }
571
+
572
+ .combobox__listbox--bidirectional .combobox__options-scroll {
573
+ overflow: auto;
565
574
  scrollbar-width: thin;
566
575
  scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;
567
576
  }
@@ -645,6 +654,8 @@ import{css as o}from"lit";const r=o`
645
654
  * header (computed on scroll). */
646
655
  .combobox__group-header-slot {
647
656
  pointer-events: none;
657
+ z-index: 3;
658
+ background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
648
659
  }
649
660
  .combobox__group-header-slot .combobox__group-header {
650
661
  height: 100%;
@@ -656,6 +667,8 @@ import{css as o}from"lit";const r=o`
656
667
  top: 0;
657
668
  z-index: 2;
658
669
  pointer-events: none;
670
+ height: 32px;
671
+ overflow: hidden;
659
672
  }
660
673
  .combobox__group-sticky-overlay .combobox__group-header {
661
674
  box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));