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

package/dist/collection/components/drawer/drawer.js

@@ -1,19 +1,26 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 import Modal from "../../utils/modal";
 import { lockBodyScrolling, unlockBodyScrolling } from "../../utils/scroll";
-import { hasSlot } from "../../utils/slot";
+import { HasSlotController } from "../../utils/slot";
 import { waitForEvent } from "../../utils/events";
 import { ComponentStore, } from "../../utils/store/component-store";
+import { getActiveElement } from "../../utils/active-element";
+import { drag } from "../../utils/drag";
+import { getTabbableElements } from "../../utils/tabbable";
 /**
  * Drawers slide in from a container to expose additional options and information.
  *
+ * @version 5.0.0
+ * @status stable
+ *
  * @slot - The drawer's main content
  * @slot label - The drawer's label. Alternatively, you can use the `label` attribute
  * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`
+ * @slot handle - The drawer's resize handle, used to resize the drawer when `resizable` is set
  * @slot footer - The drawer's footer, usually one or more buttons representing various options
  *
  * @part base - The component's base wrapper
@@ -21,6 +28,7 @@ import { ComponentStore, } from "../../utils/store/component-store";
  * @part panel - The drawer's panel (where the drawer and its content are rendered)
  * @part header - The drawer's header. This element wraps the title and header actions
  * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`
+ * @part handle - The resize handle, used to resize the drawer when `resizable` is set
  * @part title - The drawer's title
  * @part close-button - The close button, an `<nano-icon-button>`
  * @part close-button__base - The close button's exported `base` part
@@ -34,6 +42,7 @@ export class Drawer {
     drawer;
     overlay;
     modal;
+    slotCtrl = new HasSlotController(this, 'footer');
     get panel() {
         return this._panel;
     }
@@ -48,7 +57,7 @@ export class Drawer {
     }
     _panel;
     noDismiss = false;
-    hasFooter;
+    isOpen = false;
     // Public API
     /**
      * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
@@ -80,8 +89,13 @@ export class Drawer {
     noUserDismiss = false;
     /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */
     hoist = false;
+    /** Makes the drawer resizable */
+    resizable = false;
     handleHoistChange() {
-        if (!this.hoist || Array.from(document.body.children).includes(this.host))
+        // if native popover is supported then bail as this is not required
+        if ('popover' in globalThis.HTMLElement.prototype ||
+            !this.hoist ||
+            Array.from(document.body.children).includes(this.host))
             return;
         document.body.prepend(this.host);
     }
