@aquera/nile-elements 1.9.10 → 1.9.11

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.9.10",
+  "version": "1.9.11",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-drawer/nile-drawer.css.ts

@@ -57,6 +57,56 @@ export const styles = css`
     z-index: 700;
   }
 
+  .drawer--push {
+    position: relative;
+    z-index: initial;
+  }
+  :host([push]) {
+    display: block;
+    flex: 0 0 auto;
+    overflow: hidden;
+    transition: inline-size var(--push-duration, 250ms) var(--push-easing, ease),
+      block-size var(--push-duration, 250ms) var(--push-easing, ease);
+  }
+
+  :host([push][placement='start']),
+  :host([push][placement='end']) {
+    inline-size: 0;
+    max-inline-size: 100%;
+    align-self: stretch;
+  }
+
+  :host([push][placement='top']),
+  :host([push][placement='bottom']) {
+    block-size: 0;
+    max-block-size: 100%;
+  }
+
+  :host([push][open][placement='start']),
+  :host([push][open][placement='end']) {
+    inline-size: var(--size);
+  }
+
+  :host([push][open][placement='top']),
+  :host([push][open][placement='bottom']) {
+    block-size: var(--size);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([push]) {
+      transition: none;
+    }
+  }
+
+  .drawer--push .drawer__overlay {
+    display: none;
+  }
+
+  .drawer--push .drawer__panel {
+    max-inline-size: none;
+    max-block-size: none;
+  }
+
   .drawer__panel {
     position: absolute;
     display: flex;
@@ -177,6 +227,10 @@ export const styles = css`
     display: none;
   }
 
+  :host([nooverlay]) .drawer__overlay {
+    background-color: transparent;
+  }
+
   .drawer__close:hover {
     cursor:pointer;
   }

package/src/nile-drawer/nile-drawer.test.ts

