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

package/dist/src/nile-grid-head-item/nile-grid-head-item.js

@@ -0,0 +1,100 @@
+/**
+ * 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-grid-head-item.css';
+import NileElement from '../internal/nile-element';
+import { initHeadResize, headResizeMove, headResizeDone, } from './nile-grid-head-item.utils';
+/**
+ * Nile grid-head-item component.
+ *
+ * @tag nile-grid-head-item
+ *
+ */
+let NileGridHeadItem = class NileGridHeadItem extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.colspan = 1;
+        this.rowspan = 1;
+        this.scope = 'col';
+        this.resizable = false;
+        this.sticky = false;
+        this.onHandlePointerDown = (ev) => {
+            const el = this;
+            const downXRef = { value: 0 };
+            const startWRef = { value: 0 };
+            const result = initHeadResize(el, ev, downXRef, startWRef);
+            if (!result)
+                return;
+            const { target, col } = result;
+            const move = (e) => headResizeMove(el, col, startWRef.value, downXRef.value, e);
+            const done = () => headResizeDone(el, ev, target, move);
+            target.addEventListener('pointermove', move);
+            target.addEventListener('pointerup', done, { once: true });
+            target.addEventListener('pointercancel', done, { once: true });
+        };
+        /* #endregion */
+    }
+    /**
+     * The styles for nile-grid-head-item
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', this.scope === 'row' ? 'rowheader' : 'columnheader');
+    }
+    updated(changed) {
+        if (changed.has('scope')) {
+            this.setAttribute('role', this.scope === 'row' ? 'rowheader' : 'columnheader');
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeAttribute('role');
+    }
+    render() {
+        return html `
+      <div style="display: contents;">
+        <slot></slot>
+        ${this.resizable
+            ? html `
+              <div
+                aria-hidden="false"
+                class="resize-handle"
+                @pointerdown=${this.onHandlePointerDown}
+              ></div>
+            `
+            : null}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number, reflect: true, attribute: true })
+], NileGridHeadItem.prototype, "colspan", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: true })
+], NileGridHeadItem.prototype, "rowspan", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileGridHeadItem.prototype, "scope", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileGridHeadItem.prototype, "resizable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileGridHeadItem.prototype, "sticky", void 0);
+NileGridHeadItem = __decorate([
+    customElement('nile-grid-head-item')
+], NileGridHeadItem);
+export { NileGridHeadItem };
+export default NileGridHeadItem;
+//# sourceMappingURL=nile-grid-head-item.js.map

package/dist/src/nile-grid-head-item/nile-grid-head-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-grid-head-item.js","sourceRoot":"","sources":["../../../src/nile-grid-head-item/nile-grid-head-item.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 { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-grid-head-item.css';\nimport NileElement from '../internal/nile-element';\nimport {\n  initHeadResize,\n  headResizeMove,\n  headResizeDone,\n} from './nile-grid-head-item.utils';\n\n/**\n * Nile grid-head-item component.\n *\n * @tag nile-grid-head-item\n *\n */\n@customElement('nile-grid-head-item')\nexport class NileGridHeadItem extends NileElement {\n  /**\n   * The styles for nile-grid-head-item\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({ type: Number, reflect: true, attribute: true }) colspan = 1;\n  @property({ type: Number, reflect: true, attribute: true }) rowspan = 1;\n  @property({ type: String, reflect: true, attribute: true }) scope:\n    | 'col'\n    | 'row' = 'col';\n  @property({ type: Boolean, reflect: true, attribute: true }) resizable = false;\n  @property({ type: Boolean, reflect: true, attribute: true }) sticky = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\n      'role',\n      this.scope === 'row' ? 'rowheader' : 'columnheader'\n    );\n  }\n\n  private onHandlePointerDown = (ev: PointerEvent) => {\n    const el = this as HTMLElement;\n\n    const downXRef = { value: 0 };\n    const startWRef = { value: 0 };\n\n    const result = initHeadResize(el, ev, downXRef, startWRef);\n    if (!result) return;\n\n    const { target, col } = result;\n\n    const move = (e: PointerEvent) =>\n      headResizeMove(el, col, startWRef.value, downXRef.value, e);\n\n    const done = () => headResizeDone(el, ev, target, move);\n\n    target.addEventListener('pointermove', move);\n    target.addEventListener('pointerup', done, { once: true });\n    target.addEventListener('pointercancel', done, { once: true });\n  };\n\n  protected updated(changed: Map<string, unknown>) {\n    if (changed.has('scope')) {\n      this.setAttribute(\n        'role',\n        this.scope === 'row' ? 'rowheader' : 'columnheader'\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeAttribute('role');\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div style=\"display: contents;\">\n        <slot></slot>\n        ${this.resizable\n          ? html`\n              <div\n                aria-hidden=\"false\"\n                class=\"resize-handle\"\n                @pointerdown=${this.onHandlePointerDown}\n              ></div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileGridHeadItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-grid-head-item': NileGridHeadItem;\n  }\n}\n"]}

package/dist/src/nile-grid-head-item/nile-grid-head-item.utils.d.ts

@@ -0,0 +1,10 @@
+export declare function initHeadResize(el: HTMLElement, ev: PointerEvent, downXRef: {
+    value: number;
+}, startWRef: {
+    value: number;
+}): {
+    target: HTMLElement;
+    col: number;
+} | null;
+export declare function headResizeMove(el: HTMLElement, col: number, startW: number, downX: number, e: PointerEvent): void;
+export declare function headResizeDone(el: HTMLElement, ev: PointerEvent, target: HTMLElement, move: (e: PointerEvent) => void): void;

package/dist/src/nile-grid-head-item/nile-grid-head-item.utils.js

@@ -0,0 +1,34 @@
+export function initHeadResize(el, ev, downXRef, startWRef) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const cStart = Number(el.dataset.cStart);
+    if (!cStart)
+        return null;
+    const span = Number(el.getAttribute('colspan')) || 1;
+    const col = Math.max(0, cStart + span - 1 - 1);
+    downXRef.value = ev.clientX;
+    startWRef.value = el.getBoundingClientRect().width;
+    const target = ev.currentTarget;
+    target.setPointerCapture(ev.pointerId);
+    el.dispatchEvent(new CustomEvent('nile-resize', {
+        detail: { col, widthPx: startWRef.value },
+        bubbles: true,
+        composed: true,
+    }));
+    el.dispatchEvent(new CustomEvent('nile-resize-start', { bubbles: true, composed: true }));
+    return { target, col };
+}
+export function headResizeMove(el, col, startW, downX, e) {
+    const widthPx = Math.max(40, Math.round(startW + (e.clientX - downX)));
+    el.dispatchEvent(new CustomEvent('nile-resize', {
+        detail: { col, widthPx },
+        bubbles: true,
+        composed: true,
+    }));
+}
+export function headResizeDone(el, ev, target, move) {
+    target.releasePointerCapture(ev.pointerId);
+    target.removeEventListener('pointermove', move);
+    el.dispatchEvent(new CustomEvent('nile-resize-end', { bubbles: true, composed: true }));
+}
+//# sourceMappingURL=nile-grid-head-item.utils.js.map

package/dist/src/nile-grid-head-item/nile-grid-head-item.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-grid-head-item.utils.js","sourceRoot":"","sources":["../../../src/nile-grid-head-item/nile-grid-head-item.utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,cAAc,CAC5B,EAAe,EACf,EAAgB,EAChB,QAA2B,EAC3B,SAA4B;IAE5B,EAAE,CAAC,cAAc,EAAE,CAAC;IACpB,EAAE,CAAC,eAAe,EAAE,CAAC;IAErB,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IAE/C,QAAQ,CAAC,KAAK,GAAG,EAAE,CAAC,OAAO,CAAC;IAC5B,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAEnD,MAAM,MAAM,GAAG,EAAE,CAAC,aAA4B,CAAC;IAC/C,MAAM,CAAC,iBAAiB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEvC,EAAE,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,aAAa,EAAE;QAC7B,MAAM,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE;QACzC,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;KACf,CAAC,CACH,CAAC;IAEF,EAAE,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,mBAAmB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CACxE,CAAC;IAEF,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AACzB,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,EAAe,EACf,GAAW,EACX,MAAc,EACd,KAAa,EACb,CAAe;IAEf,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACvE,EAAE,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,aAAa,EAAE;QAC7B,MAAM,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE;QACxB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;KACf,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,EAAe,EACf,EAAgB,EAChB,MAAmB,EACnB,IAA+B;IAE/B,MAAM,CAAC,qBAAqB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC3C,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IAEhD,EAAE,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,iBAAiB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CACtE,CAAC;AACJ,CAAC","sourcesContent":["export function initHeadResize(\n  el: HTMLElement,\n  ev: PointerEvent,\n  downXRef: { value: number },\n  startWRef: { value: number }\n) {\n  ev.preventDefault();\n  ev.stopPropagation();\n\n  const cStart = Number(el.dataset.cStart);\n  if (!cStart) return null;\n\n  const span = Number(el.getAttribute('colspan')) || 1;\n  const col = Math.max(0, cStart + span - 1 - 1);\n\n  downXRef.value = ev.clientX;\n  startWRef.value = el.getBoundingClientRect().width;\n\n  const target = ev.currentTarget as HTMLElement;\n  target.setPointerCapture(ev.pointerId);\n\n  el.dispatchEvent(\n    new CustomEvent('nile-resize', {\n      detail: { col, widthPx: startWRef.value },\n      bubbles: true,\n      composed: true,\n    })\n  );\n\n  el.dispatchEvent(\n    new CustomEvent('nile-resize-start', { bubbles: true, composed: true })\n  );\n\n  return { target, col };\n}\n\nexport function headResizeMove(\n  el: HTMLElement,\n  col: number,\n  startW: number,\n  downX: number,\n  e: PointerEvent\n) {\n  const widthPx = Math.max(40, Math.round(startW + (e.clientX - downX)));\n  el.dispatchEvent(\n    new CustomEvent('nile-resize', {\n      detail: { col, widthPx },\n      bubbles: true,\n      composed: true,\n    })\n  );\n}\n\nexport function headResizeDone(\n  el: HTMLElement,\n  ev: PointerEvent,\n  target: HTMLElement,\n  move: (e: PointerEvent) => void\n) {\n  target.releasePointerCapture(ev.pointerId);\n  target.removeEventListener('pointermove', move);\n\n  el.dispatchEvent(\n    new CustomEvent('nile-resize-end', { bubbles: true, composed: true })\n  );\n}\n"]}

package/dist/src/nile-grid-row/index.d.ts

@@ -0,0 +1 @@
+export { NileGridRow } from './nile-grid-row';

package/dist/src/nile-grid-row/index.js

@@ -0,0 +1,2 @@
+export { NileGridRow } from './nile-grid-row';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-grid-row/index.js.map

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

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

package/dist/src/nile-grid-row/nile-grid-row.css.js

@@ -0,0 +1,27 @@
+/**
+ * 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';
+/**
+ * GridRow CSS
+ */
+export const styles = css `
+  :host {
+    display: contents;
+  }
+
+  ::slotted(nile-grid-header) {
+    background-color: var(--nile-colors-neutral-100);
+  }
+
+  .row-layer {
+    background-color: var(--row-bg, transparent);
+    z-index: 0;
+    pointer-events: auto;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-grid-row.css.js.map

package/dist/src/nile-grid-row/nile-grid-row.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-grid-row.css.js","sourceRoot":"","sources":["../../../src/nile-grid-row/nile-grid-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAcxB,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 * GridRow CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n  }\n\n  ::slotted(nile-grid-header) {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .row-layer {\n    background-color: var(--row-bg, transparent);\n    z-index: 0;\n    pointer-events: auto;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-grid-row/nile-grid-row.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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 grid-row component.
+ *
+ * @tag nile-grid-row
+ *
+ */
+export declare class NileGridRow extends NileElement {
+    /**
+     * The styles for nile-grid-row
+     * @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(): TemplateResult;
+}
+export default NileGridRow;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-grid-row': NileGridRow;
+    }
+}

package/dist/src/nile-grid-row/nile-grid-row.js

@@ -0,0 +1,45 @@
+/**
+ * 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 } from 'lit/decorators.js';
+import { styles } from './nile-grid-row.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile grid-row component.
+ *
+ * @tag nile-grid-row
+ *
+ */
+let NileGridRow = class NileGridRow extends NileElement {
+    /**
+     * The styles for nile-grid-row
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'row');
+    }
+    render() {
+        return html `
+      <div part="row-layer" class="row-layer" data-row-bg></div>
+
+      <div style="display: contents;">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+NileGridRow = __decorate([
+    customElement('nile-grid-row')
+], NileGridRow);
+export { NileGridRow };
+export default NileGridRow;
+//# sourceMappingURL=nile-grid-row.js.map

package/dist/src/nile-grid-row/nile-grid-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-grid-row.js","sourceRoot":"","sources":["../../../src/nile-grid-row/nile-grid-row.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAc,IAAI,EAAkC,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAC1C;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;CAGF,CAAA;AAzBY,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAyBvB;;AAED,eAAe,WAAW,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 } from 'lit/decorators.js';\nimport { styles } from './nile-grid-row.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile grid-row component.\n *\n * @tag nile-grid-row\n *\n */\n@customElement('nile-grid-row')\nexport class NileGridRow extends NileElement {\n  /**\n   * The styles for nile-grid-row\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'row');\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"row-layer\" class=\"row-layer\" data-row-bg></div>\n\n      <div style=\"display: contents;\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileGridRow;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-grid-row': NileGridRow;\n  }\n}\n"]}

