Sync with Kendo UI Professional

docs-aspnet/_config.yml

@@ -627,6 +627,9 @@ navigation:
      "*/orgchart":
         isNew: true
         title: "OrgChart"
+     "*/otpinput":
+         title: "OTPInput"
+         isNew: true
      "html-helpers/interactivity/progressbar":
         title: "ProgressBar"
      "html-helpers/interactivity/circularprogressbar":
@@ -726,13 +729,13 @@ navigation:
 baseurl: /aspnet-core
 
 ## The Kendo UI version used
-cdnVersion: "2024.4.1112"
+cdnVersion: "2025.1.211"
 
 ## The themes CDN used
-themesCdnVersion: "10.0.1"
+themesCdnVersion: "10.2.0"
 
 ## The MVC Core version used
-mvcCoreVersion: "2024.4.1112"
+mvcCoreVersion: "2025.1.211"
 
 productCode: UIASPCORE
 

docs-aspnet/getting-started-core/first-steps-cli.md

@@ -151,9 +151,9 @@ Install the appropriate [.Net Core SDK 2.0 or later](https://www.microsoft.com/n
 
 ## Adding Your License File
 
-Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
+Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
 
-To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article.
+To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}) article.
 
 ## Next Steps
 

docs-aspnet/getting-started-core/first-steps-vs-extensions.md

@@ -315,9 +315,9 @@ Since both the Bootstrap and Default themes are Sass-based themes, no additional
 
 ## Adding Your License File
 
-Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
+Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
 
-To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article.
+To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}).
 
 ## Next Steps
 

docs-aspnet/getting-started-core/first-steps.md

@@ -236,9 +236,9 @@ Congratulations! You created a page that uses the [Telerik UI DatePicker]({% slu
 
 ## Adding Your License File
 
-Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
+Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
 
-To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article.
+To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}) article.
 
 ## Next Steps
 

docs-aspnet/getting-started-mvc/first-steps.md

@@ -109,9 +109,9 @@ Press `CTRL+F5` to build and run the application. You have a Grid and a DatePick
 
 ## Adding Your License File
 
-Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
+Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
 
-To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article.
+To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}).
 
 ## Next Steps
 

docs-aspnet/getting-started-mvc/manual-setup.md

@@ -132,9 +132,9 @@ Press `CTRL+F5` to build and run the application. As a result, the following sam
 
 ## Adding Your License File
 
-Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
+Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
 
-To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article.
+To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}) article.
 
 ## Next Steps
 

docs-aspnet/getting-started-mvc/setup-with-nuget.md

@@ -169,9 +169,9 @@ Press `CTRL+F5` to build and run the application. As a result, the following sam
 
 ## Adding Your License File
 
-Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
+Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.
 
-To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article.
+To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}) article.
 
 ## Next Steps
 

docs-aspnet/html-helpers/editors/colorpicker/adaptive-mode.md

