naive-ui 2.21.5 → 2.23.2

package/lib/cascader/src/styles/index.cssr.js

@@ -13,21 +13,21 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
-// --menu-border-radius
-// --menu-box-shadow
-// --menu-height
-// --menu-color
-// --menu-divider-color
-// --option-height
-// --option-font-size
-// --option-text-color
-// --option-text-color-disabled
-// --option-text-color-active
-// --option-color-hover
-// --option-check-mark-color
-// --option-arrow-color
-// --menu-mask-color
-// --loading-color
+// --n-menu-border-radius
+// --n-menu-box-shadow
+// --n-menu-height
+// --n-menu-color
+// --n-menu-divider-color
+// --n-option-height
+// --n-option-font-size
+// --n-option-text-color
+// --n-option-text-color-disabled
+// --n-option-text-color-active
+// --n-option-color-hover
+// --n-option-check-mark-color
+// --n-option-arrow-color
+// --n-menu-mask-color
+// --n-loading-color
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('cascader-menu', `
@@ -36,11 +36,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('cascader-menu', `
  margin: 4px 0;
  display: flex;
  flex-flow: column nowrap;
- border-radius: var(--menu-border-radius);
+ border-radius: var(--n-menu-border-radius);
  overflow: hidden;
- box-shadow: var(--menu-box-shadow);
- color: var(--option-text-color);
- background-color: var(--menu-color);
+ box-shadow: var(--n-menu-box-shadow);
+ color: var(--n-option-text-color);
+ background-color: var(--n-menu-color);
  `, [(0, fade_in_scale_up_cssr_1.default)({
   transformOrigin: 'inherit',
   duration: '0.2s'
@@ -54,37 +54,37 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('cascader-menu', `
   // not correct, which won't change after select menu width is set
   width: '100%'
 }), (0, cssr_1.cB)('base-menu-mask', {
-  backgroundColor: 'var(--menu-mask-color)'
+  backgroundColor: 'var(--n-menu-mask-color)'
 }), (0, cssr_1.cB)('base-loading', {
-  color: 'var(--loading-color)'
+  color: 'var(--n-loading-color)'
 }), (0, cssr_1.cB)('cascader-submenu-wrapper', `
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  `), (0, cssr_1.cB)('cascader-submenu', `
- height: var(--menu-height);
- min-width: var(--column-width);
+ height: var(--n-menu-height);
+ min-width: var(--n-column-width);
  position: relative;
  `, [(0, cssr_1.cM)('virtual', `
- width: var(--column-width);
+ width: var(--n-column-width);
  `), (0, cssr_1.cB)('scrollbar-content', {
   position: 'relative'
 }), (0, cssr_1.c)('&:first-child', `
- border-top-left-radius: var(--menu-border-radius);
- border-bottom-left-radius: var(--menu-border-radius);
+ border-top-left-radius: var(--n-menu-border-radius);
+ border-bottom-left-radius: var(--n-menu-border-radius);
  `), (0, cssr_1.c)('&:last-child', `
- border-top-right-radius: var(--menu-border-radius);
- border-bottom-right-radius: var(--menu-border-radius);
+ border-top-right-radius: var(--n-menu-border-radius);
+ border-bottom-right-radius: var(--n-menu-border-radius);
  `), (0, cssr_1.c)('&:not(:first-child)', `
- border-left: 1px solid var(--menu-divider-color);
+ border-left: 1px solid var(--n-menu-divider-color);
  `)]), (0, cssr_1.cB)('cascader-menu-action', `
  box-sizing: border-box;
  padding: 8px;
- border-top: 1px solid var(--menu-divider-color);
+ border-top: 1px solid var(--n-menu-divider-color);
  `), (0, cssr_1.cB)('cascader-option', `
- height: var(--option-height);
- line-height: var(--option-height);
- font-size: var(--option-font-size);
+ height: var(--n-option-height);
+ line-height: var(--n-option-height);
+ font-size: var(--n-option-font-size);
  padding: 0 0 0 18px;
  box-sizing: border-box;
  min-width: 182px;
@@ -95,8 +95,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('cascader-menu', `
  position: relative;
  cursor: pointer;
  transition:
- background-color .2s var(--bezier),
- color 0.2s var(--bezier);
+ background-color .2s var(--n-bezier),
+ color 0.2s var(--n-bezier);
  `, [(0, cssr_1.cM)('show-prefix', {
   paddingLeft: 0
 }), (0, cssr_1.cE)('label', `
@@ -120,24 +120,24 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('cascader-menu', `
   height: '16px',
   fontSize: '16px'
 }, [(0, cssr_1.cB)('cascader-option-icon', [(0, cssr_1.cM)('checkmark', {
-  color: 'var(--option-check-mark-color)'
+  color: 'var(--n-option-check-mark-color)'
 }, [(0, fade_in_scale_up_cssr_1.default)()]), (0, cssr_1.cM)('arrow', {
-  color: 'var(--option-arrow-color)'
+  color: 'var(--n-option-arrow-color)'
 })])]), (0, cssr_1.cM)('selected', {
-  color: 'var(--option-text-color-active)'
+  color: 'var(--n-option-text-color-active)'
 }), (0, cssr_1.cM)('active', {
-  color: 'var(--option-text-color-active)',
-  backgroundColor: 'var(--option-color-hover)'
+  color: 'var(--n-option-text-color-active)',
+  backgroundColor: 'var(--n-option-color-hover)'
 }), (0, cssr_1.cM)('pending', {
-  backgroundColor: 'var(--option-color-hover)'
+  backgroundColor: 'var(--n-option-color-hover)'
 }), (0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--option-color-hover)'
+  backgroundColor: 'var(--n-option-color-hover)'
 }), (0, cssr_1.cM)('disabled', `
- color: var(--option-text-color-disabled);
+ color: var(--n-option-text-color-disabled);
  background-color: #0000;
  cursor: not-allowed;
  `, [(0, cssr_1.cB)('cascader-option-icon', [(0, cssr_1.cM)('arrow', {
-  color: 'var(--option-text-color-disabled)'
+  color: 'var(--n-option-text-color-disabled)'
 })])])])]), (0, cssr_1.cB)('cascader', `
  z-index: auto;
  position: relative;

package/lib/cascader/styles/dark.js

@@ -6,6 +6,7 @@ const styles_3 = require("../../_internal/scrollbar/styles");
 const styles_4 = require("../../checkbox/styles");
 const common_1 = require("../../_styles/common");
 const light_1 = require("./light");
+const styles_5 = require("../../empty/styles");
 const cascaderDark = {
     name: 'Cascader',
     common: common_1.commonDark,
@@ -13,7 +14,8 @@ const cascaderDark = {
         InternalSelectMenu: styles_2.internalSelectMenuDark,
         InternalSelection: styles_1.internalSelectionDark,
         Scrollbar: styles_3.scrollbarDark,
-        Checkbox: styles_4.checkboxDark
+        Checkbox: styles_4.checkboxDark,
+        Empty: styles_5.emptyLight
     },
     self: light_1.self
 };

package/lib/cascader/styles/light.d.ts

@@ -186,6 +186,19 @@ declare const cascaderLight: import("../../_mixins").Theme<"Cascader", {
         sizeLarge: string;
         labelPadding: string;
     }, any>;
+    Empty: import("../../_mixins").Theme<"Empty", {
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        fontSizeHuge: string;
+        textColor: string;
+        iconColor: string;
+        extraTextColor: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        iconSizeHuge: string;
+    }, any>;
 }>;
 export default cascaderLight;
 export declare type CascaderTheme = typeof cascaderLight;

package/lib/cascader/styles/light.js

@@ -7,6 +7,7 @@ const styles_3 = require("../../_internal/scrollbar/styles");
 const styles_4 = require("../../checkbox/styles");
 const common_1 = require("../../_styles/common");
 const _mixins_1 = require("../../_mixins");
+const styles_5 = require("../../empty/styles");
 const self = (vars) => {
     const { borderRadius, boxShadow2, popoverColor, textColor2, textColor3, primaryColor, textColorDisabled, dividerColor, hoverColor, fontSizeMedium, heightMedium } = vars;
     return {
@@ -14,7 +15,7 @@ const self = (vars) => {
         menuColor: popoverColor,
         menuBoxShadow: boxShadow2,
         menuDividerColor: dividerColor,
-        menuHeight: 'calc(var(--option-height) * 6.6)',
+        menuHeight: 'calc(var(--n-option-height) * 6.6)',
         optionArrowColor: textColor3,
         optionHeight: heightMedium,
         optionFontSize: fontSizeMedium,
@@ -35,7 +36,8 @@ const cascaderLight = (0, _mixins_1.createTheme)({
         InternalSelectMenu: styles_2.internalSelectMenuLight,
         InternalSelection: styles_1.internalSelectionLight,
         Scrollbar: styles_3.scrollbarLight,
-        Checkbox: styles_4.checkboxLight
+        Checkbox: styles_4.checkboxLight,
+        Empty: styles_5.emptyLight
     },
     self: exports.self
 });

package/lib/checkbox/src/Checkbox.d.ts

@@ -383,29 +383,29 @@ declare const _default: import("vue").DefineComponent<{
     handleKeyUp: (e: KeyboardEvent) => void;
     handleKeyDown: (e: KeyboardEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--size': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--border': string;
-        '--border-checked': string;
-        '--border-focus': string;
-        '--border-disabled': string;
-        '--border-disabled-checked': string;
-        '--box-shadow-focus': string;
-        '--color': string;
-        '--color-checked': string;
-        '--color-table-header': string;
-        '--color-table-header-modal': string;
-        '--color-table-header-popover': string;
-        '--color-disabled': string;
-        '--color-disabled-checked': string;
-        '--text-color': string;
-        '--text-color-disabled': string;
-        '--check-mark-color': string;
-        '--check-mark-color-disabled': string;
-        '--check-mark-color-disabled-checked': string;
-        '--font-size': string;
-        '--label-padding': string;
+        '--n-size': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-border': string;
+        '--n-border-checked': string;
+        '--n-border-focus': string;
+        '--n-border-disabled': string;
+        '--n-border-disabled-checked': string;
+        '--n-box-shadow-focus': string;
+        '--n-color': string;
+        '--n-color-checked': string;
+        '--n-color-table-header': string;
+        '--n-color-table-header-modal': string;
+        '--n-color-table-header-popover': string;
+        '--n-color-disabled': string;
+        '--n-color-disabled-checked': string;
+        '--n-text-color': string;
+        '--n-text-color-disabled': string;
+        '--n-check-mark-color': string;
+        '--n-check-mark-color-disabled': string;
+        '--n-check-mark-color-disabled-checked': string;
+        '--n-font-size': string;
+        '--n-label-padding': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     size?: unknown;

package/lib/checkbox/src/Checkbox.js

@@ -169,29 +169,29 @@ exports.default = (0, vue_1.defineComponent)({
                 const { value: mergedSize } = mergedSizeRef;
                 const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderFocus, borderDisabled, borderChecked, boxShadowFocus, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.createKey)('size', mergedSize)]: size } } = themeRef.value;
                 return {
-                    '--size': size,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--border': border,
-                    '--border-checked': borderChecked,
-                    '--border-focus': borderFocus,
-                    '--border-disabled': borderDisabled,
-                    '--border-disabled-checked': borderDisabledChecked,
-                    '--box-shadow-focus': boxShadowFocus,
-                    '--color': color,
-                    '--color-checked': colorChecked,
-                    '--color-table-header': colorTableHeader,
-                    '--color-table-header-modal': colorTableHeaderModal,
-                    '--color-table-header-popover': colorTableHeaderPopover,
-                    '--color-disabled': colorDisabled,
-                    '--color-disabled-checked': colorDisabledChecked,
-                    '--text-color': textColor,
-                    '--text-color-disabled': textColorDisabled,
-                    '--check-mark-color': checkMarkColor,
-                    '--check-mark-color-disabled': checkMarkColorDisabled,
-                    '--check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
-                    '--font-size': fontSize,
-                    '--label-padding': labelPadding
+                    '--n-size': size,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-border': border,
+                    '--n-border-checked': borderChecked,
+                    '--n-border-focus': borderFocus,
+                    '--n-border-disabled': borderDisabled,
+                    '--n-border-disabled-checked': borderDisabledChecked,
+                    '--n-box-shadow-focus': boxShadowFocus,
+                    '--n-color': color,
+                    '--n-color-checked': colorChecked,
+                    '--n-color-table-header': colorTableHeader,
+                    '--n-color-table-header-modal': colorTableHeaderModal,
+                    '--n-color-table-header-popover': colorTableHeaderPopover,
+                    '--n-color-disabled': colorDisabled,
+                    '--n-color-disabled-checked': colorDisabledChecked,
+                    '--n-text-color': textColor,
+                    '--n-text-color-disabled': textColorDisabled,
+                    '--n-check-mark-color': checkMarkColor,
+                    '--n-check-mark-color-disabled': checkMarkColorDisabled,
+                    '--n-check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
+                    '--n-font-size': fontSize,
+                    '--n-label-padding': labelPadding
                 };
             })
         });