package/dist/src/nile-hero/__snapshots__/nile-hero.test.snap.js

@@ -0,0 +1,47 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["NileHero renders correctly with default properties"] = 
+`<div
+  class="hero__container hero__container--expanded"
+  part="nile__hero__container"
+>
+  <nile-hero-header
+    class="hero__header--collapsed"
+    hero-text="Test Hero"
+    icon="error"
+    part="nile__hero__header"
+    style="opacity:0"
+  >
+  </nile-hero-header>
+  <div
+    class="hero__slot__container"
+    style="opacity:1"
+  >
+    <div class="hero__slot">
+      <span class="icon__container">
+        <nile-icon
+          method="stroke"
+          name="error"
+          size="16"
+        >
+        </nile-icon>
+      </span>
+      <slot>
+      </slot>
+    </div>
+  </div>
+  <div
+    class="hero__img__container"
+    id="hero__img__container"
+    style="opacity:1"
+  >
+    <img
+      class="hero__img"
+      src=""
+    >
+  </div>
+</div>
+`;
+/* end snapshot NileHero renders correctly with default properties */
+

package/dist/src/nile-icon/__snapshots__/nile-icon.test.snap.js

@@ -0,0 +1,16 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["NileIcon should render the icon with the correct name"] = 
+`<nile-icon
+  description=""
+  method="fill"
+  name="info"
+  set="local"
+  size="16"
+  style="--nile-svg-fill: var(--nile-colors-dark-500); --nile-svg-height: 16px; --nile-svg-width: 16px;"
+>
+</nile-icon>
+`;
+/* end snapshot NileIcon should render the icon with the correct name */
+

