@progress/kendo-react-inputs 13.3.0 → 13.4.0-develop.2

package/colors/FlatColorPicker.mjs

@@ -7,16 +7,16 @@
  */
 import * as a from "react";
 import l from "prop-types";
-import { validatePackage as te, getLicenseMessage as le, Navigation as ne, getActiveElement as _, disableNavigatableContainer as K, keepFocusInContainer as oe, focusFirstFocusableChild as ie, enableNavigatableContainer as re, getTabIndex as ce, classNames as M, kendoThemeMaps as se, WatermarkOverlay as de } from "@progress/kendo-react-common";
+import { validatePackage as le, getLicenseMessage as ne, Navigation as oe, getActiveElement as _, disableNavigatableContainer as K, focusFirstFocusableChild as ie, enableNavigatableContainer as re, keepFocusInContainer as ce, classNames as M, getTabIndex as se, kendoThemeMaps as de, WatermarkOverlay as ve } from "@progress/kendo-react-common";
 import { ButtonGroup as L, Button as d } from "@progress/kendo-react-buttons";
-import { dropletSliderIcon as V, paletteIcon as G, dropletSlashIcon as ve } from "@progress/kendo-svg-icons";
-import { ColorPalette as ue } from "./ColorPalette.mjs";
-import { ColorGradient as ge } from "./ColorGradient.mjs";
+import { dropletSliderIcon as V, paletteIcon as G, dropletSlashIcon as ue } from "@progress/kendo-svg-icons";
+import { ColorPalette as ge } from "./ColorPalette.mjs";
+import { ColorGradient as me } from "./ColorGradient.mjs";
 import { packageMetadata as O } from "../package-metadata.mjs";