package/lib/checkbox/src/styles/index.cssr.js

@@ -13,49 +13,49 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr")); // vars:
-// --bezier
-// --size
-// --border
-// --border-focus
-// --border-checked
-// --border-disabled
-// --border-disabled-checked
-// --box-shadow-focus
-// --color
-// --color-checked
-// --color-table-header
-// --color-table-header-modal
-// --color-disabled
-// --color-disabled-checked
-// --text-color
-// --text-color-disabled
-// --check-mark-color
-// --check-mark-color-disabled
-// --check-mark-color-disabled-checked
-// --border-radius
-// --font-size
-// --label-padding
+// --n-bezier
+// --n-size
+// --n-border
+// --n-border-focus
+// --n-border-checked
+// --n-border-disabled
+// --n-border-disabled-checked
+// --n-box-shadow-focus
+// --n-color
+// --n-color-checked
+// --n-color-table-header
+// --n-color-table-header-modal
+// --n-color-disabled
+// --n-color-disabled-checked
+// --n-text-color
+// --n-text-color-disabled
+// --n-check-mark-color
+// --n-check-mark-color-disabled
+// --n-check-mark-color-disabled-checked
+// --n-border-radius
+// --n-font-size
+// --n-label-padding
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  line-height: 1;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: middle;
- --merged-color-table-header: var(--color-table-header);
+ --n-merged-color-table-header: var(--n-color-table-header);
  `, [(0, cssr_1.c)('&:hover', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cE)('border', {
-  border: 'var(--border-checked)'
+  border: 'var(--n-border-checked)'
 })])]), (0, cssr_1.c)('&:focus:not(:active)', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cE)('border', {
-  border: 'var(--border-focus)',
-  boxShadow: 'var(--box-shadow-focus)'
+  border: 'var(--n-border-focus)',
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])]), (0, cssr_1.cM)('table-header', [(0, cssr_1.cB)('checkbox-box', {
-  backgroundColor: 'var(--merged-color-table-header)'
+  backgroundColor: 'var(--n-merged-color-table-header)'
 })]), (0, cssr_1.cM)('checked', [(0, cssr_1.cB)('checkbox-box', {
-  backgroundColor: 'var(--color-checked)'
+  backgroundColor: 'var(--n-color-checked)'
 }, [(0, cssr_1.cB)('checkbox-icon', [// if not set width to 100%, safari & old chrome won't display the icon
 (0, cssr_1.c)('.check-icon', `
  width: 100%;
