@uzum-tech/ui 1.5.1 → 1.5.3

package/es/_internal/checkbox/src/use-checkbox.js

@@ -100,7 +100,7 @@ export const useCheckbox = (props) => {
         }
         else {
             const { onChange, 'onUpdate:checked': _onUpdateCheck, onUpdateChecked } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             const nextChecked = renderedCheckedRef.value
                 ? props.uncheckedValue
                 : props.checkedValue;
@@ -112,8 +112,8 @@ export const useCheckbox = (props) => {
             }
             if (onChange)
                 call(onChange, nextChecked, e); // deprecated
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
             uncontrolledCheckedRef.value = nextChecked;
         }
     }

package/es/_internal/radio/src/use-radio.js

@@ -84,15 +84,15 @@ function useRadio(props) {
         }
         else {
             const { onUpdateChecked, 'onUpdate:checked': _onUpdateChecked, onChange } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onUpdateChecked)
                 call(onUpdateChecked, true);
             if (_onUpdateChecked)
                 call(_onUpdateChecked, true);
             if (onChange)
                 onChange(e);
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
             uncontrolledCheckedRef.value = true;
         }
     }

package/es/_internal/typography/src/styles/text.cssr.js

@@ -71,7 +71,6 @@ export default cB('text', `
  `), c('p&', `
  box-sizing: border-box;
  transition: color .3s var(--u-bezier);
- margin: var(--u-margin);
  font-size: var(--u-font-size);
  line-height: var(--u-line-height);
  color: var(--u-text-color);

package/es/_internal/typography/styles/light.js

@@ -2,7 +2,7 @@ import { commonLight } from '../../../styles';
 export const self = (vars) => {
     const { borderRadiusSmall, brandPrimary500, elementsQuaternary, textPrimary, brandQuaternary500, staticRed, staticOrange, staticGreen, elementsTertiary, fontBodyMedium, lineHeightBodyMedium, codeBorder } = vars;
     return {
-        margin: '16px 0 16px 0',
+        margin: '0px',
         aTextColor: brandPrimary500,
         blockquoteTextColor: textPrimary,
         blockquotePrefixColor: elementsQuaternary,

package/es/_mixins/use-form-item.d.ts

@@ -28,10 +28,10 @@ export interface UseFormItem<T> {
     mergedSizeRef: ComputedRef<T>;
     mergedDisabledRef: ComputedRef<boolean>;
     mergedStatusRef: ComputedRef<FormValidationStatus | undefined>;
-    nTriggerFormBlur: () => void;
-    nTriggerFormChange: () => void;
-    nTriggerFormFocus: () => void;
-    nTriggerFormInput: () => void;
+    triggerFormBlur: () => void;
+    triggerFormChange: () => void;
+    triggerFormFocus: () => void;
+    triggerFormInput: () => void;
 }
 export default function useFormItem<T extends AllowedSize = FormItemSize>(props: UseFormItemProps<T>, { defaultSize, mergedSize, mergedDisabled }?: UseFormItemOptions<T>): UseFormItem<T>;
 export {};

package/es/_mixins/use-form-item.js

@@ -45,22 +45,22 @@ export default function useFormItem(props, { defaultSize = 'medium', mergedSize,
         mergedSizeRef,
         mergedDisabledRef,
         mergedStatusRef,
-        nTriggerFormBlur() {
+        triggerFormBlur() {
             if (UFormItem) {
                 UFormItem.handleContentBlur();
             }
         },
-        nTriggerFormChange() {
+        triggerFormChange() {
             if (UFormItem) {
                 UFormItem.handleContentChange();
             }
         },
-        nTriggerFormFocus() {
+        triggerFormFocus() {
             if (UFormItem) {
                 UFormItem.handleContentFocus();
             }
         },
-        nTriggerFormInput() {
+        triggerFormInput() {
             if (UFormItem) {
                 UFormItem.handleContentInput();
             }

package/es/_styles/common/dark.js

@@ -1,4 +1,4 @@
 import commonVariables from './_common';
-const derived = Object.assign(Object.assign({ name: 'common' }, commonVariables), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247', shadowDepth: '0px 8px 8px 0px rgba(255, 255, 255, 0.25)' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
+const derived = Object.assign(Object.assign({ name: 'common' }, commonVariables), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247', shadowDepth: '0px 8px 8px 0px rgba(255, 255, 255, 0.25)' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
  });
 export default derived;

package/es/_styles/common/light.d.ts

@@ -5,6 +5,9 @@ declare const derived: {
     scrollbarHeight: string;
     scrollbarBorderRadius: string;
     opacityDisabled: string;
+    brand150: string;
+    brand350: string;
+    brand550: string;
     brandPrimary50: string;
     brandPrimary100: string;
     brandPrimary200: string;

package/es/_styles/common/light.js

@@ -1,3 +1,3 @@
 import commonVariables from './_common';
-const derived = Object.assign(Object.assign({ name: 'common' }, commonVariables), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', shadowDepth: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)' });
+const derived = Object.assign(Object.assign({ name: 'common' }, commonVariables), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', shadowDepth: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)' });
 export default derived;

package/es/_utils/composable/composables.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+export declare function useIsMobile(): import("vue").ComputedRef<boolean>;
+export declare function useIsTablet(): import("vue").ComputedRef<boolean>;
+export declare function useIsSmallDesktop(): import("vue").ComputedRef<boolean>;
+export declare const i18n: {
+    (data: Record<string, Record<string, string>>): {
+        locale: Ref<string>;
+        t(key: string): string;
+    };
+    provide(localeRef: Ref): void;
+};

package/es/_utils/composable/composables.js

@@ -0,0 +1,40 @@
+import { useBreakpoint, useMemo } from 'vooks';
+import { inject, provide, reactive, toRef, watchEffect } from 'vue';
+export function useIsMobile() {
+    const breakpointRef = useBreakpoint();
+    return useMemo(() => {
+        return breakpointRef.value === 'xs';
+    });
+}
+export function useIsTablet() {
+    const breakpointRef = useBreakpoint();
+    return useMemo(() => {
+        return breakpointRef.value === 's';
+    });
+}
+export function useIsSmallDesktop() {
+    const breakpointRef = useBreakpoint();
+    return useMemo(() => {
+        return breakpointRef.value === 'm';
+    });
+}
+export const i18n = function (data) {
+    const localeReactive = inject('i18n', null);
+    if (!localeReactive) {
+        throw new Error('i18n context not provided');
+    }
+    return {
+        locale: toRef(localeReactive, 'locale'),
+        t(key) {
+            const { locale } = localeReactive;
+            return data[locale][key];
+        }
+    };
+};
+i18n.provide = function (localeRef) {
+    const localeReactive = reactive({ locale: '' });
+    watchEffect(() => {
+        localeReactive.locale = localeRef.value;
+    });
+    provide('i18n', localeReactive);
+};

package/es/_utils/index.d.ts

@@ -1,6 +1,6 @@
 export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, getFirstSlotVNode, createDataKey, createRefSetter, createInjectionKey, resolveSlot, resolveSlotWithProps, resolveWrappedSlot, isSlotEmpty, mergeEventHandlers, isNodeVShowFalse, resolveWrappedSlotWithProps, Wrapper } from './vue';
 export type { MaybeArray } from './vue';
-export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute } from './uzum';
+export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute, isArrayShallowEqual } from './uzum';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes, Mutable } from './uzum';
 export { formatLength, color2Class } from './css';
 export { createKey } from './cssr';

package/es/_utils/index.js

@@ -1,5 +1,5 @@
 export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, getFirstSlotVNode, createDataKey, createRefSetter, createInjectionKey, resolveSlot, resolveSlotWithProps, resolveWrappedSlot, isSlotEmpty, mergeEventHandlers, isNodeVShowFalse, resolveWrappedSlotWithProps, Wrapper } from './vue';
-export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute } from './uzum';
+export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute, isArrayShallowEqual } from './uzum';
 export { formatLength, color2Class } from './css';
 export { createKey } from './cssr';
 export { isJsdom } from './env/is-jsdom';

package/es/_utils/uzum/index.d.ts

@@ -3,3 +3,4 @@ export { smallerSize, largerSize } from './prop';
 export { getTitleAttribute } from './attribute';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes } from './extract-public-props';
 export type { Mutable } from './mutable';
+export { isArrayShallowEqual } from './value';

package/es/_utils/uzum/index.js

@@ -1,3 +1,4 @@
 export { warn, warnOnce, throwError } from './warn';
 export { smallerSize, largerSize } from './prop';
 export { getTitleAttribute } from './attribute';
+export { isArrayShallowEqual } from './value';

package/es/_utils/uzum/value.d.ts

@@ -0,0 +1 @@
+export declare function isArrayShallowEqual<T extends readonly unknown[]>(left: T | null, right: T | null): boolean;

package/es/_utils/uzum/value.js

@@ -0,0 +1,9 @@
+export function isArrayShallowEqual(left, right) {
+    if (left === right)
+        return true;
+    if (left === null || right === null)
+        return false;
+    if (left.length !== right.length)
+        return false;
+    return left.every((item, index) => item === right[index]);
+}

package/es/_utils/vue/resolve-slot.d.ts

@@ -3,7 +3,7 @@ import { type Slot, type VNodeArrayChildren, type VNodeChild } from 'vue';
  * We shouldn't use the following functions with slot flags `_: 1, 2, 3`
  */
 export declare function resolveSlot(slot: Slot | undefined, fallback: () => VNodeArrayChildren): VNodeArrayChildren;
-export declare function resolveSlotWithProps<T>(slot: Slot | undefined, props: T, fallback: (props: T) => VNodeArrayChildren): VNodeArrayChildren;
+export declare function resolveSlotWithProps<T>(slot: Slot<T> | undefined, props: T, fallback: (props: T) => VNodeArrayChildren): VNodeArrayChildren;
 /**
  * Resolve slot with wrapper if content exists, no fallback
  */

package/es/alert/styles/light.js

@@ -1,20 +1,20 @@
 import { commonLight } from '../../_styles/common';
 import commonVars from './_common';
 export const self = (vars) => {
-    const { iconMedium, closeMedium, fontTitleSmall, lineHeightTitleSmall, fontWeightStrong, fontWeightBold, fontBodyLarge, lineHeightBodyLarge, fontWeight, borderRadiusLarge, staticBlack, staticWhite, transparencyTertiary, transparencyQuinary, transparencySecondary, transparencyPrimary, elementsTertiary, textPrimary, staticGreen, brandSecondary600, staticRed, brandPrimary500 } = vars;
-    return Object.assign(Object.assign({}, commonVars), { iconSize: iconMedium, closeIconSize: iconMedium, closeSize: closeMedium, titleFontSizeAlert: fontTitleSmall, titleLineHeightAlert: lineHeightTitleSmall, titleFontWeightAlert: fontWeightStrong, descriptionFontSizeAlert: fontBodyLarge, descriptionLineHeightAlert: lineHeightBodyLarge, descriptionFontWeightAlert: fontWeight, titleFontSizeBanner: fontBodyLarge, titleLineHeightBanner: lineHeightBodyLarge, titleFontWeightBanner: fontWeightBold, descriptionFontSizeBanner: fontBodyLarge, descriptionLineHeightBanner: lineHeightBodyLarge, descriptionFontWeightBanner: fontWeight, borderRadius: borderRadiusLarge, 
+    const { iconMedium, closeMedium, fontTitleSmall, lineHeightTitleSmall, fontWeightStrong, fontWeightBold, fontBodyLarge, lineHeightBodyLarge, fontWeight, borderRadius, staticBlack, staticWhite, transparencyTertiary, transparencyQuinary, transparencySecondary, transparencyPrimary, elementsTertiary, textPrimary, brand150, brand350, brand550, brandPrimary50, staticRed } = vars;
+    return Object.assign(Object.assign({}, commonVars), { iconSize: iconMedium, closeIconSize: '18px', closeSize: closeMedium, titleFontSizeAlert: fontTitleSmall, titleLineHeightAlert: lineHeightTitleSmall, titleFontWeightAlert: fontWeightStrong, descriptionFontSizeAlert: fontBodyLarge, descriptionLineHeightAlert: lineHeightBodyLarge, descriptionFontWeightAlert: fontWeight, titleFontSizeBanner: fontBodyLarge, titleLineHeightBanner: lineHeightBodyLarge, titleFontWeightBanner: fontWeightBold, descriptionFontSizeBanner: fontBodyLarge, descriptionLineHeightBanner: lineHeightBodyLarge, descriptionFontWeightBanner: fontWeight, borderRadius, 
         // Default
         color: staticBlack, titleTextColor: staticWhite, iconColor: staticWhite, contentTextColor: staticWhite, closeColorHover: transparencyTertiary, closeColorPressed: transparencyQuinary, closeIconColor: staticWhite, closeIconColorHover: staticWhite, closeIconColorPressed: staticWhite, 
         // Info
         colorInfo: elementsTertiary, titleTextColorInfo: textPrimary, iconColorInfo: textPrimary, contentTextColorInfo: textPrimary, closeColorHoverInfo: transparencySecondary, closeColorPressedInfo: transparencyPrimary, closeIconColorInfo: textPrimary, closeIconColorHoverInfo: textPrimary, closeIconColorPressedInfo: textPrimary, 
         // Success
-        colorSuccess: staticGreen, titleTextColorSuccess: staticWhite, iconColorSuccess: staticWhite, contentTextColorSuccess: staticWhite, closeColorHoverSuccess: transparencyTertiary, closeColorPressedSuccess: transparencyQuinary, closeIconColorSuccess: staticWhite, closeIconColorHoverSuccess: staticWhite, closeIconColorPressedSuccess: staticWhite, 
+        colorSuccess: brand350, titleTextColorSuccess: staticBlack, iconColorSuccess: staticBlack, contentTextColorSuccess: staticBlack, closeColorHoverSuccess: transparencyTertiary, closeColorPressedSuccess: transparencyQuinary, closeIconColorSuccess: staticBlack, closeIconColorHoverSuccess: staticBlack, closeIconColorPressedSuccess: staticBlack, 
         // Warning
-        colorWarning: brandSecondary600, titleTextColorWarning: staticBlack, iconColorWarning: staticBlack, contentTextColorWarning: staticBlack, closeColorHoverWarning: transparencyTertiary, closeColorPressedWarning: transparencyQuinary, closeIconColorWarning: staticBlack, closeIconColorHoverWarning: staticBlack, closeIconColorPressedWarning: staticBlack, 
+        colorWarning: brand150, titleTextColorWarning: staticBlack, iconColorWarning: staticBlack, contentTextColorWarning: staticBlack, closeColorHoverWarning: transparencyTertiary, closeColorPressedWarning: transparencyQuinary, closeIconColorWarning: staticBlack, closeIconColorHoverWarning: staticBlack, closeIconColorPressedWarning: staticBlack, 
         // Error
-        colorError: staticRed, titleTextColorError: staticWhite, iconColorError: staticWhite, contentTextColorError: staticWhite, closeColorHoverError: transparencyTertiary, closeColorPressedError: transparencyQuinary, closeIconColorError: staticWhite, closeIconColorHoverError: staticWhite, closeIconColorPressedError: staticWhite, 
+        colorError: brand550, titleTextColorError: staticBlack, iconColorError: staticRed, contentTextColorError: staticBlack, closeColorHoverError: transparencyTertiary, closeColorPressedError: transparencyQuinary, closeIconColorError: staticBlack, closeIconColorHoverError: staticBlack, closeIconColorPressedError: staticBlack, 
         // Primary
-        colorPrimary: brandPrimary500, titleTextColorPrimary: staticWhite, iconColorPrimary: staticWhite, contentTextColorPrimary: staticWhite, closeColorHoverPrimary: transparencyTertiary, closeColorPressedPrimary: transparencyQuinary, closeIconColorPrimary: staticWhite, closeIconColorHoverPrimary: staticWhite, closeIconColorPressedPrimary: staticWhite });
+        colorPrimary: brandPrimary50, titleTextColorPrimary: staticBlack, iconColorPrimary: staticBlack, contentTextColorPrimary: staticBlack, closeColorHoverPrimary: transparencyTertiary, closeColorPressedPrimary: transparencyQuinary, closeIconColorPrimary: staticBlack, closeIconColorHoverPrimary: staticBlack, closeIconColorPressedPrimary: staticBlack });
 };
 const alertLight = {
     name: 'Alert',

package/es/auto-complete/src/AutoComplete.js

@@ -79,7 +79,7 @@ export default defineComponent({
         const treeMateRef = computed(() => createTreeMate(selectOptionsRef.value, createTmOptions('value', 'children')));
         function doUpdateValue(value) {
             const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onInput } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onUpdateValue)
                 call(onUpdateValue, value);
             if (_onUpdateValue)
@@ -87,30 +87,30 @@ export default defineComponent({
             if (onInput)
                 call(onInput, value);
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function doSelect(value) {
             const { onSelect } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onSelect)
                 call(onSelect, value);
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function doBlur(e) {
             const { onBlur } = props;
-            const { nTriggerFormBlur } = formItem;
+            const { triggerFormBlur } = formItem;
             if (onBlur)
                 call(onBlur, e);
-            nTriggerFormBlur();
+            triggerFormBlur();
         }
         function doFocus(e) {
             const { onFocus } = props;
-            const { nTriggerFormFocus } = formItem;
+            const { triggerFormFocus } = formItem;
             if (onFocus)
                 call(onFocus, e);
-            nTriggerFormFocus();
+            triggerFormFocus();
         }
         function doScroll(e) {
             const { onScroll } = props;

package/es/avatar/src/Avatar.d.ts

@@ -28,6 +28,8 @@ export declare const avatarProps: {
     readonly imgProps: PropType<ImgHTMLAttributes>;
     readonly disabled: BooleanConstructor;
     readonly loading: BooleanConstructor;
+    readonly iconColor: StringConstructor;
+    readonly iconSize: PropType<string | number>;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
@@ -98,6 +100,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly imgProps: PropType<ImgHTMLAttributes>;
     readonly disabled: BooleanConstructor;
     readonly loading: BooleanConstructor;
+    readonly iconColor: StringConstructor;
+    readonly iconSize: PropType<string | number>;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
@@ -191,6 +195,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly imgProps: PropType<ImgHTMLAttributes>;
     readonly disabled: BooleanConstructor;
     readonly loading: BooleanConstructor;
+    readonly iconColor: StringConstructor;
+    readonly iconSize: PropType<string | number>;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;

package/es/avatar/src/Avatar.js

@@ -18,7 +18,7 @@ export const avatarProps = Object.assign(Object.assign({}, useTheme.props), { si
     }, bordered: {
         type: Boolean,
         default: undefined
-    }, onError: Function, fallbackSrc: String, intersectionObserverOptions: Object, lazy: Boolean, onLoad: Function, renderPlaceholder: Function, renderFallback: Function, imgProps: Object, disabled: Boolean, loading: Boolean });
+    }, onError: Function, fallbackSrc: String, intersectionObserverOptions: Object, lazy: Boolean, onLoad: Function, renderPlaceholder: Function, renderFallback: Function, imgProps: Object, disabled: Boolean, loading: Boolean, iconColor: String, iconSize: [String, Number] });
 export default defineComponent({
     name: 'Avatar',
     props: avatarProps,
@@ -103,6 +103,12 @@ export default defineComponent({
             const getBackgroundColor = (color) => {
                 return props.disabled || size === 'small' ? 'rgba(0,0,0,0)' : color;
             };
+            const resolveSize = (value, fallback) => {
+                if (value === undefined)
+                    return fallback;
+                value = String(value);
+                return /^\d+$/.test(value) ? `${value}px` : value;
+            };
             return {
                 '--u-font-size': fontSize,
                 '--u-font-weight': fontWeight,
@@ -110,10 +116,10 @@ export default defineComponent({
                 '--u-border-radius': round ? '50%' : borderRadius,
                 '--u-color': getBackgroundColor(color),
                 '--u-text-color': textColor,
-                '--u-icon-color': iconColor,
+                '--u-icon-color': props.iconColor || iconColor,
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-merged-size': `var(--u-avatar-size-override, ${height})`,
-                '--u-icon-size': iconSize
+                '--u-icon-size': resolveSize(props.iconSize, iconSize)
             };
         });
         const themeClassHandle = inlineThemeDisabled

package/es/card-list/src/CardList.js

@@ -63,7 +63,7 @@ export default defineComponent({
         return h(Grid, Object.assign({ class: [`${mergedClsPrefix}-card-list`, themeClass], style: cssVars, cols,
             xGap,
             yGap }, gridProps), () => items.map((card, idx) => h(GridItem, { key: idx, span: card.span || 1 }, () => [
-            h(UCardListItem, Object.assign(Object.assign({ title: card.title, subtitle: card.subtitle, items: card.items, direction: card.direction, dropdown: card.dropdown }, cardProps), { renderDivider: showDivider ? renderDivider : () => null }))
+            h(UCardListItem, Object.assign(Object.assign({ title: card.title, subtitle: card.subtitle, items: card.items, direction: card.direction, embedded: card.embedded, dropdown: card.dropdown }, cardProps), { renderDivider: showDivider ? renderDivider : () => null }))
         ])));
     }
 });

package/es/card-list/src/CardListItem.d.ts

@@ -13,6 +13,10 @@ declare const cardListItemProps: {
         readonly default: "horizontal";
     };
     readonly dropdown: BooleanConstructor;
+    readonly embedded: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     readonly renderDivider: PropType<({ index, count, direction }: {
         index: number;
         count: number;
@@ -32,6 +36,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "horizontal";
     };
     readonly dropdown: BooleanConstructor;
+    readonly embedded: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     readonly renderDivider: PropType<({ index, count, direction }: {
         index: number;
         count: number;
@@ -58,6 +66,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "horizontal";
     };
     readonly dropdown: BooleanConstructor;
+    readonly embedded: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     readonly renderDivider: PropType<({ index, count, direction }: {
         index: number;
         count: number;
@@ -66,5 +78,6 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly direction: "vertical" | "horizontal";
     readonly dropdown: boolean;
+    readonly embedded: boolean;
 }, {}>;
 export default _default;

package/es/card-list/src/CardListItem.js

@@ -12,6 +12,10 @@ const cardListItemProps = {
         default: 'horizontal'
     },
     dropdown: Boolean,
+    embedded: {
+        type: Boolean,
+        default: false
+    },
     renderDivider: Function
 };
 export default defineComponent({
@@ -58,7 +62,10 @@ export default defineComponent({
         const isGrouped = !this.dropdown &&
             (this.direction === 'horizontal' || this.direction === 'vertical');
         const isDropdown = this.dropdown;
-        return (h("div", { class: `${mergedClsPrefix}-card-list-item`, onClick: isDropdown && items.length ? this.toggle : undefined, ref: "selfRef" },
+        return (h("div", { class: [
+                `${mergedClsPrefix}-card-list-item`,
+                this.embedded && `${mergedClsPrefix}-card-list-item--embedded`
+            ], onClick: isDropdown && items.length ? this.toggle : undefined, ref: "selfRef" },
             isDropdown && (h("div", { class: `${mergedClsPrefix}-card-list-item__wrapper` },
                 h("div", { class: `${mergedClsPrefix}-card-list-item__wrapper-content` },
                     this.title && (h("div", { class: `${mergedClsPrefix}-card-list-item__title` }, this.title)),
@@ -74,7 +81,7 @@ export default defineComponent({
             isGrouped && items.length > 0 && (h("div", { class: [
                     `${mergedClsPrefix}-card-list-item__items`,
                     this.direction,
-                    this.direction === 'vertical' &&
+                    this.direction === 'horizontal' &&
                         `${mergedClsPrefix}-card-list-item__items--grid`
                 ] }, items.map((item, idx) => [
                 h("div", { class: `${mergedClsPrefix}-card-list-item__item`, key: idx },
@@ -90,10 +97,10 @@ export default defineComponent({
                         : h('div', {
                             class: [
                                 `${mergedClsPrefix}-card-list-item__divider`,
-                                this.direction === 'vertical'
+                                this.direction === 'horizontal'
                                     ? `${mergedClsPrefix}-card-list-item__divider--vertical`
                                     : `${mergedClsPrefix}-card-list-item__divider--horizontal`,
-                                this.direction === 'vertical' &&
+                                this.direction === 'horizontal' &&
                                     `${mergedClsPrefix}-card-list-item__divider--grid`
                             ]
                         }))

package/es/card-list/src/interface.d.ts

@@ -4,6 +4,7 @@ export interface ListItemOptions {
     subtitle?: Primitive;
     span?: number;
     dropdown?: boolean;
+    embedded?: boolean;
     items?: Array<{
         title?: Primitive;
         content?: Primitive;

package/es/card-list/src/styles/index.cssr.js

@@ -1,14 +1,14 @@
-import { c, cB } from '../../../_utils/cssr';
+import { c, cB, cM } from '../../../_utils/cssr';
 export default cB('card-list-item', [c('&', {
   padding: '16px',
-  backgroundColor: 'var(--u-color-embedded)',
   borderRadius: 'var(--u-border-radius)',
-  boxShadow: 'var(--u-box-shadow)',
   display: 'flex',
   flexDirection: 'column',
   gap: '8px',
   position: 'relative'
-}), cB('card-list-item__title', {
+}, [cM('embedded', {
+  backgroundColor: 'var(--u-color-embedded)'
+})]), cB('card-list-item__title', {
   fontSize: 'var(--u-title-font-size)',
   lineHeight: 'var(--u-title-line-height)',
   fontWeight: 'var(--u-title-font-weight)',
@@ -22,10 +22,10 @@ export default cB('card-list-item', [c('&', {
   display: 'flex',
   gap: '0'
 }, [c('&.horizontal', {
-  flexDirection: 'column'
-}), c('&.vertical', {
   flexDirection: 'row',
   alignItems: 'stretch'
+}), c('&.vertical', {
+  flexDirection: 'column'
 })]), cB('card-list-item__items--grid', {
   display: 'grid',
   gridAutoFlow: 'column',

package/es/card-list/styles/light.js

@@ -1,6 +1,6 @@
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { textSecondary, textPrimary, fontWeight, fontWeightBold, fontBodyLarge, fontBodyMedium, lineHeightBodyMedium, borderRadiusLarge, containerSecondary, shadowDepth2, elementsQuinary, elementsSecondary } = vars;
+    const { textSecondary, textPrimary, fontWeight, fontWeightBold, fontBodyLarge, fontBodyMedium, lineHeightBodyMedium, borderRadiusLarge, containerSecondary, shadowDepth2, elementsQuaternary, elementsSecondary } = vars;
     return {
         textColor: textSecondary,
         textLineHeight: lineHeightBodyMedium,
@@ -14,7 +14,7 @@ export const self = (vars) => {
         borderRadius: borderRadiusLarge,
         boxShadow: shadowDepth2,
         colorEmbedded: containerSecondary,
-        dividerColor: elementsQuinary,
+        dividerColor: elementsQuaternary,
         dropDownBgColor: elementsSecondary
     };
 };

package/es/cascader/src/Cascader.js

@@ -182,7 +182,7 @@ export default defineComponent({
         }
         function doUpdateValue(value, option, optionPath) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onUpdateValue) {
                 call(onUpdateValue, value, option, optionPath);
             }
@@ -193,8 +193,8 @@ export default defineComponent({
                 call(onChange, value, option, optionPath);
             }
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function updateKeyboardKey(key) {
             keyboardKeyRef.value = key;
@@ -371,17 +371,17 @@ export default defineComponent({
         // --- methods
         function doBlur(e) {
             const { onBlur } = props;
-            const { nTriggerFormBlur } = formItem;
+            const { triggerFormBlur } = formItem;
             if (onBlur)
                 call(onBlur, e);
-            nTriggerFormBlur();
+            triggerFormBlur();
         }
         function doFocus(e) {
             const { onFocus } = props;
-            const { nTriggerFormFocus } = formItem;
+            const { triggerFormFocus } = formItem;
             if (onFocus)
                 call(onFocus, e);
-            nTriggerFormFocus();
+            triggerFormFocus();
         }
         function focusSelectionInput() {
             var _a;