package/dist/src/nile-inline-edit/nile-inline-edit-utils.d.ts

@@ -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.
+ */
+export declare function getSlottedElement(shadowRoot: ShadowRoot | null | undefined): HTMLElement | null;
+export declare function getValueFromSlottedElement(shadowRoot: ShadowRoot | null | undefined): string;
+export declare function getDisplayValue(value: string, maxPlaceholderLength: number): string;
+export declare function setSlottedElementValue(shadowRoot: ShadowRoot | null | undefined, value: string): void;
+export declare function updateSlottedElementValue(updateComplete: Promise<boolean> | Promise<void>, shadowRoot: ShadowRoot | null | undefined, value: string): void;
+export declare function updateValueFromSlottedElement(shadowRoot: ShadowRoot | null | undefined, currentValue: string): string;
+export declare function handleDocumentFocusIn(event: FocusEvent, component: HTMLElement, isOpen: boolean): {
+    shouldClose: boolean;
+    newValue: string | null;
+};
+export declare function handleDocumentMouseDown(event: MouseEvent, component: HTMLElement, isOpen: boolean): {
+    shouldClose: boolean;
+    newValue: string | null;
+};

package/dist/src/nile-inline-edit/nile-inline-edit-utils.js

@@ -0,0 +1,70 @@
+/**
+ * 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 function getSlottedElement(shadowRoot) {
+    if (!shadowRoot)
+        return null;
+    const slot = shadowRoot.querySelector('slot');
+    if (!slot)
+        return null;
+    const assignedElements = slot.assignedElements({ flatten: true });
+    return assignedElements[0] || null;
+}
+export function getValueFromSlottedElement(shadowRoot) {
+    const slottedElement = getSlottedElement(shadowRoot);
+    if (!slottedElement)
+        return '';
+    const value = slottedElement.value;
+    return value != null ? String(value) : '';
+}
+export function getDisplayValue(value, maxPlaceholderLength) {
+    if (value && maxPlaceholderLength > 0 && value.length > maxPlaceholderLength) {
+        return value.substring(0, maxPlaceholderLength) + '...';
+    }
+    return value;
+}
+export function setSlottedElementValue(shadowRoot, value) {
+    const slottedElement = getSlottedElement(shadowRoot);
+    if (slottedElement && value) {
+        slottedElement.value = value;
+    }
+}
+export function updateSlottedElementValue(updateComplete, shadowRoot, value) {
+    updateComplete.then(() => {
+        setSlottedElementValue(shadowRoot, value);
+    });
+}
+export function updateValueFromSlottedElement(shadowRoot, currentValue) {
+    const newValue = getValueFromSlottedElement(shadowRoot);
+    return newValue !== currentValue ? newValue : currentValue;
+}
+export function handleDocumentFocusIn(event, component, isOpen) {
+    if (!isOpen)
+        return { shouldClose: false, newValue: null };
+    const path = event.composedPath();
+    const isWithinComponent = path.includes(component);
+    if (!isWithinComponent) {
+        const shadowRoot = component.shadowRoot;
+        const currentValue = component.value || '';
+        const newValue = updateValueFromSlottedElement(shadowRoot, currentValue);
+        return { shouldClose: true, newValue };
+    }
+    return { shouldClose: false, newValue: null };
+}
+export function handleDocumentMouseDown(event, component, isOpen) {
+    if (!isOpen)
+        return { shouldClose: false, newValue: null };
+    const path = event.composedPath();
+    const isWithinComponent = path.includes(component);
+    if (!isWithinComponent) {
+        const shadowRoot = component.shadowRoot;
+        const currentValue = component.value || '';
+        const newValue = updateValueFromSlottedElement(shadowRoot, currentValue);
+        return { shouldClose: true, newValue };
+    }
+    return { shouldClose: false, newValue: null };
+}
+//# sourceMappingURL=nile-inline-edit-utils.js.map

package/dist/src/nile-inline-edit/nile-inline-edit-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-inline-edit-utils.js","sourceRoot":"","sources":["../../../src/nile-inline-edit/nile-inline-edit-utils.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\nexport function getSlottedElement(shadowRoot: ShadowRoot | null | undefined): HTMLElement | null {\n  if (!shadowRoot) return null;\n  const slot = shadowRoot.querySelector('slot');\n  if (!slot) return null;\n  const assignedElements = slot.assignedElements({ flatten: true });\n  return (assignedElements[0] as HTMLElement) || null;\n}\n\nexport function getValueFromSlottedElement(shadowRoot: ShadowRoot | null | undefined): string {\n  const slottedElement = getSlottedElement(shadowRoot);\n  if (!slottedElement) return '';\n  const value = (slottedElement as any).value;\n  return value != null ? String(value) : '';\n}\n\nexport function getDisplayValue(value: string, maxPlaceholderLength: number): string {\n  if (value && maxPlaceholderLength > 0 && value.length > maxPlaceholderLength) {\n    return value.substring(0, maxPlaceholderLength) + '...';\n  }\n  return value;\n}\n\nexport function setSlottedElementValue(shadowRoot: ShadowRoot | null | undefined, value: string): void {\n  const slottedElement = getSlottedElement(shadowRoot);\n  if (slottedElement && value) {\n    (slottedElement as any).value = value;\n  }\n}\n\nexport function updateSlottedElementValue(\n  updateComplete: Promise<boolean> | Promise<void>,\n  shadowRoot: ShadowRoot | null | undefined,\n  value: string\n): void {\n  updateComplete.then(() => {\n    setSlottedElementValue(shadowRoot, value);\n  });\n}\n\nexport function updateValueFromSlottedElement(\n  shadowRoot: ShadowRoot | null | undefined,\n  currentValue: string\n): string {\n  const newValue = getValueFromSlottedElement(shadowRoot);\n  return newValue !== currentValue ? newValue : currentValue;\n}\n\nexport function handleDocumentFocusIn(\n  event: FocusEvent,\n  component: HTMLElement,\n  isOpen: boolean\n): { shouldClose: boolean; newValue: string | null } {\n  if (!isOpen) return { shouldClose: false, newValue: null };\n  \n  const path = event.composedPath();\n  const isWithinComponent = path.includes(component);\n  \n  if (!isWithinComponent) {\n    const shadowRoot = (component as any).shadowRoot;\n    const currentValue = (component as any).value || '';\n    const newValue = updateValueFromSlottedElement(shadowRoot, currentValue);\n    return { shouldClose: true, newValue };\n  }\n  \n  return { shouldClose: false, newValue: null };\n}\n\nexport function handleDocumentMouseDown(\n  event: MouseEvent,\n  component: HTMLElement,\n  isOpen: boolean\n): { shouldClose: boolean; newValue: string | null } {\n  if (!isOpen) return { shouldClose: false, newValue: null };\n  \n  const path = event.composedPath();\n  const isWithinComponent = path.includes(component);\n  \n  if (!isWithinComponent) {\n    const shadowRoot = (component as any).shadowRoot;\n    const currentValue = (component as any).value || '';\n    const newValue = updateValueFromSlottedElement(shadowRoot, currentValue);\n    return { shouldClose: true, newValue };\n  }\n  \n  return { shouldClose: false, newValue: null };\n}\n\n"]}

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

@@ -26,10 +26,18 @@ export declare class NileInlineEdit extends NileElement {
     open: boolean;
     /** Gives the Value to the Inline Edit */
     value: string;
