@aquera/nile-elements 0.1.8 → 0.1.10

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

@@ -2,7 +2,6 @@ import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testin
 import './nile-accordion';
 import { NileAccordion } from './nile-accordion';
 import Sinon from 'sinon';
-const wait = (ms = 50000) => new Promise(resolve => setTimeout(resolve, ms));
 describe('NileAccordion', () => {
     it('should render correctly', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
@@ -13,24 +12,23 @@ describe('NileAccordion', () => {
     it('should initialize closed by default', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
         expect(el.open).to.be.false;
-        const body = el.shadowRoot?.querySelector('.details__body');
+        const body = el.shadowRoot?.querySelector('.accordian__body');
         expect(body?.hidden).to.be.true;
     });
     it('should open when clicked', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
-        const header = el.shadowRoot?.querySelector('.details__header');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         header.click();
         await elementUpdated(el);
         expect(el.open).to.be.true;
-        const body = el.shadowRoot?.querySelector('.details__body');
+        const body = el.shadowRoot?.querySelector('.accordian__body');
         expect(body?.hidden).to.be.false;
     });
     it('should emit "nile-show" and "nile-after-show" when opened', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
         const showSpy = Sinon.spy(el, 'emit');
-        const header = el.shadowRoot?.querySelector('.details__header');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         setTimeout(() => header.click());
-        // Wait for the "nile-show" and "nile-after-show" events to be emitted
         await oneEvent(el, 'nile-after-show');
         expect(showSpy.calledWith('nile-show')).to.be.true;
         expect(showSpy.calledWith('nile-after-show')).to.be.true;
@@ -38,40 +36,26 @@ describe('NileAccordion', () => {
     it('should emit "nile-hide" and "nile-after-hide" when closed', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary" open></nile-accordion>`);
         const hideSpy = Sinon.spy(el, 'emit');
-        const header = el.shadowRoot?.querySelector('.details__header');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         setTimeout(() => header.click());
-        // Wait for the "nile-hide" and "nile-after-hide" events to be emitted
         await oneEvent(el, 'nile-after-hide');
         expect(hideSpy.calledWith('nile-hide')).to.be.true;
         expect(hideSpy.calledWith('nile-after-hide')).to.be.true;
     });
     it('should be disabled when the "disabled" property is set', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary" disabled></nile-accordion>`);
-        const header = el.shadowRoot?.querySelector('.details__header');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         header.click();
         await elementUpdated(el);
         expect(el.open).to.be.false;
-        const body = el.shadowRoot?.querySelector('.details__body');
-        expect(body?.hidden).to.be.true;
-    });
-    it('should open when pressing "Enter"', async () => {
-        const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
-        const header = el.shadowRoot?.querySelector('.details__header');
-        // Simulate pressing the "Enter" key
-        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
-        header.dispatchEvent(enterEvent);
-        await elementUpdated(el);
-        expect(el.open).to.be.true;
     });
     it('should handle keyboard interaction (Enter and Space)', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
-        const header = el.shadowRoot?.querySelector('.details__header');
-        // Simulate pressing the "Enter" key
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
         header.dispatchEvent(enterEvent);
         await elementUpdated(el);
         expect(el.open).to.be.true;
-        // Simulate pressing the "Space" key
         const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });
         header.dispatchEvent(spaceEvent);
         await elementUpdated(el);
@@ -79,27 +63,38 @@ describe('NileAccordion', () => {
     });
     it('should handle ArrowUp/ArrowLeft to close and ArrowDown/ArrowRight to open', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
-        const header = el.shadowRoot?.querySelector('.details__header');
-        // Simulate pressing the "ArrowDown" key to open
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' });
         header.dispatchEvent(arrowDownEvent);
         await elementUpdated(el);
         expect(el.open).to.be.true;
-        // Simulate pressing the "ArrowUp" key to close
         const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp' });
         header.dispatchEvent(arrowUpEvent);
         await elementUpdated(el);
         expect(el.open).to.be.false;
     });
+    it('should apply the "variant" class based on the variant property', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary" variant="dark"></nile-accordion>`);
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        expect(header).to.have.class('accordian__header--dark');
+    });
+    it('should apply the correct size class based on the size property', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary" size="lg"></nile-accordion>`);
+        const container = el.shadowRoot?.querySelector('.accordian');
+        expect(container).to.have.class('accordian--lg');
+    });
+    it('should apply the correct expand icon placement class based on the expandIconPlacement property', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary" expandIconPlacement="left"></nile-accordion>`);
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        expect(header).to.have.class('accordian__header--arrow-left');
+    });
     it('should animate when opening and closing', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
         const animateSpy = Sinon.spy(el, 'handleOpenChange');
-        // Simulate opening
-        const header = el.shadowRoot?.querySelector('.details__header');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         header.click();
         await elementUpdated(el);
         expect(animateSpy.called).to.be.true;
-        // Simulate closing
         header.click();
         await elementUpdated(el);
         expect(animateSpy.calledTwice).to.be.true;

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' }