@@ -103,4 +103,77 @@ describe('NileDrawer', () => {
   it('98. header-actions part', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer></nile-drawer>`); expect(el.shadowRoot!.querySelector('[part="header-actions"]')).to.exist; });
   it('99. dynamic closeOnEscape', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer></nile-drawer>`); el.closeOnEscape = false; await el.updateComplete; expect(el.closeOnEscape).to.be.false; });
   it('100. full integration', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer label="Settings" placement="start" class="dr" id="dr1">Content<div slot="footer">Footer</div></nile-drawer>`); expect(el.label).to.equal('Settings'); expect(el.placement).to.equal('start'); expect(el.id).to.equal('dr1'); expect(el.open).to.be.false; expect(el.shadowRoot!.querySelector('.drawer')).to.exist; expect(el.shadowRoot!.querySelector('.drawer__panel')).to.exist; });
+
+  // Push mode: the drawer is part of the layout instead of an overlay.
+  it('101. push defaults false', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer></nile-drawer>`); expect(el.push).to.equal(false); });
+  it('102. push reflects', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer push></nile-drawer>`); expect(el.push).to.be.true; expect(el.hasAttribute('push')).to.be.true; });
+  it('103. push adds drawer--push', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer push></nile-drawer>`); expect(el.shadowRoot!.querySelector('.drawer--push')).to.exist; });
+  it('104. push drops drawer--fixed', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer push></nile-drawer>`); expect(el.shadowRoot!.querySelector('.drawer--fixed')).to.be.null; });
+  it('105. push wins over contained', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer push contained></nile-drawer>`); expect(el.shadowRoot!.querySelector('.drawer--push')).to.exist; expect(el.shadowRoot!.querySelector('.drawer--contained')).to.be.null; });
+  it('106. push hides the overlay', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer push open></nile-drawer>`); await el.updateComplete; expect(getComputedStyle(el.shadowRoot!.querySelector('.drawer__overlay') as HTMLElement).display).to.equal('none'); });
+  it('107. push host is not display:contents', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer push></nile-drawer>`); await el.updateComplete; expect(getComputedStyle(el).display).to.equal('block'); });
+  it('108. overlay mode host stays display:contents', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer></nile-drawer>`); await el.updateComplete; expect(getComputedStyle(el).display).to.equal('contents'); });
+  it('109. push takes inline space when open', async () => {
+    const c = await fixture(html`<div style="display:flex;width:400px;height:200px"><nile-drawer push placement="end" style="--size:100px"></nile-drawer><div style="flex:1 1 auto"></div></div>`);
+    const el = c.querySelector('nile-drawer') as NileDrawer;
+    await el.updateComplete;
+    expect(el.getBoundingClientRect().width).to.equal(0);
+    await el.show();
+    expect(el.getBoundingClientRect().width).to.equal(100);
+    await el.hide();
+    expect(el.getBoundingClientRect().width).to.equal(0);
+  });
+  it('110. push pushes its sibling', async () => {
+    const c = await fixture(html`<div style="display:flex;width:400px;height:200px"><nile-drawer push placement="start" style="--size:100px"></nile-drawer><div id="c" style="flex:1 1 auto"></div></div>`);
+    const el = c.querySelector('nile-drawer') as NileDrawer;
+    const content = c.querySelector('#c') as HTMLElement;
+    await el.updateComplete;
+    expect(content.getBoundingClientRect().width).to.equal(400);
+    await el.show();
+    expect(content.getBoundingClientRect().width).to.equal(300);
+  });
+  it('111. push takes block space when open', async () => {
+    const c = await fixture(html`<div style="display:flex;flex-direction:column;width:400px;height:200px"><nile-drawer push placement="top" style="--size:60px"></nile-drawer><div style="flex:1 1 auto"></div></div>`);
+    const el = c.querySelector('nile-drawer') as NileDrawer;
+    await el.updateComplete;
+    expect(el.getBoundingClientRect().height).to.equal(0);
+    await el.show();
+    expect(el.getBoundingClientRect().height).to.equal(60);
+  });
+  it('112. push emits after-show and after-hide', async () => {
+    const el = await fixture<NileDrawer>(html`<nile-drawer push style="--size:100px"></nile-drawer>`);
+    const seen: string[] = [];
+    ['nile-show', 'nile-after-show', 'nile-hide', 'nile-after-hide'].forEach(t => el.addEventListener(t, e => seen.push(e.type)));
+    await el.show();
+    await el.hide();
+    expect(seen).to.deep.equal(['nile-show', 'nile-after-show', 'nile-hide', 'nile-after-hide']);
+  });
+  it('113. escape does not close a push drawer', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer push open></nile-drawer>`); await el.updateComplete; document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' })); await el.updateComplete; expect(el.open).to.be.true; });
+  it('114. push does not lock body scrolling', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer push style="--size:100px"></nile-drawer>`); await el.show(); expect(document.body.classList.contains('nile-scroll-lock')).to.be.false; });
+
+  // noOverlay: hides the backdrop tint without giving up modal behaviour.
+  it('115. noOverlay defaults false', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer></nile-drawer>`); expect(el.noOverlay).to.equal(false); });
+  it('116. noOverlay reflects as nooverlay', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer nooverlay></nile-drawer>`); expect(el.noOverlay).to.be.true; expect(el.hasAttribute('nooverlay')).to.be.true; el.noOverlay = false; await el.updateComplete; expect(el.hasAttribute('nooverlay')).to.be.false; });
+  it('116b. noOverlay property sets the attribute', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer></nile-drawer>`); el.noOverlay = true; await el.updateComplete; expect(el.hasAttribute('nooverlay')).to.be.true; expect(el.hasAttribute('no-overlay')).to.be.false; });
+  it('117. overlay is tinted by default', async () => {
+    const el = await fixture<NileDrawer>(html`<nile-drawer open></nile-drawer>`);
+    await el.updateComplete;
+    const bg = getComputedStyle(el.shadowRoot!.querySelector('.drawer__overlay') as HTMLElement).backgroundColor;
+    expect(bg).to.not.equal('rgba(0, 0, 0, 0)');
+  });
+  it('118. noOverlay makes the overlay transparent', async () => {
+    const el = await fixture<NileDrawer>(html`<nile-drawer open nooverlay></nile-drawer>`);
+    await el.updateComplete;
+    const bg = getComputedStyle(el.shadowRoot!.querySelector('.drawer__overlay') as HTMLElement).backgroundColor;
+    expect(bg).to.equal('rgba(0, 0, 0, 0)');
+  });
+  it('119. noOverlay keeps click-outside-to-close working', async () => {
+    const el = await fixture<NileDrawer>(html`<nile-drawer open nooverlay></nile-drawer>`);
+    await el.updateComplete;
+    (el.shadowRoot!.querySelector('.drawer__overlay') as HTMLElement).click();
+    await el.updateComplete;
+    expect(el.open).to.be.false;
+  });
+  it('120. noOverlay still locks body scrolling', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer nooverlay></nile-drawer>`); await el.show(); expect(document.body.classList.contains('nile-scroll-lock')).to.be.true; await el.hide(); });
+  it('121. camelCase noOverlay in markup still works', async () => { const el = await fixture<NileDrawer>(html`<nile-drawer open noOverlay></nile-drawer>`); await el.updateComplete; expect(el.noOverlay).to.be.true; expect(getComputedStyle(el.shadowRoot!.querySelector('.drawer__overlay') as HTMLElement).backgroundColor).to.equal('rgba(0, 0, 0, 0)'); });
 });

package/src/nile-drawer/nile-drawer.ts

@@ -6,7 +6,7 @@
  */
 
 import '../nile-icon-button/nile-icon-button';
-import { animateTo, stopAnimations } from '../internal/animate';
+import { animateTo, parseDuration, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query } from 'lit/decorators.js';
 import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
@@ -112,6 +112,8 @@ export class NileDrawer extends NileElement {
    */
   @property({ type: Boolean, reflect: true }) contained = false;
 
+  @property({ type: Boolean, reflect: true }) push = false;
+
   /**
    * Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property
    */
@@ -122,6 +124,12 @@ export class NileDrawer extends NileElement {
    * accessible way for users to dismiss the drawer.
    */
   @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;
+  
+  @property({type: Boolean, reflect: true }) noOverlay = false;
+
+  private get isNonModal() {
+    return this.contained || this.push;
+  }
 
   connectedCallback() {
     super.connectedCallback();
@@ -135,7 +143,7 @@ export class NileDrawer extends NileElement {
     if (this.open) {
       this.addOpenListeners();
 
-      if (!this.contained) {
+      if (!this.isNonModal) {
         this.modal.activate();
         lockBodyScrolling(this);
       }
@@ -172,12 +180,40 @@ export class NileDrawer extends NileElement {
   }
 
   private handleDocumentKeyDown(event: KeyboardEvent) {
-    if (this.open && !this.contained && event.key === 'Escape') {
+    if (this.open && !this.isNonModal && event.key === 'Escape') {
       event.stopPropagation();
       this.requestClose('keyboard');
     }
   }
 
+  private async waitForPushTransition() {
+    await this.updateComplete;
+
+    const style = getComputedStyle(this);
+    const duration =
+      parseDuration(style.transitionDuration.split(',')[0]) + parseDuration(style.transitionDelay.split(',')[0]);
+
+    if (!duration) {
+      return;
+    }
+
+    return new Promise<void>(resolve => {
+      const finish = () => {
+        this.removeEventListener('transitionend', handleTransitionEnd);
+        clearTimeout(fallback);
+        resolve();
+      };
+
+      const handleTransitionEnd = (event: Event) => {
+        if (event.target === this) {
+          finish();
+        }
+      };
+      const fallback = setTimeout(finish, duration + 50);
+      this.addEventListener('transitionend', handleTransitionEnd);
+    });
+  }
+
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     if (this.open) {
@@ -186,8 +222,8 @@ export class NileDrawer extends NileElement {
       this.addOpenListeners();
       this.originalTrigger = document.activeElement as HTMLElement;
 
-      // Lock body scrolling only if the drawer isn't contained
-      if (!this.contained) {
+      // Lock body scrolling only if the drawer isn't contained or pushing
+      if (!this.isNonModal) {
         this.modal.activate();
         lockBodyScrolling(this);
       }
@@ -224,6 +260,9 @@ export class NileDrawer extends NileElement {
         }
       });
 
+      if (this.push) {
+        await this.waitForPushTransition();
+      } else {
       const panelAnimation = getAnimation(this, `drawer.show${uppercaseFirstLetter(this.placement)}`, {
         dir: ''
       });
@@ -232,6 +271,7 @@ export class NileDrawer extends NileElement {
         animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
         animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
       ]);
+      }
 
       this.emit('nile-after-show');
     } else {
@@ -239,12 +279,17 @@ export class NileDrawer extends NileElement {
       this.emit('nile-hide');
       this.removeOpenListeners();
 
-      if (!this.contained) {
+      if (!this.isNonModal) {
         this.modal.deactivate();
         unlockBodyScrolling(this);
       }
 
       await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);
+
+      if (this.push) {
+        await this.waitForPushTransition();
+        this.drawer.hidden = true;
+      } else {
       const panelAnimation = getAnimation(this, `drawer.hide${uppercaseFirstLetter(this.placement)}`, {
         dir: ''
       });
@@ -267,6 +312,7 @@ export class NileDrawer extends NileElement {
       // Now that the dialog is hidden, restore the overlay and panel for next time
       this.overlay.hidden = false;
       this.panel.hidden = false;
+      }
 
       // Restore focus to the original trigger
       const trigger = this.originalTrigger;
@@ -278,14 +324,14 @@ export class NileDrawer extends NileElement {
     }
   }
 
-  @watch('contained', { waitUntilFirstUpdate: true })
+  @watch(['contained', 'push'], { waitUntilFirstUpdate: true })
   handleNoModalChange() {
-    if (this.open && !this.contained) {
+    if (this.open && !this.isNonModal) {
       this.modal.activate();
       lockBodyScrolling(this);
     }
 
-    if (this.open && this.contained) {
+    if (this.open && this.isNonModal) {
       this.modal.deactivate();
       unlockBodyScrolling(this);
     }
@@ -322,8 +368,9 @@ export class NileDrawer extends NileElement {
           'drawer--end': this.placement === 'end',
           'drawer--bottom': this.placement === 'bottom',
           'drawer--start': this.placement === 'start',
-          'drawer--contained': this.contained,
-          'drawer--fixed': !this.contained,
+          'drawer--contained': this.contained && !this.push,
+          'drawer--push': this.push,
+          'drawer--fixed': !this.contained && !this.push,
           'drawer--rtl': 'rtl',
           'drawer--has-footer': this.hasSlotController.test('footer'),
         })}

package/vscode-html-custom-data.json

@@ -2323,7 +2323,7 @@
     },
     {
       "name": "nile-drawer",
-      "description": "Nile drawer component.\n\nEvents:\n\n  * `nile-show` {} - Emitted when the drawer opens.\n\n  * `nile-after-show` {} - Emitted after the drawer opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the drawer closes.\n\n  * `nile-after-hide` {} - Emitted after the drawer closes and all animations are complete.\n\n  * `nile-initial-focus` {} - Emitted when the drawer opens and is ready to receive focus. Calling\n`event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n\n  * `nile-request-close` {`\"{ source: 'close-button' \" | \"keyboard\" | \" 'overlay' }\"`} - Emitted when the user attempts to\nclose the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n`event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\ndestructive behavior such as data loss.\n\nSlots:\n\n  * ` ` {} - The drawer's main content.\n\n  * `label` {} - The drawer's label. Alternatively, you can use the `label` attribute.\n\n  * `header-actions` {} - Optional actions to add to the header. Works best with `<nile-icon-button>`.\n\n  * `footer` {} - The drawer's footer, usually one or more buttons representing various options.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n\n  * `closeOnEscape` {`boolean`} - \n\n  * `label` {`string`} - The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\" | \"end\" | \"start\"`} - The direction from which the drawer will open.\n\n  * `contained` {`boolean`} - By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.\n\n  * `preventOverlayClose` {`boolean`} - Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property\n\n  * `no-header` {`boolean`} - Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.\n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `modal` - \n\n  * `originalTrigger` {`HTMLElement | null`} - \n\n  * `drawer` {`HTMLElement`} - \n\n  * `panel` {`HTMLElement`} - \n\n  * `overlay` {`HTMLElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n\n  * `closeOnEscape` {`boolean`} - \n\n  * `label` {`string`} - The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\" | \"end\" | \"start\"`} - The direction from which the drawer will open.\n\n  * `contained` {`boolean`} - By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.\n\n  * `preventOverlayClose` {`boolean`} - Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property\n\n  * `noHeader` {`boolean`} - Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile drawer component.\n\nEvents:\n\n  * `nile-show` {} - Emitted when the drawer opens.\n\n  * `nile-after-show` {} - Emitted after the drawer opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the drawer closes.\n\n  * `nile-after-hide` {} - Emitted after the drawer closes and all animations are complete.\n\n  * `nile-initial-focus` {} - Emitted when the drawer opens and is ready to receive focus. Calling\n`event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n\n  * `nile-request-close` {`\"{ source: 'close-button' \" | \"keyboard\" | \" 'overlay' }\"`} - Emitted when the user attempts to\nclose the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n`event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\ndestructive behavior such as data loss.\n\nSlots:\n\n  * ` ` {} - The drawer's main content.\n\n  * `label` {} - The drawer's label. Alternatively, you can use the `label` attribute.\n\n  * `header-actions` {} - Optional actions to add to the header. Works best with `<nile-icon-button>`.\n\n  * `footer` {} - The drawer's footer, usually one or more buttons representing various options.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n\n  * `closeOnEscape` {`boolean`} - \n\n  * `label` {`string`} - The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\" | \"end\" | \"start\"`} - The direction from which the drawer will open.\n\n  * `contained` {`boolean`} - By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.\n\n  * `push` {`boolean`} - \n\n  * `preventOverlayClose` {`boolean`} - Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property\n\n  * `no-header` {`boolean`} - Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.\n\n  * `noOverlay` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `modal` - \n\n  * `originalTrigger` {`HTMLElement | null`} - \n\n  * `drawer` {`HTMLElement`} - \n\n  * `panel` {`HTMLElement`} - \n\n  * `overlay` {`HTMLElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n\n  * `closeOnEscape` {`boolean`} - \n\n  * `label` {`string`} - The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\" | \"end\" | \"start\"`} - The direction from which the drawer will open.\n\n  * `contained` {`boolean`} - By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.\n\n  * `push` {`boolean`} - \n\n  * `preventOverlayClose` {`boolean`} - Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property\n\n  * `noHeader` {`boolean`} - Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.\n\n  * `noOverlay` {`boolean`} - \n\n  * `isNonModal` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "open",
@@ -2362,6 +2362,11 @@
           "description": "`contained` {`boolean`} - By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.\n\nProperty: contained\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "push",
+          "description": "`push` {`boolean`} - \n\nProperty: push\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "preventOverlayClose",
           "description": "`preventOverlayClose` {`boolean`} - Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property\n\nProperty: preventOverlayClose\n\nDefault: false",
@@ -2372,6 +2377,11 @@
           "description": "`no-header` {`boolean`} - Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.\n\nProperty: noHeader\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "noOverlay",
+          "description": "`noOverlay` {`boolean`} - \n\nProperty: noOverlay\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onnile-show",
           "description": "`nile-show` {} - Emitted when the drawer opens."