@progress/kendo-react-inputs 15.1.1-develop.3 → 15.2.0-develop.2

package/colors/FlatColorPicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-svg-icons"),Y=require("./ColorPalette.js"),Z=require("./ColorGradient.js"),x=require("../package-metadata.js"),p=require("@progress/kendo-react-intl"),l=require("../messages/index.js");function ee(e){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const f in e)if(f!=="default"){const B=Object.getOwnPropertyDescriptor(e,f);Object.defineProperty(b,f,B.get?B:{enumerable:!0,get:()=>e[f]})}}return b.default=e,Object.freeze(b)}const t=ee(X),_=t.forwardRef((e,b)=>{const f=!n.validatePackage(x.packageMetadata,{component:"FlatColorPicker"}),B=n.getLicenseMessage(x.packageMetadata),h=t.useRef(null),w=t.useRef(null),F=t.useRef(null),{defaultValue:P,showButtons:N=!0,showPreview:z=!0,showClearButton:T=!0,view:E=e.views?void 0:"ColorGradient",views:d=E?void 0:["gradient","palette"],activeView:S="gradient",size:i=void 0,rounded:j=void 0}=e,[C,D]=t.useState((E||"ColorGradient")==="ColorGradient"),[v,V]=t.useState((d!=null?d:[])[0]==="gradient"&&S==="gradient"),[c,y]=t.useState(e.value||P||void 0),[k,M]=t.useState(e.value||P||void 0),L=e.value!==void 0?e.value:void 0;t.useEffect(()=>{y(e.value)},[e.value]);const g=p.useLocalization(),A=t.useCallback(()=>{h.current&&h.current.focus()},[h]);t.useImperativeHandle(h,()=>({element:w.current,focus:A,props:e,value:L}),[L,A,e]),t.useImperativeHandle(b,()=>h.current);const R=t.useCallback(a=>{(a==="ColorGradient"&&!C||a==="ColorPalette"&&C)&&D(!C)},[C]),I=t.useCallback(a=>{a==="gradient"&&!v||a==="palette"&&v||a==="palette"&&S==="gradient"?V(!v):a==="gradient"&&S==="palette"&&V(!0)},[S,v]),K=t.useCallback(a=>{var u;const r=P||void 0;if(y(r),M(r),(u=e._gradientSettings)!=null&&u._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(r),e.onPreviewChange){const G={value:r,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,G)}},[P,e.onPreviewChange]),q=t.useCallback(a=>{var r;if(y(a.value),e.onPreviewChange){const u={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,u)}(r=e._gradientSettings)!=null&&r._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(a.value)},[e.onPreviewChange]),H=t.useCallback(a=>{if(c!==void 0&&M(c),e.onChange){const r={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,r)}},[c,e.onChange]),W=t.useCallback(()=>{y(k),e.setOpen&&e.setOpen(!1)},[k]),$=t.useCallback(a=>{if(y(k),e.onPreviewChange){const r={value:k,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,r)}},[k,e.onPreviewChange]),J=t.useCallback(a=>{var u,G;if((!a.relatedTarget||!((u=w.current)!=null&&u.contains(a.relatedTarget)))&&!((G=e._gradientSettings)!=null&&G._adaptive)&&(!N&&c!==void 0&&M(c),!N&&e.onChange)){const U={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,U)}},[c,N,e.onChange]),O=t.useMemo(()=>new n.Navigation({root:w,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(a,r,u)=>{n.getActiveElement(document)===a?n.disableNavigatableContainer(a):n.keepFocusInContainer(u,a)},Enter:(a,r,u)=>{n.getActiveElement(document)===a&&(n.focusFirstFocusableChild(a),n.enableNavigatableContainer(a))},Escape:(a,r,u)=>{n.getActiveElement(document)!==a&&(a.focus(),n.disableNavigatableContainer(a))}}}}),[]),Q=t.useCallback(O.triggerKeyboardEvent.bind(O),[]);return t.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel||g.toLanguageString(l.flatColorPickerAriaLabel,l.messages[l.flatColorPickerAriaLabel]),"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:{position:"relative",...e.style},ref:w,tabIndex:n.getTabIndex(e.tabIndex,e.disabled),className:n.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,"k-disabled":e.disabled},e.className),onBlur:J,onKeyDown:Q},e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},d&&d[0]==="gradient"&&d[1]==="palette"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),size:i,fillMode:"flat",svgIcon:m.dropletSliderIcon,className:v?"k-selected":void 0,onClick:()=>I("gradient")}),t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),size:i,fillMode:"flat",svgIcon:m.paletteIcon,className:v?void 0:"k-selected",onClick:()=>I("palette")})),d&&d[0]==="palette"&&d[1]==="gradient"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),fillMode:"flat",size:i,svgIcon:m.paletteIcon,className:v?void 0:"k-selected",onClick:()=>I("palette")}),t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),fillMode:"flat",size:i,svgIcon:m.dropletSliderIcon,className:v?"k-selected":void 0,onClick:()=>I("gradient")})),E&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),fillMode:"flat",size:i,className:C?"k-selected":void 0,onClick:()=>R("ColorGradient"),icon:"droplet-slider",svgIcon:m.dropletSliderIcon}),t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),fillMode:"flat",size:i,className:C?void 0:"k-selected",onClick:()=>R("ColorPalette"),icon:"palette",svgIcon:m.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},T&&t.createElement(s.Button,{type:"button",fillMode:"flat",size:i,onClick:K,"aria-label":g.toLanguageString(l.flatColorPickerClearBtn,l.messages[l.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:m.dropletSlashIcon}),z&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:n.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":L===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:c||void 0}})),t.createElement("span",{className:n.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":k===void 0}),onClick:$},t.createElement("span",{className:"k-color-preview-mask",style:{background:k||void 0}})))),f&&t.createElement(n.WatermarkOverlay,{message:B})),t.createElement("div",{className:"k-coloreditor-views k-vstack"},(E&&C||d&&v)&&t.createElement(Z.ColorGradient,{ref:F,role:"none",ariaLabel:void 0,value:c,onChange:q,opacity:e.opacity,format:e.format,size:i,rounded:j,_adaptive:e._gradientSettings?e._gradientSettings._adaptive:void 0,...e._gradientSettings}),(E&&!C||d&&!v)&&t.createElement(Y.ColorPalette,{value:c,onChange:q,size:i,...e._paletteSettings})),N&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-start k-actions-horizontal"},t.createElement(s.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",onClick:H},g.toLanguageString(l.flatColorPickerApplyBtn,l.messages[l.flatColorPickerApplyBtn])),t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",onClick:W},g.toLanguageString(l.flatColorPickerCancelBtn,l.messages[l.flatColorPickerCancelBtn]))))}),te={id:o.string,style:o.any,className:o.string,value:o.string,defaultValue:o.string,onPreviewChange:o.func,onChange:o.func,opacity:o.bool,format:o.any,tabIndex:o.number,ariaLabel:o.string,ariaLabelledBy:o.string,disabled:o.bool,view:o.any,header:o.any,showClearButton:o.bool,showPreview:o.bool,showButtons:o.bool,views:o.array,size:o.oneOf(["small","medium","large"])};_.displayName="KendoFlatColorPicker";_.propTypes=te;exports.FlatColorPicker=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-svg-icons"),Y=require("./ColorPalette.js"),Z=require("./ColorGradient.js"),x=require("../package-metadata.js"),p=require("@progress/kendo-react-intl"),l=require("../messages/index.js");function ee(e){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const f in e)if(f!=="default"){const B=Object.getOwnPropertyDescriptor(e,f);Object.defineProperty(b,f,B.get?B:{enumerable:!0,get:()=>e[f]})}}return b.default=e,Object.freeze(b)}const t=ee(X),V=t.forwardRef((e,b)=>{const f=!n.validatePackage(x.packageMetadata,{component:"FlatColorPicker"}),B=n.getLicenseMessage(x.packageMetadata),h=t.useRef(null),w=t.useRef(null),F=t.useRef(null),{defaultValue:P,showButtons:N=!0,showPreview:z=!0,showClearButton:T=!0,view:E=e.views?void 0:"ColorGradient",views:d=E?void 0:["gradient","palette"],activeView:S="gradient",size:i=void 0,rounded:j=void 0}=e,[C,D]=t.useState((E||"ColorGradient")==="ColorGradient"),[v,_]=t.useState((d!=null?d:[])[0]==="gradient"&&S==="gradient"),[c,y]=t.useState(e.value||P||void 0),[k,L]=t.useState(e.value||P||void 0),M=e.value!==void 0?e.value:void 0;t.useEffect(()=>{y(e.value)},[e.value]);const g=p.useLocalization(),A=t.useCallback(()=>{h.current&&h.current.focus()},[h]);t.useImperativeHandle(h,()=>({element:w.current,focus:A,props:e,value:M}),[M,A,e]),t.useImperativeHandle(b,()=>h.current);const R=t.useCallback(a=>{(a==="ColorGradient"&&!C||a==="ColorPalette"&&C)&&D(!C)},[C]),I=t.useCallback(a=>{a==="gradient"&&!v||a==="palette"&&v||a==="palette"&&S==="gradient"?_(!v):a==="gradient"&&S==="palette"&&_(!0)},[S,v]),K=t.useCallback(a=>{var u;const r=P||void 0;if(y(r),L(r),(u=e.gradientSettings)!=null&&u._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(r),e.onPreviewChange){const G={value:r,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,G)}},[P,e.onPreviewChange]),q=t.useCallback(a=>{var r;if(y(a.value),e.onPreviewChange){const u={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,u)}(r=e.gradientSettings)!=null&&r._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(a.value)},[e.onPreviewChange]),H=t.useCallback(a=>{if(c!==void 0&&L(c),e.onChange){const r={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,r)}},[c,e.onChange]),W=t.useCallback(()=>{y(k),e.setOpen&&e.setOpen(!1)},[k]),$=t.useCallback(a=>{if(y(k),e.onPreviewChange){const r={value:k,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,r)}},[k,e.onPreviewChange]),J=t.useCallback(a=>{var u,G;if((!a.relatedTarget||!((u=w.current)!=null&&u.contains(a.relatedTarget)))&&!((G=e.gradientSettings)!=null&&G._adaptive)&&(!N&&c!==void 0&&L(c),!N&&e.onChange)){const U={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,U)}},[c,N,e.onChange]),O=t.useMemo(()=>new n.Navigation({root:w,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(a,r,u)=>{n.getActiveElement(document)===a?n.disableNavigatableContainer(a):n.keepFocusInContainer(u,a)},Enter:(a,r,u)=>{n.getActiveElement(document)===a&&(n.focusFirstFocusableChild(a),n.enableNavigatableContainer(a))},Escape:(a,r,u)=>{n.getActiveElement(document)!==a&&(a.focus(),n.disableNavigatableContainer(a))}}}}),[]),Q=t.useCallback(O.triggerKeyboardEvent.bind(O),[]);return t.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:{position:"relative",...e.style},ref:w,tabIndex:n.getTabIndex(e.tabIndex,e.disabled),className:n.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,"k-disabled":e.disabled},e.className),onBlur:J,onKeyDown:Q},e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},d&&d[0]==="gradient"&&d[1]==="palette"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),size:i,fillMode:"flat",svgIcon:m.dropletSliderIcon,className:v?"k-selected":void 0,onClick:()=>I("gradient")}),t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),size:i,fillMode:"flat",svgIcon:m.paletteIcon,className:v?void 0:"k-selected",onClick:()=>I("palette")})),d&&d[0]==="palette"&&d[1]==="gradient"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),fillMode:"flat",size:i,svgIcon:m.paletteIcon,className:v?void 0:"k-selected",onClick:()=>I("palette")}),t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),fillMode:"flat",size:i,svgIcon:m.dropletSliderIcon,className:v?"k-selected":void 0,onClick:()=>I("gradient")})),E&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),fillMode:"flat",size:i,className:C?"k-selected":void 0,onClick:()=>R("ColorGradient"),icon:"droplet-slider",svgIcon:m.dropletSliderIcon}),t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),fillMode:"flat",size:i,className:C?void 0:"k-selected",onClick:()=>R("ColorPalette"),icon:"palette",svgIcon:m.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},T&&t.createElement(s.Button,{type:"button",fillMode:"flat",size:i,onClick:K,"aria-label":g.toLanguageString(l.flatColorPickerClearBtn,l.messages[l.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:m.dropletSlashIcon}),z&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:n.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":M===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:c||void 0}})),t.createElement("span",{className:n.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":k===void 0}),onClick:$},t.createElement("span",{className:"k-color-preview-mask",style:{background:k||void 0}})))),f&&t.createElement(n.WatermarkOverlay,{message:B})),t.createElement("div",{className:"k-coloreditor-views k-vstack"},(E&&C||d&&v)&&t.createElement(Z.ColorGradient,{ref:F,role:"none",ariaLabel:void 0,value:c,onChange:q,opacity:e.opacity,format:e.format,size:i,rounded:j,_adaptive:e.gradientSettings?e.gradientSettings._adaptive:void 0,...e.gradientSettings}),(E&&!C||d&&!v)&&t.createElement(Y.ColorPalette,{value:c,onChange:q,size:i,ariaLabel:g.toLanguageString(l.colorPaletteAriaLabel,l.messages[l.colorPaletteAriaLabel]),...e.paletteSettings})),N&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-start k-actions-horizontal"},t.createElement(s.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",onClick:H},g.toLanguageString(l.flatColorPickerApplyBtn,l.messages[l.flatColorPickerApplyBtn])),t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",onClick:W},g.toLanguageString(l.flatColorPickerCancelBtn,l.messages[l.flatColorPickerCancelBtn]))))}),te={id:o.string,style:o.any,className:o.string,value:o.string,defaultValue:o.string,onPreviewChange:o.func,onChange:o.func,opacity:o.bool,format:o.any,tabIndex:o.number,ariaLabel:o.string,ariaLabelledBy:o.string,disabled:o.bool,view:o.any,header:o.any,showClearButton:o.bool,showPreview:o.bool,showButtons:o.bool,views:o.array,size:o.oneOf(["small","medium","large"])};V.displayName="KendoFlatColorPicker";V.propTypes=te;exports.FlatColorPicker=V;

