Fix: Added the RTL for the input-select

[jadekeina]

No description provided.

[Copilot]

Pull Request Overview

This PR enhances RTL support for the input-select component, updates padding utilities to logical properties, and embeds a Base64 SVG for a pseudo-element background.

• Adds a [dir="rtl"] block to reposition the dropdown icon in RTL layouts
• Replaces pl/pr with ps/pe in size-specific and base input-icon variants
• Updates the peer-checked:after pseudo-element to use an inline Base64 SVG background

Comments suppressed due to low confidence (1)

src/components/inputs.scss:237

• [nitpick] Embedding a long inline Base64 SVG in the utility class increases bundle size and reduces readability. Consider extracting this icon into a dedicated asset or defining a custom Tailwind plugin/variable for reuse.

peer-checked:after:rounded-sm peer-checked:after:top-[-1px] peer-checked:after:left-[-1px] peer-checked:after:bg-[url('data:image/png;base64,PHN2Zy...')] peer-checked:after:h-5 peer-checked:after:w-5 peer-checked:after:content-[''] peer-checked:after:absolute

[Copilot]

The @apply list now includes both a bg-[url(...)] utility and a subsequent background-image declaration (svg-load), which likely overrides the utility. Consider removing the redundant bg-[url] or reordering so only one method defines the background image.

Suggested change

@apply appearance-none outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 [&:user-invalid]:border-danger [&:user-invalid]:hover:border-danger-500 [&:user-invalid]:focus:border-danger-900 [&:user-invalid]:text-danger disabled:cursor-not-allowed bg-[url('../icon-dropdown.svg')] bg-no-repeat bg-right ;

@apply appearance-none outline-none h-11 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-400 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-70 [&:user-invalid]:border-danger [&:user-invalid]:hover:border-danger-500 [&:user-invalid]:focus:border-danger-900 [&:user-invalid]:text-danger disabled:cursor-not-allowed bg-no-repeat bg-right ;

[Copilot]

[nitpick] Hardcoding 0.5rem for RTL positioning may drift if padding scales change. Use a theme spacing variable or match the existing px-4/ps-4 value (e.g., theme('spacing.4')) to ensure alignment stays consistent.