@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.5

package/dist/src/nile-accordion/nile-accordian.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-accordian.test.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordian.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testing';\nimport './nile-accordion';\nimport { NileAccordion } from './nile-accordion';\nimport Sinon from 'sinon';\n\ndescribe('NileAccordion', () => {\n  it('should render correctly', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    expect(el).to.be.instanceOf(NileAccordion);\n    expect(el.shadowRoot).not.to.be.null;\n    expect(el.summary).to.equal('Test Summary');\n  });\n\n  it('should initialize closed by default', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    expect(el.open).to.be.false;\n    const body = el.shadowRoot?.querySelector<HTMLElement>('.accordian__body');\n    expect(body?.hidden).to.be.true;\n  });\n\n  it('should open when clicked', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n    header.click();\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\n    const body = el.shadowRoot?.querySelector<HTMLElement>('.accordian__body');\n    expect(body?.hidden).to.be.false;\n  });\n\n  it('should emit \"nile-show\" and \"nile-after-show\" when opened', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    const showSpy = Sinon.spy(el, 'emit');\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n    setTimeout(() => header.click());\n    await oneEvent(el, 'nile-after-show');\n    expect(showSpy.calledWith('nile-show')).to.be.true;\n    expect(showSpy.calledWith('nile-after-show')).to.be.true;\n  });\n\n  it('should emit \"nile-hide\" and \"nile-after-hide\" when closed', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\" open></nile-accordion>`);\n    const hideSpy = Sinon.spy(el, 'emit');\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n    setTimeout(() => header.click());\n    await oneEvent(el, 'nile-after-hide');\n    expect(hideSpy.calledWith('nile-hide')).to.be.true;\n    expect(hideSpy.calledWith('nile-after-hide')).to.be.true;\n  });\n\n  it('should be disabled when the \"disabled\" property is set', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\" disabled></nile-accordion>`);\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n    header.click();\n    await elementUpdated(el);\n    expect(el.open).to.be.false;\n  });\n\n  it('should handle keyboard interaction (Enter and Space)', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n\n    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });\n    header.dispatchEvent(enterEvent);\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\n\n    const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });\n    header.dispatchEvent(spaceEvent);\n    await elementUpdated(el);\n    expect(el.open).to.be.false;\n  });\n\n  it('should handle ArrowUp/ArrowLeft to close and ArrowDown/ArrowRight to open', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n\n    const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' });\n    header.dispatchEvent(arrowDownEvent);\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\n\n    const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp' });\n    header.dispatchEvent(arrowUpEvent);\n    await elementUpdated(el);\n    expect(el.open).to.be.false;\n  });\n\n  it('should apply the \"variant\" class based on the variant property', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\" variant=\"dark\"></nile-accordion>`);\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header');\n    expect(header).to.have.class('accordian__header--dark');\n  });\n\n  it('should apply the correct size class based on the size property', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\" size=\"lg\"></nile-accordion>`);\n    const container = el.shadowRoot?.querySelector<HTMLElement>('.accordian');\n    expect(container).to.have.class('accordian--lg');\n  });\n\n  it('should apply the correct expand icon placement class based on the expandIconPlacement property', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\" expandIconPlacement=\"left\"></nile-accordion>`);\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header');\n    expect(header).to.have.class('accordian__header--arrow-left');\n  });\n\n  it('should animate when opening and closing', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    const animateSpy = Sinon.spy(el, 'handleOpenChange');\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n\n    header.click();\n    await elementUpdated(el);\n    expect(animateSpy.called).to.be.true;\n\n    header.click();\n    await elementUpdated(el);\n    expect(animateSpy.calledTwice).to.be.true;\n  });\n});\n"]}

package/dist/src/nile-accordion/nile-accordion.css.js

