@n8n/design-system 2.34.1 → 2.35.0

package/LICENSE_EE.md

@@ -0,0 +1,27 @@
+# The n8n Enterprise License (the “Enterprise License”)
+
+Copyright (c) 2022-present n8n GmbH.
+
+With regard to the n8n Software:
+
+This software and associated documentation files (the "Software") may only be used in production, if
+you (and any entity that you represent) hold a valid n8n Enterprise license corresponding to your
+usage. Subject to the foregoing sentence, you are free to modify this Software and publish patches
+to the Software. You agree that n8n and/or its licensors (as applicable) retain all right, title and
+interest in and to all such modifications and/or patches, and all such modifications and/or patches
+may only be used, copied, modified, displayed, distributed, or otherwise exploited with a valid n8n
+Enterprise license for the corresponding usage. Notwithstanding the foregoing, you may copy and
+modify the Software for development and testing purposes, without requiring a subscription. You
+agree that n8n and/or its licensors (as applicable) retain all right, title and interest in and to
+all such modifications. You are not granted any other rights beyond what is expressly stated herein.
+Subject to the foregoing, it is forbidden to copy, merge, publish, distribute, sublicense, and/or
+sell the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+For all third party components incorporated into the n8n Software, those components are licensed
+under the original license provided by the owner of the applicable component.

package/dist/components/AskAssistantChat/AskAssistantChat.vue.d.ts

@@ -287,7 +287,7 @@ declare function __VLS_template(): {
                 onSubmit?: (() => any) | undefined;
                 "onUpgrade-click"?: (() => any) | undefined;
             }>, {
-                focusInput: () => void;
+                focusInput: (options?: FocusOptions) => void;
             }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
                 focus: (event: FocusEvent) => any;
                 stop: () => any;
