npm - @aquera/nile-elements - Versions diffs - 1.8.6 → 1.8.8 - Mend

@aquera/nile-elements 1.8.6 → 1.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/dist/src/nile-side-bar/nile-side-bar.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-side-bar.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFxB~~,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,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 {css} from 'lit';\n\n/\n SideBar CSS\n */\nexport const styles = css`\n :host {\n \n top: 0;\n width: var(--nile-width-240px, var(--ng-spacing-296));\n display: flex;\n flex-direction: column;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n height: 100%;\n overflow: hidden; \n transition: width 0.25s ease, transform 0.25s ease;\n z-index: 1000;\n}\n\n \n:host([position='left']) {\n left: 0;\n border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n right: 0;\n border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n:host {\n scrollbar-width: thin;\n scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n width: 6px;\n}\n:host::-webkit-scrollbar-track {\n background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n background-color: #64748b;\n border-radius: 10px;\n}\n\n \n.scroll-container {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n flex-shrink: 0;\n position: sticky;\n bottom: 0;\n margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n`;\n\nexport default [styles];"]}
1	+ {"version":3,"file":"nile-side-bar.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,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 {css} from 'lit';\n\n/\n SideBar CSS\n /\nexport const styles = css`\n :host {\n \n top: 0;\n width: var(--nile-width-240px, var(--ng-spacing-296));\n display: flex;\n flex-direction: column;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n height: 100%;\n overflow: hidden; \n transition: width 0.25s ease, transform 0.25s ease;\n z-index: 1000;\n}\n\n \n:host([position='left']) {\n left: 0;\n border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n right: 0;\n border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n/\n * Overlay mode: lift the sidebar out of normal flow so expanding it floats\n * on top of adjacent content instead of pushing siblings. Anchors to the\n * nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin\n * it to the viewport instead.\n /\n:host([overlay]) {\n position: var(--sidebar-overlay-position, absolute);\n top: 0;\n bottom: 0;\n height: 100%;\n}\n\n:host([overlay][position='left']) {\n left: 0;\n}\n\n:host([overlay][position='right']) {\n right: 0;\n}\n\n/ Elevate while expanded so it reads as floating above the page. */\n:host([overlay]:not([collapsed])) {\n box-shadow: var(\n --sidebar-overlay-shadow,\n 0px 8px 24px 0px rgba(119, 125, 130, 0.25)\n );\n}\n\n:host {\n scrollbar-width: thin;\n scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n width: 6px;\n}\n:host::-webkit-scrollbar-track {\n background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n background-color: #64748b;\n border-radius: 10px;\n}\n\n \n.scroll-container {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n flex-shrink: 0;\n position: sticky;\n bottom: 0;\n margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n`;\n\nexport default [styles];"]}

package/dist/src/nile-side-bar/nile-side-bar.d.ts CHANGED Viewed

@@ -14,15 +14,31 @@ import NileElement from '../internal/nile-element';
  * @attr position - Position of the sidebar ("left" | "right"). Defaults to "left".
  * @attr width - Expanded width of the sidebar (px).
  * @attr collapsed-width - Collapsed width of the sidebar (px).
+ * @attr overlay - When set, the sidebar is taken out of normal flow and floats
+ *   on top of adjacent content, so expanding it overlays the page instead of
+ *   pushing siblings sideways.
+ *
+ * @event nile-toggle - Fired after the collapsed state changes (via the built-in
+ *   expand button or the public expand()/collapse()/toggle() methods).
+ *   `event.detail.collapsed` is the new state.
+ *
+ * @method expand() - Expand the sidebar.
+ * @method collapse() - Collapse the sidebar.
+ * @method toggle(force?) - Toggle, or force a specific collapsed state.
  */
 export declare class NileSideBar extends NileElement {
     position: 'left' | 'right';
     collapsed: boolean;
+    overlay: boolean;
     fullHeight: boolean;
     width: number | null;
     collapsedWidth: number | null;
     static get styles(): CSSResultArray;
     protected updated(changedProps: Map<string, unknown>): void;
+    expand(): void;
+    collapse(): void;
+    toggle(force?: boolean): void;
+    private setCollapsed;
     render(): TemplateResult;
 }
 export default NileSideBar;

package/dist/src/nile-side-bar/nile-side-bar.js CHANGED Viewed

@@ -17,12 +17,24 @@ import NileElement from '../internal/nile-element';
  * @attr position - Position of the sidebar ("left" | "right"). Defaults to "left".
  * @attr width - Expanded width of the sidebar (px).
  * @attr collapsed-width - Collapsed width of the sidebar (px).
