Inputs - API do not work for personalization

[code-enginner]

Describe the bug I want to customize an input according to the documentation, but none of the data-te-class-notchLeading classes work and do not apply. for example when i set:

data-te-class-notchLeading="pointer-events-none border border-solid box-border bg-neutral-300 transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full w-2 border-l-0 rounded-r-[0.25rem] group-data-[te-input-focused]:border-l-0 group-data-[te-input-state-active]:border-l-0"

None of these classes work.

can you guide me, by providing an example thank you.

This is my code:

<div class="relative mt-[5rem] mb-3 xl:w-96 px-5"
     data-te-input-wrapper-init
     data-te-class-notch="group flex flex-row-reverse absolute left-0 top-0 w-full max-w-full h-full text-right pointer-events-none"
     data-te-class-notchLeading="pointer-events-none border border-solid box-border bg-neutral-300 transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full w-2 border-l-0 rounded-r-[0.25rem] group-data-[te-input-focused]:border-l-0 group-data-[te-input-state-active]:border-l-0"

<input type="text"
       class="text-right peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
       id="exampleFormControlInput1"
       placeholder="Example label" />

<label for="exampleFormControlInput1"
       class="text-right pointer-events-none absolute right-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-neutral-200"
>
    Example label
</label>

</div>

[juujisai]

Hello! If you would like to add the class customization elements as a data attributes you have to use the kebab-case instead of pascalCase that is used in the API tab https://tw-elements.com/docs/standard/forms/inputs/#api-section-classes

pascalCase should be used when you are initializing a component with use of JS => for example:

   new Input( myInput, options, { notchLeading: "new-classes" } )

The data attribute for notchLeading should look like this:

<div 
    ....
    data-te-class-notch-leading="pointer-events-none border border-solid box-border bg-neutral-300 transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full w-2 border-l-0 rounded-r-[0.25rem] group-data-[te-input-focused]:border-l-0 group-data-[te-input-state-active]:border-l-0"
...

Hope that helps!