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

package/dist/src/nile-dialog/nile-dialog.test.js

@@ -0,0 +1,130 @@
+import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testing';
+import './nile-dialog';
+import { NileDialog } from './nile-dialog';
+import '../nile-icon-button/nile-icon-button';
+const wait = (ms = 50000) => new Promise(resolve => setTimeout(resolve, ms));
+describe('NileDialog', () => {
+    it('should render correctly', async () => {
+        const el = await fixture(html `<nile-dialog label="Test Dialog"><span>test</span></nile-dialog>`);
+        expect(el).to.be.instanceOf(NileDialog);
+        expect(el.shadowRoot).not.to.be.null;
+    });
+    it('should be closed by default', async () => {
+        const el = await fixture(html `<nile-dialog label="Test Dialog"></nile-dialog>`);
+        expect(el.open).to.be.false;
+        const dialog = el.shadowRoot?.querySelector('.dialog');
+        expect(dialog?.classList.contains('dialog--open')).to.be.false;
+    });
+    it('should open the dialog when "open" is set to true', async () => {
+        const el = await fixture(html `<nile-dialog label="Test Dialog"></nile-dialog>`);
+        el.open = true;
+        await elementUpdated(el);
+        const dialog = el.shadowRoot?.querySelector('.dialog');
+        expect(el.open).to.be.true;
+        expect(dialog?.classList.contains('dialog--open')).to.be.true;
+    });
+    it('should close the dialog when "open" is set to false', async () => {
+        const el = await fixture(html `<nile-dialog label="Test Dialog" open></nile-dialog>`);
+        el.open = false;
+        await elementUpdated(el);
+        const dialog = el.shadowRoot?.querySelector('.dialog');
+        expect(el.open).to.be.false;
+        expect(dialog?.classList.contains('dialog--open')).to.be.false;
+    });
+    it('should show dialog when calling the show() method', async () => {
+        const el = await fixture(html `<nile-dialog></nile-dialog>`);
+        await el.show();
+        expect(el.open).to.be.true;
+    });
+    it('should hide dialog when calling the hide() method', async () => {
+        const el = await fixture(html `<nile-dialog open></nile-dialog>`);
+        await el.hide();
+        expect(el.open).to.be.false;
+    });
+    it('should emit "nile-show" and "nile-after-show" events when opened', async () => {
+        const el = await fixture(html `<nile-dialog></nile-dialog>`);
+        const showEventPromise = oneEvent(el, 'nile-show');
+        const afterShowEventPromise = oneEvent(el, 'nile-after-show');
+        await el.show();
+        await showEventPromise;
+        await afterShowEventPromise;
+        expect(el.open).to.be.true;
+    });
+    it('should emit "nile-hide" and "nile-after-hide" events when closed', async () => {
+        const el = await fixture(html `<nile-dialog open></nile-dialog>`);
+        const hideEventPromise = oneEvent(el, 'nile-hide');
+        const afterHideEventPromise = oneEvent(el, 'nile-after-hide');
+        await el.hide();
+        await hideEventPromise;
+        await afterHideEventPromise;
+        expect(el.open).to.be.false;
+    });
+    it('should close the dialog when the close button is clicked', async () => {
+        const el = await fixture(html `
+      <nile-dialog label="Test Dialog" open>
+        <nile-icon-button slot="close-button" label="close"></nile-icon-button>
+      </nile-dialog>
+    `);
+        const closeButton = el?.shadowRoot?.querySelector("nile-icon.dialog__close");
+        closeButton?.click();
+        await elementUpdated(el);
+        expect(el.open).to.be.false;
+    });
+    it('should close the dialog when the overlay is clicked', async () => {
+        const el = await fixture(html `<nile-dialog open></nile-dialog>`);
+        const overlay = el.shadowRoot?.querySelector('.dialog__overlay');
+        overlay?.click();
+        await elementUpdated(el);
+        expect(el.open).to.be.false;
+    });
+    it('should not close the dialog when overlay is clicked if preventOverlayClose is set', async () => {
+        const el = await fixture(html `<nile-dialog open preventOverlayClose></nile-dialog>`);
+        const overlay = el.shadowRoot?.querySelector('.dialog__overlay');
+        overlay?.click();
+        await elementUpdated(el);
+        expect(el.open).to.be.true;
+    });
+    it('should close the dialog when Escape key is pressed', async () => {
+        const el = await fixture(html `<nile-dialog open></nile-dialog>`);
+        const event = new KeyboardEvent('keydown', { key: 'Escape' });
+        document.dispatchEvent(event);
+        await elementUpdated(el);
+        expect(el.open).to.be.false;
+    });
+    it('should not close the dialog when Escape key is pressed if preventOverlayClose is set', async () => {
+        const el = await fixture(html `<nile-dialog open preventOverlayClose></nile-dialog>`);
+        const event = new KeyboardEvent('keydown', { key: 'Escape' });
+        document.dispatchEvent(event);
+        await elementUpdated(el);
+        expect(el.open).to.be.true;
+    });
+    it('should apply noHeader class and remove the header when noHeader is true', async () => {
+        const el = await fixture(html `<nile-dialog label="Test Dialog" open noHeader></nile-dialog>`);
+        const header = el.shadowRoot?.querySelector('.dialog__header');
+        expect(header).to.be.null;
+    });
+    it('should render the label correctly', async () => {
+        const el = await fixture(html `<nile-dialog label="My Dialog" open></nile-dialog>`);
+        const label = el.shadowRoot?.querySelector('.dialog__header__text');
+        expect(label?.textContent?.trim()).to.equal('My Dialog');
+    });
+    it('should render the sublabel correctly', async () => {
+        const el = await fixture(html `
+      <nile-dialog label="My Dialog" sublabel="This is a sublabel" open></nile-dialog>
+    `);
+        const sublabel = el.shadowRoot?.querySelector('slot[name="sublabel"]');
+        expect(sublabel).to.exist;
+    });
+    it('should lock body scrolling when the dialog is opened', async () => {
+        const el = await fixture(html `<nile-dialog open></nile-dialog>`);
+        const bodyOverflow = window.getComputedStyle(document.body).overflow;
+        expect(document.body.className.includes('nile-scroll-lock')).to.be.true;
+    });
+    it('should unlock body scrolling when the dialog is closed', async () => {
+        const el = await fixture(html `<nile-dialog open></nile-dialog>`);
+        await el.hide();
+        const bodyOverflow = window.getComputedStyle(document.body).overflow;
+        expect(bodyOverflow).to.not.equal('hidden');
+    });
+});
+//# sourceMappingURL=nile-dialog.test.js.map