+    /** Maximum length for the placeholder value. Values longer than this will be truncated */
+    maxPlaceholderLength: number;
     /**
      * Render method
      * @slot This is a slot test
      */
+    private handleCloseResult;
+    private handleDocumentFocusInWrapper;
+    private handleDocumentMouseDownWrapper;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
     private handleClick;
     render(): TemplateResult;
 }

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

@@ -9,6 +9,7 @@ import { html, } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-inline-edit.css';
 import NileElement from '../internal/nile-element';
+import { getDisplayValue, updateSlottedElementValue, handleDocumentFocusIn, handleDocumentMouseDown, } from './nile-inline-edit-utils';
 /**
  * Nile inline-edit component.
  *
@@ -26,6 +27,16 @@ let NileInlineEdit = class NileInlineEdit extends NileElement {
         this.open = false;
         /** Gives the Value to the Inline Edit */
         this.value = '';
+        /** Maximum length for the placeholder value. Values longer than this will be truncated */
+        this.maxPlaceholderLength = 25;
+        this.handleDocumentFocusInWrapper = (event) => {
+            const result = handleDocumentFocusIn(event, this, this.open);
+            this.handleCloseResult(result);
+        };
+        this.handleDocumentMouseDownWrapper = (event) => {
+            const result = handleDocumentMouseDown(event, this, this.open);
+            this.handleCloseResult(result);
+        };
         /* #endregion */
     }
     /**
@@ -41,11 +52,43 @@ let NileInlineEdit = class NileInlineEdit extends NileElement {
      * Render method
      * @slot This is a slot test
      */
