@aquera/nile-elements 1.7.2 → 1.7.4

package/dist/nile-lite-tooltip/nile-lite-tooltip.cjs.js

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit/decorators.js","./nile-lite-tooltip.css.cjs.js","../internal/nile-element.cjs.js","../tippy.esm-78baa8f2.cjs.js","./utils.cjs.js","../utilities/visibility-manager.cjs.js","lit","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,i,e,s,o,n,h,r,a,l,c,d,p;function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable;})),t.push.apply(t,o);}return t;}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r));});}return e;}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e;}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_litDecoratorsJs){i=_litDecoratorsJs.property;e=_litDecoratorsJs.customElement;},function(_nileLiteTooltipCssCjsJs){s=_nileLiteTooltipCssCjsJs.s;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;},function(_tippyEsm005CjsJs){n=_tippyEsm005CjsJs.R;h=_tippyEsm005CjsJs.f;r=_tippyEsm005CjsJs.t;a=_tippyEsm005CjsJs.c;},function(_utilsCjsJs){l=_utilsCjsJs.p;c=_utilsCjsJs.a;},function(_utilitiesVisibilityManagerCjsJs){d=_utilitiesVisibilityManagerCjsJs.V;},function(_lit){},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",p=/*#__PURE__*/function(_o){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p),_this["for"]=null,_this.content="",_this.size="small",_this.duration=200,_this.interactive=!1,_this.placement="top",_this.disabled=!1,_this.distance=8,_this.skidding=0,_this.open=!1,_this.trigger="mouseenter focus",_this.allowHTML=!1,_this.followCursor=!1,_this.arrow="default",_this.singleton=!1,_this.enableRecursiveMode=!1,_this.delay=0,_this.maxWidth="auto",_this.zIndex=9999,_this.hideOnClick=!0,_this.inertia=!1,_this.interactiveBorder=2,_this.enableVisibilityEffect=!1,_this.enableTabClose=!1;return _this;}_inherits(p,_o);return _createClass(p,[{key:"createRenderRoot",value:function createRenderRoot(){return this;}},{key:"firstUpdated",value:function firstUpdated(){var _this2=this;this.attachTooltip();var t=this["for"]&&document.getElementById(this["for"])||this.firstElementChild;this.visibilityManager=new d({host:this,target:t,enableVisibilityEffect:this.enableVisibilityEffect,enableTabClose:this.enableTabClose,isOpen:function isOpen(){return _this2.open;},onAnchorOutOfView:function onAnchorOutOfView(){_this2.open=!1,_this2.hideAllTooltips(),_this2.emit("nile-visibility-change",{visible:!1,reason:"anchor-out-of-view"});},onDocumentHidden:function onDocumentHidden(){_this2.open=!1,_this2.hideAllTooltips(),_this2.emit("nile-visibility-change",{visible:!1,reason:"document-hidden"});},emit:function emit(t,i){return _this2.emit("nile-".concat(t),i);}});}},{key:"refresh",value:function refresh(){this.attachTooltip();}},{key:"hasValidContent",value:function hasValidContent(){var _ref,_this$content;var t=(_ref=(_this$content=this.content)!==null&&_this$content!==void 0?_this$content:this.getAttribute("data-tippy-content"))!==null&&_ref!==void 0?_ref:"";return"string"==typeof t&&t.trim().length>0;}},{key:"attachTooltip",value:function attachTooltip(){var _this3=this;if(this.destroyTooltips(),this.disabled||!this.enableRecursiveMode&&!this.singleton&&!this.hasValidContent())return;var t={content:this.content||this.getAttribute("data-tippy-content")||void 0,placement:this.placement,trigger:this.trigger,offset:[this.skidding,this.distance],theme:"lite",animation:"fade",interactive:this.interactive,arrow:n,duration:l(this.duration),allowHTML:this.allowHTML,delay:this.delay,maxWidth:this.maxWidth,zIndex:this.zIndex,hideOnClick:!1,inertia:this.inertia,interactiveBorder:this.interactiveBorder,appendTo:document.body,followCursor:c(this.followCursor),plugins:c(this.followCursor)?[h]:[],onShow:function onShow(t){_this3.open=!0;var i=t.popper.querySelector(".tippy-content");i&&(_this3.width&&(i.style.width=_this3.width),_this3.height&&(i.style.height=_this3.height,i.style.overflow="auto")),_this3.dispatchEvent(new CustomEvent("nile-show",{detail:{instance:t,target:t.reference}})),_this3.dispatchEvent(new CustomEvent("nile-toggle",{detail:{open:!0,instance:t,target:t.reference}}));},onHide:function onHide(t){_this3.open=!1,_this3.dispatchEvent(new CustomEvent("nile-hide",{detail:{instance:t,target:t.reference}})),_this3.dispatchEvent(new CustomEvent("nile-toggle",{detail:{open:!1,instance:t,target:t.reference}}));}};if(this["for"]){var _this$singleInstance$;if(this.singleton&&!this["for"].startsWith("#")&&!document.getElementById(this["for"])){var _i=Array.from(document.querySelectorAll(".".concat(this["for"])));if(_i.length>0)return this.tooltipInstances=_i.map(function(i){var _e$popper$querySelect;var e=r(i,_objectSpread(_objectSpread({},t),{},{content:i.getAttribute("content")||_this3.content}));return(_e$popper$querySelect=e.popper.querySelector(".tippy-box"))!==null&&_e$popper$querySelect!==void 0&&_e$popper$querySelect.classList.add(_this3.size),e;}),this.singletonInstance=a(this.tooltipInstances,{delay:[75,0],arrow:n,moveTransition:"transform 0.15s ease-out"}),void(this.open&&queueMicrotask(function(){var _this3$singletonInsta;return(_this3$singletonInsta=_this3.singletonInstance)===null||_this3$singletonInsta===void 0?void 0:_this3$singletonInsta.show();}));}var _i2=document.getElementById(this["for"]);if(this.singleton&&_i2){var _e=Array.from(_i2.querySelectorAll("[content]"));if(_e.length>0)return this.tooltipInstances=_e.map(function(i){var _e$popper$querySelect2;var e=r(i,_objectSpread(_objectSpread({},t),{},{content:i.getAttribute("content")||_this3.content}));return(_e$popper$querySelect2=e.popper.querySelector(".tippy-box"))!==null&&_e$popper$querySelect2!==void 0&&_e$popper$querySelect2.classList.add(_this3.size),e;}),this.singletonInstance=a(this.tooltipInstances,{delay:[75,0],arrow:n,moveTransition:"transform 0.15s ease-out"}),void(this.open&&queueMicrotask(function(){var _this3$singletonInsta2;return(_this3$singletonInsta2=_this3.singletonInstance)===null||_this3$singletonInsta2===void 0?void 0:_this3$singletonInsta2.show();}));}if(this.targetEl=document.getElementById(this["for"]),!this.targetEl)return;this.id||(this.generatedId="nile-tooltip-".concat(Math.random().toString(36).slice(2,9)),this.id=this.generatedId),this.prevDescribedby=this.targetEl.getAttribute("aria-describedby");var _e2=this.prevDescribedby?"".concat(this.prevDescribedby," ").concat(this.id):this.id;return this.targetEl.setAttribute("aria-describedby",_e2),this.singleInstance=r(this.targetEl,t),this.size&&(_this$singleInstance$=this.singleInstance.popper.querySelector(".tippy-box"))!==null&&_this$singleInstance$!==void 0&&_this$singleInstance$.classList.add(this.size),void(this.open&&queueMicrotask(function(){var _this3$singleInstance;return(_this3$singleInstance=_this3.singleInstance)===null||_this3$singleInstance===void 0?void 0:_this3$singleInstance.show();}));}if(this.enableRecursiveMode){var _i3=Array.from(this.querySelectorAll("[content]")).filter(function(t){var i=t.getAttribute("content");return null!==i&&i.trim().length>0;});_i3.length>0&&(this.tooltipInstances=_i3.map(function(i){var _o$popper$querySelect;var e=i,s=e.getAttribute("content")||_this3.content,o=r(e,_objectSpread(_objectSpread({},t),{},{content:s}));return(_o$popper$querySelect=o.popper.querySelector(".tippy-box"))!==null&&_o$popper$querySelect!==void 0&&_o$popper$querySelect.classList.add(_this3.size),o;}),this.singleton&&this.tooltipInstances.length>1&&(this.singletonInstance=a(this.tooltipInstances,{delay:[75,0],arrow:n,moveTransition:"transform 0.15s ease-out"})),this.open&&(this.singletonInstance?this.singletonInstance.show():this.tooltipInstances.forEach(function(t){return t.show();})));}else{var _i4=this.firstElementChild;if(_i4){var _s$popper$querySelect;var _e3=_i4.getAttribute("content")||this.content,_s=r(_i4,_objectSpread(_objectSpread({},t),{},{content:_e3}));(_s$popper$querySelect=_s.popper.querySelector(".tippy-box"))!==null&&_s$popper$querySelect!==void 0&&_s$popper$querySelect.classList.add(this.size),this.tooltipInstances=[_s],this.open&&_s.show();}}}},{key:"destroyTooltips",value:function destroyTooltips(){var _this$tooltipInstance,_this$singleInstance,_this$singletonInstan,_this4=this;if((_this$tooltipInstance=this.tooltipInstances)!==null&&_this$tooltipInstance!==void 0&&_this$tooltipInstance.forEach(function(t){return t.destroy();}),(_this$singleInstance=this.singleInstance)!==null&&_this$singleInstance!==void 0&&_this$singleInstance.destroy(),(_this$singletonInstan=this.singletonInstance)!==null&&_this$singletonInstan!==void 0&&_this$singletonInstan.destroy(),this.tooltipInstances=void 0,this.singleInstance=void 0,this.singletonInstance=void 0,this.targetEl&&this.id){var _this$targetEl$getAtt;var _t=(_this$targetEl$getAtt=this.targetEl.getAttribute("aria-describedby"))===null||_this$targetEl$getAtt===void 0?void 0:_this$targetEl$getAtt.split(" ").filter(function(t){return t!==_this4.id;}).join(" ").trim();_t?this.targetEl.setAttribute("aria-describedby",_t):this.targetEl.removeAttribute("aria-describedby");}}},{key:"hideAllTooltips",value:function hideAllTooltips(){var _this$singleInstance2,_this$singletonInstan2,_this$tooltipInstance2;(_this$singleInstance2=this.singleInstance)!==null&&_this$singleInstance2!==void 0&&_this$singleInstance2.hide(),(_this$singletonInstan2=this.singletonInstance)!==null&&_this$singletonInstan2!==void 0&&_this$singletonInstan2.hide(),(_this$tooltipInstance2=this.tooltipInstances)===null||_this$tooltipInstance2===void 0?void 0:_this$tooltipInstance2.forEach(function(t){return t.hide();});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this$visibilityManag;_superPropGet(p,"disconnectedCallback",this,3)([]),(_this$visibilityManag=this.visibilityManager)!==null&&_this$visibilityManag!==void 0&&_this$visibilityManag.cleanup(),this.destroyTooltips();}},{key:"updated",value:function updated(t){var _this$visibilityManag2,_this$singleInstance3,_this$singletonInstan3,_this$tooltipInstance3,_this$visibilityManag3,_this$singleInstance4,_this$singletonInstan4,_this$tooltipInstance4;_superPropGet(p,"updated",this,3)([t]),["for","content","placement","distance","skidding","trigger","disabled","hoist","size","arrow","singleton"].some(function(i){return t.has(i);})&&this.attachTooltip(),t.has("open")&&(this.open?((_this$visibilityManag2=this.visibilityManager)!==null&&_this$visibilityManag2!==void 0&&_this$visibilityManag2.setup(),(_this$singleInstance3=this.singleInstance)!==null&&_this$singleInstance3!==void 0&&_this$singleInstance3.show(),(_this$singletonInstan3=this.singletonInstance)!==null&&_this$singletonInstan3!==void 0&&_this$singletonInstan3.show(),(_this$tooltipInstance3=this.tooltipInstances)===null||_this$tooltipInstance3===void 0?void 0:_this$tooltipInstance3.forEach(function(t){return t.show();})):((_this$visibilityManag3=this.visibilityManager)!==null&&_this$visibilityManag3!==void 0&&_this$visibilityManag3.cleanup(),(_this$singleInstance4=this.singleInstance)!==null&&_this$singleInstance4!==void 0&&_this$singleInstance4.hide(),(_this$singletonInstan4=this.singletonInstance)!==null&&_this$singletonInstan4!==void 0&&_this$singletonInstan4.hide(),(_this$tooltipInstance4=this.tooltipInstances)===null||_this$tooltipInstance4===void 0?void 0:_this$tooltipInstance4.forEach(function(t){return t.hide();})));}}],[{key:"styles",get:function get(){return[s];}}]);}(o));t([i({type:String,attribute:"for"})],p.prototype,"for",void 0),t([i({type:String,reflect:!0})],p.prototype,"content",void 0),t([i({type:String,reflect:!0})],p.prototype,"size",void 0),t([i({type:String,reflect:!0})],p.prototype,"duration",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"interactive",void 0),t([i({type:String})],p.prototype,"placement",void 0),t([i({type:Boolean})],p.prototype,"disabled",void 0),t([i({type:Number})],p.prototype,"distance",void 0),t([i({type:Number})],p.prototype,"skidding",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"open",void 0),t([i({type:String})],p.prototype,"trigger",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"allowHTML",void 0),t([i({type:String,reflect:!0,attribute:!0})],p.prototype,"followCursor",void 0),t([i({type:String,reflect:!0,attribute:!0})],p.prototype,"arrow",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"singleton",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"enableRecursiveMode",void 0),t([i({type:String,reflect:!0})],p.prototype,"delay",void 0),t([i({type:String,reflect:!0})],p.prototype,"maxWidth",void 0),t([i({type:Number})],p.prototype,"zIndex",void 0),t([i({type:[Boolean,String],reflect:!0})],p.prototype,"hideOnClick",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"inertia",void 0),t([i({type:Number})],p.prototype,"interactiveBorder",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"enableVisibilityEffect",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"enableTabClose",void 0),t([i({type:String,reflect:!0})],p.prototype,"width",void 0),t([i({type:String,reflect:!0})],p.prototype,"height",void 0),_export("N",p=t([e("nile-lite-tooltip")],p));}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit/decorators.js","./nile-lite-tooltip.css.cjs.js","../internal/nile-element.cjs.js","../tippy.esm-78baa8f2.cjs.js","./utils.cjs.js","../utilities/visibility-manager.cjs.js","lit","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,i,e,s,o,n,h,r,a,l,c,d,p;function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable;})),t.push.apply(t,o);}return t;}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r));});}return e;}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e;}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_litDecoratorsJs){i=_litDecoratorsJs.property;e=_litDecoratorsJs.customElement;},function(_nileLiteTooltipCssCjsJs){s=_nileLiteTooltipCssCjsJs.s;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;},function(_tippyEsm006CjsJs){n=_tippyEsm006CjsJs.R;h=_tippyEsm006CjsJs.f;r=_tippyEsm006CjsJs.t;a=_tippyEsm006CjsJs.c;},function(_utilsCjsJs){l=_utilsCjsJs.p;c=_utilsCjsJs.a;},function(_utilitiesVisibilityManagerCjsJs){d=_utilitiesVisibilityManagerCjsJs.V;},function(_lit){},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",p=/*#__PURE__*/function(_o){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p),_this["for"]=null,_this.content="",_this.size="small",_this.duration=200,_this.interactive=!1,_this.placement="top",_this.disabled=!1,_this.distance=8,_this.skidding=0,_this.open=!1,_this.trigger="mouseenter focus",_this.allowHTML=!1,_this.followCursor=!1,_this.arrow="default",_this.singleton=!1,_this.enableRecursiveMode=!1,_this.delay=0,_this.maxWidth="auto",_this.zIndex=9999,_this.hideOnClick=!0,_this.inertia=!1,_this.interactiveBorder=2,_this.enableVisibilityEffect=!1,_this.enableTabClose=!1;return _this;}_inherits(p,_o);return _createClass(p,[{key:"createRenderRoot",value:function createRenderRoot(){return this;}},{key:"firstUpdated",value:function firstUpdated(){var _this2=this;this.attachTooltip();var t=this["for"]&&document.getElementById(this["for"])||this.firstElementChild;this.visibilityManager=new d({host:this,target:t,enableVisibilityEffect:this.enableVisibilityEffect,enableTabClose:this.enableTabClose,isOpen:function isOpen(){return _this2.open;},onAnchorOutOfView:function onAnchorOutOfView(){_this2.open=!1,_this2.hideAllTooltips(),_this2.emit("nile-visibility-change",{visible:!1,reason:"anchor-out-of-view"});},onDocumentHidden:function onDocumentHidden(){_this2.open=!1,_this2.hideAllTooltips(),_this2.emit("nile-visibility-change",{visible:!1,reason:"document-hidden"});},emit:function emit(t,i){return _this2.emit("nile-".concat(t),i);}});}},{key:"refresh",value:function refresh(){this.attachTooltip();}},{key:"hasValidContent",value:function hasValidContent(){var _ref,_this$content;var t=(_ref=(_this$content=this.content)!==null&&_this$content!==void 0?_this$content:this.getAttribute("data-tippy-content"))!==null&&_ref!==void 0?_ref:"";return"string"==typeof t&&t.trim().length>0;}},{key:"attachTooltip",value:function attachTooltip(){var _this3=this;if(this.destroyTooltips(),this.disabled||!this.enableRecursiveMode&&!this.singleton&&!this.hasValidContent())return;var t={content:this.content||this.getAttribute("data-tippy-content")||void 0,placement:this.placement,trigger:this.trigger,offset:[this.skidding,this.distance],theme:"lite",animation:"fade",interactive:this.interactive,arrow:n,duration:l(this.duration),allowHTML:this.allowHTML,delay:this.delay,maxWidth:this.maxWidth,zIndex:this.zIndex,hideOnClick:!1,inertia:this.inertia,interactiveBorder:this.interactiveBorder,appendTo:document.body,followCursor:c(this.followCursor),plugins:c(this.followCursor)?[h]:[],onShow:function onShow(t){_this3.open=!0;var i=t.popper.querySelector(".tippy-content");i&&(_this3.width&&(i.style.width=_this3.width),_this3.height&&(i.style.height=_this3.height,i.style.overflow="auto")),_this3.dispatchEvent(new CustomEvent("nile-show",{detail:{instance:t,target:t.reference}})),_this3.dispatchEvent(new CustomEvent("nile-toggle",{detail:{open:!0,instance:t,target:t.reference}}));},onHide:function onHide(t){_this3.open=!1,_this3.dispatchEvent(new CustomEvent("nile-hide",{detail:{instance:t,target:t.reference}})),_this3.dispatchEvent(new CustomEvent("nile-toggle",{detail:{open:!1,instance:t,target:t.reference}}));}};if(this["for"]){var _this$singleInstance$;if(this.singleton&&!this["for"].startsWith("#")&&!document.getElementById(this["for"])){var _i=Array.from(document.querySelectorAll(".".concat(this["for"])));if(_i.length>0)return this.tooltipInstances=_i.map(function(i){var _e$popper$querySelect;var e=r(i,_objectSpread(_objectSpread({},t),{},{content:i.getAttribute("content")||_this3.content}));return(_e$popper$querySelect=e.popper.querySelector(".tippy-box"))!==null&&_e$popper$querySelect!==void 0&&_e$popper$querySelect.classList.add(_this3.size),e;}),this.singletonInstance=a(this.tooltipInstances,{delay:[75,0],arrow:n,moveTransition:"transform 0.15s ease-out"}),void(this.open&&queueMicrotask(function(){var _this3$singletonInsta;return(_this3$singletonInsta=_this3.singletonInstance)===null||_this3$singletonInsta===void 0?void 0:_this3$singletonInsta.show();}));}var _i2=document.getElementById(this["for"]);if(this.singleton&&_i2){var _e=Array.from(_i2.querySelectorAll("[content]"));if(_e.length>0)return this.tooltipInstances=_e.map(function(i){var _e$popper$querySelect2;var e=r(i,_objectSpread(_objectSpread({},t),{},{content:i.getAttribute("content")||_this3.content}));return(_e$popper$querySelect2=e.popper.querySelector(".tippy-box"))!==null&&_e$popper$querySelect2!==void 0&&_e$popper$querySelect2.classList.add(_this3.size),e;}),this.singletonInstance=a(this.tooltipInstances,{delay:[75,0],arrow:n,moveTransition:"transform 0.15s ease-out"}),void(this.open&&queueMicrotask(function(){var _this3$singletonInsta2;return(_this3$singletonInsta2=_this3.singletonInstance)===null||_this3$singletonInsta2===void 0?void 0:_this3$singletonInsta2.show();}));}if(this.targetEl=document.getElementById(this["for"]),!this.targetEl)return;this.id||(this.generatedId="nile-tooltip-".concat(Math.random().toString(36).slice(2,9)),this.id=this.generatedId),this.prevDescribedby=this.targetEl.getAttribute("aria-describedby");var _e2=this.prevDescribedby?"".concat(this.prevDescribedby," ").concat(this.id):this.id;return this.targetEl.setAttribute("aria-describedby",_e2),this.singleInstance=r(this.targetEl,t),this.size&&(_this$singleInstance$=this.singleInstance.popper.querySelector(".tippy-box"))!==null&&_this$singleInstance$!==void 0&&_this$singleInstance$.classList.add(this.size),void(this.open&&queueMicrotask(function(){var _this3$singleInstance;return(_this3$singleInstance=_this3.singleInstance)===null||_this3$singleInstance===void 0?void 0:_this3$singleInstance.show();}));}if(this.enableRecursiveMode){var _i3=Array.from(this.querySelectorAll("[content]")).filter(function(t){var i=t.getAttribute("content");return null!==i&&i.trim().length>0;});_i3.length>0&&(this.tooltipInstances=_i3.map(function(i){var _o$popper$querySelect;var e=i,s=e.getAttribute("content")||_this3.content,o=r(e,_objectSpread(_objectSpread({},t),{},{content:s}));return(_o$popper$querySelect=o.popper.querySelector(".tippy-box"))!==null&&_o$popper$querySelect!==void 0&&_o$popper$querySelect.classList.add(_this3.size),o;}),this.singleton&&this.tooltipInstances.length>1&&(this.singletonInstance=a(this.tooltipInstances,{delay:[75,0],arrow:n,moveTransition:"transform 0.15s ease-out"})),this.open&&(this.singletonInstance?this.singletonInstance.show():this.tooltipInstances.forEach(function(t){return t.show();})));}else{var _i4=this.firstElementChild;if(_i4){var _s$popper$querySelect;var _e3=_i4.getAttribute("content")||this.content,_s=r(_i4,_objectSpread(_objectSpread({},t),{},{content:_e3}));(_s$popper$querySelect=_s.popper.querySelector(".tippy-box"))!==null&&_s$popper$querySelect!==void 0&&_s$popper$querySelect.classList.add(this.size),this.tooltipInstances=[_s],this.open&&_s.show();}}}},{key:"destroyTooltips",value:function destroyTooltips(){var _this$tooltipInstance,_this$singleInstance,_this$singletonInstan,_this4=this;if((_this$tooltipInstance=this.tooltipInstances)!==null&&_this$tooltipInstance!==void 0&&_this$tooltipInstance.forEach(function(t){return t.destroy();}),(_this$singleInstance=this.singleInstance)!==null&&_this$singleInstance!==void 0&&_this$singleInstance.destroy(),(_this$singletonInstan=this.singletonInstance)!==null&&_this$singletonInstan!==void 0&&_this$singletonInstan.destroy(),this.tooltipInstances=void 0,this.singleInstance=void 0,this.singletonInstance=void 0,this.targetEl&&this.id){var _this$targetEl$getAtt;var _t=(_this$targetEl$getAtt=this.targetEl.getAttribute("aria-describedby"))===null||_this$targetEl$getAtt===void 0?void 0:_this$targetEl$getAtt.split(" ").filter(function(t){return t!==_this4.id;}).join(" ").trim();_t?this.targetEl.setAttribute("aria-describedby",_t):this.targetEl.removeAttribute("aria-describedby");}}},{key:"hideAllTooltips",value:function hideAllTooltips(){var _this$singleInstance2,_this$singletonInstan2,_this$tooltipInstance2;(_this$singleInstance2=this.singleInstance)!==null&&_this$singleInstance2!==void 0&&_this$singleInstance2.hide(),(_this$singletonInstan2=this.singletonInstance)!==null&&_this$singletonInstan2!==void 0&&_this$singletonInstan2.hide(),(_this$tooltipInstance2=this.tooltipInstances)===null||_this$tooltipInstance2===void 0?void 0:_this$tooltipInstance2.forEach(function(t){return t.hide();});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this$visibilityManag;_superPropGet(p,"disconnectedCallback",this,3)([]),(_this$visibilityManag=this.visibilityManager)!==null&&_this$visibilityManag!==void 0&&_this$visibilityManag.cleanup(),this.destroyTooltips();}},{key:"updated",value:function updated(t){var _this$visibilityManag2,_this$singleInstance3,_this$singletonInstan3,_this$tooltipInstance3,_this$visibilityManag3,_this$singleInstance4,_this$singletonInstan4,_this$tooltipInstance4;_superPropGet(p,"updated",this,3)([t]),["for","content","placement","distance","skidding","trigger","disabled","hoist","size","arrow","singleton"].some(function(i){return t.has(i);})&&this.attachTooltip(),t.has("open")&&(this.open?((_this$visibilityManag2=this.visibilityManager)!==null&&_this$visibilityManag2!==void 0&&_this$visibilityManag2.setup(),(_this$singleInstance3=this.singleInstance)!==null&&_this$singleInstance3!==void 0&&_this$singleInstance3.show(),(_this$singletonInstan3=this.singletonInstance)!==null&&_this$singletonInstan3!==void 0&&_this$singletonInstan3.show(),(_this$tooltipInstance3=this.tooltipInstances)===null||_this$tooltipInstance3===void 0?void 0:_this$tooltipInstance3.forEach(function(t){return t.show();})):((_this$visibilityManag3=this.visibilityManager)!==null&&_this$visibilityManag3!==void 0&&_this$visibilityManag3.cleanup(),(_this$singleInstance4=this.singleInstance)!==null&&_this$singleInstance4!==void 0&&_this$singleInstance4.hide(),(_this$singletonInstan4=this.singletonInstance)!==null&&_this$singletonInstan4!==void 0&&_this$singletonInstan4.hide(),(_this$tooltipInstance4=this.tooltipInstances)===null||_this$tooltipInstance4===void 0?void 0:_this$tooltipInstance4.forEach(function(t){return t.hide();})));}}],[{key:"styles",get:function get(){return[s];}}]);}(o));t([i({type:String,attribute:"for"})],p.prototype,"for",void 0),t([i({type:String,reflect:!0})],p.prototype,"content",void 0),t([i({type:String,reflect:!0})],p.prototype,"size",void 0),t([i({type:String,reflect:!0})],p.prototype,"duration",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"interactive",void 0),t([i({type:String})],p.prototype,"placement",void 0),t([i({type:Boolean})],p.prototype,"disabled",void 0),t([i({type:Number})],p.prototype,"distance",void 0),t([i({type:Number})],p.prototype,"skidding",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"open",void 0),t([i({type:String})],p.prototype,"trigger",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"allowHTML",void 0),t([i({type:String,reflect:!0,attribute:!0})],p.prototype,"followCursor",void 0),t([i({type:String,reflect:!0,attribute:!0})],p.prototype,"arrow",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"singleton",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"enableRecursiveMode",void 0),t([i({type:String,reflect:!0})],p.prototype,"delay",void 0),t([i({type:String,reflect:!0})],p.prototype,"maxWidth",void 0),t([i({type:Number})],p.prototype,"zIndex",void 0),t([i({type:[Boolean,String],reflect:!0})],p.prototype,"hideOnClick",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"inertia",void 0),t([i({type:Number})],p.prototype,"interactiveBorder",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"enableVisibilityEffect",void 0),t([i({type:Boolean,reflect:!0})],p.prototype,"enableTabClose",void 0),t([i({type:String,reflect:!0})],p.prototype,"width",void 0),t([i({type:String,reflect:!0})],p.prototype,"height",void 0),_export("N",p=t([e("nile-lite-tooltip")],p));}};});
 //# sourceMappingURL=nile-lite-tooltip.cjs.js.map

