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

package/eds-input-text/eds-input-text.css

@@ -0,0 +1,168 @@
+/**
+ * eds-input-text.css — 1:1 pure-React port of eds-input-text.scss.
+ *
+ * The Angular file is `@include base.eds-ellipsis(); @include base.eds-input();` on
+ * `:host.eds-input-text`, plus the readonly/clearable/loading/search overrides. The `eui-21`
+ * wrapper is dropped (share-ready). SCSS mixins are inlined per the guide's Part 2:
+ *   - base.eds-ellipsis()   -> overflow/text-overflow/white-space
+ *   - base.eds-input()      -> the full input reset + focus-visible + placeholder + readonly +
+ *                              disabled + invalid + loading declarations
+ *   - base.eds-focus-visible() (nested in eds-input) -> :focus-visible:not([readonly]) outline
+ *
+ * The Angular component is class-based, so variant/state selectors stay as BEM classes
+ * (`.eds-input-text--invalid` etc.), not `data-*` (guide rule 9). The clearable icon / loading
+ * spinner (injected via inline styles by the host directives at runtime) are ported to real CSS
+ * classes since React renders them as light-DOM elements.
+ */
+
+/* --- base.eds-ellipsis() + base.eds-input() on .eds-input-text --- */
+.eds-input-text {
+    /* eds-ellipsis() */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    /* eds-input() */
+    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%;
+}
+
+/* eds-focus-visible() (nested in eds-input mixin) */
+.eds-input-text:focus-visible:not([readonly]) {
+    outline: 2px solid var(--eds-c-border-primary) !important;
+    outline-offset: -2px !important;
+    transition: none;
+}
+
+.eds-input-text:not([hidden]) {
+    display: block;
+}
+
+.eds-input-text::placeholder {
+    color: var(--eds-c-foreground-subtler);
+    opacity: 1;
+}
+
+/* Readonly (from eds-input mixin) */
+.eds-input-text[readonly] {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    padding-left: 0;
+    padding-right: 0;
+    pointer-events: none;
+}
+
+/* Disabled (from eds-input mixin) */
+.eds-input-text:disabled:not([readonly]),
+.eds-input-text--disabled:not([readonly]) {
+    background-color: var(--eds-c-suface-disabled);
+    border-color: var(--eds-c-border-disabled);
+    color: var(--eds-c-foreground-subtler);
+    pointer-events: none;
+}
+
+/* Invalid (reflected as the --invalid class by hostClasses()) */
+.eds-input-text--invalid {
+    border-color: var(--eds-c-border-critical);
+}
+
+/* --- component-specific overrides (from eds-input-text.scss) --- */
+
+/* Readonly: keep pointer events, hide placeholder */
+.eds-input-text[readonly] {
+    pointer-events: auto;
+}
+
+.eds-input-text[readonly]::placeholder {
+    color: transparent;
+}
+
+/* When loading is active, keep normal input visuals despite readonly */
+.eds-input-text--loading[readonly] {
+    background-color: var(--eds-c-surface-elevation);
+    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
+    padding-left: var(--eds-sp-s);
+}
+
+/* Clearable padding */
+.eds-input-text--clearable {
+    padding-right: calc(var(--eds-sp-s) + 24px);
+}
+
+/* Loading padding (alone) */
+.eds-input-text--loading:not(.eds-input-text--clearable) {
+    padding-right: calc(var(--eds-sp-s) + 28px);
+}
+
+/* Both clearable + loading: hide clearable icon, use loading padding only */
+.eds-input-text--loading.eds-input-text--clearable {
+    padding-right: calc(var(--eds-sp-s) + 28px);
+}
+
+/* Hide default user agent 'x' on search inputs */
+.eds-input-text[type="search"]::-webkit-search-cancel-button {
+    display: none;
+}
+
+/* --- wrapper + injected icons (ported from the host directives' runtime DOM) --- */
+
+/* Wrapper the clearable/loading directives build at runtime */
+.eds-input-text__wrapper {
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+}
+
+/* Clear icon (EdsClearableDirective inline styles ported to CSS) */
+.eds-clearable-icon {
+    position: absolute;
+    right: var(--eds-sp-s);
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    color: var(--eds-c-foreground-subtle);
+    border-radius: var(--eds-br-xs);
+    padding: 2px;
+    outline: none;
+}
+
+.eds-clearable-icon:focus-visible {
+    outline: 2px solid var(--eds-c-border-focus, #0e47cb);
+    outline-offset: 1px;
+}
+
+/* Loading spinner (EdsLoadingDirective inline styles ported to CSS) */
+.eds-input-text--loading-icon {
+    position: absolute;
+    right: var(--eds-sp-s);
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    border: 3px solid var(--eds-c-border-neutral);
+    border-top-color: var(--eds-c-border-primary);
+    border-radius: 50%;
+    animation: eds-spin 0.6s linear infinite;
+    pointer-events: none;
+}
+
+@keyframes eds-spin {
+    from {
+        transform: translateY(-50%) rotate(0deg);
+    }
+    to {
+        transform: translateY(-50%) rotate(360deg);
+    }
+}

package/eds-input-text/eds-input-text.d.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+/**
+ * `EdsInputText` — pure React port of the Angular `eds-input-text`.
+ *
+ * The Angular source is a directive on a native `<input>` (`selector: 'input[edsInputText]'`,
+ * empty `template`) — so the rendered **root element IS an `<input>`**. It is a
+ * `ControlValueAccessor` (Angular forms). React has no CVA, so this exposes a standard React form
+ * API: **controlled** via `value` + `onChange`, or **uncontrolled** via `defaultValue`. There is no
+ * forms-integration shim — flagged for React forms-API design review.
+ *
+ * The Angular component is **class-based** (`host: { '[class]': 'hostClasses()' }`), so per the
+ * pure-React guide rule 9 the BEM classes are reproduced verbatim on the root `className`
+ * (`eds-input-text`, `eds-input-text--invalid`) and the ported CSS keeps those class selectors.
+ * Invalid state in Angular is `_ngControl.invalid && touched` when bound to a form control, or the
+ * `isInvalid` input otherwise; React has no NgControl, so `invalid` is the single input driving the
+ * `eds-input-text--invalid` class.
+ *
+ * The Angular component composes two host directives — `EdsClearableDirective` (`edsClearable`) and
+ * `EdsLoadingDirective` (`edsLoading`) — which at runtime wrap the input in a
+ * `position:relative` flex `<div>` and inject a sibling clear icon / loading spinner, toggling the
+ * `eds-input-text--clearable` / `eds-input-text--loading` classes. Those behaviors are reimplemented
+ * here idiomatically: when `clearable` or `loading` is active the component renders that same
+ * wrapper + icon DOM; otherwise it renders a bare `<input>` (the host element IS the component).
+ *
+ * @example Controlled
+ * ```tsx
+ * const [v, setV] = React.useState('');
+ * <input {...{} } />
+ * <EdsInputText value={v} onChange={(e) => setV(e.target.value)} placeholder="Type…" />
+ * ```
+ *
+ * @example Uncontrolled, clearable
+ * ```tsx
+ * <EdsInputText defaultValue="hello" clearable onClear={() => console.log('cleared')} />
+ * ```
+ *
+ * @example Loading / readonly / invalid
+ * ```tsx
+ * <EdsInputText loading />
+ * <EdsInputText readonly value="Read only" />
+ * <EdsInputText invalid />
+ * ```
+ */
+export interface EdsInputTextProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /**
+     * Data attribute value for end-to-end testing identification. Applied as `data-e2e`.
+     * @default 'eds-input-text'
+     */
+    e2eAttr?: string;
+    /**
+     * Controls whether the input is disabled. Reflected as the native `disabled` attribute.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Controls whether the input is readonly. Reflected as the native `readonly` attribute.
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Controls whether the input shows an invalid/error state. Reflected as the
+     * `eds-input-text--invalid` class (mirrors the Angular `isInvalid` input / NgControl state).
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Adds a clear (✕) button that appears when the input has content and is cleared on click /
+     * Enter (mirrors `EdsClearableDirective`). Hidden while readonly, disabled, or loading.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Displays a loading spinner inside the input and forces it readonly while active
+     * (mirrors `EdsLoadingDirective`).
+     * @default false
+     */
+    loading?: boolean;
+    /** Controlled value. When provided the input is controlled (React semantics). */
+    value?: string;
+    /** Initial value for an uncontrolled input. */
+    defaultValue?: string;
+    /** Fired on every keystroke (mirrors the Angular host `(input)` → CVA `onChange`). */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /** Fired when the input loses focus (mirrors the Angular host `(blur)` → CVA `onTouched`). */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /** Fired when the clearable button clears the value (mirrors the directive's `clear` event). */
+    onClear?: () => void;
+}
+export declare const EdsInputText: React.ForwardRefExoticComponent<EdsInputTextProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=eds-input-text.d.ts.map