@@ -68,51 +68,51 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  opacity: 1;
  transform: scale(1);
  `)])])]), (0, cssr_1.cM)('checked, indeterminate', [(0, cssr_1.c)('&:focus:not(:active)', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cE)('border', {
-  border: 'var(--border-checked)',
-  boxShadow: 'var(--box-shadow-focus)'
+  border: 'var(--n-border-checked)',
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])]), (0, cssr_1.cB)('checkbox-box', `
- background-color: var(--color-checked);
+ background-color: var(--n-color-checked);
  border-left: 0;
  border-top: 0;
  `, [(0, cssr_1.cE)('border', {
-  border: 'var(--border-checked)'
+  border: 'var(--n-border-checked)'
 })])]), (0, cssr_1.cM)('disabled', {
   cursor: 'not-allowed'
 }, [(0, cssr_1.cM)('checked', [(0, cssr_1.cB)('checkbox-box', `
- background-color: var(--color-disabled-checked);
+ background-color: var(--n-color-disabled-checked);
  `, [(0, cssr_1.cE)('border', {
-  border: 'var(--border-disabled-checked)'
+  border: 'var(--n-border-disabled-checked)'
 }), (0, cssr_1.cB)('checkbox-icon', [(0, cssr_1.c)('.check-icon, .line-icon', {
-  fill: 'var(--check-mark-color-disabled-checked)'
+  fill: 'var(--n-check-mark-color-disabled-checked)'
 })])])]), (0, cssr_1.cB)('checkbox-box', `