package/colors/FlatColorPicker.mjs

@@ -8,13 +8,13 @@
 import * as a from "react";
 import l from "prop-types";
 import { validatePackage as ie, getLicenseMessage as re, Navigation as ce, getActiveElement as B, disableNavigatableContainer as K, focusFirstFocusableChild as se, enableNavigatableContainer as de, keepFocusInContainer as ve, classNames as M, kendoThemeMaps as ue, getTabIndex as ge, WatermarkOverlay as me } from "@progress/kendo-react-common";
-import { ButtonGroup as _, Button as u } from "@progress/kendo-react-buttons";
-import { dropletSliderIcon as V, paletteIcon as G, dropletSlashIcon as ke } from "@progress/kendo-svg-icons";
+import { ButtonGroup as V, Button as u } from "@progress/kendo-react-buttons";
+import { dropletSliderIcon as G, paletteIcon as _, dropletSlashIcon as ke } from "@progress/kendo-svg-icons";
 import { ColorPalette as Ce } from "./ColorPalette.mjs";
 import { ColorGradient as fe } from "./ColorGradient.mjs";
 import { packageMetadata as O } from "../package-metadata.mjs";
 import { useLocalization as be } from "@progress/kendo-react-intl";
-import { flatColorPickerAriaLabel as T, messages as v, flatColorPickerColorGradientBtn as k, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as D, flatColorPickerApplyBtn as H, flatColorPickerCancelBtn as W } from "../messages/index.mjs";
+import { flatColorPickerColorGradientBtn as k, messages as v, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as T, colorPaletteAriaLabel as D, flatColorPickerApplyBtn as H, flatColorPickerCancelBtn as W } from "../messages/index.mjs";
 const $ = a.forwardRef((e, j) => {
   const q = !ie(O, { component: "FlatColorPicker" }), J = re(O), f = a.useRef(null), y = a.useRef(null), Q = a.useRef(null), {
     defaultValue: b,
@@ -30,7 +30,7 @@ const $ = a.forwardRef((e, j) => {
     (h || "ColorGradient") === "ColorGradient"
   ), [s, x] = a.useState(
     (r != null ? r : [])[0] === "gradient" && P === "gradient"
-  ), [i, E] = a.useState(e.value || b || void 0), [m, I] = a.useState(e.value || b || void 0), L = e.value !== void 0 ? e.value : void 0;
+  ), [i, E] = a.useState(e.value || b || void 0), [m, L] = a.useState(e.value || b || void 0), I = e.value !== void 0 ? e.value : void 0;
   a.useEffect(() => {
     E(e.value);
   }, [e.value]);
@@ -43,9 +43,9 @@ const $ = a.forwardRef((e, j) => {
       element: y.current,
       focus: A,
       props: e,
-      value: L
+      value: I
     }),
-    [L, A, e]
+    [I, A, e]
   ), a.useImperativeHandle(j, () => f.current);
   const R = a.useCallback(
     (t) => {
@@ -61,7 +61,7 @@ const $ = a.forwardRef((e, j) => {
     (t) => {
       var c;
       const n = b || void 0;
-      if (E(n), I(n), (c = e._gradientSettings) != null && c._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(n), e.onPreviewChange) {
+      if (E(n), L(n), (c = e.gradientSettings) != null && c._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(n), e.onPreviewChange) {
         const S = {
           value: n,
           nativeEvent: t.nativeEvent,
@@ -82,12 +82,12 @@ const $ = a.forwardRef((e, j) => {
         };
         e.onPreviewChange.call(void 0, c);
       }
-      (n = e._gradientSettings) != null && n._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(t.value);
+      (n = e.gradientSettings) != null && n._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(t.value);
     },
     [e.onPreviewChange]
   ), ee = a.useCallback(
     (t) => {
-      if (i !== void 0 && I(i), e.onChange) {
+      if (i !== void 0 && L(i), e.onChange) {
         const n = {
           value: i,
           nativeEvent: t.nativeEvent,
@@ -114,7 +114,7 @@ const $ = a.forwardRef((e, j) => {
   ), le = 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)) {
+      if ((!t.relatedTarget || !((c = y.current) != null && c.contains(t.relatedTarget))) && !((S = e.gradientSettings) != null && S._adaptive) && (!w && i !== void 0 && L(i), !w && e.onChange)) {
         const oe = {
           value: i,
           nativeEvent: t.nativeEvent,
@@ -150,7 +150,7 @@ const $ = a.forwardRef((e, j) => {
     {
       id: e.id,
       role: "textbox",
-      "aria-label": e.ariaLabel || d.toLanguageString(T, v[T]),
+      "aria-label": e.ariaLabel,
       "aria-labelledby": e.ariaLabelledBy,
       "aria-disabled": e.disabled ? "true" : void 0,
       style: { position: "relative", ...e.style },
@@ -167,7 +167,7 @@ const $ = a.forwardRef((e, j) => {
       onBlur: le,
       onKeyDown: ne
     },
-    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(_, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
+    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(V, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
       u,
       {
         type: "button",
@@ -177,7 +177,7 @@ const $ = a.forwardRef((e, j) => {
         ),
         size: o,
         fillMode: "flat",
-        svgIcon: V,
+        svgIcon: G,
         className: s ? "k-selected" : void 0,
         onClick: () => N("gradient")
       }
@@ -191,11 +191,11 @@ const $ = a.forwardRef((e, j) => {
         ),
         size: o,
         fillMode: "flat",
-        svgIcon: G,
+        svgIcon: _,
         className: s ? void 0 : "k-selected",
         onClick: () => N("palette")
       }
-    )), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ a.createElement(_, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
+    )), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ a.createElement(V, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
       u,
       {
         type: "button",
@@ -205,7 +205,7 @@ const $ = a.forwardRef((e, j) => {
         ),
         fillMode: "flat",
         size: o,
-        svgIcon: G,
+        svgIcon: _,
         className: s ? void 0 : "k-selected",
         onClick: () => N("palette")
       }
@@ -219,11 +219,11 @@ const $ = a.forwardRef((e, j) => {
         ),
         fillMode: "flat",
         size: o,
-        svgIcon: V,
+        svgIcon: G,
         className: s ? "k-selected" : void 0,
         onClick: () => N("gradient")
       }
-    )), h && /* @__PURE__ */ a.createElement(_, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
+    )), h && /* @__PURE__ */ a.createElement(V, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
       u,
       {
         type: "button",
@@ -236,7 +236,7 @@ const $ = a.forwardRef((e, j) => {
         className: g ? "k-selected" : void 0,
         onClick: () => R("ColorGradient"),
         icon: "droplet-slider",
-        svgIcon: V
+        svgIcon: G
       }
     ), /* @__PURE__ */ a.createElement(
       u,
@@ -251,7 +251,7 @@ const $ = a.forwardRef((e, j) => {
         className: g ? void 0 : "k-selected",
         onClick: () => R("ColorPalette"),
         icon: "palette",
-        svgIcon: G
+        svgIcon: _
       }
     ))), /* @__PURE__ */ a.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, X && /* @__PURE__ */ a.createElement(
       u,
@@ -261,8 +261,8 @@ const $ = a.forwardRef((e, j) => {
         size: o,
         onClick: p,
         "aria-label": d.toLanguageString(
-          D,
-          v[D]
+          T,
+          v[T]
         ),
         icon: "droplet-slash",
         svgIcon: ke
@@ -271,7 +271,7 @@ const $ = a.forwardRef((e, j) => {
       "span",
       {
         className: M("k-coloreditor-preview-color", "k-color-preview", {
-          "k-no-color": L === void 0
+          "k-no-color": I === void 0
         })
       },
       /* @__PURE__ */ a.createElement(
@@ -309,8 +309,8 @@ const $ = a.forwardRef((e, j) => {
         format: e.format,
         size: o,
         rounded: Y,
-        _adaptive: e._gradientSettings ? e._gradientSettings._adaptive : void 0,
-        ...e._gradientSettings
+        _adaptive: e.gradientSettings ? e.gradientSettings._adaptive : void 0,
+        ...e.gradientSettings
       }
     ), (h && !g || r && !s) && /* @__PURE__ */ a.createElement(
       Ce,
@@ -318,7 +318,11 @@ const $ = a.forwardRef((e, j) => {
         value: i,
         onChange: F,
         size: o,
-        ...e._paletteSettings
+        ariaLabel: d.toLanguageString(
+          D,
+          v[D]
+        ),
+        ...e.paletteSettings
       }
     )),
     w && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ a.createElement(

package/colors/interfaces/ColorPaletteProps.d.ts

@@ -90,6 +90,13 @@ export interface ColorPaletteProps {
      * This property is related to accessibility.
      */
     ariaLabelledBy?: string;
+    /**
+     * Sets the `aria-label` attribute on the ColorPalette.
+     *
+     * @remarks
+     * This property is related to accessibility.
+     */
+    ariaLabel?: string;
     /**
      * @hidden
      */

package/colors/interfaces/ColorPickerPaletteSettings.d.ts

@@ -36,4 +36,9 @@ export interface ColorPickerPaletteSettings {
      * * `{ width: number, height: number }`
      */
     tileSize?: number | TileSize;
+    /**
+     * Sets the `aria-label` attribute of the color palette grid.
+     * Use this to provide an accessible name when the palette is embedded inside another component.
+     */
+    ariaLabel?: string;
 }