@@ -0,0 +1,145 @@
+/**
+* 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';
+/**
+ * Detail CSS
+ */
+export const styles = css `
+
+  :host {
+    box-sizing: border-box;
+    -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));
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: block;
+  }
+
+  .accordian {
+    border-top:solid 1px var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
+    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));
+    overflow-anchor: none;
+    line-height: var(--nile-line-height-inherit , var(--ng-line-height-text-sm));
+  }
+
+  .accordian--lg{
+    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
+    --accordian-heading-padding: var(--nile-spacing-xl , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));
+    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl));
+    --accordion-font-family : var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+  }
+
+  .accordian--md{
+    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
+    --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-lg , var(--ng-spacing-lg));
+    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-type-scale-5 , var(--ng-spacing-3xl));
+    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+  }
+
+  .accordian--sm{
+    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
+    --accordian-heading-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg));
+    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));
+    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+  }
+  
+  .accordian {
+    font-size: var(--accordian-text-size);
+    font-family: var(--accordion-font-family)
+  }
+
+  .accordian--disabled {
+    opacity: 0.5;
+  }
+
+  .accordian__header {
+    display: flex;
+    gap:var(--nile-spacing-lg , var(--ng-spacing-lg));
+    align-items: center;
+    border-radius: inherit;
+    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));
+    padding: var(--accordian-heading-padding);
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .accordian__header--dark{
+    background-color:var(--nile-colors-dark-200 , var(--ng-colors-bg-tertiary));
+  }
+
+  .accordian__header--arrow-left{
+    flex-direction: row-reverse;
+  }
+
+  .accordian__header:focus {
+    outline: none;
+  }
+
+  .accordian__header:focus-visible {
+    outline: solid 3px var(--nile-colors-blue-500);
+    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-shadow-xs));
+    outline-offset: calc(1px + 1px);
+  }
+
+  .accordian--disabled .accordian__header {
+    cursor: not-allowed;
+  }
+
+  .accordian--disabled .accordian__header:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .accordian__summary {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .accordian__summary-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: 250ms rotate ease;
+  }
+
+  .accordian--open .accordian__summary-icon {
+    rotate: 90deg;
+  }
+
+  .accordian--open slot[name='expand-icon'],
+  .accordian:not(.accordian--open) slot[name='collapse-icon'] {
+    display: none;
+  }
+
+  .accordian__body {
+    overflow: hidden;
+  }
+
+  .accordian__content {
+    display: block;
+    padding: var(--accordian-content-padding);
+  }
+
+  .accordian__content--arrow-left{
+   margin-left: var(--nile-spacing-4-x , var(--ng-spacing-3xl-alt));  
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-accordion.css.js.map

package/dist/src/nile-accordion/nile-accordion.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-accordion.css.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Detail CSS\n */\nexport const styles = css`\n\n  :host {\n    box-sizing: border-box;\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  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  .accordian {\n    border-top:solid 1px var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));\n    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));\n    overflow-anchor: none;\n    line-height: var(--nile-line-height-inherit , var(--ng-line-height-text-sm));\n  }\n\n  .accordian--lg{\n    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n    --accordian-heading-padding: var(--nile-spacing-xl , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl));\n    --accordion-font-family : var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n  }\n\n  .accordian--md{\n    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n    --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-type-scale-5 , var(--ng-spacing-3xl));\n    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n  }\n\n  .accordian--sm{\n    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n    --accordian-heading-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n  }\n  \n  .accordian {\n    font-size: var(--accordian-text-size);\n    font-family: var(--accordion-font-family)\n  }\n\n  .accordian--disabled {\n    opacity: 0.5;\n  }\n\n  .accordian__header {\n    display: flex;\n    gap:var(--nile-spacing-lg , var(--ng-spacing-lg));\n    align-items: center;\n    border-radius: inherit;\n    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));\n    padding: var(--accordian-heading-padding);\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .accordian__header--dark{\n    background-color:var(--nile-colors-dark-200 , var(--ng-colors-bg-tertiary));\n  }\n\n  .accordian__header--arrow-left{\n    flex-direction: row-reverse;\n  }\n\n  .accordian__header:focus {\n    outline: none;\n  }\n\n  .accordian__header:focus-visible {\n    outline: solid 3px var(--nile-colors-blue-500);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-shadow-xs));\n    outline-offset: calc(1px + 1px);\n  }\n\n  .accordian--disabled .accordian__header {\n    cursor: not-allowed;\n  }\n\n  .accordian--disabled .accordian__header:focus-visible {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .accordian__summary {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .accordian__summary-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n  }\n\n  .accordian--open .accordian__summary-icon {\n    rotate: 90deg;\n  }\n\n  .accordian--open slot[name='expand-icon'],\n  .accordian:not(.accordian--open) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .accordian__body {\n    overflow: hidden;\n  }\n\n  .accordian__content {\n    display: block;\n    padding: var(--accordian-content-padding);\n  }\n\n  .accordian__content--arrow-left{\n   margin-left: var(--nile-spacing-4-x , var(--ng-spacing-3xl-alt));  \n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-accordion/nile-accordion.js

@@ -0,0 +1,259 @@
+/**
+ * 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 { styles } from './nile-accordion.css';
+import NileElement from '../internal/nile-element';
+import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
+/**
+ * Nile detail component.
+ *
+ * @tag nile-accordion
+ *
+ */
+let NileAccordion = class NileAccordion extends NileElement {
+    constructor() {
+        /**
+         * @summary Accordian show a brief summary and expand to show additional content.
+         *
+         * @dependency nile-icon
+         *
+         * @slot - The accordian' main content.
+         * @slot summary - The accordian' summary. Alternatively, you can use the `summary` attribute.
+         * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.
+         * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.
+         *
+         * @event nile-show - Emitted when the accordian opens.
+         * @event nile-after-show - Emitted after the accordian opens and all animations are complete.
+         * @event nile-hide - Emitted when the accordian closes.
+         * @event nile-after-hide - Emitted after the accordian closes and all animations are complete.
+         *
+         * @csspart base - The component's base wrapper.
+         * @csspart header - The header that wraps both the summary and the expand/collapse icon.
+         * @csspart summary - The container that wraps the summary.
+         * @csspart summary-icon - The container that wraps the expand/collapse icons.
+         * @csspart content - The accordian content.
+         *
+         * @animation accordian.show - The animation to use when showing accordian. You can use `height: auto` with this animation.
+         * @animation accordian.hide - The animation to use when hiding accordian. You can use `height: auto` with this animation.
+         */
+        super(...arguments);
+        /**
+         * Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you
+         * can use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.
+         */
+        this.open = false;
+        /**
+         * Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.
+         * Defaults to `'light'`.
+         */
+        this.variant = 'light';
+        /**
+         * Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.
+         * Defaults to `'right'`.
+         */
+        this.expandIconPlacement = 'right';
+        /**
+         * Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.
+         * Defaults to `'md'`.
+         */
+        this.size = 'md';
+        /** Disables the accordian so it can't be toggled. */
+        this.disabled = false;
+    }
+    firstUpdated() {
+        this.body.hidden = !this.open;
+        this.body.style.height = this.open ? 'auto' : '0';
+    }
+    handleSummaryClick() {
+        if (!this.disabled) {
+            if (this.open) {
+                this.hide();
+            }
+            else {
+                this.show();
+            }
+            this.header.focus();
+        }
+    }
+    handleSummaryKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (this.open) {
+                this.hide();
+            }
+            else {
+                this.show();
+            }
+        }
+        if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this.hide();
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+            event.preventDefault();
+            this.show();
+        }
+    }
+    async handleOpenChange() {
+        if (this.open) {
+            // Show
+            const nileShow = this.emit('nile-show', { cancelable: true });
+            if (nileShow.defaultPrevented) {
+                this.open = false;
+                return;
+            }
+            await stopAnimations(this.body);
+            this.body.hidden = false;
+            const { keyframes, options } = getAnimation(this, 'accordian.show', { dir: 'ltr' });
+            await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+            this.body.style.height = 'auto';
+            this.emit('nile-after-show');
+        }
+        else {
+            // Hide
+            const nileHide = this.emit('nile-hide', { cancelable: true });
+            if (nileHide.defaultPrevented) {
+                this.open = true;
+                return;
+            }
+            await stopAnimations(this.body);
+            const { keyframes, options } = getAnimation(this, 'accordian.hide', { dir: 'ltr' });
+            await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+            this.body.hidden = true;
+            this.body.style.height = 'auto';
+            this.emit('nile-after-hide');
+        }
+    }
+    /** Shows the accordian. */
+    async show() {
+        if (this.open || this.disabled) {
+            return undefined;
+        }
+        this.open = true;
+        return waitForEvent(this, 'nile-after-show');
+    }
+    /** Hides the accordian */
+    async hide() {
+        if (!this.open || this.disabled) {
+            return undefined;
+        }
+        this.open = false;
+        return waitForEvent(this, 'nile-after-hide');
+    }
+    render() {
+        const isRtl = true;
+        return html `
+    <div
+      part="base"
+      class=${classMap({
+            accordian: true,
+            'accordian--open': this.open,
+            'accordian--disabled': this.disabled,
+            'accordian--sm': this.size == 'sm',
+            'accordian--md': this.size == 'md',
+            'accordian--lg': this.size == 'lg',
+        })}
+    >
+      <div
+        part="header"
+        id="header"
+        class="${classMap({
+            'accordian__header': true,
+            'accordian__header--dark': this.variant == 'dark',
+            'accordian__header--arrow-left': 'left' == this.expandIconPlacement
+        })}"
+        role="button"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-controls="content"
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this.handleSummaryClick}
+        @keydown=${this.handleSummaryKeyDown}
+      >
+        <slot name="summary" part="summary" class="accordian__summary">${this.summary}</slot>
+
+        <span part="summary-icon" class="accordian__summary-icon">
+          <slot name="expand-icon">
+            <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
+          </slot>
+          <slot name="collapse-icon">
+            <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
+          </slot>
+        </span>
+      </div>
+
+      <div class="accordian__body" role="region" aria-labelledby="header">
+        <slot part="content" id="content" 
+          class="${classMap({
+            'accordian__content': true,
+            'accordian__content--arrow-left': this.expandIconPlacement == 'left'
+        })}"></slot>
+      </div>
+    </div>
+  `;
+    }
+};
+NileAccordion.styles = styles;
+__decorate([
+    query('.accordian')
+], NileAccordion.prototype, "accordian", void 0);
+__decorate([
+    query('.accordian__header')
+], NileAccordion.prototype, "header", void 0);
+__decorate([
+    query('.accordian__body')
+], NileAccordion.prototype, "body", void 0);
+__decorate([
+    query('.accordian__expand-icon-slot')
+], NileAccordion.prototype, "expandIconSlot", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAccordion.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true })
+], NileAccordion.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], NileAccordion.prototype, "expandIconPlacement", void 0);
+__decorate([
+    property({ reflect: true })
+], NileAccordion.prototype, "size", void 0);
+__decorate([
+    property()
+], NileAccordion.prototype, "summary", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAccordion.prototype, "disabled", void 0);
+__decorate([
+    watch('open', { waitUntilFirstUpdate: true })
+], NileAccordion.prototype, "handleOpenChange", null);
+NileAccordion = __decorate([
+    customElement('nile-accordion')
+], NileAccordion);
+export { NileAccordion };
+setDefaultAnimation('accordian.show', {
+    keyframes: [
+        { height: '0', opacity: '0' },
+        { height: 'auto', opacity: '1' }
+    ],
+    options: { duration: 250, easing: 'linear' }
+});
+setDefaultAnimation('accordian.hide', {
+    keyframes: [
+        { height: 'auto', opacity: '1' },
+        { height: '0', opacity: '0' }
+    ],
+    options: { duration: 250, easing: 'linear' }
+});
+export default NileAccordion;
+//# sourceMappingURL=nile-accordion.js.map

