@n8n/design-system 2.35.2 → 2.36.0

package/dist/components/N8nDatatable/Datatable.vue.d.ts

@@ -1,5 +1,5 @@
-import { DatatableColumn, DatatableRow, DatatableRowDataType } from '../../types';
 import { DatatableProps } from './Datatable.types';
+import { DatatableColumn, DatatableRow, DatatableRowDataType } from '../../types';
 declare const _default: <Item extends DatatableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:currentPage"?: ((value: number) => any) | undefined;

package/dist/components/N8nFormInput/FormInput.vue.d.ts

@@ -205,10 +205,10 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
         minRows: number;
         maxRows: number;
     };
+    labelSize: "small" | "medium" | "large";
     showRequiredAsterisk: boolean;
     validateOnBlur: boolean;
     documentationText: string;
-    labelSize: "small" | "medium" | "large";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     inputRef: ({
         $: import('vue').ComponentInternalInstance;

package/dist/components/N8nIcon/icons.d.ts

@@ -366,6 +366,7 @@ export declare const updatedIconSet: {
     readonly italic: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly 'key-round': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly languages: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
+    readonly laptop: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly layers: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly 'layout-template': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly lightbulb: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;

package/dist/components/N8nIconPicker/IconPicker.utils.d.ts

@@ -0,0 +1,13 @@
+import { IconPickerVirtualRow } from './useIconPickerVirtualRows';
+export type PickerCoordinate = {
+    row: number;
+    column: number;
+};
+export type PickerDirection = 'up' | 'down' | 'left' | 'right';
+export declare function getPickerDirection(key: string): PickerDirection | undefined;
+export declare function getPickerOptionId(coordinate: PickerCoordinate): string;
+export declare function isSamePickerCoordinate(left: PickerCoordinate | null, right: PickerCoordinate): boolean;
+export declare function humanizeIconName(name: string): string;
+export declare function getRowItemCount(row: IconPickerVirtualRow): number;
+export declare function getPickerCoordinates(rows: IconPickerVirtualRow[]): PickerCoordinate[];
+export declare function getAdjacentPickerCoordinate(rows: IconPickerVirtualRow[], current: PickerCoordinate, direction: PickerDirection): PickerCoordinate | undefined;

package/dist/components/N8nIconPicker/IconPicker.vue.d.ts

@@ -1,13 +1,17 @@
 import { nextTick } from 'vue';
 import { IconOrEmoji } from './types';
+import { ButtonVariant, ButtonSize } from '../../types/button';
+type TabType = 'icons' | 'emojis';
 type Props = {
-    buttonTooltip: string;
-    buttonSize?: 'small' | 'large' | 'xlarge';
     isReadOnly?: boolean;
     iconsOnly?: boolean;
     showColorPicker?: boolean;
     containerClass?: string | Record<string, boolean> | Array<string | Record<string, boolean>>;
+    buttonTooltip: string;
+    buttonVariant?: ButtonVariant;
+    buttonSize?: ButtonSize;
     buttonClass?: string | Record<string, boolean> | Array<string | Record<string, boolean>>;
+    defaultTab?: TabType;
 };
 type __VLS_Props = Props;
 type __VLS_PublicProps = {
@@ -18,11 +22,15 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: IconOrEmoji) => any) | undefined;
 }>, {
-    buttonSize: "small" | "large" | "xlarge";
+    buttonSize: ButtonSize;
+    buttonVariant: ButtonVariant;
     iconsOnly: boolean;
     showColorPicker: boolean;
+    containerClass: string | Record<string, boolean> | Array<string | Record<string, boolean>>;
+    buttonClass: string | Record<string, boolean> | Array<string | Record<string, boolean>>;
+    defaultTab: TabType;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    container: HTMLDivElement;
+    popupRef: HTMLDivElement;
     searchInputRef: ({
         $: import('vue').ComponentInternalInstance;
         $data: {};
@@ -202,5 +210,5 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     }>, {
         isOpen: import('vue').Ref<boolean, boolean>;
     }, {}, {}, {}, {}> | null;
-}, HTMLDivElement>;
+}, any>;
 export default _default;

package/dist/components/N8nIconPicker/useIconPickerSearch.d.ts

@@ -14,9 +14,8 @@ export interface IconSection {
     labelKey: string;
     icons: Array<[string, LucideIconMeta]>;
 }
-export declare function useIconPickerSearch(lucideData: Ref<Record<string, LucideIconMeta> | null>, emojiSectionsData: Ref<EmojiSection[]>, query: Ref<string>, selectedCategory: Ref<string | null>, selectedSkinTone: Ref<number>, delay?: number): {
+export declare function useIconPickerSearch(lucideData: Ref<Record<string, LucideIconMeta> | null>, emojiSectionsData: Ref<EmojiSection[]>, query: Ref<string>, selectedCategory: Ref<string | null>, selectedSkinTone: Ref<number>): {
     filteredIcons: import('vue').ComputedRef<[string, LucideIconMeta][]>;
     filteredIconSections: import('vue').ComputedRef<IconSection[]>;
     filteredEmojiSections: import('vue').ComputedRef<DisplayEmojiSection[]>;
-    debouncedQuery: Readonly<Ref<string, string>>;
 };

package/dist/components/N8nPagination/Pagination.types.d.ts

@@ -0,0 +1,24 @@
+import { PaginationRootEmits, PaginationRootProps } from './reka-ui';
+export type PaginationSizes = 'small' | 'medium';
+export type PaginationProps = Omit<PaginationRootProps, 'dir' | 'asChild' | 'as' | 'itemsPerPage' | 'total'> & {
+    total: number;
+    itemsPerPage?: number;
+    defaultItemsPerPage?: number;
+    pageSizes?: number[];
+    showTotal?: boolean;
+    showSizes?: boolean;
+    showJumper?: boolean;
+    hideOnSinglePage?: boolean;
+    size?: PaginationSizes;
+};
+export type PaginationEmits = PaginationRootEmits & {
+    'update:itemsPerPage': [value: number];
+};
+export type PaginationSlots = {
+    prev?: (props: {
+        disabled: boolean;
+    }) => unknown;
+    next?: (props: {
+        disabled: boolean;
+    }) => unknown;
+};

package/dist/components/N8nPagination/Pagination.vue.d.ts

@@ -1,56 +1,38 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    pageSize: NumberConstructor;
-    defaultPageSize: NumberConstructor;
-    total: NumberConstructor;
-    pageCount: NumberConstructor;
-    pagerCount: import('element-plus/es/utils/index.mjs').EpPropFinalized<NumberConstructor, unknown, unknown, 7, boolean>;
-    currentPage: NumberConstructor;
-    defaultCurrentPage: NumberConstructor;
-    layout: import('element-plus/es/utils/index.mjs').EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
-    pageSizes: import('element-plus/es/utils/index.mjs').EpPropFinalized<(new (...args: any[]) => number[]) | (() => number[]) | ((new (...args: any[]) => number[]) | (() => number[]))[], unknown, unknown, () => [10, 20, 30, 40, 50, 100], boolean>;
-    popperClass: import('element-plus/es/utils/index.mjs').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    prevText: import('element-plus/es/utils/index.mjs').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    prevIcon: import('element-plus/es/utils/index.mjs').EpPropFinalized<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>))[], unknown, unknown, () => any, boolean>;
-    nextText: import('element-plus/es/utils/index.mjs').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    nextIcon: import('element-plus/es/utils/index.mjs').EpPropFinalized<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>))[], unknown, unknown, () => any, boolean>;
-    teleported: import('element-plus/es/utils/index.mjs').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-    small: BooleanConstructor;
-    background: BooleanConstructor;
-    disabled: BooleanConstructor;
-    hideOnSinglePage: BooleanConstructor;
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    pageSize: NumberConstructor;
-    defaultPageSize: NumberConstructor;
-    total: NumberConstructor;
-    pageCount: NumberConstructor;
-    pagerCount: import('element-plus/es/utils/index.mjs').EpPropFinalized<NumberConstructor, unknown, unknown, 7, boolean>;
-    currentPage: NumberConstructor;
-    defaultCurrentPage: NumberConstructor;
-    layout: import('element-plus/es/utils/index.mjs').EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
-    pageSizes: import('element-plus/es/utils/index.mjs').EpPropFinalized<(new (...args: any[]) => number[]) | (() => number[]) | ((new (...args: any[]) => number[]) | (() => number[]))[], unknown, unknown, () => [10, 20, 30, 40, 50, 100], boolean>;
-    popperClass: import('element-plus/es/utils/index.mjs').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    prevText: import('element-plus/es/utils/index.mjs').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    prevIcon: import('element-plus/es/utils/index.mjs').EpPropFinalized<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>))[], unknown, unknown, () => any, boolean>;
-    nextText: import('element-plus/es/utils/index.mjs').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    nextIcon: import('element-plus/es/utils/index.mjs').EpPropFinalized<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>))[], unknown, unknown, () => any, boolean>;
-    teleported: import('element-plus/es/utils/index.mjs').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-    small: BooleanConstructor;
-    background: BooleanConstructor;
-    disabled: BooleanConstructor;
-    hideOnSinglePage: BooleanConstructor;
-}>> & Readonly<{}>, {
-    small: boolean;
+import { PaginationProps, PaginationSlots } from './Pagination.types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<PaginationSlots> & PaginationSlots;
+    refs: {
+        jumperInput: HTMLInputElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<PaginationProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+    "update:itemsPerPage": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<PaginationProps> & Readonly<{
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+    "onUpdate:itemsPerPage"?: ((value: number) => any) | undefined;
+}>, {
     disabled: boolean;
-    teleported: import('element-plus/es/utils/index.mjs').EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    popperClass: string;
-    layout: string;
-    background: boolean;
-    pagerCount: number;
+    size: import('./Pagination.types').PaginationSizes;
+    defaultPage: number;
+    siblingCount: number;
+    showEdges: boolean;
+    defaultItemsPerPage: number;
     pageSizes: number[];
-    prevText: string;
-    prevIcon: import('element-plus/es/utils/index.mjs').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>))[], unknown, unknown>;
-    nextText: string;
-    nextIcon: import('element-plus/es/utils/index.mjs').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>))[], unknown, unknown>;
+    showTotal: boolean;
+    showSizes: boolean;
+    showJumper: boolean;
     hideOnSinglePage: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    jumperInput: HTMLInputElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/N8nPagination/index.d.ts