package/eds-input-text/eds-input-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-input-text.d.ts","sourceRoot":"","sources":["../../src/eds-input-text/eds-input-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,WAAW,iBACb,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,8FAA8F;IAC9F,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,gGAAgG;IAChG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,4FA2IvB,CAAC"}

package/eds-input-text/eds-input-text.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+export const EdsInputText = React.forwardRef(function EdsInputText({ e2eAttr = 'eds-input-text', disabled = false, readonly = false, invalid = false, clearable = false, loading = false, value, defaultValue, onChange, onBlur, onClear, className, type = 'text', ...rest }, ref) {
+    const isControlled = value !== undefined;
+    // Internal ref to the input so the clear handler and clearable-visibility logic can read the
+    // current value in the uncontrolled case; merged with the forwarded ref.
+    const innerRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        innerRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // Track current value for the clearable-icon visibility in the uncontrolled case.
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? '');
+    const currentValue = isControlled ? value : uncontrolledValue;
+    // Loading forces readonly (matches EdsLoadingDirective._show setting the readonly attribute).
+    const effectiveReadonly = readonly || loading;
+    // The clear icon is hidden while loading, readonly, or disabled, and only shown with content
+    // (matches EdsClearableDirective._syncVisibility).
+    const showClearIcon = clearable && !loading && !effectiveReadonly && !disabled && (currentValue?.length ?? 0) > 0;
+    const rootClass = useMemo(() => [
+        'eds-input-text',
+        invalid ? 'eds-input-text--invalid' : '',
+        clearable ? 'eds-input-text--clearable' : '',
+        loading ? 'eds-input-text--loading' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' '), [invalid, clearable, loading, className]);
+    const handleChange = useCallback((event) => {
+        if (!isControlled) {
+            setUncontrolledValue(event.target.value);
+        }
+        onChange?.(event);
+    }, [isControlled, onChange]);
+    const handleClear = useCallback(() => {
+        const node = innerRef.current;
+        if (node) {
+            // Programmatically clear and dispatch a native input event so controlled/uncontrolled
+            // consumers observe the change (mirrors the directive's dispatchEvent('input')).
+            const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+            setter?.call(node, '');
+            node.dispatchEvent(new Event('input', { bubbles: true }));
+            node.focus();
+        }
+        if (!isControlled) {
+            setUncontrolledValue('');
+        }
+        onClear?.();
+    }, [isControlled, onClear]);
+    const controlledProps = isControlled ? { value } : { defaultValue };
+    const input = (_jsx("input", { ref: setRefs, type: type, className: rootClass, "data-e2e": e2eAttr, disabled: disabled, readOnly: effectiveReadonly, "aria-invalid": invalid || undefined, onChange: handleChange, onBlur: onBlur, ...controlledProps, ...rest }));
+    // Bare input when neither clearable nor loading is active — the host element IS the component.
+    if (!clearable && !loading) {
+        return input;
+    }
+    // Clearable / loading wrap the input in a position:relative flex row and inject the icon,
+    // reproducing the runtime DOM the Angular host directives build.
+    return (_jsxs("div", { className: "eds-input-text__wrapper", children: [input, showClearIcon && (_jsx("span", { className: "eds-clearable-icon", role: "button", tabIndex: 0, "aria-label": "Clear input", onClick: handleClear, onKeyDown: (event) => {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        handleClear();
+                    }
+                }, children: '\u2715' })), loading && _jsx("span", { className: "eds-input-text--loading-icon", "aria-hidden": "true" })] }));
+});
+//# sourceMappingURL=eds-input-text.js.map

