@n8n/design-system 2.41.3 → 2.42.1

package/dist/components/N8nActionToggle/ActionToggle.types.d.ts

@@ -1,6 +1,8 @@
 export type ActionToggleItem<T extends string = string> = {
     label: string;
     disabled?: boolean;
+    divided?: boolean;
+    destructive?: boolean;
     type?: 'external-link';
     tooltip?: string;
 } & ({

package/dist/components/N8nApprovalCard/ApprovalCard.vue.d.ts

@@ -0,0 +1,51 @@
+import { IconName } from '../N8nIcon';
+export interface ApprovalOption {
+    key: string;
+    icon: IconName;
+    label: string;
+    suffix?: string;
+    destructive?: boolean;
+    withArrow?: boolean;
+    testId?: string;
+}
+export interface ApprovalCardLabels {
+    alwaysAllow: string;
+    alwaysAllowSuffix: string;
+    allowOnce: string;
+    deny: string;
+    allowed: string;
+    denied: string;
+    args?: string;
+}
+interface ApprovalCardProps {
+    title: string;
+    titleSize?: 'medium' | 'large';
+    description?: string;
+    args?: unknown;
+    descriptionLabel?: string;
+    options?: readonly ApprovalOption[];
+    labels?: ApprovalCardLabels;
+    supportsSessionApproval?: boolean;
+    destructive?: boolean;
+    decision?: 'allowed' | 'denied';
+    disabled?: boolean;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    description?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<ApprovalCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (key: string) => any;
+}, string, import('vue').PublicProps, Readonly<ApprovalCardProps> & Readonly<{
+    onSelect?: ((key: string) => any) | undefined;
+}>, {
+    titleSize: "medium" | "large";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { default } from './ApprovalCard.vue';
+export type { ApprovalCardLabels, ApprovalOption } from './ApprovalCard.vue';

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

@@ -238,6 +238,8 @@ export declare const updatedIconSet: {
     readonly telegram: string;
     readonly discord: string;
     readonly teams: string;
+    readonly azure: string;
+    readonly entra: string;
     readonly spinner: string;
     readonly 'node-dirty': string;
     readonly 'node-ellipsis': string;
@@ -457,6 +459,7 @@ export declare const updatedIconSet: {
     readonly terminal: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly 'thumbs-down': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly 'thumbs-up': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
+    readonly timer: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly 'trash-2': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly 'tree-pine': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly 'trending-down': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;

package/dist/components/N8nSettingsRowButton/SettingsRowButton.vue.d.ts

@@ -0,0 +1,19 @@
+export interface SettingsRowButtonProps {
+    disabled?: boolean;
+    expanded?: boolean;
+}
+type __VLS_Slots = {
+    default: () => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<SettingsRowButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SettingsRowButtonProps> & Readonly<{}>, {
+    disabled: boolean;
+    expanded: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { default } from './SettingsRowButton.vue';
+export type { SettingsRowButtonProps } from './SettingsRowButton.vue';

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export { default as N8nAiModelSelectorDropdown } from './N8nAiModelSelectorDropd
 export type { AiModelSelectorMenuItem, AiModelSelectorMenuItemData, } from './N8nAiModelSelectorDropdown';
 export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuSlots, DropdownMenuItemSlots, DropdownMenuEmits, DropdownMenuExposed, DropdownMenuSearchMode, DropdownMenuTrigger, DropdownMenuPlacement, } from './N8nDropdownMenu/DropdownMenu.types';
 export { default as N8nAlert } from './N8nAlert';
+export { default as N8nApprovalCard, type ApprovalCardLabels, type ApprovalOption, } from './N8nApprovalCard';
 export { default as N8nAvatar } from './N8nAvatar';
 export { default as N8nBadge } from './N8nBadge';
 export { BADGE_SIZE, BADGE_VARIANT } from './N8nBadge/Badge.type';
@@ -79,6 +80,8 @@ export { default as N8nSettingsPageHeader } from './N8nSettingsPageHeader';
 export type { SettingsPageHeaderProps } from './N8nSettingsPageHeader';
 export { default as N8nSettingsRow } from './N8nSettingsRow';
 export type { SettingsRowProps, SettingsRowLayout } from './N8nSettingsRow';
+export { default as N8nSettingsRowButton } from './N8nSettingsRowButton';
+export type { SettingsRowButtonProps } from './N8nSettingsRowButton';
 export { default as N8nSettingsRowConfigure } from './N8nSettingsRowConfigure';
 export type { SettingsRowConfigureProps } from './N8nSettingsRowConfigure';
 export { default as N8nSettingsRowGroup } from './N8nSettingsRowGroup';

package/dist/css/_primitives.scss

@@ -319,23 +319,30 @@
 	--shadow--xl: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
 }
 
-/** Redefine this primitive overrides here because Lightning CSS doesnt like light-dark in .scss files **/
+/** Redefine these primitives because Lightning CSS does not support light-dark() in SCSS. **/
 @mixin dark-theme-overrides {
 	--shadow-color: var(--color--black-alpha-250);
 	--shadow-color--outline: var(--color--white-alpha-100);
+
+	/** Recompute these values in the scope that defines the dark shadow colors. **/
+	--shadow--outline: 0 0 0 1px var(--shadow-color--outline);
+	--shadow--2xs: 0 1px var(--shadow-color);
+	--shadow--xs: 0 1px 3px -1px var(--shadow-color);
+	--shadow--sm: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
+	--shadow--md: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
+	--shadow--xl: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
 }
 
 :root {
 	@include primitives;
+}
 
-	/** Make sure that media query preceeds [data-theme] as MacOS theme can override attribute specificity **/
-	@media (prefers-color-scheme: dark) {
-		body:not([data-theme]) {
-			@include dark-theme-overrides;
-		}
-	}
+body[data-theme='dark'] {
+	@include dark-theme-overrides;
+}
 
-	[data-theme='dark'] {
+@media (prefers-color-scheme: dark) {
+	body:not([data-theme]) {
 		@include dark-theme-overrides;
 	}
 }

package/dist/css/_tokens.scss

@@ -668,9 +668,9 @@
 	--background--disabled: var(--color--neutral-800);
 
 	/* stylelint-disable @n8n/css-var-naming */
-	--border-color: var(--border-color-base, var(--color--white-alpha-100));
+	--border-color: var(--border-color-base, var(--color--white-alpha-150));
 	/* stylelint-enable @n8n/css-var-naming */
-	--border-color--subtle: var(--color--white-alpha-50);
+	--border-color--subtle: var(--color--white-alpha-100);
 	--border-color--strong: var(--color--white-alpha-200);
 	--border-color--stronger: var(--color--white-alpha-400);
 

package/dist/css/mixins/_popover.scss

@@ -13,10 +13,7 @@
 	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);
+	box-shadow: var(--shadow--md), var(--shadow--outline);
 	will-change: transform, opacity;
 	transform-origin: var(--n8n--popover--offset--origin-x) var(--n8n--popover--offset--origin-y);
 

package/dist/{en-CY7wsD9g.js → en-C7o7sP3N.js}

@@ -1,6 +1,12 @@
 import { i as e } from "./plugin-DT0YTbz-.js";
 //#region src/locale/lang/en.ts
 var t = /* @__PURE__ */ e({ default: () => n }), n = {
+	"approvalCard.alwaysAllow": "Always allow",
+	"approvalCard.alwaysAllowSuffix": "during this session",
+	"approvalCard.allowOnce": "Allow once",
+	"approvalCard.deny": "Deny",
+	"approvalCard.allowed": "Allowed",
+	"approvalCard.denied": "Denied",
 	"setupPanel.label": "Workflow setup",
 	"setupPanel.back": "Back to setup checklist",
 	"setupPanel.complete": "Complete",
@@ -222,6 +228,7 @@ var t = /* @__PURE__ */ e({ default: () => n }), n = {
 	"collapsiblePanel.expand": "Expand",
 	"collapsiblePanel.dragToReorder": "Drag to reorder",
 	"collapsiblePanel.delete": "Delete",
+	"combobox.loading": "Searching",
 	"combobox.clearSelection": "Clear selection",
 	"combobox.showPopup": "Show popup",
 	"combobox.placeholder": "Select an option",
@@ -248,7 +255,7 @@ var t = /* @__PURE__ */ e({ default: () => n }), n = {
 	"markdownEditor.expand": "Expand editor",
 	"markdownEditor.collapse": "Collapse editor",
 	"markdownEditor.openExpandedView": "Expand editor",
-	"markdownEditor.closeExpandedView": "Collapse editor",
+	"markdownEditor.closeExpandedView": "Close editor",
 	"markdownEditor.expandedViewTitle": "Markdown editor",
 	"markdownEditor.linkDialogTitle": "Add link",
 	"markdownEditor.linkUrl": "Link URL",