+ * @attr overlay - When set, the sidebar is taken out of normal flow and floats
+ *   on top of adjacent content, so expanding it overlays the page instead of
+ *   pushing siblings sideways.
+ *
+ * @event nile-toggle - Fired after the collapsed state changes (via the built-in
+ *   expand button or the public expand()/collapse()/toggle() methods).
+ *   `event.detail.collapsed` is the new state.
+ *
+ * @method expand() - Expand the sidebar.
+ * @method collapse() - Collapse the sidebar.
+ * @method toggle(force?) - Toggle, or force a specific collapsed state.
  */
 let NileSideBar = class NileSideBar extends NileElement {
     constructor() {
         super(...arguments);
         this.position = 'left';
         this.collapsed = false;
+        this.overlay = false;
         this.fullHeight = false;
         this.width = null;
         this.collapsedWidth = null;
@@ -51,6 +63,21 @@ let NileSideBar = class NileSideBar extends NileElement {
             this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);
         }
     }
+    expand() {
+        this.setCollapsed(false);
+    }
+    collapse() {
+        this.setCollapsed(true);
+    }
+    toggle(force) {
+        this.setCollapsed(force ?? !this.collapsed);
+    }
+    setCollapsed(value) {
+        if (this.collapsed === value)
+            return;
+        this.collapsed = value;
+        this.emit('nile-toggle', { collapsed: value });
+    }
     render() {
         return html `
       <slot name="header" part="header"></slot>
@@ -67,6 +94,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileSideBar.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileSideBar.prototype, "overlay", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileSideBar.prototype, "fullHeight", void 0);

package/dist/src/nile-side-bar/nile-side-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-side-bar.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD~~;;;;;;;;GAQG~~;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QACsD,aAAQ,GAAqB,MAAM,CAAC;QAEnC,cAAS,GAAY,KAAK,CAAC;QAE3B,eAAU,GAAY,KAAK,CAAC;QAE5C,UAAK,GAAkB,IAAI,CAAC;QAG5B,mBAAc,GAAkB,IAAI,CAAC;~~IA2CnF~~,CAAC;~~IAzCQ~~,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAES,OAAO,CAAC,YAAkC;QAClD,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAE5B,IAAI,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,gBAAgB,CACnB;;;;;;;;;SASC,CACF,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QACnE,CAAC;QAGD,IAAI,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACrD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAC/D,CAAC;QACD,IAAI,YAAY,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE,CAAC;YACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC;QAClF,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;CAEF,CAAA;~~AApD4D~~;IAA1D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAAoC;AAEnC;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;8CAA2B;AAE3B;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CAA4B;AAE5C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CAA4B;AAG5B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;mDAAqC;~~AAVtE~~,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,~~CAqDvB~~;;AAED,eAAe,WAAW,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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar.css';\nimport NileElement from '../internal/nile-element';\n\n/\n Nile side-bar component.\n \n @tag nile-side-bar\n \n @attr position - Position of the sidebar (\"left\" \| \"right\"). Defaults to \"left\".\n * @attr width - Expanded width of the sidebar (px).\n * @attr collapsed-width - Collapsed width of the sidebar (px).\n */\n@customElement('nile-side-bar')\nexport class NileSideBar extends NileElement {\n @property({ type: String, reflect: true, attribute: true })position: 'left' \| 'right' = 'left';\n\n @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;\n\n @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;\n \n @property({ type: Number, attribute: true })width: number \| null = null;\n\n \n @property({ type: Number, attribute: true })collapsedWidth: number \| null = null;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n protected updated(changedProps: Map<string, unknown>) {\n super.updated(changedProps);\n\n if (changedProps.has('collapsed')) {\n this.querySelectorAll<NileElement>(\n `\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n `\n ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));\n }\n \n\n if (changedProps.has('width') && this.width !== null) {\n this.style.setProperty('--sidebar-width', `${this.width}px`);\n }\n if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {\n this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);\n }\n }\n\n public render(): TemplateResult {\n return html`\n <slot name=\"header\" part=\"header\"></slot>\n <div class=\"scroll-container\" part=\"scroll-container\">\n <slot></slot>\n </div>\n <slot name=\"footer\" part=\"footer\"></slot>\n `;\n }\n \n}\n\nexport default NileSideBar;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-side-bar': NileSideBar;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-side-bar.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.ts"],"names":[],"mappings":"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","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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar.css';\nimport NileElement from '../internal/nile-element';\n\n/\n Nile side-bar component.\n \n @tag nile-side-bar\n \n @attr position - Position of the sidebar (\"left\" \| \"right\"). Defaults to \"left\".\n * @attr width - Expanded width of the sidebar (px).\n * @attr collapsed-width - Collapsed width of the sidebar (px).\n * @attr overlay - When set, the sidebar is taken out of normal flow and floats\n * on top of adjacent content, so expanding it overlays the page instead of\n * pushing siblings sideways.\n \n @event nile-toggle - Fired after the collapsed state changes (via the built-in\n * expand button or the public expand()/collapse()/toggle() methods).\n * `event.detail.collapsed` is the new state.\n \n @method expand() - Expand the sidebar.\n * @method collapse() - Collapse the sidebar.\n * @method toggle(force?) - Toggle, or force a specific collapsed state.\n */\n@customElement('nile-side-bar')\nexport class NileSideBar extends NileElement {\n @property({ type: String, reflect: true, attribute: true })position: 'left' \| 'right' = 'left';\n\n @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;\n\n @property({ type: Boolean, reflect: true, attribute: true })overlay: boolean = false;\n\n @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;\n \n @property({ type: Number, attribute: true })width: number \| null = null;\n\n \n @property({ type: Number, attribute: true })collapsedWidth: number \| null = null;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n protected updated(changedProps: Map<string, unknown>) {\n super.updated(changedProps);\n\n if (changedProps.has('collapsed')) {\n this.querySelectorAll<NileElement>(\n `\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n `\n ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));\n }\n \n\n if (changedProps.has('width') && this.width !== null) {\n this.style.setProperty('--sidebar-width', `${this.width}px`);\n }\n if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {\n this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);\n }\n }\n public expand(): void {\n this.setCollapsed(false);\n }\n public collapse(): void {\n this.setCollapsed(true);\n }\n\n public toggle(force?: boolean): void {\n this.setCollapsed(force ?? !this.collapsed);\n }\n\n private setCollapsed(value: boolean): void {\n if (this.collapsed === value) return;\n this.collapsed = value;\n this.emit('nile-toggle', { collapsed: value });\n }\n\n public render(): TemplateResult {\n return html`\n <slot name=\"header\" part=\"header\"></slot>\n <div class=\"scroll-container\" part=\"scroll-container\">\n <slot></slot>\n </div>\n <slot name=\"footer\" part=\"footer\"></slot>\n `;\n }\n \n}\n\nexport default NileSideBar;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-side-bar': NileSideBar;\n }\n}\n"]}

