js-draw 1.25.0 → 1.26.0

package/dist/cjs/util/assertions.js

@@ -1,15 +1,22 @@
 "use strict";
+// Note: Arrow functions cannot be used for type assertions. See
+// https://github.com/microsoft/TypeScript/issues/34523
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.assertIsBoolean = exports.assertIsNumberArray = exports.assertIsNumber = exports.assertUnreachable = void 0;
+exports.assertUnreachable = assertUnreachable;
+exports.assertIsNumber = assertIsNumber;
+exports.assertIsArray = assertIsArray;
+exports.assertIsNumberArray = assertIsNumberArray;
+exports.assertIsBoolean = assertIsBoolean;
+exports.assertTruthy = assertTruthy;
+exports.assertIsObject = assertIsObject;
 /**
  * Compile-time assertion that a branch of code is unreachable.
  * @internal
  */
-const assertUnreachable = (key) => {
+function assertUnreachable(key) {
     // See https://stackoverflow.com/a/39419171/17055750
     throw new Error(`Should be unreachable. Key: ${key}.`);
-};
-exports.assertUnreachable = assertUnreachable;
+}
 /**
  * Throws an exception if the typeof given value is not a number or `value` is NaN.
  *
@@ -20,43 +27,42 @@ exports.assertUnreachable = assertUnreachable;
  *
  * assertIsNumber('hello, world'); // throws an Error.
  * ```
- *
- *
  */
-const assertIsNumber = (value, allowNaN = false) => {
+function assertIsNumber(value, allowNaN = false) {
     if (typeof value !== 'number' || (!allowNaN && isNaN(value))) {
         throw new Error('Given value is not a number');
-        // return false;
     }
-    return true;
-};
-exports.assertIsNumber = assertIsNumber;
+}
+function assertIsArray(values) {
+    if (!Array.isArray(values)) {
+        throw new Error('Asserting isArray: Given entity is not an array');
+    }
+}
 /**
  * Throws if any of `values` is not of type number.
  */
-const assertIsNumberArray = (values, allowNaN = false) => {
-    if (typeof values !== 'object') {
-        throw new Error('Asserting isNumberArray: Given entity is not an array');
-    }
-    if (!(0, exports.assertIsNumber)(values['length'])) {
-        return false;
-    }
+function assertIsNumberArray(values, allowNaN = false) {
+    assertIsArray(values);
+    assertIsNumber(values.length);
     for (const value of values) {
-        if (!(0, exports.assertIsNumber)(value, allowNaN)) {
-            return false;
-        }
+        assertIsNumber(value, allowNaN);
     }
-    return true;
-};
-exports.assertIsNumberArray = assertIsNumberArray;
+}
 /**
  * Throws an exception if `typeof value` is not a boolean.
  */
-const assertIsBoolean = (value) => {
+function assertIsBoolean(value) {
     if (typeof value !== 'boolean') {
         throw new Error('Given value is not a boolean');
-        // return false;
     }
-    return true;
-};
-exports.assertIsBoolean = assertIsBoolean;
+}
+function assertTruthy(value) {
+    if (!value) {
+        throw new Error(`${JSON.stringify(value)} is not truthy`);
+    }
+}
+function assertIsObject(value) {
+    if (typeof value !== 'object') {
+        throw new Error(`AssertIsObject: Given entity is not an object (type = ${typeof value})`);
+    }
+}

package/dist/cjs/version.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * @internal
  */
 exports.default = {
-    number: '1.25.0',
+    number: '1.26.0',
 };

package/dist/mjs/Editor.mjs

@@ -1320,7 +1320,7 @@ export class Editor {
                 '',
                 '',
                 '== js-draw ==',
-                mitLicenseAttribution('2023-2024 Henry Heino'),
+                mitLicenseAttribution('2023-2025 Henry Heino'),
                 '',
             ].join('\n'),
             minimized: true,

package/dist/mjs/bundle/bundled.mjs

