@uzum-tech/ui 1.4.0 → 1.4.2

package/es/_internal/icons/SiderUnionBorder.js

@@ -3,6 +3,6 @@ export default defineComponent({
     name: 'SiderUnionBorder',
     render() {
         return (h("svg", { viewBox: "0 0 35 82", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            h("path", { d: "M15 0L0 0V82H15V72.0682C15 67.6499 18.7463 64.209 22.7412 62.3215C29.9427 58.9189 35 50.9123 35 41.5775C35 32.2426 29.9427 24.236 22.7412 20.8334C18.7463 18.946 15 15.505 15 11.0867V0Z", fill: "currentColor" })));
+            h("path", { d: "M15 0L0 0V82H15V72.0682C15 67.6499 18.7463 64.209 22.7412 62.3215C29.9427 58.9189 35 50.9123 35 41.5775C35 32.2426 29.9427 24.236 22.7412 20.8334C18.7463 18.946 15 15.505 15 11.0867V0Z", fill: "#fff" })));
     }
 });

package/es/card-list/index.d.ts

@@ -1,2 +1,3 @@
 export { default as UCardList, cardListProps } from './src/CardList';
 export type { CardListProps } from './src/CardList';
+export type { ListItemOptions } from './src/interface';

package/es/card-list/src/CardListItem.js

