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

package/dist/components/nano-dialog.js

@@ -1,19 +1,19 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
 import { M as Modal } from './modal.js';
 import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll.js';
-import { h as hasSlot } from './slot.js';
+import { H as HasSlotController } from './slot.js';
 import { C as ComponentStore } from './component-store.js';
+import { g as getTabbableElements } from './tabbable.js';
 import { d as defineCustomElement$5 } from './icon.js';
 import { d as defineCustomElement$4 } from './icon-button.js';
 import { d as defineCustomElement$3 } from './sticker.js';
 import { d as defineCustomElement$2 } from './tooltip.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 = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement {
@@ -35,6 +35,7 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
     originalTrigger;
     overlay;
     dialog;
+    slotCtrl = new HasSlotController(this, 'footer');
     get panel() {
         return this._panel;
     }
@@ -48,7 +49,6 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
     _panel;
     get host() { return this; }
     noDismiss = false;
-    hasFooter = false;
     hidden = true;
     /** Show a colour ribbon at the top of the modal */
     showRibbon = true;
@@ -66,9 +66,6 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
     /** 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 */
@@ -119,15 +116,22 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
             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() {
@@ -145,8 +149,13 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
         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') {
@@ -188,9 +197,6 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
             }
         }
     };
-    handleSlotChange = () => {
-        this.hasFooter = hasSlot(this.host, 'footer');
-    };
     stopVideos() {
         const videos = Array.from(this.host.querySelectorAll('iframe,video'));
         videos.forEach((video) => {
@@ -207,15 +213,17 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
         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);
@@ -224,32 +232,30 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
         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"]
     }; }