@@ -1,4 +1,5 @@
-// Main entrypoint for Webpack when building a bundle for release.
+// Main entrypoint for the bundler (ESBuild/Webpack/etc.) when creating the bundled
+// portion of a release.
 import '../styles';
 import  Editor  from '../Editor.mjs';
 export  *  from '../lib.mjs';

package/dist/mjs/image/EditorImage.d.ts

@@ -225,7 +225,7 @@ export declare class ImageNode {
     getContent(): AbstractComponent | null;
     getParent(): ImageNode | null;
     protected getChildrenIntersectingRegion(region: Rect2, isTooSmallFilter?: TooSmallToRenderCheck): ImageNode[];
-    getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[];
+    getChildrenOrSelfIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[];
     /**
      * Returns a list of `ImageNode`s with content (and thus no children).
      * Override getChildrenIntersectingRegion to customize how this method
@@ -258,6 +258,7 @@ export declare class RootImageNode extends ImageNode {
     private fullscreenChildren;
     private dataComponents;
     protected getChildrenIntersectingRegion(region: Rect2, _isTooSmall?: TooSmallToRenderCheck): ImageNode[];
+    getChildrenOrSelfIntersectingRegion(region: Rect2, _isTooSmall?: TooSmallToRenderCheck): ImageNode[];
     getLeaves(): ImageNode[];
     removeChild(child: ImageNode): void;
     getChildWithContent(target: AbstractComponent): ImageNode | null;

package/dist/mjs/image/EditorImage.mjs

@@ -538,11 +538,11 @@ export class ImageNode {
             return !isTooSmallFilter?.(bbox) && bbox.intersects(region);
         });
     }
-    getChildrenOrSelfIntersectingRegion(region) {
-        if (this.content) {
+    getChildrenOrSelfIntersectingRegion(region, isTooSmall) {
+        if (this.content && this.bbox.intersects(region) && !isTooSmall?.(this.bbox)) {
             return [this];
         }
-        return this.getChildrenIntersectingRegion(region);
+        return this.getChildrenIntersectingRegion(region, isTooSmall);
     }
     /**
      * Returns a list of `ImageNode`s with content (and thus no children).
@@ -560,10 +560,17 @@ export class ImageNode {
         workList.push(this);
         while (workList.length > 0) {
             const current = workList.pop();
-            if (current.content !== null) {
-                result.push(current);
+            // Split the children into leaves and non-leaves
+            const processed = current.getChildrenOrSelfIntersectingRegion(region, isTooSmall);
+            for (const item of processed) {
+                if (item.content) {
+                    result.push(item);
+                }
+                else {
+                    // Non-leaves need to be processed
+                    workList.push(item);
+                }
             }
-            workList.push(...current.getChildrenIntersectingRegion(region, isTooSmall));
         }
         return result;
     }
@@ -917,6 +924,14 @@ export class RootImageNode extends ImageNode {
         }
         return result;
     }
+    getChildrenOrSelfIntersectingRegion(region, _isTooSmall) {
+        const content = this.getContent();
+        // Fullscreen components always intersect/contain
+        if (content && content.getSizingMode() === ComponentSizingMode.FillScreen) {
+            return [this];
+        }
+        return super.getChildrenOrSelfIntersectingRegion(region, _isTooSmall);
+    }
     getLeaves() {
         const leaves = super.getLeaves();
         // Add fullscreen/data components — this method should

package/dist/mjs/toolbar/AbstractToolbar.mjs

@@ -31,6 +31,7 @@ import { Color4 } from '@js-draw/math';
 import  { toolbarCSSPrefix }  from './constants.mjs';
 import  SaveActionWidget  from './widgets/SaveActionWidget.mjs';
 import  ExitActionWidget  from './widgets/ExitActionWidget.mjs';
+import  { assertIsObject, assertTruthy }  from '../util/assertions.mjs';
 /**
  * Abstract base class for js-draw editor toolbars.
  *
@@ -205,8 +206,12 @@ class AbstractToolbar {
      */
     deserializeState(state) {
         const data = JSON.parse(state);
+        assertIsObject(data);
+        assertTruthy(data);
         const rootId = AbstractToolbar.rootToolbarId;
-        this.deserializeInternal(data[rootId]);
+        if (rootId in data && typeof data[rootId] !== 'undefined') {
+            this.deserializeInternal(data[rootId]);
+        }
         for (const widgetId in data) {
             if (widgetId === rootId) {
                 continue;
@@ -215,7 +220,9 @@ class AbstractToolbar {
                 console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
                 continue;
             }
-            __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")[widgetId].deserializeFrom(data[widgetId]);
+            if (typeof data[widgetId] === 'object' && data[widgetId]) {
+                __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")[widgetId].deserializeFrom(data[widgetId]);
+            }
         }
     }
     /**

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

@@ -16,6 +16,7 @@ import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  DropdownLayoutManager  from './layout/DropdownLayoutManager.mjs';
 import  addLongPressOrHoverCssClasses  from '../../util/addLongPressOrHoverCssClasses.mjs';
 import  HelpDisplay  from '../utils/HelpDisplay.mjs';
+import  { assertIsObject }  from '../../util/assertions.mjs';
 /**
  * A set of labels that allow toolbar themes to treat buttons differently.
  */
@@ -446,10 +447,14 @@ class BaseWidget {
      */
     deserializeFrom(state) {
         if (state.subwidgetState) {
+            assertIsObject(state.subwidgetState);
             // Deserialize all subwidgets.
             for (const subwidgetId in state.subwidgetState) {
                 if (subwidgetId in this.subWidgets) {
-                    this.subWidgets[subwidgetId].deserializeFrom(state.subwidgetState[subwidgetId]);
+                    const serializedSubwidgetState = state.subwidgetState[subwidgetId];
+                    if (serializedSubwidgetState) {
+                        this.subWidgets[subwidgetId].deserializeFrom(serializedSubwidgetState);
+                    }
                 }
             }
         }

package/dist/mjs/toolbar/widgets/HandToolWidget.mjs

@@ -28,7 +28,7 @@ const makeZoomControl = (localizationTable, editor, helpDisplay) => {
             zoomLevel = Math.round(zoomLevel * 1000) / 1000;
         }
         if (zoomLevel !== lastZoom) {
-            zoomLevelDisplay.innerText = localizationTable.zoomLevel(zoomLevel);
+            zoomLevelDisplay.textContent = localizationTable.zoomLevel(zoomLevel);
             lastZoom = zoomLevel;
         }
     };
@@ -189,10 +189,10 @@ export default class HandToolWidget extends BaseToolWidget {
     }
     deserializeFrom(state) {
         if (state.touchPanning !== undefined) {
-            this.overridePanZoomTool.setModeEnabled(PanZoomMode.OneFingerTouchGestures, state.touchPanning);
+            this.overridePanZoomTool.setModeEnabled(PanZoomMode.OneFingerTouchGestures, !!state.touchPanning);
         }
         if (state.rotationLocked !== undefined) {
-            this.overridePanZoomTool.setModeEnabled(PanZoomMode.RotationLocked, state.rotationLocked);
+            this.overridePanZoomTool.setModeEnabled(PanZoomMode.RotationLocked, !!state.rotationLocked);
         }
         super.deserializeFrom(state);
     }

package/dist/mjs/tools/SelectionTool/Selection.mjs

@@ -72,13 +72,13 @@ class Selection {
             side: Vec2.of(0.5, 0),
             icon: this.editor.icons.makeRotateIcon(),
         }, this, this.editor.viewport, (startPoint) => this.transformers.rotate.onDragStart(startPoint), (currentPoint) => this.transformers.rotate.onDragUpdate(currentPoint), () => this.transformers.rotate.onDragEnd());
-        const menuToggleButton = new SelectionMenuShortcut(this, this.editor.viewport, showContextMenu, this.editor.localization);
+        const menuToggleButton = new SelectionMenuShortcut(this, this.editor.viewport, this.editor.icons.makeOverflowIcon(), showContextMenu, this.editor.localization);
         this.childwidgets = [
+            menuToggleButton,
             resizeBothHandle,
             ...resizeHorizontalHandles,
             resizeVerticalHandle,
             rotationHandle,
-            menuToggleButton,
         ];
         for (const widget of this.childwidgets) {
             widget.addTo(this.backgroundElem);
@@ -454,6 +454,7 @@ class Selection {
         if (!wasTransforming) {
             this.runSelectionDuplicatedAnimation();
         }
+        let command;
         if (wasTransforming) {
             // Don't update the selection's focus when redoing/undoing
             const selectionToUpdate = null;
@@ -463,16 +464,20 @@ class Selection {
             await tmpApplyCommand.apply(this.editor);
             // Show items again
             this.addRemoveSelectionFromImage(true);
-        }
-        const duplicateCommand = new Duplicate(this.selectedElems);
-        if (wasTransforming) {
+            // With the transformation applied, create the duplicates
+            command = uniteCommands(this.selectedElems.map((elem) => {
+                return EditorImage.addElement(elem.clone());
+            }));
             // Move the selected objects back to the correct location.
             await tmpApplyCommand?.unapply(this.editor);
             this.addRemoveSelectionFromImage(false);
             this.previewTransformCmds();
             this.updateUI();
         }
-        return duplicateCommand;
+        else {
+            command = new Duplicate(this.selectedElems);
+        }
+        return command;
     }
     setHandlesVisible(showHandles) {
         if (!showHandles) {

package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.d.ts

@@ -11,10 +11,12 @@ type OnShowContextMenu = (anchor: Point2) => void;
 export default class SelectionMenuShortcut implements SelectionBoxChild {
     private readonly parent;
     private readonly viewport;
+    private readonly icon;
     private localization;
     private element;
+    private button;
     private onClick;
-    constructor(parent: Selection, viewport: Viewport, showContextMenu: OnShowContextMenu, localization: ToolLocalization);
+    constructor(parent: Selection, viewport: Viewport, icon: Element, showContextMenu: OnShowContextMenu, localization: ToolLocalization);
     private initUI;
     addTo(container: HTMLElement): void;
     remove(): void;

package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs

@@ -2,15 +2,17 @@ import { Rect2, Vec2 } from '@js-draw/math';
 import  { cssPrefix }  from './SelectionTool.mjs';
 const verticalOffset = 40;
 export default class SelectionMenuShortcut {
-    constructor(parent, viewport, showContextMenu, localization) {
+    constructor(parent, viewport, icon, showContextMenu, localization) {
         this.parent = parent;
         this.viewport = viewport;
+        this.icon = icon;
         this.localization = localization;
         this.lastDragPointer = null;
         this.element = document.createElement('div');
         this.element.classList.add(`${cssPrefix}handle`, `${cssPrefix}selection-menu`);
         this.element.style.setProperty('--vertical-offset', `${verticalOffset}px`);
         this.onClick = () => {
+            this.button?.focus({ preventScroll: true });
             const anchor = this.getBBoxCanvasCoords().center;
             showContextMenu(anchor);
         };
@@ -19,16 +21,22 @@ export default class SelectionMenuShortcut {
     }
     initUI() {
         const button = document.createElement('button');
-        button.textContent = '...';
+        this.icon.classList.add('icon');
+        button.replaceChildren(this.icon);
         button.ariaLabel = this.localization.selectionMenu__show;
         button.title = button.ariaLabel;
+        this.button = button;
         // To prevent editor event handlers from conflicting with those for the button,
         // don't register a [click] handler. An onclick handler can be fired incorrectly
         // in this case (in Chrome) after onClick is fired in onDragEnd, leading to a double
         // on-click action.
         button.onkeydown = (event) => {
-            if (event.key === 'Enter')
+            if (event.key === 'Enter') {
+                // .preventDefault prevents [Enter] from activating the first item in the
+                // selection menu.
+                event.preventDefault();
                 this.onClick();
+            }
         };
         this.element.appendChild(button);
         // Update the bounding box of this in response to the new button.
@@ -58,7 +66,8 @@ export default class SelectionMenuShortcut {
         const contentCanvasSize = this.getElementScreenSize().times(toCanvasScale);
         const handleSizeCanvas = verticalOffset / this.viewport.getScaleFactor();
         const topLeft = Vec2.of(parentCanvasRect.x, parentCanvasRect.y - handleSizeCanvas);
-        return new Rect2(topLeft.x, topLeft.y, contentCanvasSize.x, contentCanvasSize.y);
+        const minSize = Vec2.of(48, 48).times(toCanvasScale);
+        return new Rect2(topLeft.x, topLeft.y, contentCanvasSize.x, contentCanvasSize.y).grownToSize(minSize);
     }
     updatePosition() {
         const bbox = this.getBBoxParentCoords();

package/dist/mjs/tools/TextTool.mjs

@@ -158,12 +158,15 @@ export default class TextTool extends BaseTool {
             }
         };
         this.textInputElem.onblur = () => {
+            const input = this.textInputElem;
             // Delay removing the input -- flushInput may be called within a blur()
             // event handler
             const removeInput = false;
-            const input = this.textInputElem;
             this.flushInput(removeInput);
             this.textInputElem = null;
+            if (input) {
+                input.classList.add('-hiding');
+            }
             setTimeout(() => {
                 input?.remove();
             }, 0);
@@ -203,7 +206,7 @@ export default class TextTool extends BaseTool {
         if (allPointers.length === 1) {
             // Are we clicking on a text node?
             const canvasPos = current.canvasPos;
-            const halfTestRegionSize = Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+            const halfTestRegionSize = Vec2.of(4, 4).times(this.editor.viewport.getSizeOfPixelOnCanvas());
             const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
             const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
             let targetTextNodes = targetNodes.filter((node) => node instanceof TextComponent);

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

@@ -2,7 +2,7 @@
  * Compile-time assertion that a branch of code is unreachable.
  * @internal
  */
-export declare const assertUnreachable: (key: never) => never;
+export declare function assertUnreachable(key: never): never;
 /**
  * Throws an exception if the typeof given value is not a number or `value` is NaN.
  *
@@ -13,15 +13,16 @@ export declare const assertUnreachable: (key: never) => never;
  *
  * assertIsNumber('hello, world'); // throws an Error.
  * ```
- *
- *
  */
-export declare const assertIsNumber: (value: any, allowNaN?: boolean) => value is number;
+export declare function assertIsNumber(value: unknown, allowNaN?: boolean): asserts value is number;
+export declare function assertIsArray(values: unknown): asserts values is unknown[];
 /**
  * Throws if any of `values` is not of type number.
  */
-export declare const assertIsNumberArray: (values: any[], allowNaN?: boolean) => values is number[];
+export declare function assertIsNumberArray(values: unknown, allowNaN?: boolean): asserts values is number[];
 /**
  * Throws an exception if `typeof value` is not a boolean.
  */
-export declare const assertIsBoolean: (value: any) => value is boolean;
+export declare function assertIsBoolean(value: unknown): asserts value is boolean;
+export declare function assertTruthy<T>(value: T | null | undefined | false | 0): asserts value is T;
+export declare function assertIsObject(value: unknown): asserts value is Record<string, unknown>;

package/dist/mjs/util/assertions.mjs

@@ -1,11 +1,13 @@
+// Note: Arrow functions cannot be used for type assertions. See
+// https://github.com/microsoft/TypeScript/issues/34523
 /**
  * Compile-time assertion that a branch of code is unreachable.
  * @internal
  */
-export const assertUnreachable = (key) => {
+export function assertUnreachable(key) {
     // See https://stackoverflow.com/a/39419171/17055750
     throw new Error(`Should be unreachable. Key: ${key}.`);
-};
+}
 /**
  * Throws an exception if the typeof given value is not a number or `value` is NaN.
  *
@@ -16,40 +18,42 @@ export const assertUnreachable = (key) => {
  *
  * assertIsNumber('hello, world'); // throws an Error.
  * ```
- *
- *
  */
-export const assertIsNumber = (value, allowNaN = false) => {
+export function assertIsNumber(value, allowNaN = false) {
     if (typeof value !== 'number' || (!allowNaN && isNaN(value))) {
         throw new Error('Given value is not a number');
-        // return false;
     }
-    return true;
-};
+}
+export function assertIsArray(values) {
+    if (!Array.isArray(values)) {
+        throw new Error('Asserting isArray: Given entity is not an array');
+    }
+}
 /**
  * Throws if any of `values` is not of type number.
  */
-export const assertIsNumberArray = (values, allowNaN = false) => {
-    if (typeof values !== 'object') {
-        throw new Error('Asserting isNumberArray: Given entity is not an array');
-    }
-    if (!assertIsNumber(values['length'])) {
-        return false;
-    }
+export function assertIsNumberArray(values, allowNaN = false) {
+    assertIsArray(values);
+    assertIsNumber(values.length);
     for (const value of values) {
-        if (!assertIsNumber(value, allowNaN)) {
-            return false;
-        }
+        assertIsNumber(value, allowNaN);
     }
-    return true;
-};
+}
 /**
  * Throws an exception if `typeof value` is not a boolean.
  */
-export const assertIsBoolean = (value) => {
+export function assertIsBoolean(value) {
     if (typeof value !== 'boolean') {
         throw new Error('Given value is not a boolean');
-        // return false;
     }
-    return true;
-};
+}
+export function assertTruthy(value) {
+    if (!value) {
+        throw new Error(`${JSON.stringify(value)} is not truthy`);
+    }
+}
+export function assertIsObject(value) {
+    if (typeof value !== 'object') {
+        throw new Error(`AssertIsObject: Given entity is not an object (type = ${typeof value})`);
+    }
+}

package/dist/mjs/version.mjs

@@ -4,5 +4,5 @@
  * @internal
  */
 export default {
-    number: '1.25.0',
+    number: '1.26.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "1.25.0",
+	"version": "1.26.0",
 	"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",
@@ -64,11 +64,11 @@
 		"postpack": "ts-node tools/copyREADME.ts revert"
 	},
 	"dependencies": {
-		"@js-draw/math": "^1.25.0",
+		"@js-draw/math": "^1.26.0",
 		"@melloware/coloris": "0.22.0"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.25.0",
+		"@js-draw/build-tool": "^1.26.0",
 		"@types/jest": "29.5.5",
 		"@types/jsdom": "21.1.3"
 	},
@@ -86,5 +86,5 @@
 		"freehand",
 		"svg"
 	],
-	"gitHead": "8ecc7be6d8b1b00c25fe7d3ed6c5fee239451dfa"
+	"gitHead": "6529cad584ca93a992f2576a43f25af48da3d707"
 }

package/src/tools/SelectionTool/SelectionTool.scss

@@ -85,12 +85,17 @@
 	> button {
 		max-height: var(--vertical-offset);
 		background-color: var(--background-color-1);
+
+		width: 24px;
+		height: 24px;
+		padding: 6px;
 		font-size: 14px;
+		user-select: none;
+		-webkit-user-select: none;
 
 		color: var(--foreground-color-1);
 		border: 0.5px solid var(--foreground-color-1);
 		border-radius: 3px;
-		padding: 3px;
 		opacity: 0.8;
 
 		&:hover,
@@ -102,6 +107,11 @@
 		}
 
 		transition: 0.2s ease opacity;
+
+		> .icon {
+			width: 100%;
+			height: 100%;
+		}
 	}
 }
 

package/src/tools/util/createMenuOverlay.scss

@@ -32,6 +32,7 @@
 		overflow: clip;
 		border-radius: 6px;
 		box-shadow: 0px 1px 2px var(--shadow-color);
+		background-color: var(--background-color-1);
 	}
 
 	&::backdrop {
@@ -47,7 +48,7 @@
 	padding-top: 6px;
 	padding-bottom: 6px;
 
-	background-color: var(--background-color-1);
+	background-color: transparent;
 	color: var(--foreground-color-1);
 	--icon-color: currentColor;