naive-ui 2.23.0 → 2.24.1

package/lib/calendar/src/Calendar.js

@@ -17,7 +17,7 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const calendarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { isDateDisabled: Function, value: Number, defaultValue: {
         type: Number,
         defualt: null
-    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
+    }, onPanelChange: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Calendar',
     props: calendarProps,
@@ -41,10 +41,22 @@ exports.default = (0, vue_1.defineComponent)({
             uncontrolledValueRef.value = value;
         }
         function handlePrevClick() {
-            monthTsRef.value = (0, date_fns_1.addMonths)(monthTsRef.value, -1).valueOf();
+            var _a;
+            const monthTs = (0, date_fns_1.addMonths)(monthTsRef.value, -1).valueOf();
+            monthTsRef.value = monthTs;
+            (_a = props.onPanelChange) === null || _a === void 0 ? void 0 : _a.call(props, {
+                year: (0, date_fns_1.getYear)(monthTs),
+                month: (0, date_fns_1.getMonth)(monthTs) + 1
+            });
         }
         function handleNextClick() {
-            monthTsRef.value = (0, date_fns_1.addMonths)(monthTsRef.value, 1).valueOf();
+            var _a;
+            const monthTs = (0, date_fns_1.addMonths)(monthTsRef.value, 1).valueOf();
+            monthTsRef.value = monthTs;
+            (_a = props.onPanelChange) === null || _a === void 0 ? void 0 : _a.call(props, {
+                year: (0, date_fns_1.getYear)(monthTs),
+                month: (0, date_fns_1.getMonth)(monthTs) + 1
+            });
         }
         function handleTodayClick() {
             monthTsRef.value = (0, date_fns_1.startOfMonth)(now).valueOf();
@@ -67,27 +79,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/interface.d.ts

@@ -4,3 +4,7 @@ export interface DateItem {
     month: number;
     date: number;
 }
+export declare type OnPanelChange = (info: {
+    year: number;
+    month: number;
+}) => void;

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;

package/lib/card/src/Card.js

@@ -35,6 +35,7 @@ exports.cardBaseProps = {
         default: false
     },
     hoverable: Boolean,
+    role: String,
     onClose: [Function, Array]
 };
 exports.cardBasePropKeys = (0, _utils_1.keysOf)(exports.cardBaseProps);
@@ -61,29 +62,29 @@ exports.default = (0, vue_1.defineComponent)({
                 const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, closeSize, boxShadow, colorPopover, colorEmbedded, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = (0, seemly_1.getPadding)(padding);
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--color': props.embedded ? colorEmbedded : color,
-                    '--color-modal': colorModal,
-                    '--color-popover': colorPopover,
-                    '--color-target': colorTarget,
-                    '--text-color': textColor,
-                    '--line-height': lineHeight,
-                    '--action-color': actionColor,
-                    '--title-text-color': titleTextColor,
-                    '--title-font-weight': titleFontWeight,
-                    '--close-color': closeColor,
-                    '--close-color-hover': closeColorHover,
-                    '--close-color-pressed': closeColorPressed,
-                    '--border-color': borderColor,
-                    '--box-shadow': boxShadow,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-color': props.embedded ? colorEmbedded : color,
+                    '--n-color-modal': colorModal,
+                    '--n-color-popover': colorPopover,
+                    '--n-color-target': colorTarget,
+                    '--n-text-color': textColor,
+                    '--n-line-height': lineHeight,
+                    '--n-action-color': actionColor,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-close-color': closeColor,
+                    '--n-close-color-hover': closeColorHover,
+                    '--n-close-color-pressed': closeColorPressed,
+                    '--n-border-color': borderColor,
+                    '--n-box-shadow': boxShadow,
                     // size
-                    '--padding-top': paddingTop,
-                    '--padding-bottom': paddingBottom,
-                    '--padding-left': paddingLeft,
-                    '--font-size': fontSize,
-                    '--title-font-size': titleFontSize,
-                    '--close-size': closeSize
+                    '--n-padding-top': paddingTop,
+                    '--n-padding-bottom': paddingBottom,
+                    '--n-padding-left': paddingLeft,
+                    '--n-font-size': fontSize,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-close-size': closeSize
                 };
             })
         };
