@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

package/dist/esm/nano-details.entry.js

@@ -1,59 +1,60 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, g as getElement, B as Build, a as Host } from './index-6cc72cd9.js';
-import { d as displayTransition } from './transitions-c09bd7f6.js';
-import { h } from './renderer-4bc3e2dc.js';
+import { r as registerInstance, c as createEvent, d as Host } from './index-CFYZ-ZOT.js';
+import { h } from './renderer-LJzCFyMt.js';
+import { H as HasSlotController } from './slot-DBzVpliZ.js';
 
-const detailsCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";
-const NanoDetailsStyle0 = detailsCss;
+const detailsCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:var(--nano-spacing-md);--btn-padding:var(--padding);--btn-bg-color:transparent;--btn-bg-color--hover:var(--nano-color-primary-100);--btn-bg-color--active:var(--nano-color-primary-300);--content-padding:var(--padding);display:block;border:1px solid var(--nano-color-neutral-300);color:var(--nano-color-neutral-1400)}:host([size=small]){--padding:var(--nano-spacing-sm) 0.9375rem}:host([size=large]){--padding:var(--nano-spacing-l)}:host([size=large]) .header{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}:host([disabled]){opacity:0.5}.header{all:unset;cursor:pointer;padding:var(--btn-padding);position:relative;display:flex;flex-wrap:wrap;align-items:center;background:var(--btn-bg-color);color:inherit;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:not([aria-disabled=true]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.header:not([aria-disabled=true]):hover{background:var(--btn-bg-color--hover)}.header:not([aria-disabled=true]):active{background:var(--btn-bg-color--active)}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:var(--nano-color-primary-1200)}.header .icon .default-icon{rotate:0deg;transform-origin:center;transition:var(--nano-transition-x-fast) ease rotate}:host([open]) .header .icon .default-icon{rotate:180deg}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon),.header .icon::slotted(.nano-icon){color:currentcolor;transition:var(--nano-transition-x-fast) ease rotate;transform-origin:center}.body{display:grid;grid-template-rows:0fr;transition:all var(--nano-transition-fast) ease-out;opacity:0}:host([open]) .body{grid-template-rows:1fr;opacity:1}.content-wrapper{overflow:hidden}.content{padding:var(--content-padding)}";
 
-const Details = class {
+const NanoDetails = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.nanoOpened = createEvent(this, "nanoOpened", 7);
-        this.nanoClosed = createEvent(this, "nanoClosed", 7);
-        this.nanoAfterOpened = createEvent(this, "nanoAfterOpened", 7);
-        this.nanoAfterClosed = createEvent(this, "nanoAfterClosed", 7);
+        this.nanoOpen = createEvent(this, "nanoOpen", 7);
+        this.nanoClose = createEvent(this, "nanoClose", 7);
+        this.nanoAfterOpen = createEvent(this, "nanoAfterOpen", 7);
+        this.nanoAfterClose = createEvent(this, "nanoAfterClose", 7);
     }
-    hasStartSlot;
-    hasEndSlot;
     mo;
     stateChanging = false;
-    bodyEl;
+    slotCtrl = new HasSlotController(this, 'icon-start', 'icon-end');
     detailsEl;
     headerEl;
-    contentEl;
-    cacheHeight;
-    get host() { return getElement(this); }
+    _bodyEl;
+    get bodyEl() {
+        return this._bodyEl;
+    }
+    set bodyEl(el) {
+        if (this.bodyEl && this.bodyEl === this._bodyEl)
+            return;
+        if (this.bodyEl) {
+            this.bodyEl.removeEventListener('transitionend', this.handleTransitionEnd);
+        }
+        el.addEventListener('transitionend', this.handleTransitionEnd);
+        this._bodyEl = el;
+    }
     /** Summary / handle text. Use the `label` slot for HTML markup */
     label = '';
     /** Should item be open on load */
     open = false;
     /** Disables the details so it can't be toggled. */
     disabled = false;
-    /** Hide the handle. (You will need to control the hiding / showing of content with script) */
-    noHandle = false;
-    /** Icon slot rotation amount (degrees) on open */
-    iconRotation = 90;
-    /**
-     * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.
-     * Set `useCacheHeight` to `true` try to keep animations smooth. */
-    useCacheHeight = false;
+    /** The size of the details. Primarily controls the trigger element and overall padding. */
+    size = 'medium';
     /**
      * Emitted when the component opens.
-     * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
+     * Note: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.
      */