- background-color: var(--color-disabled);
+ background-color: var(--n-color-disabled);
  `, [(0, cssr_1.cE)('border', {
-  border: 'var(--border-disabled)'
+  border: 'var(--n-border-disabled)'
 }), (0, cssr_1.cB)('checkbox-icon', [(0, cssr_1.c)('.check-icon, .line-icon', {
-  fill: 'var(--check-mark-color-disabled)'
+  fill: 'var(--n-check-mark-color-disabled)'
 })])]), (0, cssr_1.cE)('label', {
-  color: 'var(--text-color-disabled)'
+  color: 'var(--n-text-color-disabled)'
 })]), (0, cssr_1.cB)('checkbox-box', `
- height: var(--size);
- width: var(--size);
+ height: var(--n-size);
+ width: var(--n-size);
  display: inline-block;
  box-sizing: border-box;
- border-radius: var(--border-radius);
- background-color: var(--color);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-color);
  position: relative;
  transition:
- background-color 0.3s var(--bezier);
+ background-color 0.3s var(--n-bezier);
  `, [(0, cssr_1.cE)('border', `
  transition:
- border-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ border-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
  border-radius: inherit;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
- border: var(--border);
+ border: var(--n-border);
  `), (0, cssr_1.cB)('checkbox-icon', `
  display: flex;
  align-items: center;
