@aquera/nile-elements 1.2.1-beta-1.0 → 1.2.1-beta-1.1

package/dist/src/nile-side-bar-header/nile-side-bar-header.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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 { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-side-bar-header.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile side-bar-header component.
+ *
+ * @tag nile-side-bar-header
+ *
+ */
+let NileSideBarHeader = class NileSideBarHeader extends NileElement {
+    /**
+     * The styles for nile-side-bar-header
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+		  <div class="header-content">
+      <slot name="logo"></slot>
+      <slot name="expand"></slot>
+    </div>
+			`;
+    }
+};
+NileSideBarHeader = __decorate([
+    customElement('nile-side-bar-header')
+], NileSideBarHeader);
+export { NileSideBarHeader };
+export default NileSideBarHeader;
+//# sourceMappingURL=nile-side-bar-header.js.map

package/dist/src/nile-side-bar-header/nile-side-bar-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-header.js","sourceRoot":"","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAW,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAEjD;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;;IAKT,CAAC;IACJ,CAAC;CAGD,CAAA;AA5BY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CA4B7B;;AAED,eAAe,iBAAiB,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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property} from 'lit/decorators.js';\nimport {styles} from './nile-side-bar-header.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile side-bar-header component.\n *\n * @tag nile-side-bar-header\n *\n */\n@customElement('nile-side-bar-header')\nexport class NileSideBarHeader extends NileElement {\n\n\t/**\n\t * The styles for nile-side-bar-header\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t  <div class=\"header-content\">\n      <slot name=\"logo\"></slot>\n      <slot name=\"expand\"></slot>\n    </div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileSideBarHeader;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-header': NileSideBarHeader;\n  }\n}"]}

package/dist/src/nile-side-bar-logo/index.d.ts

@@ -0,0 +1 @@
+export { NileSideBarLogo } from './nile-side-bar-logo';

package/dist/src/nile-side-bar-logo/index.js

@@ -0,0 +1,2 @@
+export { NileSideBarLogo } from './nile-side-bar-logo';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-side-bar-logo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-side-bar-logo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["export { NileSideBarLogo } from './nile-side-bar-logo';"]}

package/dist/src/nile-side-bar-logo/nile-side-bar-logo.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * SideBarLogo CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-side-bar-logo/nile-side-bar-logo.css.js

@@ -0,0 +1,44 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* 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 { css } from 'lit';
+/**
+ * SideBarLogo CSS
+ */
+export const styles = css `
+	 :host {
+  justify-content: center;
+  height: 100%;
+  flex: 0;
+}
+
+.logo {
+  max-height: 32px;
+  object-fit: contain;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.logo.expanded {
+  display: block;
+}
+
+ 
+.logo.collapsed {
+  display: none;
+}
+
+ 
+:host-context(nile-side-bar[collapsed]) .logo.expanded {
+  display: none;
+}
+
+:host-context(nile-side-bar[collapsed]) .logo.collapsed {
+  display: block;
+}
+
+`;
+export default [styles];
+//# sourceMappingURL=nile-side-bar-logo.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-logo.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-logo/nile-side-bar-logo.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BxB,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 * SideBarLogo CSS\n */\nexport const styles = css`\n\t :host {\n  justify-content: center;\n  height: 100%;\n  flex: 0;\n}\n\n.logo {\n  max-height: 32px;\n  object-fit: contain;\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.logo.expanded {\n  display: block;\n}\n\n \n.logo.collapsed {\n  display: none;\n}\n\n \n:host-context(nile-side-bar[collapsed]) .logo.expanded {\n  display: none;\n}\n\n:host-context(nile-side-bar[collapsed]) .logo.collapsed {\n  display: block;\n}\n\n`;\n\nexport default [styles];"]}

package/dist/src/nile-side-bar-logo/nile-side-bar-logo.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile side-bar-logo component.
+ *
+ * @tag nile-side-bar-logo
+ *
+ * @attr src - The image URL for the expanded (full) logo
+ * @attr collapsed-src - The image URL for the collapsed (icon) logo
+ */
+export declare class NileSideBarLogo extends NileElement {
+    /**
+     * Expanded logo (default full size)
+     */
+    src: string;
+    /**
+     * Collapsed logo (icon only)
+     */
+    collapsedSrc: string;
+    static get styles(): CSSResultArray;
+    render(): TemplateResult;
+}
+export default NileSideBarLogo;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-side-bar-logo': NileSideBarLogo;
+    }
+}

package/dist/src/nile-side-bar-logo/nile-side-bar-logo.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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 { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-side-bar-logo.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile side-bar-logo component.
+ *
+ * @tag nile-side-bar-logo
+ *
+ * @attr src - The image URL for the expanded (full) logo
+ * @attr collapsed-src - The image URL for the collapsed (icon) logo
+ */
+let NileSideBarLogo = class NileSideBarLogo extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Expanded logo (default full size)
+         */
+        this.src = 'https://assets.aquera.io/img/aquera-logo-blue.svg';
+        /**
+         * Collapsed logo (icon only)
+         */
+        this.collapsedSrc = 'https://assets.aqueralabs.com/img/aquera-logo-mini.png';
+    }
+    static get styles() {
+        return [styles];
+    }
+    render() {
+        return html `
+      <img class="logo expanded" src="${this.src}" alt="Logo" part="logo-expanded" />
+      <img class="logo collapsed" src="${this.collapsedSrc}" alt="Logo icon" part="logo-collapsed" />
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: true, reflect: true })
+], NileSideBarLogo.prototype, "src", void 0);
+__decorate([
+    property({ type: String, attribute: 'collapsed-src' })
+], NileSideBarLogo.prototype, "collapsedSrc", void 0);
+NileSideBarLogo = __decorate([
+    customElement('nile-side-bar-logo')
+], NileSideBarLogo);
+export { NileSideBarLogo };
+export default NileSideBarLogo;
+//# sourceMappingURL=nile-side-bar-logo.js.map

package/dist/src/nile-side-bar-logo/nile-side-bar-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-logo.js","sourceRoot":"","sources":["../../../src/nile-side-bar-logo/nile-side-bar-logo.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,0BAA0B,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;GAOG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;QACL;;WAEG;QAEH,QAAG,GAAW,mDAAmD,CAAC;QAClE;;WAEG;QAEH,iBAAY,GAAW,wDAAwD,CAAC;IAYlF,CAAC;IAVQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;wCACyB,IAAI,CAAC,GAAG;yCACP,IAAI,CAAC,YAAY;KACrD,CAAC;IACJ,CAAC;CACF,CAAA;AAjBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACO;AAKlE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;qDACyB;AAVrE,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAsB3B;;AAED,eAAe,eAAe,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-logo.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-logo component.\n *\n * @tag nile-side-bar-logo\n *\n * @attr src - The image URL for the expanded (full) logo\n * @attr collapsed-src - The image URL for the collapsed (icon) logo\n */\n@customElement('nile-side-bar-logo')\nexport class NileSideBarLogo extends NileElement {\n  /**\n   * Expanded logo (default full size)\n   */\n  @property({ type: String, attribute: true, reflect: true })\n  src: string = 'https://assets.aquera.io/img/aquera-logo-blue.svg';\n  /**\n   * Collapsed logo (icon only)\n   */\n  @property({ type: String, attribute: 'collapsed-src' })\n  collapsedSrc: string = 'https://assets.aqueralabs.com/img/aquera-logo-mini.png';\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <img class=\"logo expanded\" src=\"${this.src}\" alt=\"Logo\" part=\"logo-expanded\" />\n      <img class=\"logo collapsed\" src=\"${this.collapsedSrc}\" alt=\"Logo icon\" part=\"logo-collapsed\" />\n    `;\n  }\n}\n\nexport default NileSideBarLogo;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-logo': NileSideBarLogo;\n  }\n}\n"]}