-    nanoOpened;
+    nanoOpen;
     /**
      * Emitted when the component closes.
-     * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
+     * Note: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.
      */
-    nanoClosed;
+    nanoClose;
     /** Emitted after the details opens and all transitions are complete. */
-    nanoAfterOpened;
+    nanoAfterOpen;
     /** Emitted after the details closes and all transitions are complete. */
-    nanoAfterClosed;
+    nanoAfterClose;
     toggleClick() {
         this.stateChanging = true;
         if (this.open)
@@ -71,10 +72,12 @@ const Details = class {
                 this.open = !this.open;
                 break;
             case 'ArrowUp':
+            case 'ArrowLeft':
                 e.preventDefault();
                 this.open = false;
                 break;
             case 'ArrowDown':
+            case 'ArrowRight':
                 e.preventDefault();
                 this.open = true;
                 break;
@@ -87,54 +90,39 @@ const Details = class {
             return;
         this.open = !this.open;
     };
+    handleTransitionEnd = (e) => {
+        if (e.propertyName !== 'opacity' ||
+            !e.composedPath().find((node) => node === this.bodyEl))
+            return;
+        if (this.open) {
+            this.nanoAfterOpen.emit();
+            requestAnimationFrame(() => (this.stateChanging = false));
+        }
+        else {
+            this.detailsEl.open = false;
+            this.nanoAfterClose.emit();
+            requestAnimationFrame(() => (this.stateChanging = false));
+        }
+    };
     hide() {
-        const nanoClose = this.nanoClosed.emit(this.open);
+        const nanoClose = this.nanoClose.emit(this.open);
         if (nanoClose.defaultPrevented) {
             this.open = true;
             this.detailsEl.open = true;
             return;
         }
-        this.cacheHeight = this.contentEl.scrollHeight;
-        this.bodyEl.style.height = this.cacheHeight + 'px';
-        displayTransition(this.bodyEl, {
-            className: 'is-shown',
-            show: false,
-            transitionProp: ['height'],
-        }).then(() => {
-            this.stateChanging = false;
-            this.detailsEl.open = false;
-            this.bodyEl.classList.add('is-hidden');
-            this.nanoAfterClosed.emit();
-        });
-        // requestAnimationFrame doesn't trigger transitionend event for firefox :/
-        setTimeout(() => {
-            this.bodyEl.style.height = '0px';
-        });
     }
     show() {
-        const nanoOpen = this.nanoOpened.emit();
+        const nanoOpen = this.nanoOpen.emit();
         this.detailsEl.open = true;
         if (nanoOpen.defaultPrevented) {
             this.open = false;
             this.detailsEl.open = false;
             return;
         }
-        displayTransition(this.bodyEl, {
-            className: 'is-shown',
-            show: true,
-            transitionProp: ['height'],
-        }).then(() => {
-            this.stateChanging = false;
-            this.bodyEl.style.height = 'auto';
-            this.nanoAfterOpened.emit();
-        });
-        this.bodyEl.style.height =
-            (this.useCacheHeight && this.cacheHeight
-                ? this.cacheHeight
-                : this.contentEl.scrollHeight) + 'px';
     }
     attachMo() {
-        if (this.mo || !this.detailsEl || !Build.isBrowser)
+        if (this.mo || !this.detailsEl || false)
             return;
         this.mo = new MutationObserver((changes) => {
             if (this.stateChanging)
@@ -147,12 +135,7 @@ const Details = class {
         });
         this.mo.observe(this.detailsEl, { attributes: true });
     }
-    componentWillLoad() {
-        this.hasStartSlot = !!this.host.querySelector('[slot="icon-start"]');
-        this.hasEndSlot = !!this.host.querySelector('[slot="icon-end"]');
-    }
     componentDidLoad() {
-        this.bodyEl.style.height = this.open ? 'auto' : '0';
         if (this.open)
             this.detailsEl.setAttribute('open', 'true');
         this.attachMo();
@@ -165,24 +148,23 @@ const Details = class {
             this.mo.disconnect();
             this.mo = undefined;
         }
+        if (this.bodyEl) {
+            this.bodyEl.removeEventListener('transitionend', this.handleTransitionEnd);
+        }
     }
     render() {
-        return (h(Host, { key: 'ee6fb3abfaf15e07a18d399514e8447d63512ce4', class: "nano-details" }, h("details", { key: '9478907ce6d6e8363c66df27e45e05a22705d38c', part: "base", ref: (d) => (this.detailsEl = d), class: {
+        return (h(Host, { key: 'dfe08b9736512e4f2e7e77b6e08f391e570f7d35', class: "nano-details" }, h("details", { key: 'aee47095a745ec92d97e3eb2a09f1765fbad251d', part: "base", ref: (d) => (this.detailsEl = d), class: {
                 details: true,
-                open: this.open,
                 disabled: this.disabled,
-            } }, h("summary", { key: '717ed7a624692dfce885436025e45cd011d9af5a', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', style: { display: this.noHandle ? 'none' : '' }, id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.hasStartSlot ? (h("span", { part: "icon--start", class: "icon icon--start", style: {
-                transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-            } }, h("slot", { name: "icon-start" }))) : (''), h("div", { key: '9ec2fcc2cf8aa386603cf7de1c4f30318df1e4ad', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), this.hasEndSlot ? (h("span", { part: "icon--end", class: "icon icon--end", style: {
-                transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-            } }, h("slot", { name: "icon-end" }))) : ('')), h("div", { key: '89311fc1194ca178843b5b751c48740b26689eaa', part: "body", class: "body", ref: (div) => (this.bodyEl = div), tabindex: "-1", role: "region", "aria-labelledby": "header" }, h("div", { key: 'b16633bd50819421d9bd6ab4b7e4cd4b2bdfcd61', part: "content", ref: (div) => (this.contentEl = div), class: "content", id: "content" }, h("slot", { key: '4735f3166e91d58152564a4f1b423e77900fd84f' }))))));
+            } }, h("summary", { key: 'b15a83c3386171f212a68cf456eb9ba6296917c2', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: 'c29db27dc0c74a8053c035421b0738eee1d72945', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: '99381aa8452aac30498cfb27148c9e507e07989e', name: "icon-start" }))), h("div", { key: '59068fae315b9cd0427987eb59e03f2cd219e45a', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '8eb4304e5c0da199ef6ad7a9730f92130072afd8', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: 'a8c2b9213b96787007a85faf64d42436729bc6e4', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
+            !this.slotCtrl.has('icon-end') &&
+            !this.slotCtrl.has('icon-expand') &&
+            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: 'bfb3677f307b23b4947c80d7173b63ce51b83c70', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: 'dad8f7fbf316facfc2a505edf0041fb259d78d5b', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: '988b4a6201029002ab76004375955eaa87542ed9', class: "content-wrapper" }, h("div", { key: '159483b132abfc6d7edf87771af0f3c2c0e077bd', part: "content", class: "content", id: "content" }, h("slot", { key: '8bb9bbca225bca84bc1efd2c617372f490985bc1' })))))));
     }
     static get watchers() { return {
         "open": ["toggleClick"]
     }; }
 };
