Cleanup.

src/components/containers/Dialog/Dialog.module.scss

@@ -31,7 +31,7 @@
     background: var(--bk-dialog-background-color);
     color: bk.$theme-modal-text-default;
 
-    --dialog-display: flex; // Note: don't set the `display` directly, see `reset.scss`
+    --dialog-display: flex; // Note: don't set the `display` directly, leave it to `reset.scss`
     flex-direction: column;
 
     .bk-dialog__header {

src/components/overlays/ToastProvider/ToastProvider.module.scss

@@ -19,10 +19,6 @@
     transition-property: display, translate, opacity;
     transition-behavior: allow-discrete;
     transition-timing-function: var(--bk-toast-ease-entry);
-    --transition: all 0.7s allow-discrete;
-
-    --translate: 0px;
-    --opacity: 1;
 
     @starting-style {
       translate: 100%;

src/components/overlays/ToastProvider/ToastStore.ts

@@ -47,7 +47,7 @@ export class ToastStore {
     this.#options = {
       entryAnimationDelay: options.entryAnimationDelay ?? 400,
       exitAnimationDelay: options.exitAnimationDelay ?? 200,
-      autoCloseDelay: options.autoCloseDelay ?? 5000,
+      autoCloseDelay: options.autoCloseDelay ?? 8000,
     };
   }
 

src/components/util/overlays/popover/usePopover.ts

@@ -15,7 +15,7 @@ export type PopoverController = {
 };
 
 export type UsePopoverOptions = {
-  popoverBehavior?: undefined | React.HTMLAttributes<unknown>['popover'],
+  popoverBehavior?: undefined | React.HTMLAttributes<unknown>['popover'], // Default: 'auto'
 };
 
 export type PopoverProps<E extends HTMLElement> = {
@@ -30,7 +30,7 @@ export const usePopover = <E extends HTMLElement>(
   controller: PopoverController,
   options: undefined | UsePopoverOptions = {},
 ): PopoverProps<E> => {
-  const { popoverBehavior } = options ?? {};
+  const { popoverBehavior = 'auto' } = options ?? {};
 
   const popoverRef = React.useRef<E>(null);
 

src/util/time.ts

@@ -2,14 +2,14 @@
 |* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
 |* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-export type TimeoutHandle = number;//ReturnType<typeof window.setTimeout>; // FIXME: TS is using Node types
+export type TimeoutHandle = number; //ReturnType<typeof window.setTimeout>; // FIXME: TS infers Node's `Timeout` type
 
 export const delay = (timeMs: number) => {
   return new Promise(resolve => setTimeout(resolve, timeMs));
 };
 
 export const timeout = (timeMs: number) => {
-  const message = `The action took too long to complete`;
+  const message = 'The action took too long to complete';
   return new Promise((_, reject) => setTimeout(reject, timeMs, new Error(message)));
 };