naive-ui 2.23.1 → 2.24.2

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

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
-import type { OnUpdateChecked } from './interface';
+import type { OnUpdateChecked, CheckboxInst } from './interface';
 declare const checkboxProps: {
     size: PropType<"small" | "medium" | "large">;
     checked: {
@@ -237,7 +237,8 @@ declare const _default: import("vue").DefineComponent<{
         sizeLarge: string;
         labelPadding: string;
     }, any>>>;
-}, import("../../_mixins/use-form-item").UseFormItem<"small" | "medium" | "large"> & {
+}, import("../../_mixins/use-form-item").UseFormItem<"small" | "medium" | "large"> & CheckboxInst & {
+    selfRef: import("vue").Ref<HTMLDivElement | null>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedDisabled: import("vue").ComputedRef<boolean>;
     renderedChecked: import("vue").ComputedRef<boolean>;
@@ -383,63 +384,64 @@ 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;
-    checked?: unknown;
-    defaultChecked?: unknown;
-    value?: unknown;
-    disabled?: unknown;
-    indeterminate?: unknown;
-    label?: unknown;
-    focusable?: unknown;
-    checkedValue?: unknown;
-    uncheckedValue?: unknown;
-    'onUpdate:checked'?: unknown;
-    onUpdateChecked?: unknown;
-    privateInsideTable?: unknown;
-    onChange?: unknown;
-    theme?: unknown;
-    themeOverrides?: unknown;
-    builtinThemeOverrides?: unknown;
-} & {
-    focusable: boolean;
-    indeterminate: boolean;
-    defaultChecked: string | number | boolean;
-    checkedValue: string | number | boolean;
-    uncheckedValue: string | number | boolean;
-    privateInsideTable: boolean;
-} & {
-    value?: string | number | undefined;
-    label?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    disabled?: boolean | undefined;
-    onChange?: MaybeArray<OnUpdateChecked> | undefined;
-    checked?: string | number | boolean | undefined;
-    theme?: import("../../_mixins").Theme<"Checkbox", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: PropType<"small" | "medium" | "large">;
+    checked: {
+        type: PropType<string | number | boolean | undefined>;
+        default: undefined;
+    };
+    defaultChecked: {
+        type: PropType<string | number | boolean>;
+        default: boolean;
+    };
+    value: PropType<string | number>;
+    disabled: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    indeterminate: BooleanConstructor;
+    label: StringConstructor;
+    focusable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checkedValue: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    uncheckedValue: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    'onUpdate:checked': PropType<MaybeArray<OnUpdateChecked>>;
+    onUpdateChecked: PropType<MaybeArray<OnUpdateChecked>>;
+    privateInsideTable: BooleanConstructor;
+    onChange: PropType<MaybeArray<OnUpdateChecked>>;
+    theme: PropType<import("../../_mixins").Theme<"Checkbox", {
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -466,8 +468,8 @@ declare const _default: import("vue").DefineComponent<{
         sizeMedium: string;
         sizeLarge: string;
         labelPadding: string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -494,8 +496,8 @@ declare const _default: import("vue").DefineComponent<{
         sizeMedium: string;
         sizeLarge: string;
         labelPadding: string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -522,10 +524,8 @@ declare const _default: import("vue").DefineComponent<{
         sizeMedium: string;
         sizeLarge: string;
         labelPadding: string;
-    }, any>> | undefined;
-    "onUpdate:checked"?: MaybeArray<OnUpdateChecked> | undefined;
-    onUpdateChecked?: MaybeArray<OnUpdateChecked> | undefined;
-}>, {
+    }, any>>>;
+}>>, {
     disabled: boolean | undefined;
     checked: string | number | boolean | undefined;
     focusable: boolean;

package/es/checkbox/src/Checkbox.js

@@ -1,6 +1,7 @@
-import { h, defineComponent, computed, inject, ref, toRef, renderSlot, watchEffect } from 'vue';
+import { h, defineComponent, computed, inject, ref, toRef, watchEffect } from 'vue';
 import { useMergedState, useMemo } from 'vooks';
 import { createId } from 'seemly';
+import { on } from 'evtd';
 import { useConfig, useFormItem, useTheme } from '../../_mixins';
 import { NIconSwitchTransition } from '../../_internal';
 import { call, createKey, warnOnce } from '../../_utils';
@@ -9,7 +10,6 @@ import CheckMark from './CheckMark';
 import LineMark from './LineMark';
 import { checkboxGroupInjectionKey } from './CheckboxGroup';
 import style from './styles/index.cssr';
-import { on } from 'evtd';
 const checkboxProps = Object.assign(Object.assign({}, useTheme.props), { size: String, checked: {
         type: [Boolean, String, Number],
         default: undefined
@@ -44,6 +44,7 @@ export default defineComponent({
                 }
             });
         }
+        const selfRef = ref(null);
         const { mergedClsPrefixRef } = useConfig(props);
         const formItem = useFormItem(props, {
             mergedSize(NFormItem) {
@@ -151,7 +152,18 @@ export default defineComponent({
                     e.preventDefault();
             }
         }
-        return Object.assign(formItem, {
+        const exposedMethods = {
+            focus: () => {
+                var _a;
+                (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            blur: () => {
+                var _a;
+                (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+        };
+        return Object.assign(formItem, exposedMethods, {
+            selfRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedDisabled: mergedDisabledRef,
             renderedChecked: renderedCheckedRef,
@@ -164,36 +176,36 @@ export default 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, [createKey('fontSize', mergedSize)]: fontSize, [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
                 };
             })
         });
     },
     render() {
         const { $slots, renderedChecked, mergedDisabled, indeterminate, privateInsideTable, cssVars, labelId, label, mergedClsPrefix, focusable, handleKeyUp, handleKeyDown, handleClick } = this;
-        return (h("div", { class: [
+        return (h("div", { ref: "selfRef", class: [
                 `${mergedClsPrefix}-checkbox`,
                 renderedChecked && `${mergedClsPrefix}-checkbox--checked`,
                 mergedDisabled && `${mergedClsPrefix}-checkbox--disabled`,
@@ -211,6 +223,6 @@ export default defineComponent({
                     default: () => this.indeterminate ? (h("div", { key: "indeterminate", class: `${mergedClsPrefix}-checkbox-icon` }, LineMark)) : (h("div", { key: "check", class: `${mergedClsPrefix}-checkbox-icon` }, CheckMark))
                 }),
                 h("div", { class: `${mergedClsPrefix}-checkbox-box__border` })),
-            label !== null || $slots.default ? (h("span", { class: `${mergedClsPrefix}-checkbox__label`, id: labelId }, renderSlot($slots, 'default', undefined, () => [label]))) : null));
+            label !== null || $slots.default ? (h("span", { class: `${mergedClsPrefix}-checkbox__label`, id: labelId }, $slots.default ? $slots.default() : label)) : null));
     }
 });

package/es/checkbox/src/CheckboxGroup.d.ts

@@ -1,4 +1,4 @@
-import { PropType, InjectionKey, Ref, ComputedRef } from 'vue';
+import { PropType, Ref, ComputedRef } from 'vue';
 import { MaybeArray } from '../../_utils';
 import type { ExtractPublicPropTypes } from '../../_utils';
 export interface CheckboxGroupInjection {
@@ -10,7 +10,7 @@ export interface CheckboxGroupInjection {
     mergedSizeRef: Ref<'small' | 'medium' | 'large'>;
     toggleCheckbox: (checked: boolean, checkboxValue: string | number) => void;
 }
-export declare const checkboxGroupInjectionKey: InjectionKey<CheckboxGroupInjection>;
+export declare const checkboxGroupInjectionKey: import("vue").InjectionKey<CheckboxGroupInjection>;
 declare const checkboxGroupProps: {
     readonly min: NumberConstructor;
     readonly max: NumberConstructor;
@@ -55,28 +55,27 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     mergedClsPrefix: ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly min?: unknown;
-    readonly max?: unknown;
-    readonly size?: unknown;
-    readonly value?: unknown;
-    readonly defaultValue?: unknown;
-    readonly disabled?: unknown;
-    readonly 'onUpdate:value'?: unknown;
-    readonly onUpdateValue?: unknown;
-    readonly onChange?: unknown;
-} & {
-    defaultValue: (string | number)[] | null;
-} & {
-    value?: (string | number)[] | null | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    disabled?: boolean | undefined;
-    onChange?: MaybeArray<(value: (string | number)[]) => void> | undefined;
-    max?: number | undefined;
-    min?: number | undefined;
-    "onUpdate:value"?: MaybeArray<(value: (string | number)[]) => void> | undefined;
-    onUpdateValue?: MaybeArray<(value: (string | number)[]) => void> | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly min: NumberConstructor;
+    readonly max: NumberConstructor;
+    readonly size: PropType<"small" | "medium" | "large">;
+    readonly value: PropType<(string | number)[] | null>;
+    readonly defaultValue: {
+        readonly type: PropType<(string | number)[] | null>;
+        readonly default: null;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly 'onUpdate:value': PropType<MaybeArray<(value: (string | number)[]) => void>>;
+    readonly onUpdateValue: PropType<MaybeArray<(value: (string | number)[]) => void>>;
+    readonly onChange: {
+        readonly type: PropType<MaybeArray<(value: (string | number)[]) => void> | undefined>;
+        readonly validator: () => boolean;
+        readonly default: undefined;
+    };
+}>>, {
     disabled: boolean | undefined;
     onChange: MaybeArray<(value: (string | number)[]) => void> | undefined;
     defaultValue: (string | number)[] | null;

package/es/checkbox/src/CheckboxGroup.js

@@ -1,8 +1,8 @@
 import { h, defineComponent, provide, computed, toRef, ref } from 'vue';
 import { useMergedState } from 'vooks';
 import { useConfig, useFormItem } from '../../_mixins';
-import { warn, call } from '../../_utils';
-export const checkboxGroupInjectionKey = Symbol('checkboxGroup');
+import { warn, call, createInjectionKey } from '../../_utils';
+export const checkboxGroupInjectionKey = createInjectionKey('n-checkbox-group');
 const checkboxGroupProps = {
     min: Number,
     max: Number,

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

@@ -1,2 +1,6 @@
 export declare type OnUpdateChecked = (value: string & number & boolean, e: MouseEvent | KeyboardEvent) => void;
 export declare type OnUpdateCheckedImpl = (value: string | number | boolean, e: MouseEvent | KeyboardEvent) => void;
+export interface CheckboxInst {
+    focus: () => void;
+    blur: () => void;
+}

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

@@ -1,50 +1,49 @@
 import { c, cB, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr';
 import iconSwitchTransition from '../../../_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
 
 export default c([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);
  `, [c('&:hover', [cB('checkbox-box', [cE('border', {
-  border: 'var(--border-checked)'
+  border: 'var(--n-border-checked)'
 })])]), c('&:focus:not(:active)', [cB('checkbox-box', [cE('border', {
-  border: 'var(--border-focus)',
-  boxShadow: 'var(--box-shadow-focus)'
+  border: 'var(--n-border-focus)',
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])]), cM('table-header', [cB('checkbox-box', {
-  backgroundColor: 'var(--merged-color-table-header)'
+  backgroundColor: 'var(--n-merged-color-table-header)'
 })]), cM('checked', [cB('checkbox-box', {
-  backgroundColor: 'var(--color-checked)'
+  backgroundColor: 'var(--n-color-checked)'
 }, [cB('checkbox-icon', [// if not set width to 100%, safari & old chrome won't display the icon
 c('.check-icon', `
- width: 100%;
  opacity: 1;
  transform: scale(1);
  `)])])]), cM('indeterminate', [cB('checkbox-box', [cB('checkbox-icon', [c('.check-icon', `
@@ -54,51 +53,51 @@ c('.check-icon', `
  opacity: 1;
  transform: scale(1);
  `)])])]), cM('checked, indeterminate', [c('&:focus:not(:active)', [cB('checkbox-box', [cE('border', {
-  border: 'var(--border-checked)',
-  boxShadow: 'var(--box-shadow-focus)'
+  border: 'var(--n-border-checked)',
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])]), cB('checkbox-box', `
- background-color: var(--color-checked);
+ background-color: var(--n-color-checked);
  border-left: 0;
  border-top: 0;
  `, [cE('border', {
-  border: 'var(--border-checked)'
+  border: 'var(--n-border-checked)'
 })])]), cM('disabled', {
   cursor: 'not-allowed'
 }, [cM('checked', [cB('checkbox-box', `
- background-color: var(--color-disabled-checked);
+ background-color: var(--n-color-disabled-checked);
  `, [cE('border', {
-  border: 'var(--border-disabled-checked)'
+  border: 'var(--n-border-disabled-checked)'
 }), cB('checkbox-icon', [c('.check-icon, .line-icon', {
-  fill: 'var(--check-mark-color-disabled-checked)'
+  fill: 'var(--n-check-mark-color-disabled-checked)'
 })])])]), cB('checkbox-box', `
- background-color: var(--color-disabled);
+ background-color: var(--n-color-disabled);
  `, [cE('border', {
-  border: 'var(--border-disabled)'
+  border: 'var(--n-border-disabled)'
 }), cB('checkbox-icon', [c('.check-icon, .line-icon', {
-  fill: 'var(--check-mark-color-disabled)'
+  fill: 'var(--n-check-mark-color-disabled)'
 })])]), cE('label', {
-  color: 'var(--text-color-disabled)'
+  color: 'var(--n-text-color-disabled)'
 })]), 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);
  `, [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);
  `), cB('checkbox-icon', `
  display: flex;
  align-items: center;
@@ -109,29 +108,30 @@ c('.check-icon', `
  top: 1px;
  bottom: 1px;
  `, [c('.check-icon, .line-icon', `
- fill: var(--check-mark-color);
+ width: 100%;
+ 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);
  `), iconSwitchTransition({
   left: '1px',
   top: '1px'
 })])]), 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);
  `, [c('&:empty', {
   display: 'none'
 })])]), // modal table header checkbox
 insideModal(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
 insidePopover(cB('checkbox', `
- --merged-color-table-header: var(--color-table-header-popover);
+ --n-merged-color-table-header: var(--n-color-table-header-popover);
  `))]);