package/eds-input-text/eds-input-text.js.map

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

package/eds-input-text/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsInputText } from './eds-input-text.js';
+export type { EdsInputTextProps } from './eds-input-text.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-input-text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-input-text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/eds-input-text/index.js

@@ -0,0 +1,2 @@
+export { EdsInputText } from './eds-input-text.js';
+//# sourceMappingURL=index.js.map

package/eds-input-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-input-text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/eds-language-selector/eds-language-selector.css

@@ -0,0 +1,245 @@
+/* EdsLanguageSelector — pure React port of the Angular eds-language-selector SCSS.
+ *
+ * Mechanical 1:1 translation of eds-language-selector.scss per the guide's Part 2 mapping:
+ *   :host                              -> .eds-language-selector (root class)
+ *   :host.eds-language-selector--brand -> .eds-language-selector.eds-language-selector--brand
+ *                                         (class-based EdsColorDirective source, guide rule 9)
+ *   nested child classes               -> descendants of .eds-language-selector
+ *   ::ng-deep .eds-icon                -> light-DOM descendant .eds-icon
+ *   @include base.eds-focus-visible-ring() -> inlined below
+ * The `.eui-21` wrapper is dropped (share-ready). --eds-* tokens are verbatim; tokens cascade in
+ * from the .eui-21 context (required on an ancestor).
+ *
+ * The dialog styles (Angular `styles: [...]` inline on eds-language-selector-dialog) plus the modal
+ * overlay chrome (which the Angular EdsDialogService provided) are ported at the bottom.
+ */
+
+.eds-language-selector {
+    display: inline-flex;
+    position: relative;
+}
+
+.eds-language-selector .language-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-3xs);
+    padding: var(--eds-sp-3xs) var(--eds-sp-xs);
+    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral-subtle);
+    border-radius: var(--eds-br-s);
+    background: none;
+    cursor: pointer;
+    font: var(--eds-f-label-m-semi-bold);
+    color: inherit;
+    transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+/* inlined base.eds-focus-visible-ring() */
+.eds-language-selector .language-toggle:focus-visible:not([readonly]) {
+    outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+    outline-offset: 1px !important;
+}
+
+.eds-language-selector .language-toggle:hover {
+    background: var(--eds-c-surface-elevation-sunken);
+    border-color: var(--eds-c-border-neutral);
+}
+
+.eds-language-selector .language-toggle--icon-layout {
+    border: none;
+    padding: var(--eds-sp-3xs) var(--eds-sp-2xs);
+    gap: var(--eds-sp-3xs);
+    border-radius: var(--eds-br-s);
+}
+
+.eds-language-selector .language-toggle--icon-layout:hover {
+    background: var(--eds-c-surface-elevation-sunken);
+}
+
+.eds-language-selector .language-code {
+    font: var(--eds-f-label-m-semi-bold);
+}
+
+.eds-language-selector .chevron {
+    font-size: var(--eds-f-s-xs);
+    color: var(--eds-c-foreground-subtler);
+}
+
+.eds-language-selector .language-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 200;
+    margin-top: var(--eds-sp-3xs);
+    min-width: 160px;
+    list-style: none;
+    padding: var(--eds-sp-3xs) var(--eds-sp-none);
+    background: var(--eds-c-surface-elevation-overlay);
+    border: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+    border-radius: var(--eds-br-m);
+    box-shadow: var(--eds-sh-3);
+}
+
+.eds-language-selector .language-dropdown--align-right {
+    left: auto;
+    right: 0;
+}
+
+.eds-language-selector .language-option {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+    padding: var(--eds-sp-xs) var(--eds-sp-m);
+    cursor: pointer;
+    font: var(--eds-f-paragraph-s);
+    color: var(--eds-c-foreground);
+    transition: background 0.15s ease;
+    outline: none;
+}
+
+.eds-language-selector .language-option:hover,
+.eds-language-selector .language-option.focused {
+    background: var(--eds-c-surface-elevation-sunken);
+}
+
+.eds-language-selector .language-option.focused {
+    outline: var(--eds-bw-xs) solid var(--eds-c-border-primary);
+    outline-offset: -1px;
+}
+
+.eds-language-selector .language-option.selected {
+    color: var(--eds-c-foreground-primary);
+    font-weight: var(--eds-f-w-semi-bold);
+}
+
+.eds-language-selector .option-code {
+    font: var(--eds-f-label-m-semi-bold);
+    min-width: 2rem;
+}
+
+.eds-language-selector .option-label {
+    flex: 1;
+}
+
+/* COLOR VARIANTS */
+.eds-language-selector.eds-language-selector--brand .language-toggle {
+    color: var(--eds-c-on-surface-brand);
+    border-color: transparent;
+}
+
+.eds-language-selector.eds-language-selector--brand .language-toggle:hover {
+    background: var(--eds-c-surface-brand--hover);
+    color: var(--eds-c-on-surface-brand--hover);
+}
+
+.eds-language-selector.eds-language-selector--brand .language-toggle--icon-layout:hover {
+    background: var(--eds-c-surface-brand--hover);
+    color: var(--eds-c-on-surface-brand--hover);
+}
+
+/* ::ng-deep .eds-icon -> light-DOM descendant */
+.eds-language-selector.eds-language-selector--brand .language-toggle .eds-icon {
+    --_on-surface: var(--eds-c-on-surface-brand);
+}
+
+.eds-language-selector.eds-language-selector--brand .chevron {
+    color: var(--eds-c-on-surface-brand);
+}
+
+/* ------------------------------------------------------------------------------------------ */
+/* Dialog content (ported from the Angular eds-language-selector-dialog inline styles). */
+/* ------------------------------------------------------------------------------------------ */
+
+.eds-language-dialog {
+    padding: var(--eds-sp-m);
+}
+
+.eds-language-dialog__section-title {
+    font: var(--eds-f-label-m-semi-bold);
+    margin-bottom: var(--eds-sp-s);
+}
+
+.eds-language-dialog__section-title--additional {
+    margin-top: var(--eds-sp-l);
+}
+
+.eds-language-dialog__grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--eds-sp-s);
+}
+
+.eds-language-dialog__item {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-xs);
+}
+
+.eds-language-dialog__code {
+    font-weight: 600;
+    min-width: 2rem;
+}
+
+/* ------------------------------------------------------------------------------------------ */
+/* Modal chrome — replaces the Angular EdsDialogService overlay (width: 480px, close button,    */
+/* close-on-escape / close-on-click-outside handled in the component).                          */
+/* ------------------------------------------------------------------------------------------ */
+
+.eds-language-selector-dialog-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: var(--eds-sp-2xl) var(--eds-sp-m);
+    background: var(--eds-c-surface-scrim, rgba(0, 0, 0, 0.5));
+}
+
+.eds-language-selector-dialog-panel {
+    width: 480px;
+    max-width: 100%;
+    background: var(--eds-c-surface-elevation-overlay);
+    border-radius: var(--eds-br-m);
+    box-shadow: var(--eds-sh-3);
+    overflow: hidden;
+}
+
+.eds-language-selector-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--eds-sp-m);
+    border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+}
+
+.eds-language-selector-dialog-title {
+    font: var(--eds-f-label-l-semi-bold);
+    margin: 0;
+}
+
+.eds-language-selector-dialog-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--eds-sp-3xs);
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: var(--eds-br-s);
+    color: inherit;
+}
+
+.eds-language-selector-dialog-close:hover {
+    background: var(--eds-c-surface-elevation-sunken);
+}
+
+/* inlined base.eds-focus-visible-ring() */
+.eds-language-selector-dialog-close:focus-visible:not([readonly]) {
+    outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+    outline-offset: 1px !important;
+}
+
+.eds-language-selector-dialog-body {
+    max-height: 70vh;
+    overflow-y: auto;
+}

