naive-ui 2.22.0 → 2.24.0

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

@@ -1,16 +1,16 @@
-import { h, ref, toRef, computed, defineComponent, Transition, withDirectives } from 'vue';
+import { h, ref, toRef, computed, defineComponent, Transition, withDirectives, watchEffect } from 'vue';
 import { createTreeMate } from 'treemate';
 import { VBinder, VTarget, VFollower } from 'vueuc';
 import { clickoutside } from 'vdirs';
 import { useIsMounted, useMergedState } from 'vooks';
+import { tmOptions } from '../../select/src/utils';
 import { useFormItem, useTheme, useConfig } from '../../_mixins';
-import { call, warn, useAdjustedTo, getFirstSlotVNode } from '../../_utils';
+import { call, useAdjustedTo, getFirstSlotVNode, warnOnce } from '../../_utils';
 import { NInternalSelectMenu } from '../../_internal';
 import { NInput } from '../../input';
 import { autoCompleteLight } from '../styles';
 import { mapAutoCompleteOptionsToSelectOptions } from './utils';
 import style from './styles/index.cssr';
-import { tmOptions } from '../../select/src/utils';
 const autoCompleteProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, bordered: {
         type: Boolean,
         default: undefined
@@ -26,25 +26,23 @@ const autoCompleteProps = Object.assign(Object.assign({}, useTheme.props), { to:
     }, disabled: {
         type: Boolean,
         default: undefined
-    }, placeholder: String, value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, getShow: Function, inputProps: Object, size: String, options: {
+    }, placeholder: String, value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, getShow: Function, inputProps: Object, renderOption: Function, renderLabel: Function, size: String, options: {
         type: Array,
         default: () => []
     }, zIndex: Number, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onSelect: [Function, Array], onBlur: [Function, Array], onFocus: [Function, Array], 
     // deprecated
-    onInput: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('auto-complete', '`on-input` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onInput: [Function, Array] });
 export default defineComponent({
     name: 'AutoComplete',
     props: autoCompleteProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.onInput !== undefined) {
+                    warnOnce('auto-complete', '`on-input` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedBorderedRef, namespaceRef, mergedClsPrefixRef } = useConfig(props);
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
@@ -206,8 +204,8 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow } } = themeRef.value;
                 return {
-                    '--menu-box-shadow': menuBoxShadow,
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-menu-box-shadow': menuBoxShadow,
+                    '--n-bezier': cubicBezierEaseInOut
                 };
             }),
             mergedBordered: mergedBorderedRef,
@@ -242,7 +240,7 @@ export default defineComponent({
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
                             default: () => this.active
                                 ? withDirectives(h(NInternalSelectMenu, { clsPrefix: mergedClsPrefix, ref: "menuInstRef", theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
-                                        .InternalSelectMenu, "auto-pending": true, class: `${mergedClsPrefix}-auto-complete-menu`, style: this.cssVars, treeMate: this.treeMate, multiple: false, size: "medium", onToggle: this.handleToggle }), [[clickoutside, this.handleClickOutsideMenu]])
+                                        .InternalSelectMenu, "auto-pending": true, class: `${mergedClsPrefix}-auto-complete-menu`, style: this.cssVars, treeMate: this.treeMate, multiple: false, renderLabel: this.renderLabel, renderOption: this.renderOption, size: "medium", onToggle: this.handleToggle }), [[clickoutside, this.handleClickOutsideMenu]])
                                 : null
                         }))
                     })

package/es/auto-complete/src/styles/index.cssr.js

@@ -1,7 +1,7 @@
 import { c, cB } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --bezier