package/dist/src/nile-side-bar/nile-side-bar.test.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import './nile-side-bar';
2	+ import '../nile-side-bar-expand/nile-side-bar-expand';

package/dist/src/nile-side-bar/nile-side-bar.test.js ADDED Viewed

@@ -0,0 +1,96 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import './nile-side-bar';
+import '../nile-side-bar-expand/nile-side-bar-expand';
+describe('NileSideBar — collapse/expand API', () => {
+    it('1. defaults to expanded (not collapsed) and not overlay', async () => {
+        const el = await fixture(html `<nile-side-bar></nile-side-bar>`);
+        expect(el.collapsed).to.be.false;
+        expect(el.overlay).to.be.false;
+        expect(el.hasAttribute('overlay')).to.be.false;
+    });
+    it('2. collapse() sets collapsed state + reflects attribute', async () => {
+        const el = await fixture(html `<nile-side-bar></nile-side-bar>`);
+        el.collapse();
+        await el.updateComplete;
+        expect(el.collapsed).to.be.true;
+        expect(el.hasAttribute('collapsed')).to.be.true;
+    });
+    it('3. expand() clears collapsed state', async () => {
+        const el = await fixture(html `<nile-side-bar collapsed></nile-side-bar>`);
+        expect(el.collapsed).to.be.true;
+        el.expand();
+        await el.updateComplete;
+        expect(el.collapsed).to.be.false;
+        expect(el.hasAttribute('collapsed')).to.be.false;
+    });
+    it('4. toggle() flips state', async () => {
+        const el = await fixture(html `<nile-side-bar></nile-side-bar>`);
+        el.toggle();
+        await el.updateComplete;
+        expect(el.collapsed).to.be.true;
+        el.toggle();
+        await el.updateComplete;
+        expect(el.collapsed).to.be.false;
+    });
+    it('5. toggle(force) sets an explicit state', async () => {
+        const el = await fixture(html `<nile-side-bar></nile-side-bar>`);
+        el.toggle(false); // already expanded -> no-op
+        await el.updateComplete;
+        expect(el.collapsed).to.be.false;
+        el.toggle(true);
+        await el.updateComplete;
+        expect(el.collapsed).to.be.true;
+    });
+    it('6. emits nile-toggle with new collapsed state', async () => {
+        const el = await fixture(html `<nile-side-bar></nile-side-bar>`);
+        setTimeout(() => el.collapse());
+        const ev = await oneEvent(el, 'nile-toggle');
+        expect(ev.detail.collapsed).to.be.true;
+    });
+    it('7. does NOT emit nile-toggle when state is unchanged', async () => {
+        const el = await fixture(html `<nile-side-bar></nile-side-bar>`);
+        let fired = false;
+        el.addEventListener('nile-toggle', () => { fired = true; });
+        el.expand(); // already expanded
+        await el.updateComplete;
+        expect(fired).to.be.false;
+    });
+    it('8. built-in expand button toggles the sidebar (normal mode)', async () => {
+        const el = await fixture(html `
+      <nile-side-bar>
+        <nile-side-bar-expand slot="expand"></nile-side-bar-expand>
+      </nile-side-bar>
+    `);
+        await el.updateComplete;
+        const expandEl = el.querySelector('nile-side-bar-expand');
+        const btn = expandEl.shadowRoot.querySelector('.expand-btn');
+        let detail;
+        el.addEventListener('nile-toggle', (e) => { detail = e.detail; });
+        btn.click();
+        await el.updateComplete;
+        expect(el.collapsed).to.be.true;
+        expect(detail.collapsed).to.be.true;
+        expect(expandEl.collapsed).to.be.true; // arrow icon state stays in sync
+        btn.click();
+        await el.updateComplete;
+        expect(el.collapsed).to.be.false;
+        expect(expandEl.collapsed).to.be.false;
+    });
+    it('9. overlay attribute is opt-in and reflects', async () => {
+        const el = await fixture(html `<nile-side-bar overlay></nile-side-bar>`);
+        expect(el.overlay).to.be.true;
+        el.overlay = false;
+        await el.updateComplete;
+        expect(el.hasAttribute('overlay')).to.be.false;
+    });
+    it('10. methods work the same with overlay enabled', async () => {
+        const el = await fixture(html `<nile-side-bar overlay></nile-side-bar>`);
+        el.collapse();
+        await el.updateComplete;
+        expect(el.collapsed).to.be.true;
+        el.expand();
+        await el.updateComplete;
+        expect(el.collapsed).to.be.false;
+    });
+});
+//# sourceMappingURL=nile-side-bar.test.js.map

