@bethinkpl/design-system 41.0.1 → 41.1.0

package/dist/lib/js/components/Buttons/IconButton/IconButton.consts.d.ts

@@ -30,6 +30,7 @@ export declare const ICON_BUTTON_COLORS: {
     readonly WARNING: "warning";
     readonly INFO: "info";
     readonly MAGIC: "magic";
+    readonly ACCENT: "accent";
 };
 export type IconButtonColor = Value<typeof ICON_BUTTON_COLORS>;
 export declare const ICON_BUTTON_STATES: {

package/dist/lib/js/components/Buttons/IconButton/IconButton.vue.d.ts

@@ -379,6 +379,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     }>;
     BUTTON_COLORS: Readonly<{
         readonly PRIMARY: "primary";

package/dist/lib/js/components/Cards/Card/Card.consts.d.ts

@@ -20,6 +20,7 @@ export declare const CARD_RIBBON_COLORS: {
     readonly DANGER: "danger";
     readonly FAIL: "fail";
     readonly INFO: "info";
+    readonly ACCENT: "accent";
     readonly TRANSPARENT: "transparent";
 };
 export type CardRibbonColors = Value<typeof CARD_RIBBON_COLORS>;

package/dist/lib/js/components/Chip/Chip.consts.d.ts

@@ -16,6 +16,7 @@ export declare const CHIP_COLORS: {
     readonly INVERTED: "inverted";
     readonly WARNING: "warning";
     readonly INFO: "info";
+    readonly ACCENT: "accent";
 };
 export declare const CHIP_DEFAULT_COLOR: "neutral";
 export type ChipColor = Value<typeof CHIP_COLORS>;

package/dist/lib/js/components/ContainerRibbon/ContainerRibbon.consts.d.ts

@@ -17,6 +17,7 @@ export declare const CONTAINER_RIBBON_COLORS: {
     readonly DANGER: "danger";
     readonly FAIL: "fail";
     readonly INFO: "info";
+    readonly ACCENT: "accent";
     readonly TRANSPARENT: "transparent";
 };
 export type ContainerRibbonColor = Value<typeof CONTAINER_RIBBON_COLORS>;

package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts

@@ -1030,6 +1030,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts

@@ -71,6 +71,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     };
     ICON_BUTTON_SIZES: {
         readonly XX_SMALL: "xx-small";
@@ -820,6 +821,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         SECTION_HEADER_MOBILE_LAYOUTS: Readonly<{
             readonly VERTICAL: "vertical";
@@ -1372,6 +1374,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 readonly WARNING: "warning";
                 readonly INFO: "info";
                 readonly MAGIC: "magic";
+                readonly ACCENT: "accent";
             }>;
             BUTTON_COLORS: Readonly<{
                 readonly PRIMARY: "primary";

package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts

@@ -59,6 +59,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     }>;
     ICON_BUTTON_STATES: Readonly<{
         readonly DEFAULT: "default";
@@ -807,6 +808,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.vue.d.ts

@@ -377,6 +377,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     }>;
     SECTION_HEADER_MOBILE_LAYOUTS: Readonly<{
         readonly VERTICAL: "vertical";
@@ -929,6 +930,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts

@@ -407,6 +407,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     };
     ICON_SIZES: {
         XXX_SMALL: string;
@@ -1060,6 +1061,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts

@@ -542,6 +542,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         };
         ICON_SIZES: {
             XXX_SMALL: string;
@@ -1195,6 +1196,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 readonly WARNING: "warning";
                 readonly INFO: "info";
                 readonly MAGIC: "magic";
+                readonly ACCENT: "accent";
             }>;
             BUTTON_COLORS: Readonly<{
                 readonly PRIMARY: "primary";

package/dist/lib/js/components/Pagination/Pagination.vue.d.ts

@@ -10,6 +10,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     isCentered: {
         type: BooleanConstructor;
         default: boolean;
@@ -53,6 +57,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     }>;
     ICON_BUTTON_STATES: Readonly<{
         readonly DEFAULT: "default";
@@ -341,6 +346,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
     }>;
+    ICON_SIZES: Readonly<{
+        XXX_SMALL: string;
+        XX_SMALL: string;
+        X_SMALL: string;
+        SMALL: string;
+        MEDIUM: string;
+        LARGE: string;
+        X_LARGE: string;
+        XX_LARGE: string;
+    }>;
     FIRST_PAGE_NUMBER: number;
 }, {
     lastPage(): number;
@@ -363,6 +378,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     isCentered: {
         type: BooleanConstructor;
         default: boolean;
@@ -379,6 +398,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>> & Readonly<{
     "onChange-page"?: ((...args: any[]) => any) | undefined;
 }>, {
+    isLoading: boolean;
     currentPage: number;
     forceCompact: boolean;
     isCentered: boolean;
@@ -761,6 +781,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";
@@ -1185,5 +1206,80 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
     });
     SelectList: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    DsIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        icon: {
+            type: ObjectConstructor;
+            required: true;
+            validator(icon: unknown): boolean;
+        };
+        size: {
+            type: StringConstructor;
+            default: string;
+            validator: (value: string) => boolean;
+        };
+        rotation: {
+            type: (NumberConstructor | null)[];
+            default: null;
+        };
+        flippedVertical: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        flippedHorizontal: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        touchableDeprecated: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        spinning: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, {}, {}, {
+        sizeClassName(): string;
+        isFontawesomeIcon(): boolean;
+    }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        icon: {
+            type: ObjectConstructor;
+            required: true;
+            validator(icon: unknown): boolean;
+        };
+        size: {
+            type: StringConstructor;
+            default: string;
+            validator: (value: string) => boolean;
+        };
+        rotation: {
+            type: (NumberConstructor | null)[];
+            default: null;
+        };
+        flippedVertical: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        flippedHorizontal: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        touchableDeprecated: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        spinning: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
+        rotation: number | null;
+        size: string;
+        flippedVertical: boolean;
+        flippedHorizontal: boolean;
+        touchableDeprecated: boolean;
+        spinning: boolean;
+    }, {}, {
+        FontAwesomeIcon: import('vue').DefineComponent<import('@fortawesome/vue-fontawesome').FontAwesomeIconProps>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts

@@ -314,6 +314,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     }>;
     ICON_SIZES: Readonly<{
         XXX_SMALL: string;
@@ -1045,6 +1046,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts

@@ -343,6 +343,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly WARNING: "warning";
         readonly INFO: "info";
         readonly MAGIC: "magic";
+        readonly ACCENT: "accent";
     }>;
     BUTTON_TYPES: Readonly<{
         readonly FILLED: "filled";
@@ -1017,6 +1018,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly WARNING: "warning";
             readonly INFO: "info";
             readonly MAGIC: "magic";
+            readonly ACCENT: "accent";
         }>;
         BUTTON_COLORS: Readonly<{
             readonly PRIMARY: "primary";

package/dist/lib/js/components/Well/Well.consts.d.ts

@@ -3,6 +3,7 @@ import { Value } from '../../utils/type.utils';
 export declare const WELL_PADDINGS: {
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
+    readonly LARGE: "large";
 };
 export type WellPadding = Value<typeof WELL_PADDINGS>;
 export declare const WELL_COLORS: {
@@ -27,6 +28,7 @@ export declare const WELL_RIBBON_COLORS: {
     readonly DANGER: "danger";
     readonly FAIL: "fail";
     readonly INFO: "info";
+    readonly ACCENT: "accent";
     readonly TRANSPARENT: "transparent";
 };
 export type WellRibbonColor = Value<typeof WELL_RIBBON_COLORS>;

package/lib/js/components/Buttons/IconButton/IconButton.consts.ts

@@ -37,6 +37,7 @@ export const ICON_BUTTON_COLORS = {
 	WARNING: 'warning',
 	INFO: 'info',
 	MAGIC: 'magic',
+	ACCENT: 'accent',
 } as const;
 
 export type IconButtonColor = Value<typeof ICON_BUTTON_COLORS>;

package/lib/js/components/Buttons/IconButton/IconButton.spec.ts

@@ -38,6 +38,7 @@ describe('IconButton', () => {
 		[{ props: { state: ICON_BUTTON_STATES.LOADING }, expectedClass: '-ds-loading' }],
 		[{ props: { color: ICON_BUTTON_COLORS.PRIMARY }, expectedClass: '-ds-color-primary' }],
 		[{ props: { color: ICON_BUTTON_COLORS.MAGIC }, expectedClass: '-ds-color-magic' }],
+		[{ props: { color: ICON_BUTTON_COLORS.ACCENT }, expectedClass: '-ds-color-accent' }],
 	])('correct class for props', ({ props, expectedClass }) => {
 		const component = createComponent(props);
 		expect(component.classes()).toContain(expectedClass);

package/lib/js/components/Chip/Chip.consts.ts

@@ -18,6 +18,7 @@ export const CHIP_COLORS = {
 	INVERTED: 'inverted',
 	WARNING: 'warning',
 	INFO: 'info',
+	ACCENT: 'accent',
 } as const;
 
 export const CHIP_DEFAULT_COLOR = CHIP_COLORS.NEUTRAL;

package/lib/js/components/Chip/Chip.spec.ts

@@ -133,6 +133,7 @@ describe('Chip', () => {
 		[CHIP_COLORS.INFO, '-ds-color-info'],
 		[CHIP_COLORS.WARNING, '-ds-color-warning'],
 		[CHIP_COLORS.INVERTED, '-ds-color-inverted'],
+		[CHIP_COLORS.ACCENT, '-ds-color-accent'],
 	])(
 		'correct class for color: %s prop, expectedClass: %s',
 		(color: string, expectedClass: string) => {
@@ -147,6 +148,7 @@ describe('Chip', () => {
 				'-ds-color-info',
 				'-ds-color-warning',
 				'-ds-color-inverted',
+				'-ds-color-accent',
 			];
 			const component = createComponent({ color });
 			const componentClasses = component.classes();

package/lib/js/components/Chip/Chip.vue

@@ -156,6 +156,17 @@ $chip-colors: (
 			'background': $color-info-background,
 		),
 	),
+	'accent': (
+		'label': $color-accent-text,
+		'icon': $color-accent-icon,
+		'background': $color-accent-background,
+		'background-hover': $color-accent-background-hovered,
+		'disabled': (
+			'label': $color-accent-text-disabled,
+			'icon': $color-accent-icon-disabled,
+			'background': $color-accent-background,
+		),
+	),
 	'inverted': (
 		'label': $color-neutral-text,
 		'icon': $color-neutral-icon,
@@ -318,6 +329,7 @@ const CHIP_ICON_BUTTONS_COLOR_MAP: Record<ChipColor, IconButtonColor> = {
 	[CHIP_COLORS.WARNING]: ICON_BUTTON_COLORS.WARNING,
 	[CHIP_COLORS.SUCCESS]: ICON_BUTTON_COLORS.SUCCESS,
 	[CHIP_COLORS.INFO]: ICON_BUTTON_COLORS.INFO,
+	[CHIP_COLORS.ACCENT]: ICON_BUTTON_COLORS.ACCENT,
 };
 
 const {

package/lib/js/components/ContainerRibbon/ContainerRibbon.consts.ts

@@ -19,6 +19,7 @@ export const CONTAINER_RIBBON_COLORS = {
 	DANGER: 'danger',
 	FAIL: 'fail',
 	INFO: 'info',
+	ACCENT: 'accent',
 	TRANSPARENT: 'transparent',
 } as const;
 

package/lib/js/components/ContainerRibbon/ContainerRibbon.spec.ts

@@ -33,12 +33,15 @@ describe('ContainerRibbon', () => {
 		},
 	);
 
-	it('applies color classes correctly', () => {
-		const wrapper = mount(ContainerRibbon, {
-			props: { color: CONTAINER_RIBBON_COLORS.PRIMARY },
-		});
-		expect(wrapper.find('.ds-container-ribbon').classes()).toContain('-ds-color-primary');
-	});
+	it.each(Object.values(CONTAINER_RIBBON_COLORS))(
+		'applies color class correctly for color "%s"',
+		(color) => {
+			const wrapper = mount(ContainerRibbon, {
+				props: { color },
+			});
+			expect(wrapper.find('.ds-container-ribbon').classes()).toContain(`-ds-color-${color}`);
+		},
+	);
 
 	it('applies layout classes correctly', () => {
 		const wrapper = mount(ContainerRibbon, {

package/lib/js/components/ContainerRibbon/ContainerRibbon.vue

@@ -15,6 +15,7 @@
 			'-ds-color-danger': color === CONTAINER_RIBBON_COLORS.DANGER,
 			'-ds-color-fail': color === CONTAINER_RIBBON_COLORS.FAIL,
 			'-ds-color-info': color === CONTAINER_RIBBON_COLORS.INFO,
+			'-ds-color-accent': color === CONTAINER_RIBBON_COLORS.ACCENT,
 			'-ds-color-transparent': color === CONTAINER_RIBBON_COLORS.TRANSPARENT,
 			'-ds-layout-vertical': layout === CONTAINER_RIBBON_LAYOUTS.VERTICAL,
 			'-ds-layout-horizontal': layout === CONTAINER_RIBBON_LAYOUTS.HORIZONTAL,
@@ -116,6 +117,10 @@
 		background-color: $color-info-border;
 	}
 
+	&.-ds-color-accent {
+		background-color: $color-accent-border;
+	}
+
 	&.-ds-color-transparent {
 		background-color: transparent;
 	}

package/lib/js/components/Pagination/Pagination.spec.ts

@@ -4,11 +4,16 @@ import { shallowMount } from '@vue/test-utils';
 import Pagination from './Pagination.vue';
 
 describe('Pagination', () => {
-	const createComponent = ({ currentPage = 1, itemsTotalAmount = 30 } = {}) => {
+	const createComponent = ({
+		currentPage = 1,
+		itemsTotalAmount = 30,
+		isLoading = false,
+	} = {}) => {
 		return shallowMount(Pagination, {
 			props: {
 				currentPage,
 				itemsTotalAmount,
+				isLoading,
 			} as any,
 			global: {
 				stubs: {
@@ -32,6 +37,18 @@ describe('Pagination', () => {
 		expect(component.exists()).toBe(true);
 	});
 
+	it('should not render the loading spinner by default', () => {
+		const component = createComponent({ itemsTotalAmount: 60 });
+
+		expect(component.find('.ds-pagination__loading').exists()).toBe(false);
+	});
+
+	it('should render the loading spinner when isLoading is true', () => {
+		const component = createComponent({ itemsTotalAmount: 60, isLoading: true });
+
+		expect(component.find('.ds-pagination__loading').exists()).toBe(true);
+	});
+
 	test.each([
 		{
 			props: {

package/lib/js/components/Pagination/Pagination.stories.ts

@@ -22,9 +22,9 @@ const StoryTemplate: StoryFn<typeof Pagination> = (args) => {
 			},
 		},
 		template: `
-			<Pagination v-bind=args @change-page="onChangePage">
-				<template #accessory>
-					<div v-if="args.accessory" v-html="args.accessory" />
+			<Pagination v-bind="args" @change-page="onChangePage">
+				<template v-if="args.accessory" #accessory>
+					<div  v-html="args.accessory" />
 				</template>
 			</Pagination>`,
 	};
@@ -35,6 +35,7 @@ export const Interactive = StoryTemplate.bind({});
 const argTypes = {
 	currentPage: { control: { type: 'number', min: 1 } },
 	forceCompact: { control: 'boolean' },
+	isLoading: { control: 'boolean' },
 	isCentered: { control: 'boolean' },
 	itemsPerPage: { control: { type: 'number', min: 1 } },
 	itemsTotalAmount: { control: { type: 'number', min: 1 } },
@@ -45,6 +46,7 @@ Interactive.argTypes = argTypes;
 Interactive.args = {
 	currentPage: 1,
 	forceCompact: false,
+	isLoading: false,
 	isCentered: false,
 	itemsPerPage: 30,
 	itemsTotalAmount: 600,

package/lib/js/components/Pagination/Pagination.vue

@@ -65,6 +65,10 @@
 						</dropdown>
 					</div>
 				</template>
+
+				<div v-if="isLoading" class="ds-pagination__loading">
+					<ds-icon :icon="ICONS.FAD_SPINNER_THIRD" :size="ICON_SIZES.SMALL" spinning />
+				</div>
 			</div>
 
 			<div v-if="navigationItems.length > 1" class="ds-pagination__items -ds-compact">
@@ -109,10 +113,14 @@
 					"
 					@click="changePage(currentPage + 1)"
 				/>
+
+				<div v-if="isLoading" class="ds-pagination__loading">
+					<ds-icon :icon="ICONS.FAD_SPINNER_THIRD" :size="ICON_SIZES.SMALL" spinning />
+				</div>
 			</div>
 		</div>
 
-		<div class="ds-pagination__accessorySlot">
+		<div v-if="$slots.accessory" class="ds-pagination__accessorySlot">
 			<slot name="accessory" />
 		</div>
 	</div>
@@ -138,6 +146,8 @@ $pagination-input-height: 32px;
 	align-items: stretch;
 	flex-direction: row;
 	flex-grow: 1;
+	// leaves room for the loading spinner so it doesn't overlap the accessory slot
+	gap: $space-20;
 
 	&__itemsWrapper {
 		align-content: center;
@@ -157,6 +167,7 @@ $pagination-input-height: 32px;
 		align-items: center;
 		flex-direction: row;
 		padding: 0;
+		position: relative;
 
 		&.-ds-default {
 			display: none;
@@ -260,6 +271,17 @@ $pagination-input-height: 32px;
 		min-height: 0;
 		padding: 0;
 	}
+
+	&__loading {
+		align-items: center;
+		color: $color-primary-icon;
+		display: flex;
+		left: 100%;
+		margin-left: $space-6;
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+	}
 }
 </style>
 
@@ -267,7 +289,8 @@ $pagination-input-height: 32px;
 import { PAGINATION_DEFAULT_ITEMS_PER_PAGE } from './Pagination.consts';
 import IconButton from '../Buttons/IconButton/IconButton.vue';
 import { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES, ICON_BUTTON_STATES } from '../Buttons/IconButton';
-import { ICONS } from '../Icons/Icon';
+import DsIcon from '../Icons/Icon/Icon.vue';
+import { ICON_SIZES, ICONS } from '../Icons/Icon';
 
 import { DROPDOWN_PLACEMENTS, DROPDOWN_RADIUSES } from '../Dropdown/Dropdown.consts';
 import Dropdown from '../Dropdown/Dropdown.vue';
@@ -283,7 +306,7 @@ const FIRST_PAGE_NUMBER = 1;
 
 export default defineComponent({
 	name: 'Pagination',
-	components: { IconButton, Dropdown, SelectListItem, SelectList },
+	components: { IconButton, Dropdown, SelectListItem, SelectList, DsIcon },
 	props: {
 		currentPage: {
 			type: Number,
@@ -296,6 +319,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		isLoading: {
+			type: Boolean,
+			default: false,
+		},
 		isCentered: {
 			type: Boolean,
 			default: false,
@@ -328,6 +355,7 @@ export default defineComponent({
 			ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
 			ICON_BUTTON_STATES: Object.freeze(ICON_BUTTON_STATES),
 			ICONS: Object.freeze(ICONS),
+			ICON_SIZES: Object.freeze(ICON_SIZES),
 			FIRST_PAGE_NUMBER,
 		};
 	},

package/lib/js/components/Well/Well.consts.ts

@@ -4,6 +4,7 @@ import { CONTAINER_RIBBON_COLORS, CONTAINER_RIBBON_SIZES } from '../ContainerRib
 export const WELL_PADDINGS = {
 	SMALL: 'small',
 	MEDIUM: 'medium',
+	LARGE: 'large',
 } as const;
 
 export type WellPadding = Value<typeof WELL_PADDINGS>;

package/lib/js/components/Well/Well.spec.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import { ComponentMountingOptions, mount } from '@vue/test-utils';
 
 import Well from './Well.vue';
-import { WELL_RIBBON_POSITIONS } from './Well.consts';
+import { WELL_PADDINGS, WELL_RIBBON_POSITIONS } from './Well.consts';
 
 describe('Well', () => {
 	const createComponent = (options: ComponentMountingOptions<typeof Well> = {}) => {
@@ -24,6 +24,14 @@ describe('Well', () => {
 		expect(component.find('.ds-well__content').text()).toContain(content);
 	});
 
+	it.each(Object.values(WELL_PADDINGS))('should set the padding class for %s', (padding) => {
+		const component = createComponent({
+			props: { padding },
+		});
+
+		expect(component.find('.ds-well').classes()).toContain(`-ds-${padding}`);
+	});
+
 	it('should not set no-radius class by default', () => {
 		const component = createComponent();