package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.js

@@ -44,13 +44,15 @@ let NileBreadcrumbItem = class NileBreadcrumbItem extends NileElement {
     }
     render() {
         return html `
-      <slot
+    <div part="item"
         class=${classMap({
             'nile-breadcrumb-item__slot-text': !this.isLast,
             'nile-breadcrumb-item__last-slot-text': this.isLast,
         })}
         @click=${this.handleClick}
-      ></slot>
+        >
+        <slot></slot>
+      </div>
       <nile-icon
         name=${this.separator}
         aria-label=${this.separator}

package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-breadcrumb-item.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD;;;;;GAKG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IAA5C;;QASY,WAAM,GAAG,KAAK,CAAC;QAEhC,gBAAgB;QAEhB,qBAAqB;QAErB;;;WAGG;QAEyB,cAAS,GAAG,4DAA4D,CAAC;QAgCrG,gBAAgB;IAClB,CAAC;IApDC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAeO,WAAW;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/B,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,iCAAiC,EAAE,CAAC,IAAI,CAAC,MAAM;YAC/C,sCAAsC,EAAE,IAAI,CAAC,MAAM;SACpD,CAAC;iBACO,IAAI,CAAC,WAAW;;;eAGlB,IAAI,CAAC,SAAS;qBACR,IAAI,CAAC,SAAS;;;gBAGnB,QAAQ,CAAC;YACf,6BAA6B,EAAE,IAAI;YACnC,oCAAoC,EAAE,IAAI,CAAC,MAAM;SAClD,CAAC;;;KAGL,CAAC;IACJ,CAAC;CAGF,CAAA;AA5CkB;IAAhB,KAAK,EAAE;kDAAwB;AAWJ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA0E;AApB1F,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAqD9B;;AAED,eAAe,kBAAkB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-breadcrumb-item.css';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile BreadCrumb Item component.\n *\n * @tag nile-breadcrumb-item\n *\n */\n@customElement('nile-breadcrumb-item')\nexport class NileBreadcrumbItem extends NileElement {\n  /**\n   * The styles for BreadcrumbItem\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @state() private isLast = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  @property({ type: String }) separator = 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))';\n\n  private handleClick() {\n    if (this.isLast) {\n      return;\n    }\n    this.emit('nile-click-item');\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <slot\n        class=${classMap({\n          'nile-breadcrumb-item__slot-text': !this.isLast,\n          'nile-breadcrumb-item__last-slot-text': this.isLast,\n        })}\n        @click=${this.handleClick}\n      ></slot>\n      <nile-icon\n        name=${this.separator}\n        aria-label=${this.separator}\n        method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n        color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\"\n        class=${classMap({\n          'nile-breadcrumb-item__arrow': true,\n          'nile-breadcrumb-item__arrow-hidden': this.isLast,\n        })}\n        size=\"14\"\n      ></nile-icon>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileBreadcrumbItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-breadcrumb-item': NileBreadcrumbItem;\n  }\n}\n"]}
+{"version":3,"file":"nile-breadcrumb-item.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD;;;;;GAKG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IAA5C;;QASY,WAAM,GAAG,KAAK,CAAC;QAEhC,gBAAgB;QAEhB,qBAAqB;QAErB;;;WAGG;QAEyB,cAAS,GAAG,4DAA4D,CAAC;QAkCrG,gBAAgB;IAClB,CAAC;IAtDC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAeO,WAAW;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/B,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,iCAAiC,EAAE,CAAC,IAAI,CAAC,MAAM;YAC/C,sCAAsC,EAAE,IAAI,CAAC,MAAM;SACpD,CAAC;iBACO,IAAI,CAAC,WAAW;;;;;eAKlB,IAAI,CAAC,SAAS;qBACR,IAAI,CAAC,SAAS;;;gBAGnB,QAAQ,CAAC;YACf,6BAA6B,EAAE,IAAI;YACnC,oCAAoC,EAAE,IAAI,CAAC,MAAM;SAClD,CAAC;;;KAGL,CAAC;IACJ,CAAC;CAGF,CAAA;AA9CkB;IAAhB,KAAK,EAAE;kDAAwB;AAWJ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA0E;AApB1F,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAuD9B;;AAED,eAAe,kBAAkB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-breadcrumb-item.css';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile BreadCrumb Item component.\n *\n * @tag nile-breadcrumb-item\n *\n */\n@customElement('nile-breadcrumb-item')\nexport class NileBreadcrumbItem extends NileElement {\n  /**\n   * The styles for BreadcrumbItem\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @state() private isLast = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  @property({ type: String }) separator = 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))';\n\n  private handleClick() {\n    if (this.isLast) {\n      return;\n    }\n    this.emit('nile-click-item');\n  }\n\n  public render(): TemplateResult {\n    return html`\n    <div part=\"item\"\n        class=${classMap({\n          'nile-breadcrumb-item__slot-text': !this.isLast,\n          'nile-breadcrumb-item__last-slot-text': this.isLast,\n        })}\n        @click=${this.handleClick}\n        >\n        <slot></slot>\n      </div>\n      <nile-icon\n        name=${this.separator}\n        aria-label=${this.separator}\n        method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n        color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\"\n        class=${classMap({\n          'nile-breadcrumb-item__arrow': true,\n          'nile-breadcrumb-item__arrow-hidden': this.isLast,\n        })}\n        size=\"14\"\n      ></nile-icon>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileBreadcrumbItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-breadcrumb-item': NileBreadcrumbItem;\n  }\n}\n"]}

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

