@progress/kendo-themes-html 14.5.1-dev.7 → 14.6.0

package/dist/types/imageeditor/imageeditor-pane.d.ts

@@ -0,0 +1,21 @@
+export declare const IMAGEEDITORPANE_CLASSNAME = "k-imageeditor-pane";
+declare const states: never[];
+export type KendoImageEditorPaneProps = {
+    title?: string;
+    actions?: React.JSX.Element | React.JSX.Element[];
+    /** Renders the mobile bottom-sheet header (Close/Title/Confirm) and omits the `actions` footer. */
+    adaptive?: boolean;
+};
+export type KendoImageEditorPaneState = {
+    [K in (typeof states)[number]]?: boolean;
+};
+export declare const ImageEditorPane: {
+    (props: KendoImageEditorPaneProps & KendoImageEditorPaneState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    moduleName: null;
+    folderName: null;
+    defaultOptions: {};
+};
+export default ImageEditorPane;

package/dist/types/imageeditor/imageeditor-placeholder.d.ts

@@ -0,0 +1,7 @@
+export declare const IMAGEEDITORPLACEHOLDER_CLASSNAME = "k-imageeditor-placeholder";
+export type KendoImageEditorPlaceholderProps = {
+    icon?: string;
+    title?: string;
+    text?: string;
+};
+export declare const ImageEditorPlaceholder: (props: KendoImageEditorPlaceholderProps & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/imageeditor-preview-thumbnail.d.ts

@@ -0,0 +1,12 @@
+export type ImageEditorPreviewThumbnailProps = {
+    label?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+};
+export declare const ImageEditorPreviewThumbnail: {
+    (props: ImageEditorPreviewThumbnailProps): import("react/jsx-runtime").JSX.Element;
+    moduleName: null;
+    folderName: null;
+    defaultOptions: {};
+};
+export default ImageEditorPreviewThumbnail;

package/dist/types/imageeditor/imageeditor-resize-handles.d.ts

@@ -0,0 +1,14 @@
+export type ImageEditorResizeHandlesVariant = 'crop' | 'mixed' | 'scale';
+export type ImageEditorResizeHandlesProps = {
+    variant?: ImageEditorResizeHandlesVariant;
+    grid?: boolean;
+};
+export declare const ImageEditorResizeHandles: {
+    (props: ImageEditorResizeHandlesProps): import("react/jsx-runtime").JSX.Element;
+    moduleName: null;
+    folderName: null;
+    defaultOptions: {
+        variant: ImageEditorResizeHandlesVariant;
+    };
+};
+export default ImageEditorResizeHandles;

package/dist/types/imageeditor/imageeditor-sidebar.d.ts

@@ -0,0 +1,11 @@
+export declare const IMAGEEDITORSIDEBAR_CLASSNAME = "k-imageeditor-sidebar";
+export type KendoImageEditorSidebarProps = {
+    sidebarItems?: React.JSX.Element | React.JSX.Element[];
+    scrollable?: boolean;
+    scrollingPosition?: 'start' | 'end' | 'both';
+};
+/**
+ * @aria {role="toolbar"} The component role, grouping the tool selection buttons.
+ * @aria {aria-label="Tools"} Distinguishes the sidebar toolbar from the header toolbar.
+ */
+export declare const ImageEditorSidebar: (props: KendoImageEditorSidebarProps & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/imageeditor-toolbar.d.ts

@@ -3,6 +3,7 @@ export declare const IMAGEEDITORTOOLBAR_CLASSNAME = "k-imageeditor-toolbar";
 export type KendoImageEditorToolbarProps = {
     toolbarItems?: React.JSX.Element | React.JSX.Element[];
 };
+export declare const imageEditorToolbarItems: import("react/jsx-runtime").JSX.Element[];
 export declare const ImageEditorToolbar: {
     (props: KendoToolbarProps & KendoImageEditorToolbarProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     states: any[];

package/dist/types/imageeditor/imageeditor.spec.d.ts

@@ -3,23 +3,59 @@ export declare const IMAGEEDITOR_CLASSNAME = "k-imageeditor";
 export type KendoImageEditorProps = {
     toolbarItems?: React.JSX.Element | React.JSX.Element[];
     actionPane?: React.JSX.Element | React.JSX.Element[];
+    sidebarItems?: React.JSX.Element | React.JSX.Element[];
+    placeholder?: React.JSX.Element;
     contentHeight?: string;
+    exporting?: boolean;
+    /** Renders the mobile layout: canvas, then the pane and sidebar docked at the bottom. */
+    adaptive?: boolean;
+    sidebarScrollable?: boolean;
+    sidebarScrollingPosition?: 'start' | 'end' | 'both';
 };
 /**
  * @aria {role="img"} Indicates the canvas role as an image. Applicable when an image is loaded.
  * @aria {aria-label|aria-labelledby} Provides an accessible name for the canvas by describing the image content. Applicable when an image is loaded.
+ * @aria {role="status"} Announces the busy overlay shown while `exporting` is true.
  * @ux {Canvas} Renders the image on an editable canvas.
  * @ux {Crop} A crop tool lets the user select and apply a cropping region.
  * @ux {Pan and zoom} The canvas can be panned by dragging and zoomed with the mouse wheel.
  * @ux {Undo / Redo} All edit operations can be undone and redone.
  * @ux {Export} The edited image can be saved or downloaded.
+ * @ux {Exporting} While `exporting` is true, a busy overlay covers the editor and interaction is blocked.
  */
 export declare const ImageEditor: KendoComponent<KendoImageEditorProps & React.HTMLAttributes<HTMLDivElement>>;
 /**
- * @keyboard {Tab} Focuses next focusable element (the ToolBar or an input/button on the Edit pane).
- * @keyboard {Shift + Tab} Focuses previous focusable element.
- * @keyboard {Control + Z} Undo the last modification performed on the image.
- * @keyboard {Control + Y} Redo a modification performed on the image.
+ * @keyboard {Alt/Opt(Mac) + Number} Focuses the component.
+ * @keyboard {Tab} Focuses the next focusable item.
+ * @keyboard {Shift + Tab} Focuses the previous focusable item.
+ * @keyboard {Enter} Presses the focused button.
+ * @keyboard {Space} Presses the focused button.
+ * @keyboard {Control/Cmd(Mac) + Z} Undo the operation.
+ * @keyboard {Control/Cmd(Mac) + Y} Redo the operation.
+ * @keyboard {Escape} Deselect / Cancel operation.
+ * @keyboard {Delete} Delete selected element.
+ * @keyboard {Control/Cmd(Mac) + Plus} Zooms in on the image. Conflicts with the browser zoom in all browsers; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + Minus} Zooms out from the image. Conflicts with the browser zoom out in all browsers; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + O} Opens the image browser to import a new image. Conflicts with the Open File dialog in all browsers; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + D} Duplicates the selected element. Conflicts with Bookmark Page in all browsers; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + Shift + S} Exports the image. Conflicts with the Firefox Screenshot tool; requires `preventDefault` when the component is focused.
+ * @keyboard {Shift + 1} Fit to screen.
+ * @keyboard {Shift + 0} Zoom to 100%.
+ * @keyboard {Control/Cmd(Mac) + F3} Moves keyboard focus directly to the Side Panel.
+ * @keyboard {R} Inserts a rectangle shape and selects it. The Floating Toolbar appears, but the side panel remains closed.
+ * @keyboard {O} Inserts an oval shape and selects it. The Floating Toolbar appears, but the side panel remains closed.
+ * @keyboard {L} Inserts a line shape and selects it. The Floating Toolbar appears, but the side panel remains closed.
+ * @keyboard {T} Inserts a text box with a typing cursor and selects it. The Floating Toolbar appears, but the side panel remains closed.
+ * @keyboard {ArrowLeft} Moves the selected object left.
+ * @keyboard {ArrowRight} Moves the selected object right.
+ * @keyboard {ArrowUp} Moves the selected object up.
+ * @keyboard {ArrowDown} Moves the selected object down.
+ * @keyboard {Control/Cmd(Mac) + B} Bolds the text. Conflicts with the Firefox Bookmarks Sidebar; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + I} Italicizes the text. Conflicts with Firefox Page Info; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + U} Underlines the text. Conflicts with View Source in Chrome, Firefox, and Edge; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + Shift + L} Left-aligns the text.
+ * @keyboard {Control/Cmd(Mac) + Shift + E} Center-aligns the text. Conflicts with Firefox Search in Tabs; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + Shift + R} Right-aligns the text. Conflicts with Hard Refresh in all browsers; requires `preventDefault` when the component is focused.
  *
  * @see https://pauljadam.com/demos/canvas.html HTML Canvas Accessibility
  */

package/dist/types/imageeditor/index.d.ts

@@ -1,5 +1,23 @@
 export * from './imageeditor.spec';
 export * from './imageeditor-toolbar';
+export * from './imageeditor-sidebar';
+export * from './imageeditor-placeholder';
+export * from './imageeditor-pane';
+export * from './imageeditor-option-preview';
+export * from './imageeditor-option-list';
+export * from './imageeditor-preview-thumbnail';
+export * from './imageeditor-resize-handles';
 export * from './templates/imageeditor-normal';
 export * from './templates/imageeditor-resize';
+export * from './templates/imageeditor-rotate';
 export * from './templates/imageeditor-crop';
+export * from './templates/imageeditor-disabled';
+export * from './templates/imageeditor-insert-text';
+export * from './templates/imageeditor-insert-shape';
+export * from './templates/imageeditor-insert-line';
+export * from './templates/imageeditor-blur';
+export * from './templates/imageeditor-pixelate';
+export * from './templates/imageeditor-filters';
+export * from './templates/imageeditor-adjustments';
+export * from './templates/imageeditor-frames';
+export * from './templates/imageeditor-shadow';

package/dist/types/imageeditor/templates/imageeditor-adjustments.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorAdjustments: ({ brightness, contrast, saturation, hue, exposure, blur, opacity, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-blur.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorBlur: ({ shape, intensity, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-disabled.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorDisabled: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-filters.d.ts

@@ -0,0 +1,6 @@
+export declare const filterPresets: {
+    [key: string]: {
+        label: string;
+    };
+};
+export declare const ImageEditorFilters: ({ preset, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-frames.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorFrames: ({ style, imageRoundness, framesAmount, frameThickness, frameRoundness, offset, strokeColor, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-insert-line.d.ts

@@ -0,0 +1,2 @@
+export declare const ImageEditorInsertLine: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default ImageEditorInsertLine;

package/dist/types/imageeditor/templates/imageeditor-insert-shape.d.ts

@@ -0,0 +1,2 @@
+export declare const ImageEditorInsertShape: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default ImageEditorInsertShape;

package/dist/types/imageeditor/templates/imageeditor-insert-text.d.ts

@@ -0,0 +1,2 @@
+export declare const ImageEditorInsertText: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default ImageEditorInsertText;

package/dist/types/imageeditor/templates/imageeditor-pixelate.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorPixelate: ({ shape, intensity, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-rotate.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorRotate: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/imageeditor/templates/imageeditor-shadow.d.ts

@@ -0,0 +1 @@
+export declare const ImageEditorShadow: ({ positionX, positionY, blur, spread, color, opacity, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/numerictextbox/numerictextbox.spec.d.ts

@@ -40,7 +40,7 @@ export type KendoNumericTextboxState = {
  * @ux {Format} The value is displayed using the configured number format.
  * @ux {Disabled state} When disabled, the input and spin buttons are non-interactive.
  */
-export declare const NumericTextbox: KendoComponent<KendoNumericTextboxProps & KendoNumericTextboxState & React.HTMLAttributes<HTMLSpanElement>>;
+export declare const NumericTextbox: KendoComponent<KendoNumericTextboxProps & KendoNumericTextboxState & Omit<React.HTMLAttributes<HTMLSpanElement>, 'prefix'>>;
 /**
  * @keyboard {ArrowUp} Increases the value of the focused NumericTextBox with the step.
  * @keyboard {ArrowDown} Decreases the value of the focused NumericTextBox with the step.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "14.5.1-dev.7",
+  "version": "14.6.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -51,7 +51,7 @@
     "prepublishOnly": "npm run build && npm run typegen"
   },
   "dependencies": {
-    "@progress/kendo-svg-icons": "5.5.0-dev.0"
+    "@progress/kendo-svg-icons": "^5.5.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -59,9 +59,9 @@
   },
   "devDependencies": {
     "@types/react": "^19.2.15",
-    "@vitest/coverage-v8": "4.1.10",
+    "@vitest/coverage-v8": "4.1.11",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "vitest": "4.1.10"
+    "vitest": "4.1.11"
   }
 }

package/src/combobox/combobox.spec.tsx

@@ -91,10 +91,10 @@ const defaultOptions = {
  * @ux {Placeholder} Displays hint text when no value is selected.
  * @ux {Disabled state} When disabled, the control is non-interactive.
  */
-export const Combobox: KendoComponent<KendoComboboxProps & KendoComboboxState & React.HTMLAttributes<HTMLSpanElement>> = (
+export const Combobox: KendoComponent<KendoComboboxProps & KendoComboboxState & Omit<React.HTMLAttributes<HTMLSpanElement>, 'prefix'>> = (
     props: KendoComboboxProps &
         KendoComboboxState &
-        React.HTMLAttributes<HTMLSpanElement>
+        Omit<React.HTMLAttributes<HTMLSpanElement>, 'prefix'>
 ) => {
     const {
         size,

package/src/imageeditor/imageeditor-option-list.tsx

@@ -0,0 +1,53 @@
+import { classNames } from '../misc';
+
+export const IMAGEEDITOROPTIONLIST_CLASSNAME = `k-imageeditor-option-list`;
+
+export type KendoImageEditorOptionListProps = {
+    scrollable?: boolean;
+    scrollableStart?: boolean;
+    scrollableEnd?: boolean;
+};
+
+const defaultOptions = {
+    scrollable: false,
+    scrollableStart: false,
+    scrollableEnd: false,
+};
+
+export const ImageEditorOptionList = (
+    props: KendoImageEditorOptionListProps & React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        scrollable = defaultOptions.scrollable,
+        scrollableStart = defaultOptions.scrollableStart,
+        scrollableEnd = defaultOptions.scrollableEnd,
+        children,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                IMAGEEDITOROPTIONLIST_CLASSNAME,
+                {
+                    [`${IMAGEEDITOROPTIONLIST_CLASSNAME}-scrollable`]: scrollable,
+                    [`${IMAGEEDITOROPTIONLIST_CLASSNAME}-scrollable-start`]: scrollableStart,
+                    [`${IMAGEEDITOROPTIONLIST_CLASSNAME}-scrollable-end`]: scrollableEnd,
+                }
+            )}
+        >
+            <div className="k-imageeditor-option-list-items">
+                {children}
+            </div>
+        </div>
+    );
+};
+
+ImageEditorOptionList.className = IMAGEEDITOROPTIONLIST_CLASSNAME;
+ImageEditorOptionList.moduleName = null;
+ImageEditorOptionList.folderName = null;
+ImageEditorOptionList.defaultOptions = defaultOptions;
+
+export default ImageEditorOptionList;

package/src/imageeditor/imageeditor-option-preview.tsx

@@ -0,0 +1,56 @@
+import { classNames, stateClassNames, States } from '../misc';
+
+export const IMAGEEDITOROPTIONPREVIEW_CLASSNAME = `k-imageeditor-option-preview`;
+
+const states = [
+    States.hover,
+    States.focus,
+    States.selected
+];
+
+const options = {};
+
+export type KendoImageEditorOptionPreviewProps = {
+    label?: string;
+};
+
+const defaultOptions = {};
+
+export type KendoImageEditorOptionPreviewState = { [K in (typeof states)[number]]?: boolean };
+
+export const ImageEditorOptionPreview = (
+    props: KendoImageEditorOptionPreviewProps & KendoImageEditorOptionPreviewState & React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        label,
+        hover,
+        focus,
+        selected,
+        children,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                IMAGEEDITOROPTIONPREVIEW_CLASSNAME,
+                stateClassNames(IMAGEEDITOROPTIONPREVIEW_CLASSNAME, { hover, focus, selected })
+            )}
+            role="button"
+            aria-pressed={selected ? 'true' : 'false'}
+        >
+            {children ?? label}
+        </div>
+    );
+};
+
+ImageEditorOptionPreview.states = states;
+ImageEditorOptionPreview.options = options;
+ImageEditorOptionPreview.className = IMAGEEDITOROPTIONPREVIEW_CLASSNAME;
+ImageEditorOptionPreview.moduleName = null;
+ImageEditorOptionPreview.folderName = null;
+ImageEditorOptionPreview.defaultOptions = defaultOptions;
+
+export default ImageEditorOptionPreview;

package/src/imageeditor/imageeditor-pane.tsx

@@ -0,0 +1,70 @@
+import { ActionButtons } from '../action-buttons';
+import { Button } from '../button';
+import { classNames } from '../misc';
+
+export const IMAGEEDITORPANE_CLASSNAME = `k-imageeditor-pane`;
+
+const states = [];
+
+const options = {};
+
+export type KendoImageEditorPaneProps = {
+    title?: string;
+    actions?: React.JSX.Element | React.JSX.Element[];
+    /** Renders the mobile bottom-sheet header (Close/Title/Confirm) and omits the `actions` footer. */
+    adaptive?: boolean;
+};
+
+const defaultOptions = {};
+
+export type KendoImageEditorPaneState = { [K in (typeof states)[number]]?: boolean };
+
+export const ImageEditorPane = (
+    props: KendoImageEditorPaneProps & KendoImageEditorPaneState & React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        title,
+        actions,
+        adaptive,
+        children,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                IMAGEEDITORPANE_CLASSNAME
+            )}
+        >
+            <div className="k-imageeditor-pane-header">
+                {adaptive && <Button fillMode="flat" icon="x" aria-label="Close" title="Close"></Button>}
+                <div className="k-imageeditor-pane-title">{title}</div>
+                {adaptive
+                    ? <Button fillMode="flat" icon="check" aria-label="Confirm" title="Confirm"></Button>
+                    : <Button fillMode="flat" icon="x" aria-label="Close" title="Close"></Button>
+                }
+            </div>
+
+            <div className="k-imageeditor-pane-content">
+                {children}
+            </div>
+
+            {!adaptive && actions &&
+            <ActionButtons alignment="end" className="k-imageeditor-pane-footer">
+                {actions}
+            </ActionButtons>
+            }
+        </div>
+    );
+};
+
+ImageEditorPane.states = states;
+ImageEditorPane.options = options;
+ImageEditorPane.className = IMAGEEDITORPANE_CLASSNAME;
+ImageEditorPane.moduleName = null;
+ImageEditorPane.folderName = null;
+ImageEditorPane.defaultOptions = defaultOptions;
+
+export default ImageEditorPane;

package/src/imageeditor/imageeditor-placeholder.tsx

@@ -0,0 +1,51 @@
+import { classNames } from '../misc';
+import { Icon } from '../icon';
+
+export const IMAGEEDITORPLACEHOLDER_CLASSNAME = `k-imageeditor-placeholder`;
+
+export type KendoImageEditorPlaceholderProps = {
+    icon?: string;
+    title?: string;
+    text?: string;
+};
+
+export const ImageEditorPlaceholder = (
+    props: KendoImageEditorPlaceholderProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        icon,
+        title,
+        text,
+        children,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                IMAGEEDITORPLACEHOLDER_CLASSNAME
+            )}
+        >
+            {children ?? (
+                <>
+                    {icon &&
+                        <Icon
+                            icon={icon}
+                            size="xxxlarge"
+                            className={`${IMAGEEDITORPLACEHOLDER_CLASSNAME}-icon`}
+                        />
+                    }
+                    {(title || text) &&
+                        <div className={`${IMAGEEDITORPLACEHOLDER_CLASSNAME}-hint`}>
+                            {title && <div className={`${IMAGEEDITORPLACEHOLDER_CLASSNAME}-title`}>{title}</div>}
+                            {text && <div className={`${IMAGEEDITORPLACEHOLDER_CLASSNAME}-text`}>{text}</div>}
+                        </div>
+                    }
+                </>
+            )}
+        </div>
+    );
+};

package/src/imageeditor/imageeditor-preview-thumbnail.tsx

@@ -0,0 +1,42 @@
+export type ImageEditorPreviewThumbnailProps = {
+    label?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+};
+
+const defaultOptions = {};
+
+// Generic thumbnail + caption pair used inside preview cards (aspect ratio, filters, frame style, ...);
+// not tied to any particular preview card component so it can be reused wherever a small image preview is needed.
+export const ImageEditorPreviewThumbnail = (props: ImageEditorPreviewThumbnailProps) => {
+    const { label, style, children } = props;
+
+    return (
+        <>
+            <span
+                aria-hidden="true"
+                style={{
+                    position: "relative",
+                    display: "block",
+                    width: "100%",
+                    height: "40px",
+                    borderRadius: "2px",
+                    backgroundImage: "url('/packages/html/assets/sofia.jpg')",
+                    backgroundSize: "cover",
+                    boxSizing: "border-box",
+                    ...style
+                }}
+            >
+                {children}
+            </span>
+            {label && <span className="k-imageeditor-preview-thumbnail-label">{label}</span>}
+        </>
+    );
+
+};
+
+ImageEditorPreviewThumbnail.moduleName = null;
+ImageEditorPreviewThumbnail.folderName = null;
+ImageEditorPreviewThumbnail.defaultOptions = defaultOptions;
+
+export default ImageEditorPreviewThumbnail;

package/src/imageeditor/imageeditor-resize-handles.tsx

@@ -0,0 +1,37 @@
+export type ImageEditorResizeHandlesVariant = 'crop' | 'mixed' | 'scale';
+
+export type ImageEditorResizeHandlesProps = {
+    variant?: ImageEditorResizeHandlesVariant;
+    grid?: boolean;
+};
+
+const defaultOptions = {
+    variant: 'crop' as ImageEditorResizeHandlesVariant
+};
+
+// Shared corner+edge handle markup for Crop/Resize/Rotate/Insert-Text/Insert-Shape; variant picks which class (k-resize-handle vs k-scale-handle) each position renders.
+export const ImageEditorResizeHandles = (props: ImageEditorResizeHandlesProps) => {
+    const { variant = defaultOptions.variant, grid } = props;
+    const cornerClassName = variant === 'crop' ? 'k-resize-handle' : 'k-scale-handle';
+    const edgeClassName = variant === 'scale' ? 'k-scale-handle' : 'k-resize-handle';
+
+    return (
+        <>
+            {grid && <div className="k-imageeditor-crop-grid"></div>}
+            <span className={`${cornerClassName} k-resize-nw`}></span>
+            <span className={`${cornerClassName} k-resize-ne`}></span>
+            <span className={`${cornerClassName} k-resize-sw`}></span>
+            <span className={`${cornerClassName} k-resize-se`}></span>
+            <span className={`${edgeClassName} k-resize-n`}></span>
+            <span className={`${edgeClassName} k-resize-s`}></span>
+            <span className={`${edgeClassName} k-resize-w`}></span>
+            <span className={`${edgeClassName} k-resize-e`}></span>
+        </>
+    );
+};
+
+ImageEditorResizeHandles.moduleName = null;
+ImageEditorResizeHandles.folderName = null;
+ImageEditorResizeHandles.defaultOptions = defaultOptions;
+
+export default ImageEditorResizeHandles;

package/src/imageeditor/imageeditor-sidebar.tsx

@@ -0,0 +1,66 @@
+import { classNames } from '../misc';
+import { Button } from '../button/button.spec';
+
+export const IMAGEEDITORSIDEBAR_CLASSNAME = `k-imageeditor-sidebar`;
+
+export type KendoImageEditorSidebarProps = {
+    sidebarItems?: React.JSX.Element | React.JSX.Element[];
+    scrollable?: boolean;
+    scrollingPosition?: 'start' | 'end' | 'both';
+};
+
+const defaultSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize" />,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop" />,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate" />,
+    <div className="k-separator" key="sidebar-separator-1" />,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text" />,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes" />,
+    <div className="k-separator" key="sidebar-separator-2" />,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur" />,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments" />,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters" />,
+    <div className="k-separator" key="sidebar-separator-3" />,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame" />,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow" />
+];
+
+const defaultOptions = {
+    sidebarItems: defaultSidebarItems,
+    scrollable: false,
+    scrollingPosition: 'start' as const,
+};
+
+/**
+ * @aria {role="toolbar"} The component role, grouping the tool selection buttons.
+ * @aria {aria-label="Tools"} Distinguishes the sidebar toolbar from the header toolbar.
+ */
+export const ImageEditorSidebar = (
+    props: KendoImageEditorSidebarProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        sidebarItems = defaultOptions.sidebarItems,
+        scrollable = defaultOptions.scrollable,
+        scrollingPosition = defaultOptions.scrollingPosition,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                IMAGEEDITORSIDEBAR_CLASSNAME,
+                {
+                    [`${IMAGEEDITORSIDEBAR_CLASSNAME}-scrollable`]: scrollable,
+                    [`${IMAGEEDITORSIDEBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollable,
+                }
+            )}
+        >
+            <div className="k-imageeditor-sidebar-items" role="toolbar" aria-label="Tools">
+                {sidebarItems ?? props.children}
+            </div>
+        </div>
+    );
+};