package/dist/src/nile-side-bar/nile-side-bar.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"nile-side-bar.test.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html, oneEvent } from '@open-wc/testing';\nimport './nile-side-bar';\nimport '../nile-side-bar-expand/nile-side-bar-expand';\nimport type { NileSideBar } from './nile-side-bar';\n\ndescribe('NileSideBar — collapse/expand API', () => {\n it('1. defaults to expanded (not collapsed) and not overlay', async () => {\n const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);\n expect(el.collapsed).to.be.false;\n expect(el.overlay).to.be.false;\n expect(el.hasAttribute('overlay')).to.be.false;\n });\n\n it('2. collapse() sets collapsed state + reflects attribute', async () => {\n const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);\n el.collapse();\n await el.updateComplete;\n expect(el.collapsed).to.be.true;\n expect(el.hasAttribute('collapsed')).to.be.true;\n });\n\n it('3. expand() clears collapsed state', async () => {\n const el = await fixture<NileSideBar>(html`<nile-side-bar collapsed></nile-side-bar>`);\n expect(el.collapsed).to.be.true;\n el.expand();\n await el.updateComplete;\n expect(el.collapsed).to.be.false;\n expect(el.hasAttribute('collapsed')).to.be.false;\n });\n\n it('4. toggle() flips state', async () => {\n const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);\n el.toggle();\n await el.updateComplete;\n expect(el.collapsed).to.be.true;\n el.toggle();\n await el.updateComplete;\n expect(el.collapsed).to.be.false;\n });\n\n it('5. toggle(force) sets an explicit state', async () => {\n const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);\n el.toggle(false); // already expanded -> no-op\n await el.updateComplete;\n expect(el.collapsed).to.be.false;\n el.toggle(true);\n await el.updateComplete;\n expect(el.collapsed).to.be.true;\n });\n\n it('6. emits nile-toggle with new collapsed state', async () => {\n const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);\n setTimeout(() => el.collapse());\n const ev = await oneEvent(el, 'nile-toggle');\n expect(ev.detail.collapsed).to.be.true;\n });\n\n it('7. does NOT emit nile-toggle when state is unchanged', async () => {\n const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);\n let fired = false;\n el.addEventListener('nile-toggle', () => { fired = true; });\n el.expand(); // already expanded\n await el.updateComplete;\n expect(fired).to.be.false;\n });\n\n it('8. built-in expand button toggles the sidebar (normal mode)', async () => {\n const el = await fixture<NileSideBar>(html`\n <nile-side-bar>\n <nile-side-bar-expand slot=\"expand\"></nile-side-bar-expand>\n </nile-side-bar>\n `);\n await el.updateComplete;\n const expandEl = el.querySelector('nile-side-bar-expand') as HTMLElement & { collapsed: boolean };\n const btn = expandEl.shadowRoot!.querySelector('.expand-btn') as HTMLElement;\n\n let detail: any;\n el.addEventListener('nile-toggle', (e: Event) => { detail = (e as CustomEvent).detail; });\n\n btn.click();\n await el.updateComplete;\n expect(el.collapsed).to.be.true;\n expect(detail.collapsed).to.be.true;\n expect(expandEl.collapsed).to.be.true; // arrow icon state stays in sync\n\n btn.click();\n await el.updateComplete;\n expect(el.collapsed).to.be.false;\n expect(expandEl.collapsed).to.be.false;\n });\n\n it('9. overlay attribute is opt-in and reflects', async () => {\n const el = await fixture<NileSideBar>(html`<nile-side-bar overlay></nile-side-bar>`);\n expect(el.overlay).to.be.true;\n el.overlay = false;\n await el.updateComplete;\n expect(el.hasAttribute('overlay')).to.be.false;\n });\n\n it('10. methods work the same with overlay enabled', async () => {\n const el = await fixture<NileSideBar>(html`<nile-side-bar overlay></nile-side-bar>`);\n el.collapse();\n await el.updateComplete;\n expect(el.collapsed).to.be.true;\n el.expand();\n await el.updateComplete;\n expect(el.collapsed).to.be.false;\n });\n});\n"]}

