@aquera/nile-elements 1.1.3 → 1.1.4

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

@@ -0,0 +1,159 @@
+/**
+ * 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-group-item.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile side-bar-group-item component.
+ *
+ * @tag nile-side-bar-group-item
+ *
+ * @slot icon - Slot for the item icon
+ * @slot text - Slot for the item text
+ * @slot trigger - Slot for chevron/trigger icons
+ * @slot content - Slot for dropdown/popover content
+ *
+ * @csspart base - Wrapper for the group item
+ * @csspart link - The clickable row (div or anchor)
+ * @csspart content - Content container (for dropdown/popover)
+ */
+let NileSideBarGroupItem = class NileSideBarGroupItem extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.href = null;
+        this.active = false;
+        this.type = 'default';
+        this.expanded = false;
+        this.disabled = false;
+    }
+    static get styles() {
+        return [styles];
+    }
+    toggleExpand() {
+        if ((this.type === 'dropdown' || this.type === 'popover') && !this.disabled) {
+            this.expanded = !this.expanded;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.href && window.location.pathname === this.href) {
+            this.active = true;
+        }
+    }
+    handleSelect(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            return;
+        }
+        if (!this.href) {
+            e.preventDefault();
+        }
+        const parent = this.closest('nile-side-bar');
+        if (parent) {
+            parent.querySelectorAll('nile-side-bar-group-item[active]')
+                .forEach(item => {
+                if (item !== this) {
+                    item.active = false;
+                    item.expanded = false;
+                }
+            });
+        }
+        this.active = true;
+        if ((this.type === 'dropdown' || this.type === 'popover') && !this.disabled) {
+            this.expanded = true;
+        }
+        this.dispatchEvent(new CustomEvent('nile-click', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                href: this.href,
+                text: this.textContent?.trim() || '',
+                type: this.type,
+            },
+        }));
+    }
+    render() {
+        const interactive = this.type === 'dropdown' || this.type === 'popover';
+        return html `
+      <div
+        part="base"
+        class="group-item ${this.disabled ? 'disabled' : ''}"
+        role="listitem"
+        ?data-expanded=${this.expanded}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+      >
+        ${this.href
+            ? html `
+              <a
+                part="link"
+                class="item-link"
+                href=${this.href}
+                @click=${this.handleSelect}
+                tabindex=${this.disabled ? '-1' : '0'}
+              >
+                <slot name="icon"></slot>
+                <slot name="text"></slot>
+                <slot name="trigger"></slot>
+              </a>
+            `
+            : html `
+              <div
+                part="link"
+                class="item-link"
+                @click=${(e) => {
+                this.handleSelect(e);
+                if (interactive && !this.disabled)
+                    this.toggleExpand();
+            }}
+                tabindex=${this.disabled ? '-1' : '0'}
+              >
+                <slot name="icon"></slot>
+                <slot name="text"></slot>
+                <slot name="trigger"></slot>
+              </div>
+            `}
+      </div>
+
+      ${interactive
+            ? html `
+            <div
+              part="content"
+              class="item-content"
+              role=${this.type === 'dropdown' ? 'menu' : 'dialog'}
+              ?hidden=${!this.expanded}
+            >
+              <slot name="content"></slot>
+            </div>
+          `
+            : null}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], NileSideBarGroupItem.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileSideBarGroupItem.prototype, "active", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileSideBarGroupItem.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSideBarGroupItem.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSideBarGroupItem.prototype, "disabled", void 0);
+NileSideBarGroupItem = __decorate([
+    customElement('nile-side-bar-group-item')
+], NileSideBarGroupItem);
+export { NileSideBarGroupItem };
+export default NileSideBarGroupItem;
+//# sourceMappingURL=nile-side-bar-group-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-group-item.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group-item/nile-side-bar-group-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-group-item.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-group-item component.\n *\n * @tag nile-side-bar-group-item\n *\n * @slot icon - Slot for the item icon\n * @slot text - Slot for the item text\n * @slot trigger - Slot for chevron/trigger icons\n * @slot content - Slot for dropdown/popover content\n *\n * @csspart base - Wrapper for the group item\n * @csspart link - The clickable row (div or anchor)\n * @csspart content - Content container (for dropdown/popover)\n */\n@customElement('nile-side-bar-group-item')\nexport class NileSideBarGroupItem extends NileElement {\n\n  @property({ type: String }) href: string | null = null;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) active = false;\n\n  @property({ type: String, reflect: true })\n  type: 'default' | 'dropdown' | 'popover' = 'default';\n\n  @property({ type: Boolean, reflect: true }) expanded: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private toggleExpand() {\n    if ((this.type === 'dropdown' || this.type === 'popover') && !this.disabled) {\n      this.expanded = !this.expanded;\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.href && window.location.pathname === this.href) {\n      this.active = true;\n    }\n  }\n\n  private handleSelect(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopImmediatePropagation();\n      return;\n    }\n\n    if (!this.href) {\n      e.preventDefault();\n    }\n    const parent = this.closest('nile-side-bar');\n    if (parent) {\n      parent.querySelectorAll<NileSideBarGroupItem>('nile-side-bar-group-item[active]')\n        .forEach(item => {\n          if (item !== this) {\n            item.active = false;\n            item.expanded = false; \n          }\n        });\n    }\n  \n    this.active = true;\n  \n    if ((this.type === 'dropdown' || this.type === 'popover') && !this.disabled) {\n      this.expanded = true;\n    }\n    this.dispatchEvent(\n      new CustomEvent('nile-click', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          href: this.href,\n          text: this.textContent?.trim() || '',\n          type: this.type,\n        },\n      })\n    );\n  }\n\n  public render(): TemplateResult {\n    const interactive = this.type === 'dropdown' || this.type === 'popover';\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"group-item ${this.disabled ? 'disabled' : ''}\"\n        role=\"listitem\"\n        ?data-expanded=${this.expanded}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n      >\n        ${this.href\n          ? html`\n              <a\n                part=\"link\"\n                class=\"item-link\"\n                href=${this.href}\n                @click=${this.handleSelect}\n                tabindex=${this.disabled ? '-1' : '0'}\n              >\n                <slot name=\"icon\"></slot>\n                <slot name=\"text\"></slot>\n                <slot name=\"trigger\"></slot>\n              </a>\n            `\n          : html`\n              <div\n                part=\"link\"\n                class=\"item-link\"\n                @click=${(e: Event) => {\n                  this.handleSelect(e);\n                  if (interactive && !this.disabled) this.toggleExpand();\n                }}\n                tabindex=${this.disabled ? '-1' : '0'}\n              >\n                <slot name=\"icon\"></slot>\n                <slot name=\"text\"></slot>\n                <slot name=\"trigger\"></slot>\n              </div>\n            `}\n      </div>\n\n      ${interactive\n        ? html`\n            <div\n              part=\"content\"\n              class=\"item-content\"\n              role=${this.type === 'dropdown' ? 'menu' : 'dialog'}\n              ?hidden=${!this.expanded}\n            >\n              <slot name=\"content\"></slot>\n            </div>\n          `\n        : null}\n    `;\n  }\n}\n\nexport default NileSideBarGroupItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-group-item': NileSideBarGroupItem;\n  }\n}\n"]}

