@uzum-tech/ui 0.1.1 → 1.0.0

package/es/input/src/Input.d.ts

@@ -1,7 +1,7 @@
 import { type PropType, type InputHTMLAttributes, type TextareaHTMLAttributes, type VNodeChild } from 'vue';
 import type { FormValidationStatus } from '../../form/src/interface';
 import { type ExtractPublicPropTypes, type MaybeArray } from '../../_utils';
-import type { OnUpdateValue, Size } from './interface';
+import type { OnUpdateValue, InputSize } from './interface';
 export declare const inputProps: {
     bordered: {
         type: PropType<boolean | undefined>;
@@ -21,7 +21,7 @@ export declare const inputProps: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
-    size: PropType<Size>;
+    size: PropType<InputSize>;
     rows: {
         type: PropType<string | number>;
         default: number;
@@ -99,21 +99,28 @@ export declare const inputProps: {
     /** deprecated */
     showPasswordToggle: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -153,28 +160,31 @@ export declare const inputProps: {
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
+        selectionColor: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
+        paddingHuge: string;
         clearSize: string;
-    }, any>>;
-    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -214,28 +224,31 @@ export declare const inputProps: {
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
+        selectionColor: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
+        paddingHuge: string;
         clearSize: string;
-    }, any>>>;
-    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -275,11 +288,7 @@ export declare const inputProps: {
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
-        paddingTiny: string;
-        paddingSmall: string;
-        paddingMedium: string;
-        paddingLarge: string;
-        clearSize: string;
+        selectionColor: string;
     }, any>>>;
 };
 export type InputProps = ExtractPublicPropTypes<typeof inputProps>;
@@ -302,7 +311,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | undefined>;
         default: undefined;
     };
-    size: PropType<Size>;
+    size: PropType<InputSize>;
     rows: {
         type: PropType<string | number>;
         default: number;
@@ -380,21 +389,28 @@ declare const _default: import("vue").DefineComponent<{
     /** deprecated */
     showPasswordToggle: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -434,28 +450,31 @@ declare const _default: import("vue").DefineComponent<{
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
+        selectionColor: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
+        paddingHuge: string;
         clearSize: string;
-    }, any>>;
-    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -495,28 +514,31 @@ declare const _default: import("vue").DefineComponent<{
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
+        selectionColor: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
+        paddingHuge: string;
         clearSize: string;
-    }, any>>>;
-    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -556,11 +578,7 @@ declare const _default: import("vue").DefineComponent<{
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
-        paddingTiny: string;
-        paddingSmall: string;
-        paddingMedium: string;
-        paddingLarge: string;
-        clearSize: string;
+        selectionColor: string;
     }, any>>>;
 }, {
     wrapperElRef: import("vue").Ref<HTMLElement | null>;
@@ -592,7 +610,7 @@ declare const _default: import("vue").DefineComponent<{
     isComposing: import("vue").Ref<boolean>;
     activated: import("vue").Ref<boolean>;
     showClearButton: import("vue").ComputedRef<boolean>;
-    mergedSize: import("vue").ComputedRef<"small" | "medium" | "large" | "tiny">;
+    mergedSize: import("vue").ComputedRef<"small" | "medium" | "large" | "tiny" | "huge">;
     mergedDisabled: import("vue").ComputedRef<boolean>;
     textDecorationStyle: import("vue").ComputedRef<string[] | {
         textDecoration: string;
@@ -626,142 +644,138 @@ declare const _default: import("vue").DefineComponent<{
     getTextareaScrollContainer: () => HTMLTextAreaElement | null;
     mergedTheme: import("vue").ComputedRef<{
         common: {
-            baseColor: string;
-            primaryColor: string;
-            primaryColorHover: string;
-            primaryColorPressed: string;
-            primaryColorSuppl: string;
-            infoColor: string;
-            infoColorHover: string;
-            infoColorPressed: string;
-            infoColorSuppl: string;
-            successColor: string;
-            successColorHover: string;
-            successColorPressed: string;
-            successColorSuppl: string;
-            warningColor: string;
-            warningColorHover: string;
-            warningColorPressed: string;
-            warningColorSuppl: string;
-            errorColor: string;
-            errorColorHover: string;
-            errorColorPressed: string;
-            errorColorSuppl: string;
-            tertiaryColor: string;
-            tertiaryColorHover: string;
-            tertiaryColorActive: string;
-            tertiaryColorSuppl: string;
-            tertiaryElements: string;
-            textColorBase: string;
-            textColor1: string;
-            textColor2: string;
-            textColor3: string;
-            textTertiary: string;
-            boxShadowHover: string;
-            boxShadowFocus: string;
-            boxShadowHoverChecked: string;
-            boxShadowFocusChecked: string;
-            textColorDisabled: string;
-            placeholderColor: string;
-            placeholderColorDisabled: string;
-            iconColor: string;
-            iconColorHover: string;
-            iconColorPressed: string;
-            iconColorDisabled: string;
-            opacity1: string;
-            opacity2: string;
-            opacity3: string;
-            opacity4: string;
-            opacity5: string;
-            dividerColor: string;
-            borderColor: string;
-            borderTagColor: string;
-            closeIconColor: string;
-            closeIconColorHover: string;
-            closeIconColorPressed: string;
-            closeColorHover: string;
-            closeColorPressed: string;
-            clearColor: string;
-            clearColorHover: string;
-            clearColorPressed: string;
             scrollbarColor: string;
             scrollbarColorHover: string;
             scrollbarWidth: string;
             scrollbarHeight: string;
             scrollbarBorderRadius: string;
-            progressRailColor: string;
-            railColor: string;
-            popoverColor: string;
-            tableColor: string;
-            cardColor: string;
-            modalColor: string;
-            bodyColor: string;
-            tagColor: string;
-            avatarColor: string;
-            avatarTextColor: string;
-            avatarIconColor: string;
-            invertedColor: string;
-            tooltipColor: string;
-            inputColor: string;
-            codeColor: string;
-            tabColor: string;
-            actionColor: string;
-            tableHeaderColor: string;
-            hoverColor: string;
-            tableColorHover: string;
-            tableColorStriped: string;
-            pressedColor: string;
             opacityDisabled: string;
-            inputColorDisabled: string;
-            buttonColor2: string;
-            buttonColor2Hover: string;
-            buttonColor2Pressed: string;
-            boxShadow1: string;
-            boxShadow2: string;
-            boxShadow3: string;
+            brandPrimary50: string;
+            brandPrimary100: string;
+            brandPrimary200: string;
+            brandPrimary300: string;
+            brandPrimary400: string;
+            brandPrimary500: string;
+            brandPrimary550: string;
+            brandPrimary600: string;
+            brandSecondary500: string;
+            brandSecondary300: string;
+            brandSecondary600: string;
+            brandTertiary500: string;
+            brandTertiary300: string;
+            brandTertiary600: string;
+            brandQuaternary500: string;
+            brandQuaternary300: string;
+            brandQuaternary600: string;
+            brandQuinary500: string;
+            brandQuinary300: string;
+            brandQuinary600: string;
+            brandQuinary100: string;
+            surfacePrimary: string;
+            surfaceSecondary: string;
+            containerPrimary: string;
+            containerSecondary: string;
+            textPrimary: string;
+            textSecondary: string;
+            textTertiary: string;
+            textQuaternary: string;
+            textBrand: string;
+            elementsPrimary: string;
+            elementsSecondary: string;
+            elementsTertiary: string;
+            elementsQuaternary: string;
+            elementsQuinary: string;
+            elementsDarkQuinary: string;
+            elementsSenary: string;
+            elementsOnContainer: string;
+            transparencyPrimary: string;
+            transparencySecondary: string;
+            transparencyTertiary: string;
+            transparencyQuinary: string;
+            transparencyModal: string;
+            staticBlack: string;
+            staticDarkGrey: string;
+            staticWhite: string;
+            staticRed: string;
+            staticOrange: string;
+            staticGreen: string;
+            staticErrorAccent: string;
+            shadowDepth2: string;
             fontFamily: string;
             fontFamilyMono: string;
-            fontWeight: string;
-            fontWeightStrong: string;
             cubicBezierEaseInOut: string;
             cubicBezierEaseOut: string;
             cubicBezierEaseIn: string;
-            borderWidth: number;
-            borderTagWidth: number;
+            borderRadiusLarge: string;
             borderRadius: string;
+            borderRadiusMedium: string;
             borderRadiusSmall: string;
-            fontSize: string;
-            fontSizeMini: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            lineHeight: string;
+            borderRadiusTiny: string;
             heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
             heightHuge: string;
+            fontDisplayLarge: string;
+            fontDisplaySmall: string;
+            fontHeadingLarge: string;
+            fontHeadingMedium: string;
+            fontHeadingSmall: string;
+            fontTitleLarge: string;
+            fontTitleMedium: string;
+            fontTitleSmall: string;
+            fontBodyLarge: string;
+            fontBodyMedium: string;
+            fontBodySmall: string;
+            lineHeightDisplayLarge: string;
+            lineHeightDisplaySmall: string;
+            lineHeightHeadingLarge: string;
+            lineHeightHeadingMedium: string;
+            lineHeightHeadingSmall: string;
+            lineHeightTitleLarge: string;
+            lineHeightTitleMedium: string;
+            lineHeightTitleSmall: string;
+            lineHeightBodyLarge: string;
+            lineHeightBodyMedium: string;
+            lineHeightBodySmall: string;
+            fontWeight: string;
+            fontWeightStrong: string;
+            fontWeightBold: string;
+            iconSmall: string;
+            iconMedium: string;
+            iconLarge: string;
+            iconHuge: string;
+            closeSmall: string;
+            closeMedium: string;
+            closeLarge: string;
+            closeHuge: string;
+            closeBorderRadius: string;
             name: "common";
         };
         self: {
+            paddingTiny: string;
+            paddingSmall: string;
+            paddingMedium: string;
+            paddingLarge: string;
+            paddingHuge: string;
+            clearSize: string;
             countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
+            heightHuge: string;
             fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
+            fontSizeHuge: string;
             lineHeight: string;
             lineHeightTextarea: string;
             borderRadius: string;
             iconSize: string;
-            groupLabelColor: string;
             groupLabelTextColor: string;
             textColor: string;
             textColorDisabled: string;
@@ -801,11 +815,7 @@ declare const _default: import("vue").DefineComponent<{
             iconColorHover: string;
             iconColorPressed: string;
             suffixTextColor: string;
-            paddingTiny: string;
-            paddingSmall: string;
-            paddingMedium: string;
-            paddingLarge: string;
-            clearSize: string;
+            selectionColor: string;
         };
         peers: any;
         peerOverrides: {
@@ -893,7 +903,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | undefined>;
         default: undefined;
     };
-    size: PropType<Size>;
+    size: PropType<InputSize>;
     rows: {
         type: PropType<string | number>;
         default: number;
@@ -971,21 +981,28 @@ declare const _default: import("vue").DefineComponent<{
     /** deprecated */
     showPasswordToggle: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -1025,28 +1042,31 @@ declare const _default: import("vue").DefineComponent<{
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
+        selectionColor: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
+        paddingHuge: string;
         clearSize: string;
-    }, any>>;
-    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -1086,28 +1106,31 @@ declare const _default: import("vue").DefineComponent<{
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
+        selectionColor: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
+        paddingHuge: string;
         clearSize: string;
-    }, any>>>;
-    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -1147,11 +1170,7 @@ declare const _default: import("vue").DefineComponent<{
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
-        paddingTiny: string;
-        paddingSmall: string;
-        paddingMedium: string;
-        paddingLarge: string;
-        clearSize: string;
+        selectionColor: string;
     }, any>>>;
 }>>, {
     type: "textarea" | "text" | "password";
@@ -1167,9 +1186,9 @@ declare const _default: import("vue").DefineComponent<{
     bordered: boolean | undefined;
     clearable: boolean;
     loadingSkeleton: boolean;
-    defaultValue: string | [string, string] | null;
     resizable: boolean;
     pair: boolean;
+    defaultValue: string | [string, string] | null;
     rows: string | number;
     passivelyActivated: boolean;
     stateful: boolean;

package/es/input/src/Input.js

@@ -4,7 +4,7 @@ import { getPadding } from 'seemly';
 import { VResizeObserver } from 'vueuc';
 import { off, on } from 'evtd';
 import { isSafari } from '../../_utils/env/browser';
-import { EyeIcon, EyeOffIcon } from '../../_internal/icons';
+import { EyeIcon, EyeOffIcon, ClearSmallIcon } from '../../_internal/icons';
 import { useRtl } from '../../_mixins/use-rtl';
 import { UBaseClear, UBaseIcon, UBaseSkeleton, UBaseSuffix, UScrollbar } from '../../_internal';
 import { useTheme, useLocale, useFormItem, useConfig, useThemeClass, useStyle } from '../../_mixins';
@@ -702,14 +702,14 @@ export default defineComponent({
         const rtlEnabledRef = useRtl('Input', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { value: size } = mergedSizeRef;
-            const { common: { cubicBezierEaseInOut, fontWeightStrong, fontWeight, primaryColor }, self: { color, borderRadius, textColor, caretColor, caretColorError, caretColorWarning, textDecorationColor, border, borderDisabled, borderHover, borderFocus, placeholderColor, placeholderColorDisabled, lineHeightTextarea, colorDisabled, colorFocus, textColorDisabled, boxShadowFocus, iconSize, colorFocusWarning, boxShadowFocusWarning, borderWarning, borderFocusWarning, borderHoverWarning, colorFocusError, boxShadowFocusError, borderError, borderFocusError, borderHoverError, clearSize, clearColor, clearColorHover, clearColorPressed, iconColor, iconColorDisabled, suffixTextColor, countTextColor, countTextColorDisabled, iconColorHover, iconColorPressed, loadingColor, loadingColorError, loadingColorWarning, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut, fontWeightStrong, fontWeight }, self: { color, borderRadius, textColor, caretColor, caretColorError, caretColorWarning, textDecorationColor, border, borderDisabled, borderHover, borderFocus, placeholderColor, placeholderColorDisabled, lineHeightTextarea, colorDisabled, colorFocus, textColorDisabled, boxShadowFocus, iconSize, colorFocusWarning, boxShadowFocusWarning, borderWarning, borderFocusWarning, borderHoverWarning, colorFocusError, boxShadowFocusError, borderError, borderFocusError, borderHoverError, clearSize, clearColor, clearColorHover, clearColorPressed, iconColor, iconColorDisabled, suffixTextColor, countTextColor, countTextColorDisabled, iconColorHover, iconColorPressed, loadingColor, loadingColorError, loadingColorWarning, selectionColor, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height } } = themeRef.value;
             const { left: paddingLeft, right: paddingRight } = getPadding(padding);
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-count-text-color': countTextColor,
                 '--u-count-text-color-disabled': countTextColorDisabled,
                 '--u-color': color,
-                '--u-selection-color': primaryColor,
+                '--u-selection-color': selectionColor,
                 '--u-font-size': fontSize,
                 '--u-font-weight': fontWeight,
                 '--u-font-weight-strong': fontWeightStrong,
@@ -888,7 +888,10 @@ export default defineComponent({
                             resolveWrappedSlot($slots['clear-icon-placeholder'], (children) => {
                                 return ((this.clearable || children) && (h(UBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, {
                                     placeholder: () => children,
-                                    icon: () => { var _a, _b; return (_b = (_a = this.$slots)['clear-icon']) === null || _b === void 0 ? void 0 : _b.call(_a); }
+                                    icon: () => {
+                                        var _a, _b;
+                                        return ((_b = (_a = this.$slots)['clear-icon']) === null || _b === void 0 ? void 0 : _b.call(_a)) || (h(ClearSmallIcon, null));
+                                    }
                                 })));
                             }),
                             !this.internalLoadingBeforeSuffix ? children : null,
@@ -923,7 +926,7 @@ export default defineComponent({
                 resolveWrappedSlot($slots.suffix, (children) => {
                     return ((this.clearable || children) && (h("div", { class: `${mergedClsPrefix}-input__suffix` }, [
                         this.clearable && (h(UBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, {
-                            icon: () => { var _a; return (_a = $slots['clear-icon']) === null || _a === void 0 ? void 0 : _a.call($slots); },
+                            icon: () => { var _a; return ((_a = $slots['clear-icon']) === null || _a === void 0 ? void 0 : _a.call($slots)) || h(ClearSmallIcon, null); },
                             placeholder: () => { var _a; return (_a = $slots['clear-icon-placeholder']) === null || _a === void 0 ? void 0 : _a.call($slots); }
                         })),
                         children