@uzum-tech/ui 1.5.3 → 1.5.5

package/es/_utils/css/index.d.ts

@@ -1,2 +1,3 @@
 export { formatLength } from './format-length';
 export { color2Class } from './color-to-class';
+export { resolveSize } from './normalize-size';

package/es/_utils/css/index.js

@@ -1,2 +1,3 @@
 export { formatLength } from './format-length';
 export { color2Class } from './color-to-class';
+export { resolveSize } from './normalize-size';

package/es/_utils/css/normalize-size.d.ts

@@ -0,0 +1 @@
+export declare const resolveSize: (value: string | number | undefined, fallback: string) => string;

package/es/_utils/css/normalize-size.js

@@ -0,0 +1,6 @@
+export const resolveSize = (value, fallback) => {
+    if (value === undefined)
+        return fallback;
+    value = String(value);
+    return /^\d+$/.test(value) ? `${value}px` : value;
+};

package/es/_utils/index.d.ts

@@ -2,7 +2,7 @@ export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, g
 export type { MaybeArray } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute, isArrayShallowEqual } from './uzum';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes, Mutable } from './uzum';
-export { formatLength, color2Class } from './css';
+export { formatLength, color2Class, resolveSize } from './css';
 export { createKey } from './cssr';
 export { isJsdom } from './env/is-jsdom';
 export { isBrowser } from './env/is-browser';

package/es/_utils/index.js

@@ -1,6 +1,6 @@
 export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, getFirstSlotVNode, createDataKey, createRefSetter, createInjectionKey, resolveSlot, resolveSlotWithProps, resolveWrappedSlot, isSlotEmpty, mergeEventHandlers, isNodeVShowFalse, resolveWrappedSlotWithProps, Wrapper } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute, isArrayShallowEqual } from './uzum';
-export { formatLength, color2Class } from './css';
+export { formatLength, color2Class, resolveSize } from './css';
 export { createKey } from './cssr';
 export { isJsdom } from './env/is-jsdom';
 export { isBrowser } from './env/is-browser';

package/es/avatar/src/Avatar.js

@@ -4,7 +4,7 @@ import { isImageSupportNativeLazy } from '../../_utils/env/is-native-lazy-load';
 import { observeIntersection } from '../../image/src/utils';
 import { tagInjectionKey } from '../../tag/src/Tag';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { createKey, resolveWrappedSlot, resolveSlot } from '../../_utils';
+import { createKey, resolveWrappedSlot, resolveSlot, resolveSize } from '../../_utils';
 import { avatarLight } from '../styles';
 import { avatarGroupInjectionKey } from './context';
 import { USkeleton } from '../../skeleton';