package/dist/src/nile-side-bar-group-item-icon/index.d.ts

@@ -0,0 +1 @@
+export { NileSideBarGroupItemIcon } from './nile-side-bar-group-item-icon';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group-item-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC","sourcesContent":["export { NileSideBarGroupItemIcon } from './nile-side-bar-group-item-icon';"]}

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

@@ -0,0 +1,3 @@
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

@@ -0,0 +1,34 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-right: 12px;
+    color: inherit;
+  }
+
+  ::slotted(nile-icon) {
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    fill: currentColor;
+  }
+
+ 
+  :host-context(nile-side-bar[collapsed]) {
+    margin-right: 0;
+    width: 100%;       
+    justify-content: center;
+  }
+
+  nile-tooltip::part(body) {
+    width: max-content;
+    height: max-content;
+    padding: var(--nile-spacing-sm);
+    overflow-x: hidden;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-side-bar-group-item-icon.css.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,40 @@
+/**
+ * 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-group-item-icon component.
+ *
+ * @tag nile-side-bar-group-item-icon
+ *
+ * @attr icon - The name of the icon to render inside <nile-icon>
+ * @attr tooltip - Tooltip text shown when sidebar is collapsed
+ *
+ * @slot - Optional slot to override the icon completely
+ */
+export declare class NileSideBarGroupItemIcon extends NileElement {
+    /**
+     * Name of the icon (passed to <nile-icon name="">)
+     */
+    icon: string;
+    /**
+     * Tooltip text (auto-synced from sibling text if available)
+     */
+    tooltip: string;
+    private sidebar;
+    static get styles(): CSSResultArray;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private getSiblingText;
+    render(): TemplateResult;
+}
+export default NileSideBarGroupItemIcon;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-side-bar-group-item-icon': NileSideBarGroupItemIcon;
+    }
+}

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