@@ -0,0 +1,52 @@
+---
+title: Adaptive Mode
+page_title: Adaptive Mode
+description: "Learn how to configure the adaptive behavior of the the Telerik UI ColorPickеr component for {{ site.framework }}."
+slug: htmlhelpers_colorpicker_adaptive_mode_aspnetcore
+position: 9
+---
+
+# Adaptive Mode
+
+The Telerik UI for {{ site.framework }} ColorPicker supports an adaptive mode that renders a mobile-friendly popup. To enable the adaptive rendering mode, set the `AdaptiveMode()` property to `AdaptiveMode.Auto`.
+
+The ColorPicker component automatically adapts to the current screen size and changes its rendering accordingly. On medium-sized screens, the suggestion list is displayed as docked to the bottom of the screen, while on smaller screens, it is rendered as a full-screen modal dialog. In all other scenarios, including when the `AdaptiveMode()` option is not specified or is set to its default value of `AdaptiveMode.None`, the standard popup is rendered docked to the input of the component.
+The adaptive mode changes the rendering of the ColorPicker popup element based on the screen resolution of the device (the horizontal value in `px`) with the following breakpoints:
+
+* Small screens—up to 500 px.
+* Medium screens—between 501 px and 768 px.
+* Large screens—over 768 px.
+
+
+The following example demonstrates how to enable the adaptive mode of the ColorPicker by using the `AdaptiveMode()` option.
+
+```HtmlHelper
+        @(Html.Kendo().ColorPicker()
+            .Name("colorpicker")
+            .Input(false)
+            .Preview(false)
+            .Value("#8174F2")
+            .AdaptiveMode(AdaptiveMode.Auto)
+        )
+```
+{% if site.core %}
+```TagHelper
+        @addTagHelper *, Kendo.Mvc
+        
+        <kendo-colorpicker name="colorpicker" 
+                             input="false" 
+                             preview="false"
+                             value="#8174F2" 
+                             adaptive-mode="AdaptiveMode.Auto">
+        </kendo-colorpicker>
+```
+{% endif %}
+
+## See Also
+
+* [Using the ColorPicker in Adaptive Mode (Demo)](https://demos.telerik.com/{{ site.platform }}/colorpicker/adaptive-mode)
+* [Adaptive Rendering of the Components]({% slug adaptive_rendering%})
+* [Server-Side API of the ColorPicker HtmlHelper](/api/colorpicker)
+{% if site.core %}
+* [Server-Side API of the ColorPicker TagHelper](/api/taghelpers/colorpicker)
+{% endif %}

docs-aspnet/html-helpers/editors/colorpicker/overview.md

@@ -93,6 +93,7 @@ The following example demonstrates how to configure the tile size, columns, `Cha
 | [Formats]({% slug htmlhelpers_formats_colorpickerhelper_aspnetcore %})| Configure the ColorPicker input formats. |
 | [Palettes]({% slug palettes_colorpicker %})| Define a color palette that the user can pick from.  |
 | [Events]({% slug events_colorpicker %})| The ColorPicker allows you to handle its events and implement any custom logic. |
+| [Adaptive Mode](% slug htmlhelpers_colorpicker_adaptive_mode_aspnetcore %)| The ColorPicker supports an adaptive mode that renders a mobile-friendly popup. |
 
 ## Next Steps
 

docs-aspnet/html-helpers/editors/otpinput/accessibility/keyboard-navigation.md

@@ -0,0 +1,33 @@
+---
+title: Keyboard Navigation
+page_title: Keyboard Navigation
+description: "Learn how to use the keyboard navigation functionality of the Telerik OTPInput component for {{ site.framework }}."
+slug: keynav_otpinputhelper
+position: 2
+---
+
+# Keyboard Navigation
+
+The keyboard navigation of the OTPInput is always available.
+
+The {{ site.product }} OTPInput supports the following keyboard shortcuts:
+
+| SHORTCUT						| DESCRIPTION				                                                        |
+|:---                 |:---                         
+| `Tab`               | Focuses the next input in the component.|
+| `Shift`+`Tab`       | Focuses the previous input in the component.|
+| `Up/Down Arrows`       | Navigates to the next/previous item when a panel is focused.|
+| `Right/Left Arrows`    | Highlights the next/previous focusable input in the component.|
+| `Backspace`         | Deletes the value of the focused input and moves the focus on the previous input.|
+| `Delete`            | Deletes the value of the focused input.|
+
+For a complete example, refer to the [demo on keyboard navigation of the OTPInput](https://demos.telerik.com/{{ site.platform }}/otpinput/keyboard-navigation)
+
+## See Also
+
+* [Keyboard Navigation by the OTPInput HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/otpinput/keyboard-navigation)
+* [Server-Side API of the OTPInput HtmlHelper](/api/otpinput)
+{% if site.core %}
+* [Server-Side API of the OTPInput TagHelper](/api/taghelpers/otpinput)
+{% endif %}
+* [Client-Side API of the OTPInput](https://docs.telerik.com/kendo-ui/api/javascript/ui/otpinput)

docs-aspnet/html-helpers/editors/otpinput/accessibility/overview.md

@@ -0,0 +1,76 @@
+---
+title: Overview
+page_title: OTPInput Documentation | OTPInput Accessibility
+description: "Get started with the {{ site.product }} OTPInput and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+slug: accessibility_otpinputhelper
+position: 1
+---
+
+# OTPInput Accessibility
+
+
+
+
+
+Out of the box, the Kendo UI for jQuery OTP provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
+
+
+The OTP is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
+
+## WAI-ARIA
+
+
+This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
+
+
+No role attribute is implemented as the `html input type="text"` element is sufficient for defining the purpose of the component.
+
+| Selector | Attribute | Usage |
+| -------- | --------- | ----- |
+| `.k-otp` | `role=group` | Sets the proper role for the OTP. |
+| `.k-otp>input` | `type=hidden` | The hidden input holding the OTP inputs value. |
+|  | `aria-hidden=true` | Hides the hidden input from assistive technologies. |
+| `.k-otp-input .k-input-inner` | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
+|  | `aria-required=true` | The attribute is rendered only when the OTP is in a `form` HTML element and announces the required state of the component. |
+|  | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
+|  | `autocomplete=off` | Sets the default autocomplete for the input. |
+| `.k-invalid .k-input-inner,.ng-invalid .k-input-inner` | `aria-invalid=true` | The attribute is rendered only when the OTP is in a form and announces the valid state of the component. |
+| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the OTP is disabled. |
+
+## Resources
+
+[WAI-ARIA Specification for the TextBox](https://www.w3.org/TR/wai-aria-1.2/#textbox)
+
+## Section 508
+
+
+The OTP is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
+
+## Testing
+
+
+The OTP has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+
+The OTP has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+
+
+### Test Example
+To test the OTPInput component, refer to the [OTPInput Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/otpinput).
+## Keyboard Navigation
+For details on how the OTPInput keyboard navigation works, refer to the [OTPInput Keyboard Navigation]({%slug keynav_otpinputhelper %}) article.
+## See Also
+* [Keyboard Navigation by the OTPInput for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/otpinput/keyboard-navigation)
+* [Keyboard Navigation by the OTPInput for {{ site.framework }}]({% slug keynav_otpinputhelper %})
+* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})

docs-aspnet/html-helpers/editors/otpinput/adaptiveness.md

@@ -0,0 +1,45 @@
+---
+title: Adaptiveness
+page_title: Adaptiveness
+description: "Learn how to configure the adaptive behavior of the the Telerik UI OTPInput component for {{ site.framework }}."
+slug: adaptiveness_otpinputhelper
+position: 8
+---
+
+# Adaptiveness
+
+The Telerik UI for {{ site.framework }} OTPInput does not require specific adaptive rendering but enables you to configure a suitable input-specific keyboard that appears on touchscreen devices upon interaction.
+
+## On-Screen Keyboard
+
+To enhance the user experience of your application on mobile devices, you can configure the type of the on-screen keyboard for the OTPInput component.
+
+To display an on-screen keyboard when the user focuses the OTPInput, set the `InputMode()` property to any of the supported <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode#values" target="_blank">`inputmode`</a> HTML attribute values. Based on the defined value, the browser displays the respective virtual keyboard on the screen.
+
+The following example demonstrates how to configure the most appropriate on-screen keyboard for the OTPInput.
+
+```HtmlHelper
+  @(Html.Kendo().OTPInput()
+    .Name("otp")
+    .Items(5)
+    .InputMode("text")
+  )
+```
+{% if site.core %}
+```TagHelper
+    @addTagHelper *, Kendo.Mvc
+
+    <kendo-otpinput name="otp" 
+                    items="5"
+                    input-mode="text">
+    </kendo-otpinput>
+```
+{% endif %}
+
+## See Also
+
+* [Adaptive Rendering of the Components]({% slug adaptive_rendering%})
+* [Server-Side API of the OTPInput HtmlHelper](/api/otpinput)
+{% if site.core %}
+* [Server-Side API of the OTPInput TagHelper](/api/taghelpers/otpinput)
+{% endif %}