package/dist/src/nile-dialog/nile-dialog.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-dialog.test.js","sourceRoot":"","sources":["../../../src/nile-dialog/nile-dialog.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACnF,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,sCAAsC,CAAA;AAC7C,MAAM,IAAI,GAAC,CAAC,KAAU,KAAK,EAAC,EAAE,CAAA,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;AAE7E,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAE1B,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,kEAAkE,CAAC,CAAC;QAC7G,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;QACxC,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,iDAAiD,CAAC,CAAC;QAC5F,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5B,MAAM,MAAM,GAAG,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;QACvD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,iDAAiD,CAAC,CAAC;QAC5F,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC;QACf,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,MAAM,GAAG,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;QACvD,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAC3B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACnE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,sDAAsD,CAAC,CAAC;QACjG,EAAE,CAAC,IAAI,GAAG,KAAK,CAAC;QAChB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,MAAM,GAAG,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;QACvD,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,6BAA6B,CAAC,CAAC;QACxE,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC;QAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,kCAAkC,CAAC,CAAC;QAC7E,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC;QAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kEAAkE,EAAE,KAAK,IAAI,EAAE;QAChF,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,6BAA6B,CAAC,CAAC;QACxE,MAAM,gBAAgB,GAAG,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;QACnD,MAAM,qBAAqB,GAAG,QAAQ,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC;QAE9D,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC;QAEhB,MAAM,gBAAgB,CAAC;QACvB,MAAM,qBAAqB,CAAC;QAE5B,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kEAAkE,EAAE,KAAK,IAAI,EAAE;QAChF,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,kCAAkC,CAAC,CAAC;QAC7E,MAAM,gBAAgB,GAAG,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;QACnD,MAAM,qBAAqB,GAAG,QAAQ,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC;QAE9D,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC;QAEhB,MAAM,gBAAgB,CAAC;QACvB,MAAM,qBAAqB,CAAC;QAE5B,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;;;KAIxC,CAAC,CAAC;QACH,MAAM,WAAW,GAAC,EAAE,EAAE,UAAU,EAAE,aAAa,CAAc,yBAAyB,CAAC,CAAA;QACvF,WAAW,EAAE,KAAK,EAAE,CAAC;QAErB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACnE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,kCAAkC,CAAC,CAAC;QAC7E,MAAM,OAAO,GAAG,EAAE,CAAC,UAAU,EAAE,aAAa,CAAc,kBAAkB,CAAC,CAAC;QAC9E,OAAO,EAAE,KAAK,EAAE,CAAC;QAEjB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mFAAmF,EAAE,KAAK,IAAI,EAAE;QACjG,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,sDAAsD,CAAC,CAAC;QACjG,MAAM,OAAO,GAAG,EAAE,CAAC,UAAU,EAAE,aAAa,CAAc,kBAAkB,CAAC,CAAC;QAC9E,OAAO,EAAE,KAAK,EAAE,CAAC;QAEjB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,kCAAkC,CAAC,CAAC;QAC7E,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;QAE9D,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9B,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sFAAsF,EAAE,KAAK,IAAI,EAAE;QACpG,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,sDAAsD,CAAC,CAAC;QACjG,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;QAE9D,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9B,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yEAAyE,EAAE,KAAK,IAAI,EAAE;QACvF,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,+DAA+D,CAAC,CAAC;QAC1G,MAAM,MAAM,GAAG,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAE/D,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,oDAAoD,CAAC,CAAC;QAC/F,MAAM,KAAK,GAAG,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAEpE,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;KAExC,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACvE,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,kCAAkC,CAAC,CAAC;QAC7E,MAAM,YAAY,GAAG,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;QAErE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC1E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACtE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,kCAAkC,CAAC,CAAC;QAC7E,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC;QAEhB,MAAM,YAAY,GAAG,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;QACrE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testing';\nimport './nile-dialog';\nimport { NileDialog } from './nile-dialog';\nimport '../nile-icon-button/nile-icon-button'\nconst wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))\n\ndescribe('NileDialog', () => {\n\n  it('should render correctly', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog label=\"Test Dialog\"><span>test</span></nile-dialog>`);\n    expect(el).to.be.instanceOf(NileDialog);\n    expect(el.shadowRoot).not.to.be.null;\n  });\n\n  it('should be closed by default', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog label=\"Test Dialog\"></nile-dialog>`);\n    expect(el.open).to.be.false;\n    const dialog = el.shadowRoot?.querySelector('.dialog');\n    expect(dialog?.classList.contains('dialog--open')).to.be.false;\n  });\n\n  it('should open the dialog when \"open\" is set to true', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog label=\"Test Dialog\"></nile-dialog>`);\n    el.open = true;\n    await elementUpdated(el);\n\n    const dialog = el.shadowRoot?.querySelector('.dialog');\n    expect(el.open).to.be.true;\n    expect(dialog?.classList.contains('dialog--open')).to.be.true;\n  });\n\n  it('should close the dialog when \"open\" is set to false', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog label=\"Test Dialog\" open></nile-dialog>`);\n    el.open = false;\n    await elementUpdated(el);\n\n    const dialog = el.shadowRoot?.querySelector('.dialog');\n    expect(el.open).to.be.false;\n    expect(dialog?.classList.contains('dialog--open')).to.be.false;\n  });\n\n  it('should show dialog when calling the show() method', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog></nile-dialog>`);\n    await el.show();\n    expect(el.open).to.be.true;\n  });\n\n  it('should hide dialog when calling the hide() method', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog open></nile-dialog>`);\n    await el.hide();\n    expect(el.open).to.be.false;\n  });\n\n  it('should emit \"nile-show\" and \"nile-after-show\" events when opened', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog></nile-dialog>`);\n    const showEventPromise = oneEvent(el, 'nile-show');\n    const afterShowEventPromise = oneEvent(el, 'nile-after-show');\n\n    await el.show();\n\n    await showEventPromise;\n    await afterShowEventPromise;\n\n    expect(el.open).to.be.true;\n  });\n\n  it('should emit \"nile-hide\" and \"nile-after-hide\" events when closed', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog open></nile-dialog>`);\n    const hideEventPromise = oneEvent(el, 'nile-hide');\n    const afterHideEventPromise = oneEvent(el, 'nile-after-hide');\n\n    await el.hide();\n\n    await hideEventPromise;\n    await afterHideEventPromise;\n\n    expect(el.open).to.be.false;\n  });\n\n  it('should close the dialog when the close button is clicked', async () => {\n    const el = await fixture<NileDialog>(html`\n      <nile-dialog label=\"Test Dialog\" open>\n        <nile-icon-button slot=\"close-button\" label=\"close\"></nile-icon-button>\n      </nile-dialog>\n    `);\n    const closeButton=el?.shadowRoot?.querySelector<HTMLElement>(\"nile-icon.dialog__close\")\n    closeButton?.click();\n\n    await elementUpdated(el);\n    expect(el.open).to.be.false;\n  });\n\n  it('should close the dialog when the overlay is clicked', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog open></nile-dialog>`);\n    const overlay = el.shadowRoot?.querySelector<HTMLElement>('.dialog__overlay');\n    overlay?.click();\n\n    await elementUpdated(el);\n    expect(el.open).to.be.false;\n  });\n\n  it('should not close the dialog when overlay is clicked if preventOverlayClose is set', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog open preventOverlayClose></nile-dialog>`);\n    const overlay = el.shadowRoot?.querySelector<HTMLElement>('.dialog__overlay');\n    overlay?.click();\n\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\n  });\n\n  it('should close the dialog when Escape key is pressed', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog open></nile-dialog>`);\n    const event = new KeyboardEvent('keydown', { key: 'Escape' });\n\n    document.dispatchEvent(event);\n    await elementUpdated(el);\n\n    expect(el.open).to.be.false;\n  });\n\n  it('should not close the dialog when Escape key is pressed if preventOverlayClose is set', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog open preventOverlayClose></nile-dialog>`);\n    const event = new KeyboardEvent('keydown', { key: 'Escape' });\n\n    document.dispatchEvent(event);\n    await elementUpdated(el);\n\n    expect(el.open).to.be.true;\n  });\n\n  it('should apply noHeader class and remove the header when noHeader is true', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog label=\"Test Dialog\" open noHeader></nile-dialog>`);\n    const header = el.shadowRoot?.querySelector('.dialog__header');\n\n    expect(header).to.be.null;\n  });\n\n  it('should render the label correctly', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog label=\"My Dialog\" open></nile-dialog>`);\n    const label = el.shadowRoot?.querySelector('.dialog__header__text');\n\n    expect(label?.textContent?.trim()).to.equal('My Dialog');\n  });\n\n  it('should render the sublabel correctly', async () => {\n    const el = await fixture<NileDialog>(html`\n      <nile-dialog label=\"My Dialog\" sublabel=\"This is a sublabel\" open></nile-dialog>\n    `);\n\n    const sublabel = el.shadowRoot?.querySelector('slot[name=\"sublabel\"]');\n    expect(sublabel).to.exist;\n  });\n\n  it('should lock body scrolling when the dialog is opened', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog open></nile-dialog>`);\n    const bodyOverflow = window.getComputedStyle(document.body).overflow;\n\n    expect(document.body.className.includes('nile-scroll-lock')).to.be.true;\n  });\n\n  it('should unlock body scrolling when the dialog is closed', async () => {\n    const el = await fixture<NileDialog>(html`<nile-dialog open></nile-dialog>`);\n    await el.hide();\n\n    const bodyOverflow = window.getComputedStyle(document.body).overflow;\n    expect(bodyOverflow).to.not.equal('hidden');\n  });\n});\n"]}