@@ -0,0 +1,89 @@
+/**
+ * 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-group-item-icon.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile side-bar-group-item-icon component.
+ *
+ * @tag nile-side-bar-group-item-icon
+ *
+ * @attr icon - The name of the icon to render inside <nile-icon>
+ * @attr tooltip - Tooltip text shown when sidebar is collapsed
+ *
+ * @slot - Optional slot to override the icon completely
+ */
+let NileSideBarGroupItemIcon = class NileSideBarGroupItemIcon extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Name of the icon (passed to <nile-icon name="">)
+         */
+        this.icon = '';
+        /**
+         * Tooltip text (auto-synced from sibling text if available)
+         */
+        this.tooltip = '';
+        this.sidebar = null;
+    }
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('slot')) {
+            this.setAttribute('slot', 'icon');
+        }
+        super.connectedCallback();
+        this.sidebar = this.closest('nile-side-bar');
+        if (this.sidebar) {
+            const observer = new MutationObserver(() => this.requestUpdate());
+            observer.observe(this.sidebar, { attributes: true, attributeFilter: ['collapsed'] });
+            this._observer = observer;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._observer?.disconnect();
+    }
+    getSiblingText() {
+        const parent = this.parentElement;
+        const textEl = parent?.querySelector('nile-side-bar-group-item-text');
+        return textEl?.textContent?.trim() ?? '';
+    }
+    render() {
+        const isCollapsed = !!this.sidebar?.collapsed;
+        const text = this.tooltip || this.getSiblingText();
+        if (isCollapsed && text) {
+            return html `
+        <nile-tooltip distance="18" content=${text} placement="right" hoist>
+          <slot>
+            ${this.icon ? html `<nile-icon size="14" color="var(--nile-colors-dark-900)" 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}
+      </slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], NileSideBarGroupItemIcon.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], NileSideBarGroupItemIcon.prototype, "tooltip", void 0);
+NileSideBarGroupItemIcon = __decorate([
+    customElement('nile-side-bar-group-item-icon')
+], NileSideBarGroupItemIcon);
+export { NileSideBarGroupItemIcon };
+export default NileSideBarGroupItemIcon;
+//# sourceMappingURL=nile-side-bar-group-item-icon.js.map

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

@@ -0,0 +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"]}

package/dist/src/nile-side-bar-group-item-text/index.d.ts

@@ -0,0 +1 @@
+export { NileSideBarGroupItemText } from './nile-side-bar-group-item-text';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group-item-text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC","sourcesContent":["export { NileSideBarGroupItemText } from './nile-side-bar-group-item-text';"]}

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