@@ -0,0 +1,26 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ComboboxDataItem, ComboboxGroupItem, ComboboxRow, ComboboxOptionRow } from './types';
+export declare function isGroup(item: any): item is ComboboxGroupItem;
+export declare function hasGroups(data: any[]): boolean;
+export declare function countOptionsDeep(group: ComboboxGroupItem): number;
+export declare function flattenRows(data: ComboboxDataItem[]): ComboboxRow[];
+export declare function getOptionRows(rows: ComboboxRow[]): ComboboxOptionRow[];
+/**
+ * Filter rows by a query.
+ *
+ * Rules:
+ *  - An option row is kept if its searchText matches.
+ *  - If a group's label matches, the entire subtree (header + all descendant
+ *    options + nested headers) is kept.
+ *  - Otherwise a header is kept only if at least one descendant option matches.
+ *  - Empty groups (no surviving descendants) are dropped.
+ */
+export declare function filterRows(data: ComboboxDataItem[], query: string, getSearchText: (item: any) => string): {
+    rows: ComboboxRow[];
+    visibleOptionCount: number;
+};

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

@@ -0,0 +1,140 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export function isGroup(item) {
+    return !!item && typeof item === 'object' && item.type === 'group' && Array.isArray(item.options);
+}
+export function hasGroups(data) {
+    if (!Array.isArray(data))
+        return false;
+    for (const item of data) {
+        if (isGroup(item))
+            return true;
+    }
+    return false;
+}
+export function countOptionsDeep(group) {
+    let n = 0;
+    for (const child of group.options) {
+        if (isGroup(child))
+            n += countOptionsDeep(child);
+        else
+            n += 1;
+    }
+    return n;
+}
+export function flattenRows(data) {
+    const rows = [];
+    const walk = (items, depth, parentIds) => {
+        for (const item of items) {
+            if (isGroup(item)) {
+                rows.push({
+                    kind: 'header',
+                    id: item.id,
+                    label: item.label,
+                    prefix: item.prefix,
+                    depth,
+                    optionCount: countOptionsDeep(item),
+                });
+                walk(item.options, depth + 1, [...parentIds, item.id]);
+            }
+            else {
+                rows.push({
+                    kind: 'option',
+                    item: item,
+                    depth,
+                    parentIds,
+                });
+            }
+        }
+    };
+    walk(Array.isArray(data) ? data : [], 0, []);
+    return rows;
+}
+export function getOptionRows(rows) {
+    const out = [];
+    for (const r of rows)
+        if (r.kind === 'option')
+            out.push(r);
+    return out;
+}
+/**
+ * Filter rows by a query.
+ *
+ * Rules:
+ *  - An option row is kept if its searchText matches.
+ *  - If a group's label matches, the entire subtree (header + all descendant
+ *    options + nested headers) is kept.
+ *  - Otherwise a header is kept only if at least one descendant option matches.
+ *  - Empty groups (no surviving descendants) are dropped.
+ */
+export function filterRows(data, query, getSearchText) {
+    const q = (query || '').trim().toLowerCase();
+    if (!q) {
+        const rows = flattenRows(data);
+        return { rows, visibleOptionCount: getOptionRows(rows).length };
+    }
+    const matchedOption = (item) => {
+        const text = (getSearchText(item) || '').toString().toLowerCase();
+        return text.includes(q);
+    };
+    const walk = (item, ancestorLabelMatched) => {
+        if (isGroup(item)) {
+            const labelMatched = item.label.toLowerCase().includes(q);
+            const keepAll = labelMatched || ancestorLabelMatched;
+            const children = [];
+            for (const child of item.options) {
+                const sub = walk(child, keepAll);
+                if (sub)
+                    children.push(sub);
+            }
+            if (children.length === 0 && !keepAll)
+                return null;
+            // If keepAll but nothing came back (empty group), still emit so user sees label.
+            return { kind: 'group', group: item, children };
+        }
+        if (ancestorLabelMatched || matchedOption(item)) {
+            return { kind: 'option', item: item };
+        }
+        return null;
+    };
+    const tops = [];
+    for (const top of data) {
+        const r = walk(top, false);
+        if (r)
+            tops.push(r);
+    }
+    // Materialize back to flat rows.
+    const rows = [];
+    const emit = (results, depth, parentIds) => {
+        for (const r of results) {
+            if (!r)
+                continue;
+            if (r.kind === 'group') {
+                rows.push({
+                    kind: 'header',
+                    id: r.group.id,
+                    label: r.group.label,
+                    prefix: r.group.prefix,
+                    depth,
+                    optionCount: countOptionsDeep(r.group),
+                });
+                emit(r.children, depth + 1, [...parentIds, r.group.id]);
+            }
+            else {
+                rows.push({
+                    kind: 'option',
+                    item: r.item,
+                    depth,
+                    parentIds,
+                });
+            }
+        }
+    };
+    emit(tops, 0, []);
+    return { rows, visibleOptionCount: getOptionRows(rows).length };
+}
+//# sourceMappingURL=group-utils.js.map