@@ -61,8 +61,7 @@ export default defineComponent({
         return (h("div", { class: `${mergedClsPrefix}-card-list-item`, onClick: isDropdown && items.length ? this.toggle : undefined, ref: "selfRef" },
             isDropdown && (h("div", { class: `${mergedClsPrefix}-card-list-item__wrapper` },
                 h("div", { class: `${mergedClsPrefix}-card-list-item__wrapper-content` },
-                    this.title && (h("div", { class: `${mergedClsPrefix}-card-list-item__title` },
-                        h("strong", null, this.title))),
+                    this.title && (h("div", { class: `${mergedClsPrefix}-card-list-item__title` }, this.title)),
                     this.subtitle && (h("div", { class: `${mergedClsPrefix}-card-list-item__subtitle` }, this.subtitle))),
                 h(ChevronDown, { style: {
                         width: '20px',
@@ -79,8 +78,7 @@ export default defineComponent({
                         `${mergedClsPrefix}-card-list-item__items--grid`
                 ] }, items.map((item, idx) => [
                 h("div", { class: `${mergedClsPrefix}-card-list-item__item`, key: idx },
-                    item.title && (h("div", { class: `${mergedClsPrefix}-card-list-item__title` },
-                        h("strong", null, item.title))),
+                    item.title && (h("div", { class: `${mergedClsPrefix}-card-list-item__title` }, item.title)),
                     item.content && (h("div", { class: `${mergedClsPrefix}-card-list-item__subtitle` }, item.content))),
                 idx < items.length - 1 &&
                     (this.renderDivider
@@ -104,8 +102,7 @@ export default defineComponent({
                     e.stopPropagation();
                 } }, items.map((item, idx) => (h("li", { key: idx },
                 h("div", { class: `${mergedClsPrefix}-card-list-item__dropdown-item` },
-                    item.title && (h("div", { class: `${mergedClsPrefix}-card-list-item__title` },
-                        h("strong", null, item.title))),
+                    item.title && (h("div", { class: `${mergedClsPrefix}-card-list-item__title` }, item.title)),
                     item.content && (h("div", { class: `${mergedClsPrefix}-card-list-item__subtitle` }, item.content)))))))) : null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
             _b.call(_a)));
     }

package/es/icon-wrapper/src/IconWrapper.d.ts

@@ -1,24 +1,35 @@
+import { PropType } from 'vue';
 import { type ExtractPublicPropTypes } from '../../_utils';
+import { IconWrapperVariant } from './interface';
 export declare const iconWrapperProps: {
     readonly size: {
         readonly type: NumberConstructor;
         readonly default: 24;
     };
+    readonly pulseSize: {
+        readonly type: NumberConstructor;
+        readonly default: 32;
+    };
     readonly borderRadius: {
         readonly type: NumberConstructor;
         readonly default: 6;
     };
+    readonly variant: {
+        readonly type: PropType<IconWrapperVariant>;
+        readonly default: "default";
+    };
     readonly color: StringConstructor;
+    readonly pulseColor: StringConstructor;
     readonly iconColor: StringConstructor;
-    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"IconWrapper", {
+    readonly theme: PropType<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>;
-    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>>;
-    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>>;
@@ -29,21 +40,30 @@ export declare const UIconWrapper: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 24;
     };
+    readonly pulseSize: {
+        readonly type: NumberConstructor;
+        readonly default: 32;
+    };
     readonly borderRadius: {
         readonly type: NumberConstructor;
         readonly default: 6;
     };
+    readonly variant: {
+        readonly type: PropType<IconWrapperVariant>;
+        readonly default: "default";
+    };
     readonly color: StringConstructor;
+    readonly pulseColor: StringConstructor;
     readonly iconColor: StringConstructor;
-    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"IconWrapper", {
+    readonly theme: PropType<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>;
-    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>>;
-    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>>;
@@ -52,25 +72,36 @@ export declare const UIconWrapper: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 24;
     };
+    readonly pulseSize: {
+        readonly type: NumberConstructor;
+        readonly default: 32;
+    };
     readonly borderRadius: {
         readonly type: NumberConstructor;
         readonly default: 6;
     };
+    readonly variant: {
+        readonly type: PropType<IconWrapperVariant>;
+        readonly default: "default";
+    };
     readonly color: StringConstructor;
+    readonly pulseColor: StringConstructor;
     readonly iconColor: StringConstructor;
-    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"IconWrapper", {
+    readonly theme: PropType<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>;
-    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>>;
-    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>>;
 }>>, {
     readonly borderRadius: number;
     readonly size: number;
+    readonly pulseSize: number;
+    readonly variant: IconWrapperVariant;
 }, {}>;

package/es/icon-wrapper/src/IconWrapper.js

@@ -6,10 +6,16 @@ import style from './styles/index.cssr';
 export const iconWrapperProps = Object.assign(Object.assign({}, useTheme.props), { size: {
         type: Number,
         default: 24
+    }, pulseSize: {
+        type: Number,
+        default: 32
     }, borderRadius: {
         type: Number,
         default: 6
-    }, color: String, iconColor: String });
+    }, variant: {
+        type: String,
+        default: 'default'
+    }, color: String, pulseColor: String, iconColor: String });
 export const UIconWrapper = defineComponent({
     name: 'IconWrapper',
     props: iconWrapperProps,
@@ -21,7 +27,8 @@ export const UIconWrapper = defineComponent({
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-color': color,
-                '--u-icon-color': iconColor
+                '--u-icon-color': iconColor,
+                '--u-pulse-background-color': props.variant === 'pulse' ? `${color}50` : 'transparent'
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -29,6 +36,7 @@ export const UIconWrapper = defineComponent({
             : undefined;
         return () => {
             const size = formatLength(props.size);
+            const pulseSize = formatLength(props.pulseSize);
             themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender();
             return (h("div", { class: [
                     `${mergedClsPrefixRef.value}-icon-wrapper`,
@@ -36,13 +44,23 @@ export const UIconWrapper = defineComponent({
                 ], style: [
                     cssVarsRef === null || cssVarsRef === void 0 ? void 0 : cssVarsRef.value,
                     {
-                        height: size,
+                        width: props.variant === 'pulse' ? pulseSize : size,
+                        height: props.variant === 'pulse' ? pulseSize : size
+                    }
+                ] },
+                props.variant === 'pulse' && (h("div", { class: `${mergedClsPrefixRef.value}-icon-wrapper__pulse`, style: {
+                        width: pulseSize,
+                        height: pulseSize,
+                        backgroundColor: props.pulseColor,
+                        borderRadius: formatLength(props.borderRadius)
+                    } })),
+                h("div", { class: `${mergedClsPrefixRef.value}-icon-wrapper__icon`, style: {
                         width: size,
+                        height: size,
                         borderRadius: formatLength(props.borderRadius),
                         backgroundColor: props.color,
                         color: props.iconColor
-                    }
-                ] }, slots));
+                    } }, slots)));
         };
     }
 });

package/es/icon-wrapper/src/interface.d.ts

@@ -0,0 +1 @@
+export type IconWrapperVariant = 'default' | 'pulse';

package/es/icon-wrapper/src/interface.js

@@ -0,0 +1 @@
+export {};

package/es/icon-wrapper/src/styles/index.cssr.js

@@ -1,16 +1,28 @@
-import { cB } from '../../../_utils/cssr';
+import { cB, c } from '../../../_utils/cssr';
 // vars:
 // --u-bezier
 // --u-border-radius
 // --u-color
 // --u-icon-color
+// --u-pulse-background-color
 export default cB('icon-wrapper', `
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+`, [c('&__pulse', `
+ position: absolute;
+ background-color: var(--u-pulse-background-color);
+ z-index: 0;
+ transition: background-color .3s var(--u-bezier);
+ `), c('&__icon', `
  transition:
- color .3s var(--u-bezier),
+ color .3s var(--u-bezier);
  background-color .3s var(--u-bezier);
  background-color: var(--u-color);
- display: inline-flex;
+ color: var(--u-icon-color);
+ display: flex;
  align-items: center;
  justify-content: center;
- color: var(--u-icon-color);
-`);
+ z-index: 1
+ `)]);

package/es/layout/src/styles/layout-sider.cssr.js

@@ -100,7 +100,7 @@ export default cB('layout-sider', `
  align-items: center;
  justify-content: center;
  color: var(--u-toggle-button-icon-color);
- background-color: var(--u-toggle-button-color);
+ background-color: transparent;
  transform: translateX(50%);
  z-index: 1;
  `, [cB('base-icon', `

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.4.0";
+declare const _default: "1.4.2";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.4.0';
+export default '1.4.2';

package/lib/_internal/icons/SiderUnionBorder.js

@@ -5,6 +5,6 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'SiderUnionBorder',
     render() {
         return ((0, vue_1.h)("svg", { viewBox: "0 0 35 82", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            (0, vue_1.h)("path", { d: "M15 0L0 0V82H15V72.0682C15 67.6499 18.7463 64.209 22.7412 62.3215C29.9427 58.9189 35 50.9123 35 41.5775C35 32.2426 29.9427 24.236 22.7412 20.8334C18.7463 18.946 15 15.505 15 11.0867V0Z", fill: "currentColor" })));
+            (0, vue_1.h)("path", { d: "M15 0L0 0V82H15V72.0682C15 67.6499 18.7463 64.209 22.7412 62.3215C29.9427 58.9189 35 50.9123 35 41.5775C35 32.2426 29.9427 24.236 22.7412 20.8334C18.7463 18.946 15 15.505 15 11.0867V0Z", fill: "#fff" })));
     }
 });

package/lib/card-list/index.d.ts

@@ -1,2 +1,3 @@
 export { default as UCardList, cardListProps } from './src/CardList';
 export type { CardListProps } from './src/CardList';
+export type { ListItemOptions } from './src/interface';

package/lib/card-list/src/CardListItem.js

@@ -66,8 +66,7 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item`, onClick: isDropdown && items.length ? this.toggle : undefined, ref: "selfRef" },
             isDropdown && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__wrapper` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__wrapper-content` },
-                    this.title && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__title` },
-                        (0, vue_1.h)("strong", null, this.title))),
+                    this.title && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__title` }, this.title)),
                     this.subtitle && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__subtitle` }, this.subtitle))),
                 (0, vue_1.h)(ChevronDown_1.default, { style: {
                         width: '20px',
@@ -84,8 +83,7 @@ exports.default = (0, vue_1.defineComponent)({
                         `${mergedClsPrefix}-card-list-item__items--grid`
                 ] }, items.map((item, idx) => [
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__item`, key: idx },
-                    item.title && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__title` },
-                        (0, vue_1.h)("strong", null, item.title))),
+                    item.title && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__title` }, item.title)),
                     item.content && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__subtitle` }, item.content))),
                 idx < items.length - 1 &&
                     (this.renderDivider
@@ -109,8 +107,7 @@ exports.default = (0, vue_1.defineComponent)({
                     e.stopPropagation();
                 } }, items.map((item, idx) => ((0, vue_1.h)("li", { key: idx },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__dropdown-item` },
-                    item.title && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__title` },
-                        (0, vue_1.h)("strong", null, item.title))),
+                    item.title && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__title` }, item.title)),
                     item.content && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__subtitle` }, item.content)))))))) : null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
             _b.call(_a)));
     }