+    handleCloseResult(result) {
+        if (result.shouldClose) {
+            if (result.newValue !== null) {
+                this.value = result.newValue;
+            }
+            this.open = false;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('open')) {
+            if (this.open) {
+                updateSlottedElementValue(this.updateComplete, this.shadowRoot, this.value);
+                document.addEventListener('focusin', this.handleDocumentFocusInWrapper, true);
+                document.addEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
+            }
+            else {
+                document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);
+                document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);
+        document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
+    }
     handleClick() {
         this.open = true;
     }
     render() {
-        const textInsideContainer = this.value || this.placeholder;
+        // Use truncated value for display, or placeholder if empty
+        const displayValue = getDisplayValue(this.value, this.maxPlaceholderLength);
+        const textInsideContainer = displayValue || this.placeholder;
         return html `
       <div class="inline__edit--label" part="label">${this.label}</div>
       ${this.open
@@ -68,6 +111,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], NileInlineEdit.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-placeholder-length' })
+], NileInlineEdit.prototype, "maxPlaceholderLength", void 0);
 NileInlineEdit = __decorate([
     customElement('nile-inline-edit')
 ], NileInlineEdit);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-edit.js","sourceRoot":"","sources":["../../../src/nile-inline-edit/nile-inline-edit.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QASL,yCAAyC;QACE,UAAK,GAAG,EAAE,CAAC;QAEtD,+CAA+C;QACJ,gBAAW,GAAG,EAAE,CAAC;QAE5D,2DAA2D;QACf,SAAI,GAAG,KAAK,CAAC;QAEzD,yCAAyC;QACE,UAAK,GAAG,EAAE,CAAC;QA0BtD,gBAAgB;IAClB,CAAC;IA7CC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAcD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IAEK,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IACM,MAAM;QACX,MAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC;QAC3D,OAAO,IAAI,CAAA;sDACuC,IAAI,CAAC,KAAK;QACxD,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA,mEAAmE;YACzE,CAAC,CAAC,IAAI,CAAA,iEAAiE,IAAI,CAAC,WAAW;cACjF,mBAAmB;iBAChB;KACZ,CAAC;IACJ,CAAC;CAGF,CAAA;AApC4C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAY;AAGX;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAc;AAGd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAY;AAnB3C,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA8C1B;;AAED,eAAe,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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-inline-edit.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile inline-edit component.\n *\n * @tag nile-inline-edit\n *\n */\n@customElement('nile-inline-edit')\nexport class NileInlineEdit extends NileElement {\n  /**\n   * The styles for nile-inline-edit\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Gives the label to the Inline Edit */\n  @property({ type: String, reflect: true }) label = '';\n\n  /** Gives the Placeholder to the Inline Edit */\n  @property({ type: String, reflect: true }) placeholder = '';\n\n  /** Open prop for displaying default slot in Inline Edit */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Gives the Value to the Inline Edit */\n  @property({ type: String, reflect: true }) value = '';\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  private handleClick() {\n    this.open = true;\n  }\n  public render(): TemplateResult {\n    const textInsideContainer = this.value || this.placeholder;\n    return html`\n      <div class=\"inline__edit--label\" part=\"label\">${this.label}</div>\n      ${this.open\n        ? html` <slot class=\"inline__edit--open--container\" part=\"base\"> </slot>`\n        : html` <div class=\"inline__edit--container\" part=\"container\" @click=${this.handleClick}>\n            ${textInsideContainer}\n          </div>`}\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileInlineEdit;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-edit': NileInlineEdit;\n  }\n}\n"]}
