@aquera/nile-elements 0.0.6-9 → 0.0.7-1

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

@@ -0,0 +1,145 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit-element';
+/**
+ * Modal CSS
+ */
+export const styles = css `
+  :host {
+    --width: 31rem;
+    --header-spacing: 1.25rem;
+    --body-spacing: 1.25rem;
+    --footer-spacing: 1.25rem;
+
+    display: contents;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  .dialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 800;
+  }
+
+  .dialog__panel {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    width: var(--width);
+    max-width: calc(100% - 2.25rem);
+    max-height: calc(100% - 2.25rem);
+    background-color: hsl(0, 0%, 100%);
+    border-radius: 4px;
+    box-shadow: 0 4px 16px rgb(0 0 0 / 24%);
+  }
+
+  .dialog__panel:focus {
+    outline: none;
+  }
+
+  @media screen and (max-width: 420px) {
+    .dialog__panel {
+      max-height: 80vh;
+    }
+  }
+
+  .dialog--open .dialog__panel {
+    display: flex;
+    opacity: 1;
+  }
+
+  .dialog__header {
+    flex: 0 0 auto;
+    display: flex;
+    padding: 24px  24px 24px 24px;
+    background-color: #FAFAFA;
+    border-radius: 4px 4px 0 0;
+    border: 1px solid #E5E9EB;
+  }
+
+  .dialog__title {
+    flex: 1 1 auto;
+    font: inherit;
+    font-size: 1.25rem;
+    line-height: 1.4;
+    margin: 0;
+  }
+
+  .dialog__header-actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: 24px;
+  }
+
+  .dialog__header-actions nile-icon-button,
+  .dialog__header-actions ::slotted(nile-icon-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+  }
+
+  .dialog__body {
+    flex: 1 1 auto;
+    display: block;
+    padding: 1.25rem;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    border: 1px solid #E5E9EB;
+  }
+
+  .dialog__footer {
+    flex: 0 0 auto;
+    text-align: right;
+    padding: 12px 24px;
+    background-color: #FAFAFA;
+    border-radius: 0 0 4px 4px;
+    border: 1px solid #E5E9EB;
+  }
+
+  .dialog__footer ::slotted(nile-button:not(:first-of-type)) {
+    margin-inline-start: 0.5rem;
+  }
+
+  .dialog:not(.dialog--has-footer) .dialog__footer {
+    display: none;
+  }
+
+  .dialog__overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: hsl(0 0% 0% / 43%);
+  }
+
+  @media (forced-colors: active) {
+    .dialog__panel {
+      border: solid 1px hsl(240, 5.9%, 11%);
+    }
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-dialog.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-dialog.css.js","sourceRoot":"","sources":["../../../src/nile-dialog/nile-dialog.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Modal CSS\n */\nexport const styles = css`\n  :host {\n    --width: 31rem;\n    --header-spacing: 1.25rem;\n    --body-spacing: 1.25rem;\n    --footer-spacing: 1.25rem;\n\n    display: contents;\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  .dialog {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 800;\n  }\n\n  .dialog__panel {\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    width: var(--width);\n    max-width: calc(100% - 2.25rem);\n    max-height: calc(100% - 2.25rem);\n    background-color: hsl(0, 0%, 100%);\n    border-radius: 4px;\n    box-shadow: 0 4px 16px rgb(0 0 0 / 24%);\n  }\n\n  .dialog__panel:focus {\n    outline: none;\n  }\n\n  @media screen and (max-width: 420px) {\n    .dialog__panel {\n      max-height: 80vh;\n    }\n  }\n\n  .dialog--open .dialog__panel {\n    display: flex;\n    opacity: 1;\n  }\n\n  .dialog__header {\n    flex: 0 0 auto;\n    display: flex;\n    padding: 24px  24px 24px 24px;\n    background-color: #FAFAFA;\n    border-radius: 4px 4px 0 0;\n    border: 1px solid #E5E9EB;\n  }\n\n  .dialog__title {\n    flex: 1 1 auto;\n    font: inherit;\n    font-size: 1.25rem;\n    line-height: 1.4;\n    margin: 0;\n  }\n\n  .dialog__header-actions {\n    flex-shrink: 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: end;\n    gap: 24px;\n  }\n\n  .dialog__header-actions nile-icon-button,\n  .dialog__header-actions ::slotted(nile-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 1rem;\n  }\n\n  .dialog__body {\n    flex: 1 1 auto;\n    display: block;\n    padding: 1.25rem;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    border: 1px solid #E5E9EB;\n  }\n\n  .dialog__footer {\n    flex: 0 0 auto;\n    text-align: right;\n    padding: 12px 24px;\n    background-color: #FAFAFA;\n    border-radius: 0 0 4px 4px;\n    border: 1px solid #E5E9EB;\n  }\n\n  .dialog__footer ::slotted(nile-button:not(:first-of-type)) {\n    margin-inline-start: 0.5rem;\n  }\n\n  .dialog:not(.dialog--has-footer) .dialog__footer {\n    display: none;\n  }\n\n  .dialog__overlay {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: hsl(0 0% 0% / 43%);\n  }\n\n  @media (forced-colors: active) {\n    .dialog__panel {\n      border: solid 1px hsl(240, 5.9%, 11%);\n    }\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -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 { TemplateResult } from 'lit-element';
+import '../nile-icon-button/nile-icon-button';
+import type { CSSResultGroup } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-modal
+ *
+ */
+export declare class NileDialog extends NileElement {
+    static styles: CSSResultGroup;
+    private readonly hasSlotController;
+    private modal;
+    private originalTrigger;
+    dialog: HTMLElement;
+    panel: HTMLElement;
+    overlay: HTMLElement;
+    /**
+     * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+     * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
+     */
+    open: boolean;
+    /**
+     * The dialog's label as displayed in the header. You should always include a relevant label even when using
+     * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
+     */
+    label: string;
+    /**
+     * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
+     * accessible way for users to dismiss the dialog.
+     */
+    noHeader: boolean;
+    preventOverlayClose: boolean;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private requestClose;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleDocumentKeyDown;
+    handleOpenChange(): Promise<void>;
+    /** Shows the dialog. */
+    show(): Promise<void>;
+    /** Hides the dialog */
+    hide(): Promise<void>;
+    render(): TemplateResult<1>;
+}
+export default NileDialog;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-dialog': NileDialog;
+    }
+}

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

