naive-ui 2.22.0 → 2.24.0

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

@@ -1,5 +1,5 @@
 import { cB, c } from '../../../_utils/cssr';
-import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // --menu-box-shadow
+import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // --n-menu-box-shadow
 
 export default c([cB('select', `
  z-index: auto;
@@ -8,5 +8,5 @@ export default c([cB('select', `
  position: relative;
  `), cB('select-menu', `
  margin: 4px 0;
- box-shadow: var(--menu-box-shadow);
+ box-shadow: var(--n-menu-box-shadow);
  `, [fadeInScaleUpTransition()])]);

package/es/skeleton/src/Skeleton.d.ts

@@ -97,9 +97,9 @@ declare const _default: import("vue").DefineComponent<{
         width: string | undefined;
         height: string | undefined;
         animation: string;
-        '--bezier': string;
-        '--color-start': string;
-        '--color-end': string;
+        '--n-bezier': string;
+        '--n-color-start': string;
+        '--n-color-end': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly text?: unknown;

package/es/skeleton/src/Skeleton.js

@@ -52,9 +52,9 @@ export default defineComponent({
                         ? pxfy(mergedHeight)
                         : mergedHeight,
                     animation: !animated ? 'none' : '',
-                    '--bezier': cubicBezierEaseInOut,
-                    '--color-start': color,
-                    '--color-end': colorEnd
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-color-start': color,
+                    '--n-color-end': colorEnd
                 };
             })
         };

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

@@ -1,29 +1,29 @@
 import { c, cB } from '../../../_utils/cssr'; // vars:
-// --color
-// --color-end
-// --bezier
+// --n-color-start
+// --n-color-end
+// --n-bezier
 
 export default c([cB('skeleton', `
  height: 1em;
  width: 100%;
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  transition:
- --color-start .3s var(--bezier),
- --color-end .3s var(--bezier),
- background-color .3s var(--bezier);
+ --n-color-start .3s var(--n-bezier),
+ --n-color-end .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  animation: 2s skeleton-loading infinite cubic-bezier(0.36, 0, 0.64, 1);
- background-color: var(--color-start);
+ background-color: var(--n-color-start);
  `), c('@keyframes skeleton-loading', `
  0% {
- background: var(--color-start);
+ background: var(--n-color-start);
  }
  40% {
- background: var(--color-end);
+ background: var(--n-color-end);
  }
  80% {
- background: var(--color-start);
+ background: var(--n-color-start);
  }
  100% {
- background: var(--color-start);
+ background: var(--n-color-start);
  }
  `)]);

package/es/slider/src/Slider.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, CSSProperties } from 'vue';
 import { FollowerPlacement } from 'vueuc';
 import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 export interface ClosestMark {
@@ -279,9 +279,7 @@ declare const _default: import("vue").DefineComponent<{
     markInfos: import("vue").ComputedRef<{
         active: boolean;
         label: string;
-        style: {
-            [x: string]: string;
-        };
+        style: CSSProperties;
     }[]>;
     isShowTooltip: (index: number) => boolean;
     isSkipCSSDetection: (index: number) => boolean;
@@ -308,37 +306,37 @@ declare const _default: import("vue").DefineComponent<{
     handleHandleMouseLeave: (index: number) => void;
     handleRailKeyDown: (e: KeyboardEvent) => void;
     indicatorCssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--indicator-border-radius': string;
-        '--indicator-box-shadow': string;
-        '--indicator-color': string;
-        '--indicator-text-color': string;
+        '--n-font-size': string;
+        '--n-indicator-border-radius': string;
+        '--n-indicator-box-shadow': string;
+        '--n-indicator-color': string;
+        '--n-indicator-text-color': string;
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--dot-border': string;
-        '--dot-border-active': string;
-        '--dot-border-radius': string;
-        '--dot-box-shadow': string;
-        '--dot-color': string;
-        '--dot-color-modal': string;
-        '--dot-color-popover': string;
-        '--dot-height': string;
-        '--dot-width': string;
-        '--fill-color': string;
-        '--fill-color-hover': string;
-        '--font-size': string;
-        '--handle-box-shadow': string;
-        '--handle-box-shadow-active': string;
-        '--handle-box-shadow-focus': string;
-        '--handle-box-shadow-hover': string;
-        '--handle-color': string;
-        '--handle-size': string;
-        '--opacity-disabled': string;
-        '--rail-color': string;
-        '--rail-color-hover': string;
-        '--rail-height': string;
-        '--rail-width-vertical': string;
+        '--n-bezier': string;
+        '--n-dot-border': string;
+        '--n-dot-border-active': string;
+        '--n-dot-border-radius': string;
+        '--n-dot-box-shadow': string;
+        '--n-dot-color': string;
+        '--n-dot-color-modal': string;
+        '--n-dot-color-popover': string;
+        '--n-dot-height': string;
+        '--n-dot-width': string;
+        '--n-fill-color': string;
+        '--n-fill-color-hover': string;
+        '--n-font-size': string;
+        '--n-handle-box-shadow': string;
+        '--n-handle-box-shadow-active': string;
+        '--n-handle-box-shadow-focus': string;
+        '--n-handle-box-shadow-hover': string;
+        '--n-handle-color': string;
+        '--n-handle-size': string;
+        '--n-opacity-disabled': string;
+        '--n-rail-color': string;
+        '--n-rail-color-hover': string;
+        '--n-rail-height': string;
+        '--n-rail-width-vertical': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly to?: unknown;

package/es/slider/src/Slider.js

@@ -447,40 +447,40 @@ export default defineComponent({
             indicatorCssVars: computed(() => {
                 const { self: { fontSize, indicatorColor, indicatorBoxShadow, indicatorTextColor, indicatorBorderRadius } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--indicator-border-radius': indicatorBorderRadius,
-                    '--indicator-box-shadow': indicatorBoxShadow,
-                    '--indicator-color': indicatorColor,
-                    '--indicator-text-color': indicatorTextColor
+                    '--n-font-size': fontSize,
+                    '--n-indicator-border-radius': indicatorBorderRadius,
+                    '--n-indicator-box-shadow': indicatorBoxShadow,
+                    '--n-indicator-color': indicatorColor,
+                    '--n-indicator-text-color': indicatorTextColor
                 };
             }),
             cssVars: computed(() => {
                 const { self: { railColor, railColorHover, fillColor, fillColorHover, handleColor, opacityDisabled, dotColor, dotColorModal, handleBoxShadow, handleBoxShadowHover, handleBoxShadowActive, handleBoxShadowFocus, dotBorder, dotBoxShadow, railHeight, railWidthVertical, handleSize, dotHeight, dotWidth, dotBorderRadius, fontSize, dotBorderActive, dotColorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--dot-border': dotBorder,
-                    '--dot-border-active': dotBorderActive,
-                    '--dot-border-radius': dotBorderRadius,
-                    '--dot-box-shadow': dotBoxShadow,
-                    '--dot-color': dotColor,
-                    '--dot-color-modal': dotColorModal,
-                    '--dot-color-popover': dotColorPopover,
-                    '--dot-height': dotHeight,
-                    '--dot-width': dotWidth,
-                    '--fill-color': fillColor,
-                    '--fill-color-hover': fillColorHover,
-                    '--font-size': fontSize,
-                    '--handle-box-shadow': handleBoxShadow,
-                    '--handle-box-shadow-active': handleBoxShadowActive,
-                    '--handle-box-shadow-focus': handleBoxShadowFocus,
-                    '--handle-box-shadow-hover': handleBoxShadowHover,
-                    '--handle-color': handleColor,
-                    '--handle-size': handleSize,
-                    '--opacity-disabled': opacityDisabled,
-                    '--rail-color': railColor,
-                    '--rail-color-hover': railColorHover,
-                    '--rail-height': railHeight,
-                    '--rail-width-vertical': railWidthVertical
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-dot-border': dotBorder,
+                    '--n-dot-border-active': dotBorderActive,
+                    '--n-dot-border-radius': dotBorderRadius,
+                    '--n-dot-box-shadow': dotBoxShadow,
+                    '--n-dot-color': dotColor,
+                    '--n-dot-color-modal': dotColorModal,
+                    '--n-dot-color-popover': dotColorPopover,
+                    '--n-dot-height': dotHeight,
+                    '--n-dot-width': dotWidth,
+                    '--n-fill-color': fillColor,
+                    '--n-fill-color-hover': fillColorHover,
+                    '--n-font-size': fontSize,
+                    '--n-handle-box-shadow': handleBoxShadow,
+                    '--n-handle-box-shadow-active': handleBoxShadowActive,
+                    '--n-handle-box-shadow-focus': handleBoxShadowFocus,
+                    '--n-handle-box-shadow-hover': handleBoxShadowHover,
+                    '--n-handle-color': handleColor,
+                    '--n-handle-size': handleSize,
+                    '--n-opacity-disabled': opacityDisabled,
+                    '--n-rail-color': railColor,
+                    '--n-rail-color-hover': railColorHover,
+                    '--n-rail-height': railHeight,
+                    '--n-rail-width-vertical': railWidthVertical
                 };
             })
         };

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

@@ -1,36 +1,36 @@
 import { cB, c, cM, cE, insideModal, insidePopover } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --bezier
-// --dot-border
-// --dot-border-active
-// --dot-border-radius
-// --dot-box-shadow
-// --dot-color
-// --dot-color-modal
-// --dot-color-popover
-// --dot-height
-// --dot-width
-// --fill-color
-// --fill-color-hover
-// --font-size
-// --handle-box-shadow
-// --handle-box-shadow-active
-// --handle-box-shadow-focus
-// --handle-box-shadow-hover
-// --handle-color
-// --handle-size
-// --indicator-border-radius
-// --indicator-box-shadow
-// --indicator-color
-// --indicator-text-color
-// --rail-color
-// --rail-color-hover
-// --rail-height
-// --rail-width-vertical
+// --n-bezier
+// --n-dot-border
+// --n-dot-border-active
+// --n-dot-border-radius
+// --n-dot-box-shadow
+// --n-dot-color
+// --n-dot-color-modal
+// --n-dot-color-popover
+// --n-dot-height
+// --n-dot-width
+// --n-fill-color
+// --n-fill-color-hover
+// --n-font-size
+// --n-handle-box-shadow
+// --n-handle-box-shadow-active
+// --n-handle-box-shadow-focus
+// --n-handle-box-shadow-hover
+// --n-handle-color
+// --n-handle-size
+// --n-indicator-border-radius
+// --n-indicator-box-shadow
+// --n-indicator-color
+// --n-indicator-text-color
+// --n-rail-color
+// --n-rail-color-hover
+// --n-rail-height
+// --n-rail-width-vertical
 
 export default c([cB('slider', `
  display: block;
- padding: calc((var(--handle-size) - var(--rail-height)) / 2) 0;
+ padding: calc((var(--n-handle-size) - var(--n-rail-height)) / 2) 0;
  position: relative;
  z-index: 0;
  width: 100%;
@@ -43,17 +43,17 @@ export default c([cB('slider', `
  `)]), cM('vertical', [cB('slider-handles', [cB('slider-handle', `
  transform: translate(-50%, -50%);
  `)]), cB('slider-marks', [cB('slider-mark', `
- transform: translateY(calc(-50% + var(--dot-height) / 2));
+ transform: translateY(calc(-50% + var(--n-dot-height) / 2));
  `)]), cB('slider-dots', [cB('slider-dot', `
  transform: translateX(-50%) translateY(0);
  `)])])]), cM('vertical', `
- padding: 0 calc((var(--handle-size) - var(--rail-height)) / 2);
- width: var(--rail-width-vertical);
+ padding: 0 calc((var(--n-handle-size) - var(--n-rail-height)) / 2);
+ width: var(--n-rail-width-vertical);
  height: 100%;
  `, [cB('slider-handles', `
- top: calc(var(--handle-size) / 2);
+ top: calc(var(--n-handle-size) / 2);
  right: 0;
- bottom: calc(var(--handle-size) / 2);
+ bottom: calc(var(--n-handle-size) / 2);
  left: 0;
  `, [cB('slider-handle', `
  top: unset;
@@ -67,127 +67,127 @@ export default c([cB('slider', `
  bottom: unset;
  left: 0;
  `)]), cM('with-mark', `
- width: var(--rail-width-vertical);
+ width: var(--n-rail-width-vertical);
  margin: 0 32px 0 8px;
  `), cB('slider-marks', `
- top: calc(var(--handle-size) / 2);
+ top: calc(var(--n-handle-size) / 2);
  right: unset;
- bottom: calc(var(--handle-size) / 2);
+ bottom: calc(var(--n-handle-size) / 2);
  left: 22px;
  `, [cB('slider-mark', `
  transform: translateY(50%);
  white-space: nowrap;
  `)]), cB('slider-dots', `
- top: calc(var(--handle-size) / 2);
+ top: calc(var(--n-handle-size) / 2);
  right: unset;
- bottom: calc(var(--handle-size) / 2);
+ bottom: calc(var(--n-handle-size) / 2);
  left: 50%;
  `, [cB('slider-dot', `
  transform: translateX(-50%) translateY(50%);
  `)])]), cM('disabled', `
  cursor: not-allowed;
- opacity: var(--opacity-disabled);
+ opacity: var(--n-opacity-disabled);
  `, [cB('slider-handle', `
  cursor: not-allowed;
  `)]), cM('with-mark', `
  width: 100%;
  margin: 8px 0 32px 0;
  `), c('&:hover', [cB('slider-rail', {
-  backgroundColor: 'var(--rail-color-hover)'
+  backgroundColor: 'var(--n-rail-color-hover)'
 }, [cE('fill', {
-  backgroundColor: 'var(--fill-color-hover)'
+  backgroundColor: 'var(--n-fill-color-hover)'
 })]), cB('slider-handle', {
-  boxShadow: 'var(--handle-box-shadow-hover)'
+  boxShadow: 'var(--n-handle-box-shadow-hover)'
 })]), cM('active', [cB('slider-rail', {
-  backgroundColor: 'var(--rail-color-hover)'
+  backgroundColor: 'var(--n-rail-color-hover)'
 }, [cE('fill', {
-  backgroundColor: 'var(--fill-color-hover)'
+  backgroundColor: 'var(--n-fill-color-hover)'
 })]), cB('slider-handle', {
-  boxShadow: 'var(--handle-box-shadow-hover)'
+  boxShadow: 'var(--n-handle-box-shadow-hover)'
 })]), cB('slider-marks', `
  position: absolute;
  top: 18px;
- left: calc(var(--handle-size) / 2);
- right: calc(var(--handle-size) / 2);
+ left: calc(var(--n-handle-size) / 2);
+ right: calc(var(--n-handle-size) / 2);
  `, [cB('slider-mark', {
   position: 'absolute',
   transform: 'translateX(-50%)'
 })]), cB('slider-rail', `
  width: 100%;
  position: relative;
- height: var(--rail-height);
- background-color: var(--rail-color);
- transition: background-color .3s var(--bezier);
- border-radius: calc(var(--rail-height) / 2);
+ height: var(--n-rail-height);
+ background-color: var(--n-rail-color);
+ transition: background-color .3s var(--n-bezier);
+ border-radius: calc(var(--n-rail-height) / 2);
  `, [cE('fill', `
  position: absolute;
  top: 0;
  bottom: 0;
- border-radius: calc(var(--rail-height) / 2);
- transition: background-color .3s var(--bezier);
- background-color: var(--fill-color);
+ border-radius: calc(var(--n-rail-height) / 2);
+ transition: background-color .3s var(--n-bezier);
+ background-color: var(--n-fill-color);
  `)]), cB('slider-handles', `
  position: absolute;
  top: 0;
- right: calc(var(--handle-size) / 2);
+ right: calc(var(--n-handle-size) / 2);
  bottom: 0;
- left: calc(var(--handle-size) / 2);
+ left: calc(var(--n-handle-size) / 2);
  `, [cB('slider-handle', `
  outline: none;
- height: var(--handle-size);
- width: var(--handle-size);
+ height: var(--n-handle-size);
+ width: var(--n-handle-size);
  border-radius: 50%;
- transition: box-shadow .2s var(--bezier), background-color .3s var(--bezier);
+ transition: box-shadow .2s var(--n-bezier), background-color .3s var(--n-bezier);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  cursor: pointer;
- background-color: var(--handle-color);
- box-shadow: var(--handle-box-shadow);
+ background-color: var(--n-handle-color);
+ box-shadow: var(--n-handle-box-shadow);
  `, [c('&:hover', {
-  boxShadow: 'var(--handle-box-shadow-hover)'
+  boxShadow: 'var(--n-handle-box-shadow-hover)'
 }), c('&:hover:focus', {
-  boxShadow: 'var(--handle-box-shadow-active)'
+  boxShadow: 'var(--n-handle-box-shadow-active)'
 }), c('&:focus', {
-  boxShadow: 'var(--handle-box-shadow-focus)'
+  boxShadow: 'var(--n-handle-box-shadow-focus)'
 })])]), cB('slider-dots', `
  position: absolute;
  top: 50%;
- left: calc(var(--handle-size) / 2);
- right: calc(var(--handle-size) / 2);
+ left: calc(var(--n-handle-size) / 2);
+ right: calc(var(--n-handle-size) / 2);
  `, [cM('transition-disabled', [cB('slider-dot', {
   transition: 'none'
 })]), cB('slider-dot', `
  transition:
- border-color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier);
+ border-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  position: absolute;
  transform: translate(-50%, -50%);
- height: var(--dot-height);
- width: var(--dot-width);
- border-radius: var(--dot-border-radius);
+ height: var(--n-dot-height);
+ width: var(--n-dot-width);
+ border-radius: var(--n-dot-border-radius);
  overflow: hidden;
  box-sizing: border-box;
- border: var(--dot-border);
- background-color: var(--dot-color);
+ border: var(--n-dot-border);
+ background-color: var(--n-dot-color);
  `, [cM('active', {
-  border: 'var(--dot-border-active)'
+  border: 'var(--n-dot-border-active)'
 })])])]), cB('slider-handle-indicator', `
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  padding: 6px 10px;
- border-radius: var(--indicator-border-radius);
- color: var(--indicator-text-color);
- background-color: var(--indicator-color);
- box-shadow: var(--indicator-box-shadow);
+ border-radius: var(--n-indicator-border-radius);
+ color: var(--n-indicator-text-color);
+ background-color: var(--n-indicator-color);
+ box-shadow: var(--n-indicator-box-shadow);
  `, [fadeInScaleUpTransition()]), cB('slider-handle-indicator', `
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  padding: 6px 10px;
- border-radius: var(--indicator-border-radius);
- color: var(--indicator-text-color);
- background-color: var(--indicator-color);
- box-shadow: var(--indicator-box-shadow);
+ border-radius: var(--n-indicator-border-radius);
+ color: var(--n-indicator-text-color);
+ background-color: var(--n-indicator-color);
+ box-shadow: var(--n-indicator-box-shadow);
  `, [cM('top', `
  margin-bottom: 12px;
  `), cM('right', `
@@ -197,7 +197,7 @@ export default c([cB('slider', `
  `), cM('left', `
  margin-right: 12px;
  `), fadeInScaleUpTransition()]), insideModal(cB('slider', [cB('slider-dot', {
-  backgroundColor: 'var(--dot-color-modal)'
+  backgroundColor: 'var(--n-dot-color-modal)'
 })])), insidePopover(cB('slider', [cB('slider-dot', {
-  backgroundColor: 'var(--dot-color-popover)'
+  backgroundColor: 'var(--n-dot-color-popover)'
 })]))]);

package/es/spin/src/Spin.d.ts

@@ -115,11 +115,11 @@ declare const _default: import("vue").DefineComponent<{
     compitableShow: import("vue").ComputedRef<boolean>;
     mergedStrokeWidth: import("vue").ComputedRef<number>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--opacity-spinning': string;
-        '--size': string;
-        '--color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-opacity-spinning': string;
+        '--n-size': string;
+        '--n-color': string;
+        '--n-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     description?: unknown;

package/es/spin/src/Spin.js

@@ -58,11 +58,11 @@ export default defineComponent({
                     ? pxfy(spinSize)
                     : self[createKey('size', spinSize)];
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--opacity-spinning': opacitySpinning,
-                    '--size': size,
-                    '--color': color,
-                    '--text-color': textColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-opacity-spinning': opacitySpinning,
+                    '--n-size': size,
+                    '--n-color': color,
+                    '--n-text-color': textColor
                 };
             })
         };

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

@@ -1,11 +1,11 @@
 import { c, cM, cB } from '../../../_utils/cssr';
 import fadeInTransition from '../../../_styles/transitions/fade-in.cssr'; // vars:
-// --bezier
-// --opacity-spinning
-// --size
-// --color
-// --text-color
-// --font-size
+// --n-bezier
+// --n-opacity-spinning
+// --n-size
+// --n-color
+// --n-text-color
+// --n-font-size
 
 export default c([c('@keyframes spin-rotate', `
  from {
@@ -28,24 +28,24 @@ export default c([c('@keyframes spin-rotate', `
  flex-direction: column;
  `), cB('spin', `
  display: inline-flex;
- height: var(--size);
- width: var(--size);
- font-size: var(--size);
- color: var(--color);
+ height: var(--n-size);
+ width: var(--n-size);
+ font-size: var(--n-size);
+ color: var(--n-color);
  `, [cM('rotate', `
  animation: spin-rotate 2s linear infinite;
  `)]), cB('spin-description', `
  display: inline-block;
- font-size: var(--font-size);
- color: var(--text-color);
- transition: color .3s var(--bezier);
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
+ transition: color .3s var(--n-bezier);
  margin-top: 8px;
  `), cB('spin-content', `
  opacity: 1;
- transition: opacity .3s var(--bezier);
+ transition: opacity .3s var(--n-bezier);
  pointer-events: all;
  `, [cM('spinning', `
  user-select: none;
  pointer-events: none;
- opacity: var(--opacity-spinning);
+ opacity: var(--n-opacity-spinning);
  `)])]);