+{"version":3,"file":"nile-inline-edit.js","sourceRoot":"","sources":["../../../src/nile-inline-edit/nile-inline-edit.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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-inline-edit.css';\nimport NileElement from '../internal/nile-element';\nimport {\n  getValueFromSlottedElement,\n  getDisplayValue,\n  setSlottedElementValue,\n  updateSlottedElementValue,\n  updateValueFromSlottedElement,\n  handleDocumentFocusIn,\n  handleDocumentMouseDown,\n} from './nile-inline-edit-utils';\n\n/**\n * Nile inline-edit component.\n *\n * @tag nile-inline-edit\n *\n */\n@customElement('nile-inline-edit')\nexport class NileInlineEdit extends NileElement {\n  /**\n   * The styles for nile-inline-edit\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Gives the label to the Inline Edit */\n  @property({ type: String, reflect: true }) label = '';\n\n  /** Gives the Placeholder to the Inline Edit */\n  @property({ type: String, reflect: true }) placeholder = '';\n\n  /** Open prop for displaying default slot in Inline Edit */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Gives the Value to the Inline Edit */\n  @property({ type: String, reflect: true }) value = '';\n\n  /** Maximum length for the placeholder value. Values longer than this will be truncated */\n  @property({ type: Number, attribute: 'max-placeholder-length' }) maxPlaceholderLength: number = 25;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  private handleCloseResult(result: { shouldClose: boolean; newValue: string | null }) {\n    if (result.shouldClose) {\n      if (result.newValue !== null) {\n        this.value = result.newValue;\n      }\n      this.open = false;\n    }\n  }\n\n  private handleDocumentFocusInWrapper = (event: FocusEvent) => {\n    const result = handleDocumentFocusIn(event, this, this.open);\n    this.handleCloseResult(result);\n  };\n\n  private handleDocumentMouseDownWrapper = (event: MouseEvent) => {\n    const result = handleDocumentMouseDown(event, this, this.open);\n    this.handleCloseResult(result);\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    \n    if (changedProperties.has('open')) {\n      if (this.open) {\n        updateSlottedElementValue(this.updateComplete, this.shadowRoot, this.value);\n        document.addEventListener('focusin', this.handleDocumentFocusInWrapper, true);\n        document.addEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);\n      } else {\n        document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);\n        document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);\n  }\n\n  private handleClick() {\n    this.open = true;\n  }\n  public render(): TemplateResult {\n    // Use truncated value for display, or placeholder if empty\n    const displayValue = getDisplayValue(this.value, this.maxPlaceholderLength);\n    const textInsideContainer = displayValue || this.placeholder;\n    return html`\n      <div class=\"inline__edit--label\" part=\"label\">${this.label}</div>\n      ${this.open\n        ? html` <slot class=\"inline__edit--open--container\" part=\"base\"> </slot>`\n        : html` <div class=\"inline__edit--container\" part=\"container\" @click=${this.handleClick}>\n            ${textInsideContainer}\n          </div>`}\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileInlineEdit;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-edit': NileInlineEdit;\n  }\n}\n"]}

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