package/dist/src/nile-combobox/group-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-utils.js","sourceRoot":"","sources":["../../../src/nile-combobox/group-utils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,MAAM,UAAU,OAAO,CAAC,IAAS;IAC/B,OAAO,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACpG,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,IAAW;IACnC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QAAE,OAAO,KAAK,CAAC;IACvC,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE,CAAC;QACxB,IAAI,OAAO,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;IACjC,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAwB;IACvD,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClC,IAAI,OAAO,CAAC,KAAK,CAAC;YAAE,CAAC,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC;;YAC5C,CAAC,IAAI,CAAC,CAAC;IACd,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAAwB;IAClD,MAAM,IAAI,GAAkB,EAAE,CAAC;IAC/B,MAAM,IAAI,GAAG,CAAC,KAAyB,EAAE,KAAa,EAAE,SAAmB,EAAE,EAAE;QAC7E,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;gBAClB,IAAI,CAAC,IAAI,CAAC;oBACR,IAAI,EAAE,QAAQ;oBACd,EAAE,EAAE,IAAI,CAAC,EAAE;oBACX,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,KAAK;oBACL,WAAW,EAAE,gBAAgB,CAAC,IAAI,CAAC;iBACf,CAAC,CAAC;gBACxB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;YACzD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,CAAC;oBACR,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,IAA0B;oBAChC,KAAK;oBACL,SAAS;iBACW,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IACF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7C,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,IAAmB;IAC/C,MAAM,GAAG,GAAwB,EAAE,CAAC;IACpC,KAAK,MAAM,CAAC,IAAI,IAAI;QAAE,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ;YAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC3D,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,UAAU,CACxB,IAAwB,EACxB,KAAa,EACb,aAAoC;IAEpC,MAAM,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAC7C,IAAI,CAAC,CAAC,EAAE,CAAC;QACP,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QAC/B,OAAO,EAAE,IAAI,EAAE,kBAAkB,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC;IAClE,CAAC;IAED,MAAM,aAAa,GAAG,CAAC,IAAwB,EAAW,EAAE;QAC1D,MAAM,IAAI,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC;QAClE,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC,CAAC;IAQF,MAAM,IAAI,GAAG,CAAC,IAAsB,EAAE,oBAA6B,EAAgB,EAAE;QACnF,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YAClB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC1D,MAAM,OAAO,GAAG,YAAY,IAAI,oBAAoB,CAAC;YACrD,MAAM,QAAQ,GAAmB,EAAE,CAAC;YACpC,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;gBACjC,IAAI,GAAG;oBAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC9B,CAAC;YACD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;gBAAE,OAAO,IAAI,CAAC;YACnD,iFAAiF;YACjF,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;QAClD,CAAC;QACD,IAAI,oBAAoB,IAAI,aAAa,CAAC,IAA0B,CAAC,EAAE,CAAC;YACtE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAA0B,EAAE,CAAC;QAC9D,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,IAAI,GAAmB,EAAE,CAAC;IAChC,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC;YAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IAED,iCAAiC;IACjC,MAAM,IAAI,GAAkB,EAAE,CAAC;IAC/B,MAAM,IAAI,GAAG,CAAC,OAAuB,EAAE,KAAa,EAAE,SAAmB,EAAE,EAAE;QAC3E,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC;YACxB,IAAI,CAAC,CAAC;gBAAE,SAAS;YACjB,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC;oBACR,IAAI,EAAE,QAAQ;oBACd,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE;oBACd,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK;oBACpB,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;oBACtB,KAAK;oBACL,WAAW,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC;iBACvC,CAAC,CAAC;gBACH,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;YAC1D,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,CAAC;oBACR,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,CAAC,CAAC,IAAI;oBACZ,KAAK;oBACL,SAAS;iBACV,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IACF,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAElB,OAAO,EAAE,IAAI,EAAE,kBAAkB,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC;AAClE,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 type {\n  ComboboxDataItem,\n  ComboboxGroupItem,\n  ComboboxOptionItem,\n  ComboboxRow,\n  ComboboxHeaderRow,\n  ComboboxOptionRow,\n} from './types';\n\nexport function isGroup(item: any): item is ComboboxGroupItem {\n  return !!item && typeof item === 'object' && item.type === 'group' && Array.isArray(item.options);\n}\n\nexport function hasGroups(data: any[]): boolean {\n  if (!Array.isArray(data)) return false;\n  for (const item of data) {\n    if (isGroup(item)) return true;\n  }\n  return false;\n}\n\nexport function countOptionsDeep(group: ComboboxGroupItem): number {\n  let n = 0;\n  for (const child of group.options) {\n    if (isGroup(child)) n += countOptionsDeep(child);\n    else n += 1;\n  }\n  return n;\n}\n\nexport function flattenRows(data: ComboboxDataItem[]): ComboboxRow[] {\n  const rows: ComboboxRow[] = [];\n  const walk = (items: ComboboxDataItem[], depth: number, parentIds: string[]) => {\n    for (const item of items) {\n      if (isGroup(item)) {\n        rows.push({\n          kind: 'header',\n          id: item.id,\n          label: item.label,\n          prefix: item.prefix,\n          depth,\n          optionCount: countOptionsDeep(item),\n        } as ComboboxHeaderRow);\n        walk(item.options, depth + 1, [...parentIds, item.id]);\n      } else {\n        rows.push({\n          kind: 'option',\n          item: item as ComboboxOptionItem,\n          depth,\n          parentIds,\n        } as ComboboxOptionRow);\n      }\n    }\n  };\n  walk(Array.isArray(data) ? data : [], 0, []);\n  return rows;\n}\n\nexport function getOptionRows(rows: ComboboxRow[]): ComboboxOptionRow[] {\n  const out: ComboboxOptionRow[] = [];\n  for (const r of rows) if (r.kind === 'option') out.push(r);\n  return out;\n}\n\n/**\n * Filter rows by a query.\n *\n * Rules:\n *  - An option row is kept if its searchText matches.\n *  - If a group's label matches, the entire subtree (header + all descendant\n *    options + nested headers) is kept.\n *  - Otherwise a header is kept only if at least one descendant option matches.\n *  - Empty groups (no surviving descendants) are dropped.\n */\nexport function filterRows(\n  data: ComboboxDataItem[],\n  query: string,\n  getSearchText: (item: any) => string,\n): { rows: ComboboxRow[]; visibleOptionCount: number } {\n  const q = (query || '').trim().toLowerCase();\n  if (!q) {\n    const rows = flattenRows(data);\n    return { rows, visibleOptionCount: getOptionRows(rows).length };\n  }\n\n  const matchedOption = (item: ComboboxOptionItem): boolean => {\n    const text = (getSearchText(item) || '').toString().toLowerCase();\n    return text.includes(q);\n  };\n\n  // Walk the tree, returning a filtered subtree (or null when nothing survives).\n  type FilterResult =\n    | { kind: 'option'; item: ComboboxOptionItem }\n    | { kind: 'group'; group: ComboboxGroupItem; children: FilterResult[] }\n    | null;\n\n  const walk = (item: ComboboxDataItem, ancestorLabelMatched: boolean): FilterResult => {\n    if (isGroup(item)) {\n      const labelMatched = item.label.toLowerCase().includes(q);\n      const keepAll = labelMatched || ancestorLabelMatched;\n      const children: FilterResult[] = [];\n      for (const child of item.options) {\n        const sub = walk(child, keepAll);\n        if (sub) children.push(sub);\n      }\n      if (children.length === 0 && !keepAll) return null;\n      // If keepAll but nothing came back (empty group), still emit so user sees label.\n      return { kind: 'group', group: item, children };\n    }\n    if (ancestorLabelMatched || matchedOption(item as ComboboxOptionItem)) {\n      return { kind: 'option', item: item as ComboboxOptionItem };\n    }\n    return null;\n  };\n\n  const tops: FilterResult[] = [];\n  for (const top of data) {\n    const r = walk(top, false);\n    if (r) tops.push(r);\n  }\n\n  // Materialize back to flat rows.\n  const rows: ComboboxRow[] = [];\n  const emit = (results: FilterResult[], depth: number, parentIds: string[]) => {\n    for (const r of results) {\n      if (!r) continue;\n      if (r.kind === 'group') {\n        rows.push({\n          kind: 'header',\n          id: r.group.id,\n          label: r.group.label,\n          prefix: r.group.prefix,\n          depth,\n          optionCount: countOptionsDeep(r.group),\n        });\n        emit(r.children, depth + 1, [...parentIds, r.group.id]);\n      } else {\n        rows.push({\n          kind: 'option',\n          item: r.item,\n          depth,\n          parentIds,\n        });\n      }\n    }\n  };\n  emit(tops, 0, []);\n\n  return { rows, visibleOptionCount: getOptionRows(rows).length };\n}\n"]}

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;