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

package/dist/collection/components/dropdown/dropdown.js

@@ -1,17 +1,24 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
-import { getActiveElement } from "../../utils/active-element";
+import { focusInContainer } from "../../utils/active-element";
 import Popover from "../../utils/popover";
 import { getNearestTabbableElement } from "../../utils/tabbable";
 import { transformTag, h } from "../../utils/renderer";
 let dropDownIds = 0;
 /**
- * Dropdowns show additional content in a panel.
- * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).
+ * Dropdowns expose additional content that “drops down” in a panel.
+ *
  * @slot trigger - The dropdown's trigger.
  * @slot - The dropdown's content.
+ *
+ * @part base - The base element of the dropdown.
+ * @part trigger - The trigger wrapper of the dropdown.
+ * @part panel - The wrapper around the dropdown content.
+ *
+ * @version 1.0.0
+ * @status stable
  */
 export class Dropdown {
     dropdownId = `dropdown-${dropDownIds++}`;
@@ -23,6 +30,7 @@ export class Dropdown {
     positioner;
     accessibleTrigger;
     didLoad = false;
+    focusFirstEle = true;
     get menu() {
         return this.host.querySelector(transformTag('nano-menu'));
     }
@@ -69,7 +77,7 @@ export class Dropdown {
     /**
      * The distance in pixels from which to offset the panel away from its trigger.
      */
-    distance = 2;
+    distance = 5;
     /**
      * The distance in pixels from which to offset the panel along its trigger.
      */
@@ -180,34 +188,17 @@ export class Dropdown {
         this.ignoreOpenWatcher = false;
         document.removeEventListener('mousedown', this.handleDocumentMouseDown);
         document.removeEventListener('keydown', this.handleDocumentKeyDown);
-        if (this.accessibleTrigger && this.focusEleInDropDwn()) {
-            this.accessibleTrigger.focus();
-        }
-        setTimeout(() => {
-            if (!this.open && typeof this.positioner?.hidePopover === 'function') {
-                this.positioner.hidePopover();
-            }
-        }, 300);
     }
     // Private methods
-    /**
-     * Decides if the current active element or element
-     * connected to the current event is connected to the Dropdown
-     * @param e
-     * @returns whether the current focus is within the dropdown
-     */
-    focusEleInDropDwn(e) {
-        const activeElement = getActiveElement();
-        if (e && e.composedPath()?.length) {
-            const ddInPath = e.composedPath().includes(this.containingElement);
-            if (ddInPath)
-                return ddInPath;
-            return e.composedPath().includes(this.accessibleTrigger);
+    afterHide() {
+        if (typeof this.positioner?.hidePopover === 'function') {
+            this.positioner.hidePopover();
+        }
+        this.panel.scrollTop = 0;
+        if (this.accessibleTrigger &&
+            focusInContainer(this.containingElement, this.trigger)) {
+            this.accessibleTrigger.focus();
         }
-        return (activeElement &&
-            activeElement.closest(this.containingElement.tagName.toLowerCase()) ===
-                this.containingElement &&
-            activeElement !== this.accessibleTrigger);
     }
     togglePanel = () => {
         if (!this.autoOpen)
@@ -245,47 +236,68 @@ export class Dropdown {
             this.hide();
             return;
         }
-        // Close when tabbing results in the focus leaving the close element
+        // Close when tabbing results in the focus leaving the dropdown element
         if (event.key === 'Tab') {
             setTimeout(() => {
-                if (document.activeElement &&
-                    document.activeElement.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement) {
+                if (!focusInContainer(this.containingElement, this.trigger)) {
                     this.hide();
                     return;
                 }
             });
         }
-        // If a menu is present, focus on it when certain keys are pressed
-        if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
-            // must have menu item, must have pressed down, must be open and must not have focus within dd
-            if (!this.open || this.focusEleInDropDwn(event))
+        else {
+            // If a menu is present, focus on it when certain keys are pressed
+            if (this.menu &&
+                ((this.placement.match(/bottom|top/) &&
+                    ['ArrowDown', 'ArrowUp', ' '].includes(event.key)) ||
+                    (this.placement.match(/right|left/) &&
+                        ['ArrowRight', 'ArrowLeft', ' '].includes(event.key)))) {
+                // must have menu item, must have pressed down, must be open and must not have focus within dd
+                if (!this.open ||
+                    focusInContainer(this.containingElement, this.trigger, event)) {
+                    if (this.containingElement.tagName === 'NANO-DROPDOWN' &&
+                        this.containingElement.placement.match(/right|left/) &&
+                        this.trigger.getRootNode()?.host?.tagName ===
+                            'NANO-DROPDOWN') {
+                        // if the dropdown is inside another dropdown, we need to close the inner one
+                        this.hide();
+                        return;
+                    }
+                    return;
+                }
+                event.preventDefault();
+                this.menu.setFocus();
+                this.focusFirstEle = true;
                 return;
-            event.preventDefault();
-            this.menu.setFocus();
-            return;
-        }
-        // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)
-        const ePath = event.composedPath();
-        if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {
-            this.menu.dispatchEvent(new KeyboardEvent(event.type, event));
-            return;
+            }
+            // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)
+            const ePath = event.composedPath();
+            if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {
+                this.menu.dispatchEvent(new KeyboardEvent(event.type, event));
+                return;
+            }
         }
     }
     handleDocumentMouseDown(event) {
         // Close when clicking outside of the close element
-        if (!this.focusEleInDropDwn(event)) {
+        if (!focusInContainer(this.containingElement, this.trigger, event)) {
             this.hide();
             return;
         }
     }
     handleTriggerKeyDown = (event) => {
         // Open the panel when pressing down or up while focused on the trigger
-        if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {
+        if ((this.placement.match(/bottom|top/) &&
+            ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) ||
+            (this.placement.match(/right|left/) &&
+                ['ArrowRight', 'ArrowLeft', ' ', 'Enter'].includes(event.key))) {
             this.show();
             event.preventDefault();
             event.stopPropagation();
-            if (this.menu)
+            if (this.menu) {
                 this.menu.setFocus();
+                this.focusFirstEle = true;
+            }
         }
     };
     handleTriggerSlotChange = () => {
@@ -310,10 +322,14 @@ export class Dropdown {
             onAfterShow: () => this.nanoAfterShow.emit(),
             onTransitionEnd: () => {
                 if (!this.open) {
-                    this.panel.scrollTop = 0;
+                    this.afterHide();
                 }
                 else if (this.menu) {
                     this.menu.showActiveElement();
+                    if (this.focusFirstEle) {
+                        this.menu.setFocus();
+                        this.focusFirstEle = false;
+                    }
                 }
             },
         });
@@ -341,12 +357,12 @@ export class Dropdown {
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: '85c1bf918fa0800659aaab7d64c6832134d9b003', class: "nano-dropdown" }, h("div", { key: '9cc1b9eba8d8fea321f85c71cdd5fef1d823d03e', part: "base", id: this.dropdownId, class: {
+        return (h(Host, { key: 'dd4615946390485d5ad05ff0fbf3714474c38b9b', class: "nano-dropdown" }, h("div", { key: '9a60642705315c41efaad525f087397b458caf2a', part: "base", id: this.dropdownId, class: {
                 dropdown: true,
                 'dropdown--open': this.open,
-            } }, h("span", { key: '06975a344a9d5760057a1531dd43e4dea9a6eed9', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: '6a5adccd87e2fa3c763cb2bdadff0aa4323c3da3', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '1a887678dd9cc47a8192060478a5d7acdb06600e', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'c81fc552c814c87e2df44bf8022c38729069240b', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined }, this.dialogTitle && (h("span", { key: '6d38bbf3d0d4411190dac237f2daa0815fafa420', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
+            } }, h("span", { key: '861f59e5d50c956d53ce75d16ca5430bfb339d26', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: '55e3a353ffd07ca586468bbc213d415484e4427f', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '3ac2f6fde7117cf7421ac53e1786c4da59fd4e6c', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'ff5d8d1248c1434aad2c8f042f208ff3d418f1a4', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined }, this.dialogTitle && (h("span", { key: 'e71c3b8e09d6b8cf359470872a70da8794a221db', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
                 ? undefined
-                : 'polite' }, this.dialogTitle)), h("slot", { key: '8ad35ae3a28c6a057d1cf408e9256605759916ba' }))))));
+                : 'polite' }, this.dialogTitle)), h("slot", { key: 'a9349e44064f7bbd4b32b3658c203575fe39c804' }))))));
     }
     static get is() { return "nano-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -364,6 +380,7 @@ export class Dropdown {
         return {
             "autoOpen": {
                 "type": "boolean",
+                "attribute": "auto-open",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -378,12 +395,12 @@ export class Dropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-open",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -398,12 +415,12 @@ export class Dropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "closeOnSelect": {
                 "type": "boolean",
+                "attribute": "close-on-select",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -418,12 +435,12 @@ export class Dropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-on-select",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "containingElement": {
                 "type": "unknown",
+                "attribute": "containing-element",
                 "mutable": true,
                 "complexType": {
                     "original": "HTMLElement",
@@ -446,6 +463,7 @@ export class Dropdown {
             },
             "tetherTo": {
                 "type": "unknown",
+                "attribute": "tether-to",
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLElement",
@@ -469,6 +487,7 @@ export class Dropdown {
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "PopoverPlacement",
@@ -489,12 +508,12 @@ export class Dropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'bottom-start'"
             },
             "distance": {
                 "type": "number",
+                "attribute": "distance",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -509,12 +528,12 @@ export class Dropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "distance",
                 "reflect": false,
-                "defaultValue": "2"
+                "defaultValue": "5"
             },
             "skidding": {
                 "type": "number",
+                "attribute": "skidding",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -529,12 +548,12 @@ export class Dropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "skidding",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "hoist": {
                 "type": "boolean",
+                "attribute": "hoist",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -549,12 +568,12 @@ export class Dropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hoist",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "dialogTitle": {
                 "type": "string",
+                "attribute": "dialog-title",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -569,11 +588,11 @@ export class Dropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dialog-title",
                 "reflect": false
             },
             "eventType": {
                 "type": "unknown",
+                "attribute": "event-type",
                 "mutable": false,
                 "complexType": {
                     "original": "EventEmitter",
@@ -582,7 +601,7 @@ export class Dropdown {
                         "EventEmitter": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.27.2/node_modules/@stencil/core/internal/stencil-core/index.d.ts::EventEmitter"
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.35.1/node_modules/@stencil/core/internal/stencil-core/index.d.ts::EventEmitter"
                         }
                     }
                 },
@@ -745,4 +764,3 @@ export class Dropdown {
             }];
     }
 }
-//# sourceMappingURL=dropdown.js.map

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

@@ -1,16 +1,14 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { Host, } from "@stencil/core";
+import { Host, Build, } from "@stencil/core";
 import { createStore } from "@stencil/store";
 import { h, transformTag } from "../../utils/renderer";
 /**
- * A toolbox for `nano-...` form fields and form validation.
- * - Easy to add validation across field dependencies - e.g. "When Field1 contains '123' Field2 must contain '456'"
- * - Easy access to whole form and individual field validity states
- * - Easy access to form data payload
- * = Access to 2-way, data bound reactive store
- * - Scroll to invalid field on submit
+ * A toolbox to expose a form's data model and validation state
+ *
+ * @version 3.0.0
+ * @status stable
  */
 export class FieldValidator {
     // Internal State
@@ -246,7 +244,7 @@ export class FieldValidator {
     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');
@@ -297,9 +295,7 @@ export class FieldValidator {
             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)
@@ -364,9 +360,7 @@ export class FieldValidator {
             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;
@@ -588,7 +582,7 @@ export class FieldValidator {
         this.submitForm();
     }
     connectedCallback() {
-        this.userForm = this.host.querySelector('form');
+        this.userForm = this.host.querySelector('form:not(.sc-nano-field-validator)');
         this._store = createStore({});
     }
     componentDidLoad() {
@@ -606,7 +600,7 @@ export class FieldValidator {
             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 is() { return "nano-field-validator"; }
     static get encapsulation() { return "scoped"; }
@@ -614,6 +608,7 @@ export class FieldValidator {
         return {
             "validateOn": {
                 "type": "string",
+                "attribute": "validate-on",
                 "mutable": true,
                 "complexType": {
                     "original": "'dirty' | 'submit' | 'submitThenDirty'",
@@ -628,12 +623,12 @@ export class FieldValidator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validate-on",
                 "reflect": false,
                 "defaultValue": "'submitThenDirty'"
             },
             "scrollToInvalid": {
                 "type": "boolean",
+                "attribute": "scroll-to-invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -648,12 +643,12 @@ export class FieldValidator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "scroll-to-invalid",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "dirty": {
                 "type": "boolean",
+                "attribute": "dirty",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -671,12 +666,12 @@ export class FieldValidator {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "dirty",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "valid": {
                 "type": "boolean",
+                "attribute": "valid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -694,11 +689,11 @@ export class FieldValidator {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "valid",
                 "reflect": true
             },
             "store": {
                 "type": "unknown",
+                "attribute": "store",
                 "mutable": false,
                 "complexType": {
                     "original": "ObservableMap<ValidatorValueStore>",
@@ -707,7 +702,7 @@ export class FieldValidator {
                         "ObservableMap": {
                             "location": "import",
                             "path": "@stencil/store",
-                            "id": "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@4.27.2/node_modules/@stencil/store/dist/index.d.ts::ObservableMap"
+                            "id": "../../node_modules/.pnpm/@stencil+store@2.1.2_@stencil+core@4.35.1/node_modules/@stencil/store/dist/index.d.ts::ObservableMap"
                         },
                         "ValidatorValueStore": {
                             "location": "import",
@@ -727,6 +722,7 @@ export class FieldValidator {
             },
             "payload": {
                 "type": "unknown",
+                "attribute": "payload",
                 "mutable": false,
                 "complexType": {
                     "original": "ValidatorValueStore",
@@ -753,6 +749,7 @@ export class FieldValidator {
             },
             "showValidation": {
                 "type": "boolean",
+                "attribute": "show-validation",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -770,11 +767,11 @@ export class FieldValidator {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "show-validation",
                 "reflect": false
             },
             "validationState": {
                 "type": "unknown",
+                "attribute": "validation-state",
                 "mutable": false,
                 "complexType": {
                     "original": "ValidationState[]",
@@ -811,6 +808,7 @@ export class FieldValidator {
             },
             "extraFieldSelector": {
                 "type": "string",
+                "attribute": "extra-field-selector",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -825,12 +823,12 @@ export class FieldValidator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "extra-field-selector",
                 "reflect": false,
                 "defaultValue": "'input, select, textarea'"
             },
             "validation": {
                 "type": "unknown",
+                "attribute": "validation",
                 "mutable": false,
                 "complexType": {
                     "original": "(\n    field: string,\n    value: string,\n    fields: ValidatorValueStore\n  ) => { [errorMsg: string]: { fields?: string[]; valid?: boolean } }",
@@ -1081,4 +1079,3 @@ export class FieldValidator {
             }];
     }
 }
-//# sourceMappingURL=field-validator.js.map

package/dist/collection/components/file-upload/file-upload-list.js

@@ -1,4 +1,3 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-//# sourceMappingURL=file-upload-list.js.map

package/dist/collection/components/file-upload/file-upload.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,7 +26,17 @@
 [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 --invalid-msg-color: Default value var(--nano-color-danger, #ef4135);
    * @prop --invalid-msg-font-size: Default value var(--nano-input-help-font-size, 0.75em);
@@ -100,14 +114,12 @@
   color: var(--label-color--invalid);
 }
 .file-upload__input {
-  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;
 }
 .file-upload__error, .file-upload__help, .file-upload__more, .file-upload__label {
   display: block;
@@ -329,7 +341,7 @@
 .file-upload__button:hover:not(.button--disabled) {
   box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
 }
-.file-upload__button:active:not(.button--disabled):not(:disabled) {
+.file-upload__button:active:not(.button--disabled, :disabled) {
   box-shadow: none;
 }
 .file-upload__button--disabled, .file-upload__button:disabled {
@@ -338,11 +350,11 @@
 .file-upload__button--disabled:hover, .file-upload__button:disabled:hover {
   cursor: default;
 }
-.file-upload__button:hover:not(.button--disabled):not(:disabled), .file-upload__button.button--active {
+.file-upload__button:hover:not(.button--disabled, :disabled), .file-upload__button.button--active {
   background-color: var(--nano-color-primary-shade, #00637f);
   color: var(--btn-text);
 }
-.file-upload__button:hover:not(.button--disabled):not(:disabled).button--keyline, .file-upload__button.button--active.button--keyline {
+.file-upload__button:hover:not(.button--disabled, :disabled).button--keyline, .file-upload__button.button--active.button--keyline {
   background-color: var(--btn-bg);
   color: var(--btn-text);
 }
@@ -358,7 +370,7 @@
   color: var(--btn-bg);
   border-color: var(--btn-bg);
 }
-.file-upload__button.button--keyline:hover:not(.button--disabled):not(:disabled), .file-upload__button.button--keyline:not(:focus):not(.button--focus), .file-upload__button.button--keyline.button--active {
+.file-upload__button.button--keyline:hover:not(.button--disabled, :disabled), .file-upload__button.button--keyline:not(:focus, .button--focus), .file-upload__button.button--keyline.button--active {
   box-shadow: none;
 }
 :host([disabled]:not([disabled=false])) .file-upload__button {