@@ -48,8 +48,8 @@ export const styles = css `
     flex-direction: column;
     gap: var(--nile-spacing-xs);
     padding-right: var(--nile-spacing-xl);
-    padding-top: var(--nile-spacing-3xl);
-    padding-bottom: var(--nile-spacing-3xl);
+    padding-top: var(--nile-spacing-2xl);
+    padding-bottom: var(--nile-spacing-2xl);
   }
 
   nile-side-bar-action-menu {

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

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-sidebar.css.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FxB,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    height: 100%;\n  }\n  .sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-right: 1px solid var(--nile-colors-neutral-400);\n    transition: width 0.3s ease;\n    position: relative;\n  }\n  .toggle-btn {\n    position: absolute;\n    top: var(--nile-spacing-2xl);\n    right: -14px;\n    z-index: 10;\n  }\n\n  nile-button.toggle-btn::part(base) {\n    width: 30px;\n    height: 30px;\n  }\n  :host(:not([collapsed])) .sidebar {\n    width: 216px;\n  }\n  :host([collapsed]) .sidebar {\n    width: 0px;\n  }\n  :host([collapsed]) .sidebar-nav {\n    display: none;\n  }\n  .sidebar-header {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .sidebar-nav {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xs);\n    padding-right: var(--nile-spacing-xl);\n    padding-top: var(--nile-spacing-3xl);\n    padding-bottom: var(--nile-spacing-3xl);\n  }\n\n  nile-side-bar-action-menu {\n    width: fit-content;\n    max-width: 400px;\n    min-width: 200px;\n  }\n\n  nile-side-bar-action-menu::part(menu__items-wrapper) {\n    width: 100%;\n    max-width: 400px;\n    padding-top: var(--nile-spacing-lg);\n    padding-bottom: var(--nile-spacing-lg);\n  }\n\n  nile-side-bar-action-menu-item::part(base) {\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    border-radius: 0;\n  }\n\n  nile-side-bar-action-menu-item::part(label) {\n    display: block;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Transition for sidebar button when it is closed and opened */\n  nile-side-bar-action::part(panel),\n  nile-side-bar-action-menu {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease-in;\n    transition-delay: 50ms;\n  }\n\n  nile-side-bar-action:hover::part(panel),\n  nile-side-bar-action:hover nile-side-bar-action-menu {\n    opacity: 1;\n    pointer-events: auto;\n    transition-delay: 0ms;\n  }\n`;\n"]}
+{"version":3,"file":"nile-inline-sidebar.css.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FxB,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    height: 100%;\n  }\n  .sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-right: 1px solid var(--nile-colors-neutral-400);\n    transition: width 0.3s ease;\n    position: relative;\n  }\n  .toggle-btn {\n    position: absolute;\n    top: var(--nile-spacing-2xl);\n    right: -14px;\n    z-index: 10;\n  }\n\n  nile-button.toggle-btn::part(base) {\n    width: 30px;\n    height: 30px;\n  }\n  :host(:not([collapsed])) .sidebar {\n    width: 216px;\n  }\n  :host([collapsed]) .sidebar {\n    width: 0px;\n  }\n  :host([collapsed]) .sidebar-nav {\n    display: none;\n  }\n  .sidebar-header {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .sidebar-nav {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xs);\n    padding-right: var(--nile-spacing-xl);\n    padding-top: var(--nile-spacing-2xl);\n    padding-bottom: var(--nile-spacing-2xl);\n  }\n\n  nile-side-bar-action-menu {\n    width: fit-content;\n    max-width: 400px;\n    min-width: 200px;\n  }\n\n  nile-side-bar-action-menu::part(menu__items-wrapper) {\n    width: 100%;\n    max-width: 400px;\n    padding-top: var(--nile-spacing-lg);\n    padding-bottom: var(--nile-spacing-lg);\n  }\n\n  nile-side-bar-action-menu-item::part(base) {\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    border-radius: 0;\n  }\n\n  nile-side-bar-action-menu-item::part(label) {\n    display: block;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Transition for sidebar button when it is closed and opened */\n  nile-side-bar-action::part(panel),\n  nile-side-bar-action-menu {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease-in;\n    transition-delay: 50ms;\n  }\n\n  nile-side-bar-action:hover::part(panel),\n  nile-side-bar-action:hover nile-side-bar-action-menu {\n    opacity: 1;\n    pointer-events: auto;\n    transition-delay: 0ms;\n  }\n`;\n"]}