@@ -0,0 +1,297 @@
+/**
+ * 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 { styles } from './nile-dialog.css';
+import '../nile-icon-button/nile-icon-button';
+import { animateTo, stopAnimations } from '../internal/animate';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { HasSlotController } from '../internal/slot';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
+import Modal from '../internal/modal';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-modal
+ *
+ */
+let NileDialog = class NileDialog extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.hasSlotController = new HasSlotController(this, 'footer');
+        /**
+         * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+         * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
+         */
+        this.open = false;
+        /**
+         * The dialog's label as displayed in the header. You should always include a relevant label even when using
+         * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
+         */
+        this.label = '';
+        /**
+         * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
+         * accessible way for users to dismiss the dialog.
+         */
+        this.noHeader = false;
+        this.preventOverlayClose = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+        this.modal = new Modal(this);
+    }
+    firstUpdated() {
+        this.dialog.hidden = !this.open;
+        if (this.open) {
+            this.addOpenListeners();
+            this.modal.activate();
+            lockBodyScrolling(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        unlockBodyScrolling(this);
+    }
+    requestClose(source) {
+        const nileRequestClose = this.emit('nile-request-close', {
+            cancelable: true,
+            detail: { source }
+        });
+        if (source === 'close-button') {
+            this.hide();
+            return;
+        }
+        if (nileRequestClose.defaultPrevented || this.preventOverlayClose) {
+            const animation = getAnimation(this, 'dialog.denyClose', { dir: 'right' });
+            animateTo(this.panel, animation.keyframes, animation.options);
+            return;
+        }
+        this.hide();
+    }
+    addOpenListeners() {
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    removeOpenListeners() {
+        document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    handleDocumentKeyDown(event) {
+        if (this.open && event.key === 'Escape') {
+            event.stopPropagation();
+            this.requestClose('keyboard');
+        }
+    }
+    async handleOpenChange() {
+        if (this.open) {
+            // Show
+            this.emit('nile-show');
+            this.addOpenListeners();
+            this.originalTrigger = document.activeElement;
+            this.modal.activate();
+            lockBodyScrolling(this);
+            // When the dialog is shown, Safari will attempt to set focus on whatever element has autofocus. This can cause
+            // the dialogs's animation to jitter (if it starts offscreen), so we'll temporarily remove the attribute, call
+            // `focus({ preventScroll: true })` ourselves, and add the attribute back afterwards.
+            //
+            // Related: https://github.com/shoelace-style/shoelace/issues/693
+            //
+            const autoFocusTarget = this.querySelector('[autofocus]');
+            if (autoFocusTarget) {
+                autoFocusTarget.removeAttribute('autofocus');
+            }
+            await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
+            this.dialog.hidden = false;
+            // Set initial focus
+            requestAnimationFrame(() => {
+                const nileInitialFocus = this.emit('nile-initial-focus', { cancelable: true });
+                if (!nileInitialFocus.defaultPrevented) {
+                    // Set focus to the autofocus target and restore the attribute
+                    if (autoFocusTarget) {
+                        autoFocusTarget.focus({ preventScroll: true });
+                    }
+                    else {
+                        this.panel.focus({ preventScroll: true });
+                    }
+                }
+                // Restore the autofocus attribute
+                if (autoFocusTarget) {
+                    autoFocusTarget.setAttribute('autofocus', '');
+                }
+            });
+            const panelAnimation = getAnimation(this, 'dialog.show', { dir: 'right' });
+            const overlayAnimation = getAnimation(this, 'dialog.overlay.show', { dir: 'right' });
+            await Promise.all([
+                animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
+                animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
+            ]);
+            this.emit('nile-after-show');
+        }
+        else {
+            // Hide
+            this.emit('nile-hide');
+            this.removeOpenListeners();
+            this.modal.deactivate();
+            await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
+            const panelAnimation = getAnimation(this, 'dialog.hide', { dir: 'right' });
+            const overlayAnimation = getAnimation(this, 'dialog.overlay.hide', { dir: 'right' });
+            // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to
+            // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear
+            // unexpectedly. We'll unhide them after all animations have completed.
+            await Promise.all([
+                animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
+                    this.overlay.hidden = true;
+                }),
+                animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
+                    this.panel.hidden = true;
+                })
+            ]);
+            this.dialog.hidden = true;
+            // Now that the dialog is hidden, restore the overlay and panel for next time
+            this.overlay.hidden = false;
+            this.panel.hidden = false;
+            unlockBodyScrolling(this);
+            // Restore focus to the original trigger
+            const trigger = this.originalTrigger;
+            if (typeof trigger?.focus === 'function') {
+                setTimeout(() => trigger.focus());
+            }
+            this.emit('nile-after-hide');
+        }
+    }
+    /** Shows the dialog. */
+    async show() {
+        if (this.open) {
+            return undefined;
+        }
+        this.open = true;
+        return waitForEvent(this, 'nile-after-show');
+    }
+    /** Hides the dialog */
+    async hide() {
+        if (!this.open) {
+            return undefined;
+        }
+        this.open = false;
+        return waitForEvent(this, 'nile-after-hide');
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        class=${classMap({
+            dialog: true,
+            'dialog--open': this.open,
+            'dialog--has-footer': this.hasSlotController.test('footer')
+        })}
+      >
+        <div part="overlay" class="dialog__overlay" @click=${() => this.requestClose('overlay')} tabindex="-1"></div>
+
+        <div
+          part="panel"
+          class="dialog__panel"
+          role="dialog"
+          aria-modal="true"
+          aria-hidden=${this.open ? 'false' : 'true'}
+          aria-label=${ifDefined(this.noHeader ? this.label : undefined)}
+          aria-labelledby=${ifDefined(!this.noHeader ? 'title' : undefined)}
+          tabindex="0"
+        >
+          ${!this.noHeader
+            ? html `
+                <header part="header" class="dialog__header">
+                  <h2 part="title" class="dialog__title" id="title">
+                    <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
+                  </h2>
+                  <div part="header-actions" class="dialog__header-actions">
+                    <slot name="header-actions"></slot>
+                    <nile-icon-button
+                      part="close-button"
+                      exportparts="base:close-button__base"
+                      class="dialog__close"
+                      name="close"
+                      label="close"
+                      library="system"
+                      @click="${() => this.requestClose('close-button')}"
+                    ></nile-icon-button>
+                  </div>
+                </header>
+              `
+            : ''}
+
+          <slot part="body" class="dialog__body"></slot>
+
+          <footer part="footer" class="dialog__footer">
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </div>
+    `;
+    }
+};
+NileDialog.styles = styles;
+__decorate([
+    query('.dialog')
+], NileDialog.prototype, "dialog", void 0);
+__decorate([
+    query('.dialog__panel')
+], NileDialog.prototype, "panel", void 0);
+__decorate([
+    query('.dialog__overlay')
+], NileDialog.prototype, "overlay", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDialog.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true })
+], NileDialog.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDialog.prototype, "noHeader", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDialog.prototype, "preventOverlayClose", void 0);
+__decorate([
+    watch('open', { waitUntilFirstUpdate: true })
+], NileDialog.prototype, "handleOpenChange", null);
+NileDialog = __decorate([
+    customElement('nile-dialog')
+], NileDialog);
+export { NileDialog };
+setDefaultAnimation('dialog.show', {
+    keyframes: [
+        { opacity: 0, scale: 0.8 },
+        { opacity: 1, scale: 1 }
+    ],
+    options: { duration: 250, easing: 'ease' }
+});
+setDefaultAnimation('dialog.hide', {
+    keyframes: [
+        { opacity: 1, scale: 1 },
+        { opacity: 0, scale: 0.8 }
+    ],
+    options: { duration: 250, easing: 'ease' }
+});
+setDefaultAnimation('dialog.denyClose', {
+    keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
+    options: { duration: 250 }
+});
+setDefaultAnimation('dialog.overlay.show', {
+    keyframes: [{ opacity: 0 }, { opacity: 1 }],
+    options: { duration: 250 }
+});
+setDefaultAnimation('dialog.overlay.hide', {
+    keyframes: [{ opacity: 1 }, { opacity: 0 }],
+    options: { duration: 250 }
+});
+export default NileDialog;
+//# sourceMappingURL=nile-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-dialog.js","sourceRoot":"","sources":["../../../src/nile-dialog/nile-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, CSSResultArray, TemplateResult} from 'lit-element';\nimport {styles} from './nile-dialog.css';\n\nimport '../nile-icon-button/nile-icon-button';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport Modal from '../internal/modal';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile icon component.\n *\n * @tag nile-modal\n *\n */\n@customElement('nile-dialog')\nexport class NileDialog extends NileElement {\n\n  static styles: CSSResultGroup = styles;\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer');\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n\n  @query('.dialog') dialog: HTMLElement;\n  @query('.dialog__panel') panel: HTMLElement;\n  @query('.dialog__overlay') overlay: HTMLElement;\n\n  /**\n   * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * The dialog'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  @property({ reflect: true }) label = '';\n\n  /**\n   * Disables the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the dialog.\n   */\n  @property({ type: Boolean, reflect: true }) noHeader = false;\n\n  @property({ type: Boolean, reflect: true }) preventOverlayClose = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n  }\n\n  firstUpdated() {\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    unlockBodyScrolling(this);\n  }\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n\n    const nileRequestClose = this.emit('nile-request-close', {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if(source === 'close-button'){\n      this.hide();\n      return;\n    }\n\n    if (nileRequestClose.defaultPrevented || this.preventOverlayClose ) {\n      const animation = getAnimation(this, 'dialog.denyClose', { dir: 'right'});\n      animateTo(this.panel, animation.keyframes, animation.options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  private addOpenListeners() {\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.requestClose('keyboard');\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('nile-show');\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      // When the dialog is shown, Safari will attempt to set focus on whatever element has autofocus. This can cause\n      // the dialogs's animation to jitter (if it starts offscreen), so we'll temporarily remove the attribute, call\n      // `focus({ preventScroll: true })` ourselves, and add the attribute back afterwards.\n      //\n      // Related: https://github.com/shoelace-style/shoelace/issues/693\n      //\n      const autoFocusTarget = this.querySelector('[autofocus]');\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute('autofocus');\n      }\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const nileInitialFocus = this.emit('nile-initial-focus', { cancelable: true });\n\n        if (!nileInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute('autofocus', '');\n        }\n      });\n\n      const panelAnimation = getAnimation(this, 'dialog.show', { dir: 'right' });\n      const overlayAnimation = getAnimation(this, 'dialog.overlay.show', { dir: 'right' });\n      await Promise.all([\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n      ]);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, 'dialog.hide', { dir: 'right' });\n      const overlayAnimation = getAnimation(this, 'dialog.overlay.hide', { dir: 'right' });\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      await Promise.all([\n        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n          this.overlay.hidden = true;\n        }),\n        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n          this.panel.hidden = true;\n        })\n      ]);\n\n      this.dialog.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      unlockBodyScrolling(this);\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === 'function') {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  /** Shows the dialog. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the dialog */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          dialog: true,\n          'dialog--open': this.open,\n          'dialog--has-footer': this.hasSlotController.test('footer')\n        })}\n      >\n        <div part=\"overlay\" class=\"dialog__overlay\" @click=${() => this.requestClose('overlay')} tabindex=\"-1\"></div>\n\n        <div\n          part=\"panel\"\n          class=\"dialog__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-label=${ifDefined(this.noHeader ? this.label : undefined)}\n          aria-labelledby=${ifDefined(!this.noHeader ? 'title' : undefined)}\n          tabindex=\"0\"\n        >\n          ${!this.noHeader\n            ? html`\n                <header part=\"header\" class=\"dialog__header\">\n                  <h2 part=\"title\" class=\"dialog__title\" id=\"title\">\n                    <slot name=\"label\"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>\n                  </h2>\n                  <div part=\"header-actions\" class=\"dialog__header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                    <nile-icon-button\n                      part=\"close-button\"\n                      exportparts=\"base:close-button__base\"\n                      class=\"dialog__close\"\n                      name=\"close\"\n                      label=\"close\"\n                      library=\"system\"\n                      @click=\"${() => this.requestClose('close-button')}\"\n                    ></nile-icon-button>\n                  </div>\n                </header>\n              `\n            : ''}\n\n          <slot part=\"body\" class=\"dialog__body\"></slot>\n\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\"></slot>\n          </footer>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('dialog.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('dialog.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('dialog.denyClose', {\n  keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation('dialog.overlay.show', {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 250 }\n});\n\nsetDefaultAnimation('dialog.overlay.hide', {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 250 }\n});\n\nexport default NileDialog;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-dialog': NileDialog;\n  }\n}\n"]}

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

@@ -84,6 +84,11 @@ let NileInput = class NileInput extends NileElement {
         this.form = '';
         /** Makes the input a required field. */
         this.required = false;
+        /**
+         * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
+         * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
+         */
+        this.autocomplete = "off";
         /** Enables spell checking on the input. */
         this.spellcheck = true;
     }