@@ -104,7 +105,7 @@ exports.default = (0, vue_1.defineComponent)({
                     [`${mergedClsPrefix}-card--bordered`]: bordered,
                     [`${mergedClsPrefix}-card--hoverable`]: hoverable
                 }
-            ], style: this.cssVars },
+            ], style: this.cssVars, role: this.role },
             $slots.cover ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, (0, vue_1.renderSlot)($slots, 'cover'))) : null,
             $slots.header || this.title || this.closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, (0, vue_1.renderSlot)($slots, 'header', {}, () => [this.title])),

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

@@ -5,119 +5,121 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --border-radius
-// --color
-// --color-modal
-// --color-popover
-// --text-color
-// --line-height
-// --padding-top
-// --padding-bottom
-// --padding-left
-// --font-size
-// --action-color
-// --title-font-weight
-// --title-font-size
-// --title-text-color
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --border-color
-// --close-size
-// --box-shadow
+// --n-bezier
+// --n-border-radius
+// --n-color
+// --n-color-modal
+// --n-color-popover
+// --n-text-color
+// --n-line-height
+// --n-padding-top
+// --n-padding-bottom
+// --n-padding-left
+// --n-font-size
+// --n-action-color
+// --n-title-font-weight
+// --n-title-font-size
+// --n-title-text-color
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-border-color
+// --n-close-size
+// --n-box-shadow
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
- font-size: var(--font-size);
- line-height: var(--line-height);
+ font-size: var(--n-font-size);
+ line-height: var(--n-line-height);
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  position: relative;
- border-radius: var(--border-radius);
- background-color: var(--color);
- color: var(--text-color);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-color);
+ color: var(--n-text-color);
  transition: 
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- border-color .3s var(--bezier);
- `, [(0, cssr_1.cM)('hoverable', [(0, cssr_1.c)('&:hover', 'box-shadow: var(--box-shadow);')]), (0, cssr_1.cM)('content-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
-  paddingTop: 'var(--padding-bottom)'
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
+ `, [(0, cssr_1.cM)('hoverable', [(0, cssr_1.c)('&:hover', 'box-shadow: var(--n-box-shadow);')]), (0, cssr_1.cM)('content-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
+  paddingTop: 'var(--n-padding-bottom)'
 })])]), (0, cssr_1.cM)('content-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', `
- margin: 0 var(--padding-left);
- padding: var(--padding-bottom) 0;
+ margin: 0 var(--n-padding-left);
+ padding: var(--n-padding-bottom) 0;
  `)])]), (0, cssr_1.cM)('footer-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('footer', {
-  paddingTop: 'var(--padding-bottom)'
+  paddingTop: 'var(--n-padding-bottom)'
 })])]), (0, cssr_1.cM)('footer-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('footer', `
- padding: var(--padding-bottom) 0;
- margin: 0 var(--padding-left);
+ padding: var(--n-padding-bottom) 0;
+ margin: 0 var(--n-padding-left);
  `)])]), (0, cssr_1.c)('>', [(0, cssr_1.cB)('card-header', `
  box-sizing: border-box;
  display: flex;
  align-items: center;
- font-size: var(--title-font-size);
+ font-size: var(--n-title-font-size);
  padding:
- var(--padding-top)
- var(--padding-left)
- var(--padding-bottom)
- var(--padding-left);
+ var(--n-padding-top)
+ var(--n-padding-left)
+ var(--n-padding-bottom)
+ var(--n-padding-left);
  `, [(0, cssr_1.cE)('main', `
- font-weight: var(--title-font-weight);
- transition: color .3s var(--bezier);
+ font-weight: var(--n-title-font-weight);
+ transition: color .3s var(--n-bezier);
  flex: 1;
- color: var(--title-text-color);
+ color: var(--n-title-text-color);
  `), (0, cssr_1.cE)('extra', `
  display: flex;
  align-items: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  font-weight: 400;
- transition: color .3s var(--bezier);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
  `), (0, cssr_1.cE)('close', `
- font-size: var(--close-size);
- transition: color .3s var(--bezier);
+ font-size: var(--n-close-size);
+ transition: color .3s var(--n-bezier);
  `)]), (0, cssr_1.cE)('action', `
  box-sizing: border-box;
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  background-clip: padding-box;
- background-color: var(--action-color);
+ background-color: var(--n-action-color);
  `), (0, cssr_1.cE)('content', 'flex: 1;'), (0, cssr_1.cE)('content, footer', `
  box-sizing: border-box;
- padding: 0 var(--padding-left) var(--padding-bottom) var(--padding-left);
- font-size: var(--font-size);
+ padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left);
+ font-size: var(--n-font-size);
  `, [(0, cssr_1.c)('&:first-child', {
-  paddingTop: 'var(--padding-bottom)'
+  paddingTop: 'var(--n-padding-bottom)'
 })]), (0, cssr_1.cE)('action', `
