blockly 12.5.1 → 13.0.0-beta.0

package/core/registry.d.ts

@@ -19,7 +19,6 @@ import type { ISerializer } from './interfaces/i_serializer.js';
 import type { IToolbox } from './interfaces/i_toolbox.js';
 import type { IVariableMap } from './interfaces/i_variable_map.js';
 import type { IVariableModel, IVariableModelStatic, IVariableState } from './interfaces/i_variable_model.js';
-import type { LineCursor } from './keyboard_nav/line_cursor.js';
 import type { Options } from './options.js';
 import type { Renderer } from './renderers/common/renderer.js';
 import type { Theme } from './theme.js';
@@ -50,7 +49,6 @@ export declare class Type<_T> {
     toString(): string;
     static CONNECTION_CHECKER: Type<IConnectionChecker>;
     static CONNECTION_PREVIEWER: Type<IConnectionPreviewer>;
-    static CURSOR: Type<LineCursor>;
     static EVENT: Type<Abstract>;
     static FIELD: Type<Field<any>>;
     static INPUT: Type<Input>;

package/core/renderers/common/constants.d.ts

@@ -244,8 +244,6 @@ export declare class ConstantProvider {
      * The <filter> element to use for a debug highlight, or null if not set.
      */
     private debugFilter;
-    /** The <style> element to use for injecting renderer specific CSS. */
-    private cssNode;
     /**
      * Cursor colour.
      */
@@ -422,7 +420,6 @@ export declare class ConstantProvider {
      * Create any DOM elements that this renderer needs (filters, patterns, etc).
      *
      * @param svg The root of the workspace's SVG.
-     * @param tagName The name to use for the CSS style tag.
      * @param selector The CSS selector to use.
      * @param injectionDivIfIsParent The div containing the parent workspace and
      *   all related workspaces and block containers, if this renderer is for the
@@ -430,7 +427,7 @@ export declare class ConstantProvider {
      *   to this container. Child workspaces should not override the CSS variables
      *   created by the parent and thus do not need access to the injection div.
      */
-    createDom(svg: SVGElement, tagName: string, selector: string, injectionDivIfIsParent?: HTMLElement): void;
+    createDom(svg: SVGElement, selector: string, injectionDivIfIsParent?: HTMLElement): void;
     /**
      * Create a filter for highlighting the currently rendering block during
      * render debugging.
@@ -439,10 +436,10 @@ export declare class ConstantProvider {
     /**
      * Inject renderer specific CSS into the page.
      *
-     * @param tagName The name of the style tag to use.
-     * @param selector The CSS selector to use.
+     * @param root The document root to inject the CSS into.
+     * @param selector The CSS selector to interpolate into the stylesheet.
      */
-    protected injectCSS_(tagName: string, selector: string): void;
+    protected injectCSS_(root: Document | ShadowRoot, selector: string): void;
     /**
      * Get any renderer specific CSS to inject when the renderer is initialized.
      *

package/core/renderers/common/i_path_object.d.ts

@@ -84,5 +84,13 @@ export interface IPathObject {
      * @param blockStyle The block style to use.
      */
     setStyle?(blockStyle: BlockStyle): void;
+    /**
+     * Add or remove styling indicating that a block will be bumped out and
+     * replaced by another block that is mid-move.
+     *
+     * @param replacing True if the block is at risk of being replaced, false
+     *     otherwise.
+     */
+    updateReplacing?(replacing: boolean): void;
 }
 //# sourceMappingURL=i_path_object.d.ts.map

package/core/renderers/common/path_object.d.ts

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import type { BlockSvg } from '../../block_svg.js';
-import type { Connection } from '../../connection.js';
 import { RenderedConnection } from '../../rendered_connection.js';
 import type { BlockStyle } from '../../theme.js';
 import { Coordinate } from '../../utils/coordinate.js';
@@ -105,21 +104,13 @@ export declare class PathObject implements IPathObject {
      */
     updateMovable(enable: boolean): void;
     /**
-     * Add or remove styling that shows that if the dragging block is dropped,
-     * this block will be replaced.  If a shadow block, it will disappear.
-     * Otherwise it will bump.
+     * Add or remove styling indicating that a block will be bumped out and
+     * replaced by another block that is mid-move.
      *
-     * @param enable True if styling should be added.
-     */
-    updateReplacementFade(enable: boolean): void;
-    /**
-     * Add or remove styling that shows that if the dragging block is dropped,
-     * this block will be connected to the input.
-     *
-     * @param _conn The connection on the input to highlight.
-     * @param _enable True if styling should be added.
+     * @param replacing True if the block is at risk of being replaced, false
+     *     otherwise.
      */
-    updateShapeForInputHighlight(_conn: Connection, _enable: boolean): void;
+    updateReplacing(replacing: boolean): void;
     /** Adds the given path as a connection highlight for the given connection. */
     addConnectionHighlight(connection: RenderedConnection, connectionPath: string, offset: Coordinate, rtl: boolean): SVGElement;
     /**

package/core/renderers/common/renderer.d.ts

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import type { BlockSvg } from '../../block_svg.js';
-import { Connection } from '../../connection.js';
 import type { IRegistrable } from '../../interfaces/i_registrable.js';
+import type { RenderedConnection } from '../../rendered_connection.js';
 import type { BlockStyle, Theme } from '../../theme.js';
 import { ConstantProvider } from './constants.js';
 import { Drawer } from './drawer.js';
@@ -113,10 +113,10 @@ export declare class Renderer implements IRegistrable {
     /**
      * Determine whether or not to highlight a connection.
      *
-     * @param _conn The connection to determine whether or not to highlight.
+     * @param connection The connection to determine whether or not to highlight.
      * @returns True if we should highlight the connection.
      */
-    shouldHighlightConnection(_conn: Connection): boolean;
+    shouldHighlightConnection(connection: RenderedConnection): boolean;
     /**
      * Checks if an orphaned block can connect to the "end" of the topBlock's
      * block-clump. If the clump is a row the end is the last input. If the clump

package/core/renderers/zelos/constants.d.ts

@@ -65,10 +65,6 @@ export declare class ConstantProvider extends BaseConstantProvider {
     SELECTED_GLOW_COLOUR: string;
     /** The size of the selected glow. */
     SELECTED_GLOW_SIZE: number;
-    /** The replacement glow colour. */
-    REPLACEMENT_GLOW_COLOUR: string;
-    /** The size of the selected glow. */
-    REPLACEMENT_GLOW_SIZE: number;
     /**
      * The ID of the selected glow filter, or the empty string if no filter is
      * set.
@@ -78,15 +74,6 @@ export declare class ConstantProvider extends BaseConstantProvider {
      * The <filter> element to use for a selected glow, or null if not set.
      */
     private selectedGlowFilter;
-    /**
-     * The ID of the replacement glow filter, or the empty string if no filter
-     * is set.
-     */
-    replacementGlowFilterId: string;
-    /**
-     * The <filter> element to use for a replacement glow, or null if not set.
-     */
-    private replacementGlowFilter;
     /**
      * The object containing information about the hexagon used for a boolean
      * reporter block. Null before init is called.
@@ -159,7 +146,7 @@ export declare class ConstantProvider extends BaseConstantProvider {
     };
     generateSecondaryColour_(colour: string): string;
     generateTertiaryColour_(colour: string): string;
-    createDom(svg: SVGElement, tagName: string, selector: string, injectionDivIfIsParent?: HTMLElement): void;
+    createDom(svg: SVGElement, selector: string, injectionDivIfIsParent?: HTMLElement): void;
     getCSS_(selector: string): string[];
 }
 //# sourceMappingURL=constants.d.ts.map

package/core/renderers/zelos/measurables/bottom_row.d.ts

@@ -21,6 +21,6 @@ export declare class BottomRow extends BaseBottomRow {
     /** Render a round corner unless the block has an output connection. */
     hasLeftSquareCorner(block: BlockSvg): boolean;
     /** Render a round corner unless the block has an output connection. */
-    hasRightSquareCorner(block: BlockSvg): false;
+    hasRightSquareCorner(block: BlockSvg): boolean;
 }
 //# sourceMappingURL=bottom_row.d.ts.map

package/core/renderers/zelos/measurables/top_row.d.ts

@@ -23,6 +23,6 @@ export declare class TopRow extends BaseTopRow {
     /** Render a round corner unless the block has an output connection. */
     hasLeftSquareCorner(block: BlockSvg): boolean;
     /** Render a round corner unless the block has an output connection. */
-    hasRightSquareCorner(block: BlockSvg): false;
+    hasRightSquareCorner(block: BlockSvg): boolean;
 }
 //# sourceMappingURL=top_row.d.ts.map

package/core/renderers/zelos/path_object.d.ts

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import type { BlockSvg } from '../../block_svg.js';
-import type { Connection } from '../../connection.js';
 import type { BlockStyle } from '../../theme.js';
 import { PathObject as BasePathObject } from '../common/path_object.js';
 import type { ConstantProvider } from './constants.js';
@@ -40,8 +39,6 @@ export declare class PathObject extends BasePathObject {
     applyColour(block: BlockSvg): void;
     flipRTL(): void;
     updateSelected(enable: boolean): void;
-    updateReplacementFade(enable: boolean): void;
-    updateShapeForInputHighlight(conn: Connection, enable: boolean): void;
     /**
      * Method that's called when the drawer is about to draw the block.
      */

package/core/renderers/zelos/renderer.d.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import type { BlockSvg } from '../../block_svg.js';
+import type { RenderedConnection } from '../../rendered_connection.js';
 import type { BlockStyle } from '../../theme.js';
 import type { RenderInfo as BaseRenderInfo } from '../common/info.js';
 import { Renderer as BaseRenderer } from '../common/renderer.js';
@@ -60,5 +61,12 @@ export declare class Renderer extends BaseRenderer {
      * @returns The constant provider.
      */
     getConstants(): ConstantProvider;
+    /**
+     * Determine whether or not to highlight a connection.
+     *
+     * @param connection The connection to determine whether or not to highlight.
+     * @returns True if we should highlight the connection.
+     */
+    shouldHighlightConnection(connection: RenderedConnection): boolean;
 }
 //# sourceMappingURL=renderer.d.ts.map

package/core/shortcut_items.d.ts

@@ -14,7 +14,26 @@ export declare enum names {
     PASTE = "paste",
     UNDO = "undo",
     REDO = "redo",
-    MENU = "menu"
+    MENU = "menu",
+    FOCUS_WORKSPACE = "focus_workspace",
+    FOCUS_TOOLBOX = "focus_toolbox",
+    START_MOVE = "start_move",
+    START_MOVE_STACK = "start_move_stack",
+    FINISH_MOVE = "finish_move",
+    ABORT_MOVE = "abort_move",
+    MOVE_UP = "move_up",
+    MOVE_DOWN = "move_down",
+    MOVE_LEFT = "move_left",
+    MOVE_RIGHT = "move_right",
+    NAVIGATE_RIGHT = "right",
+    NAVIGATE_LEFT = "left",
+    NAVIGATE_UP = "up",
+    NAVIGATE_DOWN = "down",
+    DISCONNECT = "disconnect",
+    NEXT_STACK = "next_stack",
+    PREVIOUS_STACK = "previous_stack",
+    INFORMATION = "information",
+    PERFORM_ACTION = "perform_action"
 }
 /**
  * Keyboard shortcut to hide chaff on escape.
@@ -45,10 +64,44 @@ export declare function registerUndo(): void;
  * or alt+shift+z.
  */
 export declare function registerRedo(): void;
+/**
+ * Registers keyboard shortcuts for keyboard-driven movement of workspace
+ * elements.
+ */
+export declare function registerMovementShortcuts(): void;
 /**
  * Keyboard shortcut to show the context menu on ctrl/cmd+Enter.
  */
 export declare function registerShowContextMenu(): void;
+/**
+ * Registers keyboard shortcuts to navigate around the Blockly interface.
+ */
+export declare function registerArrowNavigation(): void;
+/**
+ * Registers keyboard shortcut to focus the workspace.
+ */
+export declare function registerFocusWorkspace(): void;
+/**
+ * Registers keyboard shortcut to focus the toolbox.
+ */
+export declare function registerFocusToolbox(): void;
+/**
+ * Registers keyboard shortcut to get count of block stacks and comments.
+ */
+export declare function registerWorkspaceOverview(): void;
+/**
+ * Registers keyboard shortcut to disconnect the focused block.
+ */
+export declare function registerDisconnectBlock(): void;
+/**
+ * Registers keyboard shortcuts to jump between stacks/top-level items on the
+ * workspace.
+ */
+export declare function registerStackNavigation(): void;
+/**
+ * Registers keyboard shortcut to perform an action on the focused element.
+ */
+export declare function registerPerformAction(): void;
 /**
  * Registers all default keyboard shortcut item. This should be called once per
  * instance of KeyboardShortcutRegistry.
@@ -56,4 +109,13 @@ export declare function registerShowContextMenu(): void;
  * @internal
  */
 export declare function registerDefaultShortcuts(): void;
+/**
+ * Registers an extended set of keyboard shortcuts used to support deep keyboard
+ * navigation of Blockly.
+ */
+export declare function registerKeyboardNavigationShortcuts(): void;
+/**
+ * Registers keyboard shortcuts used to announce screen reader information.
+ */
+export declare function registerScreenReaderShortcuts(): void;
 //# sourceMappingURL=shortcut_items.d.ts.map

package/core/theme.d.ts

@@ -135,8 +135,6 @@ export declare namespace Theme {
         cursorColour?: string;
         selectedGlowColour?: string;
         selectedGlowOpacity?: number;
-        replacementGlowColour?: string;
-        replacementGlowOpacity?: number;
     }
     interface FontStyle {
         family?: string;

package/core/toast.d.ts

@@ -3,6 +3,7 @@
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import * as aria from './utils/aria.js';
 import type { WorkspaceSvg } from './workspace_svg.js';
 /**
  * Display/configuration options for a toast notification.
@@ -30,7 +31,7 @@ export interface ToastOptions {
      * How prominently/interrupting the readout of the toast should be for
      * screenreaders. Corresponds to aria-live and defaults to polite.
      */
-    assertiveness?: Toast.Assertiveness;
+    assertiveness?: aria.LiveRegionAssertiveness;
 }
 /**
  * Class that allows for showing and dismissing temporary notifications.
@@ -61,14 +62,4 @@ export declare class Toast {
      */
     static hide(workspace: WorkspaceSvg, id?: string): void;
 }
-/**
- * Options for how aggressively toasts should be read out by screenreaders.
- * Values correspond to those for aria-live.
- */
-export declare namespace Toast {
-    enum Assertiveness {
-        ASSERTIVE = "assertive",
-        POLITE = "polite"
-    }
-}
 //# sourceMappingURL=toast.d.ts.map

package/core/toolbox/category.d.ts

@@ -229,6 +229,11 @@ export declare class ToolboxCategory extends ToolboxItem implements ISelectableT
     getName(): string;
     getParent(): ICollapsibleToolboxItem | null;
     getDiv(): HTMLDivElement | null;
+    /**
+     * Handles this toolbox category gaining focus by informing its parent
+     * toolbox that it has been selected.
+     */
+    onNodeFocus(): void;
     /**
      * Gets the contents of the category. These are items that are meant to be
      * displayed in the flyout.

package/core/toolbox/separator.d.ts

@@ -30,6 +30,10 @@ export declare class ToolboxSeparator extends ToolboxItem {
     protected createDom_(): HTMLDivElement;
     getDiv(): HTMLDivElement;
     dispose(): void;
+    /**
+     * Prevents separator toolbox items from gaining focus.
+     */
+    canBeFocused(): boolean;
 }
 export declare namespace ToolboxSeparator {
     interface CssConfig {

package/core/toolbox/toolbox.d.ts

@@ -16,6 +16,7 @@ import type { ISelectableToolboxItem } from '../interfaces/i_selectable_toolbox_
 import type { IStyleable } from '../interfaces/i_styleable.js';
 import type { IToolbox } from '../interfaces/i_toolbox.js';
 import type { IToolboxItem } from '../interfaces/i_toolbox_item.js';
+import { ToolboxNavigator } from '../keyboard_nav/navigators/toolbox_navigator.js';
 import type { KeyboardShortcut } from '../shortcut_registry.js';
 import { Rect } from '../utils/rect.js';
 import * as toolbox from '../utils/toolbox.js';
@@ -62,6 +63,8 @@ export declare class Toolbox extends DeleteArea implements IAutoHideable, IKeybo
     protected readonly workspace_: WorkspaceSvg;
     /** Whether the mouse is currently being clicked. */
     private mouseDown;
+    /** Object used by keyboard navigation to move focus in this toolbox. */
+    private navigator;
     /** @param workspace The workspace in which to create new blocks. */
     constructor(workspace: WorkspaceSvg);
     /**
@@ -367,30 +370,12 @@ export declare class Toolbox extends DeleteArea implements IAutoHideable, IKeybo
      */
     private fireSelectEvent;
     /**
-     * Closes the current item if it is expanded, or selects the parent.
+     * Sets the currently selected item's expansion state, if possible.
      *
-     * @returns True if a parent category was selected, false otherwise.
+     * @param expanded True to expand the item or false to collapse it.
+     * @returns True if the selected item's expansion state was updated.
      */
-    private selectParent;
-    /**
-     * Selects the first child of the currently selected item, or nothing if the
-     * toolbox item has no children.
-     *
-     * @returns True if a child category was selected, false otherwise.
-     */
-    private selectChild;
-    /**
-     * Selects the next visible toolbox item.
-     *
-     * @returns True if a next category was selected, false otherwise.
-     */
-    private selectNext;
-    /**
-     * Selects the previous visible toolbox item.
-     *
-     * @returns True if a previous category was selected, false otherwise.
-     */
-    private selectPrevious;
+    private toggleSelectedItem;
     /** Disposes of this toolbox. */
     dispose(): void;
     /** See IFocusableNode.getFocusableElement. */
@@ -415,5 +400,10 @@ export declare class Toolbox extends DeleteArea implements IAutoHideable, IKeybo
     onTreeFocus(node: IFocusableNode, _previousTree: IFocusableTree | null): void;
     /** See IFocusableTree.onTreeBlur. */
     onTreeBlur(nextTree: IFocusableTree | null): void;
+    /**
+     * Returns the Navigator instance to use to move between items in this
+     * toolbox.
+     */
+    getNavigator(): ToolboxNavigator;
 }
 //# sourceMappingURL=toolbox.d.ts.map

package/core/toolbox/toolbox_item.d.ts

@@ -105,5 +105,9 @@ export declare class ToolboxItem implements IToolboxItem {
     onNodeBlur(): void;
     /** See IFocusableNode.canBeFocused. */
     canBeFocused(): boolean;
+    /**
+     * Returns the toolbox this toolbox item belongs to.
+     */
+    getParentToolbox(): IToolbox;
 }
 //# sourceMappingURL=toolbox_item.d.ts.map