package/dist/src/nile-sidebar/index.js

@@ -39,7 +39,7 @@ let NileSidebar = class NileSidebar extends LitElement {
               height="31.06px"
               tabindex="1"
             />
-          </a>
+          </a>          
           <div class="menu-group">
             <slot name="menu"></slot>
           </div>
@@ -56,26 +56,23 @@ let NileSidebar = class NileSidebar extends LitElement {
 NileSidebar.styles = css `
     :host {
       background-color: var(--nile-alert-color-background-base);
-      border-right: 1px solid var(--nile-colors-neutral-400);
+      border-right: 1px solid var(--nile-colors-neutral-400);      
       min-height: 100vh;
       background: var(--nile-colors-neutral-100);
       border: 1px solid var(--nile-colors-neutral-400);
-      -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
     }
     :host([showSidebar=true]) {
       min-width: 240px;
     }
     .nile-logo {
-      margin: var(--nile-spacing-2xl);
+      margin: 24px;
       display: block;
-      margin-bottom: var(--nile-spacing-lg);
+      margin-bottom: 12px;
     }
 
     .menu-group {
-      margin-left: var(--nile-spacing-2xl);
-      margin-right: var(--nile-spacing-2xl);
+      margin-left: 24px;
+      margin-right: 24px;
     }
 
     .view-component {
@@ -86,15 +83,15 @@ NileSidebar.styles = css `
     .view-component__item {
       background-color: var(--nile-colors-white-base);
       // padding: 1rem;
-      border-radius: var(--nile-radius-sm);
+      border-radius: 3px;
       border: solid 1px #eee;
     }
 
     .nile-menu__hr {
-      border-bottom: solid 1px var(--nile-colors-dark-100);
-      margin-top: var(--nile-spacing-lg) !important;
-      margin-bottom: var(--nile-spacing-lg) !important;
-      background-color: var(--nile-colors-dark-100);
+      border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+      margin-top: 12px !important;
+      margin-bottom: 12px !important;
+      background-color: rgba(0, 0, 0, 0.1);
     }
 
     .nds-menu--bottom {

package/dist/src/nile-sidebar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-sidebar/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAgBvD;;;;;;GAMG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAuDL;;WAEG;QAEH,UAAK,GAAG,EAAE,CAAC;QAEX;;WAEG;QAEH,gBAAW,GAAG,KAAK,CAAC;IAmCtB,CAAC;IAjCC,IAAI,cAAc;QAChB,OAAO;YACL,kBAAkB,EAAE,IAAI,CAAC,WAAW;SACrC,CAAC;IACJ,CAAC;IAED,oDAAoD;IAE3C,MAAM;QACb,OAAO,IAAI,CAAA;wCACyB,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;KAqBhE,CAAC;IACJ,CAAC;;AAlGe,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoD3B,AApDqB,CAoDpB;AAMF;IADC,QAAQ,EAAE;0CACA;AAMX;IADC,QAAQ,EAAE;gDACS;AAjET,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoGvB","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * An nile-menu element.\n */\n\ninterface MenuItem {\n  name: string;\n  icon: string;\n  href: string;\n}\n\ninterface MenuItemList {\n  [key: string]: MenuItem;\n}\n\n/**\n * An nile-sidebar element.\n *\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n@customElement('nile-sidebar')\nexport class NileSidebar extends LitElement {\n  static override styles = css`\n    :host {\n      background-color: var(--nile-alert-color-background-base);\n      border-right: 1px solid var(--nile-colors-neutral-400);\n      min-height: 100vh;\n      background: var(--nile-colors-neutral-100);\n      border: 1px solid var(--nile-colors-neutral-400);\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    :host([showSidebar=true]) {\n      min-width: 240px;\n    }\n    .nile-logo {\n      margin: var(--nile-spacing-2xl);\n      display: block;\n      margin-bottom: var(--nile-spacing-lg);\n    }\n\n    .menu-group {\n      margin-left: var(--nile-spacing-2xl);\n      margin-right: var(--nile-spacing-2xl);\n    }\n\n    .view-component {\n      background-color: var(--nile-colors-white-base);\n      min-width: 240px;\n    }\n    // padding: 3rem;\n    .view-component__item {\n      background-color: var(--nile-colors-white-base);\n      // padding: 1rem;\n      border-radius: var(--nile-radius-sm);\n      border: solid 1px #eee;\n    }\n\n    .nile-menu__hr {\n      border-bottom: solid 1px var(--nile-colors-dark-100);\n      margin-top: var(--nile-spacing-lg) !important;\n      margin-bottom: var(--nile-spacing-lg) !important;\n      background-color: var(--nile-colors-dark-100);\n    }\n\n    .nds-menu--bottom {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .nds-menu--active .nile-logo {\n      display: none;\n    }\n  `;\n\n  /**\n   * Button Lab\n   */\n  @property()\n  title = '';\n\n  /**\n   * Hide Sidebar\n   */\n  @property()\n  showSidebar = false;\n\n  get buttonClassMap() {\n    return {\n      'nds-menu--active': this.showSidebar\n    };\n  }\n\n  // class=\"nds-menu ${classMap(this.buttonClassMap)}\"\n\n  override render() {\n    return html`\n      <div class=\"nile-menu--wrapper  ${classMap(this.buttonClassMap)}\" >\n        <div class=\"nile-menu-group\">\n          <a class=\"nile-logo\" href=\"/\">\n            <img\n              src=\"https://assets.aquera.io/img/aquera-logo-blue.svg\"\n              alt=\"Aquera\"\n              width=\"112.94px\"\n              height=\"31.06px\"\n              tabindex=\"1\"\n            />\n          </a>\n          <div class=\"menu-group\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n        <div class=\"\">\n          <div class=\"nds-menu--bottom\">\n            <slot name=\"bottom\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-sidebar': NileSidebar;\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-sidebar/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAgBvD;;;;;;GAMG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAoDL;;WAEG;QAEH,UAAK,GAAG,EAAE,CAAC;QAEX;;WAEG;QAEH,gBAAW,GAAG,KAAK,CAAC;IAmCtB,CAAC;IAjCC,IAAI,cAAc;QAChB,OAAO;YACL,kBAAkB,EAAE,IAAI,CAAC,WAAW;SACrC,CAAC;IACJ,CAAC;IAED,oDAAoD;IAE3C,MAAM;QACb,OAAO,IAAI,CAAA;wCACyB,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;KAqBhE,CAAC;IACJ,CAAC;;AA/Fe,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiD3B,AAjDqB,CAiDpB;AAMF;IADC,QAAQ,EAAE;0CACA;AAMX;IADC,QAAQ,EAAE;gDACS;AA9DT,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAiGvB","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * An nile-menu element.\n */\n\ninterface MenuItem {\n  name: string;\n  icon: string;\n  href: string;\n}\n\ninterface MenuItemList {\n  [key: string]: MenuItem;\n}\n\n/**\n * An nile-sidebar element.\n *\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n@customElement('nile-sidebar')\nexport class NileSidebar extends LitElement {\n  static override styles = css`\n    :host {\n      background-color: var(--nile-alert-color-background-base);\n      border-right: 1px solid var(--nile-colors-neutral-400);      \n      min-height: 100vh;\n      background: var(--nile-colors-neutral-100);\n      border: 1px solid var(--nile-colors-neutral-400);\n    }\n    :host([showSidebar=true]) {\n      min-width: 240px;\n    }\n    .nile-logo {\n      margin: 24px;\n      display: block;\n      margin-bottom: 12px;\n    }\n\n    .menu-group {\n      margin-left: 24px;\n      margin-right: 24px;\n    }\n\n    .view-component {\n      background-color: var(--nile-colors-white-base);\n      min-width: 240px;\n    }\n    // padding: 3rem;\n    .view-component__item {\n      background-color: var(--nile-colors-white-base);\n      // padding: 1rem;\n      border-radius: 3px;\n      border: solid 1px #eee;\n    }\n\n    .nile-menu__hr {\n      border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n      margin-top: 12px !important;\n      margin-bottom: 12px !important;\n      background-color: rgba(0, 0, 0, 0.1);\n    }\n\n    .nds-menu--bottom {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .nds-menu--active .nile-logo {\n      display: none;\n    }\n  `;\n\n  /**\n   * Button Lab\n   */\n  @property()\n  title = '';\n\n  /**\n   * Hide Sidebar\n   */\n  @property()\n  showSidebar = false;\n\n  get buttonClassMap() {\n    return {\n      'nds-menu--active': this.showSidebar\n    };\n  }\n\n  // class=\"nds-menu ${classMap(this.buttonClassMap)}\"\n  \n  override render() {\n    return html`\n      <div class=\"nile-menu--wrapper  ${classMap(this.buttonClassMap)}\" >\n        <div class=\"nile-menu-group\">\n          <a class=\"nile-logo\" href=\"/\">\n            <img\n              src=\"https://assets.aquera.io/img/aquera-logo-blue.svg\"\n              alt=\"Aquera\"\n              width=\"112.94px\"\n              height=\"31.06px\"\n              tabindex=\"1\"\n            />\n          </a>          \n          <div class=\"menu-group\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n        <div class=\"\">\n          <div class=\"nds-menu--bottom\">\n            <slot name=\"bottom\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-sidebar': NileSidebar;\n  }\n}\n"]}

package/dist/src/nile-sidebar-menu/nile-sidebar-menu.css.js

@@ -17,11 +17,8 @@ export const styles = css `
     height: 100%;
     box-sizing: border-box;
     display: flex;
-    padding: var(--nile-spacing-none) var(--nile-spacing-xl);
+    padding: 0 16px;
     flex-direction: column;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .submenu__box {
@@ -30,19 +27,19 @@ export const styles = css `
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
-    padding: var(--nile-spacing-lg) var(--nile-spacing-none);
+    padding:12px 0;
   }
 
   .sidemenu__items-list {
     display:flex;
     flex-direction: column;
-    gap: var(--nile-spacing-md);
+    gap: 8px;
   }
 
   .footer {
     display:flex;
     flex-direction: column;
-    gap: var(--nile-spacing-md);
+    gap: 8px;
   }
 
 `;

package/dist/src/nile-sidebar-menu/nile-sidebar-menu.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-sidebar-menu.css.js","sourceRoot":"","sources":["../../../src/nile-sidebar-menu/nile-sidebar-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxB,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 * SidebarMenu CSS\n */\nexport const styles = css`\n  :host {\n    background-color: var(--nile-sidebar-menu-background-color);\n    --min-width: 80px;\n    min-width: var(--min-width);\n    width: max-content;\n    height: 100%;\n    box-sizing: border-box;\n    display: flex;\n    padding: var(--nile-spacing-none) var(--nile-spacing-xl);\n    flex-direction: column;\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  .submenu__box {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: 100%;\n    padding: var(--nile-spacing-lg) var(--nile-spacing-none);\n  }\n\n  .sidemenu__items-list {\n    display:flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-md);\n  }\n\n  .footer {\n    display:flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-md);\n  }\n\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-sidebar-menu.css.js","sourceRoot":"","sources":["../../../src/nile-sidebar-menu/nile-sidebar-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB,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 * SidebarMenu CSS\n */\nexport const styles = css`\n  :host {\n    background-color: var(--nile-sidebar-menu-background-color);\n    --min-width: 80px;\n    min-width: var(--min-width);\n    width: max-content;\n    height: 100%;\n    box-sizing: border-box;\n    display: flex;\n    padding: 0 16px;\n    flex-direction: column;\n  }\n\n  .submenu__box {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: 100%;\n    padding:12px 0;\n  }\n\n  .sidemenu__items-list {\n    display:flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .footer {\n    display:flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.js

@@ -11,29 +11,26 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     --min-width: 280px;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .nile__sidebar-menu-item {
     display: flex;
     align-items: center;
-    padding: var(--nile-spacing-md);
-    gap: var(--nile-spacing-xl);
+    padding: 12px;
+    gap: 15px;
     min-width: var(--min-width);
     width: max-content;
     box-sizing: border-box;
 
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-4);
-    font-weight: var(--nile-font-weight-medium);
+    font-weight: 500;
     line-height: var(--nile-line-height-medium);
   }
 
   .nile__sidebar-menu-item:hover {
     background-color: var(--nile-colors-neutral-100);
-    border-radius: var(--nile-radius-sm);
+    border-radius: 6px;
   }
 
   .hide-sidebar-menu-items{

package/dist/src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-sidebar-menu-items.css.js","sourceRoot":"","sources":["../../../src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCxB,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 * SidebarMenuItems CSS\n */\nexport const styles = css`\n  :host {\n    --min-width: 280px;\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  .nile__sidebar-menu-item {\n    display: flex;\n    align-items: center;\n    padding: var(--nile-spacing-md);\n    gap: var(--nile-spacing-xl);\n    min-width: var(--min-width);\n    width: max-content;\n    box-sizing: border-box;\n\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-4);\n    font-weight: var(--nile-font-weight-medium);\n    line-height: var(--nile-line-height-medium);\n  }\n\n  .nile__sidebar-menu-item:hover {\n    background-color: var(--nile-colors-neutral-100);\n    border-radius: var(--nile-radius-sm);\n  }\n\n  .hide-sidebar-menu-items{\n    min-width:48px;\n  }\n\n  .hide-items {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-sidebar-menu-items.css.js","sourceRoot":"","sources":["../../../src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,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 * SidebarMenuItems CSS\n */\nexport const styles = css`\n  :host {\n    --min-width: 280px;\n  }\n\n  .nile__sidebar-menu-item {\n    display: flex;\n    align-items: center;\n    padding: 12px;\n    gap: 15px;\n    min-width: var(--min-width);\n    width: max-content;\n    box-sizing: border-box;\n\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-4);\n    font-weight: 500;\n    line-height: var(--nile-line-height-medium);\n  }\n\n  .nile__sidebar-menu-item:hover {\n    background-color: var(--nile-colors-neutral-100);\n    border-radius: 6px;\n  }\n\n  .hide-sidebar-menu-items{\n    min-width:48px;\n  }\n\n  .hide-items {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-sidebar-menu-items/nile-sidebar-menu-items.js

@@ -50,7 +50,6 @@ let NileSidebarMenuItems = class NileSidebarMenuItems extends NileElement {
               name="${this.iconValue}"
               aria-label="${this.iconValue}"
               size="24"
-              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             ></nile-icon>`
             : ``}
         <slot

package/dist/src/nile-sidebar-menu-items/nile-sidebar-menu-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-sidebar-menu-items.js","sourceRoot":"","sources":["../../../src/nile-sidebar-menu-items/nile-sidebar-menu-items.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,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QASO,cAAS,GAAG,EAAE,CAAC,CAAC,gCAAgC;QAChB,WAAM,GAAG,KAAK,CAAC;QAElD,cAAS,GAAG,KAAK,CAAC;QAkC3B,gBAAgB;IAClB,CAAC;IA9CC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAMD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,yBAAyB,EAAE,IAAI;YAC/B,yBAAyB,EAAE,IAAI,CAAC,SAAS;SAC1C,CAAC;;UAEA,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;sBACM,IAAI,CAAC,SAAS;4BACR,IAAI,CAAC,SAAS;;;0BAGhB;YAChB,CAAC,CAAC,EAAE;;kBAEI,QAAQ,CAAC;YACf,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC;;;KAGP,CAAC;IACJ,CAAC;CAGF,CAAA;AAtCa;IAAX,QAAQ,EAAE;uDAAgB;AACiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAgB;AAElD;IAAR,KAAK,EAAE;uDAAmB;AAZhB,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA+ChC;;AAED,eAAe,oBAAoB,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 { styles } from './nile-sidebar-menu-items.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Nile sidebar-menu-items component.\n *\n * @tag nile-sidebar-menu-items\n *\n */\n@customElement('nile-sidebar-menu-items')\nexport class NileSidebarMenuItems extends NileElement {\n  /**\n   * The styles for nile-sidebar-menu-items\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  @property() iconValue = ''; // name of the icon we are using\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  @state() collapsed = false;\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <div\n        class=${classMap({\n          'nile__sidebar-menu-item': true,\n          'hide-sidebar-menu-items': this.collapsed,\n        })}\n      >\n        ${this.iconValue\n          ? html`<nile-icon\n              name=\"${this.iconValue}\"\n              aria-label=\"${this.iconValue}\"\n              size=\"24\"\n              method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n            ></nile-icon>`\n          : ``}\n        <slot\n          class=${classMap({\n            'hide-items': this.collapsed,\n          })}\n        ></slot>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileSidebarMenuItems;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-sidebar-menu-items': NileSidebarMenuItems;\n  }\n}\n"]}
+{"version":3,"file":"nile-sidebar-menu-items.js","sourceRoot":"","sources":["../../../src/nile-sidebar-menu-items/nile-sidebar-menu-items.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,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QASO,cAAS,GAAG,EAAE,CAAC,CAAC,gCAAgC;QAChB,WAAM,GAAG,KAAK,CAAC;QAElD,cAAS,GAAG,KAAK,CAAC;QAiC3B,gBAAgB;IAClB,CAAC;IA7CC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAMD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,yBAAyB,EAAE,IAAI;YAC/B,yBAAyB,EAAE,IAAI,CAAC,SAAS;SAC1C,CAAC;;UAEA,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;sBACM,IAAI,CAAC,SAAS;4BACR,IAAI,CAAC,SAAS;;0BAEhB;YAChB,CAAC,CAAC,EAAE;;kBAEI,QAAQ,CAAC;YACf,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC;;;KAGP,CAAC;IACJ,CAAC;CAGF,CAAA;AArCa;IAAX,QAAQ,EAAE;uDAAgB;AACiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAgB;AAElD;IAAR,KAAK,EAAE;uDAAmB;AAZhB,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA8ChC;;AAED,eAAe,oBAAoB,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 { styles } from './nile-sidebar-menu-items.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Nile sidebar-menu-items component.\n *\n * @tag nile-sidebar-menu-items\n *\n */\n@customElement('nile-sidebar-menu-items')\nexport class NileSidebarMenuItems extends NileElement {\n  /**\n   * The styles for nile-sidebar-menu-items\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  @property() iconValue = ''; // name of the icon we are using\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  @state() collapsed = false;\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <div\n        class=${classMap({\n          'nile__sidebar-menu-item': true,\n          'hide-sidebar-menu-items': this.collapsed,\n        })}\n      >\n        ${this.iconValue\n          ? html`<nile-icon\n              name=\"${this.iconValue}\"\n              aria-label=\"${this.iconValue}\"\n              size=\"24\"\n            ></nile-icon>`\n          : ``}\n        <slot\n          class=${classMap({\n            'hide-items': this.collapsed,\n          })}\n        ></slot>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileSidebarMenuItems;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-sidebar-menu-items': NileSidebarMenuItems;\n  }\n}\n"]}

