@eui/eds-react 22.0.0-alpha.12 → 22.0.0-alpha.13

package/eds-message-box/eds-message-box.css

@@ -0,0 +1,200 @@
+/* EdsMessageBox — pure React port of the Angular eds-message-box (rendered through the shared
+ * eds-dialog-container). 1:1 translation of eds-dialog.scss (message-box-relevant branches):
+ *   :host / .eui-21 wrapper dropped (share-ready, light-DOM);
+ *   .eds-dialog--<color> variant classes -> .eds-dialog[data-color="<color>"];
+ *   .eds-dialog--no-padding -> .eds-dialog[data-no-padding];
+ *   base.media(mobile) -> the raw @media the mixin expands to (< 768px).
+ * The CDK overlay/backdrop is not available in pure React, so .eds-message-box__backdrop
+ * reproduces the overlay positioning (fixed, centered, subtle backdrop) the service provided. */
+
+/* BACKDROP / OVERLAY (was the CDK overlay + .eds-dialog__backdrop) */
+.eds-message-box__backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--eds-c-alpha-backdrop-subtle);
+}
+
+/* VARS DEFS (color variant -> header title color) */
+.eds-dialog {
+    --_color: var(--eds-c-foreground);
+}
+
+.eds-dialog[data-color="info"] {
+    --_color: var(--eds-c-foreground-info);
+}
+
+.eds-dialog[data-color="success"] {
+    --_color: var(--eds-c-foreground-success);
+}
+
+.eds-dialog[data-color="warning"] {
+    --_color: var(--eds-c-foreground-warning);
+}
+
+.eds-dialog[data-color="critical"] {
+    --_color: var(--eds-c-foreground-critical);
+}
+
+.eds-dialog[data-color="neutral"] {
+    --_color: var(--eds-c-foreground-default);
+}
+
+.eds-dialog[data-color="primary"] {
+    --_color: var(--eds-c-foreground-primary);
+}
+
+/* COMPONENT STYLES */
+.eds-dialog-container {
+    display: flex;
+    width: 100%;
+}
+
+.eds-dialog-container .eds-dialog {
+    background-color: var(--eds-c-surface-elevation);
+    border-radius: var(--eds-br-m);
+    box-shadow: var(--eds-sh-4);
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__header {
+    align-items: center;
+    border-top-left-radius: var(--eds-br-m);
+    border-top-right-radius: var(--eds-br-m);
+    display: flex;
+    flex: 0 0 auto;
+    padding: var(--eds-sp-s) var(--eds-sp-m);
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__header .eds-dialog__header-icon {
+    margin-right: var(--eds-sp-s);
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__header .eds-dialog__header-title {
+    color: var(--_color);
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: var(--eds-f-heading-m);
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__header.eds-dialog__header--handle-disabled {
+    cursor: default !important;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__body {
+    display: flex;
+    overflow: auto;
+    position: relative;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__body .eds-dialog__body-content {
+    height: auto;
+    padding: var(--eds-sp-xs) var(--eds-sp-m) var(--eds-sp-l) var(--eds-sp-m);
+    width: 100%;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__footer {
+    align-items: center;
+    background-color: var(--eds-c-surface-elevation);
+    border-bottom-left-radius: var(--eds-br-m);
+    border-bottom-right-radius: var(--eds-br-m);
+    border-top: 1px solid var(--eds-c-border-divider);
+    display: flex;
+    padding: var(--eds-sp-s) var(--eds-sp-m);
+    width: 100%;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__footer .eds-dialog__footer-content {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+.eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__footer .eds-dialog__footer-dismiss-button--with-accept-button {
+    margin-right: var(--eds-sp-s);
+}
+
+/* --no-padding -> [data-no-padding] */
+.eds-dialog-container .eds-dialog[data-no-padding] .eds-dialog__content .eds-dialog__body-content {
+    padding: 0;
+}
+
+/* MESSAGE BOX */
+.eds-dialog-container .eds-dialog.eds-dialog--message-box .eds-dialog__content .eds-dialog__body {
+    align-items: center;
+    display: flex;
+}
+
+.eds-dialog-container .eds-dialog.eds-dialog--message-box .eds-dialog__content .eds-dialog__body-content {
+    height: auto;
+    padding: var(--eds-sp-m);
+    align-items: center;
+    display: flex;
+    width: 100%;
+}
+
+.eds-dialog-container .eds-dialog.eds-dialog--message-box .eds-dialog__content .eds-dialog__body-content-icon-container {
+    align-self: flex-start;
+    padding: var(--eds-sp-m);
+}
+
+.eds-dialog-container .eds-dialog.eds-dialog--message-box .eds-dialog__content .eds-dialog__body-content p {
+    margin-top: 0;
+}
+
+/* MEDIA QUERIES — base.media(base.$eds-bkp-mobile) expands to @media screen and (max-width: 767px) */
+@media screen and (max-width: 767px) {
+    .eds-dialog-container .eds-dialog {
+        left: 0;
+        position: fixed;
+        top: 0;
+    }
+
+    .eds-dialog-container .eds-dialog .eds-dialog__content {
+        height: 100vh;
+        height: calc(var(--eds-app-vh, 1vh) * 100);
+        width: 100vw;
+    }
+
+    .eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__header {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        flex: 0 0 auto;
+    }
+
+    .eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__body {
+        flex: 1 1 auto;
+        height: 65vh !important;
+        max-height: 65vh !important;
+        max-width: 100vw !important;
+        overflow-x: hidden;
+        overflow-y: auto;
+        width: 100vw !important;
+    }
+
+    .eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__body .eds-dialog__body-content {
+        flex: 1 1 auto;
+    }
+
+    .eds-dialog-container .eds-dialog .eds-dialog__content .eds-dialog__footer {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        flex: 0 0 auto;
+        width: 100vw;
+    }
+}

package/eds-message-box/eds-message-box.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+/**
+ * Local narrowed color union — the message box's color contract.
+ *
+ * Ported from the Angular `eds-message-box`, which drives its variant through
+ * `EdsColorDirective` (`edsNeutral` / `edsSuccess` / `edsInfo` / `edsWarning` / `edsCritical`
+ * + `edsColorVariant`) and resolves to `info` when unset. The dialog container additionally
+ * styles a `primary` branch, so `primary` is accepted here for parity. Only the four
+ * status colors (`info` / `success` / `warning` / `critical`) render a leading status icon
+ * (`EdsIconState` supports exactly those); `neutral` / `primary` render no header icon,
+ * matching the Angular `<eds-icon-state [color]="variant" ... />` when `variant` is not a
+ * status color.
+ */
+export type EdsMessageBoxColor = 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'primary';
+export interface EdsMessageBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'title'> {
+    /**
+     * Controlled visibility. The Angular component is opened imperatively via
+     * `EdsMessageBoxService.openMessageBox()` / `closeMessageBox()` (which delegates to the
+     * `EdsDialogService` overlay). React has no DI/overlay service — this is a host-owned
+     * **controlled** component: pass `isOpen` and react to `onAccept` / `onDismiss` /
+     * `onMessageBoxClose`. @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Semantic color of the message box. Selects the leading status icon (for the four
+     * status colors) and the header title color. @default 'info'
+     */
+    color?: EdsMessageBoxColor;
+    /** Title text displayed in the message box header. */
+    title?: string;
+    /** Width of the message box. @default '33rem' */
+    width?: string;
+    /** Height of the message box body. @default 'auto' */
+    height?: string;
+    /** Controls visibility of the accept button. @default true */
+    hasAcceptButton?: boolean;
+    /** Controls visibility of the dismiss button. @default true */
+    hasDismissButton?: boolean;
+    /** Label for the accept button. @default 'OK' */
+    acceptLabel?: string;
+    /** Label for the dismiss button. @default 'Cancel' */
+    dismissLabel?: string;
+    /**
+     * Prevents automatic closure when the dismiss button is clicked (the host keeps
+     * `isOpen` true and closes it explicitly). @default false
+     */
+    isHandleCloseOnDismiss?: boolean;
+    /**
+     * Prevents automatic closure when close is triggered (currently only the dismiss path
+     * has an auto-close; kept for parity with the Angular input). @default false
+     */
+    isHandleCloseOnClose?: boolean;
+    /**
+     * Prevents automatic closure when the accept button is clicked. @default false
+     */
+    isHandleCloseOnAccept?: boolean;
+    /** Removes default padding from the body content area. @default false */
+    hasNoBodyPadding?: boolean;
+    /** Data attribute for e2e testing. @default 'eds-message-box' */
+    e2eAttr?: string;
+    /** Emitted when the message box opens. Maps to Angular `(messageBoxOpen)`. */
+    onMessageBoxOpen?: () => void;
+    /** Emitted when the message box closes. Maps to Angular `(messageBoxClose)`. */
+    onMessageBoxClose?: () => void;
+    /** Emitted when the dismiss button is clicked. Maps to Angular `(dismiss)`. */
+    onDismiss?: () => void;
+    /** Emitted when the accept button is clicked. Maps to Angular `(accept)`. */
+    onAccept?: () => void;
+    /** Message box body content (Angular default `<ng-content/>`). */
+    children?: React.ReactNode;
+    /**
+     * Optional custom footer content (Angular `<ng-content select="eds-message-box-footer">`).
+     * When provided, it replaces the default accept/dismiss button row.
+     */
+    footer?: React.ReactNode;
+}
+/**
+ * `EdsMessageBox` — pure React port of the Angular `eds-message-box`.
+ *
+ * A modal message box (an `alertdialog`) for confirmations, alerts, and prompts. The Angular
+ * component is a thin, service-driven wrapper: it builds an `EdsDialogInterface` (message-box
+ * preset — no close button, no outside-click/escape close, always a footer) and hands it to
+ * `EdsMessageBoxService` → `EdsDialogService`, which renders the shared `eds-dialog-container`
+ * in a CDK overlay.
+ *
+ * React has no DI or overlay service, so this port is a **host-owned controlled component**
+ * (guide rule 6 — service-agnostic). It renders the ported dialog-container markup (backdrop
+ * + `alertdialog` panel: status-icon header, scrollable body, action footer) inline when
+ * `isOpen` is true, reproduces the message-box behavior faithfully with hooks (focus capture
+ * on open, focus trap, non-dismiss on backdrop/escape), and exposes the Angular outputs as
+ * `on*` callbacks. The dropped pieces (the imperative `EdsMessageBoxService`, the CDK
+ * overlay/portal, drag-and-drop) are host concerns — the consumer owns `isOpen`.
+ */
+export declare const EdsMessageBox: React.ForwardRefExoticComponent<EdsMessageBoxProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-message-box.d.ts.map

package/eds-message-box/eds-message-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-message-box.d.ts","sourceRoot":"","sources":["../../src/eds-message-box/eds-message-box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAUrG,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACrG;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa,2FAsLxB,CAAC"}

package/eds-message-box/eds-message-box.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { EdsIconState } from '../eds-icon-state/eds-icon-state.js';
+import { EdsButton } from '../eds-button/eds-button.js';
+/** color → status icon support (the four EdsIconState colors show a leading icon). */
+const STATUS_COLORS = new Set([
+    'info',
+    'success',
+    'warning',
+    'critical',
+]);
+/**
+ * `EdsMessageBox` — pure React port of the Angular `eds-message-box`.
+ *
+ * A modal message box (an `alertdialog`) for confirmations, alerts, and prompts. The Angular
+ * component is a thin, service-driven wrapper: it builds an `EdsDialogInterface` (message-box
+ * preset — no close button, no outside-click/escape close, always a footer) and hands it to
+ * `EdsMessageBoxService` → `EdsDialogService`, which renders the shared `eds-dialog-container`
+ * in a CDK overlay.
+ *
+ * React has no DI or overlay service, so this port is a **host-owned controlled component**
+ * (guide rule 6 — service-agnostic). It renders the ported dialog-container markup (backdrop
+ * + `alertdialog` panel: status-icon header, scrollable body, action footer) inline when
+ * `isOpen` is true, reproduces the message-box behavior faithfully with hooks (focus capture
+ * on open, focus trap, non-dismiss on backdrop/escape), and exposes the Angular outputs as
+ * `on*` callbacks. The dropped pieces (the imperative `EdsMessageBoxService`, the CDK
+ * overlay/portal, drag-and-drop) are host concerns — the consumer owns `isOpen`.
+ */
+export const EdsMessageBox = React.forwardRef(function EdsMessageBox({ isOpen = false, color = 'info', title, width = '33rem', height = 'auto', hasAcceptButton = true, hasDismissButton = true, acceptLabel = 'OK', dismissLabel = 'Cancel', isHandleCloseOnDismiss = false, isHandleCloseOnClose: _isHandleCloseOnClose = false, isHandleCloseOnAccept = false, hasNoBodyPadding = false, e2eAttr = 'eds-message-box', onMessageBoxOpen, onMessageBoxClose, onDismiss, onAccept, children, footer, className, ...rest }, ref) {
+    const panelRef = useRef(null);
+    const previouslyFocused = useRef(null);
+    // Fire the open/close outputs on the isOpen transition (Angular: config.open()/close()).
+    const wasOpen = useRef(false);
+    useEffect(() => {
+        if (isOpen && !wasOpen.current) {
+            onMessageBoxOpen?.();
+        }
+        else if (!isOpen && wasOpen.current) {
+            onMessageBoxClose?.();
+        }
+        wasOpen.current = isOpen;
+    }, [isOpen, onMessageBoxOpen, onMessageBoxClose]);
+    // Auto-capture focus into the panel on open, restore it on close (CDK cdkTrapFocusAutoCapture).
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        previouslyFocused.current = document.activeElement;
+        panelRef.current?.focus();
+        return () => {
+            previouslyFocused.current?.focus?.();
+        };
+    }, [isOpen]);
+    const requestClose = useCallback(() => {
+        onMessageBoxClose?.();
+    }, [onMessageBoxClose]);
+    const handleDismiss = useCallback(() => {
+        onDismiss?.();
+        if (!isHandleCloseOnDismiss) {
+            requestClose();
+        }
+    }, [onDismiss, isHandleCloseOnDismiss, requestClose]);
+    const handleAccept = useCallback(() => {
+        onAccept?.();
+        if (!isHandleCloseOnAccept) {
+            requestClose();
+        }
+    }, [onAccept, isHandleCloseOnAccept, requestClose]);
+    // Focus trap — keep Tab focus inside the panel. Escape does NOT close (message-box preset:
+    // hasClosedOnEscape=false).
+    const onKeyDown = useCallback((event) => {
+        if (event.key !== 'Tab')
+            return;
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const focusable = panel.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])');
+        if (focusable.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }, []);
+    if (!isOpen) {
+        return null;
+    }
+    const showIcon = STATUS_COLORS.has(color);
+    const contentId = 'eds-message-box-content';
+    return (_jsx("div", { ref: ref, className: className ? `eds-message-box__backdrop ${className}` : 'eds-message-box__backdrop', "data-e2e": `${e2eAttr}-backdrop`, ...rest, children: _jsx("div", { className: "eds-dialog-container", children: _jsx("div", { ref: panelRef, className: "eds-dialog eds-dialog--message-box", "data-color": color, "data-no-padding": hasNoBodyPadding ? '' : undefined, role: "alertdialog", "aria-modal": "true", "aria-labelledby": "eds-message-box-title", "aria-describedby": contentId, tabIndex: -1, "data-e2e": e2eAttr, style: { width }, onKeyDown: onKeyDown, children: _jsxs("div", { className: "eds-dialog__content", role: "document", children: [_jsxs("div", { className: "eds-dialog__header eds-dialog__header--handle-disabled", children: [showIcon && (_jsx(EdsIconState, { className: "eds-dialog__header-icon", color: color, size: "xl" })), _jsx("h2", { id: "eds-message-box-title", className: "eds-dialog__header-title", "aria-level": 2, children: title })] }), _jsx("div", { className: "eds-dialog__body", style: { height, maxHeight: height }, children: _jsx("div", { id: contentId, className: "eds-dialog__body-content", children: children }) }), _jsx("div", { className: "eds-dialog__footer", children: footer ?? (_jsxs("div", { className: "eds-dialog__footer-content", children: [hasDismissButton && (_jsx(EdsButton, { type: "secondary", className: hasAcceptButton
+                                            ? 'eds-dialog__footer-dismiss-button eds-dialog__footer-dismiss-button--with-accept-button'
+                                            : 'eds-dialog__footer-dismiss-button', onClick: handleDismiss, children: dismissLabel })), hasAcceptButton && (_jsx(EdsButton, { className: "eds-dialog__footer-accept-button", onClick: handleAccept, children: acceptLabel }))] })) })] }) }) }) }));
+});
+//# sourceMappingURL=eds-message-box.js.map

package/eds-message-box/eds-message-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-message-box.js","sourceRoot":"","sources":["../../src/eds-message-box/eds-message-box.tsx"],"names":[],"mappings":"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"}

package/eds-message-box/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsMessageBox } from './eds-message-box.js';
+export type { EdsMessageBoxProps, EdsMessageBoxColor } from './eds-message-box.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-message-box/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-message-box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/eds-message-box/index.js

@@ -0,0 +1,2 @@
+export { EdsMessageBox } from './eds-message-box.js';
+//# sourceMappingURL=index.js.map

package/eds-message-box/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-message-box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}

package/eds-multiselect/eds-multiselect.css

@@ -0,0 +1,182 @@
+/* eds-multiselect — pure-React CSS port of eds-multiselect.scss (1:1). */
+
+.eds-multiselect {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.eds-multiselect .eds-multiselect__trigger {
+    /* base.eds-ellipsis() inlined */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    font: var(--eds-f-paragraph-m);
+    appearance: none;
+    background-color: var(--eds-c-surface-elevation);
+    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
+    border-radius: var(--eds-br-s);
+    box-shadow: none;
+    color: var(--eds-c-foreground-default);
+    min-height: var(--eds-si-3xl);
+    padding: var(--eds-sp-xs) var(--eds-sp-s);
+    width: 100%;
+    cursor: pointer;
+    outline: none;
+    transition: border-color 0.15s ease;
+}
+
+.eds-multiselect .eds-multiselect__trigger:hover:not([aria-disabled="true"]) {
+    border-color: var(--eds-c-border-primary);
+}
+
+.eds-multiselect .eds-multiselect__trigger:focus-visible:not([aria-disabled="true"]) {
+    outline: 2px solid var(--eds-c-border-primary);
+    outline-offset: -2px;
+}
+
+.eds-multiselect .eds-multiselect__display {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.eds-multiselect .eds-multiselect__display--placeholder {
+    color: var(--eds-c-foreground-subtler);
+}
+
+.eds-multiselect .eds-multiselect__caret {
+    flex-shrink: 0;
+    font-size: 20px;
+    color: var(--eds-c-foreground-default);
+    transition: transform 0.2s ease;
+}
+
+/* Open state */
+.eds-multiselect.eds-multiselect--open .eds-multiselect__trigger {
+    border-color: var(--eds-c-border-primary);
+    outline: 2px solid var(--eds-c-border-primary);
+    outline-offset: -2px;
+}
+
+.eds-multiselect.eds-multiselect--open .eds-multiselect__caret {
+    transform: rotate(180deg);
+}
+
+/* Disabled state */
+.eds-multiselect.eds-multiselect--disabled .eds-multiselect__trigger {
+    background-color: var(--eds-c-suface-disabled);
+    border-color: var(--eds-c-border-disabled);
+    color: var(--eds-c-foreground-subtler);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.eds-multiselect.eds-multiselect--disabled .eds-multiselect__caret {
+    color: var(--eds-c-foreground-subtler);
+}
+
+/* Invalid state */
+.eds-multiselect.eds-multiselect--invalid .eds-multiselect__trigger {
+    border-color: var(--eds-c-border-critical);
+}
+
+.eds-multiselect.eds-multiselect--invalid .eds-multiselect__trigger:focus-visible {
+    outline-color: var(--eds-c-border-critical);
+}
+
+/* Dropdown panel (rendered in a portal, outside the component root) */
+.eds-multiselect__panel-wrapper {
+    background-color: var(--eds-c-surface-elevation);
+    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
+    border-radius: var(--eds-br-s);
+    box-shadow: var(--eds-sh-1);
+    display: flex;
+    flex-direction: column;
+    max-height: 280px;
+    min-width: 100%;
+    box-sizing: border-box;
+    outline: none;
+}
+
+.eds-multiselect__panel {
+    flex: 1;
+    max-height: 240px;
+    overflow-y: auto;
+    padding: var(--eds-sp-3xs) 0;
+    outline: none;
+}
+
+.eds-multiselect__panel .eds-multiselect-option {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-s);
+    padding: var(--eds-sp-xs) var(--eds-sp-s);
+    cursor: pointer;
+    font: var(--eds-f-paragraph-m);
+    color: var(--eds-c-foreground-default);
+    user-select: none;
+    transition: background-color 0.1s ease;
+}
+
+.eds-multiselect__panel .eds-multiselect-option .eds-multiselect-option__label {
+    flex: 1;
+}
+
+.eds-multiselect__panel .eds-multiselect-option .eds-multiselect-option__check {
+    opacity: 0;
+    font-size: 16px;
+    color: var(--eds-c-foreground-primary);
+    transition: opacity 0.1s ease;
+}
+
+.eds-multiselect__panel .eds-multiselect-option:hover:not(.eds-multiselect-option--disabled) {
+    background-color: var(--eds-c-surface-hover);
+}
+
+.eds-multiselect__panel .eds-multiselect-option--active:not(.eds-multiselect-option--disabled) {
+    background-color: var(--eds-c-surface-hover);
+    outline: var(--eds-bw-s) solid var(--eds-c-border-primary);
+    outline-offset: -2px;
+}
+
+.eds-multiselect__panel .eds-multiselect-option--selected .eds-multiselect-option__check {
+    opacity: 1;
+}
+
+.eds-multiselect__panel .eds-multiselect-option--disabled {
+    color: var(--eds-c-foreground-subtler);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.eds-multiselect__panel-footer {
+    display: flex;
+    justify-content: flex-start;
+    padding: var(--eds-sp-xs) var(--eds-sp-s);
+    border-top: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+}
+
+.eds-multiselect__done-button {
+    font: var(--eds-f-label-m-semi-bold);
+    color: var(--eds-c-foreground-primary);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: var(--eds-sp-3xs) var(--eds-sp-s);
+    border-radius: var(--eds-br-s);
+    transition: background-color 0.1s ease;
+}
+
+.eds-multiselect__done-button:hover {
+    background-color: var(--eds-c-surface-hover);
+}
+
+.eds-multiselect__done-button:focus-visible {
+    outline: 2px solid var(--eds-c-border-primary);
+    outline-offset: -2px;
+}