-Details.style = NanoDetailsStyle0;
-
-export { Details as nano_details };
+NanoDetails.style = detailsCss;
 
-//# sourceMappingURL=nano-details.entry.js.map
+export { NanoDetails as nano_details };

package/dist/esm/nano-dialog.entry.js

@@ -1,18 +1,17 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-6cc72cd9.js';
-import { h } from './renderer-4bc3e2dc.js';
-import { M as Modal } from './modal-02828a39.js';
-import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-1afc6a4e.js';
-import { h as hasSlot } from './slot-1cd90e53.js';
-import { C as ComponentStore } from './component-store-199a9fd8.js';
-import './tabbable-44932eb7.js';
-import './dom-fafdec9a.js';
-import './throttle-df960210.js';
+import { r as registerInstance, c as createEvent, a as getElement, d as Host } from './index-CFYZ-ZOT.js';
+import { h } from './renderer-LJzCFyMt.js';
+import { M as Modal } from './modal-B50PWCuY.js';
+import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-BRRzrkAi.js';
+import { H as HasSlotController } from './slot-DBzVpliZ.js';
+import { C as ComponentStore } from './component-store-DqCSKpAK.js';
+import { g as getTabbableElements } from './tabbable-BpHwrUYt.js';
+import './dom-CF0Ycs9M.js';
+import './throttle-C93FMm2Z.js';
 