@@ -0,0 +1,6 @@
+/**
+ * SideBarGroupItemText CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+/**
+ * SideBarGroupItemText CSS
+ */
+export const styles = css `
+  :host {
+    display: block;
+    flex: 1 1 auto;        
+    min-width: 0;         
+    font-size: var(--nile-type-scale-3);  
+    line-height: var(--nile-line-height-small)
+    font-weight: var(--nile-font-weight-medium);
+    color: var(--nile-colors-dark-900);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  ::slotted(*) {
+    font: inherit;
+    color: inherit;
+  }
+  :host-context(nile-side-bar[collapsed]) {
+    display: none;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-side-bar-group-item-text.css.js.map

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

@@ -0,0 +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"]}

package/dist/src/nile-side-bar-group-item-text/nile-side-bar-group-item-text.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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-group-item-text component.
+ *
+ * @tag nile-side-bar-group-item-text
+ *
+ * @slot - The text content of the sidebar item
+ */
+export declare class NileSideBarGroupItemText extends NileElement {
+    /**
+     * The styles for nile-side-bar-group-item-text
+     * @remarks Extendable via super if needed
+     */
+    static get styles(): CSSResultArray;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+export default NileSideBarGroupItemText;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-side-bar-group-item-text': NileSideBarGroupItemText;
+    }
+}

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

@@ -0,0 +1,42 @@
+/**
+ * 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-group-item-text.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile side-bar-group-item-text component.
+ *
+ * @tag nile-side-bar-group-item-text
+ *
+ * @slot - The text content of the sidebar item
+ */
+let NileSideBarGroupItemText = class NileSideBarGroupItemText extends NileElement {
+    /**
+     * The styles for nile-side-bar-group-item-text
+     * @remarks Extendable via super if needed
+     */
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('slot')) {
+            this.setAttribute('slot', 'text');
+        }
+    }
+    render() {
+        return html ` <slot></slot> `;
+    }
+};
+NileSideBarGroupItemText = __decorate([
+    customElement('nile-side-bar-group-item-text')
+], NileSideBarGroupItemText);
+export { NileSideBarGroupItemText };
+export default NileSideBarGroupItemText;
+//# sourceMappingURL=nile-side-bar-group-item-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-group-item-text.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group-item-text/nile-side-bar-group-item-text.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAC7D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;GAMG;AAEI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,WAAW;IACvD;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA,iBAAiB,CAAC;IAC/B,CAAC;CACF,CAAA;AApBY,wBAAwB;IADpC,aAAa,CAAC,+BAA+B,CAAC;GAClC,wBAAwB,CAoBpC;;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 } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-group-item-text.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-group-item-text component.\n *\n * @tag nile-side-bar-group-item-text\n *\n * @slot - The text content of the sidebar item\n */\n@customElement('nile-side-bar-group-item-text')\nexport class NileSideBarGroupItemText extends NileElement {\n  /**\n   * The styles for nile-side-bar-group-item-text\n   * @remarks Extendable via super if needed\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n \n    if (!this.hasAttribute('slot')) {\n      this.setAttribute('slot', 'text');\n    }\n  }\n\n  public render(): TemplateResult {\n    return html` <slot></slot> `;\n  }\n}\n\nexport default NileSideBarGroupItemText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-group-item-text': NileSideBarGroupItemText;\n  }\n}\n"]}

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

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

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

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

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

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

package/dist/src/nile-side-bar-header/nile-side-bar-header.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.
+*/
+/**
+ * SideBarHeader CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

@@ -0,0 +1,59 @@
+/**
+* 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';
+/**
+ * SideBarHeader CSS
+ */
+export const styles = css `
+ :host {
+  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);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+
+:host-context(nile-side-bar[collapsed]) .header-content {
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--nile-spacing-lg);
+}
+
+
+ 
+ 
+::slotted([slot='logo']) {
+  font-size: var(--nile-type-scale-3);
+  font-weight: var(--nile-font-weight-bold);
+  letter-spacing: -0.02em;
+  color: var(--nile-colors-dark-900);
+  text-transform: none;
+}
+
+::slotted([slot='actions']) {
+  display: flex;
+  align-items: center;
+  gap: var(--nile-spacing-md);
+}
+
+`;
+export default [styles];
+//# sourceMappingURL=nile-side-bar-header.css.js.map

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

@@ -0,0 +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];"]}

package/dist/src/{nile-sidebar-wrapper/nile-sidebar-wrapper.d.ts → nile-side-bar-header/nile-side-bar-header.d.ts}

@@ -7,29 +7,26 @@
 import { CSSResultArray, TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element';
 /**
- * Nile sidebar-wrapper component.
+ * Nile side-bar-header component.
  *
- * @tag nile-sidebar-wrapper
+ * @tag nile-side-bar-header
  *
  */
-export declare class NileSidebarWrapper extends NileElement {
+export declare class NileSideBarHeader extends NileElement {
     /**
-     * The styles for nile-sidebar-wrapper
+     * 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(): CSSResultArray;
-    overlaysidebar: boolean;
-    placement: 'left' | 'right';
-    isopen: boolean;
     /**
      * Render method
      * @slot This is a slot test
      */
     render(): TemplateResult;
 }
-export default NileSidebarWrapper;
+export default NileSideBarHeader;
 declare global {
     interface HTMLElementTagNameMap {
-        'nile-sidebar-wrapper': NileSidebarWrapper;
+        'nile-side-bar-header': NileSideBarHeader;
     }
 }