@aquera/nile-elements 1.6.7 → 1.6.8

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

@@ -0,0 +1,35 @@
+/**
+ * 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';
+/**
+ * Content panel associated with a `nile-inline-sidebar-item`.
+ * Linked via the item's `panel` property matching this panel's `name`.
+ *
+ * @tag nile-inline-sidebar-panel
+ *
+ * @attr name - Identifier that links this panel to a sidebar item's `panel` property.
+ * @attr active - Whether this panel is currently visible.
+ *
+ * @slot - Default slot for panel content.
+ *
+ * @csspart base - The panel container.
+ */
+export declare class NileInlineSidebarPanel extends NileElement {
+    /** Identifier that links this panel to a sidebar item's `panel` property. */
+    name: string;
+    /** Whether this panel is currently visible. */
+    active: boolean;
+    static get styles(): CSSResultArray;
+    render(): TemplateResult;
+}
+export default NileInlineSidebarPanel;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-inline-sidebar-panel': NileInlineSidebarPanel;
+    }
+}

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

@@ -0,0 +1,55 @@
+/**
+ * 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-panel.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Content panel associated with a `nile-inline-sidebar-item`.
+ * Linked via the item's `panel` property matching this panel's `name`.
+ *
+ * @tag nile-inline-sidebar-panel
+ *
+ * @attr name - Identifier that links this panel to a sidebar item's `panel` property.
+ * @attr active - Whether this panel is currently visible.
+ *
+ * @slot - Default slot for panel content.
+ *
+ * @csspart base - The panel container.
+ */
+let NileInlineSidebarPanel = class NileInlineSidebarPanel extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** Identifier that links this panel to a sidebar item's `panel` property. */
+        this.name = '';
+        /** Whether this panel is currently visible. */
+        this.active = false;
+    }
+    static get styles() {
+        return [styles];
+    }
+    render() {
+        return html `
+      <div class="panel" part="base">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], NileInlineSidebarPanel.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileInlineSidebarPanel.prototype, "active", void 0);
+NileInlineSidebarPanel = __decorate([
+    customElement('nile-inline-sidebar-panel')
+], NileInlineSidebarPanel);
+export { NileInlineSidebarPanel };
+export default NileInlineSidebarPanel;
+//# sourceMappingURL=nile-inline-sidebar-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-inline-sidebar-panel.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar-panel/nile-inline-sidebar-panel.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;;;;;;;;;;;;GAYG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,WAAW;IAAhD;;QACL,6EAA6E;QAClC,SAAI,GAAG,EAAE,CAAC;QAErD,+CAA+C;QACH,WAAM,GAAG,KAAK,CAAC;IAa7D,CAAC;IAXQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AAhB4C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAW;AAGT;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAgB;AALhD,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CAkBlC;;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-panel.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Content panel associated with a `nile-inline-sidebar-item`.\n * Linked via the item's `panel` property matching this panel's `name`.\n *\n * @tag nile-inline-sidebar-panel\n *\n * @attr name - Identifier that links this panel to a sidebar item's `panel` property.\n * @attr active - Whether this panel is currently visible.\n *\n * @slot - Default slot for panel content.\n *\n * @csspart base - The panel container.\n */\n@customElement('nile-inline-sidebar-panel')\nexport class NileInlineSidebarPanel extends NileElement {\n  /** Identifier that links this panel to a sidebar item's `panel` property. */\n  @property({ type: String, reflect: true }) name = '';\n\n  /** Whether this panel is currently visible. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"panel\" part=\"base\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileInlineSidebarPanel;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-sidebar-panel': NileInlineSidebarPanel;\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar-panel-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAC","sourcesContent":["export { NileInlineSidebarPanelGroup } from './nile-inline-sidebar-panel-group';\n"]}

package/dist/src/nile-inline-sidebar-panel-group/nile-inline-sidebar-panel-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-panel-group/nile-inline-sidebar-panel-group.css.js

@@ -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 { css } from 'lit';
+export const styles = css `
+  :host {
+    display: flex;
+    height: 100%;
+    width: 100%;
+  }
+
+  .panel-group {
+    display: flex;
+    height: 100%;
+    width: 100%;
+  }
+
+  :host([placement='right']) .panel-group {
+    flex-direction: row-reverse;
+  }
+
+  .sidebar-container {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  .panel-container {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-inline-sidebar-panel-group.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-inline-sidebar-panel-group.css.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar-panel-group/nile-inline-sidebar-panel-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BxB,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: flex;\n    height: 100%;\n    width: 100%;\n  }\n\n  .panel-group {\n    display: flex;\n    height: 100%;\n    width: 100%;\n  }\n\n  :host([placement='right']) .panel-group {\n    flex-direction: row-reverse;\n  }\n\n  .sidebar-container {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .panel-container {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\n    display: flex;\n    overflow: hidden;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -0,0 +1,43 @@
+/**
+ * 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';
+/**
+ * Layout container that positions a `nile-inline-sidebar` beside one or more
+ * `nile-inline-sidebar-panel` elements. Handles panel switching when sidebar
+ * items are clicked.
+ *
+ * @tag nile-inline-sidebar-panel-group
+ *
+ * @attr placement - Mirror of the sidebar's placement. Controls flex direction.
+ *
+ * @slot sidebar - Slot for the `nile-inline-sidebar` element.
+ * @slot - Default slot for `nile-inline-sidebar-panel` elements.
+ *
+ * @csspart base - The outer flex container.
+ * @csspart sidebar-container - Wrapper around the sidebar slot.
+ * @csspart panel-container - Wrapper around the panel slot.
+ */
+export declare class NileInlineSidebarPanelGroup extends NileElement {
+    /** Mirrors the sidebar's placement to control layout direction. */
+    placement: 'left' | 'right';
+    private defaultSlot;
+    static get styles(): CSSResultArray;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get panels();
+    private handleSidebarItemClick;
+    /** Activate a panel by name, deactivating all others. */
+    activatePanel(name: string): void;
+    render(): TemplateResult;
+}
+export default NileInlineSidebarPanelGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-inline-sidebar-panel-group': NileInlineSidebarPanelGroup;
+    }
+}

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

@@ -0,0 +1,93 @@
+/**
+ * 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 } from 'lit/decorators.js';
+import { styles } from './nile-inline-sidebar-panel-group.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Layout container that positions a `nile-inline-sidebar` beside one or more
+ * `nile-inline-sidebar-panel` elements. Handles panel switching when sidebar
+ * items are clicked.
+ *
+ * @tag nile-inline-sidebar-panel-group
+ *
+ * @attr placement - Mirror of the sidebar's placement. Controls flex direction.
+ *
+ * @slot sidebar - Slot for the `nile-inline-sidebar` element.
+ * @slot - Default slot for `nile-inline-sidebar-panel` elements.
+ *
+ * @csspart base - The outer flex container.
+ * @csspart sidebar-container - Wrapper around the sidebar slot.
+ * @csspart panel-container - Wrapper around the panel slot.
+ */
+let NileInlineSidebarPanelGroup = class NileInlineSidebarPanelGroup extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** Mirrors the sidebar's placement to control layout direction. */
+        this.placement = 'left';
+        this.handleSidebarItemClick = (event) => {
+            const detail = event.detail;
+            const panelName = detail?.item?.panel;
+            if (!panelName)
+                return;
+            this.activatePanel(panelName);
+        };
+    }
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('nile-click', this.handleSidebarItemClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('nile-click', this.handleSidebarItemClick);
+    }
+    get panels() {
+        if (!this.defaultSlot)
+            return [];
+        return this.defaultSlot
+            .assignedElements({ flatten: true })
+            .filter((el) => el.tagName.toLowerCase() === 'nile-inline-sidebar-panel');
+    }
+    /** Activate a panel by name, deactivating all others. */
+    activatePanel(name) {
+        const allPanels = this.panels;
+        allPanels.forEach(panel => {
+            panel.active = panel.name === name;
+        });
+        this.emit('nile-panel-change', { panel: name });
+    }
+    render() {
+        return html `
+      <div class="panel-group" part="base">
+        <div class="sidebar-container" part="sidebar-container">
+          <slot name="sidebar"></slot>
+        </div>
+        <div class="panel-container" part="panel-container">
+          <slot
+            @slotchange=${() => this.requestUpdate()}
+          ></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], NileInlineSidebarPanelGroup.prototype, "placement", void 0);
+__decorate([
+    query('slot:not([name])')
+], NileInlineSidebarPanelGroup.prototype, "defaultSlot", void 0);
+NileInlineSidebarPanelGroup = __decorate([
+    customElement('nile-inline-sidebar-panel-group')
+], NileInlineSidebarPanelGroup);
+export { NileInlineSidebarPanelGroup };
+export default NileInlineSidebarPanelGroup;
+//# sourceMappingURL=nile-inline-sidebar-panel-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-inline-sidebar-panel-group.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar-panel-group/nile-inline-sidebar-panel-group.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAC/D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,WAAW;IAArD;;QACL,mEAAmE;QACxB,cAAS,GAAqB,MAAM,CAAC;QA4BxE,2BAAsB,GAAG,CAAC,KAAY,EAAE,EAAE;YAChD,MAAM,MAAM,GAAI,KAAqB,CAAC,MAAM,CAAC;YAC7C,MAAM,SAAS,GAAuB,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC;YAC1D,IAAI,CAAC,SAAS;gBAAE,OAAO;YAEvB,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAChC,CAAC,CAAC;IA0BJ,CAAC;IAxDQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IACnE,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IACtE,CAAC;IAED,IAAY,MAAM;QAChB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO,EAAE,CAAC;QACjC,OAAO,IAAI,CAAC,WAAW;aACpB,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;aACnC,MAAM,CACL,CAAC,EAAE,EAAgC,EAAE,CACnC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,2BAA2B,CAC3D,CAAC;IACN,CAAC;IAUD,yDAAyD;IAClD,aAAa,CAAC,IAAY;QAC/B,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC;QAC9B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC;QACrC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;0BAOW,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;;KAI/C,CAAC;IACJ,CAAC;CACF,CAAA;AA5D4C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DAAsC;AAE7C;IAAlC,KAAK,CAAC,kBAAkB,CAAC;gEAAuC;AAJtD,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,CAAC;GACpC,2BAA2B,CA8DvC;;AAED,eAAe,2BAA2B,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, query } from 'lit/decorators.js';\nimport { styles } from './nile-inline-sidebar-panel-group.css';\nimport NileElement from '../internal/nile-element';\nimport type { NileInlineSidebarPanel } from '../nile-inline-sidebar-panel/nile-inline-sidebar-panel';\n\n/**\n * Layout container that positions a `nile-inline-sidebar` beside one or more\n * `nile-inline-sidebar-panel` elements. Handles panel switching when sidebar\n * items are clicked.\n *\n * @tag nile-inline-sidebar-panel-group\n *\n * @attr placement - Mirror of the sidebar's placement. Controls flex direction.\n *\n * @slot sidebar - Slot for the `nile-inline-sidebar` element.\n * @slot - Default slot for `nile-inline-sidebar-panel` elements.\n *\n * @csspart base - The outer flex container.\n * @csspart sidebar-container - Wrapper around the sidebar slot.\n * @csspart panel-container - Wrapper around the panel slot.\n */\n@customElement('nile-inline-sidebar-panel-group')\nexport class NileInlineSidebarPanelGroup extends NileElement {\n  /** Mirrors the sidebar's placement to control layout direction. */\n  @property({ type: String, reflect: true }) placement: 'left' | 'right' = 'left';\n\n  @query('slot:not([name])') private defaultSlot!: HTMLSlotElement;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('nile-click', this.handleSidebarItemClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('nile-click', this.handleSidebarItemClick);\n  }\n\n  private get panels(): NileInlineSidebarPanel[] {\n    if (!this.defaultSlot) return [];\n    return this.defaultSlot\n      .assignedElements({ flatten: true })\n      .filter(\n        (el): el is NileInlineSidebarPanel =>\n          el.tagName.toLowerCase() === 'nile-inline-sidebar-panel'\n      );\n  }\n\n  private handleSidebarItemClick = (event: Event) => {\n    const detail = (event as CustomEvent).detail;\n    const panelName: string | undefined = detail?.item?.panel;\n    if (!panelName) return;\n\n    this.activatePanel(panelName);\n  };\n\n  /** Activate a panel by name, deactivating all others. */\n  public activatePanel(name: string) {\n    const allPanels = this.panels;\n    allPanels.forEach(panel => {\n      panel.active = panel.name === name;\n    });\n\n    this.emit('nile-panel-change', { panel: name });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"panel-group\" part=\"base\">\n        <div class=\"sidebar-container\" part=\"sidebar-container\">\n          <slot name=\"sidebar\"></slot>\n        </div>\n        <div class=\"panel-container\" part=\"panel-container\">\n          <slot\n            @slotchange=${() => this.requestUpdate()}\n          ></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default NileInlineSidebarPanelGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-sidebar-panel-group': NileInlineSidebarPanelGroup;\n  }\n}\n"]}

package/dist/src/nile-nav-tab/index.d.ts

@@ -0,0 +1 @@
+export { NileNavTab } from './nile-nav-tab';

package/dist/src/nile-nav-tab/index.js

@@ -0,0 +1,2 @@
+export { NileNavTab } from './nile-nav-tab';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-nav-tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-nav-tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { NileNavTab } from './nile-nav-tab';"]}

package/dist/src/nile-nav-tab/nile-nav-tab.css.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-nav-tab/nile-nav-tab.css.js

@@ -0,0 +1,199 @@
+/**
+ * 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';
+export const styles = css `
+  
+  [hidden] {
+    display: none;
+  }
+
+  :host {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    position: relative;
+
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    cursor: pointer;
+  }
+
+  :host([centered]) {
+    flex: 1;
+    text-align: center;
+  }
+
+  /* --------------------------------------------------------------------------
+   * Tab shell (list item)
+   * -------------------------------------------------------------------------- */
+
+  .nav-tab-container {
+    flex: 1 1 auto;
+    width: var(--nav-tab-item-width);
+    padding: 0;
+    box-sizing: border-box;
+    border-radius: var(--nile-nav-tab-radius);
+    border: var(--nile-nav-transparent-border);
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    list-style: none;
+    overflow: var(--nile-nav-tab-container-overflow);
+    margin-top: var(--nile-nav-tab-margin);
+    margin-bottom: var(--nile-nav-tab-margin);
+  
+  }
+
+  /* --------------------------------------------------------------------------
+   * nile-link wrapper + internal <a> (part base)
+   * -------------------------------------------------------------------------- */
+
+  .nav-tab {
+    display: flex;
+    flex: 1 1 auto;
+    align-self: stretch;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .nav-tab::part(base) {
+    display: flex;
+    flex: 1 1 auto;
+    align-self: stretch;
+    width: 100%;
+    min-height: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: var(--justify-content);
+    white-space: var(--white-space, nowrap);
+    user-select: none;
+    transition: 0.2s box-shadow, 0.2s color;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    box-sizing: border-box;
+    text-decoration: none;
+    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+    letter-spacing: 0.2px;
+    word-break: var(--word-break);
+    overflow-wrap: var(--overflow-wrap);
+    text-align: var(--text-align);
+    padding: var(--nile-nav-tab-padding);
+  }
+
+  /* --------------------------------------------------------------------------
+   * Host: active / hover (container + link color)
+   * -------------------------------------------------------------------------- */
+
+  :host([active]) .nav-tab-container {
+    background-color: var(--nile-nav-tab-bg-active);
+    border-radius: var(--nile-nav-tab-radius);
+    border: var(--nile-nav-tab-border);
+    box-shadow: var(--nile-nav-tab-active-box-shadow);
+  }
+
+  :host(:hover:not([disabled]):not([active])) .nav-tab-container {
+    background-color: var(--nile-nav-tab-bg-hover);
+    border: var(--nile-nav-tab-border);
+    box-shadow: var(--nile-nav-tab-active-box-shadow);
+  }
+
+  :host(:hover:not([disabled]):not([active])) .nav-tab-container ::part(base) {
+    color: var(--nile-nav-tab-text-color-hover, var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700)));
+  }
+
+  /* --------------------------------------------------------------------------
+   * nile-link part: label inherits anchor
+   * -------------------------------------------------------------------------- */
+
+  .nav-tab::part(label) {
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    font-style: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
+
+  /* --------------------------------------------------------------------------
+   * Interaction states (::part base)
+   * -------------------------------------------------------------------------- */
+
+  /* Default (inactive) */
+  .nav-tab:not(.nav-tab--active):not(.nav-tab--disabled)::part(base) {
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
+  }
+
+  /* Hover */
+  .nav-tab:hover:not(.nav-tab--disabled)::part(base) {
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-brand-secondary-700));
+    background-color: var(--tab-hover-background-color);
+  }
+
+  /* Focus — roving tabindex is on :host; inner link stays tabindex=-1 */
+  :host(:focus-visible:not([disabled])) .nav-tab::part(base) {
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+  }
+
+  /* Active */
+  .nav-tab.nav-tab--active:not(.nav-tab--disabled)::part(base) {
+    color: var(--nile-nav-tab-active-color, var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700)));
+    background-color: var(--tab-active-background-color);
+  }
+
+  /* --------------------------------------------------------------------------
+   * Disabled
+   * -------------------------------------------------------------------------- */
+
+  .nav-tab.nav-tab--disabled {
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) .nav-tab-container {
+    cursor: not-allowed;
+  }
+
+  .nav-tab.nav-tab--disabled::part(base) {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .nav-tab.nav-tab--disabled::part(label) {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+  }
+
+  .nav-tab.nav-tab--disabled:hover::part(base),
+  :host([disabled]:focus-visible) .nav-tab::part(base) {
+    background-color: transparent;
+  }
+
+  /* --------------------------------------------------------------------------
+   * Closable: close button
+   * -------------------------------------------------------------------------- */
+
+  .nav-tab__close-button {
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
+    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+  .nav-tab__close-button::part(base) {
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+ 
+`;
+export default [styles];
+//# sourceMappingURL=nile-nav-tab.css.js.map

package/dist/src/nile-nav-tab/nile-nav-tab.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-nav-tab.css.js","sourceRoot":"","sources":["../../../src/nile-nav-tab/nile-nav-tab.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LxB,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\nexport const styles = css`\n  \n  [hidden] {\n    display: none;\n  }\n\n  :host {\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    position: relative;\n\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    cursor: pointer;\n  }\n\n  :host([centered]) {\n    flex: 1;\n    text-align: center;\n  }\n\n  /* --------------------------------------------------------------------------\n   * Tab shell (list item)\n   * -------------------------------------------------------------------------- */\n\n  .nav-tab-container {\n    flex: 1 1 auto;\n    width: var(--nav-tab-item-width);\n    padding: 0;\n    box-sizing: border-box;\n    border-radius: var(--nile-nav-tab-radius);\n    border: var(--nile-nav-transparent-border);\n    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    list-style: none;\n    overflow: var(--nile-nav-tab-container-overflow);\n    margin-top: var(--nile-nav-tab-margin);\n    margin-bottom: var(--nile-nav-tab-margin);\n  \n  }\n\n  /* --------------------------------------------------------------------------\n   * nile-link wrapper + internal <a> (part base)\n   * -------------------------------------------------------------------------- */\n\n  .nav-tab {\n    display: flex;\n    flex: 1 1 auto;\n    align-self: stretch;\n    width: 100%;\n    min-width: 0;\n    min-height: 0;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  .nav-tab::part(base) {\n    display: flex;\n    flex: 1 1 auto;\n    align-self: stretch;\n    width: 100%;\n    min-height: 100%;\n    height: 100%;\n    align-items: center;\n    justify-content: var(--justify-content);\n    white-space: var(--white-space, nowrap);\n    user-select: none;\n    transition: 0.2s box-shadow, 0.2s color;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    box-sizing: border-box;\n    text-decoration: none;\n    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    word-break: var(--word-break);\n    overflow-wrap: var(--overflow-wrap);\n    text-align: var(--text-align);\n    padding: var(--nile-nav-tab-padding);\n  }\n\n  /* --------------------------------------------------------------------------\n   * Host: active / hover (container + link color)\n   * -------------------------------------------------------------------------- */\n\n  :host([active]) .nav-tab-container {\n    background-color: var(--nile-nav-tab-bg-active);\n    border-radius: var(--nile-nav-tab-radius);\n    border: var(--nile-nav-tab-border);\n    box-shadow: var(--nile-nav-tab-active-box-shadow);\n  }\n\n  :host(:hover:not([disabled]):not([active])) .nav-tab-container {\n    background-color: var(--nile-nav-tab-bg-hover);\n    border: var(--nile-nav-tab-border);\n    box-shadow: var(--nile-nav-tab-active-box-shadow);\n  }\n\n  :host(:hover:not([disabled]):not([active])) .nav-tab-container ::part(base) {\n    color: var(--nile-nav-tab-text-color-hover, var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700)));\n  }\n\n  /* --------------------------------------------------------------------------\n   * nile-link part: label inherits anchor\n   * -------------------------------------------------------------------------- */\n\n  .nav-tab::part(label) {\n    color: inherit;\n    font-family: inherit;\n    font-size: inherit;\n    font-style: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n    letter-spacing: inherit;\n  }\n\n  /* --------------------------------------------------------------------------\n   * Interaction states (::part base)\n   * -------------------------------------------------------------------------- */\n\n  /* Default (inactive) */\n  .nav-tab:not(.nav-tab--active):not(.nav-tab--disabled)::part(base) {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n  }\n\n  /* Hover */\n  .nav-tab:hover:not(.nav-tab--disabled)::part(base) {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-brand-secondary-700));\n    background-color: var(--tab-hover-background-color);\n  }\n\n  /* Focus — roving tabindex is on :host; inner link stays tabindex=-1 */\n  :host(:focus-visible:not([disabled])) .nav-tab::part(base) {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  /* Active */\n  .nav-tab.nav-tab--active:not(.nav-tab--disabled)::part(base) {\n    color: var(--nile-nav-tab-active-color, var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700)));\n    background-color: var(--tab-active-background-color);\n  }\n\n  /* --------------------------------------------------------------------------\n   * Disabled\n   * -------------------------------------------------------------------------- */\n\n  .nav-tab.nav-tab--disabled {\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) .nav-tab-container {\n    cursor: not-allowed;\n  }\n\n  .nav-tab.nav-tab--disabled::part(base) {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .nav-tab.nav-tab--disabled::part(label) {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n  }\n\n  .nav-tab.nav-tab--disabled:hover::part(base),\n  :host([disabled]:focus-visible) .nav-tab::part(base) {\n    background-color: transparent;\n  }\n\n  /* --------------------------------------------------------------------------\n   * Closable: close button\n   * -------------------------------------------------------------------------- */\n\n  .nav-tab__close-button {\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .nav-tab__close-button::part(base) {\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n \n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-nav-tab/nile-nav-tab.d.ts

@@ -0,0 +1,50 @@
+/**
+ * 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 type { CSSResultGroup } from 'lit';
+import '../nile-icon-button/nile-icon-button';
+import NileElement from '../internal/nile-element';
+import '../nile-link/nile-link';
+export declare class NileNavTab extends NileElement {
+    static styles: CSSResultGroup;
+    private readonly attrId;
+    private readonly componentId;
+    navTab: HTMLElement;
+    /** The name of the tab panel this tab is associated with. */
+    panel: string;
+    /** Draws the tab in an active state. */
+    active: boolean;
+    /** Makes the tab closable and shows a close button. */
+    closable: boolean;
+    /** Disables the tab and prevents selection. */
+    disabled: boolean;
+    centered: boolean;
+    link?: string;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    updated(): void;
+    private syncA11yState;
+    /**
+     * Give the host element the accessible name, since nile-link is hidden
+     * from the accessibility tree.
+     * Author `aria-label` (without `data-auto-aria-label`) is never overwritten so icon-only tabs can keep explicit names.
+     * Auto-derived names set `data-auto-aria-label="true"` so slot/text updates can refresh them.
+     */
+    private updateAccessibleName;
+    private handleCloseClick;
+    private handleTabClick;
+    handleActiveChange(): void;
+    handleDisabledChange(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default NileNavTab;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-nav-tab': NileNavTab;
+    }
+}