naive-ui 2.18.1 → 2.19.2

package/es/anchor/src/AnchorAdapter.d.ts

@@ -3,6 +3,10 @@ export interface AnchorInst {
     scrollTo: (href: string) => void;
 }
 declare const anchorProps: {
+    readonly type: {
+        readonly type: import("vue").PropType<"block" | "rail">;
+        readonly default: "rail";
+    };
     readonly showRail: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -41,10 +45,7 @@ declare const anchorProps: {
         readonly validator: () => boolean;
         readonly default: undefined;
     };
-    readonly affix: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly affix: BooleanConstructor;
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Anchor", {
         borderRadius: string;
         railColor: string;
@@ -87,6 +88,10 @@ declare const anchorProps: {
 };
 export declare type AnchorProps = ExtractPublicPropTypes<typeof anchorProps>;
 declare const _default: import("vue").DefineComponent<{
+    readonly type: {
+        readonly type: import("vue").PropType<"block" | "rail">;
+        readonly default: "rail";
+    };
     readonly showRail: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -125,10 +130,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: () => boolean;
         readonly default: undefined;
     };
-    readonly affix: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly affix: BooleanConstructor;
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Anchor", {
         borderRadius: string;
         railColor: string;
@@ -172,6 +174,7 @@ declare const _default: import("vue").DefineComponent<{
     scrollTo(href: string): void;
     renderAnchor: () => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly type?: unknown;
     readonly showRail?: unknown;
     readonly showBackground?: unknown;
     readonly bound?: unknown;
@@ -191,6 +194,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
 } & {
+    type: "block" | "rail";
     bound: number;
     position: "absolute" | "fix";
     affix: boolean;
@@ -247,6 +251,7 @@ declare const _default: import("vue").DefineComponent<{
     offsetBottom?: number | undefined;
     offsetTarget?: string | import("./utils").OffsetTarget | (() => HTMLElement) | undefined;
 }>, {
+    type: "block" | "rail";
     bound: number;
     position: "absolute" | "fix";
     target: (() => HTMLElement) | undefined;

package/es/anchor/src/AnchorAdapter.js

@@ -6,10 +6,7 @@ import { keep } from '../../_utils';
 import { anchorLight } from '../styles';
 import style from './styles/index.cssr';
 import NBaseAnchor, { baseAnchorProps, baseAnchorPropKeys } from './BaseAnchor';
-const anchorProps = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), { affix: {
-        type: Boolean,
-        default: false
-    } }), affixProps), baseAnchorProps);
+const anchorProps = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), { affix: Boolean }), affixProps), baseAnchorProps);
 export default defineComponent({
     name: 'Anchor',
     props: anchorProps,
@@ -18,8 +15,9 @@ export default defineComponent({
         const themeRef = useTheme('Anchor', 'Anchor', style, anchorLight, props, mergedClsPrefixRef);
         const anchorRef = ref(null);
         const cssVarsRef = computed(() => {
-            const { self: { railColor, linkColor, railColorActive, linkTextColor, linkTextColorHover, linkTextColorPressed, linkTextColorActive, linkFontSize, railWidth, linkPadding }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { self: { railColor, linkColor, railColorActive, linkTextColor, linkTextColorHover, linkTextColorPressed, linkTextColorActive, linkFontSize, railWidth, linkPadding, borderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
+                '--link-border-radius': borderRadius,
                 '--link-color': linkColor,
                 '--link-font-size': linkFontSize,
                 '--link-text-color': linkTextColor,

package/es/anchor/src/BaseAnchor.d.ts

@@ -4,6 +4,10 @@ export interface BaseAnchorInst {
     setActiveHref: (href: string) => void;
 }
 export declare const baseAnchorProps: {
+    readonly type: {
+        readonly type: PropType<"block" | "rail">;
+        readonly default: "rail";
+    };
     readonly showRail: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -19,12 +23,16 @@ export declare const baseAnchorProps: {
     readonly ignoreGap: BooleanConstructor;
     readonly offsetTarget: PropType<string | OffsetTarget | (() => HTMLElement)>;
 };
-export declare const baseAnchorPropKeys: ("bound" | "showRail" | "showBackground" | "ignoreGap" | "offsetTarget")[];
+export declare const baseAnchorPropKeys: ("type" | "bound" | "showRail" | "showBackground" | "ignoreGap" | "offsetTarget")[];
 declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: {
         type: StringConstructor;
         required: true;
     };
+    type: {
+        readonly type: PropType<"block" | "rail">;
+        readonly default: "rail";
+    };
     showRail: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -45,14 +53,18 @@ declare const _default: import("vue").DefineComponent<{
     slotRef: import("vue").Ref<HTMLElement | null>;
     setActiveHref: (href: string, transition?: boolean) => void;
     activeHref: import("vue").Ref<string | null>;
+    isBlockType: import("vue").ComputedRef<boolean>;
+    mergedShowRail: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     mergedClsPrefix?: unknown;
+    type?: unknown;
     showRail?: unknown;
     showBackground?: unknown;
     bound?: unknown;
     ignoreGap?: unknown;
     offsetTarget?: unknown;
 } & {
+    type: "block" | "rail";
     bound: number;
     mergedClsPrefix: string;
     showRail: boolean;
@@ -61,6 +73,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     offsetTarget?: string | OffsetTarget | (() => HTMLElement) | undefined;
 }>, {
+    type: "block" | "rail";
     bound: number;
     showRail: boolean;
     showBackground: boolean;

package/es/anchor/src/BaseAnchor.js

@@ -1,4 +1,4 @@
-import { h, nextTick, ref, provide, defineComponent, watch, onBeforeUnmount, onMounted, toRef } from 'vue';
+import { h, nextTick, ref, provide, defineComponent, watch, onBeforeUnmount, onMounted, toRef, computed } from 'vue';
 import { unwrapElement } from 'seemly';
 import { onFontsReady } from 'vooks';
 import { keysOf } from '../../_utils';
@@ -6,6 +6,10 @@ import { anchorInjectionKey } from './Link';
 import { throttle } from 'lodash-es';
 import { getOffset } from './utils';
 export const baseAnchorProps = {
+    type: {
+        type: String,
+        default: 'rail'
+    },
     showRail: {
         type: Boolean,
         default: true
@@ -35,6 +39,12 @@ export default defineComponent({
         const slotRef = ref(null);
         const barRef = ref(null);
         const selfRef = ref(null);
+        const isBlockTypeRef = computed(() => {
+            return props.type === 'block';
+        });
+        const mergedShowRailRef = computed(() => {
+            return !isBlockTypeRef.value && props.showRail;
+        });
         function disableTransitionOneTick() {
             const { value: barEl } = barRef;
             const { value: slotEl } = slotRef;
@@ -207,7 +217,7 @@ export default defineComponent({
         watch(activeHrefRef, (value) => {
             if (value === null) {
                 const { value: slotEl } = slotRef;
-                if (slotEl) {
+                if (slotEl && !isBlockTypeRef.value) {
                     slotEl.style.maxWidth = '0';
                 }
             }
@@ -217,18 +227,21 @@ export default defineComponent({
             barRef,
             slotRef,
             setActiveHref,
-            activeHref: activeHrefRef
+            activeHref: activeHrefRef,
+            isBlockType: isBlockTypeRef,
+            mergedShowRail: mergedShowRailRef
         };
     },
     render() {
         var _a;
-        const { mergedClsPrefix, $slots } = this;
+        const { mergedClsPrefix, mergedShowRail, isBlockType, $slots } = this;
         return (h("div", { class: [
                 `${mergedClsPrefix}-anchor`,
-                this.showRail && `${mergedClsPrefix}-anchor--show-rail`
+                isBlockType && `${mergedClsPrefix}-anchor--block`,
+                mergedShowRail && `${mergedClsPrefix}-anchor--show-rail`
             ], ref: "selfRef" },
-            this.showRail && this.showBackground ? (h("div", { ref: "slotRef", class: `${mergedClsPrefix}-anchor-link-background` })) : null,
-            this.showRail ? (h("div", { class: `${mergedClsPrefix}-anchor-rail` },
+            mergedShowRail && this.showBackground ? (h("div", { ref: "slotRef", class: `${mergedClsPrefix}-anchor-link-background` })) : null,
+            mergedShowRail ? (h("div", { class: `${mergedClsPrefix}-anchor-rail` },
                 h("div", { ref: "barRef", class: [
                         `${mergedClsPrefix}-anchor-rail__bar`,
                         this.activeHref !== null &&

package/es/anchor/src/Link.js

@@ -32,11 +32,11 @@ export default defineComponent({
         }
         return () => {
             const { value: mergedClsPrefix } = NAnchor.mergedClsPrefix;
-            return (h("div", { class: `${mergedClsPrefix}-anchor-link` },
-                h("a", { ref: titleRef, class: [
-                        `${mergedClsPrefix}-anchor-link__title`,
-                        activeRef.value && `${mergedClsPrefix}-anchor-link__title--active`
-                    ], href: props.href, title: getTitleAttribute(props.title), onClick: handleClick }, props.title),
+            return (h("div", { class: [
+                    `${mergedClsPrefix}-anchor-link`,
+                    activeRef.value && `${mergedClsPrefix}-anchor-link--active`
+                ] },
+                h("a", { ref: titleRef, class: [`${mergedClsPrefix}-anchor-link__title`], href: props.href, title: getTitleAttribute(props.title), onClick: handleClick }, props.title),
                 renderSlot(slots, 'default')));
         };
     }

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

@@ -10,17 +10,30 @@ import { c, cE, cB, cM, cNotM } from '../../../_utils/cssr'; // vars:
 // --rail-color-active
 // --rail-width
 // --link-padding
+// --link-border-radius
 
 export default cB('anchor', `
- padding-left: var(--rail-width);
  position: relative;
-`, [cB('anchor-link-background', `
- position: absolute;
- left: calc(var(--rail-width) / 2);
- width: 100%;
+`, [cNotM('block', `
+ padding-left: var(--rail-width);
+ `, [cB('anchor-link', [c('+, >', [cB('anchor-link', `
+ margin-top: .5em;
+ `)])]), cB('anchor-link-background', `
  max-width: 0;
  border-top-right-radius: 10.5px;
  border-bottom-right-radius: 10.5px;
+ `), cNotM('show-rail', [c('>', [cB('anchor-link', 'padding-left: 0;')])])]), cM('block', [cB('anchor-link', `
+ margin-bottom: 4px;
+ padding: 2px 8px;
+ transition: background-color .3s var(--bezier);
+ background-color: transparent;
+ border-radius: var(--link-border-radius);
+ `, [cM('active', `
+ background-color: var(--link-color);
+ `)])]), cB('anchor-link-background', `
+ position: absolute;
+ left: calc(var(--rail-width) / 2);
+ width: 100%;
  background-color: var(--link-color);
  transition:
  top .15s var(--bezier),
@@ -47,8 +60,6 @@ export default cB('anchor', `
  background-color .3s var(--bezier);
  `, [cM('active', {
   backgroundColor: 'var(--rail-color-active)'
-})])]), cNotM('show-rail', [c('>', [cB('anchor-link', {
-  paddingLeft: 0
 })])]), cB('anchor-link', `
  padding: var(--link-padding);
  position: relative;
@@ -57,8 +68,12 @@ export default cB('anchor', `
  min-height: 1.5em;
  display: flex;
  flex-direction: column;
- `, [c('+, >', [cB('anchor-link', `
- margin-top: .5em;
+ `, [cM('active', [cE('title', `
+ color: var(--link-text-color-active);
+ `)]), c('&:hover, &:focus', [cE('title', `
+ color: var(--link-text-color-hover);
+ `)]), c('&:active', [cE('title', `
+ color: var(--link-text-color-pressed);
  `)]), cE('title', `
  outline: none;
  max-width: 100%;
@@ -71,10 +86,4 @@ export default cB('anchor', `
  padding-right: 16px;
  transition: color .3s var(--bezier);
  color: var(--link-text-color);
- `, [c('&:hover, &:focus', {
-  color: 'var(--link-text-color-hover)'
-}), c('&:active', {
-  color: 'var(--link-text-color-pressed)'
-}), cM('active', {
-  color: 'var(--link-text-color-active)'
-})])])]);
+ `)])]);

package/es/auto-complete/index.d.ts

@@ -1,2 +1,3 @@
 export { default as NAutoComplete } from './src/AutoComplete';
 export type { AutoCompleteProps } from './src/AutoComplete';
+export type { AutoCompleteOption, AutoCompleteGroupOption } from './src/interface';

package/es/auto-complete/src/AutoComplete.d.ts

@@ -72,6 +72,7 @@ declare const autoCompleteProps: {
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -187,6 +188,7 @@ declare const autoCompleteProps: {
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -302,6 +304,7 @@ declare const autoCompleteProps: {
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -464,6 +467,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -579,6 +583,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -694,6 +699,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -935,6 +941,7 @@ declare const _default: import("vue").DefineComponent<{
                 optionOpacityDisabled: string;
                 optionCheckColor: string;
                 optionColorPending: string;
+                optionColorActive: string;
                 actionTextColor: string;
                 loadingColor: string;
                 height: string;
@@ -1125,6 +1132,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -1240,6 +1248,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -1355,6 +1364,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;

package/es/auto-complete/src/interface.d.ts

@@ -1,7 +1,7 @@
 import { SelectGroupOption, SelectBaseOption } from '../../select/src/interface';
 export declare type AutoCompleteOption = SelectBaseOption<string, string>;
 export interface AutoCompleteGroupOption extends Omit<SelectGroupOption, 'children'> {
-    children: string[];
+    children: AutoCompleteOptions;
 }
 export declare type AutoCompleteOptions = Array<AutoCompleteOption | AutoCompleteGroupOption | string>;
 export declare type OnUpdateValue = (value: string & (string | null)) => void;

package/es/auto-complete/styles/light.d.ts

@@ -25,6 +25,7 @@ declare const autoCompleteLight: import("../../_mixins").Theme<"AutoComplete", {
         optionOpacityDisabled: string;
         optionCheckColor: string;
         optionColorPending: string;
+        optionColorActive: string;
         actionTextColor: string;
         loadingColor: string;
         height: string;

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

@@ -55,6 +55,7 @@ export default c([c('@keyframes badge-wave-spread', {
  left: 100%;
  bottom: calc(100% - 9px);
  font-variant-numeric: tabular-nums;
+ z-index: 1;
  `, [fadeInScaleUpTransition({
   transformOrigin: 'left bottom',
   originalTransform: 'translateX(-50%)'

package/es/card/src/Card.d.ts

@@ -10,6 +10,7 @@ export declare const cardBaseProps: {
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly headerStyle: PropType<string | CSSProperties>;
     readonly footerStyle: PropType<string | CSSProperties>;
+    readonly embedded: BooleanConstructor;
     readonly segmented: {
         readonly type: PropType<boolean | Segmented>;
         readonly default: false;
@@ -29,12 +30,13 @@ export declare const cardBaseProps: {
     readonly hoverable: BooleanConstructor;
     readonly onClose: PropType<MaybeArray<() => void>>;
 };
-export declare const cardBasePropKeys: ("size" | "title" | "contentStyle" | "bordered" | "onClose" | "closable" | "hoverable" | "headerStyle" | "footerStyle" | "segmented")[];
+export declare const cardBasePropKeys: ("size" | "title" | "contentStyle" | "bordered" | "onClose" | "closable" | "hoverable" | "headerStyle" | "footerStyle" | "embedded" | "segmented")[];
 declare const cardProps: {
     title: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
+    embedded: BooleanConstructor;
     segmented: {
         readonly type: PropType<boolean | Segmented>;
         readonly default: false;
@@ -59,6 +61,7 @@ declare const cardProps: {
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -89,6 +92,7 @@ declare const cardProps: {
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -119,6 +123,7 @@ declare const cardProps: {
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -150,6 +155,7 @@ declare const _default: import("vue").DefineComponent<{
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
+    embedded: BooleanConstructor;
     segmented: {
         readonly type: PropType<boolean | Segmented>;
         readonly default: false;
@@ -174,6 +180,7 @@ declare const _default: import("vue").DefineComponent<{
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -204,6 +211,7 @@ declare const _default: import("vue").DefineComponent<{
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -234,6 +242,7 @@ declare const _default: import("vue").DefineComponent<{
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -367,6 +376,7 @@ declare const _default: import("vue").DefineComponent<{
             colorModal: string;
             colorPopover: string;
             colorTarget: string;
+            colorEmbedded: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;
@@ -426,6 +436,7 @@ declare const _default: import("vue").DefineComponent<{
     contentStyle?: unknown;
     headerStyle?: unknown;
     footerStyle?: unknown;
+    embedded?: unknown;
     segmented?: unknown;
     size?: unknown;
     bordered?: unknown;
@@ -440,6 +451,7 @@ declare const _default: import("vue").DefineComponent<{
     bordered: boolean;
     closable: boolean;
     hoverable: boolean;
+    embedded: boolean;
     segmented: boolean | Segmented;
 } & {
     title?: string | undefined;
@@ -449,6 +461,7 @@ declare const _default: import("vue").DefineComponent<{
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -479,6 +492,7 @@ declare const _default: import("vue").DefineComponent<{
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -509,6 +523,7 @@ declare const _default: import("vue").DefineComponent<{
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -542,6 +557,7 @@ declare const _default: import("vue").DefineComponent<{
     bordered: boolean;
     closable: boolean;
     hoverable: boolean;
+    embedded: boolean;
     segmented: boolean | Segmented;
 }>;
 export default _default;

package/es/card/src/Card.js

@@ -11,6 +11,7 @@ export const cardBaseProps = {
     contentStyle: [Object, String],
     headerStyle: [Object, String],
     footerStyle: [Object, String],
+    embedded: Boolean,
     segmented: {
         type: [Boolean, Object],
         default: false
@@ -51,12 +52,12 @@ export default defineComponent({
             handleCloseClick,
             cssVars: computed(() => {
                 const { size } = props;
-                const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, closeSize, boxShadow, colorPopover, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+                const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, closeSize, boxShadow, colorPopover, colorEmbedded, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = getPadding(padding);
                 return {
                     '--bezier': cubicBezierEaseInOut,
                     '--border-radius': borderRadius,
-                    '--color': color,
+                    '--color': props.embedded ? colorEmbedded : color,
                     '--color-modal': colorModal,
                     '--color-popover': colorPopover,
                     '--color-target': colorTarget,

package/es/card/styles/dark.js

@@ -3,6 +3,11 @@ import { self } from './light';
 const cardDark = {
     name: 'Card',
     common: commonDark,
-    self
+    self(vars) {
+        const commonSelf = self(vars);
+        const { cardColor } = vars;
+        commonSelf.colorEmbedded = cardColor;
+        return commonSelf;
+    }
 };
 export default cardDark;

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

@@ -6,6 +6,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     colorModal: string;
     colorPopover: string;
     colorTarget: string;
+    colorEmbedded: string;
     textColor: string;
     titleTextColor: string;
     borderColor: string;

package/es/card/styles/light.js

@@ -1,8 +1,8 @@
 import { commonLight } from '../../_styles/common';
 import commonVariables from './_common';
 export const self = (vars) => {
-    const { primaryColor, borderRadius, lineHeight, fontSize, cardColor, textColor2, textColor1, dividerColor, actionColor, fontWeightStrong, closeColor, closeColorHover, closeColorPressed, modalColor, boxShadow1, popoverColor } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { lineHeight, color: cardColor, colorModal: modalColor, colorPopover: popoverColor, colorTarget: primaryColor, textColor: textColor2, titleTextColor: textColor1, borderColor: dividerColor, actionColor: actionColor, titleFontWeight: fontWeightStrong, closeColor: closeColor, closeColorHover: closeColorHover, closeColorPressed: closeColorPressed, fontSizeSmall: fontSize, fontSizeMedium: fontSize, fontSizeLarge: fontSize, fontSizeHuge: fontSize, boxShadow: boxShadow1, borderRadius });
+    const { primaryColor, borderRadius, lineHeight, fontSize, cardColor, textColor2, textColor1, dividerColor, fontWeightStrong, closeColor, closeColorHover, closeColorPressed, modalColor, boxShadow1, popoverColor, actionColor } = vars;
+    return Object.assign(Object.assign({}, commonVariables), { lineHeight, color: cardColor, colorModal: modalColor, colorPopover: popoverColor, colorTarget: primaryColor, colorEmbedded: actionColor, textColor: textColor2, titleTextColor: textColor1, borderColor: dividerColor, actionColor: actionColor, titleFontWeight: fontWeightStrong, closeColor: closeColor, closeColorHover: closeColorHover, closeColorPressed: closeColorPressed, fontSizeSmall: fontSize, fontSizeMedium: fontSize, fontSizeLarge: fontSize, fontSizeHuge: fontSize, boxShadow: boxShadow1, borderRadius });
 };
 const cardLight = {
     name: 'Card',