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

package/dist/src/nile-inline-sidebar/nile-inline-sidebar.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile inline sidebar component.
+ *
+ * @tag nile-inline-sidebar
+ */
+export declare class NileInlineSidebar extends NileElement {
+    collapsed: boolean;
+    fixed: boolean;
+    showTooltip: boolean;
+    private activeIndex;
+    private defaultSlot;
+    private mutationObserver?;
+    static get styles(): CSSResultArray;
+    private get sidebarItems();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private observeSidebarItems;
+    private syncActiveFromItems;
+    private handleItemSelect;
+    private toggleCollapse;
+    private handleMenuItemClick;
+    private get menuItemsTemplate();
+    render(): TemplateResult;
+}
+export default NileInlineSidebar;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-inline-sidebar': NileInlineSidebar;
+    }
+}

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

@@ -0,0 +1,209 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { styles } from './nile-inline-sidebar.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile inline sidebar component.
+ *
+ * @tag nile-inline-sidebar
+ */
+let NileInlineSidebar = class NileInlineSidebar extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+        this.fixed = false;
+        this.showTooltip = false;
+        this.activeIndex = -1;
+        this.handleItemSelect = (event) => {
+            const selectedItem = event.detail.item;
+            const index = this.sidebarItems.indexOf(selectedItem);
+            this.sidebarItems.forEach((item, i) => (item.active = i === index));
+            this.activeIndex = index;
+            this.dispatchEvent(new CustomEvent('nile-change', {
+                detail: { selectedItem, index },
+                bubbles: true,
+                composed: true,
+            }));
+            this.requestUpdate();
+        };
+    }
+    static get styles() {
+        return [styles];
+    }
+    get sidebarItems() {
+        if (!this.defaultSlot)
+            return [];
+        const assigned = this.defaultSlot.assignedElements({ flatten: true });
+        const items = assigned.flatMap(el => el.tagName.toLowerCase() === 'nile-inline-sidebar-item'
+            ? [el]
+            : Array.from(el.querySelectorAll('nile-inline-sidebar-item')));
+        return items;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('nile-click', this.handleItemSelect);
+        this.mutationObserver = new MutationObserver(() => this.syncActiveFromItems());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.mutationObserver?.disconnect();
+        this.removeEventListener('nile-click', this.handleItemSelect);
+    }
+    firstUpdated() {
+        this.observeSidebarItems();
+        this.syncActiveFromItems();
+        if (this.fixed) {
+            this.collapsed = false;
+        }
+    }
+    observeSidebarItems() {
+        if (!this.sidebarItems?.length || !this.mutationObserver)
+            return;
+        this.sidebarItems.forEach(item => this.mutationObserver.observe(item, {
+            attributes: true,
+            attributeFilter: ['active'],
+        }));
+    }
+    syncActiveFromItems() {
+        if (!this.sidebarItems?.length)
+            return;
+        const activeIndex = this.sidebarItems.findIndex(item => item.hasAttribute('active'));
+        if (activeIndex !== -1 && activeIndex !== this.activeIndex) {
+            this.activeIndex = activeIndex;
+            this.requestUpdate();
+        }
+    }
+    toggleCollapse() {
+        if (this.fixed)
+            return;
+        this.collapsed = !this.collapsed;
+        console.log('[Sidebar] Toggled collapse →', this.collapsed);
+        this.dispatchEvent(new CustomEvent('nile-toggle', {
+            detail: { collapsed: this.collapsed },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleMenuItemClick(index) {
+        const selectedItem = this.sidebarItems[index];
+        if (!selectedItem || selectedItem.hasAttribute('disabled'))
+            return;
+        this.sidebarItems.forEach((item, i) => (item.active = i === index));
+        this.activeIndex = index;
+        const text = selectedItem.textContent?.trim() || '';
+        const href = selectedItem.href;
+        this.dispatchEvent(new CustomEvent('nile-click', {
+            detail: { item: selectedItem, href, text },
+            bubbles: true,
+            composed: true,
+        }));
+        if (href)
+            window.location.href = href;
+        this.requestUpdate();
+    }
+    get menuItemsTemplate() {
+        if (!this.sidebarItems?.length)
+            return null;
+        return this.sidebarItems.map((item, index) => {
+            const content = html `
+        <nile-side-bar-action-menu-item
+          ?disabled=${item.hasAttribute('disabled')}
+          ?active=${this.activeIndex === index}
+          @click=${() => this.handleMenuItemClick(index)}
+        >
+          ${item.textContent}
+        </nile-side-bar-action-menu-item>
+      `;
+            return this.showTooltip
+                ? html `
+            <nile-tooltip content=${item.textContent} hoist placement="right">
+              ${content}
+            </nile-tooltip>
+          `
+                : content;
+        });
+    }
+    render() {
+        return html `
+      <div class="sidebar" part="base">
+        <div class="sidebar-header" part="header">
+          ${!this.fixed
+            ? this.collapsed
+                ? html `
+                  <nile-side-bar-action
+                    class="toggle-action"
+                    placement="bottom-start"
+                    hoist
+                    open
+                    triggerDropdown="hover"
+                  >
+                    <nile-button
+                      slot="trigger"
+                      class="toggle-btn"
+                      variant="tertiary"
+                      @click=${this.toggleCollapse}
+                    >
+                      <nile-icon name="menu_close"></nile-icon>
+                    </nile-button>
+                    <nile-side-bar-action-menu>
+                      ${this.menuItemsTemplate}
+                    </nile-side-bar-action-menu>
+                  </nile-side-bar-action>
+                `
+                : html `
+                  <nile-button
+                    class="toggle-btn"
+                    variant="tertiary"
+                    @click=${this.toggleCollapse}
+                  >
+                    <nile-icon name="menu_open"></nile-icon>
+                  </nile-button>
+                `
+            : null}
+        </div>
+
+        <nav
+          class="sidebar-nav"
+          style=${this.collapsed ? 'display:none;' : ''}
+          part="nav-items"
+        >
+          <slot
+            @slotchange=${() => {
+            this.requestUpdate();
+            this.observeSidebarItems();
+            this.syncActiveFromItems();
+        }}
+          ></slot>
+        </nav>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileInlineSidebar.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileInlineSidebar.prototype, "fixed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileInlineSidebar.prototype, "showTooltip", void 0);
+__decorate([
+    state()
+], NileInlineSidebar.prototype, "activeIndex", void 0);
+__decorate([
+    query('slot')
+], NileInlineSidebar.prototype, "defaultSlot", void 0);
+NileInlineSidebar = __decorate([
+    customElement('nile-inline-sidebar')
+], NileInlineSidebar);
+export { NileInlineSidebar };
+export default NileInlineSidebar;
+//# sourceMappingURL=nile-inline-sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-inline-sidebar.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.ts"],"names":[],"mappings":"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","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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-inline-sidebar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile inline sidebar component.\n *\n * @tag nile-inline-sidebar\n */\n@customElement('nile-inline-sidebar')\nexport class NileInlineSidebar extends NileElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) fixed = false;\n\n  @property({ type: Boolean, reflect: true }) showTooltip = false;\n\n  @state() private activeIndex: number = -1;\n\n  @query('slot') private defaultSlot!: HTMLSlotElement;\n\n  private mutationObserver?: MutationObserver;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private get sidebarItems(): HTMLElement[] {\n    if (!this.defaultSlot) return [];\n    const assigned = this.defaultSlot.assignedElements({ flatten: true });\n    const items = assigned.flatMap(el =>\n      el.tagName.toLowerCase() === 'nile-inline-sidebar-item'\n        ? [el]\n        : Array.from(el.querySelectorAll('nile-inline-sidebar-item'))\n    );\n    return items as HTMLElement[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('nile-click', this.handleItemSelect);\n    this.mutationObserver = new MutationObserver(() =>\n      this.syncActiveFromItems()\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n    this.removeEventListener('nile-click', this.handleItemSelect);\n  }\n\n  firstUpdated() {\n    this.observeSidebarItems();\n    this.syncActiveFromItems();\n\n    if (this.fixed) {\n      this.collapsed = false;\n    }\n  }\n\n  private observeSidebarItems() {\n    if (!this.sidebarItems?.length || !this.mutationObserver) return;\n    this.sidebarItems.forEach(item =>\n      this.mutationObserver!.observe(item, {\n        attributes: true,\n        attributeFilter: ['active'],\n      })\n    );\n  }\n\n  private syncActiveFromItems() {\n    if (!this.sidebarItems?.length) return;\n    const activeIndex = this.sidebarItems.findIndex(item =>\n      item.hasAttribute('active')\n    );\n    if (activeIndex !== -1 && activeIndex !== this.activeIndex) {\n      this.activeIndex = activeIndex;\n      this.requestUpdate();\n    }\n  }\n\n  private handleItemSelect = (event: CustomEvent) => {\n    const selectedItem = event.detail.item as HTMLElement;\n    const index = this.sidebarItems.indexOf(selectedItem);\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n\n    this.dispatchEvent(\n      new CustomEvent('nile-change', {\n        detail: { selectedItem, index },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    this.requestUpdate();\n  };\n\n  private toggleCollapse() {\n    if (this.fixed) return;\n    this.collapsed = !this.collapsed;\n    console.log('[Sidebar] Toggled collapse →', this.collapsed);\n\n    this.dispatchEvent(\n      new CustomEvent('nile-toggle', {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleMenuItemClick(index: number) {\n    const selectedItem = this.sidebarItems[index];\n    if (!selectedItem || selectedItem.hasAttribute('disabled')) return;\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n    const text = selectedItem.textContent?.trim() || '';\n    const href = (selectedItem as any).href;\n    this.dispatchEvent(\n      new CustomEvent('nile-click', {\n        detail: { item: selectedItem, href, text },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (href) window.location.href = href;\n\n    this.requestUpdate();\n  }\n\n  private get menuItemsTemplate() {\n    if (!this.sidebarItems?.length) return null;\n\n    return this.sidebarItems.map((item, index) => {\n      const content = html`\n        <nile-side-bar-action-menu-item\n          ?disabled=${item.hasAttribute('disabled')}\n          ?active=${this.activeIndex === index}\n          @click=${() => this.handleMenuItemClick(index)}\n        >\n          ${item.textContent}\n        </nile-side-bar-action-menu-item>\n      `;\n\n      return this.showTooltip\n        ? html`\n            <nile-tooltip content=${item.textContent} hoist placement=\"right\">\n              ${content}\n            </nile-tooltip>\n          `\n        : content;\n    });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"sidebar\" part=\"base\">\n        <div class=\"sidebar-header\" part=\"header\">\n          ${!this.fixed\n            ? this.collapsed\n              ? html`\n                  <nile-side-bar-action\n                    class=\"toggle-action\"\n                    placement=\"bottom-start\"\n                    hoist\n                    open\n                    triggerDropdown=\"hover\"\n                  >\n                    <nile-button\n                      slot=\"trigger\"\n                      class=\"toggle-btn\"\n                      variant=\"tertiary\"\n                      @click=${this.toggleCollapse}\n                    >\n                      <nile-icon name=\"menu_close\"></nile-icon>\n                    </nile-button>\n                    <nile-side-bar-action-menu>\n                      ${this.menuItemsTemplate}\n                    </nile-side-bar-action-menu>\n                  </nile-side-bar-action>\n                `\n              : html`\n                  <nile-button\n                    class=\"toggle-btn\"\n                    variant=\"tertiary\"\n                    @click=${this.toggleCollapse}\n                  >\n                    <nile-icon name=\"menu_open\"></nile-icon>\n                  </nile-button>\n                `\n            : null}\n        </div>\n\n        <nav\n          class=\"sidebar-nav\"\n          style=${this.collapsed ? 'display:none;' : ''}\n          part=\"nav-items\"\n        >\n          <slot\n            @slotchange=${() => {\n              this.requestUpdate();\n              this.observeSidebarItems();\n              this.syncActiveFromItems();\n            }}\n          ></slot>\n        </nav>\n      </div>\n    `;\n  }\n}\n\nexport default NileInlineSidebar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-sidebar': NileInlineSidebar;\n  }\n}\n"]}

package/dist/src/nile-inline-sidebar-group/index.d.ts

@@ -0,0 +1 @@
+export { NileInlineSidebarGroup } from './nile-inline-sidebar-group';

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

@@ -0,0 +1,2 @@
+export { NileInlineSidebarGroup } from './nile-inline-sidebar-group';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export { NileInlineSidebarGroup } from './nile-inline-sidebar-group';"]}

package/dist/src/nile-inline-sidebar-group/nile-inline-sidebar-group.css.d.ts

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

package/dist/src/nile-inline-sidebar-group/nile-inline-sidebar-group.css.js

@@ -0,0 +1,42 @@
+/**
+* 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';
+export const styles = css `
+:host {
+  display: block;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nile-spacing-xs);
+}
+
+
+:host([divider="false"]) .group {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.group-label {
+  font-size: var(--nile-type-scale-3);
+  font-weight: var(--nile-font-weight-semibold);
+  text-transform: uppercase;
+  color:   var(--nile-colors-neutral-500);  
+  margin: var(--nile-spacing-xs) 0 var(--nile-spacing-xs) var(--nile-spacing-md);
+  letter-spacing: 0.05em;
+}
+
+.group-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nile-spacing-xs);
+}
+`;
+export default [styles];
+//# sourceMappingURL=nile-inline-sidebar-group.css.js.map

package/dist/src/nile-inline-sidebar-group/nile-inline-sidebar-group.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-inline-sidebar-group.css.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar-group/nile-inline-sidebar-group.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2025\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport { css } from 'lit';\n\nexport const styles = css`\n:host {\n  display: block;\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--nile-spacing-xs);\n}\n\n\n:host([divider=\"false\"]) .group {\n  border-bottom: none;\n  margin-bottom: 0;\n  padding-bottom: 0;\n}\n\n.group-label {\n  font-size: var(--nile-type-scale-3);\n  font-weight: var(--nile-font-weight-semibold);\n  text-transform: uppercase;\n  color:   var(--nile-colors-neutral-500);  \n  margin: var(--nile-spacing-xs) 0 var(--nile-spacing-xs) var(--nile-spacing-md);\n  letter-spacing: 0.05em;\n}\n\n.group-items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--nile-spacing-xs);\n}\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-inline-sidebar-group/nile-inline-sidebar-group.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile inline sidebar group.
+ *
+ * @tag nile-inlinesidebar-group
+ *
+ * @attr label - Optional group label
+ * @attr divider - Whether to show a divider below the group (default: true)
+ *
+ * @slot - Inline sidebar items
+ * @slot label - Optional label/header for the group
+ */
+export declare class NileInlineSidebarGroup extends NileElement {
+    label: string;
+    divider: boolean;
+    static get styles(): CSSResultArray;
+    render(): TemplateResult;
+    private hasLabelSlot;
+}
+export default NileInlineSidebarGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-inline-sidebar-group': NileInlineSidebarGroup;
+    }
+}

package/dist/src/nile-inline-sidebar-group/nile-inline-sidebar-group.js

@@ -0,0 +1,64 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-inline-sidebar-group.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile inline sidebar group.
+ *
+ * @tag nile-inlinesidebar-group
+ *
+ * @attr label - Optional group label
+ * @attr divider - Whether to show a divider below the group (default: true)
+ *
+ * @slot - Inline sidebar items
+ * @slot label - Optional label/header for the group
+ */
+let NileInlineSidebarGroup = class NileInlineSidebarGroup extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.divider = false;
+    }
+    static get styles() {
+        return [styles];
+    }
+    render() {
+        return html `
+      <div class="group">
+        ${this.label || this.hasLabelSlot()
+            ? html `
+              <div class="group-label">
+                <slot name="label">${this.label}</slot>
+              </div>
+            `
+            : null}
+        <div class="group-items">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+    hasLabelSlot() {
+        const slot = this.shadowRoot?.querySelector('slot[name="label"]');
+        return !!slot;
+    }
+};
+__decorate([
+    property({ type: String })
+], NileInlineSidebarGroup.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileInlineSidebarGroup.prototype, "divider", void 0);
+NileInlineSidebarGroup = __decorate([
+    customElement('nile-inline-sidebar-group')
+], NileInlineSidebarGroup);
+export { NileInlineSidebarGroup };
+export default NileInlineSidebarGroup;
+//# sourceMappingURL=nile-inline-sidebar-group.js.map

package/dist/src/nile-inline-sidebar-group/nile-inline-sidebar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-inline-sidebar-group.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar-group/nile-inline-sidebar-group.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,iCAAiC,CAAC;AACzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;;;GAUG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,WAAW;IAAhD;;QACuB,UAAK,GAAW,EAAE,CAAC;QACH,YAAO,GAAY,KAAK,CAAC;IA2BvE,CAAC;IAzBQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,EAAE;YACjC,CAAC,CAAC,IAAI,CAAA;;qCAEqB,IAAI,CAAC,KAAK;;aAElC;YACH,CAAC,CAAC,IAAI;;;;;KAKX,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAClE,OAAO,CAAC,CAAC,IAAI,CAAC;IAChB,CAAC;CACF,CAAA;AA5B6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAoB;AACH;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAA0B;AAF1D,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CA6BlC;;AAED,eAAe,sBAAsB,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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-inline-sidebar-group.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile inline sidebar group.\n *\n * @tag nile-inlinesidebar-group\n *\n * @attr label - Optional group label\n * @attr divider - Whether to show a divider below the group (default: true)\n *\n * @slot - Inline sidebar items\n * @slot label - Optional label/header for the group\n */\n@customElement('nile-inline-sidebar-group')\nexport class NileInlineSidebarGroup extends NileElement {\n  @property({ type: String }) label: string = '';\n  @property({ type: Boolean, reflect: true }) divider: boolean = false;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"group\">\n        ${this.label || this.hasLabelSlot()\n          ? html`\n              <div class=\"group-label\">\n                <slot name=\"label\">${this.label}</slot>\n              </div>\n            `\n          : null}\n        <div class=\"group-items\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private hasLabelSlot(): boolean {\n    const slot = this.shadowRoot?.querySelector('slot[name=\"label\"]');\n    return !!slot;\n  }\n}\n\nexport default NileInlineSidebarGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-sidebar-group': NileInlineSidebarGroup;\n  }\n}\n"]}

