@uzum-tech/ui 1.5.5 → 1.6.0

package/es/_internal/radio/src/use-radio.d.ts

@@ -25,6 +25,7 @@ export declare const radioBaseProps: {
         readonly default: undefined;
     };
     readonly onChange: PropType<OnChangeImpl>;
+    readonly onClick: PropType<(event: MouseEvent) => void>;
 };
 export declare const radioGroupInjectionKey: import("vue").InjectionKey<RadioGroupInjection>;
 export interface UseRadio {

package/es/_internal/radio/src/use-radio.js

@@ -26,7 +26,8 @@ export const radioBaseProps = {
         type: Boolean,
         default: undefined
     },
-    onChange: [Function, Array]
+    onChange: [Function, Array],
+    onClick: [Function, Array]
 };
 export const radioGroupInjectionKey = createInjectionKey('u-radio-group');
 function useRadio(props) {

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

@@ -107,6 +107,28 @@ cE('ripple', `
  --u-merged-border: var(--u-border-disabled-checked);
  --u-merged-shadow: transparent;
  --u-merged-icon: var(--u-check-mark-color-disabled-checked);
+ `)]), cM('indeterminate', `
+ --u-merged-color: var(--u-color-checked);
+ --u-merged-border: var(--u-border-checked);
+ --u-merged-shadow: var(--u-box-shadow-hover-checked);
+ --u-merged-icon: var(--u-check-mark-color);
+ `, [c('&:hover', `
+ --u-merged-color: var(--u-color-hover-checked);
+ --u-merged-border: var(--u-border-hover-checked);
+ --u-merged-shadow: var(--u-box-shadow-hover-checked);
+ `), c('&:focus', `
+ --u-merged-color: var(--u-color-focus-checked);
+ --u-merged-border: var(--u-border-focus-checked);
+ --u-merged-shadow: var(--u-box-shadow-focus-checked);
+ `), c('&:active', `
+ --u-merged-color: var(--u-color-active-checked);
+ --u-merged-border: var(--u-border-active-checked);
+ --u-merged-shadow: var(--u-box-shadow-active-checked);
+ `), cM('disabled', `
+ --u-merged-color: var(--u-color-disabled-checked);
+ --u-merged-border: var(--u-border-disabled-checked);
+ --u-merged-shadow: transparent;
+ --u-merged-icon: var(--u-check-mark-color-disabled-checked);
  `)])]), cB('checkbox-box', `
  position: relative;
  flex-shrink: 0;

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

@@ -574,10 +574,13 @@ export default defineComponent({
                                         } }))
                                 ]
                                 : null,
-                            column.type === 'selection' ? (!isSummary ? (column.multiple === false ? (h(RenderSafeRadio, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: () => {
+                            column.type === 'selection' ? (!isSummary ? (column.multiple === false ? (h(RenderSafeRadio, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onClick: (event) => {
+                                    event.stopPropagation();
+                                }, onUpdateChecked: () => {
                                     handleRadioUpdateChecked(rowInfo.tmNode);
-                                } })) : (h(RenderSafeCheckbox, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, e) => {
-                                    handleCheckboxUpdateChecked(rowInfo.tmNode, checked, e.shiftKey);
+                                } })) : (h(RenderSafeCheckbox, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, event) => {
+                                    event.stopPropagation();
+                                    handleCheckboxUpdateChecked(rowInfo.tmNode, checked, event.shiftKey);
                                 } }))) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
                                 ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? (h(ExpandTrigger, { clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: this.renderExpandIcon, onClick: () => {
                                     handleUpdateExpanded(rowKey, null);

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

@@ -13,6 +13,9 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(checked: boolean) => void>;
         required: true;
     };
+    onClick: {
+        type: PropType<(event: MouseEvent) => void>;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     rowKey: {
         type: PropType<RowKey>;
@@ -26,5 +29,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(checked: boolean) => void>;
         required: true;
     };
+    onClick: {
+        type: PropType<(event: MouseEvent) => void>;
+    };
 }>>, {}, {}>;
 export default _default;

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

@@ -16,6 +16,9 @@ export default defineComponent({
         onUpdateChecked: {
             type: Function,
             required: true
+        },
+        onClick: {
+            type: Function
         }
     },
     setup(props) {
@@ -24,7 +27,7 @@ export default defineComponent({
          } = inject(dataTableInjectionKey);
         return () => {
             const { rowKey } = props;
-            return (h(URadio, { name: componentId, disabled: props.disabled, checked: mergedCheckedRowKeySetRef.value.has(rowKey), onUpdateChecked: props.onUpdateChecked, size: sizeRef.value }));
+            return (h(URadio, { name: componentId, disabled: props.disabled, checked: mergedCheckedRowKeySetRef.value.has(rowKey), onUpdateChecked: props.onUpdateChecked, onClick: props.onClick, size: sizeRef.value }));
         };
     }
 });

package/es/list/src/List.d.ts

@@ -306,8 +306,8 @@ declare const _default: import("vue").DefineComponent<{
     size: import("./interface").Size;
     header: import("./interface").RenderableType;
     loadingSkeleton: boolean;
-    rounded: boolean;
     clickable: boolean;
+    rounded: boolean;
     hoverable: boolean;
     showDivider: boolean;
     descriptionFirst: boolean;

package/es/list/src/ListItem.js

@@ -1,5 +1,5 @@
-import { h, defineComponent, inject, computed, ref } from 'vue';
-import { call, createRefFromPropsAndInjection, throwError } from '../../_utils';
+import { h, defineComponent, inject, computed, ref, watchEffect } from 'vue';
+import { call, createRefFromPropsAndInjection, throwError, warnOnce } from '../../_utils';
 import { listInjectionKey, listItemProps } from './props';
 import { ChevronRightIcon } from '../../_internal/icons';
 import { UBaseIcon, UBaseSkeleton, InternalUText } from '../../_internal';
@@ -10,6 +10,13 @@ export default defineComponent({
     name: 'ListItem',
     props: Object.assign({}, listItemProps),
     setup(props, { slots }) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (slots.avatar !== undefined) {
+                    warnOnce('list-item', '`avatar` is deprecated, please use `prefix` instead.');
+                }
+            });
+        }
         const listInjection = inject(listInjectionKey, null);
         if (!listInjection) {
             throwError('list-item', '`u-list-item` must be placed in `u-list`.');

package/es/pagination/src/Pagination.js

@@ -146,7 +146,13 @@ export default defineComponent({
         });
         const selectSizeRef = computed(() => {
             var _a, _b;
-            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) || props.size);
+            const selectSizes = {
+                small: 'small',
+                medium: 'small',
+                large: 'medium'
+            };
+            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) ||
+                selectSizes[props.size]);
         });
         const startIndexRef = computed(() => {
             return (mergedPageRef.value - 1) * mergedPageSizeRef.value;
@@ -446,7 +452,7 @@ export default defineComponent({
                                             // eslint-disable-next-line no-case-declarations
                                             const fastForwardNode = this.fastForwardActive ? (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
                                                 default: () => this.rtlEnabled ? (h(FastBackwardIcon, null)) : (h(FastForwardIcon, null))
-                                            })) : (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }));
+                                            })) : (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, { class: "more-icon" }) }));
                                             if (renderLabel) {
                                                 contentNode = renderLabel({
                                                     type: 'fast-forward',
@@ -465,7 +471,7 @@ export default defineComponent({
                                             // eslint-disable-next-line no-case-declarations
                                             const fastBackwardNode = this.fastBackwardActive ? (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
                                                 default: () => this.rtlEnabled ? (h(FastForwardIcon, null)) : (h(FastBackwardIcon, null))
-                                            })) : (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }));
+                                            })) : (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, { class: "more-icon" }) }));
                                             if (renderLabel) {
                                                 contentNode = renderLabel({
                                                     type: 'fast-backward',
@@ -509,7 +515,7 @@ export default defineComponent({
                                                 ? 'fast-backward'
                                                 : 'fast-forward'
                                             : pageItem.type;
-                                        return (h(UPopselect, { to: this.to, key: key, disabled: disabled, trigger: "hover", virtualScroll: true, style: { width: '60px' }, theme: mergedTheme.peers.Popselect, themeOverrides: mergedTheme.peerOverrides.Popselect, builtinThemeOverrides: {
+                                        return (h(UPopselect, { to: this.to, key: key, disabled: disabled, trigger: "hover", virtualScroll: true, style: { minWidth: '70px', textAlign: 'center' }, theme: mergedTheme.peers.Popselect, themeOverrides: mergedTheme.peerOverrides.Popselect, builtinThemeOverrides: {
                                                 peers: {
                                                     InternalSelectMenu: {
                                                         height: 'calc(var(--u-option-height) * 4.6)'
@@ -563,7 +569,7 @@ export default defineComponent({
                     case 'size-picker': {
                         return !simple && showSizePicker ? (h("div", { class: `${mergedClsPrefix}-pagination-size-picker` },
                             h(USelect, Object.assign({ consistentMenuWidth: false, placeholder: "", showCheckmark: false, to: this.to }, this.selectProps, { size: selectSize, options: pageSizeOptions, value: mergedPageSize, disabled: disabled, theme: mergedTheme.peers.Select, themeOverrides: mergedTheme.peerOverrides.Select, onUpdateValue: handleSizePickerChange })),
-                            h("span", { class: `${mergedClsPrefix}-label` }, `${sizePickerLabel || ''}`))) : null;
+                            h("span", { class: `${mergedClsPrefix}-label` }, sizePickerLabel || ''))) : null;
                     }
                     case 'quick-jumper':
                         return !simple && showQuickJumper ? (h("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },

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

@@ -1,4 +1,4 @@
-import { cB, c, cM, cNotM } from '../../../_utils/cssr';
+import { cB, c, cM, cNotM, cE } from '../../../_utils/cssr';
 const hoverStyleProps = `
  background: var(--u-item-color-hover);
  color: var(--u-item-text-color-hover);
@@ -87,9 +87,9 @@ export default cB('pagination', `
  line-height: 20px;
  `), cB('base-selection-label', `
  background-color: var(--u-pagination-size-picker-background);
- `), cB('base-selection__border', `
+ `), cB('base-selection', [cE('border', `
  border-color: var(--u-pagination-size-picker-border);
- `)]), cB('pagination-quick-jumper', `
+ `)])]), cB('pagination-quick-jumper', `
  white-space: nowrap;
  display: flex;
  color: var(--u-jumper-text-color);
@@ -123,14 +123,19 @@ export default cB('pagination', `
  border-color .3s var(--u-bezier),
  background-color .3s var(--u-bezier),
  fill .3s var(--u-bezier);
- `, [cM('button', `
+ `, [c('&:has(.more-icon)', `
+ font-size: 24px;
+ `), cM('button', `
  background: var(--u-button-color);
  color: var(--u-button-icon-color);
  border: var(--u-button-border);
  padding: 0;
  `, [cB('base-icon', `
  font-size: var(--u-button-icon-size);
- `)]), cNotM('disabled', [cM('hover', hoverStyleProps, hoverStyleChildren), c('&:hover', hoverStyleProps, hoverStyleChildren), c('&:active', `
+ `)]), cNotM('disabled', [cNotM('clickable', `
+ width: 45px;
+ padding: 0;
+ `), cM('hover', hoverStyleProps, hoverStyleChildren), c('&:hover', hoverStyleProps, hoverStyleChildren), c('&:active', `
  font-weight: 700;
  background: var(--u-item-color-pressed);
  color: var(--u-item-text-color-pressed);

package/es/pagination/styles/light.js

@@ -6,13 +6,13 @@ import { createTheme } from '../../_mixins';
 export const self = (vars) => {
     const { brandPrimary100, transparencySecondary, elementsPrimary, brandPrimary500, textSecondary, borderRadius, fontBodyMedium, fontBodyLarge, textPrimary, textTertiary, elementsTertiary, elementsQuaternary } = vars;
     return {
-        itemPaddingSmall: '0 4px',
+        itemPaddingSmall: '0 10px',
         itemMarginSmall: '0 0 0 2px',
         itemMarginSmallRtl: '0 2px 0 0',
-        itemPaddingMedium: '0 4px',
+        itemPaddingMedium: '0 12px',
         itemMarginMedium: '0 0 0 2px',
         itemMarginMediumRtl: '0 2px 0 0',
-        itemPaddingLarge: '0 4px',
+        itemPaddingLarge: '0 14px',
         itemMarginLarge: '0 0 0 2px',
         itemMarginLargeRtl: '0 2px 0 0',
         buttonIconSizeSmall: '14px',
@@ -65,8 +65,8 @@ export const self = (vars) => {
         itemBorderActive: '0px',
         itemBorderDisabled: '0px',
         itemBorderRadius: borderRadius,
-        itemSizeSmall: '24px',
-        itemSizeMedium: '32px',
+        itemSizeSmall: '32px',
+        itemSizeMedium: '36px',
         itemSizeLarge: '40px',
         itemFontSizeSmall: fontBodyMedium,
         itemFontSizeMedium: fontBodyMedium,

package/es/radio/src/Radio.d.ts

@@ -29,6 +29,7 @@ export declare const radioProps: {
         readonly default: undefined;
     };
     readonly onChange: PropType<import("../../_internal/radio").OnChangeImpl>;
+    readonly onClick: PropType<(event: MouseEvent) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Radio", {
         radioSizeSmall: string;
         radioSizeMedium: string;
@@ -216,6 +217,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly onChange: PropType<import("../../_internal/radio").OnChangeImpl>;
+    readonly onClick: PropType<(event: MouseEvent) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Radio", {
         radioSizeSmall: string;
         radioSizeMedium: string;
@@ -438,6 +440,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly onChange: PropType<import("../../_internal/radio").OnChangeImpl>;
+    readonly onClick: PropType<(event: MouseEvent) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Radio", {
         radioSizeSmall: string;
         radioSizeMedium: string;

package/es/radio/src/Radio.js

@@ -85,7 +85,7 @@ export default defineComponent({
                     [`${mergedClsPrefix}-radio--focus`]: this.focus
                 }
             ], style: this.cssVars },
-            h("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
+            h("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur, onClick: this.onClick }),
             h("div", { class: `${mergedClsPrefix}-radio__dot-wrapper` },
                 "\u00A0",
                 h("div", { class: [

package/es/radio/src/RadioButton.d.ts

@@ -24,6 +24,7 @@ export declare const radioButtonProps: {
         readonly default: undefined;
     };
     readonly onChange: import("vue").PropType<import("../../_internal/radio").OnChangeImpl>;
+    readonly onClick: import("vue").PropType<(event: MouseEvent) => void>;
 };
 export type RadioButtonProps = ExtractPublicPropTypes<typeof radioBaseProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -50,6 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly onChange: import("vue").PropType<import("../../_internal/radio").OnChangeImpl>;
+    readonly onClick: import("vue").PropType<(event: MouseEvent) => void>;
 }, import("../../_internal").UseRadio, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly name: StringConstructor;
     readonly value: {
@@ -74,6 +76,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly onChange: import("vue").PropType<import("../../_internal/radio").OnChangeImpl>;
+    readonly onClick: import("vue").PropType<(event: MouseEvent) => void>;
 }>>, {
     readonly value: string | number | boolean;
     readonly disabled: boolean | undefined;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.5.5";
+declare const _default: "1.6.0";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.5.5';
+export default '1.6.0';

package/lib/_internal/radio/src/use-radio.d.ts

@@ -25,6 +25,7 @@ export declare const radioBaseProps: {
         readonly default: undefined;
     };
     readonly onChange: PropType<OnChangeImpl>;
+    readonly onClick: PropType<(event: MouseEvent) => void>;
 };
 export declare const radioGroupInjectionKey: import("vue").InjectionKey<RadioGroupInjection>;
 export interface UseRadio {

package/lib/_internal/radio/src/use-radio.js

@@ -30,7 +30,8 @@ exports.radioBaseProps = {
         type: Boolean,
         default: undefined
     },
-    onChange: [Function, Array]
+    onChange: [Function, Array],
+    onClick: [Function, Array]
 };
 exports.radioGroupInjectionKey = (0, _utils_1.createInjectionKey)('u-radio-group');
 function useRadio(props) {

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

@@ -112,6 +112,28 @@ exports.default = (0, cssr_1.c)([(0, icon_switch_cssr_1.iconSwitchTransition)(),
  --u-merged-border: var(--u-border-disabled-checked);
  --u-merged-shadow: transparent;
  --u-merged-icon: var(--u-check-mark-color-disabled-checked);
+ `)]), (0, cssr_1.cM)('indeterminate', `
+ --u-merged-color: var(--u-color-checked);
+ --u-merged-border: var(--u-border-checked);
+ --u-merged-shadow: var(--u-box-shadow-hover-checked);
+ --u-merged-icon: var(--u-check-mark-color);
+ `, [(0, cssr_1.c)('&:hover', `
+ --u-merged-color: var(--u-color-hover-checked);
+ --u-merged-border: var(--u-border-hover-checked);
+ --u-merged-shadow: var(--u-box-shadow-hover-checked);
+ `), (0, cssr_1.c)('&:focus', `
+ --u-merged-color: var(--u-color-focus-checked);
+ --u-merged-border: var(--u-border-focus-checked);
+ --u-merged-shadow: var(--u-box-shadow-focus-checked);
+ `), (0, cssr_1.c)('&:active', `
+ --u-merged-color: var(--u-color-active-checked);
+ --u-merged-border: var(--u-border-active-checked);
+ --u-merged-shadow: var(--u-box-shadow-active-checked);
+ `), (0, cssr_1.cM)('disabled', `
+ --u-merged-color: var(--u-color-disabled-checked);
+ --u-merged-border: var(--u-border-disabled-checked);
+ --u-merged-shadow: transparent;
+ --u-merged-icon: var(--u-check-mark-color-disabled-checked);
  `)])]), (0, cssr_1.cB)('checkbox-box', `
  position: relative;
  flex-shrink: 0;

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

@@ -579,10 +579,13 @@ exports.default = (0, vue_1.defineComponent)({
                                         } }))
                                 ]
                                 : null,
-                            column.type === 'selection' ? (!isSummary ? (column.multiple === false ? ((0, vue_1.h)(BodyRadio_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: () => {
+                            column.type === 'selection' ? (!isSummary ? (column.multiple === false ? ((0, vue_1.h)(BodyRadio_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onClick: (event) => {
+                                    event.stopPropagation();
+                                }, onUpdateChecked: () => {
                                     handleRadioUpdateChecked(rowInfo.tmNode);
-                                } })) : ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, e) => {
-                                    handleCheckboxUpdateChecked(rowInfo.tmNode, checked, e.shiftKey);
+                                } })) : ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, event) => {
+                                    event.stopPropagation();
+                                    handleCheckboxUpdateChecked(rowInfo.tmNode, checked, event.shiftKey);
                                 } }))) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
                                 ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: this.renderExpandIcon, onClick: () => {
                                     handleUpdateExpanded(rowKey, null);

package/lib/data-table/src/TableParts/BodyRadio.d.ts

@@ -13,6 +13,9 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(checked: boolean) => void>;
         required: true;
     };
+    onClick: {
+        type: PropType<(event: MouseEvent) => void>;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     rowKey: {
         type: PropType<RowKey>;
@@ -26,5 +29,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(checked: boolean) => void>;
         required: true;
     };
+    onClick: {
+        type: PropType<(event: MouseEvent) => void>;
+    };
 }>>, {}, {}>;
 export default _default;

package/lib/data-table/src/TableParts/BodyRadio.js

@@ -18,6 +18,9 @@ exports.default = (0, vue_1.defineComponent)({
         onUpdateChecked: {
             type: Function,
             required: true
+        },
+        onClick: {
+            type: Function
         }
     },
     setup(props) {
@@ -26,7 +29,7 @@ exports.default = (0, vue_1.defineComponent)({
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         return () => {
             const { rowKey } = props;
-            return ((0, vue_1.h)(radio_1.URadio, { name: componentId, disabled: props.disabled, checked: mergedCheckedRowKeySetRef.value.has(rowKey), onUpdateChecked: props.onUpdateChecked, size: sizeRef.value }));
+            return ((0, vue_1.h)(radio_1.URadio, { name: componentId, disabled: props.disabled, checked: mergedCheckedRowKeySetRef.value.has(rowKey), onUpdateChecked: props.onUpdateChecked, onClick: props.onClick, size: sizeRef.value }));
         };
     }
 });

package/lib/list/src/List.d.ts

@@ -306,8 +306,8 @@ declare const _default: import("vue").DefineComponent<{
     size: import("./interface").Size;
     header: import("./interface").RenderableType;
     loadingSkeleton: boolean;
-    rounded: boolean;
     clickable: boolean;
+    rounded: boolean;
     hoverable: boolean;
     showDivider: boolean;
     descriptionFirst: boolean;

package/lib/list/src/ListItem.js

@@ -12,6 +12,13 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'ListItem',
     props: Object.assign({}, props_1.listItemProps),
     setup(props, { slots }) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (slots.avatar !== undefined) {
+                    (0, _utils_1.warnOnce)('list-item', '`avatar` is deprecated, please use `prefix` instead.');
+                }
+            });
+        }
         const listInjection = (0, vue_1.inject)(props_1.listInjectionKey, null);
         if (!listInjection) {
             (0, _utils_1.throwError)('list-item', '`u-list-item` must be placed in `u-list`.');

package/lib/pagination/src/Pagination.js

@@ -152,7 +152,13 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const selectSizeRef = (0, vue_1.computed)(() => {
             var _a, _b;
-            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) || props.size);
+            const selectSizes = {
+                small: 'small',
+                medium: 'small',
+                large: 'medium'
+            };
+            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) ||
+                selectSizes[props.size]);
         });
         const startIndexRef = (0, vue_1.computed)(() => {
             return (mergedPageRef.value - 1) * mergedPageSizeRef.value;
@@ -452,7 +458,7 @@ exports.default = (0, vue_1.defineComponent)({
                                             // eslint-disable-next-line no-case-declarations
                                             const fastForwardNode = this.fastForwardActive ? ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, {
                                                 default: () => this.rtlEnabled ? ((0, vue_1.h)(icons_1.FastBackwardIcon, null)) : ((0, vue_1.h)(icons_1.FastForwardIcon, null))
-                                            })) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.MoreIcon, null) }));
+                                            })) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.MoreIcon, { class: "more-icon" }) }));
                                             if (renderLabel) {
                                                 contentNode = renderLabel({
                                                     type: 'fast-forward',
@@ -471,7 +477,7 @@ exports.default = (0, vue_1.defineComponent)({
                                             // eslint-disable-next-line no-case-declarations
                                             const fastBackwardNode = this.fastBackwardActive ? ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, {
                                                 default: () => this.rtlEnabled ? ((0, vue_1.h)(icons_1.FastForwardIcon, null)) : ((0, vue_1.h)(icons_1.FastBackwardIcon, null))
-                                            })) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.MoreIcon, null) }));
+                                            })) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.MoreIcon, { class: "more-icon" }) }));
                                             if (renderLabel) {
                                                 contentNode = renderLabel({
                                                     type: 'fast-backward',
@@ -515,7 +521,7 @@ exports.default = (0, vue_1.defineComponent)({
                                                 ? 'fast-backward'
                                                 : 'fast-forward'
                                             : pageItem.type;
-                                        return ((0, vue_1.h)(popselect_1.UPopselect, { to: this.to, key: key, disabled: disabled, trigger: "hover", virtualScroll: true, style: { width: '60px' }, theme: mergedTheme.peers.Popselect, themeOverrides: mergedTheme.peerOverrides.Popselect, builtinThemeOverrides: {
+                                        return ((0, vue_1.h)(popselect_1.UPopselect, { to: this.to, key: key, disabled: disabled, trigger: "hover", virtualScroll: true, style: { minWidth: '70px', textAlign: 'center' }, theme: mergedTheme.peers.Popselect, themeOverrides: mergedTheme.peerOverrides.Popselect, builtinThemeOverrides: {
                                                 peers: {
                                                     InternalSelectMenu: {
                                                         height: 'calc(var(--u-option-height) * 4.6)'
@@ -569,7 +575,7 @@ exports.default = (0, vue_1.defineComponent)({
                     case 'size-picker': {
                         return !simple && showSizePicker ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-size-picker` },
                             (0, vue_1.h)(select_1.USelect, Object.assign({ consistentMenuWidth: false, placeholder: "", showCheckmark: false, to: this.to }, this.selectProps, { size: selectSize, options: pageSizeOptions, value: mergedPageSize, disabled: disabled, theme: mergedTheme.peers.Select, themeOverrides: mergedTheme.peerOverrides.Select, onUpdateValue: handleSizePickerChange })),
-                            (0, vue_1.h)("span", { class: `${mergedClsPrefix}-label` }, `${sizePickerLabel || ''}`))) : null;
+                            (0, vue_1.h)("span", { class: `${mergedClsPrefix}-label` }, sizePickerLabel || ''))) : null;
                     }
                     case 'quick-jumper':
                         return !simple && showQuickJumper ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },

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

@@ -92,9 +92,9 @@ exports.default = (0, cssr_1.cB)('pagination', `
  line-height: 20px;
  `), (0, cssr_1.cB)('base-selection-label', `
  background-color: var(--u-pagination-size-picker-background);
- `), (0, cssr_1.cB)('base-selection__border', `
+ `), (0, cssr_1.cB)('base-selection', [(0, cssr_1.cE)('border', `
  border-color: var(--u-pagination-size-picker-border);
- `)]), (0, cssr_1.cB)('pagination-quick-jumper', `
+ `)])]), (0, cssr_1.cB)('pagination-quick-jumper', `
  white-space: nowrap;
  display: flex;
  color: var(--u-jumper-text-color);
@@ -128,14 +128,19 @@ exports.default = (0, cssr_1.cB)('pagination', `
  border-color .3s var(--u-bezier),
  background-color .3s var(--u-bezier),
  fill .3s var(--u-bezier);
- `, [(0, cssr_1.cM)('button', `
+ `, [(0, cssr_1.c)('&:has(.more-icon)', `
+ font-size: 24px;
+ `), (0, cssr_1.cM)('button', `
  background: var(--u-button-color);
  color: var(--u-button-icon-color);
  border: var(--u-button-border);
  padding: 0;
  `, [(0, cssr_1.cB)('base-icon', `
  font-size: var(--u-button-icon-size);
- `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('hover', hoverStyleProps, hoverStyleChildren), (0, cssr_1.c)('&:hover', hoverStyleProps, hoverStyleChildren), (0, cssr_1.c)('&:active', `
+ `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cNotM)('clickable', `
+ width: 45px;
+ padding: 0;
+ `), (0, cssr_1.cM)('hover', hoverStyleProps, hoverStyleChildren), (0, cssr_1.c)('&:hover', hoverStyleProps, hoverStyleChildren), (0, cssr_1.c)('&:active', `
  font-weight: 700;
  background: var(--u-item-color-pressed);
  color: var(--u-item-text-color-pressed);

package/lib/pagination/styles/light.js

@@ -9,13 +9,13 @@ const _mixins_1 = require("../../_mixins");
 const self = (vars) => {
     const { brandPrimary100, transparencySecondary, elementsPrimary, brandPrimary500, textSecondary, borderRadius, fontBodyMedium, fontBodyLarge, textPrimary, textTertiary, elementsTertiary, elementsQuaternary } = vars;
     return {
-        itemPaddingSmall: '0 4px',
+        itemPaddingSmall: '0 10px',
         itemMarginSmall: '0 0 0 2px',
         itemMarginSmallRtl: '0 2px 0 0',
-        itemPaddingMedium: '0 4px',
+        itemPaddingMedium: '0 12px',
         itemMarginMedium: '0 0 0 2px',
         itemMarginMediumRtl: '0 2px 0 0',
-        itemPaddingLarge: '0 4px',
+        itemPaddingLarge: '0 14px',
         itemMarginLarge: '0 0 0 2px',
         itemMarginLargeRtl: '0 2px 0 0',
         buttonIconSizeSmall: '14px',
@@ -68,8 +68,8 @@ const self = (vars) => {
         itemBorderActive: '0px',
         itemBorderDisabled: '0px',
         itemBorderRadius: borderRadius,
-        itemSizeSmall: '24px',
-        itemSizeMedium: '32px',
+        itemSizeSmall: '32px',
+        itemSizeMedium: '36px',
         itemSizeLarge: '40px',
         itemFontSizeSmall: fontBodyMedium,
         itemFontSizeMedium: fontBodyMedium,

package/lib/radio/src/Radio.d.ts

@@ -29,6 +29,7 @@ export declare const radioProps: {
         readonly default: undefined;
     };
     readonly onChange: PropType<import("../../_internal/radio").OnChangeImpl>;
+    readonly onClick: PropType<(event: MouseEvent) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Radio", {
         radioSizeSmall: string;
         radioSizeMedium: string;
@@ -216,6 +217,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly onChange: PropType<import("../../_internal/radio").OnChangeImpl>;
+    readonly onClick: PropType<(event: MouseEvent) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Radio", {
         radioSizeSmall: string;
         radioSizeMedium: string;
@@ -438,6 +440,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly onChange: PropType<import("../../_internal/radio").OnChangeImpl>;
+    readonly onClick: PropType<(event: MouseEvent) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Radio", {
         radioSizeSmall: string;
         radioSizeMedium: string;

package/lib/radio/src/Radio.js

@@ -91,7 +91,7 @@ exports.default = (0, vue_1.defineComponent)({
                     [`${mergedClsPrefix}-radio--focus`]: this.focus
                 }
             ], style: this.cssVars },
-            (0, vue_1.h)("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
+            (0, vue_1.h)("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur, onClick: this.onClick }),
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-radio__dot-wrapper` },
                 "\u00A0",
                 (0, vue_1.h)("div", { class: [