@aquera/nile-elements 1.3.9-beta-1.2 → 1.3.9-beta-1.3

package/dist/src/nile-side-bar-group-item/nile-side-bar-group-item.css.js

@@ -9,60 +9,65 @@ import { css } from 'lit';
  * SideBarGroupItem CSS
  */
 export const styles = css `
-	 :host {
-  display: block;
-}
+  :host {
+    display: block;
+  }
 
-.group-item {
-  display: flex;
-  flex-direction: column;
-}
+  .group-item {
+    display: flex;
+    flex-direction: column;
+    height: var(--nile-height-38px, var(--ng-spacing-40px));
+    width: var(--nile-width-208px, var(--ng-spacing-264));
+    overflow: hidden;
+  }
 
-.item-link {
-  display: flex;
-  align-items: center;
-padding-top: var(--nile-spacing-lg);
-padding-bottom: var(--nile-spacing-lg);
-padding-left: var(--nile-spacing-md);
-padding-right: var(--nile-spacing-md);
-  cursor: pointer;
-  color: var(--nile-colors-dark-900);
-  text-decoration: none;
-  font-size: var(--nile-type-scale-3);
-  line-height: 1.4;
-}
+  .item-link {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100%;
+    width: 100%;
+    padding-top: var(--nile-spacing-lg, var(--ng-spacing-md));
+    padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-md));
+    padding-left: var(--nile-spacing-md, var(--ng-spacing-lg));
+    padding-right: var(--nile-spacing-md, var(--ng-spacing-lg));
+    cursor: pointer;
+    color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));
+    text-decoration: none;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    line-height: 1.4;
+    box-sizing: border-box;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+  }
 
-.item-link:hover {
-  background: var(--nile-colors-neutral-400);
-  border-radius: var(--nile-radius-sm);
-}
+  .item-link:hover {
+    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
 
+  ::slotted(nile-side-bar-group-item-icon) {
+    flex-shrink: 0;
+  }
 
+  ::slotted(nile-side-bar-group-item-text) {
+    flex-grow: 1;
+  }
 
-::slotted(nile-side-bar-group-item-icon) {
-  flex-shrink: 0;
-}
-
-::slotted(nile-side-bar-group-item-text) {
-  flex-grow: 1;
-}
-:host([active]) [part="link"] {
-  background:    var(--nile-colors-primary-100);
-  border-radius: var(--nile-radius-sm);
-  font-weight: var(--nile-font-weight-semibold);
-}
-
-:host([collapsed]) .group-item {
-height: 38px;
-width: 38px;
-}
-:host([disabled]) .item-link {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: not-allowed;
-}
+  :host([active]) [part="link"] {
+    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
 
+  :host([collapsed]) .group-item {
+    height: 38px;
+    width: 38px;
+  }
 
+  :host([disabled]) .item-link {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-side-bar-group-item.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-group-item.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group-item/nile-side-bar-group-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB,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 * SideBarGroupItem CSS\n */\nexport const styles = css`\n\t :host {\n  display: block;\n}\n\n.group-item {\n  display: flex;\n  flex-direction: column;\n}\n\n.item-link {\n  display: flex;\n  align-items: center;\npadding-top: var(--nile-spacing-lg);\npadding-bottom: var(--nile-spacing-lg);\npadding-left: var(--nile-spacing-md);\npadding-right: var(--nile-spacing-md);\n  cursor: pointer;\n  color: var(--nile-colors-dark-900);\n  text-decoration: none;\n  font-size: var(--nile-type-scale-3);\n  line-height: 1.4;\n}\n\n.item-link:hover {\n  background: var(--nile-colors-neutral-400);\n  border-radius: var(--nile-radius-sm);\n}\n\n\n\n::slotted(nile-side-bar-group-item-icon) {\n  flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-group-item-text) {\n  flex-grow: 1;\n}\n:host([active]) [part=\"link\"] {\n  background:    var(--nile-colors-primary-100);\n  border-radius: var(--nile-radius-sm);\n  font-weight: var(--nile-font-weight-semibold);\n}\n\n:host([collapsed]) .group-item {\nheight: 38px;\nwidth: 38px;\n}\n:host([disabled]) .item-link {\n  opacity: 0.5;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-side-bar-group-item.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group-item/nile-side-bar-group-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DxB,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 * SideBarGroupItem CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .group-item {\n    display: flex;\n    flex-direction: column;\n    height: var(--nile-height-38px, var(--ng-spacing-40px));\n    width: var(--nile-width-208px, var(--ng-spacing-264));\n    overflow: hidden;\n  }\n\n  .item-link {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    height: 100%;\n    width: 100%;\n    padding-top: var(--nile-spacing-lg, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-md, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-md, var(--ng-spacing-lg));\n    cursor: pointer;\n    color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n    text-decoration: none;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    line-height: 1.4;\n    box-sizing: border-box;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n  }\n\n  .item-link:hover {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  ::slotted(nile-side-bar-group-item-icon) {\n    flex-shrink: 0;\n  }\n\n  ::slotted(nile-side-bar-group-item-text) {\n    flex-grow: 1;\n  }\n\n  :host([active]) [part=\"link\"] {\n    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  :host([collapsed]) .group-item {\n    height: 38px;\n    width: 38px;\n  }\n\n  :host([disabled]) .item-link {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.css.js

@@ -26,7 +26,10 @@ export const styles = css `
   nile-tooltip::part(body) {
     width: max-content;
     height: max-content;
-    padding: var(--nile-spacing-sm);
+    padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding-left: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    padding-right: var(--nile-spacing-sm, var(--ng-spacing-sm));
     overflow-x: hidden;
   }
 `;

package/dist/src/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-group-item-icon.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-right: 12px;\n    color: inherit;\n  }\n\n  ::slotted(nile-icon) {\n    width: 100%;\n    height: 100%;\n    color: inherit;\n    fill: currentColor;\n  }\n\n \n  :host-context(nile-side-bar[collapsed]) {\n    margin-right: 0;\n    width: 100%;       \n    justify-content: center;\n  }\n\n  nile-tooltip::part(body) {\n    width: max-content;\n    height: max-content;\n    padding: var(--nile-spacing-sm);\n    overflow-x: hidden;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-side-bar-group-item-icon.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-right: 12px;\n    color: inherit;\n  }\n\n  ::slotted(nile-icon) {\n    width: 100%;\n    height: 100%;\n    color: inherit;\n    fill: currentColor;\n  }\n\n \n  :host-context(nile-side-bar[collapsed]) {\n    margin-right: 0;\n    width: 100%;       \n    justify-content: center;\n  }\n\n  nile-tooltip::part(body) {\n    width: max-content;\n    height: max-content;\n    padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-left: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    padding-right: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    overflow-x: hidden;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.js

@@ -61,16 +61,16 @@ let NileSideBarGroupItemIcon = class NileSideBarGroupItemIcon extends NileElemen
         const text = this.tooltip || this.getSiblingText();
         if (isCollapsed && text) {
             return html `
-        <nile-tooltip distance="18" content=${text} placement="right" hoist>
+        <nile-tooltip distance="18" content=${text} placement="right" >
           <slot>
-            ${this.icon ? html `<nile-icon size="14" color="var(--nile-colors-dark-900)" name=${this.icon}></nile-icon>` : null}
+            ${this.icon ? html `<nile-icon size="14" color="var(--nile-colors-dark-900,var(--ng-colors-fg-quaternary-400))" name=${this.icon}></nile-icon>` : null}
           </slot>
         </nile-tooltip>
       `;
         }
         return html `
       <slot>
-        ${this.icon ? html `<nile-icon color="var(--nile-colors-dark-900)" size="14" name=${this.icon}></nile-icon>` : null}
+        ${this.icon ? html `<nile-icon color="var(--nile-colors-dark-900,var(--ng-colors-fg-quaternary-400))" size="14" name=${this.icon}></nile-icon>` : null}
       </slot>
     `;
     }