@@ -1,2 +1,4 @@
 import { default as N8nPagination } from './Pagination.vue';
 export default N8nPagination;
+export { N8nPagination };
+export type * from './Pagination.types';

package/dist/components/N8nPagination/reka-ui.d.ts

@@ -0,0 +1,2 @@
+export { PaginationEllipsis, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, useForwardProps, } from 'reka-ui';
+export type { PaginationRootEmits, PaginationRootProps } from 'reka-ui';

package/dist/components/N8nSelect/Select.vue.d.ts

@@ -101,6 +101,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     validateEvent: {
         type: PropType<boolean | undefined>;
     };
+    valueKey: {
+        type: PropType<string | undefined>;
+    };
     automaticDropdown: {
         type: PropType<boolean | undefined>;
     };
@@ -119,9 +122,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     reserveKeyword: {
         type: PropType<boolean | undefined>;
     };
-    valueKey: {
-        type: PropType<string | undefined>;
-    };
     collapseTags: {
         type: PropType<boolean | undefined>;
     };
@@ -233,6 +233,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     validateEvent: {
         type: PropType<boolean | undefined>;
     };
+    valueKey: {
+        type: PropType<string | undefined>;
+    };
     automaticDropdown: {
         type: PropType<boolean | undefined>;
     };
@@ -251,9 +254,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     reserveKeyword: {
         type: PropType<boolean | undefined>;
     };