package/dist/src/nile-side-bar-expand/nile-side-bar-expand.js CHANGED Viewed

@@ -31,15 +31,13 @@ let NileSideBarExpand = class NileSideBarExpand extends NileElement {
         const sidebar = this.closest('nile-side-bar');
         if (!sidebar)
             return;
-        const isCollapsed = sidebar.hasAttribute('collapsed');
-        if (isCollapsed) {
-            sidebar.removeAttribute('collapsed');
-            this.collapsed = false;
+        if (typeof sidebar.toggle === 'function') {
+            sidebar.toggle();
         }
         else {
-            sidebar.setAttribute('collapsed', '');
-            this.collapsed = true;
+            sidebar.toggleAttribute('collapsed', !sidebar.hasAttribute('collapsed'));
         }
+        this.collapsed = sidebar.hasAttribute('collapsed');
     }
     render() {
         return html `

package/dist/src/nile-side-bar-expand/nile-side-bar-expand.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-side-bar-expand.js","sourceRoot":"","sources":["../../../src/nile-side-bar-expand/nile-side-bar-expand.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QAEL,cAAS,GAAY,KAAK,CAAC;QAC6B,sBAAiB,GAAW,gBAAgB,CAAC;QAC7C,wBAAmB,GAAW,kBAAkB,CAAC;~~IA8C3G~~,CAAC;~~IA5CQ~~,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,wCAAwC;QACxC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,~~CAAC~~,CAAC;~~QAC9C~~,IAAI,CAAC,OAAO;YAAE,OAAO;~~QAErB~~,~~MAAM~~,~~WAAW~~,~~GAAG,~~OAAO,CAAC,~~YAAY~~,~~CAAC~~,~~WAAW~~,~~CAAC,CAAC;QACtD,IAAI,WAAW,~~EAAE,CAAC;~~YAChB~~,OAAO,CAAC,~~eAAe~~,CAAC,~~WAAW,~~CAAC,CAAC;~~YACrC~~,~~IAAI~~,CAAC,~~SAAS~~,~~GAAG~~,~~KAAK~~,~~CAAC;QACzB~~,CAAC~~;aAAM~~,~~CAAC;YACN,~~OAAO,CAAC,YAAY,CAAC,WAAW,~~EAAE~~,~~EAAE~~,CAAC,CAAC;~~YACtC~~,IAAI,CAAC,SAAS,GAAG,~~IAAI~~,CAAC~~;QACxB~~,CAAC;~~IACH~~,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;4DAC6C,IAAI,CAAC,aAAa;UACpE,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;mEACmD,IAAI,CAAC,iBAAiB;;;aAG5E;YACH,CAAC,CAAC,IAAI,CAAA;mEACmD,IAAI,CAAC,mBAAmB;;;aAG9E;;KAER,CAAC;IACJ,CAAC;CACF,CAAA;~~AAhDC~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAChB;AAC6B;IAAvD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,IAAI,EAAC,CAAC;4DAA8C;AAC7C;IAAvD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,IAAI,EAAC,CAAC;8DAAkD;AAJ9F,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,~~CAkD7B~~;;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["import { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-expand.css';\nimport NileElement from '../internal/nile-element';\n\n/*\n Nile side-bar-expand component.\n \n @tag nile-side-bar-expand\n \n /\n@customElement('nile-side-bar-expand')\nexport class NileSideBarExpand extends NileElement {\n @property({ type: Boolean, reflect: true })\n collapsed: boolean = false;\n @property({type: String, reflect:true, attribute:true}) expandTooltipText: string = 'Expand Sidebar';\n @property({type: String, reflect:true, attribute:true}) collapseTooltipText: string = 'Collapse Sidebar';\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Sync with parent sidebar if it exists\n const sidebar = this.closest('nile-side-bar');\n if (sidebar) {\n this.collapsed = sidebar.hasAttribute('collapsed');\n }\n }\n\n private toggleSidebar() {\n const sidebar = this.closest('nile-side-bar');\n if (!sidebar) return;\n\n ~~const~~ ~~isCollapsed~~ = sidebar.~~hasAttribute(~~'~~collapsed~~')~~;\n if~~ ~~(isCollapsed)~~ {\n sidebar.~~removeAttribute~~(~~'collapsed'~~);\n ~~this.collapsed = false;\n~~ } else {\n sidebar.~~setAttribute~~('collapsed', '');\n this.collapsed = ~~true~~;\n ~~}\n~~ }\n\n public render(): TemplateResult {\n return html`\n <button class=\"expand-btn\" part=\"expand-btn\" @click=${this.toggleSidebar}>\n ${this.collapsed\n ? html`\n <nile-lite-tooltip placement=\"right\" hoist content=${this.expandTooltipText}>\n <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-right, var(--ng-icon-chevron-right-double))\"></nile-icon></span>\n </nile-lite-tooltip>\n `\n : html`\n <nile-lite-tooltip placement=\"right\" hoist content=${this.collapseTooltipText}>\n <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-left, var(--ng-icon-chevron-left-double))\"></nile-icon></span>\n </nile-lite-tooltip>\n `}\n </button>\n `;\n }\n}\n\nexport default NileSideBarExpand;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-side-bar-expand': NileSideBarExpand;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-side-bar-expand.js","sourceRoot":"","sources":["../../../src/nile-side-bar-expand/nile-side-bar-expand.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QAEL,cAAS,GAAY,KAAK,CAAC;QAC6B,sBAAiB,GAAW,gBAAgB,CAAC;QAC7C,wBAAmB,GAAW,kBAAkB,CAAC;IA6C3G,CAAC;IA3CQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,wCAAwC;QACxC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAEpC,CAAC;QACT,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,IAAI,OAAO,OAAO,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;YACzC,OAAO,CAAC,MAAM,EAAE,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC;QAC3E,CAAC;QACD,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IACrD,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;4DAC6C,IAAI,CAAC,aAAa;UACpE,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;mEACmD,IAAI,CAAC,iBAAiB;;;aAG5E;YACH,CAAC,CAAC,IAAI,CAAA;mEACmD,IAAI,CAAC,mBAAmB;;;aAG9E;;KAER,CAAC;IACJ,CAAC;CACF,CAAA;AA/CC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAChB;AAC6B;IAAvD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,IAAI,EAAC,CAAC;4DAA8C;AAC7C;IAAvD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,IAAI,EAAC,CAAC;8DAAkD;AAJ9F,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAiD7B;;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["import { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-expand.css';\nimport NileElement from '../internal/nile-element';\n\n/*\n Nile side-bar-expand component.\n \n @tag nile-side-bar-expand\n \n /\n@customElement('nile-side-bar-expand')\nexport class NileSideBarExpand extends NileElement {\n @property({ type: Boolean, reflect: true })\n collapsed: boolean = false;\n @property({type: String, reflect:true, attribute:true}) expandTooltipText: string = 'Expand Sidebar';\n @property({type: String, reflect:true, attribute:true}) collapseTooltipText: string = 'Collapse Sidebar';\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Sync with parent sidebar if it exists\n const sidebar = this.closest('nile-side-bar');\n if (sidebar) {\n this.collapsed = sidebar.hasAttribute('collapsed');\n }\n }\n\n private toggleSidebar() {\n const sidebar = this.closest('nile-side-bar') as\n \| (HTMLElement & { toggle?: (force?: boolean) => void })\n \| null;\n if (!sidebar) return;\n if (typeof sidebar.toggle === 'function') {\n sidebar.toggle();\n } else {\n sidebar.toggleAttribute('collapsed', !sidebar.hasAttribute('collapsed'));\n }\n this.collapsed = sidebar.hasAttribute('collapsed');\n }\n\n public render(): TemplateResult {\n return html`\n <button class=\"expand-btn\" part=\"expand-btn\" @click=${this.toggleSidebar}>\n ${this.collapsed\n ? html`\n <nile-lite-tooltip placement=\"right\" hoist content=${this.expandTooltipText}>\n <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-right, var(--ng-icon-chevron-right-double))\"></nile-icon></span>\n </nile-lite-tooltip>\n `\n : html`\n <nile-lite-tooltip placement=\"right\" hoist content=${this.collapseTooltipText}>\n <span part=\"icon\"><nile-icon color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"var(--nile-spacing-14px, var(--ng-spacing-2xl))\" name=\"var(--nile-icon-move-left, var(--ng-icon-chevron-left-double))\"></nile-icon></span>\n </nile-lite-tooltip>\n `}\n </button>\n `;\n }\n}\n\nexport default NileSideBarExpand;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-side-bar-expand': NileSideBarExpand;\n }\n}\n"]}

package/dist/src/nile-virtual-select/nile-virtual-select.css.js CHANGED Viewed

@@ -360,7 +360,8 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: inherit;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
     border: none;
     background: none;
@@ -452,8 +453,8 @@ export const styles = css `
     /* Auto layout */
     display: var(--nile-display-flex, var(--ng-display-flex));
     flex-direction: row;
-    align-items: flex-start;
-    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));
+    align-items: center;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
     gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     justify-content: space-between;
     box-sizing: unset;

package/dist/src/nile-virtual-select/nile-virtual-select.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-virtual-select.css.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/nile-virtual-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgiBxB,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\n/\n Select_2 CSS\n /\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\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 .virtualized{\n min-width: 110px;\n width: 100%;\n }\n\n .virtualized ::slotted(nile-option),\n .virtualized nile-option {\n width: 100%;\n display: block;\n }\n\n / Ensure proper sizing for non-virtualized options (small datasets) /\n .virtualized:not(:has(lit-virtualizer)) {\n display: flex;\n flex-direction: column;\n }\n\n .virtualized:not(:has(lit-virtualizer)) nile-option {\n flex-shrink: 0;\n }\n\n :host ,\n :host ::before,\n :host ::after {\n box-sizing: inherit;\n }\n\n :host([disabled]) .form-control--has-label .form-control__label {\n user-select: none;\n -webkit-user-select: none;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label /\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 /* Help text /\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 }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n :host {\n display: block;\n }\n\n /* The popup /\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 9999;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n / Combobox /\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\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 vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\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: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\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 }\n\n .select__display-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 .select:not(.select--disabled):hover .select__display-input {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n / Visually hide the display input when multiple is enabled /\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: no-wrap;\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n width: 100%;\n overflow: hidden;\n }\n\n .select__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-style: normal;\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 margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .select__tags-count-clearable {\n margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n .select--disabled .select__display-input{\n color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events:none;\n }\n\n / Standard selects /\n .select--standard .select__combobox {\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: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .select--standard .select__combobox:hover {\n border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .select--error:hover:not(.select--disabled) .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-colors-border-error));\n }\n\n .select--standard.select--disabled .select__combobox {\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 user-select:none;\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .select--warning .select__combobox {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .select--error .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .select--success {\n border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n }\n\n / Filled selects /\n .select--filled .select__combobox {\n border: none;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\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-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n height: var(--nile-height-40px, var(--ng-height-40px));\n box-sizing: border-box;\n }\n\n .select--medium .select__clear {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .select--medium .select__prefix::slotted() {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--medium .select__prefix.multiple::slotted() {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .select--medium .select__tags {\n gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n }\n\n / Pills /\n .select--pill.select--medium .select__combobox {\n border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n }\n\n / Prefix /\n .select__prefix {\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 .select__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 / Clear button /\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n border: none;\n background: none;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n / Expand icon /\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n / Listbox /\n .select__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 / Make sure it adheres to the popup's auto size /\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .select__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 .select__options__search-enabled {\n padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n width: 100%;\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n .select__listbox::slotted(small) {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: var(--nile-spacing-md, var(--ng-spacing-md));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\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 height: 15px;\n / Auto layout */\n display: var(--nile-display-flex, var(--ng-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 box-sizing: unset;\n }\n\n .tag__prefix[slot='prefix'] {\n height: 14px;\n display: inline-block;\n overflow: hidden;\n }\n\n .tag__prefix[slot='prefix'] img {\n max-height: 100%;\n }\n\n .select__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .select__loader--icon {\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n animation: spin 0.6s linear infinite;\n }\n\n .select__no-results {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .select__invisible{\n opacity: 0;\n }\n\n .select__prefix--from-options {\n margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n \n .select__hide-default{\n display: none;\n }\n\n .virtualized nile-option[selected] {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .virtualized nile-option[selected]::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n .virtualized.no-scroll {\n overflow: hidden !important;\n }\n\n .virtual-select-loader {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n .select__footer.loading, .select__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .virtual-select-loader {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n .select__footer.loading, .select__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n .select.select--open .select__combobox {\n border-color: var(--ng-colors-border-brand);\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset ;\n }\n\n :host([enableDescription]) .option::part(base) {\n height: 41px;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-virtual-select.css.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/nile-virtual-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiiBxB,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\n/\n Select_2 CSS\n /\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\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 .virtualized{\n min-width: 110px;\n width: 100%;\n }\n\n .virtualized ::slotted(nile-option),\n .virtualized nile-option {\n width: 100%;\n display: block;\n }\n\n / Ensure proper sizing for non-virtualized options (small datasets) /\n .virtualized:not(:has(lit-virtualizer)) {\n display: flex;\n flex-direction: column;\n }\n\n .virtualized:not(:has(lit-virtualizer)) nile-option {\n flex-shrink: 0;\n }\n\n :host ,\n :host ::before,\n :host ::after {\n box-sizing: inherit;\n }\n\n :host([disabled]) .form-control--has-label .form-control__label {\n user-select: none;\n -webkit-user-select: none;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label /\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 /* Help text /\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 }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n :host {\n display: block;\n }\n\n /* The popup /\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 9999;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n / Combobox /\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\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 vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\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: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\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 }\n\n .select__display-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 .select:not(.select--disabled):hover .select__display-input {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n / Visually hide the display input when multiple is enabled /\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: no-wrap;\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n width: 100%;\n overflow: hidden;\n }\n\n .select__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-style: normal;\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 margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .select__tags-count-clearable {\n margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n .select--disabled .select__display-input{\n color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events:none;\n }\n\n / Standard selects /\n .select--standard .select__combobox {\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: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .select--standard .select__combobox:hover {\n border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .select--error:hover:not(.select--disabled) .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-colors-border-error));\n }\n\n .select--standard.select--disabled .select__combobox {\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 user-select:none;\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .select--warning .select__combobox {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .select--error .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .select--success {\n border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n }\n\n / Filled selects /\n .select--filled .select__combobox {\n border: none;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\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-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n height: var(--nile-height-40px, var(--ng-height-40px));\n box-sizing: border-box;\n }\n\n .select--medium .select__clear {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .select--medium .select__prefix::slotted() {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--medium .select__prefix.multiple::slotted() {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .select--medium .select__tags {\n gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n }\n\n / Pills /\n .select--pill.select--medium .select__combobox {\n border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n }\n\n / Prefix /\n .select__prefix {\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 .select__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 / Clear button /\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\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-primary-600, var(--ng-colors-text-brand-secondary-700));\n border: none;\n background: none;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n / Expand icon /\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n / Listbox /\n .select__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 / Make sure it adheres to the popup's auto size /\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .select__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 .select__options__search-enabled {\n padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n width: 100%;\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n .select__listbox::slotted(small) {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: var(--nile-spacing-md, var(--ng-spacing-md));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\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 height: 15px;\n / Auto layout */\n display: var(--nile-display-flex, var(--ng-display-flex));\n flex-direction: row;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n justify-content: space-between;\n box-sizing: unset;\n }\n\n .tag__prefix[slot='prefix'] {\n height: 14px;\n display: inline-block;\n overflow: hidden;\n }\n\n .tag__prefix[slot='prefix'] img {\n max-height: 100%;\n }\n\n .select__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .select__loader--icon {\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n animation: spin 0.6s linear infinite;\n }\n\n .select__no-results {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .select__invisible{\n opacity: 0;\n }\n\n .select__prefix--from-options {\n margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n \n .select__hide-default{\n display: none;\n }\n\n .virtualized nile-option[selected] {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .virtualized nile-option[selected]::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n .virtualized.no-scroll {\n overflow: hidden !important;\n }\n\n .virtual-select-loader {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n .select__footer.loading, .select__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .virtual-select-loader {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n .select__footer.loading, .select__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n .select.select--open .select__combobox {\n border-color: var(--ng-colors-border-brand);\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset ;\n }\n\n :host([enableDescription]) .option::part(base) {\n height: 41px;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-virtual-select/nile-virtual-select.d.ts CHANGED Viewed

@@ -182,6 +182,10 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     descriptionSearchEnabled: boolean;
     allowHtmlLabel: boolean;
     enableDescription: boolean;
+    /** Legacy: hide the option checkbox (the "Show Selected" footer is kept). */
+    legacy: boolean;
+    /** Variant: show a tick on the right of the selected option (single-select). */
+    tickOnSelect: boolean;
     showListbox: boolean;
     private wasShowSelectedCheckedOnClose;
     /** Gets the validity state object */

package/dist/src/nile-virtual-select/nile-virtual-select.js CHANGED Viewed

@@ -192,6 +192,10 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.descriptionSearchEnabled = false;
         this.allowHtmlLabel = true;
         this.enableDescription = false;
+        /** Legacy: hide the option checkbox (the "Show Selected" footer is kept). */
+        this.legacy = false;
+        /** Variant: show a tick on the right of the selected option (single-select). */
+        this.tickOnSelect = false;
         this.showListbox = false;
         this.wasShowSelectedCheckedOnClose = false;
         this.handleDocumentMouseDown = (event) => {
@@ -1257,7 +1261,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     `;
     }
     getVirtualizedContent() {
-        return VirtualSelectRenderer.getVirtualizedContent(this.data, this.searchEnabled, this.getDisplayText.bind(this), this.value, this.multiple, this.renderItemConfig?.getDisplayText, this.renderItemConfig?.getValue, this.renderItemConfig?.getDescription, this.renderItemConfig?.getPrefix, this.renderItemConfig?.getSuffix, this.showNoResults, this.noResultsMessage, this.optionsLoading || this.loading, this.handleScroll.bind(this), this.allowHtmlLabel, this.enableDescription);
+        return VirtualSelectRenderer.getVirtualizedContent(this.data, this.searchEnabled, this.getDisplayText.bind(this), this.value, this.multiple, this.renderItemConfig?.getDisplayText, this.renderItemConfig?.getValue, this.renderItemConfig?.getDescription, this.renderItemConfig?.getPrefix, this.renderItemConfig?.getSuffix, this.showNoResults, this.noResultsMessage, this.optionsLoading || this.loading, this.handleScroll.bind(this), this.allowHtmlLabel, this.enableDescription, this.tickOnSelect, this.legacy);
     }
     nileInput(value) {
         this.emit('nile-input', value);
@@ -1492,6 +1496,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileVirtualSelect.prototype, "enableDescription", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileVirtualSelect.prototype, "legacy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileVirtualSelect.prototype, "tickOnSelect", void 0);
 __decorate([
     state()
 ], NileVirtualSelect.prototype, "showListbox", void 0);