package/dist/src/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-group-item-icon.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.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,qCAAqC,CAAC;AAC7D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;;;;;GASG;AAEI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,WAAW;IAAlD;;QACL;;WAEG;QAEH,SAAI,GAAW,EAAE,CAAC;QAElB;;WAEG;QAEH,YAAO,GAAW,EAAE,CAAC;QAEb,YAAO,GAAuB,IAAI,CAAC;IAmD7C,CAAC;IAjDQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,iBAAiB;QAClB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACjC,CAAC;QAEA,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAuB,CAAC;QACnE,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YAClE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YACpF,IAAY,CAAC,SAAS,GAAG,QAAQ,CAAC;QACrC,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAY,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC;IACxC,CAAC;IAEO,cAAc;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAClC,MAAM,MAAM,GAAG,MAAM,EAAE,aAAa,CAAC,+BAA+B,CAAC,CAAC;QACtE,OAAO,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC3C,CAAC;IAEM,MAAM;QACX,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC;QAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;QAEnD,IAAI,WAAW,IAAI,IAAI,EAAE,CAAC;YACxB,OAAO,IAAI,CAAA;8CAC6B,IAAI;;cAEpC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iEAAiE,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,IAAI;;;OAGvH,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iEAAiE,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,IAAI;;KAErH,CAAC;IACJ,CAAC;CACF,CAAA;AA3DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACxB;AAMlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDACN;AAXV,wBAAwB;IADpC,aAAa,CAAC,+BAA+B,CAAC;GAClC,wBAAwB,CAgEpC;;AAED,eAAe,wBAAwB,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-group-item-icon.css';\nimport NileElement from '../internal/nile-element';\nimport type { NileSideBar } from '../nile-side-bar/nile-side-bar';\n\n/**\n * Nile side-bar-group-item-icon component.\n *\n * @tag nile-side-bar-group-item-icon\n *\n * @attr icon - The name of the icon to render inside <nile-icon>\n * @attr tooltip - Tooltip text shown when sidebar is collapsed\n *\n * @slot - Optional slot to override the icon completely\n */\n@customElement('nile-side-bar-group-item-icon')\nexport class NileSideBarGroupItemIcon extends NileElement {\n  /**\n   * Name of the icon (passed to <nile-icon name=\"\">)\n   */\n  @property({ type: String, reflect: true })\n  icon: string = '';\n\n  /**\n   * Tooltip text (auto-synced from sibling text if available)\n   */\n  @property({ type: String })\n  tooltip: string = '';\n\n  private sidebar: NileSideBar | null = null;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback(): void {\n\tif (!this.hasAttribute('slot')) {\n\t\tthis.setAttribute('slot', 'icon');\n\t  }\n\t  \n    super.connectedCallback();\n    this.sidebar = this.closest('nile-side-bar') as NileSideBar | null;\n    if (this.sidebar) {\n      const observer = new MutationObserver(() => this.requestUpdate());\n      observer.observe(this.sidebar, { attributes: true, attributeFilter: ['collapsed'] });\n      (this as any)._observer = observer;\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    (this as any)._observer?.disconnect();\n  }\n\n  private getSiblingText(): string {\n    const parent = this.parentElement;\n    const textEl = parent?.querySelector('nile-side-bar-group-item-text');\n    return textEl?.textContent?.trim() ?? '';\n  }\n\n  public render(): TemplateResult {\n    const isCollapsed = !!this.sidebar?.collapsed;\n    const text = this.tooltip || this.getSiblingText();\n\n    if (isCollapsed && text) {\n      return html`\n        <nile-tooltip distance=\"18\" content=${text} placement=\"right\" hoist>\n          <slot>\n            ${this.icon ? html`<nile-icon size=\"14\" color=\"var(--nile-colors-dark-900)\" name=${this.icon}></nile-icon>` : null}\n          </slot>\n        </nile-tooltip>\n      `;\n    }\n\n    return html`\n      <slot>\n        ${this.icon ? html`<nile-icon color=\"var(--nile-colors-dark-900)\" size=\"14\" name=${this.icon}></nile-icon>` : null}\n      </slot>\n    `;\n  }\n}\n\nexport default NileSideBarGroupItemIcon;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-group-item-icon': NileSideBarGroupItemIcon;\n  }\n}\n"]}
+{"version":3,"file":"nile-side-bar-group-item-icon.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.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,qCAAqC,CAAC;AAC7D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;;;;;GASG;AAEI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,WAAW;IAAlD;;QACL;;WAEG;QAEH,SAAI,GAAW,EAAE,CAAC;QAElB;;WAEG;QAEH,YAAO,GAAW,EAAE,CAAC;QAEb,YAAO,GAAuB,IAAI,CAAC;IAmD7C,CAAC;IAjDQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,iBAAiB;QAClB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACjC,CAAC;QAEA,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAuB,CAAC;QACnE,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YAClE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YACpF,IAAY,CAAC,SAAS,GAAG,QAAQ,CAAC;QACrC,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAY,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC;IACxC,CAAC;IAEO,cAAc;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAClC,MAAM,MAAM,GAAG,MAAM,EAAE,aAAa,CAAC,+BAA+B,CAAC,CAAC;QACtE,OAAO,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC3C,CAAC;IAEM,MAAM;QACX,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC;QAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;QAEnD,IAAI,WAAW,IAAI,IAAI,EAAE,CAAC;YACxB,OAAO,IAAI,CAAA;8CAC6B,IAAI;;cAEpC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,oGAAoG,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,IAAI;;;OAG1J,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,oGAAoG,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,IAAI;;KAExJ,CAAC;IACJ,CAAC;CACF,CAAA;AA3DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACxB;AAMlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDACN;AAXV,wBAAwB;IADpC,aAAa,CAAC,+BAA+B,CAAC;GAClC,wBAAwB,CAgEpC;;AAED,eAAe,wBAAwB,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-group-item-icon.css';\nimport NileElement from '../internal/nile-element';\nimport type { NileSideBar } from '../nile-side-bar/nile-side-bar';\n\n/**\n * Nile side-bar-group-item-icon component.\n *\n * @tag nile-side-bar-group-item-icon\n *\n * @attr icon - The name of the icon to render inside <nile-icon>\n * @attr tooltip - Tooltip text shown when sidebar is collapsed\n *\n * @slot - Optional slot to override the icon completely\n */\n@customElement('nile-side-bar-group-item-icon')\nexport class NileSideBarGroupItemIcon extends NileElement {\n  /**\n   * Name of the icon (passed to <nile-icon name=\"\">)\n   */\n  @property({ type: String, reflect: true })\n  icon: string = '';\n\n  /**\n   * Tooltip text (auto-synced from sibling text if available)\n   */\n  @property({ type: String })\n  tooltip: string = '';\n\n  private sidebar: NileSideBar | null = null;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback(): void {\n\tif (!this.hasAttribute('slot')) {\n\t\tthis.setAttribute('slot', 'icon');\n\t  }\n\t  \n    super.connectedCallback();\n    this.sidebar = this.closest('nile-side-bar') as NileSideBar | null;\n    if (this.sidebar) {\n      const observer = new MutationObserver(() => this.requestUpdate());\n      observer.observe(this.sidebar, { attributes: true, attributeFilter: ['collapsed'] });\n      (this as any)._observer = observer;\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    (this as any)._observer?.disconnect();\n  }\n\n  private getSiblingText(): string {\n    const parent = this.parentElement;\n    const textEl = parent?.querySelector('nile-side-bar-group-item-text');\n    return textEl?.textContent?.trim() ?? '';\n  }\n\n  public render(): TemplateResult {\n    const isCollapsed = !!this.sidebar?.collapsed;\n    const text = this.tooltip || this.getSiblingText();\n\n    if (isCollapsed && text) {\n      return html`\n        <nile-tooltip distance=\"18\" content=${text} placement=\"right\" >\n          <slot>\n            ${this.icon ? html`<nile-icon size=\"14\" color=\"var(--nile-colors-dark-900,var(--ng-colors-fg-quaternary-400))\" name=${this.icon}></nile-icon>` : null}\n          </slot>\n        </nile-tooltip>\n      `;\n    }\n\n    return html`\n      <slot>\n        ${this.icon ? html`<nile-icon color=\"var(--nile-colors-dark-900,var(--ng-colors-fg-quaternary-400))\" size=\"14\" name=${this.icon}></nile-icon>` : null}\n      </slot>\n    `;\n  }\n}\n\nexport default NileSideBarGroupItemIcon;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-group-item-icon': NileSideBarGroupItemIcon;\n  }\n}\n"]}