package/lib/icon-wrapper/src/IconWrapper.d.ts

@@ -1,24 +1,35 @@
+import { PropType } from 'vue';
 import { type ExtractPublicPropTypes } from '../../_utils';
+import { IconWrapperVariant } from './interface';
 export declare const iconWrapperProps: {
     readonly size: {
         readonly type: NumberConstructor;
         readonly default: 24;
     };
+    readonly pulseSize: {
+        readonly type: NumberConstructor;
+        readonly default: 32;
+    };
     readonly borderRadius: {
         readonly type: NumberConstructor;
         readonly default: 6;
     };
+    readonly variant: {
+        readonly type: PropType<IconWrapperVariant>;
+        readonly default: "default";
+    };
     readonly color: StringConstructor;
+    readonly pulseColor: StringConstructor;
     readonly iconColor: StringConstructor;
-    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"IconWrapper", {
+    readonly theme: PropType<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>;
-    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>>;
-    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>>;
@@ -29,21 +40,30 @@ export declare const UIconWrapper: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 24;
     };
+    readonly pulseSize: {
+        readonly type: NumberConstructor;
+        readonly default: 32;
+    };
     readonly borderRadius: {
         readonly type: NumberConstructor;
         readonly default: 6;
     };
+    readonly variant: {
+        readonly type: PropType<IconWrapperVariant>;
+        readonly default: "default";
+    };
     readonly color: StringConstructor;
+    readonly pulseColor: StringConstructor;
     readonly iconColor: StringConstructor;
-    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"IconWrapper", {
+    readonly theme: PropType<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>;
-    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>>;
-    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>>;
@@ -52,25 +72,36 @@ export declare const UIconWrapper: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 24;
     };
+    readonly pulseSize: {
+        readonly type: NumberConstructor;
+        readonly default: 32;
+    };
     readonly borderRadius: {
         readonly type: NumberConstructor;
         readonly default: 6;
     };
+    readonly variant: {
+        readonly type: PropType<IconWrapperVariant>;
+        readonly default: "default";
+    };
     readonly color: StringConstructor;
+    readonly pulseColor: StringConstructor;
     readonly iconColor: StringConstructor;
-    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"IconWrapper", {
+    readonly theme: PropType<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>;
-    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>>;
-    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
         color: string;
         iconColor: string;
     }, any>>>;
 }>>, {
     readonly borderRadius: number;
     readonly size: number;
+    readonly pulseSize: number;
+    readonly variant: IconWrapperVariant;
 }, {}>;