-const dialogCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--height:auto;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xlarge, 24px) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";
-const NanoDialogStyle0 = dialogCss;
+const dialogCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border-radius:0;--content-background:var(--nano-color-neutral-75);--footer-content:var(--nano-color-neutral-75);--scrim-color:var(--nano-overlay-background-color);--box-shadow:var(--nano-shadow-l3);--close-button-color:var(--nano-color-primary-1200);--width:50rem;--height:auto;--body-padding-v:var(--nano-spacing-l1-default);--body-padding-h:var(--nano-spacing-l1-default);--header-padding-v:var(--nano-spacing-l);--header-padding-h:var(--nano-spacing-l1-default);--footer-padding-v:var(--nano-spacing-l);--footer-padding-h:var(--nano-spacing-l1-default)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-z-index-modal);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xl) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xl));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform}.dialog__panel:focus{outline:none}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-x-fast) box-shadow;min-inline-size:auto;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}[stuck] .dialog__header{box-shadow:var(--nano-shadow-l0)}.dialog__title{flex:1 1 auto;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}.dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.375rem;position:relative;inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);--color:var(--close-button-color)}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast) opacity}.dialog--open .dialog__overlay{opacity:1}";
 
 let id = 0;
 const Dialog = class {
@@ -32,6 +31,7 @@ const Dialog = class {
     originalTrigger;
     overlay;
     dialog;
+    slotCtrl = new HasSlotController(this, 'footer');
     get panel() {
         return this._panel;
     }
@@ -45,7 +45,6 @@ const Dialog = class {
     _panel;
     get host() { return getElement(this); }
     noDismiss = false;
-    hasFooter = false;
     hidden = true;
     /** Show a colour ribbon at the top of the modal */
     showRibbon = true;
@@ -63,9 +62,6 @@ const Dialog = class {
     /** Set to true to disable 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 = false;
-    /** Set to true to disable the footer. This will also remove the footer close button,
-     * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */
-    noFooter = false;
     /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */
     noUserDismiss = false;
     /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */
@@ -116,15 +112,22 @@ const Dialog = class {
             this.dialog.showPopover();
         }
         lockBodyScrolling(this.host);
-        if (this.open) {
-            // Wait for the next frame before setting initial focus so the dialog is technically visible
-            this.host.addEventListener('nanoAfterShow', () => {
-                const nanoInitialFocus = this.nanoInitialFocus.emit();
-                if (!nanoInitialFocus.defaultPrevented) {
-                    this.panel.focus({ preventScroll: true });
-                }
-            }, { once: true });
+        // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the
+        // drawer's animation to jitter.
+        const autoFocusTarget = this.host.querySelector('[autofocus]');
+        if (autoFocusTarget) {
+            autoFocusTarget.removeAttribute('autofocus');
         }
+        // Wait for the next frame before setting initial focus so the dialog is technically visible
+        this.host.addEventListener('nanoAfterShow', () => {
+            const nanoInitialFocus = this.nanoInitialFocus.emit();
+            if (!nanoInitialFocus.defaultPrevented) {
+                const firstTabbable = autoFocusTarget ||
+                    getTabbableElements(this.host, true, true, true)[0] ||
+                    this.panel;
+                firstTabbable.focus({ preventScroll: true });
+            }
+        }, { once: true });
     }
     /** Hides the dialog */
     async hide() {
@@ -142,8 +145,13 @@ const Dialog = class {
         this.stopVideos();
         // Restore focus to the original trigger
         const trigger = this.originalTrigger;
-        if (trigger && typeof trigger.focus === 'function') {
-            setTimeout(() => trigger.focus());
+        if (trigger) {
+            if (trigger['setFocus'] && typeof trigger['setFocus'] === 'function') {
+                // @ts-expect-error
+                trigger.setFocus();
+            }
+            else
+                trigger.focus();
         }
         setTimeout(() => {
             if (!this.open && typeof this.dialog?.hidePopover === 'function') {
@@ -185,9 +193,6 @@ const Dialog = class {
             }
         }
     };
-    handleSlotChange = () => {
-        this.hasFooter = hasSlot(this.host, 'footer');
-    };
     stopVideos() {
         const videos = Array.from(this.host.querySelectorAll('iframe,video'));
         videos.forEach((video) => {
@@ -204,15 +209,17 @@ const Dialog = class {
         this.modal = new Modal(this.host);
     }
     componentWillLoad() {
-        this.handleSlotChange();
-        // Show on init if open
-        if (this.open)
-            this.show();
-        if (this.storeId)
+        if (this.storeId) {
             ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);
+        }
     }
     componentDidLoad() {
         this.dialog.hidden = !this.open;
+        // Show on init if open
+        if (this.open) {
+            this.show();
+            this.nanoAfterShow.emit();
+        }
     }
     disconnectedCallback() {
         unlockBodyScrolling(this.host);
@@ -221,22 +228,20 @@ const Dialog = class {
         this.panel.removeEventListener('transitionend', this.handleTransitionEnd);
     }
     render() {
-        return (h(Host, { key: 'ecd2ed516be353ff67709a8091bb4bf3efe6f250', class: "nano-dialog" }, h("div", { key: 'c461f3cb97b4bec6409eddf83934cba04d3f649d', part: "base", class: {
+        return (h(Host, { key: '40e8bc877fd5b34bbc02b9ab28a331d6bf81415a', class: "nano-dialog" }, h("div", { key: '3d8c4f2b68831a42039e597d532e2efe680082df', part: "base", class: {
                 dialog: true,
                 'dialog--open': this.open,
-                'dialog--has-footer': !this.noFooter,
+                'dialog--has-footer': this.slotCtrl.has('footer'),
                 'dialog--has-header': !this.noHeader,
                 'dialog--nodismiss': this.noDismiss,
                 'dialog--with-ribbon': this.showRibbon,
-            }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele), popover: "manual" }, h("div", { key: 'e54d7cf6106039f4d6c19357576de9da241970ab', part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { key: '0e5faa8f6c97e584e1c3f2ffe079b7548466f5f1', ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": !this.hidden ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: -1 }, h("div", { key: '3a51d64ddd77f662e2aaea65d5f7ddf0895fb334', class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", { key: '43e5d67892f8afeeef5d6528407888175fcedd64' }, h("header", { key: '229b41c3da0bdf7af0d2ff7670059d5213e80f6a', part: "header", class: "dialog__header" }, h("span", { key: '2432a5424e4307610d9ea546f9fd95010ea15f4f', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { key: 'fa310058f83f77addd68ebffe137dfe98dd21d02', name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { key: '628a2209cc13e3b2b97512debfa5c4495ab63ff3', part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/xmark" }))))), h("div", { key: '081b6c433700ebfdd17919f007a2a15dc48a9510', part: "body", class: "dialog__body" }, h("slot", { key: '704d5a44e1c47d7de9b67b5911bba385991e0c95' })), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("nano-sticker", { key: '908ca9562cd246cc520c396725b68026cd610a26', position: "bottom" }, h("footer", { key: '9c5c2a8e3c8851b729453a1ac1a35cfeac240302', part: "footer", class: "dialog__footer" }, h("slot", { key: 'e2b48e7a7ef217c06ee6600f8b2000e3a0906a38', name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { key: 'f99cee27f04c252ace3fb9f4305013f10cce07fc', class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
+            }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele), popover: "manual" }, h("div", { key: '48ec09fb5c08830fd9f4f54e528ce47d16dcf60e', part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { key: '9b28aef25fc3054e329e87293e1f24b1f7bd4f63', ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": !this.hidden ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: -1 }, h("div", { key: 'a25853d8c1d11e52235d6d9300cc39e529b3306f', class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", { key: '111ee49da4468e834046ecef442873d7956a9a8f' }, h("header", { key: '5f40b8920bd3b7ddac34d08593752cdc58a64f4f', part: "header", class: "dialog__header" }, h("span", { key: '2f35793fb4c9009db7321c27feed4448c5a67ada', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { key: '0b5de133cf8f63237cccafb96fbe635c82bdf8fb', name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { key: 'd517fbc641ba1e35040f08e1ba53b56d2e2f1fcd', part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/xmark" }))))), h("div", { key: 'd09658d8fa0c306068e4ccf77dbae233e345a648', part: "body", class: "dialog__body" }, h("slot", { key: '46ef0d9c1ca1a136e15baa859a19b7e46e467d3c' })), this.slotCtrl.has('footer') && (h("nano-sticker", { key: '86dc8c994c6e3d3f7677ce9c032a3a1b9433a5e3', position: "bottom" }, h("footer", { key: '6876b4a53b64469170ee81c6d442e217c844596f', part: "footer", class: "dialog__footer" }, h("slot", { key: 'faff1e531b53fc1895ade69bcdf8360ceedfa619', name: "footer" })))))))));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"],
         "hoist": ["handleHoistChange"]
     }; }
 };
-Dialog.style = NanoDialogStyle0;
+Dialog.style = dialogCss;
 
 export { Dialog as nano_dialog };
-
-//# sourceMappingURL=nano-dialog.entry.js.map