naive-ui 2.21.5 → 2.23.2

package/lib/button/src/styles/button.cssr.js

@@ -15,50 +15,51 @@ const cssr_1 = require("../../../_utils/cssr");
 const fade_in_width_expand_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-width-expand.cssr"));
 
 const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr")); // vars:
-// --bezier
-// --ripple-duration
-// --opacity-disabled
-// --text-color
-// --text-color-hover
-// --text-color-pressed
-// --text-color-focus
-// --text-color-disabled
-// --color
-// --color-hover
-// --color-pressed
-// --color-focus
-// --color-disabled
-// --border
-// --border-hover
-// --border-pressed
-// --border-focus
-// --border-disabled
-// --ripple-color
-// --border-radius
-// --height
-// --width
-// --font-size
-// --padding
-// --icon-size
-// --icon-margin
-// --wave-opacity
-// --font-weight
+// --n-bezier
+// --n-bezier-ease-out
+// --n-ripple-duration
+// --n-opacity-disabled
+// --n-text-color
+// --n-text-color-hover
+// --n-text-color-pressed
+// --n-text-color-focus
+// --n-text-color-disabled
+// --n-color
+// --n-color-hover
+// --n-color-pressed
+// --n-color-focus
+// --n-color-disabled
+// --n-border
+// --n-border-hover
+// --n-border-pressed
+// --n-border-focus
+// --n-border-disabled
+// --n-ripple-color
+// --n-border-radius
+// --n-height
+// --n-width
+// --n-font-size
+// --n-padding
+// --n-icon-size
+// --n-icon-margin
+// --n-wave-opacity
+// --n-font-weight
 //
 // private-vars:
-// --border-color-xxx, used for custom color
+// --n-border-color-xxx, used for custom color
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
- font-weight: var(--font-weight);
+ font-weight: var(--n-font-weight);
  line-height: 1;
  font-family: inherit;
- padding: var(--padding);
- height: var(--height);
- font-size: var(--font-size);
- border-radius: var(--border-radius);
- color: var(--text-color);
- background-color: var(--color);
- width: var(--width);
+ padding: var(--n-padding);
+ height: var(--n-height);
+ font-size: var(--n-font-size);
+ border-radius: var(--n-border-radius);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
+ width: var(--n-width);
  white-space: nowrap;
  outline: none;
  position: relative;
@@ -74,56 +75,58 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  cursor: pointer;
  text-decoration: none;
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- opacity .3s var(--bezier),
- border-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('color', [(0, cssr_1.cE)('border', {
-  borderColor: 'var(--border-color)'
+  borderColor: 'var(--n-border-color)'
 }), (0, cssr_1.cM)('disabled', [(0, cssr_1.cE)('border', {
-  borderColor: 'var(--border-color-disabled)'
+  borderColor: 'var(--n-border-color-disabled)'
 })]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:focus', [(0, cssr_1.cE)('state-border', {
-  borderColor: 'var(--border-color-focus)'
+  borderColor: 'var(--n-border-color-focus)'
 })]), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', {
-  borderColor: 'var(--border-color-hover)'
+  borderColor: 'var(--n-border-color-hover)'
 })]), (0, cssr_1.c)('&:active', [(0, cssr_1.cE)('state-border', {
-  borderColor: 'var(--border-color-pressed)'
+  borderColor: 'var(--n-border-color-pressed)'
 })]), (0, cssr_1.cM)('pressed', [(0, cssr_1.cE)('state-border', {
-  borderColor: 'var(--border-color-pressed)'
+  borderColor: 'var(--n-border-color-pressed)'
 })])])]), (0, cssr_1.cM)('disabled', {
-  backgroundColor: 'var(--color-disabled)',
-  color: 'var(--text-color-disabled)'
+  backgroundColor: 'var(--n-color-disabled)',
+  color: 'var(--n-text-color-disabled)'
 }, [(0, cssr_1.cE)('border', {
-  border: 'var(--border-disabled)'
+  border: 'var(--n-border-disabled)'
 })]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:focus', {
-  backgroundColor: 'var(--color-focus)',
-  color: 'var(--text-color-focus)'
+  backgroundColor: 'var(--n-color-focus)',
+  color: 'var(--n-text-color-focus)'
 }, [(0, cssr_1.cE)('state-border', {
-  border: 'var(--border-focus)'
+  border: 'var(--n-border-focus)'
 })]), (0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--color-hover)',