package/eds-language-selector/eds-language-selector.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+/** A selectable language. Ported 1:1 from the Angular `EdsLanguage` interface. */
+export interface EdsLanguage {
+    /** Language code (e.g. 'en', 'fr', 'de'). */
+    code: string;
+    /** Display label (e.g. 'English', 'Français'). */
+    label: string;
+}
+/**
+ * Color variant of the language-selector trigger. The Angular component wires this through the
+ * `EdsColorDirective` host directive (`edsBrand` / `edsNeutral` / `edsColorVariant`), which computes
+ * a `eds-language-selector--<color>` class; only the `brand` branch has styled CSS. Reproduced here
+ * as a single `color` prop (guide Part 1 rule 9 — class-based source keeps its BEM classes).
+ */
+export type EdsLanguageSelectorColor = 'neutral' | 'brand';
+export interface EdsLanguageSelectorDialogProps {
+    /** All available languages. */
+    languages: EdsLanguage[];
+    /** Currently selected language code. */
+    selectedLanguage: string;
+    /** Callback when a language is selected. */
+    onLanguageChange: (code: string) => void;
+}
+/**
+ * `EdsLanguageSelectorDialog` — pure React port of the Angular `eds-language-selector-dialog`.
+ *
+ * Displays EU and non-EU languages in separate grid sections; each entry shows the uppercased code
+ * plus an `EdsButton` (primary when selected, neutral otherwise). Selecting a language fires
+ * `onLanguageChange`. The Angular version closed the dialog via `EdsDialogService.closeDialog()`;
+ * in React the parent (`EdsLanguageSelector`) owns the modal and closes it from `onLanguageChange`.
+ */
+export declare function EdsLanguageSelectorDialog({ languages, selectedLanguage, onLanguageChange, }: EdsLanguageSelectorDialogProps): React.JSX.Element;
+export interface EdsLanguageSelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Available languages. @default [] */
+    languages?: EdsLanguage[];
+    /** Currently selected language code. @default 'en' */
+    selectedLanguage?: string;
+    /** Aria label for accessibility. @default '' */
+    ariaLabel?: string;
+    /**
+     * Whether the dropdown aligns to the right edge (opens towards left). Can be set explicitly or
+     * computed from viewport. @default false
+     */
+    isRightAligned?: boolean;
+    /**
+     * When true, the trigger displays a globe icon with the language code in a borderless button
+     * layout. @default false
+     */
+    hasIconLayout?: boolean;
+    /**
+     * Color variant of the trigger (Angular `EdsColorDirective`). Only `brand` has styled CSS.
+     * @default 'neutral'
+     */
+    color?: EdsLanguageSelectorColor;
+    /** Emits the selected language code when the user picks a language (Angular `languageChange`). */
+    onLanguageChange?: (code: string) => void;
+    /** Title shown in the language dialog (>3 languages). @default 'Select Language' */
+    dialogTitle?: string;
+    /** ARIA label for the dialog close button. @default 'Close' */
+    dialogCloseAriaLabel?: string;
+}
+/**
+ * `EdsLanguageSelector` — pure React port of the Angular `eds-language-selector`.
+ *
+ * A trigger button that opens either an inline dropdown listbox (<= 3 languages) or a modal dialog
+ * (> 3 languages, `EdsLanguageSelectorDialog`) to change the current language. Behavior is
+ * reimplemented with hooks: open/close state (`useState`), viewport-based right-alignment computed
+ * on open (`useLayoutEffect` reading the root ref), outside-click + Escape close (document
+ * listeners), roving-tabindex keyboard navigation over the dropdown options (Arrow/Home/End/Enter/
+ * Space/Escape/Tab) reimplementing the Angular `@angular/core` focus management, and focus return
+ * to the trigger on close.
+ *
+ * The Angular `EdsDialogService` overlay has no React equivalent; the dialog is rendered inline as a
+ * controlled modal owned by this component. Router/shell services are not involved. `color` follows
+ * the class-based `EdsColorDirective` source (guide rule 9), rendering `eds-language-selector--brand`.
+ */
+export declare function EdsLanguageSelector({ languages, selectedLanguage, ariaLabel, isRightAligned, hasIconLayout, color, onLanguageChange, dialogTitle, dialogCloseAriaLabel, className, ...rest }: EdsLanguageSelectorProps): React.JSX.Element;
+//# sourceMappingURL=eds-language-selector.d.ts.map