package/dist/src/nile-inline-sidebar-item/index.d.ts

@@ -0,0 +1 @@
+export { NileInlineSidebarItem } from './nile-inline-sidebar-item';

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

@@ -0,0 +1,2 @@
+export { NileInlineSidebarItem } from './nile-inline-sidebar-item';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["export { NileInlineSidebarItem } from './nile-inline-sidebar-item';"]}

package/dist/src/nile-inline-sidebar-item/nile-inline-sidebar-item.css.d.ts

@@ -0,0 +1,10 @@
+/**
+* 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.
+*/
+/**
+ * InlinesidebarItem CSS
+ */
+export declare const styles: import("lit").CSSResult;

package/dist/src/nile-inline-sidebar-item/nile-inline-sidebar-item.css.js

@@ -0,0 +1,64 @@
+/**
+* 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';
+/**
+ * InlinesidebarItem CSS
+ */
+export const styles = css `
+:host {
+  display: block;
+  font-family: var(--nile-font-family-sans-serif);
+  font-size: var(--nile-type-scale-3);
+  color: var(--nile-colors-dark-900);
+  cursor: pointer;
+  user-select: none;
+}
+
+.item {
+  padding: var(--nile-spacing-lg) var(--nile-spacing-md);
+  border-radius: var(--nile-radius-sm);
+  transition: background 0.2s, color 0.2s;
+}
+
+ 
+:host(:not([disabled])) .item:hover {
+  background: var(--nile-colors-neutral-400);
+}
+
+ 
+:host([active]) .item {
+  background: var(--nile-colors-primary-100);
+  font-weight: 500;
+}
+
+ 
+:host([disabled]) {
+  color:   var(--nile-colors-neutral-500);  
+  cursor: not-allowed;
+}
+
+:host([disabled]) .item {
+  pointer-events: none;
+}
+a {
+    color: inherit;
+    text-decoration: none;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  a:visited,
+  a:hover,
+  a:active,
+  a:focus {
+    color: inherit;
+    text-decoration: none;
+  }
+
+`;
+//# sourceMappingURL=nile-inline-sidebar-item.css.js.map