@@ -103,12 +103,6 @@ export default defineComponent({
             const getBackgroundColor = (color) => {
                 return props.disabled || size === 'small' ? 'rgba(0,0,0,0)' : color;
             };
-            const resolveSize = (value, fallback) => {
-                if (value === undefined)
-                    return fallback;
-                value = String(value);
-                return /^\d+$/.test(value) ? `${value}px` : value;
-            };
             return {
                 '--u-font-size': fontSize,
                 '--u-font-weight': fontWeight,

package/es/badge/src/Badge.d.ts

@@ -16,6 +16,7 @@ export declare const badgeProps: {
     readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
+    readonly dotSize: PropType<string | number>;
     readonly offset: PropType<readonly [number | string, number | string]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -32,6 +33,7 @@ export declare const badgeProps: {
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -48,6 +50,7 @@ export declare const badgeProps: {
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -64,6 +67,7 @@ export declare const badgeProps: {
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
 };
 export type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>;
@@ -83,6 +87,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
+    readonly dotSize: PropType<string | number>;
     readonly offset: PropType<readonly [number | string, number | string]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -99,6 +104,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -115,6 +121,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -131,6 +138,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
 }, {
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
@@ -147,6 +155,7 @@ declare const _default: import("vue").DefineComponent<{
         '--u-ripple-bezier': string;
         '--u-text-color': string;
         '--u-border-color': string;
+        '--u-dot-size': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -169,6 +178,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
+    readonly dotSize: PropType<string | number>;
     readonly offset: PropType<readonly [number | string, number | string]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -185,6 +195,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -201,6 +212,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -217,6 +229,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
 }>>, {
     readonly type: "default" | "info" | "success" | "warning" | "error" | "prime";

package/es/badge/src/Badge.js

@@ -1,7 +1,7 @@
 import { h, computed, onMounted, ref, defineComponent, Transition } from 'vue';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { UBaseSlotMachine, UBaseWave } from '../../_internal';
-import { color2Class, createKey, getTitleAttribute, isSlotEmpty, resolveSlot } from '../../_utils';
+import { color2Class, createKey, getTitleAttribute, isSlotEmpty, resolveSize, resolveSlot } from '../../_utils';
 import { badgeLight } from '../styles';
 import style from './styles/index.cssr';
 import { useRtl } from '../../_mixins/use-rtl';
@@ -11,7 +11,7 @@ export const badgeProps = Object.assign(Object.assign({}, useTheme.props), { val
     }, show: {
         type: Boolean,
         default: true
-    }, showZero: Boolean, processing: Boolean, color: String, textColor: String, offset: Array });
+    }, showZero: Boolean, processing: Boolean, color: String, textColor: String, dotSize: [String, Number], offset: Array });
 export default defineComponent({
     name: 'Badge',
     props: badgeProps,
@@ -39,7 +39,7 @@ export default defineComponent({
         const rtlEnabledRef = useRtl('Badge', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { type, color: propColor, textColor: propTextColor } = props;
-            const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [createKey('color', type)]: color, [createKey('textColor', type)]: textColor, fontSize, borderColor } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [createKey('color', type)]: color, [createKey('textColor', type)]: textColor, fontSize, borderColor, dotSize } } = themeRef.value;
             return {
                 '--u-font-size': fontSize,
                 '--u-color': propColor || color,
@@ -47,7 +47,8 @@ export default defineComponent({
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-ripple-bezier': cubicBezierEaseOut,
                 '--u-text-color': propTextColor || textColor,
-                '--u-border-color': borderColor
+                '--u-border-color': borderColor,
+                '--u-dot-size': resolveSize(props.dotSize, dotSize)
             };
         });
         const themeClassHandle = inlineThemeDisabled

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

@@ -29,13 +29,14 @@ export default c([c('@keyframes badge-wave-spread', {
   transformOrigin: 'left bottom',
   originalTransform: 'translateX(0)'
 })])]), cM('dot', [cB('badge-sup', `
- height: 8px;
- width: 8px;
+ height: var(--u-dot-size);
+ width: var(--u-dot-size);
+ justify-content: center;
+ overflow: hidden;
  padding: 0;
- min-width: 8px;
  left: 100%;
  bottom: calc(100% - 4px);
- `, [c('::before', 'border-radius: 4px;')])]), cB('badge-sup', `
+ `, [c('::before', 'border-radius: 4px;'), c('img', 'width: 100%')])]), cB('badge-sup', `
  background: var(--u-color);
  transition:
  background-color .3s var(--u-bezier),
@@ -86,8 +87,6 @@ export default c([c('@keyframes badge-wave-spread', {
  border-radius: 100px;
  `), cM('dot', [cB('badge-sup', `
  transform: none;
- width: 12px;
- height: 12px;
  transform: none;
  left: auto;
  right: 0;

package/es/badge/styles/light.d.ts

@@ -15,6 +15,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     textColorError: string;
     textColorWarning: string;
     borderColor: string;
+    dotSize: string;
 };
 export type BadgeThemeVars = ReturnType<typeof self>;
 declare const badgeLight: Theme<'Badge', BadgeThemeVars>;

package/es/badge/styles/light.js

@@ -15,7 +15,8 @@ export const self = (vars) => {
         textColorSuccess: textQuaternary,
         textColorError: textQuaternary,
         textColorWarning: textQuaternary,
-        borderColor: staticWhite
+        borderColor: staticWhite,
+        dotSize: '12px'
     };
 };
 const badgeLight = {

package/es/collapse/src/Collapse.d.ts

@@ -9,7 +9,7 @@ export declare const collapseProps: {
     readonly expandedNames: PropType<string | number | Array<string | number> | null>;
     readonly arrowPlacement: {
         readonly type: PropType<ArrowPlacement>;
-        readonly default: "left";
+        readonly default: "right-edge";
     };
     readonly accordion: {
         readonly type: BooleanConstructor;
@@ -40,8 +40,11 @@ export declare const collapseProps: {
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
@@ -56,8 +59,11 @@ export declare const collapseProps: {
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
@@ -72,8 +78,11 @@ export declare const collapseProps: {
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
 };
 export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>;
@@ -93,7 +102,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly expandedNames: PropType<string | number | Array<string | number> | null>;
     readonly arrowPlacement: {
         readonly type: PropType<ArrowPlacement>;
-        readonly default: "left";
+        readonly default: "right-edge";
     };
     readonly accordion: {
         readonly type: BooleanConstructor;
@@ -124,8 +133,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
@@ -140,8 +152,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
@@ -156,8 +171,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
 }, {
     rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
@@ -176,8 +194,11 @@ declare const _default: import("vue").DefineComponent<{
             arrowSize: string;
             arrowColor: string;
             arrowColorDisabled: string;
-            itemMargin: string;
             titlePadding: string;
+            backgroundColor: string;
+            borderRadius: string;
+            padding: string;
+            boxSizing: string;
         };
         peers: any;
         peerOverrides: {
@@ -200,7 +221,10 @@ declare const _default: import("vue").DefineComponent<{
         '--u-arrow-size': string;
         '--u-arrow-color': string;
         '--u-arrow-color-disabled': string;
-        '--u-item-margin': string;
+        '--u-background-color': string;
+        '--u-border-radius': string;
+        '--u-padding': string;
+        '--u-box-sizing': string;
     }> | undefined;
     themeClass: Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -212,7 +236,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly expandedNames: PropType<string | number | Array<string | number> | null>;
     readonly arrowPlacement: {
         readonly type: PropType<ArrowPlacement>;
-        readonly default: "left";
+        readonly default: "right-edge";
     };
     readonly accordion: {
         readonly type: BooleanConstructor;
@@ -243,8 +267,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
@@ -259,8 +286,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
@@ -275,8 +305,11 @@ declare const _default: import("vue").DefineComponent<{
         arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
-        itemMargin: string;
         titlePadding: string;
+        backgroundColor: string;
+        borderRadius: string;
+        padding: string;
+        boxSizing: string;
     }, any>>>;
 }>>, {
     readonly displayDirective: "show" | "if";

package/es/collapse/src/Collapse.js

@@ -10,7 +10,7 @@ export const collapseProps = Object.assign(Object.assign({}, useTheme.props), {
         default: null
     }, expandedNames: [Array, String], arrowPlacement: {
         type: String,
-        default: 'left'
+        default: 'right-edge'
     }, accordion: {
         type: Boolean,
         default: false
@@ -101,7 +101,7 @@ export default defineComponent({
         });
         const rtlEnabledRef = useRtl('Collapse', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
-            const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titlePadding, titleTextColor, titleTextColorDisabled, textColor, arrowColor, fontSize, titleFontSize, arrowColorDisabled, itemMargin, lineHeight, titleLineHeight, arrowSize } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titlePadding, titleTextColor, titleTextColorDisabled, textColor, arrowColor, fontSize, titleFontSize, arrowColorDisabled, lineHeight, titleLineHeight, arrowSize, backgroundColor, borderRadius, padding, boxSizing } } = themeRef.value;
             return {
                 '--u-font-size': fontSize,
                 '--u-bezier': cubicBezierEaseInOut,
@@ -117,7 +117,10 @@ export default defineComponent({
                 '--u-arrow-size': arrowSize,
                 '--u-arrow-color': arrowColor,
                 '--u-arrow-color-disabled': arrowColorDisabled,
-                '--u-item-margin': itemMargin
+                '--u-background-color': backgroundColor,
+                '--u-border-radius': borderRadius,
+                '--u-padding': padding,
+                '--u-box-sizing': boxSizing
             };
         });
         const themeClassHandle = inlineThemeDisabled

package/es/collapse/src/CollapseItem.js

@@ -61,6 +61,7 @@ export default defineComponent({
                 return collapseProps.arrowPlacement;
             }),
             handleClick(e) {
+                e.stopPropagation();
                 if (UCollapse && !props.disabled) {
                     UCollapse.toggleItem(collapsedRef.value, mergedNameRef.value, e);
                 }
@@ -85,12 +86,12 @@ export default defineComponent({
                 `${mergedClsPrefix}-collapse-item--${arrowPlacement}-arrow-placement`,
                 disabled && `${mergedClsPrefix}-collapse-item--disabled`,
                 !collapsed && `${mergedClsPrefix}-collapse-item--active`
-            ] },
+            ], onClick: this.handleClick },
             h("div", { class: [
                     `${mergedClsPrefix}-collapse-item__header`,
                     !collapsed && `${mergedClsPrefix}-collapse-item__header--active`
                 ] },
-                h("div", { class: `${mergedClsPrefix}-collapse-item__header-main`, onClick: this.handleClick },
+                h("div", { class: `${mergedClsPrefix}-collapse-item__header-main` },
                     arrowPlacement !== 'right-edge' && arrowNode,
                     headerNode),
                 resolveWrappedSlotWithProps(headerExtraSlot, { collapsed }, (children) => (h("div", { class: `${mergedClsPrefix}-collapse-item__header-extra`, onClick: this.handleClick }, children))),

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

@@ -12,15 +12,24 @@ import { fadeInHeightExpandTransition } from '../../../_styles/transitions/fade-
 // --u-arrow-color
 // --u-arrow-color-disabled
 // --u-title-text-color-disabled
-// --u-item-margin
-export default cB('collapse', 'width: 100%;', [cB('collapse-item', `
+// --u-background-color
+// --u-border-radius
+// --u-padding
+// --u-box-sizing
+export default cB('collapse', `
+ width: 100%;
+ background-color: var(--u-background-color);
+ border-radius: var(--u-border-radius);
+ box-sizing: var(--u-box-sizing);
+ `, [cB('collapse-item', `
  font-size: var(--u-font-size);
  line-height: var(--u-line-height);
  color: var(--u-text-color);
  transition:
  color .3s var(--u-bezier),
  border-color .3s var(--u-bezier);
- margin: var(--u-item-margin);
+ padding: var(--u-padding);
+ cursor: pointer;
  `, [cM('disabled', [cE('header', 'cursor: not-allowed;', [cE('header-main', `
  color: var(--u-title-text-color-disabled);
  `), cB('collapse-item-arrow', `
@@ -28,9 +37,22 @@ export default cB('collapse', 'width: 100%;', [cB('collapse-item', `
  `)])]), cB('collapse-item', 'margin-left: 32px;'), c('&:first-child', 'margin-top: 0;'), c('&:first-child >', [cE('header', 'padding-top: 0;')]), cM('left-arrow-placement', [cE('header', [cB('collapse-item-arrow', 'margin-right: 4px;')])]), cM('right-arrow-placement', [cE('header', [cB('collapse-item-arrow', `
  margin-left: 4px;
  order: 1;
- `)])]), cM('right-edge-arrow-placement', [cE('header', [cB('collapse-item-arrow', 'margin-left: auto;')])]), cE('content-wrapper', [cE('content-inner', 'padding-top: 16px;'), fadeInHeightExpandTransition({
+ `)])]), cM('right-edge-arrow-placement', [cE('header', [cB('collapse-item-arrow', `
+ margin-left: auto;
+ display: flex;
+ width: 28px;
+ height: 28px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 100px;
+ background: #F3F4F6;
+ `, [cB('base-icon', `
+ transform: scaleY(1) rotate(90deg);
+ transition:
+ transform .15s var(--u-bezier)
+ `)])])]), cE('content-wrapper', [cE('content-inner', 'padding-top: 16px;'), fadeInHeightExpandTransition({
   duration: '0.15s'
-})]), cM('active', [cE('header', [cM('active', [cB('collapse-item-arrow', 'transform: rotate(90deg);')])])]), c('&:not(:first-child)', 'border-top: 1px solid var(--u-divider-color);'), cE('header', `
+})]), cM('active', [cE('header', [cM('active', [cB('collapse-item-arrow', [cB('base-icon', 'transform: scaleY(-1) rotate(90deg)')])])])]), cE('header', `
  font-size: var(--u-title-font-size);
  line-height: var(--u-title-line-height);
  display: flex;
@@ -38,9 +60,7 @@ export default cB('collapse', 'width: 100%;', [cB('collapse-item', `
  align-items: center;
  transition: color .3s var(--u-bezier);
  position: relative;
- padding: var(--u-title-padding);
  color: var(--u-title-text-color);
- cursor: pointer;
  `, [cE('header-main', `
  display: flex;
  flex-wrap: nowrap;

package/es/collapse/styles/light.d.ts

@@ -13,8 +13,11 @@ export declare const self: (vars: ThemeCommonVars) => {
     arrowSize: string;
     arrowColor: string;
     arrowColorDisabled: string;
-    itemMargin: string;
     titlePadding: string;
+    backgroundColor: string;
+    borderRadius: string;
+    padding: string;
+    boxSizing: string;
 };
 export type CollapseThemeVars = ReturnType<typeof self>;
 declare const collapseLight: Theme<'Collapse', CollapseThemeVars>;

package/es/collapse/styles/light.js

@@ -1,6 +1,6 @@
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { fontWeight, fontBodyLarge, lineHeightBodyLarge, elementsQuaternary, textPrimary, textSecondary, fontBodyMedium, lineHeightBodyMedium, iconSmall } = vars;
+    const { fontWeight, fontBodyLarge, lineHeightBodyLarge, elementsQuaternary, textPrimary, textSecondary, fontBodyMedium, lineHeightBodyMedium, iconSmall, containerPrimary } = vars;
     return {
         titleFontSize: fontBodyLarge,
         titleLineHeight: lineHeightBodyLarge,
@@ -14,8 +14,11 @@ export const self = (vars) => {
         arrowSize: iconSmall,
         arrowColor: textPrimary,
         arrowColorDisabled: textSecondary,
-        itemMargin: '16px 0 0 0',
-        titlePadding: '16px 0 0 0'
+        titlePadding: '16px 0 0 0',
+        backgroundColor: containerPrimary,
+        borderRadius: '20px',
+        padding: '24px',
+        boxSizing: 'border-box'
     };
 };
 const collapseLight = {

package/es/data-table/src/DataTable.d.ts

@@ -91,6 +91,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<import("../../_internal").BaseLoadingExposedProps>;
         readonly default: {};
     };
+    readonly emptyProps: import("vue").PropType<Partial<import("../..").EmptyProps>>;
     readonly onLoad: import("vue").PropType<import("./interface").DataTableOnLoad>;
     readonly 'onUpdate:page': import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
     readonly onUpdatePage: import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
@@ -4368,6 +4369,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<import("../../_internal").BaseLoadingExposedProps>;
         readonly default: {};
     };
+    readonly emptyProps: import("vue").PropType<Partial<import("../..").EmptyProps>>;
     readonly onLoad: import("vue").PropType<import("./interface").DataTableOnLoad>;
     readonly 'onUpdate:page': import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;
     readonly onUpdatePage: import("vue").PropType<import("../../pagination").PaginationProps["onUpdate:page"]>;

package/es/data-table/src/DataTable.js

@@ -300,6 +300,7 @@ export default defineComponent({
             handleTableBodyScroll,
             setHeaderScrollLeft,
             renderCell: toRef(props, 'renderCell'),
+            emptyPropsRef: toRef(props, 'emptyProps'),
             handleEdit
         });
         const exposedMethods = {

package/es/data-table/src/TableParts/Body.d.ts

@@ -1430,6 +1430,7 @@ declare const _default: import("vue").DefineComponent<{
     }) => void;
     handleUpdateExpanded: (key: RowKey, tmNode: TmNode | null) => void;
     renderCell: import("vue").Ref<((value: any, rowData: object, column: import("../interface").TableBaseColumn) => import("vue").VNodeChild) | undefined>;
+    emptyPropsRef: import("vue").Ref<Partial<import("../../../empty").EmptyProps> | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "edit"[], "edit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     onEdit: PropType<(value: string, row: string, key: string) => void>;
     onResize: PropType<(e: ResizeObserverEntry) => void>;

package/es/data-table/src/TableParts/Body.js

@@ -94,7 +94,7 @@ export default defineComponent({
         bodyStyle: Object
     },
     setup(props) {
-        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, loadingSkeletonRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
+        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, loadingSkeletonRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell, emptyPropsRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(dataTableInjectionKey);
         const scrollbarInstRef = ref(null);
@@ -342,10 +342,11 @@ export default defineComponent({
             handleCheckboxUpdateChecked,
             handleRadioUpdateChecked,
             handleUpdateExpanded,
-            renderCell }, exposedMethods);
+            renderCell,
+            emptyPropsRef }, exposedMethods);
     },
     render() {
-        const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft } = this;
+        const { mergedTheme, scrollX, mergedClsPrefix, virtualScroll, maxHeight, mergedTableLayout, flexHeight, loadingKeySet, onResize, setHeaderScrollLeft, emptyPropsRef } = this;
         const scrollable = scrollX !== undefined || maxHeight !== undefined || flexHeight;
         // For a basic table with auto layout whose content may overflow we will
         // make it scrollable, which differs from browser's native behavior.
@@ -621,7 +622,7 @@ export default defineComponent({
                     `${mergedClsPrefix}-data-table-empty`,
                     this.loading && `${mergedClsPrefix}-data-table-empty--hide`
                 ], style: this.bodyStyle, ref: "emptyElRef" }, resolveSlot(this.dataTableSlots.empty, () => [
-                h(UEmpty, { size: "large", theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })
+                h(UEmpty, Object.assign({ size: "large", theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty }, emptyPropsRef))
             ])));
             if (this.shouldDisplaySomeTablePart) {
                 return (h(Fragment, null,