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

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

@@ -0,0 +1,69 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-side-bar.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile side-bar component.
+ *
+ * @tag nile-side-bar
+ *
+ * @attr position - Position of the sidebar ("left" | "right"). Defaults to "left".
+ * @attr width - Expanded width of the sidebar (px).
+ * @attr collapsed-width - Collapsed width of the sidebar (px).
+ */
+let NileSideBar = class NileSideBar extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.position = 'left';
+        this.collapsed = false;
+        this.fullHeight = false;
+        this.width = null;
+        this.collapsedWidth = null;
+    }
+    static get styles() {
+        return [styles];
+    }
+    updated(changedProps) {
+        super.updated(changedProps);
+        if (changedProps.has('collapsed')) {
+            this.querySelectorAll('nile-side-bar-footer-item, nile-side-bar-group-item, nile-side-bar-group').forEach(el => el.toggleAttribute('collapsed', this.collapsed));
+        }
+        if (changedProps.has('width') && this.width !== null) {
+            this.style.setProperty('--sidebar-width', `${this.width}px`);
+        }
+        if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {
+            this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileSideBar.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileSideBar.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileSideBar.prototype, "fullHeight", void 0);
+__decorate([
+    property({ type: Number, attribute: true })
+], NileSideBar.prototype, "width", void 0);
+__decorate([
+    property({ type: Number, attribute: true })
+], NileSideBar.prototype, "collapsedWidth", void 0);
+NileSideBar = __decorate([
+    customElement('nile-side-bar')
+], NileSideBar);
+export { NileSideBar };
+export default NileSideBar;
+//# sourceMappingURL=nile-side-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.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,qBAAqB,CAAC;AAC7C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;GAQG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QACsD,aAAQ,GAAqB,MAAM,CAAC;QAEnC,cAAS,GAAY,KAAK,CAAC;QAE3B,eAAU,GAAY,KAAK,CAAC;QAE5C,UAAK,GAAkB,IAAI,CAAC;QAG5B,mBAAc,GAAkB,IAAI,CAAC;IA0BnF,CAAC;IAxBQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAES,OAAO,CAAC,YAAkC;QAClD,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAE5B,IAAI,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,gBAAgB,CACnB,0EAA0E,CAC3E,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QACnE,CAAC;QAED,IAAI,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACrD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAC/D,CAAC;QACD,IAAI,YAAY,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE,CAAC;YACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC;QAClF,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAnC4D;IAA1D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAAoC;AAEnC;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;8CAA2B;AAE3B;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CAA4B;AAE5C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CAA4B;AAG5B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;mDAAqC;AAVtE,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAoCvB;;AAED,eAAe,WAAW,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar component.\n *\n * @tag nile-side-bar\n *\n * @attr position - Position of the sidebar (\"left\" | \"right\"). Defaults to \"left\".\n * @attr width - Expanded width of the sidebar (px).\n * @attr collapsed-width - Collapsed width of the sidebar (px).\n */\n@customElement('nile-side-bar')\nexport class NileSideBar extends NileElement {\n  @property({ type: String, reflect: true, attribute: true })position: 'left' | 'right' = 'left';\n\n  @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;\n   \n  @property({ type: Number, attribute: true })width: number | null = null;\n\n \n  @property({ type: Number, attribute: true })collapsedWidth: number | null = null;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  protected updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    if (changedProps.has('collapsed')) {\n      this.querySelectorAll<NileElement>(\n        'nile-side-bar-footer-item, nile-side-bar-group-item, nile-side-bar-group'\n      ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));\n    }\n\n    if (changedProps.has('width') && this.width !== null) {\n      this.style.setProperty('--sidebar-width', `${this.width}px`);\n    }\n    if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {\n      this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\nexport default NileSideBar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar': NileSideBar;\n  }\n}\n"]}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+import { css } from 'lit';
+export const styles = css `
+ :host {
+    display: inline-block;
+    -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));
+  }
+
+  .dropdown::part(popup) {
+    z-index: 900;
+  }
+
+  .dropdown[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .dropdown[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .dropdown[data-current-placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .dropdown[data-current-placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .dropdown__trigger {
+    display: block;
+  }
+
+  .dropdown__panel {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+    box-shadow: var(--nile-box-shadow-9, var(--ng-shadow-lg));
+    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
+    pointer-events: none;
+  }
+
+  .dropdown--open .dropdown__panel {
+    display: block;
+    pointer-events: all;
+  }
+
+ 
+  ::slotted(nile-menu) {
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-side-bar-action.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-action.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-action/nile-side-bar-action.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n    display: inline-block;\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  }\n\n  .dropdown::part(popup) {\n    z-index: 900;\n  }\n\n  .dropdown[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .dropdown[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .dropdown[data-current-placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .dropdown[data-current-placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .dropdown__trigger {\n    display: block;\n  }\n\n  .dropdown__panel {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n    box-shadow: var(--nile-box-shadow-9, var(--ng-shadow-lg));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    pointer-events: none;\n  }\n\n  .dropdown--open .dropdown__panel {\n    display: block;\n    pointer-events: all;\n  }\n\n \n  ::slotted(nile-menu) {\n    max-width: var(--auto-size-available-width) !important;\n    max-height: var(--auto-size-available-height) !important;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-side-bar-action/nile-side-bar-action.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+import type { NileMenu } from '../nile-menu';
+import type { NilePopup } from '../nile-popup';
+import '../nile-popup';
+/**
+ * Nile side-bar-action component.
+ *
+ * @tag nile-side-bar-action
+ *
+ * @slot trigger - The clickable trigger (icon/button).
+ * @slot - The dropdown panel content (menu, custom content).
+ *
+ * @event nile-show - Fired when dropdown opens.
+ * @event nile-after-show - Fired after dropdown + animations.
+ * @event nile-hide - Fired when dropdown closes.
+ * @event nile-after-hide - Fired after dropdown closes + animations.
+ */
+export declare class NileSideBarAction extends NileElement {
+    static styles: CSSResultArray;
+    popup: NilePopup;
+    trigger: HTMLSlotElement;
+    panel: HTMLSlotElement;
+    /** Whether the dropdown is open */
+    open: boolean;
+    /** Preferred placement relative to trigger */
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+    /** Disable interaction */
+    disabled: boolean;
+    /** Keep open on select */
+    stayOpenOnSelect: boolean;
+    /** External containing element (default: self) */
+    containingElement?: HTMLElement;
+    /** Offsets */
+    distance: number;
+    skidding: number;
+    /** Sync size with trigger */
+    sync: 'width' | 'height' | 'both';
+    /** Hoist above scroll containers */
+    hoist: boolean;
+    triggerDropdown: 'click' | 'hover';
+    private hoverTimeout;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    handleTriggerMouseEnter(): void;
+    handleTriggerMouseLeave(): void;
+    disconnectedCallback(): void;
+    focusOnTrigger(): void;
+    getMenu(): NileMenu | undefined;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleDocumentKeyDown(event: KeyboardEvent): void;
+    handleDocumentMouseDown(event: MouseEvent): void;
+    handlePanelSelect(event: any): void;
+    handleTriggerClick(): void;
+    handleTriggerKeyDown(event: KeyboardEvent): void;
+    handleTriggerKeyUp(event: KeyboardEvent): void;
+    handleTriggerSlotChange(): void;
+    updateAccessibleTrigger(): void;
+    /** Public methods */
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    reposition(): void;
+    addOpenListeners(): void;
+    removeOpenListeners(): void;
+    handleOpenChange(): Promise<void>;
+    render(): TemplateResult;
+}
+export default NileSideBarAction;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-side-bar-action': NileSideBarAction;
+    }
+}

package/dist/src/nile-side-bar-action/nile-side-bar-action.js

@@ -0,0 +1,365 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-side-bar-action.css';
+import NileElement from '../internal/nile-element';
+import { animateTo, stopAnimations } from '../internal/animate';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { getTabbableBoundary } from '../internal/tabbable';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
+import '../nile-popup';
+/**
+ * Nile side-bar-action component.
+ *
+ * @tag nile-side-bar-action
+ *
+ * @slot trigger - The clickable trigger (icon/button).
+ * @slot - The dropdown panel content (menu, custom content).
+ *
+ * @event nile-show - Fired when dropdown opens.
+ * @event nile-after-show - Fired after dropdown + animations.
+ * @event nile-hide - Fired when dropdown closes.
+ * @event nile-after-hide - Fired after dropdown closes + animations.
+ */
+let NileSideBarAction = class NileSideBarAction extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the dropdown is open */
+        this.open = false;
+        /** Preferred placement relative to trigger */
+        this.placement = 'bottom-start';
+        /** Disable interaction */
+        this.disabled = false;
+        /** Keep open on select */
+        this.stayOpenOnSelect = false;
+        /** Offsets */
+        this.distance = 0;
+        this.skidding = 0;
+        /** Hoist above scroll containers */
+        this.hoist = false;
+        this.triggerDropdown = 'click';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handlePanelSelect = this.handlePanelSelect.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+        this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+        this.handleTriggerMouseEnter = this.handleTriggerMouseEnter.bind(this);
+        this.handleTriggerMouseLeave = this.handleTriggerMouseLeave.bind(this);
+        if (!this.containingElement) {
+            this.containingElement = this;
+        }
+        this.emit('nile-init');
+    }
+    firstUpdated() {
+        this.panel.hidden = !this.open;
+        if (this.triggerDropdown === 'hover') {
+            const triggerEl = this.trigger;
+            if (triggerEl) {
+                triggerEl.addEventListener('mouseenter', this.handleTriggerMouseEnter);
+                triggerEl.addEventListener('mouseleave', this.handleTriggerMouseLeave);
+            }
+            if (this.panel) {
+                this.panel.addEventListener('mouseenter', this.handleTriggerMouseEnter);
+                this.panel.addEventListener('mouseleave', this.handleTriggerMouseLeave);
+            }
+        }
+        else {
+        }
+        if (this.open) {
+            this.addOpenListeners();
+            this.popup.active = true;
+        }
+    }
+    handleTriggerMouseEnter() {
+        clearTimeout(this.hoverTimeout);
+        this.show();
+    }
+    handleTriggerMouseLeave() {
+        clearTimeout(this.hoverTimeout);
+        this.hoverTimeout = window.setTimeout(() => this.hide(), 200);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeOpenListeners();
+        this.hide();
+        this.emit('nile-destroy');
+    }
+    focusOnTrigger() {
+        const trigger = this.trigger.assignedElements({ flatten: true })[0];
+        if (typeof trigger?.focus === 'function') {
+            trigger.focus();
+        }
+    }
+    getMenu() {
+        return this.panel.assignedElements({ flatten: true }).find(el => el.tagName.toLowerCase() === 'nile-menu');
+    }
+    handleKeyDown(event) {
+        if (this.open && event.key === 'Escape') {
+            event.stopPropagation();
+            this.hide();
+            this.focusOnTrigger();
+        }
+    }
+    handleDocumentKeyDown(event) {
+        if (event.key === 'Escape' && this.open) {
+            event.stopPropagation();
+            this.focusOnTrigger();
+            this.hide();
+            return;
+        }
+        if (event.key === 'Tab') {
+            setTimeout(() => {
+                const activeElement = this.containingElement?.getRootNode() instanceof ShadowRoot
+                    ? document.activeElement?.shadowRoot?.activeElement
+                    : document.activeElement;
+                if (!this.containingElement ||
+                    activeElement?.closest(this.containingElement.tagName.toLowerCase()) !==
+                        this.containingElement) {
+                    this.hide();
+                }
+            });
+        }
+    }
+    handleDocumentMouseDown(event) {
+        const path = event.composedPath();
+        if (this.containingElement && !path.includes(this.containingElement)) {
+            this.hide();
+        }
+    }
+    handlePanelSelect(event) {
+        const target = event.target;
+        if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'nile-menu') {
+            this.hide();
+            this.focusOnTrigger();
+        }
+    }
+    handleTriggerClick() {
+        if (this.open) {
+            this.hide();
+        }
+        else {
+            this.show();
+            this.focusOnTrigger();
+        }
+    }
+    handleTriggerKeyDown(event) {
+        const menu = this.getMenu();
+        if (menu) {
+            const menuItems = menu.getAllItems();
+            const firstMenuItem = menuItems[0];
+            const lastMenuItem = menuItems[menuItems.length - 1];
+            if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+                event.preventDefault();
+                if (!this.open)
+                    this.show();
+                if (menuItems.length > 0) {
+                    this.updateComplete.then(() => {
+                        if (event.key === 'ArrowDown' || event.key === 'Home') {
+                            menu.setCurrentItem(firstMenuItem);
+                            firstMenuItem.focus();
+                        }
+                        if (event.key === 'ArrowUp' || event.key === 'End') {
+                            menu.setCurrentItem(lastMenuItem);
+                            lastMenuItem.focus();
+                        }
+                    });
+                }
+            }
+        }
+    }
+    handleTriggerKeyUp(event) {
+        if (event.key === ' ') {
+            event.preventDefault();
+        }
+    }
+    handleTriggerSlotChange() {
+        this.updateAccessibleTrigger();
+    }
+    updateAccessibleTrigger() {
+        const assignedElements = this.trigger.assignedElements({ flatten: true });
+        const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);
+        let target;
+        if (accessibleTrigger) {
+            switch (accessibleTrigger.tagName.toLowerCase()) {
+                case 'nile-button':
+                case 'nile-icon-button':
+                    target = accessibleTrigger.button;
+                    break;
+                default:
+                    target = accessibleTrigger;
+            }
+            target.setAttribute('aria-haspopup', 'true');
+            target.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+        }
+    }
+    /** Public methods */
+    async show() {
+        if (this.open)
+            return;
+        this.open = true;
+        return waitForEvent(this, 'nile-after-show');
+    }
+    async hide() {
+        if (!this.open)
+            return;
+        this.open = false;
+        return waitForEvent(this, 'nile-after-hide');
+    }
+    reposition() {
+        this.popup.reposition();
+    }
+    addOpenListeners() {
+        this.panel.addEventListener('nile-select', this.handlePanelSelect);
+        this.panel.addEventListener('keydown', this.handleKeyDown);
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+        document.addEventListener('mousedown', this.handleDocumentMouseDown);
+    }
+    removeOpenListeners() {
+        if (this.panel) {
+            this.panel.removeEventListener('nile-select', this.handlePanelSelect);
+            this.panel.removeEventListener('keydown', this.handleKeyDown);
+        }
+        document.removeEventListener('keydown', this.handleDocumentKeyDown);
+        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    }
+    async handleOpenChange() {
+        if (this.disabled) {
+            this.open = false;
+            return;
+        }
+        this.updateAccessibleTrigger();
+        if (this.open) {
+            this.emit('nile-show');
+            this.addOpenListeners();
+            await stopAnimations(this);
+            this.panel.hidden = false;
+            this.popup.active = true;
+            const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: '' });
+            await animateTo(this.popup.popup, keyframes, options);
+            this.emit('nile-after-show');
+        }
+        else {
+            this.emit('nile-hide');
+            this.removeOpenListeners();
+            await stopAnimations(this);
+            const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: '' });
+            await animateTo(this.popup.popup, keyframes, options);
+            this.panel.hidden = true;
+            this.popup.active = false;
+            this.emit('nile-after-hide');
+        }
+    }
+    render() {
+        return html `
+      <nile-popup
+        part="base"
+        id="sidebar-action-dropdown"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        sync=${this.sync}
+        flip
+        shift
+        auto-size="both"
+        auto-size-padding="10"
+        class=${classMap({
+            dropdown: true,
+            'dropdown--open': this.open
+        })}
+      >
+        <slot
+          name="trigger"
+          slot="anchor"
+          part="trigger"
+          class="dropdown__trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+          @keyup=${this.handleTriggerKeyUp}
+          @slotchange=${this.handleTriggerSlotChange}
+        ></slot>
+
+        <slot
+          part="panel"
+          class="dropdown__panel"
+          aria-hidden=${this.open ? 'false' : 'true'}
+          aria-labelledby="sidebar-action-dropdown"
+        ></slot>
+      </nile-popup>
+    `;
+    }
+};
+NileSideBarAction.styles = [styles];
+__decorate([
+    query('.dropdown')
+], NileSideBarAction.prototype, "popup", void 0);
+__decorate([
+    query('.dropdown__trigger')
+], NileSideBarAction.prototype, "trigger", void 0);
+__decorate([
+    query('.dropdown__panel')
+], NileSideBarAction.prototype, "panel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSideBarAction.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true })
+], NileSideBarAction.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSideBarAction.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: 'stay-open-on-select', type: Boolean, reflect: true })
+], NileSideBarAction.prototype, "stayOpenOnSelect", void 0);
+__decorate([
+    property({ attribute: false })
+], NileSideBarAction.prototype, "containingElement", void 0);
+__decorate([
+    property({ type: Number })
+], NileSideBarAction.prototype, "distance", void 0);
+__decorate([
+    property({ type: Number })
+], NileSideBarAction.prototype, "skidding", void 0);
+__decorate([
+    property()
+], NileSideBarAction.prototype, "sync", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileSideBarAction.prototype, "hoist", void 0);
+__decorate([
+    property({ reflect: true })
+], NileSideBarAction.prototype, "triggerDropdown", void 0);
+__decorate([
+    watch('open', { waitUntilFirstUpdate: true })
+], NileSideBarAction.prototype, "handleOpenChange", null);
+NileSideBarAction = __decorate([
+    customElement('nile-side-bar-action')
+], NileSideBarAction);
+export { NileSideBarAction };
+/* Default animations */
+setDefaultAnimation('dropdown.show', {
+    keyframes: [
+        { opacity: 0, scale: 0.9 },
+        { opacity: 1, scale: 1 }
+    ],
+    options: { duration: 100, easing: 'ease' }
+});
+setDefaultAnimation('dropdown.hide', {
+    keyframes: [
+        { opacity: 1, scale: 1 },
+        { opacity: 0, scale: 0.9 }
+    ],
+    options: { duration: 100, easing: 'ease' }
+});
+export default NileSideBarAction;
+//# sourceMappingURL=nile-side-bar-action.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-action.js","sourceRoot":"","sources":["../../../src/nile-side-bar-action/nile-side-bar-action.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-side-bar-action.css';\nimport NileElement from '../internal/nile-element';\n\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { getTabbableBoundary } from '../internal/tabbable';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\n\nimport type NileButton from '../nile-button/nile-button';\nimport type NileIconButton from '../nile-icon-button/nile-icon-button';\nimport type { NileMenu } from '../nile-menu';\nimport type { NilePopup } from '../nile-popup';\nimport '../nile-popup';\n\n/**\n * Nile side-bar-action component.\n *\n * @tag nile-side-bar-action\n *\n * @slot trigger - The clickable trigger (icon/button).\n * @slot - The dropdown panel content (menu, custom content).\n *\n * @event nile-show - Fired when dropdown opens.\n * @event nile-after-show - Fired after dropdown + animations.\n * @event nile-hide - Fired when dropdown closes.\n * @event nile-after-hide - Fired after dropdown closes + animations.\n */\n@customElement('nile-side-bar-action')\nexport class NileSideBarAction extends NileElement {\n  static styles: CSSResultArray = [styles];\n\n  @query('.dropdown') popup: NilePopup;\n  @query('.dropdown__trigger') trigger: HTMLSlotElement;\n  @query('.dropdown__panel') panel: HTMLSlotElement;\n\n  /** Whether the dropdown is open */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Preferred placement relative to trigger */\n  @property({ reflect: true }) placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-start';\n\n  /** Disable interaction */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Keep open on select */\n  @property({ attribute: 'stay-open-on-select', type: Boolean, reflect: true })\n  stayOpenOnSelect = false;\n\n  /** External containing element (default: self) */\n  @property({ attribute: false }) containingElement?: HTMLElement;\n\n  /** Offsets */\n  @property({ type: Number }) distance = 0;\n  @property({ type: Number }) skidding = 0;\n\n  /** Sync size with trigger */\n  @property() sync: 'width' | 'height' | 'both';\n\n  /** Hoist above scroll containers */\n  @property({ type: Boolean }) hoist = false;\n\n  @property({ reflect: true }) triggerDropdown: 'click' | 'hover' = 'click';\n  private hoverTimeout: number | undefined;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handlePanelSelect = this.handlePanelSelect.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n    this.handleTriggerMouseEnter = this.handleTriggerMouseEnter.bind(this);\n    this.handleTriggerMouseLeave = this.handleTriggerMouseLeave.bind(this);\n  \n    if (!this.containingElement) {\n      this.containingElement = this;\n    }\n    this.emit('nile-init');\n  }\n  \n \n  \n  firstUpdated() {\n    this.panel.hidden = !this.open;\n  \n    if (this.triggerDropdown === 'hover') {\n      const triggerEl = this.trigger;\n      if (triggerEl) {\n        triggerEl.addEventListener('mouseenter', this.handleTriggerMouseEnter);\n        triggerEl.addEventListener('mouseleave', this.handleTriggerMouseLeave);\n      }\n      if (this.panel) {\n        this.panel.addEventListener('mouseenter', this.handleTriggerMouseEnter);\n        this.panel.addEventListener('mouseleave', this.handleTriggerMouseLeave);\n      }\n    } else {\n    }\n  \n    if (this.open) {\n      this.addOpenListeners();\n      this.popup.active = true;\n    }\n  }\n  \n  handleTriggerMouseEnter() {\n    clearTimeout(this.hoverTimeout);\n    this.show();\n  }\n  \n  handleTriggerMouseLeave() {\n    clearTimeout(this.hoverTimeout);\n    this.hoverTimeout = window.setTimeout(() => this.hide(), 200);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeOpenListeners();\n    this.hide();\n    this.emit('nile-destroy');\n  }\n\n  focusOnTrigger() {\n    const trigger = this.trigger.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n    if (typeof trigger?.focus === 'function') {\n      trigger.focus();\n    }\n  }\n\n  getMenu() {\n    return this.panel.assignedElements({ flatten: true }).find(el =>\n      el.tagName.toLowerCase() === 'nile-menu'\n    ) as NileMenu | undefined;\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n      this.focusOnTrigger();\n    }\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.open) {\n      event.stopPropagation();\n      this.focusOnTrigger();\n      this.hide();\n      return;\n    }\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        const activeElement =\n          this.containingElement?.getRootNode() instanceof ShadowRoot\n            ? document.activeElement?.shadowRoot?.activeElement\n            : document.activeElement;\n\n        if (\n          !this.containingElement ||\n          activeElement?.closest(this.containingElement.tagName.toLowerCase()) !==\n            this.containingElement\n        ) {\n          this.hide();\n        }\n      });\n    }\n  }\n\n  handleDocumentMouseDown(event: MouseEvent) {\n    const path = event.composedPath();\n    if (this.containingElement && !path.includes(this.containingElement)) {\n      this.hide();\n    }\n  }\n\n  handlePanelSelect(event: any) {\n    const target = event.target as HTMLElement;\n    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'nile-menu') {\n      this.hide();\n      this.focusOnTrigger();\n    }\n  }\n\n  handleTriggerClick() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n      this.focusOnTrigger();\n    }\n  }\n\n  handleTriggerKeyDown(event: KeyboardEvent) {\n    const menu = this.getMenu();\n    if (menu) {\n      const menuItems = menu.getAllItems();\n      const firstMenuItem = menuItems[0];\n      const lastMenuItem = menuItems[menuItems.length - 1];\n\n      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n        event.preventDefault();\n        if (!this.open) this.show();\n        if (menuItems.length > 0) {\n          this.updateComplete.then(() => {\n            if (event.key === 'ArrowDown' || event.key === 'Home') {\n              menu.setCurrentItem(firstMenuItem);\n              firstMenuItem.focus();\n            }\n            if (event.key === 'ArrowUp' || event.key === 'End') {\n              menu.setCurrentItem(lastMenuItem);\n              lastMenuItem.focus();\n            }\n          });\n        }\n      }\n    }\n  }\n\n  handleTriggerKeyUp(event: KeyboardEvent) {\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n  }\n\n  handleTriggerSlotChange() {\n    this.updateAccessibleTrigger();\n  }\n\n  updateAccessibleTrigger() {\n    const assignedElements = this.trigger.assignedElements({ flatten: true }) as HTMLElement[];\n    const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);\n    let target: HTMLElement;\n\n    if (accessibleTrigger) {\n      switch (accessibleTrigger.tagName.toLowerCase()) {\n        case 'nile-button':\n        case 'nile-icon-button':\n          target = (accessibleTrigger as NileButton | NileIconButton).button;\n          break;\n        default:\n          target = accessibleTrigger;\n      }\n\n      target.setAttribute('aria-haspopup', 'true');\n      target.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n    }\n  }\n\n  /** Public methods */\n  async show() {\n    if (this.open) return;\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  async hide() {\n    if (!this.open) return;\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  reposition() {\n    this.popup.reposition();\n  }\n\n  addOpenListeners() {\n    this.panel.addEventListener('nile-select', this.handlePanelSelect);\n    this.panel.addEventListener('keydown', this.handleKeyDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n  }\n\n  removeOpenListeners() {\n    if (this.panel) {\n      this.panel.removeEventListener('nile-select', this.handlePanelSelect);\n      this.panel.removeEventListener('keydown', this.handleKeyDown);\n    }\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.disabled) {\n      this.open = false;\n      return;\n    }\n    this.updateAccessibleTrigger();\n\n    if (this.open) {\n      this.emit('nile-show');\n      this.addOpenListeners();\n\n      await stopAnimations(this);\n      this.panel.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: '' });\n      await animateTo(this.popup.popup, keyframes, options);\n      this.emit('nile-after-show');\n    } else {\n      this.emit('nile-hide');\n      this.removeOpenListeners();\n\n      await stopAnimations(this);\n      const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: '' });\n      await animateTo(this.popup.popup, keyframes, options);\n      this.panel.hidden = true;\n      this.popup.active = false;\n      this.emit('nile-after-hide');\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <nile-popup\n        part=\"base\"\n        id=\"sidebar-action-dropdown\"\n        placement=${this.placement}\n        distance=${this.distance}\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        sync=${this.sync}\n        flip\n        shift\n        auto-size=\"both\"\n        auto-size-padding=\"10\"\n        class=${classMap({\n          dropdown: true,\n          'dropdown--open': this.open\n        })}\n      >\n        <slot\n          name=\"trigger\"\n          slot=\"anchor\"\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          @click=${this.handleTriggerClick}\n          @keydown=${this.handleTriggerKeyDown}\n          @keyup=${this.handleTriggerKeyUp}\n          @slotchange=${this.handleTriggerSlotChange}\n        ></slot>\n\n        <slot\n          part=\"panel\"\n          class=\"dropdown__panel\"\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-labelledby=\"sidebar-action-dropdown\"\n        ></slot>\n      </nile-popup>\n    `;\n  }\n}\n\n/* Default animations */\nsetDefaultAnimation('dropdown.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n\nsetDefaultAnimation('dropdown.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.9 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n\nexport default NileSideBarAction;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-action': NileSideBarAction;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+export { NileSideBarActionMenu } from './nile-side-bar-action-menu';

package/dist/src/nile-side-bar-action-menu/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-side-bar-action-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export { NileSideBarActionMenu } from './nile-side-bar-action-menu';"]}