naive-ui 2.21.5 → 2.23.2

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

@@ -1,26 +1,26 @@
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr';
 import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --button-border-radius
-// --button-box-shadow
-// --button-color
-// --button-width
-// --button-width-pressed
-// --height
-// --offset
-// --rail-border-radius
-// --rail-color
-// --rail-color-active
-// --rail-height
-// --rail-width
-// --width
-// --box-shadow-focus
-// --loading-color
-// --text-color
+// --n-bezier
+// --n-button-border-radius
+// --n-button-box-shadow
+// --n-button-color
+// --n-button-width
+// --n-button-width-pressed
+// --n-height
+// --n-offset
+// --n-rail-border-radius
+// --n-rail-color
+// --n-rail-color-active
+// --n-rail-height
+// --n-rail-width
+// --n-width
+// --n-box-shadow-focus
+// --n-loading-color
+// --n-text-color
 
 export default cB('switch', `
- height: var(--height);
- min-width: var(--width);
+ height: var(--n-height);
+ min-width: var(--n-width);
  vertical-align: middle;
  user-select: none;
  display: inline-flex;
@@ -28,7 +28,7 @@ export default cB('switch', `
  justify-content: center;
  align-items: center;
 `, [cE('children-placeholder', `
- height: var(--rail-height);
+ height: var(--n-rail-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
@@ -38,21 +38,21 @@ export default cB('switch', `
  display: flex;
  flex-wrap: none;
  `), cE('button-placeholder', `
- width: calc(1.75 * var(--rail-height));
- height: var(--rail-height);
+ width: calc(1.75 * var(--n-rail-height));
+ height: var(--n-rail-height);
  `), cB('base-loading', `
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
- font-size: calc(var(--button-width) - 4px);
- color: var(--loading-color);
- transition: color .3s var(--bezier);
+ font-size: calc(var(--n-button-width) - 4px);
+ color: var(--n-loading-color);
+ transition: color .3s var(--n-bezier);
  `, [fadeInScaleUpTransition({
   originalTransform: 'translateX(-50%) translateY(-50%)'
 })]), cE('checked, unchecked', `
- transition: color .3s var(--bezier);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
  box-sizing: border-box;
  position: absolute;
  white-space: nowrap;
@@ -63,60 +63,62 @@ export default cB('switch', `
  line-height: 1;
  `), cE('checked', `
  right: 0;
- padding-right: calc(1.25 * var(--rail-height) - var(--offset));
+ padding-right: calc(1.25 * var(--n-rail-height) - var(--n-offset));
  `), cE('unchecked', `
  left: 0;
  justify-content: flex-end;
- padding-left: calc(1.25 * var(--rail-height) - var(--offset));
+ padding-left: calc(1.25 * var(--n-rail-height) - var(--n-offset));
  `), c('&:focus', [cE('rail', `
- box-shadow: var(--box-shadow-focus);
+ box-shadow: var(--n-box-shadow-focus);
  `)]), cM('round', [cE('rail', {
-  borderRadius: 'calc(var(--rail-height) / 2)'
+  borderRadius: 'calc(var(--n-rail-height) / 2)'
 }, [cE('button', {
-  borderRadius: 'calc(var(--button-height) / 2)'
+  borderRadius: 'calc(var(--n-button-height) / 2)'
 })])]), cNotM('disabled', [cM('pressed', [cE('rail', [cE('button', {
-  maxWidth: 'var(--button-width-pressed)'
+  maxWidth: 'var(--n-button-width-pressed)'
 })])]), cE('rail', [c('&:active', [cE('button', {
-  maxWidth: 'var(--button-width-pressed)'
+  maxWidth: 'var(--n-button-width-pressed)'
 })])]), cM('active', [cM('pressed', [cE('rail', [cE('button', {
-  left: 'calc(100% - var(--offset) - var(--button-width-pressed))'
+  left: 'calc(100% - var(--n-offset) - var(--n-button-width-pressed))'
 })])]), cE('rail', [c('&:active', [cE('button', {
-  left: 'calc(100% - var(--offset) - var(--button-width-pressed))'
+  left: 'calc(100% - var(--n-offset) - var(--n-button-width-pressed))'
 })])])])]), cM('active', [cE('rail', [cE('button', {
-  left: 'calc(100% - (var(--rail-height) + var(--button-width)) / 2)'
+  left: 'calc(100% - (var(--n-rail-height) + var(--n-button-width)) / 2)'
 })])]), cE('rail', `
  overflow: hidden;
- height: var(--rail-height);
- min-width: var(--rail-width);
- border-radius: var(--rail-border-radius);
+ height: var(--n-rail-height);
+ min-width: var(--n-rail-width);
+ border-radius: var(--n-rail-border-radius);
  cursor: pointer;
  position: relative;
  transition:
- background .3s var(--bezier),
- box-shadow .3s var(--bezier);
- background-color: var(--rail-color);
+ background .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
+ background-color: var(--n-rail-color);
  `, [cE('button', `
- top: var(--offset);
- left: var(--offset);
- height: var(--button-width);
- width: var(--button-width-pressed);
- max-width: var(--button-width);
- border-radius: var(--button-border-radius);
- background-color: var(--button-color);
- box-shadow: var(--button-box-shadow);
+ top: var(--n-offset);
+ left: var(--n-offset);
+ height: var(--n-button-width);
+ width: var(--n-button-width-pressed);
+ max-width: var(--n-button-width);
+ border-radius: var(--n-button-border-radius);
+ background-color: var(--n-button-color);
+ box-shadow: var(--n-button-box-shadow);
  box-sizing: border-box;
  cursor: inherit;
  content: "";
  position: absolute;
  transition:
- background-color .3s var(--bezier),
- left .3s var(--bezier),
- opacity .3s var(--bezier),
- max-width .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ left .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ max-width .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
  `)]), cM('active', [cE('rail', {
-  backgroundColor: 'var(--rail-color-active)'
+  backgroundColor: 'var(--n-rail-color-active)'
 })]), cM('disabled', [cE('rail', `
  cursor: not-allowed;
  opacity: .5;
+ `)]), cM('loading', [cE('rail', `
+ pointer-events: none;
  `)])]);

package/es/table/src/Table.d.ts

@@ -211,27 +211,27 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--td-color': string;
-        '--td-color-modal': string;
-        '--td-color-popover': string;
-        '--td-text-color': string;
-        '--border-color': string;
-        '--border-color-modal': string;
-        '--border-color-popover': string;
-        '--border-radius': string;
-        '--font-size': string;
-        '--th-color': string;
-        '--th-color-modal': string;
-        '--th-color-popover': string;
-        '--th-font-weight': string;
-        '--th-text-color': string;
-        '--line-height': string;
-        '--td-padding': string;
-        '--th-padding': string;
-        '--td-color-striped': string;
-        '--td-color-striped-modal': string;
-        '--td-color-striped-popover': string;
+        '--n-bezier': string;
+        '--n-td-color': string;
+        '--n-td-color-modal': string;
+        '--n-td-color-popover': string;
+        '--n-td-text-color': string;
+        '--n-border-color': string;
+        '--n-border-color-modal': string;
+        '--n-border-color-popover': string;
+        '--n-border-radius': string;
+        '--n-font-size': string;
+        '--n-th-color': string;
+        '--n-th-color-modal': string;
+        '--n-th-color-popover': string;
+        '--n-th-font-weight': string;
+        '--n-th-text-color': string;
+        '--n-line-height': string;
+        '--n-td-padding': string;
+        '--n-th-padding': string;
+        '--n-td-color-striped': string;
+        '--n-td-color-striped-modal': string;
+        '--n-td-color-striped-popover': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     bordered?: unknown;

package/es/table/src/Table.js

@@ -28,27 +28,27 @@ export default defineComponent({
                 const { size } = props;
                 const { self: { borderColor, tdColor, tdColorModal, tdColorPopover, thColor, thColorModal, thColorPopover, thTextColor, tdTextColor, borderRadius, thFontWeight, lineHeight, borderColorModal, borderColorPopover, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [createKey('fontSize', size)]: fontSize, [createKey('tdPadding', size)]: tdPadding, [createKey('thPadding', size)]: thPadding }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--td-color': tdColor,
-                    '--td-color-modal': tdColorModal,
-                    '--td-color-popover': tdColorPopover,
-                    '--td-text-color': tdTextColor,
-                    '--border-color': borderColor,
-                    '--border-color-modal': borderColorModal,
-                    '--border-color-popover': borderColorPopover,
-                    '--border-radius': borderRadius,
-                    '--font-size': fontSize,
-                    '--th-color': thColor,
-                    '--th-color-modal': thColorModal,
-                    '--th-color-popover': thColorPopover,
-                    '--th-font-weight': thFontWeight,
-                    '--th-text-color': thTextColor,
-                    '--line-height': lineHeight,
-                    '--td-padding': tdPadding,
-                    '--th-padding': thPadding,
-                    '--td-color-striped': tdColorStriped,
-                    '--td-color-striped-modal': tdColorStripedModal,
-                    '--td-color-striped-popover': tdColorStripedPopover
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-td-color': tdColor,
+                    '--n-td-color-modal': tdColorModal,
+                    '--n-td-color-popover': tdColorPopover,
+                    '--n-td-text-color': tdTextColor,
+                    '--n-border-color': borderColor,
+                    '--n-border-color-modal': borderColorModal,
+                    '--n-border-color-popover': borderColorPopover,
+                    '--n-border-radius': borderRadius,
+                    '--n-font-size': fontSize,
+                    '--n-th-color': thColor,
+                    '--n-th-color-modal': thColorModal,
+                    '--n-th-color-popover': thColorPopover,
+                    '--n-th-font-weight': thFontWeight,
+                    '--n-th-text-color': thTextColor,
+                    '--n-line-height': lineHeight,
+                    '--n-td-padding': tdPadding,
+                    '--n-th-padding': thPadding,
+                    '--n-td-color-striped': tdColorStriped,
+                    '--n-td-color-striped-modal': tdColorStripedModal,
+                    '--n-td-color-striped-popover': tdColorStripedPopover
                 };
             })
         };

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

@@ -1,73 +1,73 @@
 import { c, cB, cM, cNotM, insideModal, insidePopover } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --td-color
-// --td-color-modal
-// --td-color-popover
-// --td-text-color
-// --border-color
-// --border-color-modal
-// --border-color-popover
-// --border-radius
-// --font-size
-// --th-color
-// --th-color-modal
-// --th-color-popover
-// --th-font-weight
-// --th-text-color
-// --line-height
-// --td-padding
-// --th-padding
+// --n-bezier
+// --n-td-color
+// --n-td-color-modal
+// --n-td-color-popover
+// --n-td-text-color
+// --n-border-color
+// --n-border-color-modal
+// --n-border-color-popover
+// --n-border-radius
+// --n-font-size
+// --n-th-color
+// --n-th-color-modal
+// --n-th-color-popover
+// --n-th-font-weight
+// --n-th-text-color
+// --n-line-height
+// --n-td-padding
+// --n-th-padding
 
 export default c([cB('table', `
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  font-variant-numeric: tabular-nums;
- line-height: var(--line-height);
+ line-height: var(--n-line-height);
  width: 100%;
- border-radius: var(--border-radius) var(--border-radius) 0 0;
+ border-radius: var(--n-border-radius) var(--n-border-radius) 0 0;
  text-align: left;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
- background-color: var(--td-color);
+ background-color: var(--n-td-color);
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier),
- color .3s var(--bezier);
- --merged-border-color: var(--border-color);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ --n-merged-border-color: var(--n-border-color);
  `, [c('th', `
  white-space: nowrap;
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier),
- color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  text-align: inherit;
- padding: var(--th-padding);
+ padding: var(--n-th-padding);
  vertical-align: inherit;
  text-transform: none;
  border: none;
- font-weight: var(--th-font-weight);
- color: var(--th-text-color);
- background-color: var(--th-color);
- border-color: var(--merged-border-color);
- border-bottom: 1px solid var(--merged-border-color);
- border-right: 1px solid var(--merged-border-color);
+ font-weight: var(--n-th-font-weight);
+ color: var(--n-th-text-color);
+ background-color: var(--n-th-color);
+ border-color: var(--n-merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
+ border-right: 1px solid var(--n-merged-border-color);
  `, [c('&:last-child', `
  border-right: none;
  `)]), c('td', `
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier),
- color .3s var(--bezier);
- padding: var(--td-padding);
- color: var(--td-text-color);
- background-color: var(--td-color);
- border-right: 1px solid var(--merged-border-color);
- border-bottom: 1px solid var(--merged-border-color);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ padding: var(--n-td-padding);
+ color: var(--n-td-text-color);
+ background-color: var(--n-td-color);
+ border-right: 1px solid var(--n-merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
  `, [c('&:last-child', `
  border-right: none;
  `)]), cM('bordered', `
- border: 1px solid var(--merged-border-color);
- border-radius: var(--border-radius);
+ border: 1px solid var(--n-merged-border-color);
+ border-radius: var(--n-border-radius);
  `, [c('tr', [c('&:last-child', [c('td', `
  border-bottom: none;
  `)])])]), cM('single-line', [c('th', `
@@ -76,20 +76,20 @@ export default c([cB('table', `
  border-right: none;
  `)]), cM('single-column', [c('tr', [c('&:not(:last-child)', [c('td', `
  border-bottom: none;
- `)])])]), cM('striped', [c('tr:nth-of-type(even)', [c('td', 'background-color: var(--td-color-striped)')])]), cNotM('bottom-bordered', [c('tr', [c('&:last-child', [c('td', `
+ `)])])]), cM('striped', [c('tr:nth-of-type(even)', [c('td', 'background-color: var(--n-td-color-striped)')])]), cNotM('bottom-bordered', [c('tr', [c('&:last-child', [c('td', `
  border-bottom: none;
  `)])])])]), insideModal(cB('table', `
- background-color: var(--td-color-modal);
- --merged-border-color: var(--border-color-modal);
+ background-color: var(--n-td-color-modal);
+ --n-merged-border-color: var(--n-border-color-modal);
  `, [c('th', `
- background-color: var(--th-color-modal);
+ background-color: var(--n-th-color-modal);
  `), c('td', `
- background-color: var(--td-color-modal);
+ background-color: var(--n-td-color-modal);
  `)])), insidePopover(cB('table', `
- background-color: var(--td-color-popover);
- --merged-border-color: var(--border-color-popover);
+ background-color: var(--n-td-color-popover);
+ --n-merged-border-color: var(--n-border-color-popover);
  `, [c('th', `
- background-color: var(--th-color-popover);
+ background-color: var(--n-th-color-popover);
  `), c('td', `
- background-color: var(--td-color-popover);
+ background-color: var(--n-td-color-popover);
  `)]))]);

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