package/dist/src/nile-side-bar-group-item-text/nile-side-bar-group-item-text.css.js

@@ -7,10 +7,11 @@ export const styles = css `
     display: block;
     flex: 1 1 auto;        
     min-width: 0;         
-    font-size: var(--nile-type-scale-3);  
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));  
     line-height: var(--nile-line-height-small)
-    font-weight: var(--nile-font-weight-medium);
-    color: var(--nile-colors-dark-900);
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/src/nile-side-bar-group-item-text/nile-side-bar-group-item-text.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-group-item-text.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group-item-text/nile-side-bar-group-item-text.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarGroupItemText CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    flex: 1 1 auto;        \n    min-width: 0;         \n    font-size: var(--nile-type-scale-3);  \n    line-height: var(--nile-line-height-small)\n    font-weight: var(--nile-font-weight-medium);\n    color: var(--nile-colors-dark-900);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  ::slotted(*) {\n    font: inherit;\n    color: inherit;\n  }\n  :host-context(nile-side-bar[collapsed]) {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-side-bar-group-item-text.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group-item-text/nile-side-bar-group-item-text.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarGroupItemText CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    flex: 1 1 auto;        \n    min-width: 0;         \n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));  \n    line-height: var(--nile-line-height-small)\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  ::slotted(*) {\n    font: inherit;\n    color: inherit;\n  }\n  :host-context(nile-side-bar[collapsed]) {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -13,14 +13,12 @@ export const styles = css `
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-top: var(--nile-spacing-xl);
-  padding-bottom: var(--nile-spacing-lg);
-  padding-left: var(--nile-spacing-xl);
-  padding-right: var(--nile-spacing-xl);
-  position: sticky;
-    top: 0;
-    z-index: 10;
-    background: var(--nile-colors-neutral-100);
+  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));
+  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));
+  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));
+  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));
+  top: 0;
+  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
 }
 
 .header-content {
@@ -34,17 +32,17 @@ export const styles = css `
 :host-context(nile-side-bar[collapsed]) .header-content {
   flex-direction: column;
   justify-content: center;
-  gap: var(--nile-spacing-lg);
+  gap: var(--nile-spacing-lg, var(--ng-spacing-md));
 }
 
 
  
  
 ::slotted([slot='logo']) {
-  font-size: var(--nile-type-scale-3);
-  font-weight: var(--nile-font-weight-bold);
+  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));
   letter-spacing: -0.02em;
-  color: var(--nile-colors-dark-900);
+  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));
   text-transform: none;
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-header.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CxB,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 * SideBarHeader CSS\n */\nexport const styles = css`\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl);\n  padding-bottom: var(--nile-spacing-lg);\n  padding-left: var(--nile-spacing-xl);\n  padding-right: var(--nile-spacing-xl);\n  position: sticky;\n    top: 0;\n    z-index: 10;\n    background: var(--nile-colors-neutral-100);\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host-context(nile-side-bar[collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg);\n}\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3);\n  font-weight: var(--nile-font-weight-bold);\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900);\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n}\n\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-side-bar-header.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-header/nile-side-bar-header.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CxB,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 * SideBarHeader CSS\n */\nexport const styles = css`\n :host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-xl));\n  padding-left: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  padding-right: var(--nile-spacing-xl, var(--ng-spacing-2xl));\n  top: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n\n:host-context(nile-side-bar[collapsed]) .header-content {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--nile-spacing-lg, var(--ng-spacing-md));\n}\n\n\n \n \n::slotted([slot='logo']) {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-bold));\n  letter-spacing: -0.02em;\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  text-transform: none;\n}\n\n::slotted([slot='actions']) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n}\n\n`;\n\nexport default [styles];"]}

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

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

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

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