-    valueKey: {
-        type: PropType<string | undefined>;
-    };
     collapseTags: {
         type: PropType<boolean | undefined>;
     };
@@ -285,8 +285,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     disabled: boolean;
     size: "small" | "mini" | "medium" | "large" | "xlarge";
     loading: boolean;
-    filterable: boolean;
     multiple: boolean;
+    filterable: boolean;
     multipleLimit: number;
     defaultFirstOption: boolean;
     popperAppendToBody: boolean;

package/dist/components/N8nToggle/Toggle.vue.d.ts

@@ -5,6 +5,7 @@ export interface ToggleProps extends Pick<ButtonProps, 'variant' | 'size' | 'dis
     modelValue?: boolean | null;
     value?: AcceptableValue;
     label: string;
+    showTooltip?: boolean;
     icon?: IconName;
     name?: string;
     required?: boolean;
@@ -14,6 +15,8 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
         default?(_: {}): any;
+        default?(_: {}): any;
+        default?(_: {}): any;
     };
     refs: {};
     rootEl: any;
@@ -27,6 +30,7 @@ declare const __VLS_component: import('vue').DefineComponent<ToggleProps, {}, {}
     disabled: boolean;
     size: import('../..').ButtonSize;
     variant: import('../..').ButtonVariant | import('../..').LegacyButtonVariant;