package/dist/src/nile-sidebar-wrapper/nile-sidebar-wrapper.css.js

@@ -11,9 +11,6 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: block;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .wrapper-box {
@@ -34,7 +31,7 @@ export const styles = css `
   .body-content {
     display: flex;
     height: 100%;
-    background-color: var(--nile-colors-red-500);
+    background-color: red;
   }
 
   .sidebar__content--overlay {

package/dist/src/nile-sidebar-wrapper/nile-sidebar-wrapper.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-sidebar-wrapper.css.js","sourceRoot":"","sources":["../../../src/nile-sidebar-wrapper/nile-sidebar-wrapper.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGxB,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 * SidebarWrapper CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\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  .wrapper-box {\n    display: flex;\n    height: 100vh;\n    width: 100%;\n  }\n\n  .wrapper-box--right {\n    flex-direction: row-reverse;\n  }\n\n  .sidebar-content {\n    display: flex;\n    height: 100%;\n  }\n\n  .body-content {\n    display: flex;\n    height: 100%;\n    background-color: var(--nile-colors-red-500);\n  }\n\n  .sidebar__content--overlay {\n    position: absolute;\n    z-index: 1000;\n  }\n\n  .sidebar__content--overlay--right {\n    right: 0;\n  }\n\n  .sidebar__content--overlay--left {\n    left: 0;\n  }\n\n  .body__content--overlay {\n    position: absolute;\n    left: 0;\n    opacity:0.5;\n    background-color:var(--nile-sidebar-wrapper-overlay-background-color);\n  }\n\n  /* For left side  */\n  .sidebar__content--overlay-open-left {\n    animation: slide-in-left 0.3s ease-in-out forwards;\n  }\n\n  .sidebar__content--overlay-closed-left {\n    animation: slide-out-left 0.3s ease-in-out forwards;\n  }\n\n  @keyframes slide-in-left {\n    0% {\n      transform: translateX(-100%);\n    }\n\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  @keyframes slide-out-left {\n    0% {\n      transform: translateX(0);\n    }\n\n    100% {\n      transform: translateX(-100%);\n    }\n  }\n\n  /* For right side */\n  .sidebar__content--overlay-open-right {\n    animation: slide-in-right 0.3s ease-in-out forwards;\n  }\n\n  .sidebar__content--overlay-closed-right {\n    animation: slide-out-right 0.3s ease-in-out forwards;\n  }\n\n  @keyframes slide-in-right {\n    0% {\n      transform: translateX(100%);\n    }\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  @keyframes slide-out-right {\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-sidebar-wrapper.css.js","sourceRoot":"","sources":["../../../src/nile-sidebar-wrapper/nile-sidebar-wrapper.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqGxB,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 * SidebarWrapper CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .wrapper-box {\n    display: flex;\n    height: 100vh;\n    width: 100%;\n  }\n\n  .wrapper-box--right {\n    flex-direction: row-reverse;\n  }\n\n  .sidebar-content {\n    display: flex;\n    height: 100%;\n  }\n\n  .body-content {\n    display: flex;\n    height: 100%;\n    background-color: red;\n  }\n\n  .sidebar__content--overlay {\n    position: absolute;\n    z-index: 1000;\n  }\n\n  .sidebar__content--overlay--right {\n    right: 0;\n  }\n\n  .sidebar__content--overlay--left {\n    left: 0;\n  }\n\n  .body__content--overlay {\n    position: absolute;\n    left: 0;\n    opacity:0.5;\n    background-color:var(--nile-sidebar-wrapper-overlay-background-color);\n  }\n\n  /* For left side  */\n  .sidebar__content--overlay-open-left {\n    animation: slide-in-left 0.3s ease-in-out forwards;\n  }\n\n  .sidebar__content--overlay-closed-left {\n    animation: slide-out-left 0.3s ease-in-out forwards;\n  }\n\n  @keyframes slide-in-left {\n    0% {\n      transform: translateX(-100%);\n    }\n\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  @keyframes slide-out-left {\n    0% {\n      transform: translateX(0);\n    }\n\n    100% {\n      transform: translateX(-100%);\n    }\n  }\n\n  /* For right side */\n  .sidebar__content--overlay-open-right {\n    animation: slide-in-right 0.3s ease-in-out forwards;\n  }\n\n  .sidebar__content--overlay-closed-right {\n    animation: slide-out-right 0.3s ease-in-out forwards;\n  }\n\n  @keyframes slide-in-right {\n    0% {\n      transform: translateX(100%);\n    }\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  @keyframes slide-out-right {\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-header-item/nile-table-header-item.css.js

@@ -18,6 +18,10 @@ export const styles = css `
     -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
     -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
     text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    
   }
 
   .header__item__wrapper{

package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAE1F;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmErB,qBAAqB;IACrB,aAAa;CAChB,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';\nimport { resizableHeaderStyles, resizerStyles } from '../internal/resizable-table-styles';\n\n/**\n * TableHeaderItem CSS\n */\nexport const styles = css`\n  :host {\n    --cell-min-width: auto;\n    --cell-width: auto;\n    display: table-cell;\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  .header__item__wrapper{\n    min-width:var(--cell-min-width);\n    width:var(--cell-width);\n    display:flex;\n    align-items:center;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-3-x , var(--ng-spacing-3xl));\n    min-height: 44px;\n    height: 44px;\n  }\n\n  .headers {\n    overflow:hidden;\n    display: flex;\n    align-items: center;\n    height: auto;\n    width: 100%;\n    gap: var(--nile-spacing-md , var(--ng-spacing-xs));\n    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2 , var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));\n    font-style: normal;\n    /* line-height: var(--nile-type-scale-5); */\n    line-height: normal;\n  }\n\n  nile-icon {\n    cursor: pointer;\n  }\n\n  .sorting__icons {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .sorting__icons nile-icon:hover {\n    opacity: 0.4;\n  }\n\n  .hover__arrow {\n    opacity: 0.6;\n    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n  }\n\n  .headers:hover .hover__arrow {\n    /* opacity: 0.3; */\n    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n  }\n\n  .stroke-width {\n    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n  }\n\n  ${resizableHeaderStyles}\n  ${resizerStyles}\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAE1F;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuErB,qBAAqB;IACrB,aAAa;CAChB,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';\nimport { resizableHeaderStyles, resizerStyles } from '../internal/resizable-table-styles';\n\n/**\n * TableHeaderItem CSS\n */\nexport const styles = css`\n  :host {\n    --cell-min-width: auto;\n    --cell-width: auto;\n    display: table-cell;\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    position: sticky;\n    top: 0;\n    z-index: 10;\n    \n  }\n\n  .header__item__wrapper{\n    min-width:var(--cell-min-width);\n    width:var(--cell-width);\n    display:flex;\n    align-items:center;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-3-x , var(--ng-spacing-3xl));\n    min-height: 44px;\n    height: 44px;\n  }\n\n  .headers {\n    overflow:hidden;\n    display: flex;\n    align-items: center;\n    height: auto;\n    width: 100%;\n    gap: var(--nile-spacing-md , var(--ng-spacing-xs));\n    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2 , var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));\n    font-style: normal;\n    /* line-height: var(--nile-type-scale-5); */\n    line-height: normal;\n  }\n\n  nile-icon {\n    cursor: pointer;\n  }\n\n  .sorting__icons {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .sorting__icons nile-icon:hover {\n    opacity: 0.4;\n  }\n\n  .hover__arrow {\n    opacity: 0.6;\n    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n  }\n\n  .headers:hover .hover__arrow {\n    /* opacity: 0.3; */\n    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n  }\n\n  .stroke-width {\n    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n  }\n\n  ${resizableHeaderStyles}\n  ${resizerStyles}\n`;\n\nexport default [styles];\n"]}

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

@@ -502,6 +502,10 @@ export const styles = css `
     color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
   }
 
+  .virtualized.no-scroll {
+    overflow: hidden !important;
+  }
+
   .virtual-select-loader {
     position: absolute;
     display: flex;

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

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAygBxB,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  [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-sm));\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-brand-tertiary-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  }\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  /* 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-brand));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\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-neutral-100, 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    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\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-lg, 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-xxxsmall, 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    overflow: auto;\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  }\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  .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`;\n\nexport default [styles];\n"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6gBxB,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  [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-sm));\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-brand-tertiary-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  }\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  /* 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-brand));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\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-neutral-100, 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    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\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-lg, 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-xxxsmall, 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    overflow: auto;\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  }\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`;\n\nexport default [styles];\n"]}