@@ -104,7 +118,7 @@ export class Drawer {
      * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
      * destructive behavior such as data loss.
      */
-    nanoRquestClose;
+    nanoRequestClose;
     /**
      * Shows the drawer.
      * @returns a promise that resolves when the drawer has finished opening
@@ -126,7 +140,7 @@ export class Drawer {
         return waitForEvent(this.host, 'nanoAfterHide');
     }
     requestClose(source) {
-        const nanoRequestClose = this.nanoRquestClose.emit({ source });
+        const nanoRequestClose = this.nanoRequestClose.emit({ source });
         if (nanoRequestClose.defaultPrevented || this.noUserDismiss) {
             this.noDismiss = true;
             setTimeout(() => (this.noDismiss = false), 250);
@@ -138,6 +152,9 @@ export class Drawer {
     handleNoModalChange() {
         if (this.open && !this.contained) {
             this.modal.activate();
+            if (typeof this.drawer?.showPopover === 'function') {
+                this.drawer.showPopover();
+            }
             lockBodyScrolling(this.host);
         }
         if (this.open && this.contained) {
@@ -150,40 +167,37 @@ export class Drawer {
             // Show
             this.nanoShow.emit();
             this.addOpenListeners();
-            this.originalTrigger = document.activeElement;
+            this.originalTrigger = getActiveElement();
             // Lock body scrolling only if the drawer isn't contained
             if (!this.contained) {
                 this.modal.activate();
+                if (typeof this.drawer?.showPopover === 'function') {
+                    this.drawer.showPopover();
+                }
                 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.
+            // drawer's animation to jitter.
             const autoFocusTarget = this.host.querySelector('[autofocus]');
             if (autoFocusTarget) {
                 autoFocusTarget.removeAttribute('autofocus');
             }
             this.drawer.hidden = false;
+            this.isOpen = true;
             // 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 });
-                    }
+                    const firstTabbable = autoFocusTarget ||
+                        getTabbableElements(this.host, true, true, true)[0] ||
+                        this.panel;
+                    firstTabbable.focus({ preventScroll: true });
                 }
                 // Restore the autofocus attribute
                 if (autoFocusTarget) {
                     autoFocusTarget.setAttribute('autofocus', '');
                 }
             });
-            this.nanoAfterShow.emit();
             return;
         }
         // Hide
@@ -194,10 +208,13 @@ export class Drawer {
             unlockBodyScrolling(this.host);
         }
         // Restore focus to the original trigger
-        const trigger = this.originalTrigger;
-        if (typeof trigger?.focus === 'function') {
-            setTimeout(() => trigger.focus());
-        }
+        const returnFocus = this.originalTrigger && typeof this.originalTrigger.focus === 'function'
+            ? this.originalTrigger
+            : document.body;
+        returnFocus.focus();
+        requestAnimationFrame(() => {
+            this.isOpen = false;
+        });
     }
     // Event Handling
     addOpenListeners() {
@@ -207,7 +224,7 @@ export class Drawer {
         document.removeEventListener('keydown', this.handleDocumentKeyDown);
     }
     handleDocumentKeyDown = (event) => {
-        // Contained drawers aren't modal and don't response to the escape key
+        // Contained drawers aren't modal and don't respond to the escape key
         if (this.contained) {
             return;
         }
@@ -226,15 +243,74 @@ export class Drawer {
                 // 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
+                if (!this.contained && typeof this.drawer?.hidePopover === 'function') {
+                    this.drawer.hidePopover();
+                }
                 this.nanoAfterHide.emit();
+                return;
+            }
+            this.nanoAfterShow.emit();
+        }
+    };
+    get panelSize() {
+        const vertical = ['top', 'bottom'].includes(this.placement);
+        return vertical ? this.panel.offsetHeight : this.panel.offsetWidth;
+    }
+    set panelSize(size) {
+        const prop = ['top', 'bottom'].includes(this.placement)
+            ? 'blockSize'
+            : 'inlineSize';
+        this.panel.style[prop] = `clamp(var(--min-size), ${size + 'px'}, var(--max-size))`;
+    }
+    handleKeyDown = (event) => {
+        if ([
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowDown',
+            'Home',
+            'End',
+        ].includes(event.key)) {
+            let newPosition = this.panelSize;
+            const flip = this.placement === 'end' || this.placement === 'bottom';
+            const incr = (event.shiftKey ? 30 : 5) * (flip ? -1 : 1);
+            const vertical = ['top', 'bottom'].includes(this.placement);
+            event.preventDefault();
+            if ((event.key === 'ArrowLeft' && !vertical) ||
+                (event.key === 'ArrowUp' && vertical)) {
+                newPosition -= incr;
+            }
+            if ((event.key === 'ArrowRight' && !vertical) ||
+                (event.key === 'ArrowDown' && vertical)) {
+                newPosition += incr;
+            }
+            if (event.key === 'Home') {
+                newPosition = 0;
+            }
+            if (event.key === 'End') {
+                newPosition = 10000;
+            }
+            this.panelSize = newPosition;
         }
     };
-    handleSlotChange = () => {
-        this.hasFooter = hasSlot(this.host, 'footer');
+    handleDrag = (e) => {
+        // Prevent text selection when dragging
+        e.preventDefault();
+        const vertical = ['top', 'bottom'].includes(this.placement);
+        const flip = this.placement === 'end' || this.placement === 'bottom';
+        const initDimension = vertical
+            ? this.panel.offsetHeight
+            : this.panel.offsetWidth;
+        drag(this.host, {
+            relative: true,
+            initialEvent: e,
+            onMove: (x, y) => {
+                let movedPixels = vertical ? y : x;
+                if (flip)
+                    movedPixels *= -1;
+                this.panelSize = initDimension + movedPixels;
+            },
+        });
     };
     // Component Lifecycle
     connectedCallback() {
@@ -245,36 +321,30 @@ export class Drawer {
         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);
-            }
+            this.handleNoModalChange();
+            this.show();
         }
     }
     render() {
-        return (h(Host, { key: '3993edab973a4e83921ef48b3a856eab71314995', class: "nano-drawer" }, h("div", { key: '81b617363f43048bb8e692838304641ed431e716', ref: (ele) => (this.drawer = ele), part: "base", class: {
+        return (h(Host, { key: '487ea65e478b81f58f3302110777a756e5dcf7d4', class: "nano-drawer" }, h("div", { key: '12feebdc459f4643d41d5d2dc19643c13c0d9809', 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-footer': this.slotCtrl.has('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
+            }, popover: !this.contained ? 'manual' : undefined }, h("div", { key: 'e38b14383dadea34b11db92d6871518b82192859', ref: (ele) => (this.overlay = ele), part: "overlay", class: "drawer__overlay", onClick: () => this.requestClose('overlay'), tabindex: "-1" }), h("div", { key: '4a934cc84b9d4ff06bff84feaf75ac8d463d2d5f', ref: (ele) => (this.panel = ele), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.isOpen ? 'false' : 'true', "aria-label": this.noHeader ? this.label : undefined, "aria-labelledby": !this.noHeader ? 'title' : undefined, tabindex: "0" }, this.resizable && (h("div", { key: '7c8d1c12356974522a698d69ff2e9015dd60ae92', part: "resize-handle", class: "drawer__resize-handle", tabindex: "0", role: "separator", "aria-label": "Resize", onKeyDown: this.handleKeyDown, onMouseDown: this.handleDrag, onTouchStart: this.handleDrag }, h("slot", { key: '48e2497abc58310beb96648b4cc44d80ae28431f', name: "handle" }, ['start', 'end'].includes(this.placement) ? (h("nano-icon", { slot: "handle", name: "solid/grip-dots-vertical" })) : (h("nano-icon", { slot: "handle", name: "solid/grip-dots" }))))), h("div", { key: '425d5eb60035fb44b7c3ea4ddf4f338d429893ab', class: "drawer__main" }, !this.noHeader && (h("nano-sticker", { key: '1f8eac374619dd3b607862254c2573e19963374c' }, h("div", { key: '070d62dd270a2040f32e509ec0a2a5eb8c739367', part: "header", class: "drawer__header" }, h("div", { key: 'f3d0155227515ad548ee70e65a2213711dc13a3a', part: "title", class: "drawer__title", id: "title" }, h("slot", { key: '61410c8918849984dd31854a042ec3209c1ca175', 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 }))))))));
+            : String.fromCharCode(65279))), h("div", { key: '262e4616c018e346596b089968f6af8b4a39436a', part: "header-actions", class: "drawer__header-actions" }, h("slot", { key: '81245d6449637ca85f631d2065b173dfa3b6c663', name: "header-actions" }), !this.noUserDismiss && (h("nano-icon-button", { key: '0b88624e93df33a23f3f132d05d5f8fbc418f520', part: "close-button", exportparts: "base:close-button__base", class: "drawer__close", iconName: "light/xmark", label: "Close", onClick: () => this.requestClose('close-button') })))))), h("div", { key: '50a441f9c9417ba4fa29f30b63cc54eaf5618a98', part: "body", class: "drawer__body" }, h("slot", { key: '478310362285c4ea2fcde71838da527640bf09da' })), h("nano-sticker", { key: 'bb6c4a2c6ce89a03270daaf194b0a78914437c2b', position: "bottom" }, h("footer", { key: 'efbb6ac1f46e3bce948a236f01e26adc63b628cc', part: "footer", class: "drawer__footer" }, h("slot", { key: '5a3d95c01ce45c51715d89e4cc3064f337d59b23', name: "footer" }))))))));
     }
     static get is() { return "nano-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -292,6 +362,7 @@ export class Drawer {
         return {
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -306,12 +377,12 @@ export class Drawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -326,11 +397,11 @@ export class Drawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": true
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'end' | 'bottom' | 'start'",
@@ -345,12 +416,12 @@ export class Drawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": true,
                 "defaultValue": "'end'"
             },
             "contained": {
                 "type": "boolean",
+                "attribute": "contained",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -365,12 +436,12 @@ export class Drawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "contained",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "noHeader": {
                 "type": "boolean",
+                "attribute": "no-header",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -385,12 +456,12 @@ export class Drawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-header",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "storeId": {
                 "type": "string",
+                "attribute": "store-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -405,11 +476,11 @@ export class Drawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "store-id",
                 "reflect": false
             },
             "storeMethod": {
                 "type": "string",
+                "attribute": "store-method",
                 "mutable": false,
                 "complexType": {
                     "original": "StorageMethods",
@@ -430,12 +501,12 @@ export class Drawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "store-method",
                 "reflect": false,
                 "defaultValue": "'url-hash'"
             },
             "noUserDismiss": {
                 "type": "boolean",
+                "attribute": "no-user-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -450,12 +521,12 @@ export class Drawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-user-dismiss",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "hoist": {
                 "type": "boolean",
+                "attribute": "hoist",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -470,7 +541,26 @@ export class Drawer {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hoist",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "resizable": {
+                "type": "boolean",
+                "attribute": "resizable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the drawer resizable"
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -479,7 +569,7 @@ export class Drawer {
     static get states() {
         return {
             "noDismiss": {},
-            "hasFooter": {}
+            "isOpen": {}
         };
     }
     static get events() {
@@ -559,8 +649,8 @@ export class Drawer {
                     "references": {}
                 }
             }, {
-                "method": "nanoRquestClose",
-                "name": "nanoRquestClose",
+                "method": "nanoRequestClose",
+                "name": "nanoRequestClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -633,4 +723,3 @@ export class Drawer {
             }];
     }
 }
-//# sourceMappingURL=drawer.js.map

package/dist/collection/components/dropdown/dropdown.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@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 {
@@ -22,30 +26,42 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@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 {
   /**
    * @prop --width: width of the dropdown. Defaults to 'auto'
-   * @prop --border: Defaults to var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)))
-   * @prop --border-radius: Defaults to var(--nano-layer-bg, #fff);
-   * @prop --background: Defaults to var(--nano-layer-bg, #fff);
-   * @prop --padding: padding of the drop down. Default to '10px 0';
-   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;
-   * @prop --dropdown-z-index: Defaults to var(--nano-layer-index-dropdown, 300);
-   * @prop --min-width: Defaults to 0;
-   * @prop --box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
-   * @prop --max-menu-height: max height of a slotted menu. defaults to 50vh
+   * @prop --border: Defaults to 'none';
+   * @prop --border-radius: Defaults to '0px';
+   * @prop --background: Defaults to 'var(--nano-color-neutral-75)';
+   * @prop --padding: padding of the drop down. Default to 'var(--nano-spacing-sm) 0';
+   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overridden;
+   * @prop --dropdown-z-index: Defaults to 'var(--nano-z-index-dropdown)';
+   * @prop --min-width: Defaults to '0';
+   * @prop --max-height: maximum height of the dropdown panel. Defaults to 'none';
+   * @prop --box-shadow: Defaults to 'var(--nano-shadow-l1)';
+   * @prop --menu-height: max height of a slotted menu. Defaults to '50vh';
    */
   --width: auto;
-  --border: var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));
-  --border-radius: var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));
-  --background: var(--nano-layer-bg, #fff);
-  --padding: 10px 0;
+  --border: none;
+  --border-radius: 0px;
+  --background: var(--nano-color-neutral-75);
+  --padding: var(--nano-spacing-sm) 0;
   --overflow: auto;
-  --dropdown-z-index: var(--nano-layer-index-dropdown, 300);
+  --dropdown-z-index: var(--nano-z-index-dropdown);
   --min-width: 0;
-  --box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
-  --menu-height: var(--max-menu-height, 50vh);
-  display: flex;
+  --max-height: none;
+  --box-shadow: var(--nano-shadow-l1);
+  --menu-height: calc(100vh - 200px);
+  display: inline-block;
 }
 
 .dropdown {
@@ -85,9 +101,10 @@
   color: currentcolor;
   box-shadow: var(--box-shadow);
   opacity: 0;
-  transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;
+  transition: var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;
   min-block-size: 20px;
   overflow: var(--overflow);
+  max-block-size: var(--max-height);
   box-sizing: content-box !important;
 }
 .dropdown__panel.loading {
@@ -107,12 +124,10 @@
   max-block-size: var(--menu-height);
 }
 .dropdown__accessible-title {
-  clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   block-size: 1px;
-  inline-size: 1px;
-  margin: -1px;
   overflow: hidden;
-  padding: 0;
   position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
 }