package/dist/src/nile-accordion/nile-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-accordion.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport {styles} from './nile-accordion.css';\nimport NileElement from '../internal/nile-element';\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * Nile detail component.\n *\n * @tag nile-accordion\n *\n */\n@customElement('nile-accordion')\nexport class NileAccordion extends NileElement {\n\n/**\n * @summary Accordian show a brief summary and expand to show additional content.\n *\n * @dependency nile-icon\n *\n * @slot - The accordian' main content.\n * @slot summary - The accordian' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the accordian opens.\n * @event nile-after-show - Emitted after the accordian opens and all animations are complete.\n * @event nile-hide - Emitted when the accordian closes.\n * @event nile-after-hide - Emitted after the accordian closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart summary-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The accordian content.\n *\n * @animation accordian.show - The animation to use when showing accordian. You can use `height: auto` with this animation.\n * @animation accordian.hide - The animation to use when hiding accordian. You can use `height: auto` with this animation.\n */\n\nstatic styles: CSSResultGroup = styles;\n\n\n@query('.accordian') accordian: HTMLElement;\n@query('.accordian__header') header: HTMLElement;\n@query('.accordian__body') body: HTMLElement;\n@query('.accordian__expand-icon-slot') expandIconSlot: HTMLSlotElement;\n\n/**\n * Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\n * can use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n */\n@property({ type: Boolean, reflect: true }) open = false;\n\n/**\n * Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\n * Defaults to `'light'`.\n */\n@property({ reflect: true }) variant: 'dark' | 'light' = 'light';\n\n/**\n * Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\n * Defaults to `'right'`.\n */\n@property({ reflect: true }) expandIconPlacement: 'left' | 'right' = 'right';\n\n/**\n * Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\n * Defaults to `'md'`.\n */\n@property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n/** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */\n@property() summary: string;\n\n/** Disables the accordian so it can't be toggled. */\n@property({ type: Boolean, reflect: true }) disabled = false;\n\nfirstUpdated() {\n  this.body.hidden = !this.open;\n  this.body.style.height = this.open ? 'auto' : '0';\n}\n\nprivate handleSummaryClick() {\n  if (!this.disabled) {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n}\n\nprivate handleSummaryKeyDown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    event.preventDefault();\n    this.hide();\n  }\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    event.preventDefault();\n    this.show();\n  }\n}\n\n@watch('open', { waitUntilFirstUpdate: true })\nasync handleOpenChange() {\n  if (this.open) {\n    // Show\n    const nileShow = this.emit('nile-show', { cancelable: true });\n    if (nileShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, 'accordian.show', { dir: 'ltr' });\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.style.height = 'auto';\n\n    this.emit('nile-after-show');\n  } else {\n    // Hide\n    const nileHide = this.emit('nile-hide', { cancelable: true });\n    if (nileHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, 'accordian.hide', { dir: 'ltr' });\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = 'auto';\n\n    this.emit('nile-after-hide');\n  }\n}\n\n/** Shows the accordian. */\nasync show() {\n  if (this.open || this.disabled) {\n    return undefined;\n  }\n\n  this.open = true;\n  return waitForEvent(this, 'nile-after-show');\n}\n\n/** Hides the accordian */\nasync hide() {\n  if (!this.open || this.disabled) {\n    return undefined;\n  }\n\n  this.open = false;\n  return waitForEvent(this, 'nile-after-hide');\n}\n\nrender() {\n  const isRtl = true;\n\n  return html`\n    <div\n      part=\"base\"\n      class=${classMap({\n        accordian: true,\n        'accordian--open': this.open,\n        'accordian--disabled': this.disabled,\n        'accordian--sm':this.size=='sm',\n        'accordian--md':this.size=='md',\n        'accordian--lg':this.size=='lg',\n      })}\n    >\n      <div\n        part=\"header\"\n        id=\"header\"\n        class=\"${classMap({\n          'accordian__header':true,\n          'accordian__header--dark':this.variant=='dark',\n          'accordian__header--arrow-left':'left'==this.expandIconPlacement\n          })}\"\n        role=\"button\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-controls=\"content\"\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.handleSummaryClick}\n        @keydown=${this.handleSummaryKeyDown}\n      >\n        <slot name=\"summary\" part=\"summary\" class=\"accordian__summary\">${this.summary}</slot>\n\n        <span part=\"summary-icon\" class=\"accordian__summary-icon\">\n          <slot name=\"expand-icon\">\n            <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" library=\"system\"></nile-icon>\n          </slot>\n          <slot name=\"collapse-icon\">\n            <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" library=\"system\"></nile-icon>\n          </slot>\n        </span>\n      </div>\n\n      <div class=\"accordian__body\" role=\"region\" aria-labelledby=\"header\">\n        <slot part=\"content\" id=\"content\" \n          class=\"${classMap({\n            'accordian__content':true,\n            'accordian__content--arrow-left':this.expandIconPlacement=='left'\n            })}\"></slot>\n      </div>\n    </div>\n  `;\n}\n}\n\nsetDefaultAnimation('accordian.show', {\nkeyframes: [\n  { height: '0', opacity: '0' },\n  { height: 'auto', opacity: '1' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nsetDefaultAnimation('accordian.hide', {\nkeyframes: [\n  { height: 'auto', opacity: '1' },\n  { height: '0', opacity: '0' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nexport default NileAccordion;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-accordion': NileAccordion;\n  }\n}\n"]}

package/dist/src/nile-auto-complete/index.js

@@ -0,0 +1,2 @@
+export { NileAutoComplete } from './nile-auto-complete';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-auto-complete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["export { NileAutoComplete } from './nile-auto-complete';\n"]}

package/dist/src/nile-auto-complete/nile-auto-complete.css.js

@@ -0,0 +1,38 @@
+/**
+ * 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';
+/**
+ * AutoComplete CSS
+ */
+export const styles = css `
+  :host {
+    --virtual-scroll-container-width:110px;
+    --virtual-scroll-container-height:200px;
+    -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));
+  }
+
+  .nile-dropdown--input {
+    width: 100%;
+  }
+
+  .virtualized__menu{
+    min-width: var(--virtual-scroll-container-width);
+    min-height: var(--virtual-scroll-container-height) !important;
+  }
+
+  .virtualized__menu nile-menu-item{
+    width:100%;
+  }
+
+  .nile-auto-complete--input {
+    width: 100%;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-auto-complete.css.js.map

package/dist/src/nile-auto-complete/nile-auto-complete.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-auto-complete.css.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * AutoComplete CSS\n */\nexport const styles = css`\n  :host {\n    --virtual-scroll-container-width:110px;\n    --virtual-scroll-container-height:200px;\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  .nile-dropdown--input {\n    width: 100%;\n  }\n\n  .virtualized__menu{\n    min-width: var(--virtual-scroll-container-width);\n    min-height: var(--virtual-scroll-container-height) !important;\n  }\n\n  .virtualized__menu nile-menu-item{\n    width:100%;\n  }\n\n  .nile-auto-complete--input {\n    width: 100%;\n  }\n`;\n\nexport default [styles];\n"]}