@uzum-tech/ui 1.5.0 → 1.5.2

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

@@ -1,11 +1,18 @@
 import { cB, c, cE, cM, insideModal, insidePopover, cNotM } from '../../../_utils/cssr';
-export default c([cB('list', `
+// --u-border-radius
+// --u-suffix-size
+export default c([cB('align-start', `
+ align-self: self-start;
+ `), cB('align-center', `
+ align-self: center;
+ `), cB('align-end', `
+ align-self: self-end;
+ `), cB('list', `
  --u-merged-border-color: var(--u-border-color);
  --u-merged-color: var(--u-color);
  --u-merged-color-focus: var(--u-color-focus);
  --u-merged-color-hover: var(--u-color-hover);
  margin: 0;
- font-size: var(--u-font-size);
  transition:
  background-color .3s var(--u-bezier),
  color .3s var(--u-bezier),
@@ -16,17 +23,10 @@ export default c([cB('list', `
  background-color: var(--u-merged-color);
  `, [cM('clickable', [cB('list-item', `
  cursor: pointer;
- `)]), cM('bordered', `
- border: 1px solid var(--u-merged-border-color);
- border-radius: var(--u-border-radius);
- `, [cB('list-item', [c('&:first-child', `
- border-radius: var(--u-border-radius);
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- `), c('&:last-child', `
- border-radius: var(--u-border-radius);
- border-top-left-radius: 0;
- border-top-right-radius: 0;
+ `)]), cM('bordered', [cB('list-item', `
+ border-bottom: 1px solid var(--u-merged-border-color);
+ `, [c('&:last-child', `
+ border: none;
  `)])]), cE('header, footer', `
  padding: var(--u-padding);
  padding-left: 0px;
@@ -46,11 +46,10 @@ export default c([cB('list', `
  position: relative;
  outline: none;
  display: flex;
- align-items: center;
  padding: var(--u-padding);
- padding-left: 0;
- padding-right: 0;
- `, [cE('main', `
+ `, [cB('skeleton', `
+ height: 24px
+ `), cE('main', `
  flex: 1;
  `), c('&:focus', `
  outline: none;
@@ -65,81 +64,43 @@ export default c([cB('list', `
  left: 0;
  `), cE('icon', `
  display: flex;
- font-size: var(--u-icon-size);
  margin-left: var(--u-icon-space);
  `), cE('suffix', `
  margin-left: var(--u-suffix-space);
+ font-size: var(--u-suffix-size);
+ align-self: center;
  `), cE('prefix', `
  margin-right: var(--u-prefix-space);
+ display: flex;
  `), cE('content', `
- flex-grow: 1;
- padding: 0;
  display: flex;
  flex-direction: column;
- align-items: stretch;
+ gap: 4px;
  `, [cM('right', `
- margin-left: auto;
  text-align: right;
- align-items: flex-end;
- `, [cE('title', `
- font-weight: 600;
- `)]), c('+', [cE('content', `
- margin-left: 24px;
- flex-grow: 0;
- `)])]), cE('text', `
- flex-grow: 1;
- display: flex;
- align-items: flex-start;
+ `), cM('full', {
+  width: '100%'
+})]), cE('text', `
+ display: grid;
+ gap: 16px;
+ grid-template-columns: 1fr 1fr;
+ height: 100%
  `), cE('title', `
- padding-top: 4px;
  flex-grow: 1;
- margin-bottom: 4px;
- font-size: var(--u-title-size);
- font-weight: 500;
- line-height: var(--u-title-line-height);
- `, [c('&:last-child', `
- margin-bottom: 0;
- `)]), cE('subtitle', `
- padding-bottom: 4px;
+ `), cE('subtitle', `
  flex-grow: 1;
- font-size: var(--u-subtitle-size);
- font-weight: 500;
- line-height: var(--u-subtitle-line-height);
  color: var(--u-subtitle-color);
  `), cE('subtitle,title', [c('&:last-child:first-child', `
- padding: 12px 0;
- `)]), cE('avatar', `
- display: flex;
- margin-right: var(--u-avatar-space);
- `), c('&:last-child', [cE('divider', `
+ `)]), c('&:last-child', [cE('divider', `
  display: none;
  `)]), cM('default', `
- min-height: var(--u-min-height);
  padding: var(--u-padding);
  `, [cE('main', `
- display: flex;
+ display: none;
  align-items: center;
- `)]), cM('description-first', [cE('title', `
- padding-top: 0;
- padding-bottom: 4px;
- order: 1;
- margin-top: 4px;
- margin-bottom: 0px;
- `, [c('&:last-child', `
- margin-top: 0;
- `)]), cE('subtitle', `
- padding-bottom: 0;
- padding-top: 4px;
- `)]), cM('columns-even', [cE('content', [cM('right', `
- flex-grow: 1;
- text-align: left;
- align-items: stretch;
- `)])]), cM('bordered', `
- padding: var(--u-padding);
- `), cNotM('loading', [cNotM('disabled', [cNotM('loading-skeleton', [cM('hoverable', `
+ `)]), cNotM('loading', [cNotM('disabled', [cNotM('loading-skeleton', [cM('hoverable', `
  cursor: pointer;
  user-select: none;
- padding: var(--u-padding);
  `, [c('&:hover', `
  background: var(--u-merged-color-hover);
  `), c('&:focus,&:active', `
@@ -152,26 +113,7 @@ export default c([cB('list', `
  border-radius: var(--u-border-radius);
  `), cM('disabled', [cE('text, subtitle', `
  color: var(--u-text-color-disabled);
- `)]), cM('loading-skeleton', [cE('content', `
- padding: 5px 0;
- `), cE('content--left', `
- flex-grow: 0;
- width: calc(66.38% - 8px);
- `), cE('content--right', `
- flex-grow: 0;
- width: calc(33.62% - 8px);
- `), cE('title,subtitle', [c('&:first-child:last-child', `
- padding: 0;
- `)]), cE('title', `
- margin-bottom: 8px;
- `, [c('&:last-child', `
- margin-bottom: 0;
- `)]), cM('description-first', [cE('title', `
- margin-bottom: 0;
- margin-top: 8px;
- `, [c('&:last-child', `
- margin-top: 0;
- `)])])])]), insideModal(cB('list', `
+ `)])]), insideModal(cB('list', `
  --u-merged-color-hover: var(--u-color-hover-modal);
  --u-merged-color: var(--u-color-modal);
  --u-merged-border-color: var(--u-border-color-modal);

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

@@ -1,18 +1,12 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import { type Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
-    padding: string;
     iconSize: string;
     iconSpace: string;
     suffixSpace: string;
     prefixSpace: string;
-    titleSize: string;
-    titleLineHeight: string;
-    subtitleSize: string;
-    subtitleLineHeight: string;
     subtitleColor: string;
     avatarSpace: string;
-    minHeight: string;
     colorFocus: string;
     pressedScale: string;
     textColorDisabled: string;
@@ -26,8 +20,11 @@ export declare const self: (vars: ThemeCommonVars) => {
     borderColor: string;
     borderColorModal: string;
     borderColorPopover: string;
-    borderRadius: string;
-    fontSize: string;
+    borderRadiusLarge: string;
+    borderRadiusMedium: string;
+    borderRadiusSmall: string;
+    padding: string;
+    suffixSize: string;
 };
 export type ListThemeVars = ReturnType<typeof self>;
 declare const listLight: Theme<'List', ListThemeVars>;

package/es/list/styles/light.js

@@ -1,19 +1,13 @@
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { borderRadius, iconMedium, fontBodyLarge, lineHeightBodyLarge, lineHeightBodyMedium, textSecondary, iconSmall, elementsQuaternary, textTertiary, textPrimary, fontBodyMedium, containerPrimary, elementsTertiary } = vars;
+    const { borderRadius, borderRadiusMedium, borderRadiusSmall, iconMedium, textSecondary, iconSmall, elementsQuaternary, textTertiary, textPrimary, containerPrimary, elementsTertiary } = vars;
     return {
-        padding: '8px 24px',
         iconSize: iconMedium,
         iconSpace: '16px',
         suffixSpace: '20px',
         prefixSpace: '20px',
-        titleSize: fontBodyLarge,
-        titleLineHeight: lineHeightBodyLarge,
-        subtitleSize: fontBodyMedium,
-        subtitleLineHeight: lineHeightBodyMedium,
         subtitleColor: textSecondary,
         avatarSpace: iconSmall,
-        minHeight: '64px',
         colorFocus: elementsQuaternary,
         pressedScale: '0.98',
         textColorDisabled: textTertiary,
@@ -27,8 +21,11 @@ export const self = (vars) => {
         borderColor: elementsQuaternary,
         borderColorModal: elementsQuaternary,
         borderColorPopover: elementsQuaternary,
-        borderRadius,
-        fontSize: fontBodyMedium
+        borderRadiusLarge: borderRadius,
+        borderRadiusMedium,
+        borderRadiusSmall,
+        padding: '12px 24px',
+        suffixSize: '24px'
     };
 };
 const listLight = {

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

@@ -92,6 +92,7 @@ export default cB('tag', `
  cursor: pointer;
  box-shadow: none;
  color: var(--u-text-color-checkable);
+ padding: 0px 8px;
  background-color: var(--u-color-checkable);
  transition: border-color .3s var(--u-bezier);
  `, [cNotM('disabled', [c('&:hover', 'background-color: var(--u-color-hover-checkable);', [cNotM('checked', 'color: var(--u-text-color-hover-checkable);')]), c('&:focus', `
@@ -101,4 +102,7 @@ export default cB('tag', `
  transition: border-color .3s var(--u-bezier);`, [cNotM('checked', 'color: var(--u-text-color-pressed-checkable);')])]), cM('checked', `
  color: var(--u-text-color-checked);
  background-color: var(--u-color-checked);
- `, [cNotM('disabled', [c('&:hover', 'background-color: var(--u-color-checked-hover);'), c('&:focus', 'background-color: var(--u-color-checked-hover);'), c('&:active', 'background-color: var(--u-color-checked-pressed);')])])])]);
+ `, [cE('border', `
+ border-color: var(--u-color-checked);
+ transition: none;
+ `), cNotM('disabled', [c('&:hover', 'background-color: var(--u-color-checked-hover);'), c('&:focus', 'background-color: var(--u-color-checked-hover);'), c('&:active', 'background-color: var(--u-color-checked-pressed);')])])])]);

package/es/tag/styles/light.js

@@ -1,7 +1,7 @@
 import { changeColor } from 'seemly';
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { opacityDisabled, borderRadiusSmall: borderRadius, fontWeightStrong, fontWeight, elementsTertiary, fontBodySmall, fontBodyMedium, textQuaternary, elementsPrimary, elementsSenary, elementsQuinary, textPrimary, elementsQuaternary, transparencySecondary, staticDarkGrey, staticWhite, elementsDarkQuinary, brandPrimary600, brandPrimary500, brandQuaternary600, brandQuaternary500, staticGreen, staticOrange, staticRed, staticBlack } = vars;
+    const { opacityDisabled, borderRadiusSmall: borderRadius, fontWeightStrong, fontWeight, elementsTertiary, fontBodySmall, fontBodyMedium, textQuaternary, elementsPrimary, elementsSecondary, elementsSenary, elementsQuinary, textPrimary, elementsQuaternary, transparencySecondary, staticDarkGrey, staticWhite, elementsDarkQuinary, brandPrimary600, brandPrimary500, brandQuaternary600, brandQuaternary500, staticGreen, staticOrange, staticRed, staticBlack } = vars;
     const borderTagWidth = 2;
     return {
         closeIconSizeTiny: '16px',
@@ -36,7 +36,7 @@ export const self = (vars) => {
         textColorHoverCheckable: textPrimary,
         textColorPressedCheckable: textPrimary,
         textColorChecked: textQuaternary,
-        colorCheckable: elementsTertiary,
+        colorCheckable: elementsSecondary,
         colorHoverCheckable: elementsQuaternary,
         colorPressedCheckable: elementsQuaternary,
         colorChecked: elementsPrimary,

package/es/upload/src/UploadFile.js

@@ -220,8 +220,8 @@ export default defineComponent({
                 !this.vertical &&
                     !imageCardTypes.includes(listType) &&
                     `${clsPrefix}-upload-file-loader--default`
-            ] },
-            h("div", { class: [
+            ] }, {
+            default: () => (h("div", { class: [
                     `${clsPrefix}-upload-file`,
                     `${clsPrefix}-upload-file--${this.progressStatus}-status`,
                     file.url &&
@@ -247,6 +247,7 @@ export default defineComponent({
                                 ? this.$slots['upload-file-subtitle']({ file })
                                 : ''))),
                     actionsNode),
-                this.showProgress && (h("div", { class: `${clsPrefix}-upload-file-overlay` })))));
+                this.showProgress && (h("div", { class: `${clsPrefix}-upload-file-overlay` }))))
+        }));
     }
 });

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.5.0";
+declare const _default: "1.5.2";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.5.0';
+export default '1.5.2';

package/lib/_internal/typography/src/styles/text.cssr.js

@@ -76,7 +76,6 @@ exports.default = (0, cssr_1.cB)('text', `
  `), (0, cssr_1.c)('p&', `
  box-sizing: border-box;
  transition: color .3s var(--u-bezier);
- margin: var(--u-margin);
  font-size: var(--u-font-size);
  line-height: var(--u-line-height);
  color: var(--u-text-color);

package/lib/_internal/typography/styles/light.js

@@ -5,7 +5,7 @@ const styles_1 = require("../../../styles");
 const self = (vars) => {
     const { borderRadiusSmall, brandPrimary500, elementsQuaternary, textPrimary, brandQuaternary500, staticRed, staticOrange, staticGreen, elementsTertiary, fontBodyMedium, lineHeightBodyMedium, codeBorder } = vars;
     return {
-        margin: '16px 0 16px 0',
+        margin: '0px',
         aTextColor: brandPrimary500,
         blockquoteTextColor: textPrimary,
         blockquotePrefixColor: elementsQuaternary,

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

@@ -24,6 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly loading: BooleanConstructor;
+    readonly loadingSkeleton: BooleanConstructor;
     readonly bordered: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
@@ -4295,6 +4296,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly loading: BooleanConstructor;
+    readonly loadingSkeleton: BooleanConstructor;
     readonly bordered: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
@@ -7145,6 +7147,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly virtualScroll: boolean;
     readonly tableLayout: "auto" | "fixed";
     readonly columns: import("./interface").TableColumns<any>;
+    readonly loadingSkeleton: boolean;
     readonly remote: boolean;
     readonly paginateSinglePage: boolean;
     readonly bottomBordered: boolean | undefined;

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

@@ -258,6 +258,7 @@ exports.default = (0, vue_1.defineComponent)({
             mergedSortStateRef,
             mergedFilterStateRef,
             loadingRef: (0, vue_1.toRef)(props, 'loading'),
+            loadingSkeletonRef: (0, vue_1.toRef)(props, 'loadingSkeleton'),
             rowClassNameRef: (0, vue_1.toRef)(props, 'rowClassName'),
             mergedCheckedRowKeySetRef,
             mergedExpandedRowKeysRef,

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

@@ -1376,6 +1376,7 @@ declare const _default: import("vue").DefineComponent<{
     scrollX: import("vue").Ref<string | number | undefined>;
     cols: import("vue").Ref<ColItem[]>;
     loading: import("vue").Ref<boolean>;
+    loadingSkeleton: import("vue").Ref<boolean>;
     bodyShowHeaderOnly: import("vue").ComputedRef<boolean>;
     shouldDisplaySomeTablePart: import("vue").ComputedRef<boolean>;
     empty: import("vue").ComputedRef<boolean>;

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

@@ -99,7 +99,7 @@ exports.default = (0, vue_1.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, 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
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const scrollbarInstRef = (0, vue_1.ref)(null);
@@ -309,7 +309,7 @@ exports.default = (0, vue_1.defineComponent)({
             componentId,
             scrollbarInstRef,
             virtualListRef,
-            emptyElRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, loading: loadingRef, bodyShowHeaderOnly: bodyShowHeaderOnlyRef, shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef, empty: emptyRef, paginatedDataAndInfo: (0, vue_1.computed)(() => {
+            emptyElRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, loading: loadingRef, loadingSkeleton: loadingSkeletonRef, bodyShowHeaderOnly: bodyShowHeaderOnlyRef, shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef, empty: emptyRef, paginatedDataAndInfo: (0, vue_1.computed)(() => {
                 const { value: striped } = stripedRef;
                 let hasChildren = false;
                 const data = paginatedDataRef.value.map(striped
@@ -596,7 +596,7 @@ exports.default = (0, vue_1.defineComponent)({
                         } },
                         (0, vue_1.h)("colgroup", null, cols.map((col) => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
                         this.showHeader ? (0, vue_1.h)(Header_1.default, { discrete: false }) : null,
-                        this.loading ? ((0, vue_1.h)(BodySkeleton_1.default, null)) : !this.empty ? ((0, vue_1.h)("tbody", { "data-u-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, displayedRowIndex) => {
+                        this.loadingSkeleton ? ((0, vue_1.h)(BodySkeleton_1.default, null)) : !this.empty ? ((0, vue_1.h)("tbody", { "data-u-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, displayedRowIndex) => {
                             return renderRow(rowInfo, displayedRowIndex, false);
                         }))) : null));
                 }

package/lib/data-table/src/interface.d.ts

@@ -34,6 +34,7 @@ export declare const dataTableProps: {
         readonly default: () => never[];
     };
     readonly loading: BooleanConstructor;
+    readonly loadingSkeleton: BooleanConstructor;
     readonly bordered: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -3035,6 +3036,7 @@ export interface DataTableInjection {
     mergedSortStateRef: Ref<SortState[]>;
     mergedFilterStateRef: Ref<FilterState>;
     loadingRef: Ref<boolean>;
+    loadingSkeletonRef: Ref<boolean>;
     rowClassNameRef: Ref<string | CreateRowClassName | undefined>;
     mergedCheckedRowKeySetRef: Ref<Set<RowKey>>;
     mergedInderminateRowKeySetRef: Ref<Set<RowKey>>;

package/lib/data-table/src/interface.js

@@ -17,7 +17,7 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, rowClassName: [String, Function], rowProps: Function, rowKey: Function, summary: [Function], data: {
         type: Array,
         default: () => []
-    }, loading: Boolean, bordered: {
+    }, loading: Boolean, loadingSkeleton: Boolean, bordered: {
         type: Boolean,
         default: undefined
     }, bottomBordered: {

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

@@ -1,4 +1,8 @@
 declare const _default: import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<import("./interface").Size>;
+        default: string;
+    };
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
@@ -48,18 +52,12 @@ declare const _default: import("vue").DefineComponent<{
     icon: import("./interface").RenderableProp;
     avatar: import("./interface").RenderableProp;
     theme: import("vue").PropType<import("../../_mixins").Theme<"List", {
-        padding: string;
         iconSize: string;
         iconSpace: string;
         suffixSpace: string;
         prefixSpace: string;
-        titleSize: string;
-        titleLineHeight: string;
-        subtitleSize: string;
-        subtitleLineHeight: string;
         subtitleColor: string;
         avatarSpace: string;
-        minHeight: string;
         colorFocus: string;
         pressedScale: string;
         textColorDisabled: string;
@@ -73,22 +71,19 @@ declare const _default: import("vue").DefineComponent<{
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>;
     themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"List", {
-        padding: string;
         iconSize: string;
         iconSpace: string;
         suffixSpace: string;
         prefixSpace: string;
-        titleSize: string;
-        titleLineHeight: string;
-        subtitleSize: string;
-        subtitleLineHeight: string;
         subtitleColor: string;
         avatarSpace: string;
-        minHeight: string;
         colorFocus: string;
         pressedScale: string;
         textColorDisabled: string;
@@ -102,22 +97,19 @@ declare const _default: import("vue").DefineComponent<{
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>>;
     builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"List", {
-        padding: string;
         iconSize: string;
         iconSpace: string;
         suffixSpace: string;
         prefixSpace: string;
-        titleSize: string;
-        titleLineHeight: string;
-        subtitleSize: string;
-        subtitleLineHeight: string;
         subtitleColor: string;
         avatarSpace: string;
-        minHeight: string;
         colorFocus: string;
         pressedScale: string;
         textColorDisabled: string;
@@ -131,14 +123,16 @@ declare const _default: import("vue").DefineComponent<{
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     cssVars: import("vue").ComputedRef<{
-        '--u-font-size': string;
         '--u-bezier': string;
         '--u-text-color': string;
         '--u-color': string;
@@ -151,25 +145,25 @@ declare const _default: import("vue").DefineComponent<{
         '--u-color-hover': string;
         '--u-color-hover-modal': string;
         '--u-color-hover-popover': string;
-        '--u-padding': string;
         '--u-icon-size': string;
         '--u-icon-space': string;
         '--u-suffix-space': string;
         '--u-prefix-space': string;
-        '--u-title-size': string;
-        '--u-title-line-height': string;
-        '--u-subtitle-size': string;
-        '--u-subtitle-line-height': string;
         '--u-subtitle-color': string;
         '--u-avatar-space': string;
-        '--u-min-height': string;
         '--u-color-focus': string;
         '--u-pressed-scale': string;
         '--u-text-color-disabled': string;
+        '--u-padding': string;
+        '--u-suffix-size': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<import("./interface").Size>;
+        default: string;
+    };
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
@@ -219,18 +213,12 @@ declare const _default: import("vue").DefineComponent<{
     icon: import("./interface").RenderableProp;
     avatar: import("./interface").RenderableProp;
     theme: import("vue").PropType<import("../../_mixins").Theme<"List", {
-        padding: string;
         iconSize: string;
         iconSpace: string;
         suffixSpace: string;
         prefixSpace: string;
-        titleSize: string;
-        titleLineHeight: string;
-        subtitleSize: string;
-        subtitleLineHeight: string;
         subtitleColor: string;
         avatarSpace: string;
-        minHeight: string;
         colorFocus: string;
         pressedScale: string;
         textColorDisabled: string;
@@ -244,22 +232,19 @@ declare const _default: import("vue").DefineComponent<{
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>;
     themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"List", {
-        padding: string;
         iconSize: string;
         iconSpace: string;
         suffixSpace: string;
         prefixSpace: string;
-        titleSize: string;
-        titleLineHeight: string;
-        subtitleSize: string;
-        subtitleLineHeight: string;
         subtitleColor: string;
         avatarSpace: string;
-        minHeight: string;
         colorFocus: string;
         pressedScale: string;
         textColorDisabled: string;
@@ -273,22 +258,19 @@ declare const _default: import("vue").DefineComponent<{
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>>;
     builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"List", {
-        padding: string;
         iconSize: string;
         iconSpace: string;
         suffixSpace: string;
         prefixSpace: string;
-        titleSize: string;
-        titleLineHeight: string;
-        subtitleSize: string;
-        subtitleLineHeight: string;
         subtitleColor: string;
         avatarSpace: string;
-        minHeight: string;
         colorFocus: string;
         pressedScale: string;
         textColorDisabled: string;
@@ -302,8 +284,11 @@ declare const _default: import("vue").DefineComponent<{
         borderColor: string;
         borderColorModal: string;
         borderColorPopover: string;
-        borderRadius: string;
-        fontSize: string;
+        borderRadiusLarge: string;
+        borderRadiusMedium: string;
+        borderRadiusSmall: string;
+        padding: string;
+        suffixSize: string;
     }, any>>>;
 }>>, {
     onFocus: import("../../_utils").ArrayFocusHandler | undefined;
@@ -318,6 +303,7 @@ declare const _default: import("vue").DefineComponent<{
     bordered: boolean;
     tag: string;
     showIcon: boolean;
+    size: import("./interface").Size;
     header: import("./interface").RenderableType;
     loadingSkeleton: boolean;
     rounded: boolean;