package/dist/src/nile-divider/index.js

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

package/dist/src/nile-divider/index.js.map

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

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

@@ -0,0 +1,62 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit';
+/**
+ * Divider CSS
+ */
+export const styles = css `
+	:host {
+		display: block;
+		height: 100%;
+	-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+	}
+
+	.divider {
+		background-color: var(--nile-colors-neutral-400 , var(--ng-colors-border-secondary));
+		display: flex;
+    	align-items: center;
+    	justify-content: center;
+	}
+	
+	.horizontal {
+		height: var(--nile-radius-radius-xxs , var(--ng-stroke-width-1));
+		/* width: 100%; */
+		margin: 8px 0;
+	}
+
+	.vertical {
+		height: 100%;
+		width: var(--nile-radius-radius-xxs , var(--ng-stroke-width-1));
+		margin: 0 8px;
+		/* display: inline-block;
+		vertical-align: middle; */
+	}
+
+	.inset.horizontal {
+		margin-left: 72px;
+	}
+	.background-white{
+		background: var(--nile-colors-white-base , var(--ng-colors-fg-white));
+		font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+		font-size: var(--nile-type-scale-5 , var(--ng-font-size-text-lg));
+		font-weight: var(--nile-hero-text-font-weight , var(--ng-font-weight-semibold)) ;
+		max-width: var(--nile-sizes-width-xxs , var(--ng-spacing-80));
+		text-overflow: ellipsis;
+	}
+	.horizontal-content-padding{
+		padding: var(--nile-spacing-spacing-none , var(--ng-spacing-none)) var(--nile-type-scale-2 , var(--ng-spacing-md));
+		overflow: auto;
+	}
+	.vertical-content-padding{
+		padding: var(--nile-type-scale-2 , var(--ng-spacing-md)) var(--nile-spacing-spacing-none , var(--ng-spacing-none))
+	}
+
+`;
+export default [styles];
+//# sourceMappingURL=nile-divider.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-divider.css.js","sourceRoot":"","sources":["../../../src/nile-divider/nile-divider.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDxB,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 * Divider CSS\n */\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t\theight: 100%;\n\t-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\t}\n\n\t.divider {\n\t\tbackground-color: var(--nile-colors-neutral-400 , var(--ng-colors-border-secondary));\n\t\tdisplay: flex;\n    \talign-items: center;\n    \tjustify-content: center;\n\t}\n\t\n\t.horizontal {\n\t\theight: var(--nile-radius-radius-xxs , var(--ng-stroke-width-1));\n\t\t/* width: 100%; */\n\t\tmargin: 8px 0;\n\t}\n\n\t.vertical {\n\t\theight: 100%;\n\t\twidth: var(--nile-radius-radius-xxs , var(--ng-stroke-width-1));\n\t\tmargin: 0 8px;\n\t\t/* display: inline-block;\n\t\tvertical-align: middle; */\n\t}\n\n\t.inset.horizontal {\n\t\tmargin-left: 72px;\n\t}\n\t.background-white{\n\t\tbackground: var(--nile-colors-white-base , var(--ng-colors-fg-white));\n\t\tfont-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n\t\tfont-size: var(--nile-type-scale-5 , var(--ng-font-size-text-lg));\n\t\tfont-weight: var(--nile-hero-text-font-weight , var(--ng-font-weight-semibold)) ;\n\t\tmax-width: var(--nile-sizes-width-xxs , var(--ng-spacing-80));\n\t\ttext-overflow: ellipsis;\n\t}\n\t.horizontal-content-padding{\n\t\tpadding: var(--nile-spacing-spacing-none , var(--ng-spacing-none)) var(--nile-type-scale-2 , var(--ng-spacing-md));\n\t\toverflow: auto;\n\t}\n\t.vertical-content-padding{\n\t\tpadding: var(--nile-type-scale-2 , var(--ng-spacing-md)) var(--nile-spacing-spacing-none , var(--ng-spacing-none))\n\t}\n\n`;\n\nexport default [styles];"]}

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