- background-color: var(--action-color);
- padding: var(--padding-bottom) var(--padding-left);
+ background-color: var(--n-action-color);
+ padding: var(--n-padding-bottom) var(--n-padding-left);
+ border-bottom-left-radius: var(--n-border-radius);
+ border-bottom-right-radius: var(--n-border-radius);
  `)]), (0, cssr_1.cB)('card-cover', `
  overflow: hidden;
  width: 100%;
- border-radius: var(--border-radius) var(--border-radius) 0 0;
+ border-radius: var(--n-border-radius) var(--n-border-radius) 0 0;
  `, [(0, cssr_1.c)('img', `
  display: block;
  width: 100%;
  `)]), (0, cssr_1.cM)('bordered', `
- border: 1px solid var(--border-color);
- `, [(0, cssr_1.c)('&:target', 'border-color: var(--color-target);')]), (0, cssr_1.cM)('action-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('action', [(0, cssr_1.c)('&:not(:first-child)', {
-  borderTop: '1px solid var(--border-color)'
+ border: 1px solid var(--n-border-color);
+ `, [(0, cssr_1.c)('&:target', 'border-color: var(--n-color-target);')]), (0, cssr_1.cM)('action-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('action', [(0, cssr_1.c)('&:not(:first-child)', {
+  borderTop: '1px solid var(--n-border-color)'
 })])])]), (0, cssr_1.cM)('content-segmented, content-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
-  transition: 'border-color 0.3s var(--bezier)'
+  transition: 'border-color 0.3s var(--n-bezier)'
 }, [(0, cssr_1.c)('&:not(:first-child)', {
-  borderTop: '1px solid var(--border-color)'
+  borderTop: '1px solid var(--n-border-color)'
 })])])]), (0, cssr_1.cM)('footer-segmented, footer-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('footer', {
-  transition: 'border-color 0.3s var(--bezier)'
+  transition: 'border-color 0.3s var(--n-bezier)'
 }, [(0, cssr_1.c)('&:not(:first-child)', {
-  borderTop: '1px solid var(--border-color)'
+  borderTop: '1px solid var(--n-border-color)'
 })])])])]), (0, cssr_1.insideModal)((0, cssr_1.cB)('card', {
-  background: 'var(--color-modal)'
+  background: 'var(--n-color-modal)'
 })), (0, cssr_1.insidePopover)((0, cssr_1.cB)('card', {
-  background: 'var(--color-popover)'
+  background: 'var(--n-color-popover)'
 })), (0, cssr_1.cB)('card', [(0, cssr_1.asModal)({
-  background: 'var(--color-modal)'
+  background: 'var(--n-color-modal)'
 })])]);

package/lib/carousel/index.d.ts

@@ -1,2 +1,3 @@
 export { default as NCarousel } from './src/Carousel';
+export { default as NCarouselItem } from './src/CarouselItem';
 export type { CarouselProps } from './src/Carousel';

package/lib/carousel/index.js

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NCarousel = void 0;
+exports.NCarouselItem = exports.NCarousel = void 0;
 var Carousel_1 = require("./src/Carousel");
 Object.defineProperty(exports, "NCarousel", { enumerable: true, get: function () { return __importDefault(Carousel_1).default; } });
+var CarouselItem_1 = require("./src/CarouselItem");
+Object.defineProperty(exports, "NCarouselItem", { enumerable: true, get: function () { return __importDefault(CarouselItem_1).default; } });