package/dist/src/nile-inline-sidebar-item/nile-inline-sidebar-item.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-inline-sidebar-item.css.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar-item/nile-inline-sidebar-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,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 * InlinesidebarItem CSS\n */\nexport const styles = css`\n:host {\n  display: block;\n  font-family: var(--nile-font-family-sans-serif);\n  font-size: var(--nile-type-scale-3);\n  color: var(--nile-colors-dark-900);\n  cursor: pointer;\n  user-select: none;\n}\n\n.item {\n  padding: var(--nile-spacing-lg) var(--nile-spacing-md);\n  border-radius: var(--nile-radius-sm);\n  transition: background 0.2s, color 0.2s;\n}\n\n \n:host(:not([disabled])) .item:hover {\n  background: var(--nile-colors-neutral-400);\n}\n\n \n:host([active]) .item {\n  background: var(--nile-colors-primary-100);\n  font-weight: 500;\n}\n\n \n:host([disabled]) {\n  color:   var(--nile-colors-neutral-500);  \n  cursor: not-allowed;\n}\n\n:host([disabled]) .item {\n  pointer-events: none;\n}\na {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  a:visited,\n  a:hover,\n  a:active,\n  a:focus {\n    color: inherit;\n    text-decoration: none;\n  }\n\n`;\n"]}