-    static get style() { return NanoDialogStyle0; }
+    static get style() { return dialogCss; }
 }, [1, "nano-dialog", {
         "showRibbon": [4, "show-ribbon"],
         "open": [1540],
         "label": [1],
         "noHeader": [4, "no-header"],
-        "noFooter": [4, "no-footer"],
         "noUserDismiss": [4, "no-user-dismiss"],
         "storeId": [1, "store-id"],
         "storeMethod": [1, "store-method"],
         "hoist": [4],
         "noDismiss": [32],
-        "hasFooter": [32],
         "hidden": [32],
         "show": [64],
         "hide": [64]
@@ -295,5 +301,3 @@ const NanoDialog = Dialog;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoDialog, defineCustomElement };
-
-//# sourceMappingURL=nano-dialog.js.map

package/dist/components/nano-drawer.js

@@ -1,342 +1,9 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { h } from './renderer.js';
-import { M as Modal } from './modal.js';
-import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll.js';
-import { h as hasSlot } from './slot.js';
-import { w as waitForEvent } from './events.js';
-import { C as ComponentStore } from './component-store.js';
-import { d as defineCustomElement$5 } from './icon.js';
-import { d as defineCustomElement$4 } from './icon-button.js';
-import { d as defineCustomElement$3 } from './sticker.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
-
-const drawerCss = ":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{--size:25rem;--panel-background:white;--panel-shadow:var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--header-button-color:#b5aea7;--footer-background:#e4e6e8;--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-large, 20px);--body-spacing:var(--nano-spacing-large, 20px);--footer-spacing:var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);--dir:1}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;pointer-events:none;overflow:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-layer-index-modal, 700)}.drawer__panel{position:absolute;z-index:2;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;display:flex;flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px #4a4a4a}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(calc(var(--nano-scroll-lock-size) * -1))}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background)}[stuck] .drawer__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.drawer__title{flex:1 1 auto;font:inherit;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.2;padding:var(--header-spacing);margin:0}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-xsmall, 4px);padding:0 var(--header-spacing)}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(.nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);--color:var(--header-button-color)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative}.drawer__footer ::slotted(button:not(:last-of-type)){margin-inline-end:var(--nano-spacing-xsmall, 4px)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";
-const NanoDrawerStyle0 = drawerCss;
-
-const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.nanoShow = createEvent(this, "nanoShow", 7);
-        this.nanoHide = createEvent(this, "nanoHide", 7);
-        this.nanoAfterHide = createEvent(this, "nanoAfterHide", 7);
-        this.nanoAfterShow = createEvent(this, "nanoAfterShow", 7);
-        this.nanoInitialFocus = createEvent(this, "nanoInitialFocus", 7);
-        this.nanoRquestClose = createEvent(this, "nanoRquestClose", 7);
-    }
-    get host() { return this; }
-    originalTrigger;
-    drawer;
-    overlay;
-    modal;
-    get panel() {
-        return this._panel;
-    }
-    set panel(ele) {
-        if (this._panel) {
-            this.panel.removeEventListener('animationend', this.handleTransitionEnd);
-        }
-        if (!ele)
-            return;
-        ele.addEventListener('transitionend', this.handleTransitionEnd);
-        this._panel = ele;
-    }
-    _panel;
-    noDismiss = false;
-    hasFooter;
-    // Public API
-    /**
-     * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
-     * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
-     */
-    open = false;
-    /**
-     * The drawer'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;
-    /** The direction from which the drawer will open. */
-    placement = 'end';
-    /**
-     * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
-     * its parent element, set this attribute and add `position: relative` to the parent.
-     */
-    contained = false;
-    /**
-     * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
-     * accessible way for users to dismiss the drawer.
-     */
-    noHeader = false;
-    /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */
-    storeId;
-    /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */
-    storeMethod = 'url-hash';
-    /** 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;
-    /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */
-    hoist = false;
-    handleHoistChange() {
-        if (!this.hoist || Array.from(document.body.children).includes(this.host))
-            return;
-        document.body.prepend(this.host);
-    }
-    /** Emitted when the drawer opens. */
-    nanoShow;
-    /** Emitted when the drawer closes. */
-    nanoHide;
-    /** Emitted after the drawer closes and all animations are complete. */
-    nanoAfterHide;
-    /** Emitted after the drawer opens and all animations are complete. */
-    nanoAfterShow;
-    /**
-     * Emitted when the drawer opens and is ready to receive focus. Calling
-     * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
-     */
-    nanoInitialFocus;
-    /**
-     * Emitted when the user attempts to
-     * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
-     * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
-     * destructive behavior such as data loss.
-     */
-    nanoRquestClose;
-    /**
-     * Shows the drawer.
-     * @returns a promise that resolves when the drawer has finished opening
-     */
-    async show() {
-        if (this.open)
-            return undefined;
-        this.open = true;
-        return waitForEvent(this.host, 'nanoAfterShow');
-    }
-    /**
-     * Hides the drawer
-     * @returns a promise that resolves when the drawer has finished closing
-     */
-    async hide() {
-        if (!this.open)
-            return undefined;
-        this.open = false;
-        return waitForEvent(this.host, 'nanoAfterHide');
-    }
-    requestClose(source) {
-        const nanoRequestClose = this.nanoRquestClose.emit({ source });
-        if (nanoRequestClose.defaultPrevented || this.noUserDismiss) {
-            this.noDismiss = true;
-            setTimeout(() => (this.noDismiss = false), 250);
-            return;
-        }
-        this.hide();
-    }
-    // Prop Change Handlers
-    handleNoModalChange() {
-        if (this.open && !this.contained) {
-            this.modal.activate();
-            lockBodyScrolling(this.host);
-        }
-        if (this.open && this.contained) {
-            this.modal.deactivate();
-            unlockBodyScrolling(this.host);
-        }
-    }
-    async handleOpenChange() {
-        if (this.open) {
-            // Show
-            this.nanoShow.emit();
-            this.addOpenListeners();
-            this.originalTrigger = document.activeElement;
-            // Lock body scrolling only if the drawer isn't contained
-            if (!this.contained) {
-                this.modal.activate();
-                lockBodyScrolling(this.host);
-            }
-            // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the
-            // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`
-            // ourselves, and add the attribute back afterwards.
-            const autoFocusTarget = this.host.querySelector('[autofocus]');
-            if (autoFocusTarget) {
-                autoFocusTarget.removeAttribute('autofocus');
-            }
-            this.drawer.hidden = false;
-            // Set initial focus
-            requestAnimationFrame(() => {
-                const nanoInitialFocus = this.nanoInitialFocus.emit();
-                if (!nanoInitialFocus.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', '');
-                }
-            });
-            this.nanoAfterShow.emit();
-            return;
-        }
-        // Hide
-        this.nanoHide.emit();
-        this.removeOpenListeners();
-        if (!this.contained) {
-            this.modal.deactivate();
-            unlockBodyScrolling(this.host);
-        }
-        // Restore focus to the original trigger
-        const trigger = this.originalTrigger;
-        if (typeof trigger?.focus === 'function') {
-            setTimeout(() => trigger.focus());
-        }
-    }
-    // Event Handling
-    addOpenListeners() {
-        document.addEventListener('keydown', this.handleDocumentKeyDown);
-    }
-    removeOpenListeners() {
-        document.removeEventListener('keydown', this.handleDocumentKeyDown);
-    }
-    handleDocumentKeyDown = (event) => {
-        // Contained drawers aren't modal and don't response to the escape key
-        if (this.contained) {
-            return;
-        }
-        if (event.key === 'Escape' && this.modal.isActive() && this.open) {
-            event.stopImmediatePropagation();
-            this.requestClose('keyboard');
-        }
-    };
-    handleTransitionEnd = (event) => {
-        if (event.propertyName === 'opacity' &&
-            event
-                .composedPath()
-                .find((node) => node === this.panel || node === this.overlay)) {
-            if (!this.open) {
-                this.drawer.hidden = true;
-                // Now that the dialog is hidden, restore the overlay and panel for next time
-                this.overlay.hidden = false;
-                this.panel.hidden = false;
-            }
-            if (this.open)
-                this.nanoAfterShow.emit();
-            else
-                this.nanoAfterHide.emit();
-        }
-    };
-    handleSlotChange = () => {
-        this.hasFooter = hasSlot(this.host, 'footer');
-    };
-    // Component Lifecycle
-    connectedCallback() {
-        this.handleHoistChange();
-        this.modal = new Modal(this.host);
-    }
-    disconnectedCallback() {
-        unlockBodyScrolling(this.host);
-    }
-    componentWillLoad() {
-        this.handleSlotChange();
-        // Show on init if open
-        if (this.open)
-            this.show();
-        if (this.storeId)
-            ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);
-    }
-    componentDidLoad() {
-        this.drawer.hidden = !this.open;
-        if (this.open) {
-            this.addOpenListeners();
-            if (!this.contained) {
-                this.modal.activate();
-                lockBodyScrolling(this.host);
-            }
-        }
-    }
-    render() {
-        return (h(Host, { key: '3993edab973a4e83921ef48b3a856eab71314995', class: "nano-drawer" }, h("div", { key: '81b617363f43048bb8e692838304641ed431e716', ref: (ele) => (this.drawer = ele), part: "base", class: {
-                drawer: true,
-                'drawer--open': this.open,
-                [`drawer--${this.placement}`]: true,
-                'drawer--contained': this.contained,
-                'drawer--fixed': !this.contained,
-                'drawer--has-footer': hasSlot(this.host, 'footer'),
-                'drawer--has-header': !this.noHeader,
-                'drawer--nodismiss': this.noDismiss,
-            } }, h("div", { key: '92742f6c66f84178beec198eafa587f1e8386764', ref: (ele) => (this.overlay = ele), part: "overlay", class: "drawer__overlay", onClick: () => this.requestClose('overlay'), tabindex: "-1" }), h("div", { key: '6e083a039111b507f9a86b485e6b22b5b47c3f69', ref: (ele) => (this.panel = ele), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : undefined, "aria-labelledby": !this.noHeader ? 'title' : undefined, tabindex: "0" }, h("div", { key: '6b32c26cbc35acd4717fa7f9cc80d829e8866433', class: "drawer__main" }, !this.noHeader && (h("nano-sticker", { key: '9969d99e402c4ea254aa25c2cff35e12fb60a9bc' }, h("div", { key: '75e40fc490e870674d055ac10c1862e6be48f03e', part: "header", class: "drawer__header" }, h("h2", { key: 'cdb1ebcff62005cc38f56613d5e2c0bd1a47749f', part: "title", class: "drawer__title", id: "title" }, h("slot", { key: 'e5c7f9fe9f4c32f36b978a8bdab51b7954fe7afd', name: "label" }, this.label.length > 0
-            ? this.label
-            : String.fromCharCode(65279))), h("div", { key: 'c78dcf660ad85ae8e2c9191ddf8609d8e8847a95', part: "header-actions", class: "drawer__header-actions" }, h("slot", { key: 'b7dc420567ab5f0e74b57141a0779603bc244318', name: "header-actions" }), !this.noUserDismiss && (h("nano-icon-button", { key: '7269bc1bfa339e44d07466bc8b540b36c566fe2e', part: "close-button", exportparts: "base:close-button__base", class: "drawer__close", iconName: "light/xmark", label: "Close", onClick: () => this.requestClose('close-button') })))))), h("div", { key: '7ac9f1fc50efa2e13f73d5b15655ed585909a94d', part: "body", class: "drawer__body" }, h("slot", { key: '9f797d1de7cdcf634e2ee51d5e0bc055bae138df' })), h("nano-sticker", { key: '8807c8a2fc16f784f62e11c23edd607b757ab2b4', position: "bottom" }, h("footer", { key: 'a96da38ea84661627d2d905207f0c23e49962611', part: "footer", class: "drawer__footer" }, h("slot", { key: 'da0386d4942cf4ab05c605735a080321b6f87204', name: "footer", onSlotchange: this.handleSlotChange }))))))));
-    }
-    static get watchers() { return {
-        "hoist": ["handleHoistChange"],
-        "contained": ["handleNoModalChange"],
-        "open": ["handleOpenChange"]
-    }; }
-    static get style() { return NanoDrawerStyle0; }
-}, [1, "nano-drawer", {
-        "open": [1540],
-        "label": [513],
-        "placement": [513],
-        "contained": [516],
-        "noHeader": [516, "no-header"],
-        "storeId": [1, "store-id"],
-        "storeMethod": [1, "store-method"],
-        "noUserDismiss": [4, "no-user-dismiss"],
-        "hoist": [4],
-        "noDismiss": [32],
-        "hasFooter": [32],
-        "show": [64],
-        "hide": [64]
-    }, undefined, {
-        "hoist": ["handleHoistChange"],
-        "contained": ["handleNoModalChange"],
-        "open": ["handleOpenChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nano-drawer", "nano-icon", "nano-icon-button", "nano-sticker", "nano-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nano-drawer":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Drawer);
-            }
-            break;
-        case "nano-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "nano-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "nano-sticker":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "nano-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { D as Drawer, d as defineCustomElement$1 } from './drawer.js';
 
 const NanoDrawer = Drawer;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoDrawer, defineCustomElement };