+    showTooltip: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/css/_tokens.scss

@@ -247,8 +247,10 @@
 	--tag--padding: 0 var(--spacing--4xs);
 	--tag--color--background: var(--color--neutral-125);
 	--tag--color--background--hover: var(--color--neutral-150);
+	--tag--color--background--active: var(--color--neutral-200);
 	--tag--border-color: var(--color--neutral-150);
 	--tag--border-color--hover: var(--color--neutral-200);
+	--tag--border-color--active: var(--color--neutral-250);
 	--tag--radius: var(--radius);
 	--tag--color--text: var(--color--text);
 	--tag--font-size: var(--font-size--2xs);
@@ -877,8 +879,10 @@
 	// Tag
 	--tag--color--background: var(--color--neutral-700);
 	--tag--color--background--hover: var(--color--neutral-600);
+	--tag--color--background--active: var(--color--neutral-500);
 	--tag--border-color: var(--color--neutral-800);
 	--tag--border-color--hover: var(--color--neutral-700);
+	--tag--border-color--active: var(--color--neutral-600);
 	--tag--color--text: var(--color--text--shade-1);
 
 	// Variables

package/dist/css/common/var.scss

@@ -699,28 +699,6 @@ $table-row-striped-background-color: var(--table--row--color--background--even);
 $table-header-background-color: $color-white;
 $table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
 
-/* Pagination
--------------------------- */
-/// fontSize||Font|1
-$pagination-font-size: var(--font-size--2xs);
-/// color||Color|0
-$pagination-background-color: $color-white;
-/// color||Color|0
-$pagination-font-color: var(--color--text--shade-1);
-$pagination-border-radius: 3px;
-/// color||Color|0
-$pagination-button-color: var(--color--text--shade-1);
-/// height||Other|4
-$pagination-button-width: 35.5px;
-/// height||Other|4
-$pagination-button-height: 28px;
-/// color||Color|0
-$pagination-button-disabled-color: var(--color--text--tint-2);
-/// color||Color|0
-$pagination-button-disabled-background-color: $color-white;
-/// color||Color|0
-$pagination-hover-color: var(--color--primary);
-
 /* Popup
 -------------------------- */
 /// color||Color|0

package/dist/css/dialog.scss

@@ -1,4 +1,5 @@
 @use 'mixins/mixins';
+@use 'mixins/motion';
 @use 'mixins/utils';
 @use './common/var';
 @use 'common/popup';
@@ -113,31 +114,15 @@
 }
 
 .dialog-fade-enter-active {
-	animation: dialog-fade-in 0.3s;
-}
+	--animation--fade-in-down--duration: 0.3s;
+	--animation--fade-in-down--translate: 20px;
 
-.dialog-fade-leave-active {
-	animation: dialog-fade-out 0.3s;
+	@include motion.fade-in-down;
 }
 