@@ -123,29 +123,29 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  top: 1px;
  bottom: 1px;
  `, [(0, cssr_1.c)('.check-icon, .line-icon', `
- fill: var(--check-mark-color);
+ fill: var(--n-check-mark-color);
  opacity: 0;
  transform: scale(0.5);
  transform-origin: center;
  transition:
- fill 0.3s var(--bezier),
- transform 0.3s var(--bezier),
- opacity 0.3s var(--bezier),
- border-color 0.3s var(--bezier);
+ fill 0.3s var(--n-bezier),
+ transform 0.3s var(--n-bezier),
+ opacity 0.3s var(--n-bezier),
+ border-color 0.3s var(--n-bezier);
  `), (0, icon_switch_cssr_1.default)({
   left: '1px',
   top: '1px'
 })])]), (0, cssr_1.cE)('label', `
- color: var(--text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-text-color);
+ transition: color .3s var(--n-bezier);
  user-select: none;
- padding: var(--label-padding);
+ padding: var(--n-label-padding);
  `, [(0, cssr_1.c)('&:empty', {
   display: 'none'
 })])]), // modal table header checkbox
 (0, cssr_1.insideModal)((0, cssr_1.cB)('checkbox', `
- --merged-color-table-header: var(--color-table-header-modal);
+ --n-merged-color-table-header: var(--n-color-table-header-modal);
  `)), // popover table header checkbox
 (0, cssr_1.insidePopover)((0, cssr_1.cB)('checkbox', `