-// --menu-box-shadow
+// --n-bezier
+// --n-menu-box-shadow
 
 export default c([cB('auto-complete', `
  z-index: auto;
@@ -10,7 +10,7 @@ export default c([cB('auto-complete', `
  width: 100%;
  `), cB('auto-complete-menu', `
  margin: 4px 0;
- box-shadow: var(--menu-box-shadow);
+ box-shadow: var(--n-menu-box-shadow);
  `, [fadeInScaleUpTransition({
-  originalTransition: 'background-color .3s var(--bezier)'
+  originalTransition: 'background-color .3s var(--n-bezier)'
 })])]);

package/es/avatar/index.d.ts

@@ -1,2 +1,4 @@
 export { default as NAvatar } from './src/Avatar';
 export type { AvatarProps } from './src/Avatar';
+export { default as NAvatarGroup } from './src/AvatarGroup';
+export type { AvatarGroupProps } from './src/AvatarGroup';

package/es/avatar/index.js

@@ -1 +1,2 @@
 export { default as NAvatar } from './src/Avatar';
+export { default as NAvatarGroup } from './src/AvatarGroup';

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

@@ -1,17 +1,22 @@
 import { PropType } from 'vue';
+import type { Size, ObjectFit } from './interface';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const avatarProps: {
-    readonly size: {
-        readonly type: PropType<number | "small" | "medium" | "large">;
-        readonly default: "medium";
-    };
+export declare const avatarProps: {
+    readonly size: PropType<Size>;
     readonly src: StringConstructor;
-    readonly circle: BooleanConstructor;
-    readonly objectFit: {
-        readonly type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
-        readonly default: "fill";
+    readonly circle: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly objectFit: PropType<ObjectFit>;
+    readonly round: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly bordered: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
     };
-    readonly round: BooleanConstructor;
     readonly onError: PropType<(e: Event) => void>;
     readonly fallbackSrc: StringConstructor;
     /** @deprecated */
@@ -19,47 +24,60 @@ declare const avatarProps: {
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>>>;
 };
 export declare type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>;
 declare const _default: import("vue").DefineComponent<{
-    readonly size: {
-        readonly type: PropType<number | "small" | "medium" | "large">;
-        readonly default: "medium";
-    };
+    readonly size: PropType<Size>;
     readonly src: StringConstructor;
-    readonly circle: BooleanConstructor;
-    readonly objectFit: {
-        readonly type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
-        readonly default: "fill";
+    readonly circle: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly objectFit: PropType<ObjectFit>;
+    readonly round: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly bordered: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
     };
-    readonly round: BooleanConstructor;
     readonly onError: PropType<(e: Event) => void>;
     readonly fallbackSrc: StringConstructor;
     /** @deprecated */
@@ -67,45 +85,57 @@ declare const _default: import("vue").DefineComponent<{
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>>>;
 }, {
     textRef: import("vue").Ref<HTMLElement | null>;
     selfRef: import("vue").Ref<HTMLElement | null>;
-    mergedRoundRef: import("vue").ComputedRef<boolean>;
+    mergedRoundRef: import("vue").ComputedRef<boolean | undefined>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     fitTextTransform: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--border-radius': string;
-        '--color': string;
-        '--bezier': string;
-        '--merged-size': string;
+        '--n-font-size': string;
+        '--n-border': string;
+        '--n-border-radius': string;
+        '--n-color': string;
+        '--n-color-modal': string;
+        '--n-color-popover': string;
+        '--n-bezier': string;
+        '--n-merged-size': string;
     }>;
     hasLoadError: import("vue").Ref<boolean>;
     handleError: (e: Event) => void;
@@ -115,56 +145,65 @@ declare const _default: import("vue").DefineComponent<{
     readonly circle?: unknown;
     readonly objectFit?: unknown;
     readonly round?: unknown;
+    readonly bordered?: unknown;
     readonly onError?: unknown;
     readonly fallbackSrc?: unknown;
     readonly color?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
-} & {
-    round: boolean;
-    size: number | "small" | "medium" | "large";
-    circle: boolean;
-    objectFit: "fill" | "none" | "contain" | "cover" | "scale-down";
-} & {
+} & {} & {
     onError?: ((e: Event) => void) | undefined;
     color?: string | undefined;
+    round?: boolean | undefined;
+    size?: Size | undefined;
+    circle?: boolean | undefined;
+    objectFit?: ObjectFit | undefined;
     src?: string | undefined;
     theme?: import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any> | undefined;
     themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>> | undefined;
     builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>> | undefined;
+    bordered?: boolean | undefined;
     fallbackSrc?: string | undefined;
 }>, {
     round: boolean;
-    size: number | "small" | "medium" | "large";
     circle: boolean;
-    objectFit: "fill" | "none" | "contain" | "cover" | "scale-down";
+    bordered: boolean;
 }>;
 export default _default;

package/es/avatar/src/Avatar.js

@@ -1,17 +1,21 @@
 import { h, ref, computed, defineComponent, inject, watch } from 'vue';
 import { VResizeObserver } from 'vueuc';
+import { avatarGroupInjectionKey } from './AvatarGroup';
 import { tagInjectionKey } from '../../tag/src/Tag';
 import { useConfig, useTheme } from '../../_mixins';
 import { avatarLight } from '../styles';
 import { createKey } from '../../_utils';
 import style from './styles/index.cssr';
-const avatarProps = Object.assign(Object.assign({}, useTheme.props), { size: {
-        type: [String, Number],
-        default: 'medium'
-    }, src: String, circle: Boolean, objectFit: {
-        type: String,
-        default: 'fill'
-    }, round: Boolean, onError: Function, fallbackSrc: String, 
+export const avatarProps = Object.assign(Object.assign({}, useTheme.props), { size: [String, Number], src: String, circle: {
+        type: Boolean,
+        default: undefined
+    }, objectFit: String, round: {
+        type: Boolean,
+        default: undefined
+    }, bordered: {
+        type: Boolean,
+        default: undefined
+    }, onError: Function, fallbackSrc: String, 
     /** @deprecated */
     color: String });
 export default defineComponent({
@@ -39,16 +43,34 @@ export default defineComponent({
                 }
             }
         };
+        const NAvatarGroup = inject(avatarGroupInjectionKey, null);
+        const mergedSizeRef = computed(() => {
+            const { size } = props;
+            if (size)
+                return size;
+            const { size: avatarGroupSize } = NAvatarGroup || {};
+            if (avatarGroupSize)
+                return avatarGroupSize;
+            return 'medium';
+        });
         const themeRef = useTheme('Avatar', 'Avatar', style, avatarLight, props, mergedClsPrefixRef);
         const TagInjection = inject(tagInjectionKey, null);
         const mergedRoundRef = computed(() => {
-            if (props.round || props.circle)
+            if (NAvatarGroup)
                 return true;
+            const { round, circle } = props;
+            if (round !== undefined || circle !== undefined)
+                return round || circle;
             if (TagInjection) {
                 return TagInjection.roundRef.value;
             }
             return false;
         });
+        const mergedBorderedRef = computed(() => {
+            if (NAvatarGroup)
+                return true;
+            return props.bordered || false;
+        });
         const handleError = (e) => {
             hasLoadErrorRef.value = true;
             const { onError } = props;
@@ -64,8 +86,11 @@ export default defineComponent({
             mergedClsPrefix: mergedClsPrefixRef,
             fitTextTransform,
             cssVars: computed(() => {
-                const { size, color: propColor } = props;
-                const { self: { borderRadius, fontSize, color }, common: { cubicBezierEaseInOut } } = themeRef.value;
+                const size = mergedSizeRef.value;
+                const round = mergedRoundRef.value;
+                const bordered = mergedBorderedRef.value;
+                const { color: propColor } = props;
+                const { self: { borderRadius, fontSize, color, border, colorModal, colorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 let height;
                 if (typeof size === 'number') {
                     height = `${size}px`;
@@ -74,11 +99,14 @@ export default defineComponent({
                     height = themeRef.value.self[createKey('height', size)];
                 }
                 return {
-                    '--font-size': fontSize,
-                    '--border-radius': mergedRoundRef.value ? '50%' : borderRadius,
-                    '--color': propColor || color,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--merged-size': `var(--avatar-size-override, ${height})`
+                    '--n-font-size': fontSize,
+                    '--n-border': bordered ? border : 'none',
+                    '--n-border-radius': round ? '50%' : borderRadius,
+                    '--n-color': propColor || color,
+                    '--n-color-modal': propColor || colorModal,
+                    '--n-color-popover': propColor || colorPopover,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-merged-size': `var(--n-avatar-size-override, ${height})`
                 };
             }),
             hasLoadError: hasLoadErrorRef,

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

@@ -0,0 +1,52 @@
+import { PropType, CSSProperties, InjectionKey } from 'vue';
+import type { Size } from './interface';
+import type { ExtractPublicPropTypes } from '../../_utils';
+export interface AvatarGroupInjection {
+    size?: Size | undefined;
+}
+interface AvatarOption {
+    src: string;
+}
+export declare const avatarGroupInjectionKey: InjectionKey<AvatarGroupInjection>;
+declare const avatarGroupProps: {
+    readonly max: NumberConstructor;
+    readonly maxStyle: PropType<string | CSSProperties>;
+    readonly options: {
+        readonly type: PropType<AvatarOption[]>;
+        readonly default: () => never[];
+    };
+    readonly vertical: BooleanConstructor;
+    readonly size: PropType<Size | undefined>;
+};
+export declare type AvatarGroupProps = ExtractPublicPropTypes<typeof avatarGroupProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly max: NumberConstructor;
+    readonly maxStyle: PropType<string | CSSProperties>;
+    readonly options: {
+        readonly type: PropType<AvatarOption[]>;
+        readonly default: () => never[];
+    };
+    readonly vertical: BooleanConstructor;
+    readonly size: PropType<Size | undefined>;
+}, {
+    mergedClsPrefix: import("vue").ComputedRef<string>;
+    restOptions: import("vue").ComputedRef<AvatarOption[] | undefined>;
+    displayedOptions: import("vue").ComputedRef<AvatarOption[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly max?: unknown;
+    readonly maxStyle?: unknown;
+    readonly options?: unknown;
+    readonly vertical?: unknown;
+    readonly size?: unknown;
+} & {
+    vertical: boolean;
+    options: AvatarOption[];
+} & {
+    size?: Size | undefined;
+    max?: number | undefined;
+    maxStyle?: string | CSSProperties | undefined;
+}>, {
+    vertical: boolean;
+    options: AvatarOption[];
+}>;
+export default _default;

package/es/avatar/src/AvatarGroup.js

@@ -0,0 +1,61 @@
+import { h, defineComponent, provide, computed } from 'vue';
+import NAvatar from './Avatar';
+import { useConfig, useStyle } from '../../_mixins';
+import style from './styles/avatar-group.cssr';
+export const avatarGroupInjectionKey = Symbol('avatar-group');
+const avatarGroupProps = {
+    max: Number,
+    maxStyle: [Object, String],
+    options: {
+        type: Array,
+        default: () => []
+    },
+    vertical: Boolean,
+    size: [String, Number]
+};
+export default defineComponent({
+    name: 'AvatarGroup',
+    props: avatarGroupProps,
+    setup(props) {
+        const { mergedClsPrefixRef } = useConfig(props);
+        useStyle('AvatarGroup', style, mergedClsPrefixRef);
+        provide(avatarGroupInjectionKey, props);
+        const restOptionsRef = computed(() => {
+            const { max } = props;
+            if (max === undefined)
+                return undefined;
+            const { options } = props;
+            return options.slice(max, options.length);
+        });
+        const displayedOptionsRef = computed(() => {
+            const { options, max } = props;
+            if (max === undefined)
+                return options;
+            if (options.length > max)
+                return options.slice(0, max - 1);
+            if (options.length === max)
+                return options.slice(0, max);
+            return options;
+        });
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            restOptions: restOptionsRef,
+            displayedOptions: displayedOptionsRef
+        };
+    },
+    render() {
+        const { mergedClsPrefix, displayedOptions, restOptions, $slots } = this;
+        return (h("div", { class: [
+                `${mergedClsPrefix}-avatar-group`,
+                this.vertical && `${mergedClsPrefix}-avatar-group--vertical`
+            ], role: "group" },
+            displayedOptions.map((option) => {
+                return $slots.avatar ? ($slots.avatar({ option })) : (h(NAvatar, { src: option.src }));
+            }),
+            restOptions !== undefined &&
+                restOptions.length > 0 &&
+                ($slots.rest ? ($slots.rest({ options: restOptions, rest: restOptions.length })) : (h(NAvatar, { style: this.maxStyle }, {
+                    default: () => `+${restOptions.length}`
+                })))));
+    }
+});

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

@@ -0,0 +1,2 @@
+export declare type Size = number | 'small' | 'medium' | 'large';
+export declare type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';

package/es/avatar/src/interface.js

@@ -0,0 +1 @@
+export {};

package/es/avatar/src/styles/avatar-group.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/avatar/src/styles/avatar-group.cssr.js

@@ -0,0 +1,14 @@
+import { c, cB, cM, cNotM } from '../../../_utils/cssr/index';
+export default cB('avatar-group', `
+ flex-wrap: nowrap;
+ display: inline-flex;
+ position: relative;
+`, [cNotM('vertical', {
+  flexDirection: 'row'
+}, [cB('avatar', [c('&:not(:first-child)', `
+ margin-left: -12px;
+ `)])]), cM('vertical', {
+  flexDirection: 'column'
+}, [cB('avatar', [c('&:not(:first-child)', `
+ margin-top: -12px;
+ `)])])]);

package/es/avatar/src/styles/index.cssr.js

@@ -1,25 +1,30 @@
-import { c, cE, cB } from '../../../_utils/cssr'; // vars:
-// --font-size
-// --border-radius
-// --color
-// --bezier
-// --merged-size
+import { c, cE, cB, insideModal, insidePopover } from '../../../_utils/cssr'; // vars:
+// --n-font-size
+// --n-border-radius
+// --n-color
+// --n-color-modal
+// --n-color-popover
+// --n-bezier
+// --n-merged-size
 
 export default cB('avatar', `
- width: var(--merged-size);
- height: var(--merged-size);
+ width: var(--n-merged-size);
+ height: var(--n-merged-size);
  color: #FFF;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  display: inline-flex;
  position: relative;
  overflow: hidden;
  text-align: center;
- border-radius: var(--border-radius);
- background-color: var(--color);
+ border: var(--n-border);
+ border-radius: var(--n-border-radius);
+ --n-merged-color: var(--n-color);
+ background-color: var(--n-merged-color);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
-`, [c('img', `
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+`, [insideModal(c('&', '--n-merged-color: var(--n-color-modal);')), insidePopover(c('&', '--n-merged-color: var(--n-color-popover);')), c('img', `
  width: 100%;
  height: 100%;
  `), cE('text', `
@@ -30,5 +35,5 @@ export default cB('avatar', `
  top: 50%;
  `), cB('icon', `
  vertical-align: bottom;
- font-size: calc(var(--merged-size) - 6px);
+ font-size: calc(var(--n-merged-size) - 6px);
  `), cE('text', 'line-height: 1.25')]);

package/es/avatar/styles/light.d.ts

@@ -3,12 +3,15 @@ import type { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
     borderRadius: string;
     fontSize: string;
+    border: string;
     heightTiny: string;
     heightSmall: string;
     heightMedium: string;
     heightLarge: string;
     heightHuge: string;
     color: string;
+    colorModal: string;
+    colorPopover: string;
 };
 export declare type AvatarThemeVars = ReturnType<typeof self>;
 declare const avatarLight: Theme<'Avatar', AvatarThemeVars>;