package/lib/icon-wrapper/src/IconWrapper.js

@@ -12,10 +12,16 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.iconWrapperProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: {
         type: Number,
         default: 24
+    }, pulseSize: {
+        type: Number,
+        default: 32
     }, borderRadius: {
         type: Number,
         default: 6
-    }, color: String, iconColor: String });
+    }, variant: {
+        type: String,
+        default: 'default'
+    }, color: String, pulseColor: String, iconColor: String });
 exports.UIconWrapper = (0, vue_1.defineComponent)({
     name: 'IconWrapper',
     props: exports.iconWrapperProps,
@@ -27,7 +33,8 @@ exports.UIconWrapper = (0, vue_1.defineComponent)({
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-color': color,
-                '--u-icon-color': iconColor
+                '--u-icon-color': iconColor,
+                '--u-pulse-background-color': props.variant === 'pulse' ? `${color}50` : 'transparent'
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -35,6 +42,7 @@ exports.UIconWrapper = (0, vue_1.defineComponent)({
             : undefined;
         return () => {
             const size = (0, _utils_1.formatLength)(props.size);
+            const pulseSize = (0, _utils_1.formatLength)(props.pulseSize);
             themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender();
             return ((0, vue_1.h)("div", { class: [
                     `${mergedClsPrefixRef.value}-icon-wrapper`,
@@ -42,13 +50,23 @@ exports.UIconWrapper = (0, vue_1.defineComponent)({
                 ], style: [
                     cssVarsRef === null || cssVarsRef === void 0 ? void 0 : cssVarsRef.value,
                     {
-                        height: size,
+                        width: props.variant === 'pulse' ? pulseSize : size,
+                        height: props.variant === 'pulse' ? pulseSize : size
+                    }
+                ] },
+                props.variant === 'pulse' && ((0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-icon-wrapper__pulse`, style: {
+                        width: pulseSize,
+                        height: pulseSize,
+                        backgroundColor: props.pulseColor,
+                        borderRadius: (0, _utils_1.formatLength)(props.borderRadius)
+                    } })),
+                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-icon-wrapper__icon`, style: {
                         width: size,
+                        height: size,
                         borderRadius: (0, _utils_1.formatLength)(props.borderRadius),
                         backgroundColor: props.color,
                         color: props.iconColor
-                    }
-                ] }, slots));
+                    } }, slots)));
         };
     }
 });