@@ -23,6 +23,7 @@ import { c, cM, cB, cE, cNotM } from '../../../_utils/cssr'; // vars:
 // --tab-color-segment
 
 export default cB('tabs', `
+ box-sizing: border-box;
  width: 100%;
  transition:
  background-color .3s var(--bezier),
@@ -50,8 +51,11 @@ export default cB('tabs', `
  justify-content: center;
  `, [cM('active', `
  font-weight: var(--font-weight-strong);
+ color: var(--tab-text-color-active);
  background-color: var(--tab-color-segment);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .08);
+ `), c('&:hover', `
+ color: var(--tab-text-color-hover);
  `)])])]), cM('flex', [cB('tabs-nav', {
   width: '100%'
 }, [cB('tabs-wrapper', {
@@ -195,7 +199,7 @@ export default cB('tabs', `
  padding-right: 8px;
  font-size: 16px;
  `, [cNotM('disabled', [c('&:hover', `
- color: var(--tab-text-color-active);
+ color: var(--tab-text-color-hover);
  `)])]), cM('closable', 'padding-right: 6px;'), cM('active', `
  border-bottom: 1px solid #0000;
  background-color: #0000;

package/es/tabs/styles/light.js

@@ -2,7 +2,7 @@ import sizeVariables from './_common';
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
     const { textColor2, primaryColor, textColorDisabled, closeColor, closeColorHover, closeColorPressed, tabColor, baseColor, dividerColor, fontWeight, textColor1, borderRadius, fontSize, fontWeightStrong } = vars;