package/dist/src/nile-inline-sidebar-item/nile-inline-sidebar-item.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile inline sidebar item.
+ *
+ * @tag nile-inlinesidebar-item
+ *
+ * @attr active - Marks the item as active (selected).
+ * @attr disabled - Marks the item as disabled (non-interactive).
+ * @attr href - Optional URL to navigate to when the item is clicked.
+ *
+ * @slot - Default slot for the item text or content.
+ *
+ * @fires nile-select - Emitted when the item is clicked (not disabled).
+ *   detail: { item: this, href?: string }
+ */
+export declare class NileInlineSidebarItem extends NileElement {
+    active: boolean;
+    disabled: boolean;
+    href?: string;
+    static get styles(): CSSResultArray;
+    private handleClick;
+    render(): TemplateResult;
+}
+export default NileInlineSidebarItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-inline-sidebar-item': NileInlineSidebarItem;
+    }
+}

package/dist/src/nile-inline-sidebar-item/nile-inline-sidebar-item.js

@@ -0,0 +1,80 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-inline-sidebar-item.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile inline sidebar item.
+ *
+ * @tag nile-inlinesidebar-item
+ *
+ * @attr active - Marks the item as active (selected).
+ * @attr disabled - Marks the item as disabled (non-interactive).
+ * @attr href - Optional URL to navigate to when the item is clicked.
+ *
+ * @slot - Default slot for the item text or content.
+ *
+ * @fires nile-select - Emitted when the item is clicked (not disabled).
+ *   detail: { item: this, href?: string }
+ */
+let NileInlineSidebarItem = class NileInlineSidebarItem extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+        this.disabled = false;
+    }
+    static get styles() {
+        return [styles];
+    }
+    handleClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        const parent = this.closest('nile-inline-sidebar');
+        if (parent) {
+            const allItems = parent.querySelectorAll('nile-inline-sidebar-item');
+            allItems.forEach((item) => item.active = item === this);
+        }
+        const text = this.textContent?.trim() || '';
+        this.dispatchEvent(new CustomEvent('nile-click', {
+            detail: { item: this, href: this.href, text },
+            bubbles: true,
+            composed: true,
+        }));
+        if (this.href) {
+            window.location.href = this.href;
+        }
+    }
+    render() {
+        return html `
+      <div class="item" @click=${this.handleClick} role="button" tabindex="0">
+        ${this.href
+            ? html `<a href=${this.href} @click=${(e) => e.preventDefault()}><slot></slot></a>`
+            : html `<slot></slot>`}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileInlineSidebarItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileInlineSidebarItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], NileInlineSidebarItem.prototype, "href", void 0);
+NileInlineSidebarItem = __decorate([
+    customElement('nile-inline-sidebar-item')
+], NileInlineSidebarItem);
+export { NileInlineSidebarItem };
+export default NileInlineSidebarItem;
+//# sourceMappingURL=nile-inline-sidebar-item.js.map