package/lib/icon-wrapper/src/interface.d.ts

@@ -0,0 +1 @@
+export type IconWrapperVariant = 'default' | 'pulse';

package/lib/icon-wrapper/src/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/icon-wrapper/src/styles/index.cssr.js

@@ -9,13 +9,25 @@ const cssr_1 = require("../../../_utils/cssr");
 // --u-border-radius
 // --u-color
 // --u-icon-color
+// --u-pulse-background-color
 exports.default = (0, cssr_1.cB)('icon-wrapper', `
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+`, [(0, cssr_1.c)('&__pulse', `
+ position: absolute;
+ background-color: var(--u-pulse-background-color);
+ z-index: 0;
+ transition: background-color .3s var(--u-bezier);
+ `), (0, cssr_1.c)('&__icon', `
  transition:
- color .3s var(--u-bezier),
+ color .3s var(--u-bezier);
  background-color .3s var(--u-bezier);
  background-color: var(--u-color);
- display: inline-flex;
+ color: var(--u-icon-color);
+ display: flex;
  align-items: center;
  justify-content: center;
- color: var(--u-icon-color);
-`);
+ z-index: 1
+ `)]);

package/lib/layout/src/styles/layout-sider.cssr.js

@@ -105,7 +105,7 @@ exports.default = (0, cssr_1.cB)('layout-sider', `
  align-items: center;
  justify-content: center;
  color: var(--u-toggle-button-icon-color);
- background-color: var(--u-toggle-button-color);
+ background-color: transparent;
  transform: translateX(50%);
  z-index: 1;
  `, [(0, cssr_1.cB)('base-icon', `

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.4.0";
+declare const _default: "1.4.2";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.4.0';
+exports.default = '1.4.2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "main": "lib/index.js",
   "module": "es/index.js",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {
@@ -6902,6 +6902,13 @@
                 "since": "2.25.0"
               }
             },
+            {
+              "name": "pulse-size",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/icon",
+              "type": "number",
+              "description": "Size of the pulse background layer",
+              "default": "32"
+            },
             {
               "name": "border-radius",
               "doc-url": "https://www.naiveui.com/en-US/os-theme/components/icon",
@@ -6912,6 +6919,13 @@
                 "since": "2.25.0"
               }
             },
+            {
+              "name": "variant",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/icon",
+              "type": "\"default\" | \"pulse\"",
+              "description": "Wrapper variant. Use `\"pulse\"` to show an extra background layer.",
+              "default": "\"default\""
+            },
             {
               "name": "color",
               "doc-url": "https://www.naiveui.com/en-US/os-theme/components/icon",
@@ -6922,6 +6936,13 @@
                 "since": "2.25.0"
               }
             },
+            {
+              "name": "pulse-color",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/icon",
+              "type": "string",
+              "description": "Color of the pulse background layer",
+              "default": "undefined"
+            },
             {
               "name": "icon-color",
               "doc-url": "https://www.naiveui.com/en-US/os-theme/components/icon",