@@ -0,0 +1,60 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-divider.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile divider component.
+ *
+ * @tag nile-divider
+ *
+ */
+let NileDivider = class NileDivider extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.inset = false;
+        this.vertical = false;
+        this.label = '';
+        /* #endregion */
+    }
+    /**
+     * The styles for nile-divider
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+		<div part="divider" class="divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}">
+			<span part="dividier-label" class="background-white ${this.vertical ? 'vertical-content-padding' : 'horizontal-content-padding'}">${this.label}</span>
+		</div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDivider.prototype, "inset", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDivider.prototype, "vertical", void 0);
+__decorate([
+    property({ reflect: true })
+], NileDivider.prototype, "label", void 0);
+NileDivider = __decorate([
+    customElement('nile-divider')
+], NileDivider);
+export { NileDivider };
+export default NileDivider;
+//# sourceMappingURL=nile-divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-divider.js","sourceRoot":"","sources":["../../../src/nile-divider/nile-divider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QASqC,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;QAC/B,UAAK,GAAG,EAAE,CAAC;QAiBxC,gBAAgB;IACjB,CAAC;IA3BA;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAKD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;uCAC0B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;yDACpD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,4BAA4B,KAAK,IAAI,CAAC,KAAK;SACxI,CAAC;IACT,CAAC;CAGD,CAAA;AApB2C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAC,IAAI,EAAE,CAAC;0CAAe;AACd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAC,IAAI,EAAE,CAAC;6CAAkB;AAC/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAY;AAX5B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA6BvB;;AAED,eAAe,WAAW,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {styles} from './nile-divider.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile divider component.\n *\n * @tag nile-divider\n *\n */\n@customElement('nile-divider')\nexport class NileDivider extends NileElement {\n\n\t/**\n\t * The styles for nile-divider\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\t@property({ type: Boolean, reflect:true }) inset = false;\n\t@property({ type: Boolean, reflect:true }) vertical = false;\n\t@property({ reflect: true }) label = '';\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t<div part=\"divider\" class=\"divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}\">\n\t\t\t<span part=\"dividier-label\" class=\"background-white ${this.vertical ? 'vertical-content-padding' : 'horizontal-content-padding'}\">${this.label}</span>\n\t\t</div>`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileDivider;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-divider': NileDivider;\n  }\n}"]}

package/dist/src/nile-drawer/index.js

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

package/dist/src/nile-drawer/index.js.map

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

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

@@ -0,0 +1,189 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Drawer CSS
+ */
+export const styles = css `
+  :host {
+    box-sizing: border-box;
+    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900, var(--ng-componentcolors-alpha-black-100));
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    --size: 25rem;
+    --header-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
+    --body-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
+    --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
+
+    display: contents;
+  }
+
+  .drawer {
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  .drawer--contained {
+    position: absolute;
+    z-index: initial;
+  }
+
+  .drawer--fixed {
+    position: fixed;
+    z-index: 700;
+  }
+
+  .drawer__panel {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    max-width: 100%;
+    max-height: 100%;
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    box-shadow: var(--nile-box-shadow-2,  0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01), 0px 8px 8px -4px var(--ng-colors-effects-shadow-xl-02), 0px 3px 3px -1.5px var(--ng-colors-effects-shadow-xl-03));
+    overflow: auto;
+    pointer-events: all;
+  }
+
+  .drawer__panel:focus {
+    outline: none;
+  }
+
+  .drawer--top .drawer__panel {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+
+  .drawer--end .drawer__panel {
+    top: 0;
+    inset-inline-end: 0;
+    bottom: auto;
+    inset-inline-start: auto;
+    width: var(--size);
+    height: 100%;
+  }
+
+  .drawer--bottom .drawer__panel {
+    top: auto;
+    inset-inline-end: auto;
+    bottom: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+
+  .drawer--start .drawer__panel {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: var(--size);
+    height: 100%;
+  }
+
+  .drawer__header {
+    display: flex;
+  }
+
+  .drawer__title {
+    flex: 1 1 auto;
+    font-family: var(--nile-font-family-body, var(--ng-font-family-body));
+    font-size: var(--nile-font-size-rem-small, var(--ng-font-size-text-lg));
+    font-weight: inherit;
+    line-height: 1.4;
+    padding: var(--header-spacing);
+    margin: 0;
+  }
+
+  .drawer__header-actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: 0.5rem;
+    padding: 0 var(--header-spacing);
+  }
+
+  .drawer__header-actions nile-icon-button,
+  .drawer__header-actions ::slotted(nile-icon-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+  }
+
+  .drawer__body {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--body-spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .drawer__footer {
+    text-align: right;
+    padding: var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl)) var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl));
+  }
+
+  .drawer__footer ::slotted(nile-button:not(:last-of-type)) {
+    margin-inline-end: 0.5rem;
+  }
+
+  .drawer:not(.drawer--has-footer) .drawer__footer {
+    display: none;
+  }
+
+  .drawer__overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: hsl(240 3.8% 46.1% / 33%);
+    pointer-events: all;
+  }
+
+  .drawer--contained .drawer__overlay {
+    display: none;
+  }
+
+  .drawer__close:hover {
+    cursor:pointer;
+  }
+
+  @media (forced-colors: active) {
+    .drawer__panel {
+      border: solid 1px var(--nile-colors-white-base, var(--ng-colors-border-tertiary));
+    }
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-drawer.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-drawer.css.js","sourceRoot":"","sources":["../../../src/nile-drawer/nile-drawer.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLxB,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 * Drawer CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900, var(--ng-componentcolors-alpha-black-100));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --size: 25rem;\n    --header-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));\n    --body-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));\n    --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));\n\n    display: contents;\n  }\n\n  .drawer {\n    top: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    overflow: hidden;\n  }\n\n  .drawer--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  .drawer--fixed {\n    position: fixed;\n    z-index: 700;\n  }\n\n  .drawer__panel {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    max-width: 100%;\n    max-height: 100%;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    box-shadow: var(--nile-box-shadow-2,  0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01), 0px 8px 8px -4px var(--ng-colors-effects-shadow-xl-02), 0px 3px 3px -1.5px var(--ng-colors-effects-shadow-xl-03));\n    overflow: auto;\n    pointer-events: all;\n  }\n\n  .drawer__panel:focus {\n    outline: none;\n  }\n\n  .drawer--top .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--end .drawer__panel {\n    top: 0;\n    inset-inline-end: 0;\n    bottom: auto;\n    inset-inline-start: auto;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer--bottom .drawer__panel {\n    top: auto;\n    inset-inline-end: auto;\n    bottom: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--start .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer__header {\n    display: flex;\n  }\n\n  .drawer__title {\n    flex: 1 1 auto;\n    font-family: var(--nile-font-family-body, var(--ng-font-family-body));\n    font-size: var(--nile-font-size-rem-small, var(--ng-font-size-text-lg));\n    font-weight: inherit;\n    line-height: 1.4;\n    padding: var(--header-spacing);\n    margin: 0;\n  }\n\n  .drawer__header-actions {\n    flex-shrink: 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: end;\n    gap: 0.5rem;\n    padding: 0 var(--header-spacing);\n  }\n\n  .drawer__header-actions nile-icon-button,\n  .drawer__header-actions ::slotted(nile-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n  }\n\n  .drawer__body {\n    flex: 1 1 auto;\n    display: block;\n    padding: var(--body-spacing);\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .drawer__footer {\n    text-align: right;\n    padding: var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl)) var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl));\n  }\n\n  .drawer__footer ::slotted(nile-button:not(:last-of-type)) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .drawer:not(.drawer--has-footer) .drawer__footer {\n    display: none;\n  }\n\n  .drawer__overlay {\n    display: block;\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: hsl(240 3.8% 46.1% / 33%);\n    pointer-events: all;\n  }\n\n  .drawer--contained .drawer__overlay {\n    display: none;\n  }\n\n  .drawer__close:hover {\n    cursor:pointer;\n  }\n\n  @media (forced-colors: active) {\n    .drawer__panel {\n      border: solid 1px var(--nile-colors-white-base, var(--ng-colors-border-tertiary));\n    }\n  }\n`;\n\nexport default [styles];\n"]}