package/dist/src/{nile-grid-cell-item → nile-side-bar-panel}/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-grid-cell-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { NileGridCellItem } from './nile-grid-cell-item';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-side-bar-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { NileSideBarPanel } from './nile-side-bar-panel';"]}

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

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

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

@@ -0,0 +1,20 @@
+/**
+* Copyright Aquera Inc 2025
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit';
+/**
+ * SideBarPanel CSS
+ */
+export const styles = css `
+	:host {
+		width: 100%; 
+		height: 100%;
+		overflow-y: auto;
+	}
+
+`;
+export default [styles];
+//# sourceMappingURL=nile-side-bar-panel.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-panel.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-panel/nile-side-bar-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;CAOxB,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 * SideBarPanel CSS\n */\nexport const styles = css`\n\t:host {\n\t\twidth: 100%; \n\t\theight: 100%;\n\t\toverflow-y: auto;\n\t}\n\n`;\n\nexport default [styles];"]}

package/dist/src/{nile-grid-body/nile-grid-body.d.ts → nile-side-bar-panel/nile-side-bar-panel.d.ts}

@@ -7,23 +7,26 @@
 import { CSSResultArray, TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element';
 /**
- * Nile grid-body component.
+ * Nile side-bar-panel component.
  *
- * @tag nile-grid-body
+ * @tag nile-side-bar-panel
  *
  */
-export declare class NileGridBody extends NileElement {
+export declare class NileSideBarPanel extends NileElement {
     /**
-     * The styles for nile-grid-body
+     * The styles for nile-side-bar-panel
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
      */
     static get styles(): CSSResultArray;
-    connectedCallback(): void;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
     render(): TemplateResult;
 }
-export default NileGridBody;
+export default NileSideBarPanel;
 declare global {
     interface HTMLElementTagNameMap {
-        'nile-grid-body': NileGridBody;
+        'nile-side-bar-panel': NileSideBarPanel;
     }
 }

package/dist/src/{nile-grid-head/nile-grid-head.js → nile-side-bar-panel/nile-side-bar-panel.js}

@@ -7,17 +7,17 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { styles } from './nile-grid-head.css';
+import { styles } from './nile-side-bar-panel.css';
 import NileElement from '../internal/nile-element';
 /**
- * Nile grid-head component.
+ * Nile side-bar-panel component.
  *
- * @tag nile-grid-head
+ * @tag nile-side-bar-panel
  *
  */
-let NileGridHead = class NileGridHead extends NileElement {
+let NileSideBarPanel = class NileSideBarPanel extends NileElement {
     /**
-     * The styles for nile-grid-head
+     * The styles for nile-side-bar-panel
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
      */
     static get styles() {
@@ -25,17 +25,19 @@ let NileGridHead = class NileGridHead extends NileElement {
     }
     /* #endregion */
     /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
     render() {
         return html `
-      <div style="display: contents;">
-        <slot></slot>
-      </div>
-    `;
+			<slot> </slot>
+			`;
     }
 };
-NileGridHead = __decorate([
-    customElement('nile-grid-head')
-], NileGridHead);
-export { NileGridHead };
-export default NileGridHead;
-//# sourceMappingURL=nile-grid-head.js.map
+NileSideBarPanel = __decorate([
+    customElement('nile-side-bar-panel')
+], NileSideBarPanel);
+export { NileSideBarPanel };
+export default NileSideBarPanel;
+//# sourceMappingURL=nile-side-bar-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-panel.js","sourceRoot":"","sources":["../../../src/nile-side-bar-panel/nile-side-bar-panel.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,2BAA2B,CAAC;AACjD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAEhD;;;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;;IAET,CAAC;IACJ,CAAC;CAGD,CAAA;AAzBY,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAyB5B;;AAED,eAAe,gBAAgB,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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property} from 'lit/decorators.js';\nimport {styles} from './nile-side-bar-panel.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile side-bar-panel component.\n *\n * @tag nile-side-bar-panel\n *\n */\n@customElement('nile-side-bar-panel')\nexport class NileSideBarPanel extends NileElement {\n\n\t/**\n\t * The styles for nile-side-bar-panel\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\t<slot> </slot>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileSideBarPanel;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-panel': NileSideBarPanel;\n  }\n}"]}

package/dist/src/nile-slide-toggle/nile-slide-toggle.js

@@ -40,6 +40,7 @@ let NileSlideToggle = class NileSlideToggle extends NileElement {
             'nile-slide--disabled': this.disabled,
             'nile-slide-toggle--reverse': this.textPosition == 'left'
         })}
+        part="base"
       >
         <label 
         class="${classMap({
@@ -47,17 +48,17 @@ let NileSlideToggle = class NileSlideToggle extends NileElement {
             'nile-slide-toggle__switch--left': this.textPosition == 'right',
             'nile-slide-toggle__switch--right': this.textPosition == 'left',
         })}"
-        class="nile-slide-toggle__switch">
+        class="nile-slide-toggle__switch" part="slide-toggle-switch">
           <input
             type="checkbox"
             .checked=${this.isChecked}
             @change=${this.toggleValue}
           />
-          <span class="nile-slide-toggle__slider"></span>
+          <span class="nile-slide-toggle__slider" part="slide-toggle-slider"></span>
         </label>
-        <span class="nile-slide-toggle__label">
-          <span>${this.label}</span>
-          <span class="nile-slide-toggle__sublabel">${this.sublabel}</span>
+        <span class="nile-slide-toggle__label" part="slide-toggle-label-container">
+          <span part="slide-toggle-label">${this.label}</span>
+          <span class="nile-slide-toggle__sublabel" part="slide-toggle-sublabel">${this.sublabel}</span>
         </span>
       </div>
       ${hasHelpText

package/dist/src/nile-slide-toggle/nile-slide-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-slide-toggle.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup,PropertyValues } from 'lit';\nimport { LitElement, html} from 'lit';\nimport styles from './nile-slide-toggle.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('nile-slide-toggle')\nexport class NileSlideToggle extends NileElement {\n  public static styles: CSSResultGroup = styles;\n\n  @property({ type: String }) label = '';\n\n  @property({ type: String }) sublabel = '';\n\n  @property({ type: String, }) textPosition:'left' | 'right' = 'right';\n\n  @property({ type: Boolean, reflect: true }) isChecked = false;\n\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.emit('nile-init');\n    this.style.setProperty('--slide-toggle-width',this.fullWidth?'100%':'auto')\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n\n  toggleValue() {\n    this.isChecked = !this.isChecked;\n    this.emit('change',{ checked: this.isChecked, value: this.isChecked });\n    this.emit('nile-change',{ checked: this.isChecked, value: this.isChecked  });\n  }\n\n  public render() {\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    return html`\n      <div\n        class=${classMap({\n          'nile-slide-toggle': true,\n          'nile-slide--disabled': this.disabled,\n          'nile-slide-toggle--reverse':this.textPosition=='left'\n        })}\n      >\n        <label \n        class=\"${classMap({\n          'nile-slide-toggle__switch':true,\n          'nile-slide-toggle__switch--left':this.textPosition=='right',\n          'nile-slide-toggle__switch--right':this.textPosition=='left',\n        })}\"\n        class=\"nile-slide-toggle__switch\">\n          <input\n            type=\"checkbox\"\n            .checked=${this.isChecked}\n            @change=${this.toggleValue}\n          />\n          <span class=\"nile-slide-toggle__slider\"></span>\n        </label>\n        <span class=\"nile-slide-toggle__label\">\n          <span>${this.label}</span>\n          <span class=\"nile-slide-toggle__sublabel\">${this.sublabel}</span>\n        </span>\n      </div>\n      ${hasHelpText\n        ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `\n        : ``}\n      ${hasErrorMessage\n        ? html`\n            <nile-form-error-message\n              >${this.errorMessage}</nile-form-error-message\n            >\n          `\n        : ``}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"nile-slide-toggle.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup,PropertyValues } from 'lit';\nimport { LitElement, html} from 'lit';\nimport styles from './nile-slide-toggle.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('nile-slide-toggle')\nexport class NileSlideToggle extends NileElement {\n  public static styles: CSSResultGroup = styles;\n\n  @property({ type: String }) label = '';\n\n  @property({ type: String }) sublabel = '';\n\n  @property({ type: String, }) textPosition:'left' | 'right' = 'right';\n\n  @property({ type: Boolean, reflect: true }) isChecked = false;\n\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.emit('nile-init');\n    this.style.setProperty('--slide-toggle-width',this.fullWidth?'100%':'auto')\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n\n  toggleValue() {\n    this.isChecked = !this.isChecked;\n    this.emit('change',{ checked: this.isChecked, value: this.isChecked });\n    this.emit('nile-change',{ checked: this.isChecked, value: this.isChecked  });\n  }\n\n  public render() {\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    return html`\n      <div\n        class=${classMap({\n          'nile-slide-toggle': true,\n          'nile-slide--disabled': this.disabled,\n          'nile-slide-toggle--reverse':this.textPosition=='left'\n        })}\n        part=\"base\"\n      >\n        <label \n        class=\"${classMap({\n          'nile-slide-toggle__switch':true,\n          'nile-slide-toggle__switch--left':this.textPosition=='right',\n          'nile-slide-toggle__switch--right':this.textPosition=='left',\n        })}\"\n        class=\"nile-slide-toggle__switch\" part=\"slide-toggle-switch\">\n          <input\n            type=\"checkbox\"\n            .checked=${this.isChecked}\n            @change=${this.toggleValue}\n          />\n          <span class=\"nile-slide-toggle__slider\" part=\"slide-toggle-slider\"></span>\n        </label>\n        <span class=\"nile-slide-toggle__label\" part=\"slide-toggle-label-container\">\n          <span part=\"slide-toggle-label\">${this.label}</span>\n          <span class=\"nile-slide-toggle__sublabel\" part=\"slide-toggle-sublabel\">${this.sublabel}</span>\n        </span>\n      </div>\n      ${hasHelpText\n        ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `\n        : ``}\n      ${hasErrorMessage\n        ? html`\n            <nile-form-error-message\n              >${this.errorMessage}</nile-form-error-message\n            >\n          `\n        : ``}\n    `;\n  }\n}\n"]}

package/dist/src/version.js

@@ -1,6 +1,6 @@
 // Version utility - placeholders will be replaced during build
-export const NILE_ELEMENTS_VERSION = '1.3.9-beta-1.2';
-export const NILE_VERSION = '1.1.2';
+export const NILE_ELEMENTS_VERSION = '1.3.9-beta-1.3';
+export const NILE_VERSION = '1.1.4-beta-1.0';
 // Set global versions for runtime access
 if (typeof window !== 'undefined') {
     window.nileElementsVersion = NILE_ELEMENTS_VERSION;

package/dist/src/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.3.9-beta-1.2';\nexport const NILE_VERSION = '1.1.2';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.3.9-beta-1.3';\nexport const NILE_VERSION = '1.1.4-beta-1.0';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}