@ebrains/components 3.0.0 → 3.2.0

package/dist/types/components/eds-input-elements/eds-input/eds-input.d.ts

@@ -23,6 +23,13 @@ export declare class EdsInput {
     min?: number;
     max?: number;
     step?: number;
+    /**
+     * Explicit tabindex for the native input. Radio/checkbox groups
+     * inside the `eds-input-field` shadow root (delegatesFocus) get
+     * skipped by sequential keyboard navigation unless each input is
+     * explicitly in the tab order.
+     */
+    inputTabIndex?: number;
     innerVal: string | number;
     maxLengthReached: boolean;
     /**

package/dist/types/components/eds-input-elements/eds-input-search/eds-input-search.stories.d.ts

@@ -0,0 +1,36 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        label: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        value: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        required: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        label: string;
+        placeholder: string;
+        disabled: boolean;
+        required: boolean;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};

package/dist/types/components/eds-input-field/eds-input-field.stories.d.ts

@@ -2,103 +2,162 @@ declare const _default: {
     title: string;
     component: string;
     argTypes: {
-        name: {
+        type: {
             control: string;
+            options: string[];
             description: string;
+            table: {
+                category: string;
+            };
         };
-        inputId: {
+        name: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        placeholder: {
+        label: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        disabled: {
+        placeholder: {
             control: string;
             description: string;
-        };
-        type: {
-            control: string;
-            options: string[];
-            description: string;
+            table: {
+                category: string;
+            };
         };
         required: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        label: {
-            control: string;
-            description: string;
-        };
-        hint: {
+        disabled: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        icon: {
+        error: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        link: {
+        errorMessage: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        min: {
+        checked: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
+            if: {
+                arg: string;
+                eq: string;
+            };
         };
-        max: {
+        hint: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        step: {
+        message: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        message: {
-            control: string;
+        icon: {
+            control: {
+                type: string;
+            };
+            options: string[];
             description: string;
+            table: {
+                category: string;
+            };
         };
-        error: {
+        link: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        checked: {
+        maxLength: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        errorMessage: {
+        min: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        value: {
+        max: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        maxLength: {
+        step: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
         options: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+    args: {
+        name: string;
+        placeholder: string;
+        type: string;
+        required: boolean;
+        label: string;
+        hint: string;
+        message: string;
+        icon: string;
+        link: {
+            url: string;
+            label: string;
         };
     };
 };
 export default _default;
-export declare const BasicTextInput: any;
-export declare const PasswordInputWithHint: any;
-export declare const TextInputWithError: any;
+export declare const Default: any;
 export declare const CheckboxGroup: any;
 export declare const RadioButtonGroup: any;
 export declare const SelectDropdown: any;
 export declare const FileUpload: any;
-export declare const InputWithIconAndLink: any;
-export declare const NumberInputWithMaxLength: any;
-export declare const DisabledInput: any;
-export declare const InputWithMessage: any;
-export declare const InputWithMaxLength: any;
-export declare const InputWithValue: any;
-export declare const CheckboxSingle: any;
-export declare const RadioButtonSingle: any;
-export declare const InputWithCustomIcon: any;
+export declare const Dropzone: any;
+export declare const NumberInput: any;
+export declare const RangeSlider: any;

package/dist/types/components/eds-link/eds-link.stories.d.ts

@@ -12,7 +12,10 @@ declare const _default: {
             description: string;
         };
         icon: {
-            control: string;
+            control: {
+                type: string;
+            };
+            options: string[];
             description: string;
         };
         iconSmall: {
@@ -24,6 +27,10 @@ declare const _default: {
             options: string[];
             description: string;
         };
+        pill: {
+            control: string;
+            description: string;
+        };
         external: {
             control: string;
             description: string;
@@ -40,10 +47,6 @@ declare const _default: {
             control: string;
             description: string;
         };
-        ariaLabel: {
-            control: string;
-            description: string;
-        };
         download: {
             control: string;
             description: string;
@@ -55,11 +58,11 @@ declare const _default: {
         size: string;
         icon: string;
         iconSmall: boolean;
+        pill: boolean;
         external: boolean;
         current: boolean;
         disabled: boolean;
         url: string;
-        ariaLabel: string;
         download: boolean;
     };
 };

package/dist/types/components/eds-logo/eds-logo.d.ts

@@ -1,19 +1,18 @@
 /**
- * `EdsLogo` is a logo component designed to display a clickable logo that can link to a specified URL.
- *
- * Key Features:
- * - Supports various logo styles and orientations.
- * - Emits a custom `matomoEvent` for tracking click interactions.
+ * `EdsLogo` renders the clickable EBRAINS brand mark (inline SVG).
  *
  * Props:
- * - `href` (string): The URL to navigate to when the logo is clicked (defaults to the root path `/`).
- * - `orientation` (string): The orientation of the logo (`horizontal` or `vertical`).
- * - `type` (string): The style of the logo (`color`, `black`, `color-white`, `white`).
+ * - `variant` (attribute `type`): `'positive'` (dark logo for light
+ *   backgrounds) or `'negative'` (light logo for dark backgrounds).
+ * - `href`: where the logo links to (defaults to `/`). The logo is the
+ *   click-to-home affordance in eds-header, eds-fullscreen-menu and the
+ *   eds-form brand hero.
  *
- * Events:
- * - `matomoEvent`: Emitted when the logo is clicked, carrying metadata for analytics tracking, including the event `category`, `tag`, `name`, and `action`.
+ * Clicks emit an analytics event (category/tag/name/action).
  *
- * This component is ideal for navigation and branding, with options for style customization and interaction tracking.
+ * NOTE: the SVG has a viewBox but no intrinsic width, so the host needs a
+ * sized block parent to render (e.g. eds-header wraps it in a fixed-width
+ * container).
  */
 export declare class EdsLogo {
     /**
@@ -22,34 +21,18 @@ export declare class EdsLogo {
      * Defaults to the root path ('/').
      */
     href: string;
-    /**
-     * The orientation of the logo to display.
-     * - `"horizontal"` displays the logo horizontally.
-     * - `"vertical"` displays the logo vertically.
-     * */
-    orientation: 'horizontal' | 'vertical';
     /**
      * The visual variant of the logo.
      * `'positive'` for dark logo on light backgrounds, `'negative'` for light logo on dark backgrounds.
      */
     variant: 'positive' | 'negative';
-    label: string;
     /**
      * Reference to the host element of this component.
      */
     el: HTMLElement;
     /**
-     * Handles the click event on the logo link.
-     * Emits a `matomoEvent` for analytics tracking with details about the interaction.
-     * - `category`: Component type (e.g., "ui-component").
-     * - `tag`: The HTML tag name of the component.
-     * - `name`: Event name, set as "logo".
-     * - `action`: The action, set as "click".
+     * Emits an analytics event when the logo link is clicked.
      */
     private handleClick;
-    /**
-     * Determines the appropriate SVG content based on the `orientation` and `type` props.
-     */
-    private getLogo;
     render(): any;
 }

package/dist/types/components/eds-logo/eds-logo.stories.d.ts

@@ -1,7 +1,27 @@
 declare const _default: {
     title: string;
     component: string;
-    argTypes: {};
+    argTypes: {
+        variant: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        href: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        variant: string;
+        href: string;
+    };
 };
 export default _default;
-export declare const Default: any;
+export declare const Default: {
+    render: (args: any) => string;
+};
+/** Both variants side by side, on their intended surfaces. */
+export declare const Variants: {
+    render: () => string;
+};

package/dist/types/components/eds-steps/eds-steps.d.ts

@@ -37,6 +37,11 @@ export declare class EdsSteps {
     handleDisableNextChange(newValue: boolean | boolean[] | string): void;
     /** Index of the currently active step (linear mode). Starts at `0`. */
     activeStep: number;
+    /** Tracks small screens so nav buttons shrink and use compact icons. */
+    isMobile: boolean;
+    private onResize;
+    /** Nav button size: comfortable on desktop, compact on mobile. */
+    private get navBtnSize();
     step: EventEmitter<number>;
     finished: EventEmitter<void>;
     next: EventEmitter<number>;
@@ -44,6 +49,8 @@ export declare class EdsSteps {
     /** Reference to the host element */
     el: HTMLElement;
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     activeStepChanged(newValue: number): void;
     emitContext(linkElement: HTMLElement): void;

package/dist/types/components/eds-steps-v2/eds-steps-v2.d.ts

@@ -26,6 +26,12 @@ export declare class EdsStepsV2 {
     finishLabel: string;
     /** Show or hide the finish button on the last step */
     showFinish: boolean;
+    /**
+     * Whether the stepper draws its own bordered card. Default true. Set to false
+     * when the host already provides the card chrome (e.g. a multi-step form whose
+     * form-style border lives on an outer wrapper) to avoid a double border.
+     */
+    card: boolean;
     /**
      * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
      * @attr disable-next
@@ -35,6 +41,11 @@ export declare class EdsStepsV2 {
     headingLevel: 'h3' | 'h4' | 'h5';
     /** Current step index (linear mode) */
     activeStep: number;
+    /** Tracks small screens so the nav buttons shrink (large is chunky on mobile). */
+    isMobile: boolean;
+    private onResize;
+    /** Nav button size: comfortable on desktop, compact on mobile. */
+    private get navBtnSize();
     /** Fired whenever the active step changes. Payload: current step index. */
     step: EventEmitter<number>;
     /** Fired when user clicks Finish on the last step. */
@@ -48,9 +59,11 @@ export declare class EdsStepsV2 {
     handleDisableNextChange(newValue: boolean | boolean[] | string): void;
     activeStepChanged(newValue: number): void;
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     emitContext(linkElement: HTMLElement): void;
-    articleClasses(): string;
+    articleClasses(): "border-softer relative rounded-lg border-2" | "relative";
     private get parsedSteps();
     private isStepDisabled;
     private isNextDisabledFor;

package/dist/types/components/eds-steps-v2/eds-steps-v2.stories.d.ts

@@ -5,10 +5,6 @@ declare const _default: {
         steps: {
             control: string;
             description: string;
-            defaultValue: {
-                title: string;
-                content: string;
-            }[];
         };
         orientation: {
             control: {
@@ -21,16 +17,27 @@ declare const _default: {
             control: string;
             options: string[];
             description: string;
-            defaultValue: string;
+        };
+        theme: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        card: {
+            control: string;
+            description: string;
+        };
+        disableNext: {
+            control: string;
+            description: string;
         };
         imageSrc: {
             control: string;
             description: string;
         };
-        bg: {
+        imageWidth: {
             control: string;
             description: string;
-            defaultValue: boolean;
         };
         message: {
             control: string;
@@ -43,7 +50,6 @@ declare const _default: {
             };
             options: string[];
             description: string;
-            defaultValue: string;
         };
         nextLabel: {
             control: string;
@@ -69,8 +75,11 @@ declare const _default: {
         }[];
         orientation: string;
         type: string;
+        theme: string;
+        card: boolean;
+        disableNext: boolean;
         imageSrc: string;
-        bg: boolean;
+        imageWidth: any;
         message: string;
         headingLevel: string;
         nextLabel: string;
@@ -84,3 +93,25 @@ export declare const Static: any;
 export declare const WithMessage: any;
 export declare const Linear: any;
 export declare const LinearHorizontal: any;
+export declare const BrandTheme: {
+    ({ steps, disableNext }: {
+        steps: any;
+        disableNext: any;
+    }): import("lit-html").TemplateResult<1>;
+    storyName: string;
+    args: {
+        steps: {
+            title: string;
+            content: string;
+        }[];
+        disableNext: boolean;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const DisabledNext: any;

package/dist/types/components/eds-switch/eds-switch.d.ts

@@ -17,9 +17,13 @@ export declare class EdsSwitch {
      */
     labelOff: string;
     /**
-     * Variant of the switch: 'toggle' (default) or 'segmented' (pill-style buttons)
+     * Variant of the switch:
+     * - 'toggle' (default): the classic on/off switch
+     * - 'segmented': pill-style buttons — light container, green active pill
+     * - 'segmented-dark': pill-style buttons — white container with a hairline
+     *   border and a dark (brand-black) active pill
      */
-    variant: 'toggle' | 'segmented';
+    variant: 'toggle' | 'segmented' | 'segmented-dark';
     /**
      * Emitted when the switch is toggled.
      */

package/dist/types/components/eds-switch/eds-switch.stories.d.ts

@@ -72,6 +72,14 @@ export declare const SegmentedChecked: {
         labelOff: string;
     };
 };
+export declare const SegmentedDark: {
+    render: (args: any) => string;
+    args: {
+        labelOn: string;
+        labelOff: string;
+        checked: boolean;
+    };
+};
 export declare const SegmentedDisabled: {
     render: (args: any) => string;
     args: {

package/dist/types/components/eds-table/eds-table.d.ts

@@ -81,13 +81,6 @@ export declare class EdsTable {
     /** Enable or disable search input for filtering */
     searchEnabled: boolean;
     hostWidth?: string;
-    /**
-     * Optional property to control the column sizing mode.
-     * - 'default' uses containerWidth / visibleColumns.
-     * - 'medium' divides that result by 2.
-     * - 'large' divides that result by 4.
-     */
-    columnSize?: 'default' | 'medium' | 'large';
     /**
      * Array of actions to render in each row. Can be passed as a JSON string or as a `TableAction[]`.
      *
@@ -118,12 +111,15 @@ export declare class EdsTable {
     /** Enable or disable column sorting */
     sortingEnabled: boolean;
     /**
-     * Theme for table styling:
-     * - 'default': Simple rows with no background
-     * - 'color': Alternating row colors
-     * - 'brand': Modern brand styling with hover effects and green accents
+     * Theme for table styling.
+     *
+     * The 'default' (no background) and 'color' (alternating rows) themes are
+     * DISABLED — the table now always renders the EBRAINS 'brand' theme (modern
+     * styling, hover, green accents). The prop is kept for API compatibility but
+     * is coerced to 'brand' in componentWillLoad(), so any value a consumer
+     * passes is ignored.
      */
-    theme: 'default' | 'color' | 'brand';
+    theme: 'brand';
     /**
      * View mode for displaying data:
      * - 'table': Traditional table layout (default)
@@ -191,8 +187,6 @@ export declare class EdsTable {
     private emitAction;
     private shouldEnablePagination;
     private updateColumns;
-    private getVisibleColumnsCount;
-    private divisionFactor;
     private capitalize;
     private onActionKeyDown;
     private handleSort;