@aquera/nile-elements 0.1.7 → 0.1.9

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

@@ -1 +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';\nconst wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))\n\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<any>('.details__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    \n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n    header.click();\n    \n    await elementUpdated(el);\n    \n    expect(el.open).to.be.true;\n    const body = el.shadowRoot?.querySelector<any>('.details__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    \n    const showSpy = Sinon.spy(el, 'emit');\n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n\t\tsetTimeout(() => header.click());\n\n    // Wait for the \"nile-show\" and \"nile-after-show\" events to be emitted\n    await oneEvent(el, 'nile-after-show');\n\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    \n    const hideSpy = Sinon.spy(el, 'emit');\n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n\t\tsetTimeout(() => header.click());\n\n    // Wait for the \"nile-hide\" and \"nile-after-hide\" events to be emitted\n    await oneEvent(el, 'nile-after-hide');\n\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    \n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n    header.click();\n\n    await elementUpdated(el);\n    \n    expect(el.open).to.be.false;\n    const body = el.shadowRoot?.querySelector<any>('.details__body');\n    expect(body?.hidden).to.be.true;\n  });\n\n  it('should open when pressing \"Enter\"', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    \n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n\n    // Simulate pressing the \"Enter\" key\n    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });\n    header.dispatchEvent(enterEvent);\n\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\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    \n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n\n    // Simulate pressing the \"Enter\" key\n    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });\n    header.dispatchEvent(enterEvent);\n\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\n\n    // Simulate pressing the \"Space\" key\n    const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });\n    header.dispatchEvent(spaceEvent);\n\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    \n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n\n    // Simulate pressing the \"ArrowDown\" key to open\n    const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' });\n    header.dispatchEvent(arrowDownEvent);\n\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\n\n    // Simulate pressing the \"ArrowUp\" key to close\n    const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp' });\n    header.dispatchEvent(arrowUpEvent);\n\n    await elementUpdated(el);\n    expect(el.open).to.be.false;\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    \n    const animateSpy = Sinon.spy(el, 'handleOpenChange');\n\n    // Simulate opening\n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n    header.click();\n    \n    await elementUpdated(el);\n    expect(animateSpy.called).to.be.true;\n\n    // Simulate closing\n    header.click();\n    await elementUpdated(el);\n    expect(animateSpy.calledTwice).to.be.true;\n  });\n});"]}
+{"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

@@ -28,77 +28,108 @@ export const styles = css `
     display: block;
   }
 
-  .details {
-    border: solid 1px hsl(240 5.9% 90%);
-    border-radius: 0.25rem;
+  .accordian {
+    border-top:solid 1px var(--nile-colors-neutral-500);
     background-color: #FFFFFF;
     overflow-anchor: none;
   }
 
-  .details--disabled {
+  .accordian--lg{
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 16px 12px;
+    --accordian-content-padding: 6px 12px 18px;
+  }
+
+  .accordian--md{
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 12px 12px;
+    --accordian-content-padding: 6px 12px 18px;
+  }
+
+  .accordian--sm{
+    --accordian-text-size:var(--sm-tesx, 12px);
+    --accordian-heading-padding: 6px 12px;
+    --accordian-content-padding: 6px 12px 12px;
+  }
+  
+  .accordian {
+    font-size: var(--accordian-text-size);
+  }
+
+  .accordian--disabled {
     opacity: 0.5;
   }
 
-  .details__header {
+  .accordian__header {
     display: flex;
+    gap:12px;
     align-items: center;
     border-radius: inherit;
-    padding: 1rem;
+    font-weight:500;
+    padding: var(--accordian-heading-padding);
     user-select: none;
     cursor: pointer;
   }
 
-  .details__header:focus {
+  .accordian__header--dark{
+    background-color:var(--nile-colors-dark-200);
+  }
+
+  .accordian__header--arrow-left{
+    flex-direction: row-reverse;
+  }
+
+  .accordian__header:focus {
     outline: none;
   }
 
-  .details__header:focus-visible {
+  .accordian__header:focus-visible {
     outline: solid 3px hsl(200.4, 98%, 39.4%);
     outline-offset: calc(1px + 1px);
   }
 
-  .details--disabled .details__header {
+  .accordian--disabled .accordian__header {
     cursor: not-allowed;
   }
 
-  .details--disabled .details__header:focus-visible {
+  .accordian--disabled .accordian__header:focus-visible {
     outline: none;
     box-shadow: none;
   }
 
-  .details__summary {
+  .accordian__summary {
     flex: 1 1 auto;
     display: flex;
     align-items: center;
   }
 
-  .details__summary-icon {
+  .accordian__summary-icon {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     transition: 250ms rotate ease;
   }
 
-  .details--open .details__summary-icon {
+  .accordian--open .accordian__summary-icon {
     rotate: 90deg;
   }
 
-  .details--open.details--rtl .details__summary-icon {
-    rotate: -90deg;
-  }
-
-  .details--open slot[name='expand-icon'],
-  .details:not(.details--open) slot[name='collapse-icon'] {
+  .accordian--open slot[name='expand-icon'],
+  .accordian:not(.accordian--open) slot[name='collapse-icon'] {
     display: none;
   }
 
-  .details__body {
+  .accordian__body {
     overflow: hidden;
   }
 
-  .details__content {
+  .accordian__content {
     display: block;
-    padding: 1rem;
+    padding: var(--accordian-content-padding);
+  }
+
+  .accordian__content--arrow-left{
+   margin-left:28px;
   }
 `;
 export default [styles];

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,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  }\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  .details {\n    border: solid 1px hsl(240 5.9% 90%);\n    border-radius: 0.25rem;\n    background-color: #FFFFFF;\n    overflow-anchor: none;\n  }\n\n  .details--disabled {\n    opacity: 0.5;\n  }\n\n  .details__header {\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n    padding: 1rem;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .details__header:focus {\n    outline: none;\n  }\n\n  .details__header:focus-visible {\n    outline: solid 3px hsl(200.4, 98%, 39.4%);\n    outline-offset: calc(1px + 1px);\n  }\n\n  .details--disabled .details__header {\n    cursor: not-allowed;\n  }\n\n  .details--disabled .details__header:focus-visible {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .details__summary {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .details__summary-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n  }\n\n  .details--open .details__summary-icon {\n    rotate: 90deg;\n  }\n\n  .details--open.details--rtl .details__summary-icon {\n    rotate: -90deg;\n  }\n\n  .details--open slot[name='expand-icon'],\n  .details:not(.details--open) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .details__body {\n    overflow: hidden;\n  }\n\n  .details__content {\n    display: block;\n    padding: 1rem;\n  }\n`;\n\nexport default [styles];\n"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HxB,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  }\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);\n    background-color: #FFFFFF;\n    overflow-anchor: none;\n  }\n\n  .accordian--lg{\n    --accordian-text-size:var(--sm-tesx, 14px);\n    --accordian-heading-padding: 16px 12px;\n    --accordian-content-padding: 6px 12px 18px;\n  }\n\n  .accordian--md{\n    --accordian-text-size:var(--sm-tesx, 14px);\n    --accordian-heading-padding: 12px 12px;\n    --accordian-content-padding: 6px 12px 18px;\n  }\n\n  .accordian--sm{\n    --accordian-text-size:var(--sm-tesx, 12px);\n    --accordian-heading-padding: 6px 12px;\n    --accordian-content-padding: 6px 12px 12px;\n  }\n  \n  .accordian {\n    font-size: var(--accordian-text-size);\n  }\n\n  .accordian--disabled {\n    opacity: 0.5;\n  }\n\n  .accordian__header {\n    display: flex;\n    gap:12px;\n    align-items: center;\n    border-radius: inherit;\n    font-weight:500;\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);\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 hsl(200.4, 98%, 39.4%);\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:28px;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-accordion/nile-accordion.d.ts

@@ -15,50 +15,65 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class NileAccordion extends NileElement {
     /**
-     * @summary Details show a brief summary and expand to show additional content.
+     * @summary Accordian show a brief summary and expand to show additional content.
      *
      * @dependency nile-icon
      *
-     * @slot - The details' main content.
-     * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+     * @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 details opens.
-     * @event nile-after-show - Emitted after the details opens and all animations are complete.
-     * @event nile-hide - Emitted when the details closes.
-     * @event nile-after-hide - Emitted after the details closes and all animations are complete.
+     * @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 details content.
+     * @csspart content - The accordian content.
      *
-     * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
-     * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+     * @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.
      */
     static styles: CSSResultGroup;
-    details: HTMLElement;
+    accordian: HTMLElement;
     header: HTMLElement;
     body: HTMLElement;
     expandIconSlot: HTMLSlotElement;
     /**
-     * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
-     * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
+     * 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.
      */
     open: boolean;
+    /**
+     * Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.
+     * Defaults to `'light'`.
+     */
+    variant: 'dark' | 'light';
+    /**
+     * Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.
+     * Defaults to `'right'`.
+     */
+    expandIconPlacement: 'left' | 'right';
+    /**
+     * Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.
+     * Defaults to `'md'`.
+     */
+    size: 'sm' | 'md' | 'lg';
     /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
     summary: string;
-    /** Disables the details so it can't be toggled. */
+    /** Disables the accordian so it can't be toggled. */
     disabled: boolean;
     firstUpdated(): void;
     private handleSummaryClick;
     private handleSummaryKeyDown;
     handleOpenChange(): Promise<void>;
-    /** Shows the details. */
+    /** Shows the accordian. */
     show(): Promise<void>;
-    /** Hides the details */
+    /** Hides the accordian */
     hide(): Promise<void>;
     render(): TemplateResult<1>;
 }

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

@@ -23,36 +23,51 @@ import { watch } from '../internal/watch';
 let NileAccordion = class NileAccordion extends NileElement {
     constructor() {
         /**
-         * @summary Details show a brief summary and expand to show additional content.
+         * @summary Accordian show a brief summary and expand to show additional content.
          *
          * @dependency nile-icon
          *
-         * @slot - The details' main content.
-         * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+         * @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 details opens.
-         * @event nile-after-show - Emitted after the details opens and all animations are complete.
-         * @event nile-hide - Emitted when the details closes.
-         * @event nile-after-hide - Emitted after the details closes and all animations are complete.
+         * @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 details content.
+         * @csspart content - The accordian content.
          *
-         * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
-         * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+         * @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 details is open. You can toggle this attribute to show and hide the details, or you
-         * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
+         * 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;
-        /** Disables the details so it can't be toggled. */
+        /**
+         * 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() {
@@ -99,7 +114,7 @@ let NileAccordion = class NileAccordion extends NileElement {
             }
             await stopAnimations(this.body);
             this.body.hidden = false;
-            const { keyframes, options } = getAnimation(this, 'details.show', { dir: 'ltr' });
+            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');
@@ -112,14 +127,14 @@ let NileAccordion = class NileAccordion extends NileElement {
                 return;
             }
             await stopAnimations(this.body);
-            const { keyframes, options } = getAnimation(this, 'details.hide', { dir: 'ltr' });
+            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 details. */
+    /** Shows the accordian. */
     async show() {
         if (this.open || this.disabled) {
             return undefined;
@@ -127,7 +142,7 @@ let NileAccordion = class NileAccordion extends NileElement {
         this.open = true;
         return waitForEvent(this, 'nile-after-show');
     }
-    /** Hides the details */
+    /** Hides the accordian */
     async hide() {
         if (!this.open || this.disabled) {
             return undefined;
@@ -136,21 +151,27 @@ let NileAccordion = class NileAccordion extends NileElement {
         return waitForEvent(this, 'nile-after-hide');
     }
     render() {
-        const isRtl = false;
+        const isRtl = true;
         return html `
     <div
       part="base"
       class=${classMap({
-            details: true,
-            'details--open': this.open,
-            'details--disabled': this.disabled,
-            'details--rtl': isRtl
+            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="details__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"
@@ -159,9 +180,9 @@ let NileAccordion = class NileAccordion extends NileElement {
         @click=${this.handleSummaryClick}
         @keydown=${this.handleSummaryKeyDown}
       >
-        <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+        <slot name="summary" part="summary" class="accordian__summary">${this.summary}</slot>
 
-        <span part="summary-icon" class="details__summary-icon">
+        <span part="summary-icon" class="accordian__summary-icon">
           <slot name="expand-icon">
             <nile-icon name="arrowright"></nile-icon>
           </slot>
@@ -171,8 +192,12 @@ let NileAccordion = class NileAccordion extends NileElement {
         </span>
       </div>
 
-      <div class="details__body" role="region" aria-labelledby="header">
-        <slot part="content" id="content" class="details__content"></slot>
+      <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>
   `;
@@ -180,20 +205,29 @@ let NileAccordion = class NileAccordion extends NileElement {
 };
 NileAccordion.styles = styles;
 __decorate([
-    query('.details')
-], NileAccordion.prototype, "details", void 0);
+    query('.accordian')
+], NileAccordion.prototype, "accordian", void 0);
 __decorate([
-    query('.details__header')
+    query('.accordian__header')
 ], NileAccordion.prototype, "header", void 0);
 __decorate([
-    query('.details__body')
+    query('.accordian__body')
 ], NileAccordion.prototype, "body", void 0);
 __decorate([
-    query('.details__expand-icon-slot')
+    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);
@@ -207,14 +241,14 @@ NileAccordion = __decorate([
     customElement('nile-accordion')
 ], NileAccordion);
 export { NileAccordion };
-setDefaultAnimation('details.show', {
+setDefaultAnimation('accordian.show', {
     keyframes: [
         { height: '0', opacity: '0' },
         { height: 'auto', opacity: '1' }
     ],
     options: { duration: 250, easing: 'linear' }
 });
-setDefaultAnimation('details.hide', {
+setDefaultAnimation('accordian.hide', {
     keyframes: [
         { height: 'auto', opacity: '1' },
         { height: '0', opacity: '0' }

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

@@ -1 +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 Details show a brief summary and expand to show additional content.\n *\n * @dependency nile-icon\n *\n * @slot - The details' main content.\n * @slot summary - The details' 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 details opens.\n * @event nile-after-show - Emitted after the details opens and all animations are complete.\n * @event nile-hide - Emitted when the details closes.\n * @event nile-after-hide - Emitted after the details 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 details content.\n *\n * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.\n * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.\n */\n\nstatic styles: CSSResultGroup = styles;\n\n\n@query('.details') details: HTMLElement;\n@query('.details__header') header: HTMLElement;\n@query('.details__body') body: HTMLElement;\n@query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement;\n\n/**\n * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\n * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.\n */\n@property({ type: Boolean, reflect: true }) open = false;\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 details 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, 'details.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, 'details.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 details. */\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 details */\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 = false;\n\n  return html`\n    <div\n      part=\"base\"\n      class=${classMap({\n        details: true,\n        'details--open': this.open,\n        'details--disabled': this.disabled,\n        'details--rtl': isRtl\n      })}\n    >\n      <div\n        part=\"header\"\n        id=\"header\"\n        class=\"details__header\"\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=\"details__summary\">${this.summary}</slot>\n\n        <span part=\"summary-icon\" class=\"details__summary-icon\">\n          <slot name=\"expand-icon\">\n            <nile-icon name=\"arrowright\"></nile-icon>\n          </slot>\n          <slot name=\"collapse-icon\">\n            <nile-icon name=\"arrowright\"></nile-icon>\n          </slot>\n        </span>\n      </div>\n\n      <div class=\"details__body\" role=\"region\" aria-labelledby=\"header\">\n        <slot part=\"content\" id=\"content\" class=\"details__content\"></slot>\n      </div>\n    </div>\n  `;\n}\n}\n\nsetDefaultAnimation('details.show', {\nkeyframes: [\n  { height: '0', opacity: '0' },\n  { height: 'auto', opacity: '1' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nsetDefaultAnimation('details.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"]}
+{"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=\"arrowright\"></nile-icon>\n          </slot>\n          <slot name=\"collapse-icon\">\n            <nile-icon name=\"arrowright\"></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-avatar/nile-avatar.css.js

@@ -18,6 +18,7 @@ export const styles = css `
     font-style: normal;
     font-weight: 600;
     color: var(--nile-colors-white-base);
+    border-radius: 4px;
     text-transform: uppercase;
     display: flex;
     flex-direction: column;
@@ -29,6 +30,7 @@ export const styles = css `
   .avatar {
     box-sizing: border-box;
     border: 0.5px solid var(--nile-colors-neutral-500);
+    border-radius: 4px;
     background-position: 50% 50%;
     background-size: cover;
     background-repeat: no-repeat;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFxB,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 * Avatar CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif);\n    font-style: normal;\n    font-weight: 600;\n    color: var(--nile-colors-white-base);\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  .avatar {\n    box-sizing: border-box;\n    border: 0.5px solid var(--nile-colors-neutral-500);\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__small {\n    width: var(--nile-type-scale-4);\n    height: var(--nile-type-scale-4);\n    font-size: 6.516px;\n    line-height: 6.516px;\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x);\n    height: var(--nile-spacing-3-x);\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  .avatar__large {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .avatar__extralarge {\n    height: 40px;\n    width: 40px;\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  .avatar__2xl {\n    height: 64px;\n    width: 64px;\n    font-size: 24px;\n    line-height: 32px;\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange);\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink);\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue);\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue);\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFxB,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 * Avatar CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif);\n    font-style: normal;\n    font-weight: 600;\n    color: var(--nile-colors-white-base);\n    border-radius: 4px;\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  .avatar {\n    box-sizing: border-box;\n    border: 0.5px solid var(--nile-colors-neutral-500);\n    border-radius: 4px;\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__small {\n    width: var(--nile-type-scale-4);\n    height: var(--nile-type-scale-4);\n    font-size: 6.516px;\n    line-height: 6.516px;\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x);\n    height: var(--nile-spacing-3-x);\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  .avatar__large {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .avatar__extralarge {\n    height: 40px;\n    width: 40px;\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  .avatar__2xl {\n    height: 64px;\n    width: 64px;\n    font-size: 24px;\n    line-height: 32px;\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange);\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink);\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue);\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue);\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-avatar/nile-avatar.d.ts

@@ -20,8 +20,12 @@ export declare class NileAvatar extends NileElement {
     static get styles(): CSSResultArray;
     /** Gives the url to the Avatar */
     src: string;
+    /** Gives the icon to the Avatar */
+    variant: 'icon' | 'image' | 'text';
+    /** Gives the icon to the Avatar */
+    icon: string;
     /** Gives the default Image Letters to the Avatar */
-    name: string;
+    name: String;
     /** Gives the default bg color  to the Avatar */
     bgColor: string;
     /** Gives the default text color  to the Avatar */
@@ -29,20 +33,17 @@ export declare class NileAvatar extends NileElement {
     /** Gives the default border color  to the Avatar */
     borderColor: string;
     /** Size of the Avatar */
-    size: 'small' | 'medium' | 'large' | 'extralarge' | '2xl';
+    size: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     /** Gives a border radius of 50% to the Avatar */
     isRounded: boolean;
-    /**
-     * Render method
-     * @slot This is a slot test
-     */
-    private isDefaultAvatar;
-    private defaultAvatarContent;
+    private imageError;
     private generateInitials;
     private generateVariantCode;
     private getDefaultIconSize;
-    private handleImageError;
     render(): TemplateResult;
+    getContentWrapped(content: TemplateResult, defaultInitials: string): TemplateResult<1>;
+    getIconContent(): TemplateResult<1>;
+    getImageContent(): TemplateResult<1>;
 }
 export default NileAvatar;
 declare global {