-@keyframes dialog-fade-in {
-	0% {
-		transform: translate3d(0, -20px, 0);
-		opacity: 0;
-	}
-	100% {
-		transform: translate3d(0, 0, 0);
-		opacity: 1;
-	}
-}
+.dialog-fade-leave-active {
+	--animation--fade-out-up--duration: 0.3s;
+	--animation--fade-out-up--translate: 20px;
 
-@keyframes dialog-fade-out {
-	0% {
-		transform: translate3d(0, 0, 0);
-		opacity: 1;
-	}
-	100% {
-		transform: translate3d(0, -20px, 0);
-		opacity: 0;
-	}
+	@include motion.fade-out-up;
 }

package/dist/css/index.scss

@@ -4,7 +4,6 @@
 @use './base.scss';
 @use './fonts.scss';
 @use './markdown.scss';
-@use './pagination.scss';
 @use './dialog.scss';
 @use './dropdown.scss';
 @use './menu.scss';

package/dist/css/loading.scss

@@ -1,4 +1,5 @@
 @use 'mixins/mixins';
+@use 'mixins/motion';
 @use './common/var';
 
 @include mixins.b(loading-parent) {
@@ -22,6 +23,8 @@
 	left: 0;
 	transition: opacity 0.3s;
 
+	@include motion.reduced-motion;
+
 	@include mixins.when(fullscreen) {
 		position: fixed;
 
@@ -55,14 +58,19 @@
 	}
 
 	.circular {
+		--animation--spin--duration: 2s;
+
 		max-height: 100%;
 		height: var.$loading-spinner-size;
 		width: var.$loading-spinner-size;
-		animation: loading-rotate 2s linear infinite;
+
+		@include motion.spin;
 	}
 
 	.path {
 		animation: loading-dash 1.5s ease-in-out infinite;
+
+		@include motion.reduced-motion;
 		stroke-dasharray: 90, 150;
 		stroke-dashoffset: 0;
 		stroke-width: 2;
@@ -80,12 +88,6 @@
 	opacity: 0;
 }
 
-@keyframes loading-rotate {
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
 @keyframes loading-dash {
 	0% {
 		stroke-dasharray: 1, 200;

package/dist/css/message-box.scss

@@ -1,4 +1,5 @@
 @use 'mixins/mixins';
+@use 'mixins/motion';
 @use './common/var';
 @use 'common/popup';
 @use 'input';
@@ -323,31 +324,15 @@
 }
 
 .msgbox-fade-enter-active {
-	animation: msgbox-fade-in 0.3s;
-}
+	--animation--fade-in-down--duration: 0.3s;
+	--animation--fade-in-down--translate: 20px;
 
-.msgbox-fade-leave-active {
-	animation: msgbox-fade-out 0.3s;
+	@include motion.fade-in-down;
 }
 
-@keyframes msgbox-fade-in {
-	0% {
-		transform: translate3d(0, -20px, 0);
-		opacity: 0;
-	}
-	100% {
-		transform: translate3d(0, 0, 0);
-		opacity: 1;
-	}
-}
+.msgbox-fade-leave-active {
+	--animation--fade-out-up--duration: 0.3s;
+	--animation--fade-out-up--translate: 20px;
 
-@keyframes msgbox-fade-out {
-	0% {
-		transform: translate3d(0, 0, 0);
-		opacity: 1;
-	}
-	100% {
-		transform: translate3d(0, -20px, 0);
-		opacity: 0;
-	}
+	@include motion.fade-out-up;
 }

package/dist/css/mixins/_floating-item.scss

@@ -0,0 +1,13 @@
+@mixin floating-item {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--2xs);
+	position: relative;
+	user-select: none;
+	outline: none;
+	font-size: var(--font-size--sm);
+	line-height: var(--line-height--sm);
+	min-height: var(--spacing--xl);
+	padding: var(--spacing--2xs);
+	border-radius: var(--radius--2xs);
+}

package/dist/css/mixins/_popover.scss

@@ -0,0 +1,80 @@
+@use 'motion';
+@use '../common/var';
+
+@mixin popover-surface($z-index: var.$index-popper, $slide-distance: var(--spacing--5xs)) {
+	--n8n--popover--offset--slide-distance: #{$slide-distance};
+	--n8n--popover--offset--slide-x: 0;
+	--n8n--popover--offset--slide-y: 0;
+	--n8n--popover--offset--origin-x: center;
+	--n8n--popover--offset--origin-y: center;
+	--animation--popover-in--translate-x: var(--n8n--popover--offset--slide-x);
+	--animation--popover-in--translate-y: var(--n8n--popover--offset--slide-y);
+
+	overflow: hidden;
+	border-radius: var(--popover-content--radius, var(--radius--xs));
+	background-color: var(--background--surface);
+	--shadow-color--outline: var(--border-color);
+	box-shadow:
+		var(--shadow--md),
+		inset var(--shadow--outline);
+	will-change: transform, opacity;
+	transform-origin: var(--n8n--popover--offset--origin-x) var(--n8n--popover--offset--origin-y);
+
+	@if $z-index {
+		z-index: $z-index;
+	}
+
+	&[data-state='open'] {
+		@include motion.popover-in;
+	}
+
+	&[data-state='closed'] {
+		display: none;
+	}
+}
+
+@mixin popover-placement-offsets() {
+	&[data-state='open'][data-side='top'] {
+		--n8n--popover--offset--slide-y: calc(-1 * var(--n8n--popover--offset--slide-distance));
+		--n8n--popover--offset--origin-y: bottom;
+	}
+
+	&[data-state='open'][data-side='right'] {
+		--n8n--popover--offset--slide-x: var(--n8n--popover--offset--slide-distance);
+		--n8n--popover--offset--origin-x: left;
+	}
+
+	&[data-state='open'][data-side='bottom'] {
+		--n8n--popover--offset--slide-y: var(--n8n--popover--offset--slide-distance);
+		--n8n--popover--offset--origin-y: top;
+	}
+
+	&[data-state='open'][data-side='left'] {
+		--n8n--popover--offset--slide-x: calc(-1 * var(--n8n--popover--offset--slide-distance));
+		--n8n--popover--offset--origin-x: right;
+	}
+
+	&[data-state='open'][data-side='top'][data-align='start'],
+	&[data-state='open'][data-side='bottom'][data-align='start'] {
+		--n8n--popover--offset--slide-x: calc(-1 * var(--n8n--popover--offset--slide-distance));
+		--n8n--popover--offset--origin-x: left;
+	}
+
+	&[data-state='open'][data-side='top'][data-align='end'],
+	&[data-state='open'][data-side='bottom'][data-align='end'] {
+		--n8n--popover--offset--slide-x: var(--n8n--popover--offset--slide-distance);
+		--n8n--popover--offset--origin-x: right;
+	}
+
+	&[data-state='open'][data-side='left'][data-align='start'],
+	&[data-state='open'][data-side='right'][data-align='start'] {
+		--n8n--popover--offset--slide-y: calc(-1 * var(--n8n--popover--offset--slide-distance));
+		--n8n--popover--offset--origin-y: top;
+	}
+
+	&[data-state='open'][data-side='left'][data-align='end'],
+	&[data-state='open'][data-side='right'][data-align='end'] {
+		--n8n--popover--offset--slide-y: var(--n8n--popover--offset--slide-distance);
+		--n8n--popover--offset--origin-y: bottom;
+	}
+}

package/dist/css/mixins/index.scss

@@ -1,9 +1,11 @@
 @forward 'breakpoints';
 @forward 'button' hide $B, $E;
 @forward 'config';
+@forward 'floating-item';
 @forward 'focus';
 @forward 'function';
 @forward 'input';
 @forward 'markdown';
 @forward 'mixins';
+@forward 'popover';
 @forward 'utils';

package/dist/css/mixins/mixins.scss

@@ -74,6 +74,36 @@ $E: null;
 	}
 }
 
+@mixin scroll-mask($edge, $size: var(--spacing--sm)) {
+	@if $edge == top {
+		mask-image: linear-gradient(to bottom, transparent 0, black $size, black 100%);
+	} @else if $edge == bottom {
+		mask-image: linear-gradient(to bottom, black 0, black calc(100% - $size), transparent 100%);
+	} @else if $edge == left {
+		mask-image: linear-gradient(to right, transparent 0, black $size, black 100%);
+	} @else if $edge == right {
+		mask-image: linear-gradient(to right, black 0, black calc(100% - $size), transparent 100%);
+	} @else if $edge == y {
+		mask-image: linear-gradient(
+			to bottom,
+			transparent 0,
+			black $size,
+			black calc(100% - $size),
+			transparent 100%
+		);
+	} @else if $edge == x {
+		mask-image: linear-gradient(
+			to right,
+			transparent 0,
+			black $size,
+			black calc(100% - $size),
+			transparent 100%
+		);
+	} @else {
+		@error "Unsupported scroll mask edge: #{$edge}";
+	}
+}
+
 /* Placeholder
  -------------------------- */
 @mixin placeholder {