- --merged-color-table-header: var(--color-table-header-popover);
+ --n-merged-color-table-header: var(--n-color-table-header-popover);
  `))]);

package/lib/code/src/Code.d.ts

@@ -121,20 +121,20 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     codeRef: import("vue").Ref<HTMLElement | null>;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--font-family': string;
-        '--font-weight-strong': string;
-        '--bezier': string;
-        '--text-color': string;
-        '--mono-3': string;
-        '--hue-1': string;
-        '--hue-2': string;
-        '--hue-3': string;
-        '--hue-4': string;
-        '--hue-5': string;
-        '--hue-5-2': string;
-        '--hue-6': string;
-        '--hue-6-2': string;
+        '--n-font-size': string;
+        '--n-font-family': string;
+        '--n-font-weight-strong': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-mono-3': string;
+        '--n-hue-1': string;
+        '--n-hue-2': string;
+        '--n-hue-3': string;
+        '--n-hue-4': string;
+        '--n-hue-5': string;
+        '--n-hue-5-2': string;
+        '--n-hue-6': string;
+        '--n-hue-6-2': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     language?: unknown;

package/lib/code/src/Code.js

@@ -57,9 +57,16 @@ exports.default = (0, vue_1.defineComponent)({
                 codeEl.textContent = code;
                 return;
             }
-            const warp = document.createElement('pre');
-            warp.textContent = code;
-            codeEl.appendChild(warp);
+            const maybePreEl = codeEl.children[0];
+            if (maybePreEl && maybePreEl.tagName === 'PRE') {
+                maybePreEl.textContent = code;
+            }
+            else {
+                const warp = document.createElement('pre');
+                warp.textContent = code;
+                codeEl.innerHTML = '';
+                codeEl.appendChild(warp);
+            }
         };
         (0, vue_1.onMounted)(setCode);
         (0, vue_1.watch)((0, vue_1.toRef)(props, 'language'), setCode);
@@ -76,20 +83,22 @@ exports.default = (0, vue_1.defineComponent)({
                 'mono-3': $1, 'hue-1': $2, 'hue-2': $3, 'hue-3': $4, 'hue-4': $5, 'hue-5': $6, 'hue-5-2': $7, 'hue-6': $8, 'hue-6-2': $9 } } = themeRef.value;
                 const { internalFontSize } = props;
                 return {
-                    '--font-size': internalFontSize ? `${internalFontSize}px` : fontSize,
-                    '--font-family': fontFamilyMono,
-                    '--font-weight-strong': fontWeightStrong,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--text-color': textColor,
-                    '--mono-3': $1,
-                    '--hue-1': $2,
-                    '--hue-2': $3,
-                    '--hue-3': $4,
-                    '--hue-4': $5,
-                    '--hue-5': $6,
-                    '--hue-5-2': $7,
-                    '--hue-6': $8,
-                    '--hue-6-2': $9
+                    '--n-font-size': internalFontSize
+                        ? `${internalFontSize}px`
+                        : fontSize,
+                    '--n-font-family': fontFamilyMono,
+                    '--n-font-weight-strong': fontWeightStrong,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-text-color': textColor,
+                    '--n-mono-3': $1,
+                    '--n-hue-1': $2,
+                    '--n-hue-2': $3,
+                    '--n-hue-3': $4,
+                    '--n-hue-4': $5,
+                    '--n-hue-5': $6,
+                    '--n-hue-5-2': $7,
+                    '--n-hue-6': $8,
+                    '--n-hue-6-2': $9
                 };
             })
         };