-
-//# sourceMappingURL=nano-drawer.js.map

package/dist/components/nano-dropdown.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { D as Dropdown, d as defineCustomElement$1 } from './dropdown.js';
 
@@ -7,5 +7,3 @@ const NanoDropdown = Dropdown;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoDropdown, defineCustomElement };
-
-//# sourceMappingURL=nano-dropdown.js.map

package/dist/components/nano-field-validator.js

@@ -1,7 +1,7 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
 import { c as createStore } from './index2.js';
 import { t as transformTag, h } from './renderer.js';
 
@@ -245,7 +245,7 @@ const FieldValidator = /*@__PURE__*/ proxyCustomElement(class FieldValidator ext
     nanoInvalid;
     // private methods
     attachSlotObserver() {
-        if (this.mo)
+        if (this.mo || Build.isServer)
             return;
         const mo = (this.mo = new MutationObserver((_entries) => {
             const form = this.host.querySelector('form');
@@ -296,9 +296,7 @@ const FieldValidator = /*@__PURE__*/ proxyCustomElement(class FieldValidator ext
             if (field.tagName.toLowerCase() === transformTag('nano-checkbox') ||
                 ['radio', 'checkbox'].includes(field.type)) {
                 const cbs = this.allFields.filter((f) => this.getName(field) === this.getName(f));
-                if (cbs[0].type === 'radio' ||
-                    cbs[0].type === 'segment' ||
-                    cbs[0].type === 'segment-pill') {
+                if (cbs[0].type === 'radio' || cbs[0].type === 'segment') {
                     // single radio type control
                     cbs.forEach((cb) => {
                         if (this._store.state[fieldName] === cb.value)
@@ -363,9 +361,7 @@ const FieldValidator = /*@__PURE__*/ proxyCustomElement(class FieldValidator ext
             if (field.tagName.toLowerCase() === transformTag('nano-checkbox') ||
                 ['radio', 'checkbox'].includes(field.type)) {
                 const cb = field;
-                if (cb.type === 'radio' ||
-                    cb.type === 'segment' ||
-                    cb.type === 'segment-pill') {
+                if (cb.type === 'radio' || cb.type === 'segment') {
                     // radio type control - only one can be checked
                     if (cb.checked)
                         this._store.state[fieldName] = cb.value;
@@ -587,7 +583,7 @@ const FieldValidator = /*@__PURE__*/ proxyCustomElement(class FieldValidator ext
         this.submitForm();
     }
     connectedCallback() {
-        this.userForm = this.host.querySelector('form');
+        this.userForm = this.host.querySelector('form:not(.sc-nano-field-validator)');
         this._store = createStore({});
     }
     componentDidLoad() {
@@ -605,7 +601,7 @@ const FieldValidator = /*@__PURE__*/ proxyCustomElement(class FieldValidator ext
             this.activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
     }
     render() {
-        return (h(Host, { key: '0ef73112ee49ff435479e13de36f9097b501eb37', class: "nano-field-validator" }, this.userForm && h("slot", { key: 'f95060fd93124376d66412b53c51f529680ed2c8' }), !this.userForm && (h("form", { key: '05494f5dfdba499b092d12f39a87ebbabd402ea4', ref: (f) => (this.activeForm = f) }, h("slot", { key: 'bbf842a53b0945e07798dbce9bb928ee34045a63' })))));
+        return (h(Host, { key: 'b1951fc1c5a049a49106a5974e99d37282f0397d', class: "nano-field-validator" }, this.userForm && h("slot", { key: '1d90fc2ed42128f067aeb7b5b17a88865f77c556' }), !this.userForm && (h("form", { key: '46c933b7363a248de93550a576cbe121174ea68d', ref: (f) => (this.activeForm = f) }, h("slot", { key: '335fbe05634148c438a69a31e7f48debe80146bc' })))));
     }
     static get watchers() { return {
         "userForm": ["userFormChange"],
@@ -620,7 +616,7 @@ const FieldValidator = /*@__PURE__*/ proxyCustomElement(class FieldValidator ext
         "store": [2064],
         "payload": [2064],
         "showValidation": [2052, "show-validation"],
-        "validationState": [2064],
+        "validationState": [2064, "validation-state"],
         "extraFieldSelector": [1, "extra-field-selector"],
         "validation": [16],
         "submitted": [32],
@@ -655,5 +651,3 @@ const NanoFieldValidator = FieldValidator;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoFieldValidator, defineCustomElement };
-
-//# sourceMappingURL=nano-field-validator.js.map