-  color: 'var(--text-color-hover)'
+  backgroundColor: 'var(--n-color-hover)',
+  color: 'var(--n-text-color-hover)'
 }, [(0, cssr_1.cE)('state-border', {
-  border: 'var(--border-hover)'
+  border: 'var(--n-border-hover)'
 })]), (0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--color-pressed)',
-  color: 'var(--text-color-pressed)'
+  backgroundColor: 'var(--n-color-pressed)',
+  color: 'var(--n-text-color-pressed)'
 }, [(0, cssr_1.cE)('state-border', {
-  border: 'var(--border-pressed)'
+  border: 'var(--n-border-pressed)'
 })]), (0, cssr_1.cM)('pressed', {
-  backgroundColor: 'var(--color-pressed)',
-  color: 'var(--text-color-pressed)'
+  backgroundColor: 'var(--n-color-pressed)',
+  color: 'var(--n-text-color-pressed)'
 }, [(0, cssr_1.cE)('state-border', {
-  border: 'var(--border-pressed)'
-})])]), (0, cssr_1.cB)('base-wave', `
+  border: 'var(--n-border-pressed)'
+})])]), (0, cssr_1.cM)('loading', {
+  'pointer-events': 'none'
+}), (0, cssr_1.cB)('base-wave', `
  pointer-events: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation-iteration-count: 1;
- animation-duration: var(--ripple-duration);
- animation-timing-function: var(--bezier-ease-out), var(--bezier-ease-out);
+ animation-duration: var(--n-ripple-duration);
+ animation-timing-function: var(--n-bezier-ease-out), var(--n-bezier-ease-out);
  `, [(0, cssr_1.cM)('active', {
   zIndex: 1,
   animationName: 'button-wave-spread, button-wave-opacity'
@@ -136,26 +139,26 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  right: 0;
  bottom: 0;
  border-radius: inherit;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  pointer-events: none;
  `), (0, cssr_1.cE)('border', {
-  border: 'var(--border)'
+  border: 'var(--n-border)'
 }), (0, cssr_1.cE)('state-border', {
-  border: 'var(--border)',
+  border: 'var(--n-border)',
   borderColor: '#0000',
   zIndex: 1
 }), (0, cssr_1.cE)('icon', `
- margin: var(--icon-margin);
+ margin: var(--n-icon-margin);
  margin-left: 0;
- height: var(--icon-size);
- width: var(--icon-size);
- max-width: var(--icon-size);
- font-size: var(--icon-size);
+ height: var(--n-icon-size);
+ width: var(--n-icon-size);
+ max-width: var(--n-icon-size);
+ font-size: var(--n-icon-size);
  position: relative;
  flex-shrink: 0;
  `, [(0, cssr_1.cB)('icon-slot', `
- height: var(--icon-size);
- width: var(--icon-size);
+ height: var(--n-icon-size);
+ width: var(--n-icon-size);
  position: absolute;
  left: 0;
  top: 50%;
@@ -169,7 +172,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  align-items: center;
  flex-wrap: nowrap;
  `, [(0, cssr_1.c)('~', [(0, cssr_1.cE)('icon', {
-  margin: 'var(--icon-margin)',
+  margin: 'var(--n-icon-margin)',
   marginRight: 0
 })])]), (0, cssr_1.cM)('block', `
  display: flex;
@@ -178,18 +181,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
   borderStyle: 'dashed !important'
 })]), (0, cssr_1.cM)('disabled', {
   cursor: 'not-allowed',
-  opacity: 'var(--opacity-disabled)'
+  opacity: 'var(--n-opacity-disabled)'
 })]), (0, cssr_1.c)('@keyframes button-wave-spread', {
   from: {
-    boxShadow: '0 0 0.5px 0 var(--ripple-color)'
+    boxShadow: '0 0 0.5px 0 var(--n-ripple-color)'
   },
   to: {
     // don't use exact 5px since chrome will display the animation with glitches
-    boxShadow: '0 0 0.5px 4.5px var(--ripple-color)'
+    boxShadow: '0 0 0.5px 4.5px var(--n-ripple-color)'
   }
 }), (0, cssr_1.c)('@keyframes button-wave-opacity', {
   from: {
-    opacity: 'var(--wave-opacity)'
+    opacity: 'var(--n-wave-opacity)'
   },
   to: {
     opacity: 0

package/lib/button/styles/light.js

@@ -13,7 +13,7 @@ const self = (vars) => {
         heightMedium,
         heightLarge, borderRadiusTiny: borderRadius, borderRadiusSmall: borderRadius, borderRadiusMedium: borderRadius, borderRadiusLarge: borderRadius, fontSizeTiny: fontSizeTiny, fontSizeSmall: fontSizeSmall, fontSizeMedium: fontSizeMedium, fontSizeLarge: fontSizeLarge, opacityDisabled: opacityDisabled, 
         // secondary
-        colorOpacitySecondary: '0.16', colorOpacitySecondaryHover: '0.2', colorOpacitySecondaryPressed: '0.24', colorSecondary: buttonColor2, colorSecondaryHover: buttonColor2Hover, colorSecondaryPressed: buttonColor2Pressed, 
+        colorOpacitySecondary: '0.16', colorOpacitySecondaryHover: '0.22', colorOpacitySecondaryPressed: '0.28', colorSecondary: buttonColor2, colorSecondaryHover: buttonColor2Hover, colorSecondaryPressed: buttonColor2Pressed, 
         // tertiary
         colorTertiary: buttonColor2, colorTertiaryHover: buttonColor2Hover, colorTertiaryPressed: buttonColor2Pressed, 
         // quaternary

package/lib/calendar/src/Calendar.d.ts

@@ -1393,6 +1393,7 @@ declare const _default: import("vue").DefineComponent<{
         monthTypeFormat: string;
         dateFormat: string;
         dateTimeFormat: string;
+        quarterFormat: string;
         clear: string;
         now: string;
         confirm: string;
@@ -1402,6 +1403,7 @@ declare const _default: import("vue").DefineComponent<{
         datetimePlaceholder: string;
         monthPlaceholder: string;
         yearPlaceholder: string;
+        quarterPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;
@@ -1760,27 +1762,27 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--border-color': string;
-        '--border-color-modal': string;
-        '--border-color-popover': string;
-        '--border-radius': string;
-        '--text-color': string;
-        '--title-font-weight': string;
-        '--title-font-size': string;
-        '--title-text-color': string;
-        '--day-text-color': string;
-        '--font-size': string;
-        '--line-height': string;
-        '--date-color-current': string;
-        '--date-text-color-current': string;
-        '--cell-color': string;
-        '--cell-color-modal': string;
-        '--cell-color-popover': string;
-        '--cell-color-hover': string;
-        '--cell-color-hover-modal': string;
-        '--cell-color-hover-popover': string;
-        '--bar-color': string;
+        '--n-bezier': string;
+        '--n-border-color': string;
+        '--n-border-color-modal': string;
+        '--n-border-color-popover': string;
+        '--n-border-radius': string;
+        '--n-text-color': string;
+        '--n-title-font-weight': string;
+        '--n-title-font-size': string;
+        '--n-title-text-color': string;
+        '--n-day-text-color': string;
+        '--n-font-size': string;
+        '--n-line-height': string;
+        '--n-date-color-current': string;
+        '--n-date-text-color-current': string;
+        '--n-cell-color': string;
+        '--n-cell-color-modal': string;
+        '--n-cell-color-popover': string;
+        '--n-cell-color-hover': string;
+        '--n-cell-color-hover-modal': string;
+        '--n-cell-color-hover-popover': string;
+        '--n-bar-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly isDateDisabled?: unknown;

package/lib/calendar/src/Calendar.js

@@ -67,27 +67,27 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { borderColor, borderColorModal, borderColorPopover, borderRadius, titleFontSize, textColor, titleFontWeight, titleTextColor, dayTextColor, fontSize, lineHeight, dateColorCurrent, dateTextColorCurrent, cellColorHover, cellColor, cellColorModal, barColor, cellColorPopover, cellColorHoverModal, cellColorHoverPopover } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-color': borderColor,
-                    '--border-color-modal': borderColorModal,
-                    '--border-color-popover': borderColorPopover,
-                    '--border-radius': borderRadius,
-                    '--text-color': textColor,
-                    '--title-font-weight': titleFontWeight,
-                    '--title-font-size': titleFontSize,
-                    '--title-text-color': titleTextColor,
-                    '--day-text-color': dayTextColor,
-                    '--font-size': fontSize,
-                    '--line-height': lineHeight,
-                    '--date-color-current': dateColorCurrent,
-                    '--date-text-color-current': dateTextColorCurrent,
-                    '--cell-color': cellColor,
-                    '--cell-color-modal': cellColorModal,
-                    '--cell-color-popover': cellColorPopover,
-                    '--cell-color-hover': cellColorHover,
-                    '--cell-color-hover-modal': cellColorHoverModal,
-                    '--cell-color-hover-popover': cellColorHoverPopover,
-                    '--bar-color': barColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-color': borderColor,
+                    '--n-border-color-modal': borderColorModal,
+                    '--n-border-color-popover': borderColorPopover,
+                    '--n-border-radius': borderRadius,
+                    '--n-text-color': textColor,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-day-text-color': dayTextColor,
+                    '--n-font-size': fontSize,
+                    '--n-line-height': lineHeight,
+                    '--n-date-color-current': dateColorCurrent,
+                    '--n-date-text-color-current': dateTextColorCurrent,
+                    '--n-cell-color': cellColor,
+                    '--n-cell-color-modal': cellColorModal,
+                    '--n-cell-color-popover': cellColorPopover,
+                    '--n-cell-color-hover': cellColorHover,
+                    '--n-cell-color-hover-modal': cellColorHoverModal,
+                    '--n-cell-color-hover-popover': cellColorHoverPopover,
+                    '--n-bar-color': barColor
                 };
             })
         };

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

@@ -5,30 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --border-color
-// --border-color-modal
-// --border-color-popover
-// --border-radius
-// --text-color
-// --title-font-weight
-// --title-font-size
-// --title-text-color
-// --day-text-color
-// --font-size
-// --line-height
-// --date-color-current
-// --cell-color
-// --cell-color-hover
-// --cell-color-hover-modal
-// --cell-color-hover-popover
-// --bar-color
+// --n-bezier
+// --n-border-color
+// --n-border-color-modal
+// --n-border-color-popover
+// --n-border-radius
+// --n-text-color
+// --n-title-font-weight
+// --n-title-font-size
+// --n-title-text-color
+// --n-day-text-color
+// --n-font-size
+// --n-line-height
+// --n-date-color-current
+// --n-cell-color
+// --n-cell-color-hover
+// --n-cell-color-hover-modal
+// --n-cell-color-hover-popover
+// --n-bar-color
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('calendar', `
- line-height: var(--line-height);
- font-size: var(--font-size);
- color: var(--text-color);
+ line-height: var(--n-line-height);
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
  height: 720px;
  display: flex;
  flex-direction: column;
@@ -40,13 +40,13 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('calendar', `
  display: flex;
  align-items: center;
  line-height: 1;
- font-size: var(--title-font-size);
+ font-size: var(--n-title-font-size);
  padding: 0 0 18px 0;
  justify-content: space-between;
  `, [(0, cssr_1.cE)('title', `
- color: var(--title-text-color);
- font-weight: var(--title-font-weight);
- transition: color .3s var(--bezier);
+ color: var(--n-title-text-color);
+ font-weight: var(--n-title-font-weight);
+ transition: color .3s var(--n-bezier);
  `), (0, cssr_1.cE)('extra', `
  display: flex;
  align-items: center;
@@ -54,32 +54,32 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('calendar', `
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 1fr;
- border-radius: var(--border-radius);
+ border-radius: var(--n-border-radius);
  flex: 1;
  border-top: 1px solid;
  border-left: 1px solid;
- border-color: var(--border-color);
- transition: border-color .3s var(--bezier);
+ border-color: var(--n-border-color);
+ transition: border-color .3s var(--n-bezier);
  `), (0, cssr_1.cB)('calendar-cell', `
  box-sizing: border-box;
  padding: 10px;
  border-right: 1px solid;
  border-bottom: 1px solid;
- border-color: var(--border-color);
+ border-color: var(--n-border-color);
  cursor: pointer;
  position: relative;
  transition:
- color .3s var(--bezier),
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `, [(0, cssr_1.c)('&:nth-child(7)', `
- border-top-right-radius: var(--border-radius);
+ border-top-right-radius: var(--n-border-radius);
  `), (0, cssr_1.c)('&:nth-last-child(7)', `
- border-bottom-left-radius: var(--border-radius);
+ border-bottom-left-radius: var(--n-border-radius);
  `), (0, cssr_1.c)('&:last-child', `
- border-bottom-right-radius: var(--border-radius);
+ border-bottom-right-radius: var(--n-border-radius);
  `), (0, cssr_1.c)('&:hover', `
- background-color: var(--cell-color-hover);
+ background-color: var(--n-cell-color-hover);
  `), (0, cssr_1.cE)('bar', `
  position: absolute;
  left: 0;
@@ -87,22 +87,22 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('calendar', `
  bottom: -1px;
  height: 3px;
  background-color: #0000;
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  `), (0, cssr_1.cM)('selected', [(0, cssr_1.cE)('bar', `
- background-color: var(--bar-color);
+ background-color: var(--n-bar-color);
  `)]), (0, cssr_1.cB)('calendar-date', `
  transition:
- color .3s var(--bezier),
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
- color: var(--text-color);
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ color: var(--n-text-color);
  `, [(0, cssr_1.cE)('date', `
- color: var(--text-color);
- `)]), (0, cssr_1.cM)('disabled', 'color: var(--day-text-color);', [(0, cssr_1.cB)('calendar-date', [(0, cssr_1.cE)('date', `
- color: var(--day-text-color);
+ color: var(--n-text-color);
+ `)]), (0, cssr_1.cM)('disabled', 'color: var(--n-day-text-color);', [(0, cssr_1.cB)('calendar-date', [(0, cssr_1.cE)('date', `
+ color: var(--n-day-text-color);
  `)])]), (0, cssr_1.cM)('current', [(0, cssr_1.cB)('calendar-date', [(0, cssr_1.cE)('date', `
- color: var(--date-text-color-current);
- background-color: var(--date-color-current);
+ color: var(--n-date-text-color-current);
+ background-color: var(--n-date-color-current);
  `)])]), (0, cssr_1.cB)('calendar-date', `
  position: relative;
  line-height: 1;
@@ -120,21 +120,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('calendar', `
  width: 1.8em;
  height: 1.8em;
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `), (0, cssr_1.cE)('day', `
- color: var(--day-text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-day-text-color);
+ transition: color .3s var(--n-bezier);
  `)])])]), (0, cssr_1.insideModal)((0, cssr_1.cB)('calendar', [(0, cssr_1.cB)('calendar-dates', `
- border-color: var(--border-color-modal);
+ border-color: var(--n-border-color-modal);
  `), (0, cssr_1.cB)('calendar-cell', `
- border-color: var(--border-color-modal);
+ border-color: var(--n-border-color-modal);
  `, [(0, cssr_1.c)('&:hover', `
- background-color: var(--cell-color-hover-modal);
+ background-color: var(--n-cell-color-hover-modal);
  `)])])), (0, cssr_1.insidePopover)((0, cssr_1.cB)('calendar', [(0, cssr_1.cB)('calendar-dates', `
- border-color: var(--border-color-popover);
+ border-color: var(--n-border-color-popover);
  `), (0, cssr_1.cB)('calendar-cell', `
- border-color: var(--border-color-popover);
+ border-color: var(--n-border-color-popover);
  `, [(0, cssr_1.c)('&:hover', `
- background-color: var(--cell-color-hover-popover);
+ background-color: var(--n-cell-color-hover-popover);
  `)])]))]);

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

@@ -28,9 +28,10 @@ export declare const cardBaseProps: {
         readonly default: boolean;
     };
     readonly hoverable: BooleanConstructor;
+    readonly role: StringConstructor;
     readonly onClose: PropType<MaybeArray<() => void>>;
 };
-export declare const cardBasePropKeys: ("size" | "title" | "bordered" | "contentStyle" | "onClose" | "closable" | "hoverable" | "headerStyle" | "footerStyle" | "embedded" | "segmented")[];
+export declare const cardBasePropKeys: ("size" | "title" | "role" | "bordered" | "contentStyle" | "onClose" | "closable" | "hoverable" | "headerStyle" | "footerStyle" | "embedded" | "segmented")[];
 declare const cardProps: {
     title: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
@@ -54,6 +55,7 @@ declare const cardProps: {
         readonly default: boolean;
     };
     hoverable: BooleanConstructor;
+    role: StringConstructor;
     onClose: PropType<MaybeArray<() => void>>;
     theme: PropType<import("../../_mixins").Theme<"Card", {
         lineHeight: string;
@@ -173,6 +175,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: boolean;
     };
     hoverable: BooleanConstructor;
+    role: StringConstructor;
     onClose: PropType<MaybeArray<() => void>>;
     theme: PropType<import("../../_mixins").Theme<"Card", {
         lineHeight: string;
@@ -412,28 +415,28 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     handleCloseClick: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--border-radius': string;
-        '--color': string;
-        '--color-modal': string;
-        '--color-popover': string;
-        '--color-target': string;
-        '--text-color': string;
-        '--line-height': string;
-        '--action-color': string;
-        '--title-text-color': string;
-        '--title-font-weight': string;
-        '--close-color': string;
-        '--close-color-hover': string;
-        '--close-color-pressed': string;
-        '--border-color': string;
-        '--box-shadow': string;
-        '--padding-top': string;
-        '--padding-bottom': string;
-        '--padding-left': string;
-        '--font-size': string;
-        '--title-font-size': string;
-        '--close-size': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-color': string;
+        '--n-color-modal': string;
+        '--n-color-popover': string;
+        '--n-color-target': string;
+        '--n-text-color': string;
+        '--n-line-height': string;
+        '--n-action-color': string;
+        '--n-title-text-color': string;
+        '--n-title-font-weight': string;
+        '--n-close-color': string;
+        '--n-close-color-hover': string;
+        '--n-close-color-pressed': string;
+        '--n-border-color': string;
+        '--n-box-shadow': string;
+        '--n-padding-top': string;
+        '--n-padding-bottom': string;
+        '--n-padding-left': string;
+        '--n-font-size': string;
+        '--n-title-font-size': string;
+        '--n-close-size': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     title?: unknown;
@@ -446,6 +449,7 @@ declare const _default: import("vue").DefineComponent<{
     bordered?: unknown;
     closable?: unknown;
     hoverable?: unknown;
+    role?: unknown;
     onClose?: unknown;
     theme?: unknown;
     themeOverrides?: unknown;
@@ -459,6 +463,7 @@ declare const _default: import("vue").DefineComponent<{
     segmented: boolean | Segmented;
 } & {
     title?: string | undefined;
+    role?: string | undefined;
     theme?: import("../../_mixins").Theme<"Card", {
         lineHeight: string;
         color: string;