@@ -367,7 +367,7 @@ declare function __VLS_template(): {
             onSubmit?: (() => any) | undefined;
             "onUpgrade-click"?: (() => any) | undefined;
         }>, "focusInput" | ("disabled" | "placeholder" | "modelValue" | "autosize" | "autofocus" | "streaming" | "maxLength" | "sendButtonTestId" | "stopButtonTestId" | "maxLinesBeforeScroll" | "disabledTooltip" | "creditsQuota" | "creditsRemaining" | "showAskOwnerTooltip" | "refocusAfterSend" | "buttonLabel" | "layout" | "submitDisabled")> & import('vue').ShallowUnwrapRef<{
-            focusInput: () => void;
+            focusInput: (options?: FocusOptions) => void;
         }> & {} & import('vue').ComponentCustomProperties & {} & {
             $slots: {
                 leading?(_: {}): any;
@@ -631,7 +631,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
             onSubmit?: (() => any) | undefined;
             "onUpgrade-click"?: (() => any) | undefined;
         }>, {
-            focusInput: () => void;
+            focusInput: (options?: FocusOptions) => void;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
             focus: (event: FocusEvent) => any;
             stop: () => any;
@@ -711,7 +711,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
         onSubmit?: (() => any) | undefined;
         "onUpgrade-click"?: (() => any) | undefined;
     }>, "focusInput" | ("disabled" | "placeholder" | "modelValue" | "autosize" | "autofocus" | "streaming" | "maxLength" | "sendButtonTestId" | "stopButtonTestId" | "maxLinesBeforeScroll" | "disabledTooltip" | "creditsQuota" | "creditsRemaining" | "showAskOwnerTooltip" | "refocusAfterSend" | "buttonLabel" | "layout" | "submitDisabled")> & import('vue').ShallowUnwrapRef<{
-        focusInput: () => void;
+        focusInput: (options?: FocusOptions) => void;
     }> & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
             leading?(_: {}): any;

package/dist/components/N8nActionDropdown/ActionDropdown.types.d.ts

@@ -5,6 +5,7 @@ export interface ActionDropdownProps<T extends string = string> {
     placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
     activatorIcon?: IconName;
     activatorSize?: ButtonSize;
+    activatorIconSize?: IconSize;
     iconSize?: IconSize;
     trigger?: 'click' | 'hover';
     teleported?: boolean;

package/dist/components/N8nActionPill/ActionPill.vue.d.ts

@@ -3,7 +3,7 @@ type __VLS_Props = {
     hoverText?: string;
     clickable?: boolean;
     size?: 'small' | 'medium';
-    type?: 'default' | 'danger';
+    type?: 'default' | 'danger' | 'info';
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -21,7 +21,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
     text: string;
-    type: "default" | "danger";
+    type: "default" | "danger" | "info";
     size: "small" | "medium";
     hoverText: string;
     clickable: boolean;

package/dist/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.types.d.ts

@@ -3,7 +3,7 @@ export interface AiModelSelectorMenuItemData {
     badgeLabel?: string;
     actionPill?: {
         text: string;
-        type?: 'default' | 'danger';
+        type?: 'default' | 'danger' | 'info';
     };
     description?: string;
     descriptionTooltipTeleported?: boolean;

package/dist/components/N8nChatInput/ChatInput.vue.d.ts

@@ -21,7 +21,7 @@ export interface N8nChatInputProps {
     sendButtonTestId?: string;
     stopButtonTestId?: string;
 }
-declare function focusInput(): void;
+declare function focusInput(options?: FocusOptions): void;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {

package/dist/components/N8nDialog/Dialog.vue.d.ts

@@ -12,6 +12,7 @@ export interface DialogProps {
     ariaDescription?: string;
     header?: string;
     description?: string;
+    stacked?: boolean;
 }
 export interface DialogEmits {
     escapeKeyDown: [event: KeyboardEvent];
@@ -46,6 +47,7 @@ declare const __VLS_component: import('vue').DefineComponent<DialogProps, {}, {}
     disableOutsidePointerEvents: boolean;
     trapFocus: boolean;
     modal: boolean;
+    stacked: boolean;
     showCloseButton: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/N8nDialog/DialogContent.vue.d.ts

@@ -7,6 +7,7 @@ export interface DialogContentProps {
     showCloseButton?: boolean;
     ariaLabel?: string;
     ariaDescription?: string;
+    stacked?: boolean;
 }
 export interface DialogContentEmits {
     escapeKeyDown: [event: KeyboardEvent];

package/dist/components/N8nDialog/DialogOverlay.vue.d.ts

@@ -1,5 +1,6 @@
 export interface DialogOverlayProps {
     forceMount?: boolean;
+    stacked?: boolean;
 }
 declare const _default: import('vue').DefineComponent<DialogOverlayProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DialogOverlayProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -404,6 +404,7 @@ export declare const updatedIconSet: {
     readonly pen: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly pencil: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly 'pencil-off': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
+    readonly 'picture-in-picture-2': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly pin: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly play: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly plug: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
@@ -474,6 +475,7 @@ export declare const updatedIconSet: {
     readonly video: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly 'volume-2': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly 'volume-x': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
+    readonly wallet: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly 'wand-sparkles': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly waypoints: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly workflow: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;

package/dist/components/N8nSegmentControl/SegmentControl.types.d.ts

@@ -0,0 +1,16 @@
+import { RadioGroupRootProps } from 'reka-ui';
+export type SegmentControlSize = 'mini' | 'small' | 'default' | 'large' | 'xlarge';
+export interface SegmentOption<Value extends string | boolean = string | boolean> {
+    label: string;
+    value: Value;
+    disabled?: boolean;
+    data?: Record<string, string | number | boolean | undefined>;
+}
+export type SegmentControlProps<Value extends string | boolean = string | boolean> = Pick<RadioGroupRootProps, 'name' | 'required' | 'loop' | 'dir'> & {
+    modelValue?: Value;
+    defaultValue?: Value;
+    options?: Array<SegmentOption<Value>>;
+    size?: SegmentControlSize;
+    disabled?: boolean;
+    squareButtons?: boolean;
+};

package/dist/components/{N8nRadioButtons/RadioButtons.vue.d.ts → N8nSegmentControl/SegmentControl.vue.d.ts}

@@ -1,14 +1,14 @@
-import { RadioButtonsProps, RadioOption } from './RadioButtons.types';
-declare const _default: <Value extends string | boolean>(__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<{
+import { SegmentControlProps, SegmentOption } from './SegmentControl.types';
+declare const _default: <Value extends string | boolean = string | boolean>(__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:modelValue"?: ((value: Value, e: MouseEvent) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & RadioButtonsProps<Value> & Partial<{}>> & import('vue').PublicProps;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & SegmentControlProps<Value> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: Readonly<{
-        option?: ((props: RadioOption<Value>) => {}) | undefined;
+        option?: (props: SegmentOption<Value>) => unknown;
     }> & {
-        option?: ((props: RadioOption<Value>) => {}) | undefined;
+        option?: (props: SegmentOption<Value>) => unknown;
     };
     emit: (evt: "update:modelValue", value: Value, e: MouseEvent) => void;
 }>) => import('vue').VNode & {

package/dist/components/{N8nRadioButtons/RadioButton.vue.d.ts → N8nSegmentControl/SegmentControlItem.vue.d.ts}

@@ -1,28 +1,22 @@
-interface RadioButtonProps {
+interface SegmentControlItemProps {
     label: string;
     value: string;
-    active?: boolean;
     disabled?: boolean;
-    size?: 'small' | 'small-medium' | 'medium';
     square?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: Readonly<{
-        default?: {};
-    }> & {
-        default?: {};
+    slots: {
+        default?(_: {}): any;
     };
     refs: {};
-    rootEl: HTMLLabelElement;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<RadioButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<RadioButtonProps> & Readonly<{}>, {
+declare const __VLS_component: import('vue').DefineComponent<SegmentControlItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SegmentControlItemProps> & Readonly<{}>, {
     square: boolean;
     disabled: boolean;
-    size: "small" | "small-medium" | "medium";
-    active: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -0,0 +1,3 @@
+import { default as N8nSegmentControl } from './SegmentControl.vue';
+export type { SegmentControlProps, SegmentControlSize, SegmentOption, } from './SegmentControl.types';
+export default N8nSegmentControl;

package/dist/components/N8nSuggestedActions/SuggestedActions.vue.d.ts

@@ -10,6 +10,7 @@ export interface SuggestedActionsProps {
     actions: SuggestedAction[];
     open: boolean;
     popoverAlignment?: 'start' | 'end' | 'center';
+    popoverSideOffset?: number;
     notice?: string;
     hideTrigger?: boolean;
 }
@@ -22,5 +23,6 @@ declare const _default: import('vue').DefineComponent<SuggestedActionsProps, {},
 }>, {
     notice: string;
     popoverAlignment: "start" | "end" | "center";
+    popoverSideOffset: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/index.d.ts

@@ -82,7 +82,8 @@ export { default as N8nChatInput, useChatInputAutoFocus, type ChatInputAutoFocus
 export { default as N8nChatMessage } from './N8nChatMessage';
 export { default as N8nPulse } from './N8nPulse';
 export { default as N8nSendStopButton } from './N8nSendStopButton';
-export { default as N8nRadioButtons } from './N8nRadioButtons';
+export { default as N8nSegmentControl } from './N8nSegmentControl';
+export type { SegmentControlProps, SegmentControlSize, SegmentOption, } from './N8nSegmentControl';
 export { default as N8nRoute } from './N8nRoute';
 export { default as N8nRecycleScroller } from './N8nRecycleScroller';
 export { default as N8nResizeWrapper } from './N8nResizeWrapper';

package/dist/css/_tokens.scss

@@ -361,6 +361,8 @@
 	--ndv--droppable-parameter--color--background--active: var(--color--green-alpha-100);
 	--ndv--back--color--text: var(--color--neutral-white);
 	--ndv--background--color: var(--color--background--light-3);
+	--ndv--header--color: var(--color--background);
+	--ndv--header--height: calc(var(--height--xl) + var(--spacing--5xs));
 
 	// Notice
 	--notice--border-color--warning: var(--color--warning--tint-1);

package/dist/css/fonts/inter.scss

@@ -0,0 +1,14 @@
+// The upright InterVariable face on its own. Standalone surfaces that render no
+// italic or monospace text pull this instead of `../fonts.scss`, which also declares
+// the Inter italic and CommitMono faces and would ship two font files they never use.
+//
+// `dist/css/fonts/` sits three levels below the package root exactly like
+// `src/css/fonts/`, so the relative `url()` below resolves the same inside the
+// monorepo and from a published tarball.
+@font-face {
+	font-family: InterVariable;
+	font-style: normal;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url('../../../assets/fonts/InterVariable.woff2') format('woff2');
+}

package/dist/css/fonts.scss

@@ -1,12 +1,8 @@
 @use './common/var';
 
-@font-face {
-	font-family: InterVariable;
-	font-style: normal;
-	font-weight: 100 900;
-	font-display: swap;
-	src: url('../../assets/fonts/InterVariable.woff2') format('woff2');
-}
+// Emits the upright InterVariable face, which surfaces that need only that one
+// can also pull on its own. Keep this first so the declaration order is unchanged.
+@use './fonts/inter';
 
 @font-face {
 	font-family: InterVariable;

package/dist/en-CIboFQvZ.js

@@ -0,0 +1,2 @@
+import { t as e } from "./en-Dvx8tZIA.js";
+export { e as default };

package/dist/{en-BN17fhJM.js → en-Dvx8tZIA.js}

@@ -9,6 +9,8 @@ var e = {
 	"nds.userInfo.you": "(you)",
 	"nds.userSelect.selectUser": "Select User",
 	"nds.userSelect.noMatchingUsers": "No matching users",
+	"nds.inputNumber.increase": "Increase",
+	"nds.inputNumber.decrease": "Decrease",
 	"notice.showMore": "Show more",
 	"notice.showLess": "Show less",
 	"formInput.validator.fieldRequired": "This field is required",