-import { useLocalization as me } from "@progress/kendo-react-intl";
-import { flatColorPickerColorGradientBtn as k, messages as v, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as T, flatColorPickerApplyBtn as ke, flatColorPickerCancelBtn as Ce } from "../messages/index.mjs";
+import { useLocalization as ke } from "@progress/kendo-react-intl";
+import { flatColorPickerColorGradientBtn as k, messages as v, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as T, flatColorPickerApplyBtn as Ce, flatColorPickerCancelBtn as fe } from "../messages/index.mjs";
 const D = a.forwardRef((e, H) => {
-  const W = !te(O, { component: "FlatColorPicker" }), q = le(O), f = a.useRef(null), y = a.useRef(null), $ = a.useRef(null), {
+  const W = !le(O, { component: "FlatColorPicker" }), q = ne(O), f = a.useRef(null), y = a.useRef(null), $ = a.useRef(null), {
     defaultValue: b,
     showButtons: w = !0,
     showPreview: j = !0,
@@ -24,8 +24,9 @@ const D = a.forwardRef((e, H) => {
     view: h = e.views ? void 0 : "ColorGradient",
     views: r = h ? void 0 : ["gradient", "palette"],
     activeView: P = "gradient",
-    size: o = "medium"
-  } = e, [u, Q] = a.useState(
+    size: o = void 0,
+    rounded: Q = void 0
+  } = e, [u, U] = a.useState(
     (h || "ColorGradient") === "ColorGradient"
   ), [s, x] = a.useState(
     (r != null ? r : [])[0] === "gradient" && P === "gradient"
@@ -33,7 +34,7 @@ const D = a.forwardRef((e, H) => {
   a.useEffect(() => {
     E(e.value);
   }, [e.value]);
-  const m = me(), R = a.useCallback(() => {
+  const m = ke(), R = a.useCallback(() => {
     f.current && f.current.focus();
   }, [f]);
   a.useImperativeHandle(
@@ -48,7 +49,7 @@ const D = a.forwardRef((e, H) => {
   ), a.useImperativeHandle(H, () => f.current);
   const A = a.useCallback(
     (t) => {
-      (t === "ColorGradient" && !u || t === "ColorPalette" && u) && Q(!u);
+      (t === "ColorGradient" && !u || t === "ColorPalette" && u) && U(!u);
     },
     [u]
   ), N = a.useCallback(
@@ -56,7 +57,7 @@ const D = a.forwardRef((e, H) => {
       t === "gradient" && !s || t === "palette" && s || t === "palette" && P === "gradient" ? x(!s) : t === "gradient" && P === "palette" && x(!0);
     },
     [P, s]
-  ), U = a.useCallback(
+  ), X = a.useCallback(
     (t) => {
       var c;
       const n = b || void 0;
@@ -84,7 +85,7 @@ const D = a.forwardRef((e, H) => {
       (n = e._gradientSettings) != null && n._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(t.value);
     },
     [e.onPreviewChange]
-  ), X = a.useCallback(
+  ), Y = a.useCallback(
     (t) => {
       if (i !== void 0 && I(i), e.onChange) {
         const n = {
@@ -96,9 +97,9 @@ const D = a.forwardRef((e, H) => {
       }
     },
     [i, e.onChange]
-  ), Y = a.useCallback(() => {
+  ), Z = a.useCallback(() => {
     E(g), e.setOpen && e.setOpen(!1);
-  }, [g]), Z = a.useCallback(
+  }, [g]), p = a.useCallback(
     (t) => {
       if (E(g), e.onPreviewChange) {
         const n = {
@@ -110,28 +111,28 @@ const D = a.forwardRef((e, H) => {
       }
     },
     [g, e.onPreviewChange]
-  ), p = a.useCallback(
+  ), ee = a.useCallback(
     (t) => {
       var c, S;
       if ((!t.relatedTarget || !((c = y.current) != null && c.contains(t.relatedTarget))) && !((S = e._gradientSettings) != null && S._adaptive) && (!w && i !== void 0 && I(i), !w && e.onChange)) {
-        const ae = {
+        const te = {
           value: i,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        e.onChange.call(void 0, ae);
+        e.onChange.call(void 0, te);
       }
     },
     [i, w, e.onChange]
   ), z = a.useMemo(
-    () => new ne({
+    () => new oe({
       root: y,
       selectors: [".k-coloreditor"],
       tabIndex: 0,
       keyboardEvents: {
         keydown: {
           Tab: (t, n, c) => {
-            _(document) === t ? K(t) : oe(c, t);
+            _(document) === t ? K(t) : ce(c, t);
           },
           Enter: (t, n, c) => {
             _(document) === t && (ie(t), re(t));
@@ -143,7 +144,7 @@ const D = a.forwardRef((e, H) => {
       }
     }),
     []
-  ), ee = a.useCallback(z.triggerKeyboardEvent.bind(z), []);
+  ), ae = a.useCallback(z.triggerKeyboardEvent.bind(z), []);
   return /* @__PURE__ */ a.createElement(
     "div",
     {
@@ -154,17 +155,17 @@ const D = a.forwardRef((e, H) => {
       "aria-disabled": e.disabled ? "true" : void 0,
       style: { position: "relative", ...e.style },
       ref: y,
-      tabIndex: ce(e.tabIndex, e.disabled),
+      tabIndex: se(e.tabIndex, e.disabled),
       className: M(
         "k-flatcolorpicker k-coloreditor",
         {
-          [`k-coloreditor-${se.sizeMap[o] || o}`]: o,
+          [`k-coloreditor-${de.sizeMap[o] || o}`]: o,
           "k-disabled": e.disabled
         },
         e.className
       ),
-      onBlur: p,
-      onKeyDown: ee
+      onBlur: ee,
+      onKeyDown: ae
     },
     e.header || /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, r && r[0] === "gradient" && r[1] === "palette" && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
       d,
@@ -175,8 +176,8 @@ const D = a.forwardRef((e, H) => {
           v[k]
         ),
         togglable: !0,
-        fillMode: "flat",
         size: o,
+        fillMode: "flat",
         svgIcon: V,
         selected: s,
         onClick: () => N("gradient")
@@ -190,8 +191,8 @@ const D = a.forwardRef((e, H) => {
           v[C]
         ),
         togglable: !0,
-        fillMode: "flat",
         size: o,
+        fillMode: "flat",
         svgIcon: G,
         selected: !s,
         onClick: () => N("palette")
@@ -264,13 +265,13 @@ const D = a.forwardRef((e, H) => {
         type: "button",
         fillMode: "flat",
         size: o,
-        onClick: U,
+        onClick: X,
         "aria-label": m.toLanguageString(
           T,
           v[T]
         ),
         icon: "droplet-slash",
-        svgIcon: ve
+        svgIcon: ue
       }
     ), j && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ a.createElement(
       "span",
@@ -292,7 +293,7 @@ const D = a.forwardRef((e, H) => {
         className: M("k-coloreditor-current-color", "k-color-preview", {
           "k-no-color": g === void 0
         }),
-        onClick: Z
+        onClick: p
       },
       /* @__PURE__ */ a.createElement(
         "span",
@@ -301,9 +302,9 @@ const D = a.forwardRef((e, H) => {
           style: { background: g || void 0 }
         }
       )
-    ))), W && /* @__PURE__ */ a.createElement(de, { message: q })),
+    ))), W && /* @__PURE__ */ a.createElement(ve, { message: q })),
     /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && u || r && s) && /* @__PURE__ */ a.createElement(
-      ge,
+      me,
       {
         ref: $,
         role: "none",
@@ -313,11 +314,12 @@ const D = a.forwardRef((e, H) => {
         opacity: e.opacity,
         format: e.format,
         size: o,
+        rounded: Q,
         _adaptive: e._gradientSettings ? e._gradientSettings._adaptive : void 0,
         ...e._gradientSettings
       }
     ), (h && !u || r && !s) && /* @__PURE__ */ a.createElement(
-      ue,
+      ge,
       {
         ariaDisabled: !0,
         ariaLabelledBy: "required_label",
@@ -333,13 +335,12 @@ const D = a.forwardRef((e, H) => {
         type: "button",
         themeColor: "primary",
         className: "k-coloreditor-apply",
-        size: o,
-        onClick: X
+        onClick: Y
       },
-      v[ke]
-    ), /* @__PURE__ */ a.createElement(d, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: Y }, v[Ce]))
+      v[Ce]
+    ), /* @__PURE__ */ a.createElement(d, { type: "button", className: "k-coloreditor-cancel", onClick: Z }, v[fe]))
   );
-}), fe = {
+}), be = {
   id: l.string,
   style: l.any,
   className: l.string,
@@ -359,10 +360,10 @@ const D = a.forwardRef((e, H) => {
   showPreview: l.bool,
   showButtons: l.bool,
   views: l.array,
-  size: l.oneOf([null, "small", "medium", "large"])
+  size: l.oneOf(["small", "medium", "large"])
 };
 D.displayName = "KendoFlatColorPicker";
-D.propTypes = fe;
+D.propTypes = be;
 export {
   D as FlatColorPicker
 };

package/colors/HexInput.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface HexInputProps {
+    hex: string;
+    onHexChange: any;
+    disabled?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    fillMode?: 'solid' | 'outline' | 'flat';
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+}
+/**
+ * @hidden
+ */
+export interface HexInputState {
+    originalHex: string;
+    hex: string;
+}
+/**
+ * @hidden
+ */
+export default class HexInput extends React.Component<HexInputProps, HexInputState> {
+    constructor(props: HexInputProps);
+    render(): React.JSX.Element;
+    static getDerivedStateFromProps(props: HexInputProps, state: HexInputState): {
+        hex: string;
+        originalHex: string;
+    } | null;
+    private onChange;
+    private onBlur;
+}

package/colors/HexInput.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";const l=require("react"),o=require("./utils/color-parser.js"),n=require("./utils/misc.js"),h=require("../textbox/Textbox.js");function c(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=c(l);class u extends a.Component{constructor(e){super(e),this.onChange=t=>{const s=t.target.value,i=o.parseColor(s,"rgba");this.setState({hex:s}),n.isPresent(i)&&this.props.onHexChange(s,i,t)},this.onBlur=()=>{n.isPresent(o.parseColor(this.state.hex,"rgba"))||this.setState({hex:this.state.originalHex})},this.state={hex:this.props.hex,originalHex:this.props.hex}}render(){return a.createElement(h.TextBox,{value:this.state.hex,onChange:this.onChange,onBlur:this.onBlur,disabled:this.props.disabled,className:"k-hex-value",size:this.props.size,fillMode:this.props.fillMode})}static getDerivedStateFromProps(e,t){return e.hex!==t.originalHex?{hex:e.hex,originalHex:e.hex}:null}}module.exports=u;
+"use strict";const l=require("react"),i=require("./utils/color-parser.js"),n=require("./utils/misc.js"),h=require("../textbox/Textbox.js");function u(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=u(l);class c extends a.Component{constructor(e){super(e),this.onChange=t=>{const s=t.target.value,o=i.parseColor(s,"rgba");this.setState({hex:s}),n.isPresent(o)&&this.props.onHexChange(s,o,t)},this.onBlur=()=>{n.isPresent(i.parseColor(this.state.hex,"rgba"))||this.setState({hex:this.state.originalHex})},this.state={hex:this.props.hex,originalHex:this.props.hex}}render(){return a.createElement(h.TextBox,{value:this.state.hex,onChange:this.onChange,onBlur:this.onBlur,disabled:this.props.disabled,className:"k-hex-value",size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded})}static getDerivedStateFromProps(e,t){return e.hex!==t.originalHex?{hex:e.hex,originalHex:e.hex}:null}}module.exports=c;

package/colors/HexInput.mjs

@@ -28,7 +28,8 @@ class u extends i.Component {
         disabled: this.props.disabled,
         className: "k-hex-value",
         size: this.props.size,
-        fillMode: this.props.fillMode
+        fillMode: this.props.fillMode,
+        rounded: this.props.rounded
       }
     );
   }

package/colors/Picker.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PickerProps } from './interfaces/PickerProps.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare const Picker: React.FunctionComponent<PickerProps>;

package/colors/interfaces/ColorGradientChangeEvent.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { ColorGradient } from '../ColorGradient.js';
+/**
+ * The arguments for the `onChange` ColorGradient event.
+ */
+export interface ColorGradientChangeEvent extends BaseEvent<ColorGradient> {
+    /**
+     * The current value of the ColorGradient.
+     */
+    value: string;
+}

package/colors/interfaces/ColorGradientProps.d.ts

@@ -0,0 +1,160 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ColorGradientChangeEvent } from './ColorGradientChangeEvent.js';
+/**
+ * Represents the props of the [KendoReact ColorGradient component](https://www.telerik.com/kendo-react-ui/components/inputs/colorgradient).
+ */
+export interface ColorGradientProps {
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Represents the label of the `hsv` drag handle component used inside the ColorGradient.
+     */
+    ariaLabelHSV?: string;
+    /**
+     * Represent the label of the component.
+     */
+    ariaLabel?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Represents the text rendered inside the `hsv` drag handle.
+     */
+    ariaValueText?: string;
+    /**
+     * Enables the color contrast tool.
+     * Sets the background color that will be compared to the selected value.
+     * The tool will calculate the contrast ratio between two colors.
+     * Currently, only the RGBA format is supported.
+     *
+     * @example
+     * ```jsx
+     * <ColorGradient backgroundColor="#ffffff" />
+     * ```
+     */
+    backgroundColor?: string;
+    /**
+     * Sets additional classes to the ColorGradient.
+     */
+    className?: string;
+    /**
+     * The default value of the ColorGradient.
+     */
+    defaultValue?: string;
+    /**
+     * Determines whether the ColorGradient is disabled
+     * ([more information and example](https://www.telerik.com/kendo-react-ui/components/inputs/colorgradient/disabled)).
+     *
+     * @example
+     * ```jsx
+     * const App = () => (
+     *     <ColorGradient disabled={true} />
+     * );
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Sets the default input format in the gradient input editor.
+     *
+     * @default 'rgb'
+     *
+     * @example
+     * ```jsx
+     * <ColorGradient format="hex" />
+     * ```
+     */
+    format?: 'rgba' | 'rgb' | 'hex';
+    /**
+     * Determines the step (in pixels) when moving the gradient drag handle using
+     * the keyboard arrow keys while holding the shift key.
+     *
+     * @default 2
+     */
+    gradientSliderSmallStep?: number;
+    /**
+     * Determines the step (in pixels) when moving the gradient drag handle
+     * using the keyboard arrow keys.
+     *
+     * @default 5
+     */
+    gradientSliderStep?: number;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * @hidden
+     */
+    isInsidePopup?: boolean;
+    /**
+     * Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`.
+     *
+     * @example
+     * ```jsx
+     * <ColorGradient opacity={false} />
+     * ```
+     */
+    opacity?: boolean;
+    /**
+     * @hidden
+     */
+    role?: string;
+    /**
+     * The styles that are applied to the ColorGradient.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `tabIndex` property of the ColorGradient.
+     */
+    tabIndex?: number;
+    /**
+     * The value of the ColorGradient.
+     */
+    value?: string;
+    /**
+     * Determines the event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: ColorGradientChangeEvent) => void;
+    /**
+     * Represents the focus event.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Configures the `size` of the ColorGradient.
+     *
+     * The available options are:
+     * - `small`
+     * - `medium`
+     * - `large`
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <ColorGradient size="large" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * @hidden
+     */
+    fillMode?: 'solid' | 'flat' | 'outline';
+    /**
+     * @hidden
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * @hidden
+     */
+    _adaptive?: boolean;
+}

package/colors/interfaces/ColorPaletteChangeEvent.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { ColorPalette } from '../ColorPalette.js';
+/**
+ * The arguments for the `onChange` ColorPalette event.
+ */
+export interface ColorPaletteChangeEvent extends BaseEvent<ColorPalette> {
+    /**
+     * The current value of the ColorPalette.
+     */
+    value: string;
+    /**
+     * The current value of the ColorPalette in RGBA format.
+     */
+    rgbaValue: string;
+}

package/colors/interfaces/ColorPaletteProps.d.ts

@@ -0,0 +1,116 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TileSize } from '../models/tile-size.js';
+import { ColorPaletteChangeEvent } from './ColorPaletteChangeEvent.js';
+/**
+ * Represents the props of the [KendoReact ColorPalette component](https://www.telerik.com/kendo-react-ui/components/inputs/colorpalette).
+ */
+export interface ColorPaletteProps {
+    /**
+     * The color palette that will be displayed.
+     *
+     * The supported values are:
+     * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
+     * * A string array.
+     *
+     * @example
+     * ```jsx
+     * <ColorPalette palette={['#ff0000', '#00ff00', '#0000ff']} />
+     * ```
+     */
+    palette?: string[] | string;
+    /**
+     * Specifies the number of columns that will be displayed.
+     * Defaults to `10`.
+     *
+     * @example
+     * ```jsx
+     * <ColorPalette columns={5} />
+     * ```
+     */
+    columns?: number;
+    /**
+     * Specifies the size of a color cell in px.
+     * Defaults to `24`.
+     *
+     * @example
+     * ```jsx
+     * <ColorPalette tileSize={30} />
+     * ```
+     */
+    tileSize?: number | TileSize;
+    /**
+     * The default value of the ColorPalette.
+     */
+    defaultValue?: string;
+    /**
+     * The value of the ColorPalette.
+     */
+    value?: string;
+    /**
+     * Determines whether the ColorPalette is disabled
+     * ([more information and example](https://www.telerik.com/kendo-react-ui/components/inputs/colorpalette/disabled)).
+     *
+     * @example
+     * ```jsx
+     * const App = () => (
+     *     <ColorPalette disabled={true} />
+     * );
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Sets the `tabIndex` property of the ColorPalette.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * @hidden
+     */
+    ariaDisabled?: boolean;
+    /**
+     * Determines the event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: ColorPaletteChangeEvent) => void;
+    /**
+     * Represent the focus event of the ColorPalette.
+     */
+    onFocus?: (event: FocusEvent) => void;
+    /**
+     * Sets additional classes to the ColorPalette.
+     */
+    className?: string;
+    /**
+     * Configures the `size` of the ColorPalette.
+     *
+     * The available options are:
+     * - `small`
+     * - `medium`
+     * - `large`
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```tsx
+     * <ColorPalette size="large" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+}

package/colors/interfaces/ColorPickerActiveColorClick.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ColorPickerHandle } from '../ColorPicker.js';
+/**
+ * The arguments for the `onActiveColorClick` ColorPicker event.
+ */
+export interface ColorPickerActiveColorClick {
+    /**
+     * The current value of the ColorPicker.
+     */
+    value: string;
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: any;
+    /**
+     * The event target.
+     */
+    target: ColorPickerHandle;
+}