js-draw 1.12.0 → 1.13.2

package/dist/mjs/localizations/es.mjs

@@ -1,5 +1,5 @@
 import  { defaultEditorLocalization }  from '../localization.mjs';
-// A partial Spanish localization, created with /scripts/markdownTranslationFormToTs.ts
+// A partial Spanish localization
 const localization = {
     ...defaultEditorLocalization,
     pen: 'Lapiz',
@@ -7,6 +7,8 @@ const localization = {
     select: 'Selecciona',
     handTool: 'Mover',
     image: 'Imagen',
+    inputAltText: 'Texto alternativo',
+    resetImage: 'Reiniciar',
     chooseFile: 'Seleccionar archivo',
     cancel: 'Cancelar',
     resetView: 'Reiniciar vista',
@@ -28,7 +30,9 @@ const localization = {
     backgroundColor: 'Color de fondo',
     imageWidthOption: 'Ancho',
     imageHeightOption: 'Alto',
+    enableAutoresizeOption: 'Redimensionar automático',
     toggleOverflow: 'Más',
+    about: 'Acerca de',
     touchPanning: 'Mover la pantalla con un dedo',
     roundedTipPen: 'Lapiz Redondeado',
     arrowPen: 'Flecha',
@@ -44,10 +48,11 @@ const localization = {
     colorChangedAnnouncement: (color) => { return `Color fue cambiado a ${color}`; },
     imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`,
     imageLoadError: (message) => `Error cargando imagen: ${message}`,
-    penTool: (penId) => { return `Lapiz ${penId}`; },
+    penTool: (penId) => `Lapiz ${penId}`,
     selectionTool: 'Selecciona',
     eraserTool: 'Borrador',
     touchPanTool: 'Instrumento de mover la pantalla con un dedo',
+    undoRedoTool: 'Deshace/rehace',
     pipetteTool: 'Seleccione un color de la pantalla',
     keyboardPanZoom: 'Mover la pantalla con el teclado',
     textTool: 'Texto',
@@ -55,29 +60,13 @@ const localization = {
     findLabel: 'Buscar',
     toNextMatch: 'Próxima',
     closeDialog: 'Cerrar',
-    focusedFoundText: (matchIdx, totalMatches) => `Viewing match ${matchIdx} of ${totalMatches}`,
     anyDevicePanning: 'Mover la pantalla con todo dispotivo',
     copied: (count, description) => `Copied ${count} ${description}`,
     pasted: (count, description) => `Pasted ${count} ${description}`,
-    toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
-    toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
-    transformedElements: (elemCount) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'}`,
-    resizeOutputCommand: (newSize) => `Resized image to ${newSize.w}x${newSize.h}`,
-    addElementAction: (componentDescription) => `Added ${componentDescription}`,
-    eraseAction: (componentDescription, numElems) => `Erased ${numElems} ${componentDescription}`,
-    duplicateAction: (componentDescription, numElems) => `Duplicated ${numElems} ${componentDescription}`,
-    unionOf: (actionDescription, actionCount) => `Union: ${actionCount} ${actionDescription}`,
-    inverseOf: (actionDescription) => `Inverse of ${actionDescription}`,
-    rotatedBy: (degrees) => `Rotated by ${Math.abs(degrees)} degrees ${degrees < 0 ? 'clockwise' : 'counter-clockwise'}`,
-    selectedElements: (count) => `Selected ${count} element${count === 1 ? '' : 's'}`,
-    filledBackgroundWithColor: (color) => `Filled background (${color})`,
-    text: (text) => `Text object: ${text}`,
-    imageNode: (label) => `Image: ${label}`,
-    restyledElement: (elementDescription) => `Restyled ${elementDescription}`,
-    pathNodeCount: (count) => `There are ${count} visible path objects.`,
-    textNodeCount: (count) => `There are ${count} visible text nodes.`,
-    imageNodeCount: (nodeCount) => `There are ${nodeCount} visible image nodes.`,
-    textNode: (content) => `Text: ${content}`,
+    toolEnabledAnnouncement: (toolName) => `${toolName} fue activado`,
+    toolDisabledAnnouncement: (toolName) => `${toolName} fue desactivado`,
+    resizeOutputCommand: (newSize) => `Tamaño de imagen fue cambiado a ${newSize.w}x${newSize.h}`,
+    eraseAction: (componentDescription, numElems) => `Borrado: ${numElems} ${componentDescription}`,
     rerenderAsText: 'Redibuja la pantalla al texto',
     loading: (percentage) => `Cargando: ${percentage}%...`,
     imageEditor: 'Editor de dibujos',

package/dist/mjs/rendering/Display.d.ts

@@ -55,6 +55,8 @@ export default class Display {
      * @internal
      */
     setDevicePixelRatio(dpr: number): Promise<void> | undefined;
+    /** @internal */
+    getDevicePixelRatio(): number;
     /**
      * Rerenders the text-based display.
      * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.

package/dist/mjs/rendering/Display.mjs

@@ -199,6 +199,10 @@ export default class Display {
         }
         return undefined;
     }
+    /** @internal */
+    getDevicePixelRatio() {
+        return this.devicePixelRatio;
+    }
     /**
      * Rerenders the text-based display.
      * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.

package/dist/mjs/toolbar/DropdownToolbar.d.ts

@@ -21,12 +21,14 @@ import AbstractToolbar, { SpacerOptions } from './AbstractToolbar';
  * });
  * ```
  *
+ * Returns a subclass of {@link AbstractToolbar}.
+ *
  * @see
  * - {@link makeEdgeToolbar}
  * - {@link AbstractToolbar.addSaveButton}
  * - {@link AbstractToolbar.addExitButton}
  */
-export declare const makeDropdownToolbar: (editor: Editor) => AbstractToolbar;
+export declare const makeDropdownToolbar: (editor: Editor) => DropdownToolbar;
 export default class DropdownToolbar extends AbstractToolbar {
     protected container: HTMLElement;
     private resizeObserver;

package/dist/mjs/toolbar/DropdownToolbar.mjs

@@ -21,6 +21,8 @@ import  { toolbarCSSPrefix }  from './constants.mjs';
  * });
  * ```
  *
+ * Returns a subclass of {@link AbstractToolbar}.
+ *
  * @see
  * - {@link makeEdgeToolbar}
  * - {@link AbstractToolbar.addSaveButton}

package/dist/mjs/toolbar/EdgeToolbar.mjs

@@ -136,8 +136,10 @@ export default class EdgeToolbar extends AbstractToolbar {
                 this.sidebarContainer.style.animation = `${animationProperties} ${toolbarCSSPrefix}-edgemenu-transition-in`;
                 this.menuContainer.style.animation = `${animationProperties} ${toolbarCSSPrefix}-edgemenu-container-transition-in`;
                 this.menuContainer.style.opacity = '1';
-                // Focus the close button when first shown.
-                this.closeButton.focus();
+                // Focus the close button when first shown, but prevent scroll because the button
+                // is likely at the bottom of the screen (and we want the full sidebar to remain
+                // visible).
+                this.closeButton.focus({ preventScroll: true, });
             }
             else {
                 this.closeColorPickers();
@@ -265,9 +267,8 @@ export default class EdgeToolbar extends AbstractToolbar {
             if (event.target === this.menuContainer) {
                 if (eventName === 'pointerdown') {
                     this.sidebarVisible.set(false);
-                }
-                if (eventName === 'pointerup') {
-                    this.editor.focus();
+                    // A delay seems necessary for the editor
+                    setTimeout(() => this.editor.focus(), 0);
                 }
                 return true;
             }

package/dist/mjs/toolbar/widgets/BaseWidget.mjs

@@ -14,6 +14,7 @@ import  ToolbarShortcutHandler  from '../../tools/ToolbarShortcutHandler.mjs';
 import  { keyPressEventFromHTMLEvent, keyUpEventFromHTMLEvent }  from '../../inputEvents.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  DropdownLayoutManager  from './layout/DropdownLayoutManager.mjs';
+import  addLongPressOrHoverCssClasses  from '../../util/addLongPressOrHoverCssClasses.mjs';
 /**
  * A set of labels that allow toolbar themes to treat buttons differently.
  */
@@ -60,6 +61,7 @@ class BaseWidget {
         this.button.oncontextmenu = event => {
             event.preventDefault();
         };
+        addLongPressOrHoverCssClasses(this.button);
     }
     /**
      * Should return a constant true or false value. If true (the default),

package/dist/mjs/toolbar/widgets/InsertImageWidget.mjs

@@ -4,7 +4,7 @@ import  EditorImage  from '../../image/EditorImage.mjs';
 import  uniteCommands  from '../../commands/uniteCommands.mjs';
 import  SelectionTool  from '../../tools/SelectionTool/SelectionTool.mjs';
 import { Mat33 } from '@js-draw/math';
-import  fileToBase64  from '../../util/fileToBase64.mjs';
+import  fileToBase64Url  from '../../util/fileToBase64Url.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
 import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
@@ -106,11 +106,13 @@ class InsertImageWidget extends BaseWidget {
             this.imagePreview.style.display = 'block';
             const image = files[0];
             let data = null;
+            let errorMessage = null;
             try {
-                data = await fileToBase64(image);
+                data = await fileToBase64Url(image);
             }
-            catch (e) {
-                this.statusView.innerText = this.localizationTable.imageLoadError(e);
+            catch (error) {
+                console.error('Image load error', error);
+                errorMessage = this.localizationTable.imageLoadError(error);
             }
             if (data) {
                 this.image = ImageWrapper.fromSrcAndPreview(data, this.imagePreview, () => this.onImageDataUpdate());
@@ -119,6 +121,11 @@ class InsertImageWidget extends BaseWidget {
                 this.image = null;
             }
             this.onImageDataUpdate();
+            // Show the error after image update callbacks to ensure it is
+            // actually shown.
+            if (errorMessage) {
+                this.statusView.innerText = errorMessage;
+            }
         });
         altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
         actionButtonRow.replaceChildren(this.submitButton);

package/dist/mjs/toolbar/widgets/components/makeGridSelector.mjs

@@ -1,5 +1,6 @@
 import  { MutableReactiveValue }  from '../../../util/ReactiveValue.mjs';
 import  stopPropagationOfScrollingWheelEvents  from '../../../util/stopPropagationOfScrollingWheelEvents.mjs';
+import  addLongPressOrHoverCssClasses  from '../../../util/addLongPressOrHoverCssClasses.mjs';
 import  { toolbarCSSPrefix }  from '../../constants.mjs';
 let idCounter = 0;
 /**
@@ -31,6 +32,9 @@ labelText, defaultId, choices) => {
         const button = document.createElement('input');
         button.type = 'radio';
         button.id = `${toolbarCSSPrefix}-grid-select-button-${idCounter++}`;
+        // Some toolbars only show the label on hover. Having long press or hover
+        // CSS classes are helpful here.
+        addLongPressOrHoverCssClasses(buttonContainer);
         // Clicking any part of labelContainer triggers the radio button.
         const labelContainer = document.createElement('label');
         const rebuildLabel = () => {
@@ -76,6 +80,12 @@ labelText, defaultId, choices) => {
         button.onblur = () => {
             buttonContainer.classList.remove('focus-visible');
         };
+        // Prevent the right-click menu from being shown on long-press
+        // (important for some toolbars that use long-press gestures to
+        // show grid selector labels).
+        buttonContainer.oncontextmenu = event => {
+            event.preventDefault();
+        };
         buttonContainer.replaceChildren(button, labelContainer);
         menuContainer.appendChild(buttonContainer);
         // Set whether the current button is checked

package/dist/mjs/util/addLongPressOrHoverCssClasses.d.ts

@@ -0,0 +1,10 @@
+/**
+ * When a pointer is inside `element`, after a delay, adds the `has-long-press-or-hover`
+ * CSS class to `element`.
+ *
+ * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
+ */
+declare const addLongPressOrHoverCssClasses: (element: HTMLElement) => {
+    removeEventListeners: () => void;
+};
+export default addLongPressOrHoverCssClasses;

package/dist/mjs/util/addLongPressOrHoverCssClasses.mjs

@@ -0,0 +1,29 @@
+import  listenForLongPressOrHover  from './listenForLongPressOrHover.mjs';
+/**
+ * When a pointer is inside `element`, after a delay, adds the `has-long-press-or-hover`
+ * CSS class to `element`.
+ *
+ * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
+ */
+const addLongPressOrHoverCssClasses = (element) => {
+    const hasLongPressClass = 'has-long-press-or-hover';
+    const noLongPressClass = 'no-long-press-or-hover';
+    element.classList.add('no-long-press-or-hover');
+    const { removeListeners } = listenForLongPressOrHover(element, {
+        onStart() {
+            element.classList.remove(noLongPressClass);
+            element.classList.add(hasLongPressClass);
+        },
+        onEnd() {
+            element.classList.add(noLongPressClass);
+            element.classList.remove(hasLongPressClass);
+        },
+    });
+    return {
+        removeEventListeners: () => {
+            element.classList.remove(noLongPressClass);
+            removeListeners();
+        },
+    };
+};
+export default addLongPressOrHoverCssClasses;

package/dist/mjs/util/fileToBase64Url.d.ts

@@ -0,0 +1,9 @@
+export interface FileToBase64UrlOptions {
+    onprogress?: (evt: ProgressEvent<FileReader>) => void;
+    onWarning?: (message: string, error: any) => void;
+}
+/**
+ * Converts `file` to a base64 data URL.
+ */
+declare const fileToBase64Url: (file: Blob, options?: FileToBase64UrlOptions) => Promise<string | null>;
+export default fileToBase64Url;

package/dist/mjs/util/fileToBase64Url.mjs

@@ -0,0 +1,37 @@
+/**
+ * Converts `file` to a base64 data URL.
+ */
+const fileToBase64Url = async (file, options = {}) => {
+    try {
+        const reader = new FileReader();
+        return await new Promise((resolve, reject) => {
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.onabort = reject;
+            reader.onprogress = (evt) => {
+                options.onprogress?.(evt);
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+    catch (error) {
+        // Files can fail to load with a FileReader in some cases. For example,
+        // in iOS Lockdown mode, where FileReader is unavailable.
+        (options.onWarning ?? console.warn)('Unable to convert file to base64 with a FileReader: ', error);
+        const arrayBuffer = await file.arrayBuffer();
+        const array = new Uint8Array(arrayBuffer);
+        // step: must be divisible by 3 (3 bytes = 4 base64 numerals)
+        //       If too large, this will fail (String.fromCharCode accepts a limited
+        //       number of arguments).
+        const step = 30;
+        const result = [];
+        for (let i = 0; i < array.length; i += step) {
+            // btoa accepts only characters with byte value 0-255 (which can be created
+            // with String.fromCharCode)
+            const stringByteArray = String.fromCharCode(...array.slice(i, i + step));
+            result.push(btoa(stringByteArray));
+        }
+        return `data:${file.type ?? 'image/*'};base64,${result.join('')}`;
+    }
+};
+export default fileToBase64Url;

package/dist/mjs/util/fileToBase64Url.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/util/listenForLongPressOrHover.d.ts

@@ -0,0 +1,13 @@
+type Options = {
+    onStart: () => void;
+    onEnd: () => void;
+    longPressTimeout?: number;
+};
+/**
+ * Calls `options.onStart` at the start of a long press or hover.
+ * Calls `options.onEnd` when no pointers are within the container.
+ */
+declare const listenForLongPressOrHover: (target: HTMLElement, options: Options) => {
+    removeListeners: () => void;
+};
+export default listenForLongPressOrHover;

package/dist/mjs/util/listenForLongPressOrHover.mjs

@@ -0,0 +1,78 @@
+/**
+ * Calls `options.onStart` at the start of a long press or hover.
+ * Calls `options.onEnd` when no pointers are within the container.
+ */
+const listenForLongPressOrHover = (target, options) => {
+    const pointersInside = new Map();
+    let timeoutId = null;
+    let isLongPressInProgress = false;
+    const updateTimeout = () => {
+        if (pointersInside.size === 0) {
+            if (isLongPressInProgress) {
+                isLongPressInProgress = false;
+                options.onEnd();
+            }
+            else if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+        }
+        else {
+            const nowTime = Date.now();
+            let timeSinceFirstPointer = 0; // ms
+            for (const record of pointersInside.values()) {
+                const timeSince = nowTime - record.timeEnter;
+                timeSinceFirstPointer = Math.max(timeSince, timeSinceFirstPointer);
+            }
+            const longPressTimeout = options.longPressTimeout ?? 700; // ms
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            const timeLeft = longPressTimeout - timeSinceFirstPointer;
+            if (timeLeft <= 0) {
+                options.onStart();
+                isLongPressInProgress = true;
+            }
+            else {
+                timeoutId = setTimeout(() => {
+                    timeoutId = null;
+                    updateTimeout();
+                }, timeLeft);
+            }
+        }
+    };
+    // Detects long press
+    const pointerEventListener = (event) => {
+        const eventRecord = {
+            timeEnter: Date.now(),
+        };
+        if (event.type === 'pointerenter') {
+            pointersInside.set(event.pointerId, eventRecord);
+        }
+        else if (event.type === 'pointerleave' || event.type === 'pointercancel') {
+            // In some cases (for example, a click with a stylus on Android/Chrome), moving the pen
+            // over the target, clicking, then moving the pen out of the target produces input
+            // similar to this:
+            // - pointerenter (pointerId: 4)
+            // - pointerleave (pointerId: 4)
+            // - pointerenter (pointerId: 6)
+            // - pointerenter (pointerId: 1)
+            // - pointerleave (pointerId: 6)
+            // Observe that no pointerleave event was fired for the pointer with ID 1.
+            pointersInside.clear();
+        }
+        updateTimeout();
+    };
+    target.addEventListener('pointerenter', pointerEventListener);
+    target.addEventListener('pointerleave', pointerEventListener);
+    target.addEventListener('pointercancel', pointerEventListener);
+    return {
+        removeListeners: () => {
+            target.removeEventListener('pointerenter', pointerEventListener);
+            target.removeEventListener('pointerleave', pointerEventListener);
+            target.removeEventListener('pointercancel', pointerEventListener);
+        },
+    };
+};
+export default listenForLongPressOrHover;

package/dist/mjs/util/listenForLongPressOrHover.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.12.0',
+    number: '1.13.2',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.12.0",
+  "version": "1.13.2",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "c179c5b3ebca482dfb156527ec6631c8f5159033"
+  "gitHead": "9a48e4d746783977e2b2808be9d97f3521fb830f"
 }

package/src/toolbar/EdgeToolbar.scss

@@ -1,3 +1,5 @@
+@use "./utils/labelVisibleOnHover.scss";
+
 @keyframes toolbar--edgemenu-transition-in {
 	from { transform: translate(0, 100%); }
 	to { transform: translate(0, 0); }
@@ -21,94 +23,6 @@
 	to { overflow-y: hidden; }
 }
 
-// Shows a lable on hover
-// Uses the --button-label-hover-offset-y and --button-label-hover-offset-x
-// variables to determine the label's position.
-//
-// If the label is in a scrolling container, that container should have position: relative;
-// as this allows absolutely positioned children to scroll with the container (rather than
-// remaining stationary).
-@mixin label-visible-on-hover($label-selector) {
-	$label-visible-opacity: 0.8;
-
-	// Make the label hide only when hovering.
-
-	@keyframes rehide-label {
-		0% { opacity: $label-visible-opacity; }
-		80% { opacity: $label-visible-opacity; }
-		100% { opacity: 0.1; }
-	}
-
-	@keyframes show-label {
-		0% { opacity: 0; }
-		// Keep the label hidden before showing
-		80% { opacity: 0; }
-		100% { opacity: $label-visible-opacity; }
-	}
-
-	@keyframes keep-label-hidden {
-		0% { opacity: 0; }
-		100% { opacity: 0; }
-	}
-
-
-	$hover-active-animation: ease show-label;
-
-	// Avoids sticky hover on touch devices. See
-	// https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
-	// When the primary device supports hover:
-	@media (hover: hover) {
-		// Only show an animation when opening the label due to a hover --
-		// show the label immediately otherwise.
-		&:hover:not(:focus-visible) > #{$label-selector} {
-			opacity: $label-visible-opacity;
-			animation: 1s $hover-active-animation;
-		}
-	}
-
-	// When the user is pressing/long-pressing the button
-	&:active > #{$label-selector} {
-		opacity: $label-visible-opacity;
-		animation: 1s $hover-active-animation;
-	}
-
-	$keyboard-hide-animation: 1.5s ease rehide-label;
-
-	&:focus-visible > #{$label-selector} {
-		animation: $keyboard-hide-animation;
-		opacity: 0;
-	}
-
-	// Make the :has selector separate its own statement -- some browsers don't
-	// support :has, which would make the entire statement block have no effect.
-	&:has(:focus-visible) > #{$label-selector} {
-		animation: $keyboard-hide-animation;
-		opacity: 0;
-	}
-
-	& > #{$label-selector} {
-		opacity: 0;
-		position: absolute;
-		margin-top: var(--button-label-hover-offset-y);
-		margin-left: var(--button-label-hover-offset-x);
-
-		// The label is often mostly invisible/just below a toolbar item.
-		// If there are multiple toolbar rows, ensure that a label doesn't prevent
-		// clicking on items in the second row:
-		pointer-events: none;
-
-		background-color: var(--background-color-1);
-		color: var(--foreground-color-1);
-		border-radius: 25px;
-		padding: 10px;
-
-		transition: 0.2s ease opacity, 0.2s ease margin-top;
-
-		@media (prefers-reduced-motion: reduce) {
-			transition: none;
-		}
-	}
-}
 
 // The toolbar portion (the bar along the top of the screen)
 .toolbar-edge-toolbar {
@@ -134,7 +48,7 @@
 		}
 	}
 
-	// Hide labels when above a certain width
+	// Hide inline labels when above a certain width
 	@media screen and (max-width: 700px) {
 		&.one-row > * > .toolbar-toolContainer.label-inline {
 			font-size: 0.9em;
@@ -152,7 +66,8 @@
 					animation: 0.2s linear hide-initially;
 				}
 
-				@include label-visible-on-hover(label);
+				// DO show the labels on hover.
+				@include labelVisibleOnHover.label-visible-on-hover(label);
 
 				// Clear additional margins added because of the left/right side labels.
 				// (Repeat selector to increase specificity).
@@ -296,14 +211,21 @@
 	--button-label-hover-offset-y: var(--label-hover-offset-size);
 	--button-label-hover-offset-x: 0;
 
-	.toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button {
-		width: calc(var(--toolbar-button-size) + var(--extra-left-right-padding));
+	.toolbar-toolContainer:not(.no-icon):not(.label-inline) {
+
+		.toolbar-button {
+			width: calc(var(--toolbar-button-size) + var(--extra-left-right-padding));
+
+			// Note: EdgeToolbar.ts currently assumes that the height of a button is
+			//       equivalent to --toolbar-button-size.
+			height: var(--toolbar-button-size);
 
-		// Note: EdgeToolbar.ts currently assumes that the height of a button is
-		//       equivalent to --toolbar-button-size.
-		height: var(--toolbar-button-size);
+			@include labelVisibleOnHover.label-visible-on-hover(label);
+		}
 
-		@include label-visible-on-hover(label);
+		&.dropdownVisible > .toolbar-button {
+			@include labelVisibleOnHover.show-label-now(label);
+		}
 	}
 
 	& > div > .toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
@@ -388,7 +310,7 @@
 	// Special styles for the enum selector 
 	.toolbar-grid-selector .choice-button {
 		--button-label-hover-offset-y: var(--button-size);
-		@include label-visible-on-hover('label > .button-label-text');
+		@include labelVisibleOnHover.label-visible-on-hover('label > .button-label-text');
 	}
 }