-    return Object.assign(Object.assign({}, sizeVariables), { colorSegment: tabColor, tabFontSizeCard: fontSize, tabTextColorLine: textColor1, tabTextColorActiveLine: primaryColor, tabTextColorHoverLine: primaryColor, tabTextColorDisabledLine: textColorDisabled, tabTextColorSegment: textColor1, tabTextColorActiveSegment: primaryColor, tabTextColorHoverSegment: primaryColor, tabTextColorDisabledSegment: textColorDisabled, tabTextColorBar: textColor1, tabTextColorActiveBar: primaryColor, tabTextColorHoverBar: primaryColor, tabTextColorDisabledBar: textColorDisabled, tabTextColorCard: textColor1, tabTextColorHoverCard: textColor1, tabTextColorActiveCard: primaryColor, tabTextColorDisabledCard: textColorDisabled, barColor: primaryColor, closeColor,
+    return Object.assign(Object.assign({}, sizeVariables), { colorSegment: tabColor, tabFontSizeCard: fontSize, tabTextColorLine: textColor1, tabTextColorActiveLine: primaryColor, tabTextColorHoverLine: primaryColor, tabTextColorDisabledLine: textColorDisabled, tabTextColorSegment: textColor1, tabTextColorActiveSegment: textColor2, tabTextColorHoverSegment: textColor2, tabTextColorDisabledSegment: textColorDisabled, tabTextColorBar: textColor1, tabTextColorActiveBar: primaryColor, tabTextColorHoverBar: primaryColor, tabTextColorDisabledBar: textColorDisabled, tabTextColorCard: textColor1, tabTextColorHoverCard: textColor1, tabTextColorActiveCard: primaryColor, tabTextColorDisabledCard: textColorDisabled, barColor: primaryColor, closeColor,
         closeColorHover,
         closeColorPressed,
         tabColor, tabColorSegment: baseColor, tabBorderColor: dividerColor, tabFontWeightActive: fontWeight, tabFontWeight: fontWeight, tabBorderRadius: borderRadius, paneTextColor: textColor2, fontWeightStrong });

package/es/tag/src/Tag.d.ts

@@ -458,32 +458,33 @@ declare const _default: import("vue").DefineComponent<{
     handleClick: (e: MouseEvent) => void;
     handleCloseClick: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--avatar-size-override': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--border': string;
-        '--close-color': string;
-        '--close-color-hover': string;
-        '--close-color-pressed': string;
-        '--close-margin': string;
-        '--close-margin-rtl': string;
-        '--close-size': string;
-        '--color': string;
-        '--color-checkable': string;
-        '--color-checked': string;
-        '--color-checked-hover': string;
-        '--color-checked-pressed': string;
-        '--color-hover-checkable': string;
-        '--color-pressed-checkable': string;
-        '--font-size': string;
-        '--height': string;
-        '--opacity-disabled': string;
-        '--padding': string;
-        '--text-color': string;
-        '--text-color-checkable': string;
-        '--text-color-checked': string;
-        '--text-color-hover-checkable': string;
-        '--text-color-pressed-checkable': string;
+        '--n-avatar-size-override': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-border': string;
+        '--n-close-color': string;
+        '--n-close-color-hover': string;
+        '--n-close-color-pressed': string;
+        '--n-close-color-disabled': string;
+        '--n-close-margin': string;
+        '--n-close-margin-rtl': string;
+        '--n-close-size': string;
+        '--n-color': string;
+        '--n-color-checkable': string;
+        '--n-color-checked': string;
+        '--n-color-checked-hover': string;
+        '--n-color-checked-pressed': string;
+        '--n-color-hover-checkable': string;
+        '--n-color-pressed-checkable': string;
+        '--n-font-size': string;
+        '--n-height': string;
+        '--n-opacity-disabled': string;
+        '--n-padding': string;
+        '--n-text-color': string;
+        '--n-text-color-checkable': string;
+        '--n-text-color-checked': string;
+        '--n-text-color-hover-checkable': string;
+        '--n-text-color-pressed-checkable': string;
     }>;
     setTextContent: (textContent: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

package/es/tag/src/Tag.js

@@ -71,32 +71,33 @@ export default defineComponent({
                 const { type, size, color: { color, textColor } = {} } = props;
                 const { common: { cubicBezierEaseInOut }, self: { padding, closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, [createKey('closeSize', size)]: closeSize, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height, [createKey('color', type)]: typedColor, [createKey('textColor', type)]: typeTextColor, [createKey('border', type)]: border, [createKey('closeColor', type)]: closeColor, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
                 return {
-                    '--avatar-size-override': `calc(${height} - 8px)`,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--border': border,
-                    '--close-color': closeColor,
-                    '--close-color-hover': closeColorHover,
-                    '--close-color-pressed': closeColorPressed,
-                    '--close-margin': closeMargin,
-                    '--close-margin-rtl': closeMarginRtl,
-                    '--close-size': closeSize,
-                    '--color': color || typedColor,
-                    '--color-checkable': colorCheckable,
-                    '--color-checked': colorChecked,
-                    '--color-checked-hover': colorCheckedHover,
-                    '--color-checked-pressed': colorCheckedPressed,
-                    '--color-hover-checkable': colorHoverCheckable,
-                    '--color-pressed-checkable': colorPressedCheckable,
-                    '--font-size': fontSize,
-                    '--height': height,
-                    '--opacity-disabled': opacityDisabled,
-                    '--padding': padding,
-                    '--text-color': textColor || typeTextColor,
-                    '--text-color-checkable': textColorCheckable,
-                    '--text-color-checked': textColorChecked,
-                    '--text-color-hover-checkable': textColorHoverCheckable,
-                    '--text-color-pressed-checkable': textColorPressedCheckable
+                    '--n-avatar-size-override': `calc(${height} - 8px)`,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-border': border,
+                    '--n-close-color': closeColor,
+                    '--n-close-color-hover': closeColorHover,
+                    '--n-close-color-pressed': closeColorPressed,
+                    '--n-close-color-disabled': closeColor,
+                    '--n-close-margin': closeMargin,
+                    '--n-close-margin-rtl': closeMarginRtl,
+                    '--n-close-size': closeSize,
+                    '--n-color': color || typedColor,
+                    '--n-color-checkable': colorCheckable,
+                    '--n-color-checked': colorChecked,
+                    '--n-color-checked-hover': colorCheckedHover,
+                    '--n-color-checked-pressed': colorCheckedPressed,
+                    '--n-color-hover-checkable': colorHoverCheckable,
+                    '--n-color-pressed-checkable': colorPressedCheckable,
+                    '--n-font-size': fontSize,
+                    '--n-height': height,
+                    '--n-opacity-disabled': opacityDisabled,
+                    '--n-padding': padding,
+                    '--n-text-color': textColor || typeTextColor,
+                    '--n-text-color-checkable': textColorCheckable,
+                    '--n-text-color-checked': textColorChecked,
+                    '--n-text-color-hover-checkable': textColorHoverCheckable,
+                    '--n-text-color-pressed-checkable': textColorPressedCheckable
                 };
             }) });
     },