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

package/eds-select/eds-select.d.ts

@@ -0,0 +1,107 @@
+import * as React from 'react';
+/**
+ * `EdsSelect` — pure React port of the Angular `eds-select`.
+ *
+ * ## What the Angular source is
+ * `eds-select` is **not** a custom listbox/combobox widget — it is a set of directives that style
+ * and form-integrate a **native `<select>`** (`selector: 'select[edsSelect]'`, `template:
+ * '<ng-content/>'`). The projected content is native `<option>` / `<optgroup>` elements. So the
+ * faithful React projection is a controlled/uncontrolled **native `<select>`** — no CDK overlay, no
+ * roving-tabindex listbox (see the coverage note in the hand-off). The native element already
+ * provides the full listbox/combobox WAI-ARIA semantics and keyboard behavior (Arrow/Home/End/
+ * Enter/Escape/typeahead) for free.
+ *
+ * ## Angular pieces and their React counterparts
+ * - `EdsSelect` (the `select[edsSelect]` component) → this `EdsSelect` component (the root `<select>`).
+ * - `EdsSelectControlValueAccessor` / `EdsSelectMultipleControlValueAccessor` (Angular forms CVA,
+ *   single + multiple) → React has no CVA. Exposed as a **controlled** `value` + `onChange` or
+ *   **uncontrolled** `defaultValue`. `value` is a `string` for single-select and `string[]` for
+ *   `multiple`. Object values (`ngValue`) have no light-DOM analog on a native `<select>` (option
+ *   values are strings) — flagged for React forms-API design review.
+ * - `EdsSelectOptionDirective` / `EdsSelectMultipleOption` (`option[edsOption]`, forms plumbing:
+ *   `_optionMap`, `ngValue`, id encoding) → the {@link EdsOption} / {@link EdsOptGroup} thin typed
+ *   wrappers over native `<option>` / `<optgroup>`. They carry no visual role — the directive only
+ *   existed to notify Angular forms of option changes.
+ * - `placeholder` input → a disabled, hidden first `<option>` shown when no value is selected
+ *   (mirrors the placeholder-option the Angular `_updatePlaceholder` / CVA build). The
+ *   `eds-select--placeholder` class is applied to the root while the placeholder is the current
+ *   value (matches `_isPlaceholderSelected`).
+ * - `readonly` input → the Angular component hides the `<select>` and shows a plain readonly text
+ *   input of the joined selected labels (`_showReadonlyInput` / `_syncReadonlyValue`). Reproduced
+ *   here: while `readonly`, render the `.eds-select__readonly-display` input instead of the select.
+ * - `isInvalid` input → reflected as `[readonly]` — no. Reflected as the `eds-select--invalid`
+ *   class (matches `hostClasses()`; NgControl invalid/touched has no React analog).
+ *
+ * ## Reflected host attributes → data-* / classes
+ * The Angular component is **class-based** (`host: { '[class]': 'hostClasses()' }`) — it computes
+ * `eds-select`, `eds-select--readonly`, `eds-select--placeholder`, `eds-select--invalid` and sets
+ * `data-e2e`. Per guide rule 9, those BEM classes are reproduced verbatim on the root `className`,
+ * and the ported CSS keeps the class selectors. `multiple` and `size` are native `<select>`
+ * attributes (the SCSS selects on `[multiple="true"]` / `[size]`), so they render as the native
+ * attributes.
+ */
+export interface EdsOptionProps extends React.OptionHTMLAttributes<HTMLOptionElement> {
+    children?: React.ReactNode;
+}
+/**
+ * `EdsOption` — thin typed wrapper over a native `<option>` (the React counterpart of the
+ * `option[edsOption]` directive, which was pure Angular-forms plumbing). Use inside `EdsSelect`.
+ */
+export declare const EdsOption: React.ForwardRefExoticComponent<EdsOptionProps & React.RefAttributes<HTMLOptionElement>>;
+export interface EdsOptGroupProps extends React.OptgroupHTMLAttributes<HTMLOptGroupElement> {
+    children?: React.ReactNode;
+}
+/**
+ * `EdsOptGroup` — thin typed wrapper over a native `<optgroup>`. The Angular source styles
+ * `optgroup` directly; there is no dedicated Angular directive, this is provided for parity/DX.
+ */
+export declare const EdsOptGroup: React.ForwardRefExoticComponent<EdsOptGroupProps & React.RefAttributes<HTMLOptGroupElement>>;
+export interface EdsSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange' | 'value' | 'defaultValue'> {
+    /**
+     * Data attribute value for end-to-end testing identification. Applied as `data-e2e`.
+     * @default 'eds-select'
+     */
+    e2eAttr?: string;
+    /**
+     * Text displayed as the first, unselectable option when no value is chosen. Only visible while
+     * the current value is empty (mirrors the Angular placeholder option).
+     */
+    placeholder?: string;
+    /**
+     * Readonly mode. The `<select>` is replaced by a plain readonly text display of the selected
+     * option label(s) (mirrors `_showReadonlyInput` / `_syncReadonlyValue`).
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Invalid/error state. Reflected as the `eds-select--invalid` class.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether multiple options may be selected. Reflected as the native `multiple` attribute; the
+     * controlled/uncontrolled value becomes a `string[]`.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Accessible label for the control.
+     * @default 'Select an option'
+     */
+    ariaLabel?: string;
+    /**
+     * Controlled value — `string` for single-select, `string[]` for `multiple`. When provided the
+     * control is controlled (React semantics).
+     */
+    value?: string | string[];
+    /** Initial value for an uncontrolled control (`string`, or `string[]` for `multiple`). */
+    defaultValue?: string | string[];
+    /** Fired when the selection changes (mirrors the CVA `onChange` / host `(change)`). */
+    onChange?: (value: string | string[], event: React.ChangeEvent<HTMLSelectElement>) => void;
+    /** Fired when the control loses focus (mirrors the CVA `onTouched` / host `(blur)`). */
+    onBlur?: React.FocusEventHandler<HTMLSelectElement>;
+    /** The projected `EdsOption` / `EdsOptGroup` (native `<option>` / `<optgroup>`) elements. */
+    children?: React.ReactNode;
+}
+export declare const EdsSelect: React.ForwardRefExoticComponent<EdsSelectProps & React.RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=eds-select.d.ts.map

package/eds-select/eds-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-select.d.ts","sourceRoot":"","sources":["../../src/eds-select/eds-select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,0FASpB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACvF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,8FAStB,CAAC;AAEH,MAAM,WAAW,cACb,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,CAAC;IAClG;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3F,wFAAwF;IACxF,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAgDD,eAAO,MAAM,SAAS,0FAyHpB,CAAC"}

package/eds-select/eds-select.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+/**
+ * `EdsOption` — thin typed wrapper over a native `<option>` (the React counterpart of the
+ * `option[edsOption]` directive, which was pure Angular-forms plumbing). Use inside `EdsSelect`.
+ */
+export const EdsOption = React.forwardRef(function EdsOption({ children, ...rest }, ref) {
+    return (_jsx("option", { ref: ref, ...rest, children: children }));
+});
+/**
+ * `EdsOptGroup` — thin typed wrapper over a native `<optgroup>`. The Angular source styles
+ * `optgroup` directly; there is no dedicated Angular directive, this is provided for parity/DX.
+ */
+export const EdsOptGroup = React.forwardRef(function EdsOptGroup({ children, ...rest }, ref) {
+    return (_jsx("optgroup", { ref: ref, ...rest, children: children }));
+});
+/** Read the current value as a normalized string list (for readonly-label + placeholder logic). */
+function toValueList(value) {
+    if (value === undefined) {
+        return [];
+    }
+    return Array.isArray(value) ? value : [value];
+}
+/**
+ * Resolve the display labels for the given selected values by scanning the projected option
+ * children (mirrors `_syncReadonlyValue` joining `selectedOptions.map(o => o.text)`).
+ */
+function collectSelectedLabels(children, selected, placeholder) {
+    const labels = [];
+    const visit = (nodes) => {
+        React.Children.forEach(nodes, (node) => {
+            if (!React.isValidElement(node)) {
+                return;
+            }
+            const props = node.props;
+            // optgroup — descend into its children
+            if (node.type === EdsOptGroup || node.type === 'optgroup') {
+                visit(props.children);
+                return;
+            }
+            const optionValue = props.value !== undefined ? String(props.value) : undefined;
+            if (optionValue !== undefined && selected.includes(optionValue)) {
+                const text = props.label ??
+                    (typeof props.children === 'string' || typeof props.children === 'number'
+                        ? String(props.children)
+                        : optionValue);
+                if (text !== placeholder) {
+                    labels.push(text);
+                }
+            }
+        });
+    };
+    visit(children);
+    return labels;
+}
+export const EdsSelect = React.forwardRef(function EdsSelect({ e2eAttr = 'eds-select', placeholder, readonly = false, isInvalid = false, multiple = false, ariaLabel = 'Select an option', value, defaultValue, onChange, onBlur, className, children, ...rest }, ref) {
+    const isControlled = value !== undefined;
+    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 the current value for the placeholder + readonly-label logic in the uncontrolled case.
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? (multiple ? [] : ''));
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const selectedList = toValueList(currentValue);
+    // Placeholder is "selected" while there is no chosen value (mirrors _isPlaceholderSelected).
+    const isPlaceholderSelected = placeholder !== undefined &&
+        (selectedList.length === 0 || selectedList.every((v) => v === '' || v === placeholder));
+    const rootClass = useMemo(() => [
+        'eds-select',
+        readonly ? 'eds-select--readonly' : '',
+        isPlaceholderSelected ? 'eds-select--placeholder' : '',
+        isInvalid ? 'eds-select--invalid' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' '), [readonly, isPlaceholderSelected, isInvalid, className]);
+    const handleChange = useCallback((event) => {
+        let next;
+        if (multiple) {
+            next = Array.from(event.target.selectedOptions).map((o) => o.value);
+        }
+        else {
+            next = event.target.value;
+        }
+        if (!isControlled) {
+            setUncontrolledValue(next);
+        }
+        onChange?.(next, event);
+    }, [isControlled, multiple, onChange]);
+    // Readonly mode → plain text display of the selected labels (mirrors the readonly <input>).
+    if (readonly) {
+        const labels = collectSelectedLabels(children, selectedList, placeholder);
+        const displayValue = labels.join(', ');
+        return (_jsx("input", { type: "text", readOnly: true, tabIndex: -1, className: `eds-select__readonly-display ${className ?? ''}`.trim(), value: displayValue, "aria-label": displayValue || 'No selection', "data-e2e": e2eAttr }));
+    }
+    // Placeholder option — rendered first, disabled + hidden, shown while no value selected.
+    const placeholderOption = placeholder !== undefined ? (_jsx("option", { className: "eds-select__placeholder", value: "", disabled: true, hidden: !multiple, children: placeholder })) : null;
+    const controlledProps = isControlled
+        ? { value: value }
+        : { defaultValue: defaultValue ?? (multiple ? [] : placeholder !== undefined ? '' : undefined) };
+    return (_jsxs("select", { ref: setRefs, className: rootClass, "data-e2e": e2eAttr, multiple: multiple || undefined, "aria-label": ariaLabel, "aria-invalid": isInvalid || undefined, onChange: handleChange, onBlur: onBlur, ...controlledProps, ...rest, children: [placeholderOption, children] }));
+});
+//# sourceMappingURL=eds-select.js.map

package/eds-select/eds-select.js.map

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

package/eds-select/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsSelect, EdsOption, EdsOptGroup } from './eds-select.js';
+export type { EdsSelectProps, EdsOptionProps, EdsOptGroupProps } from './eds-select.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC"}

package/eds-select/index.js

@@ -0,0 +1,2 @@
+export { EdsSelect, EdsOption, EdsOptGroup } from './eds-select.js';
+//# sourceMappingURL=index.js.map

package/eds-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/eds-skeleton/eds-skeleton.css

@@ -0,0 +1,113 @@
+/**
+ * eds-skeleton.css — 1:1 port of eds-skeleton.scss (pure-React light-DOM CSS).
+ * `:host` → `.eds-skeleton`; `:host.eds-skeleton--x` → `.eds-skeleton.eds-skeleton--x`.
+ * The `.eui-21` wrapper is dropped (share-ready); tokens/keyframes copied verbatim.
+ * This component is class-based (BEM modifiers), so selectors keep `.eds-skeleton--*`.
+ */
+
+.eds-skeleton {
+    display: inline-flex;
+    position: relative;
+    background-color: var(--eds-c-surface-neutral-subtler);
+    overflow: hidden;
+}
+
+.eds-skeleton::after {
+    content: "";
+    animation: eds-skeleton-shimmer 1.2s infinite;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
+}
+
+/* SHAPES */
+
+.eds-skeleton.eds-skeleton--circle {
+    border-radius: var(--eds-br-max);
+    height: 3rem;
+    width: 3rem;
+}
+
+.eds-skeleton.eds-skeleton--line {
+    display: block;
+    height: var(--eds-sp-m);
+    width: 100%;
+}
+
+.eds-skeleton.eds-skeleton--square {
+    height: 3rem;
+    width: 3rem;
+}
+
+.eds-skeleton.eds-skeleton--rectangle {
+    height: var(--eds-sp-xl);
+    width: 100%;
+}
+
+.eds-skeleton.eds-skeleton--rounded {
+    border-radius: var(--eds-br-m);
+}
+
+/* SIZES — XS */
+
+.eds-skeleton.eds-skeleton--size-xs.eds-skeleton--line,
+.eds-skeleton.eds-skeleton--size-xs.eds-skeleton--rectangle {
+    width: 5rem;
+}
+
+.eds-skeleton.eds-skeleton--size-xs.eds-skeleton--circle,
+.eds-skeleton.eds-skeleton--size-xs.eds-skeleton--square {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+/* SIZES — S */
+
+.eds-skeleton.eds-skeleton--size-s.eds-skeleton--line,
+.eds-skeleton.eds-skeleton--size-s.eds-skeleton--rectangle {
+    width: 10%;
+}
+
+.eds-skeleton.eds-skeleton--size-s.eds-skeleton--circle,
+.eds-skeleton.eds-skeleton--size-s.eds-skeleton--square {
+    width: 2rem;
+    height: 2rem;
+}
+
+/* SIZES — M */
+
+.eds-skeleton.eds-skeleton--size-m.eds-skeleton--line,
+.eds-skeleton.eds-skeleton--size-m.eds-skeleton--rectangle {
+    width: 25%;
+}
+
+.eds-skeleton.eds-skeleton--size-m.eds-skeleton--circle,
+.eds-skeleton.eds-skeleton--size-m.eds-skeleton--square {
+    width: 3rem;
+    height: 3rem;
+}
+
+/* SIZES — L */
+
+.eds-skeleton.eds-skeleton--size-l.eds-skeleton--line,
+.eds-skeleton.eds-skeleton--size-l.eds-skeleton--rectangle {
+    width: 50%;
+}
+
+.eds-skeleton.eds-skeleton--size-l.eds-skeleton--circle,
+.eds-skeleton.eds-skeleton--size-l.eds-skeleton--square {
+    width: 4rem;
+    height: 4rem;
+}
+
+@keyframes eds-skeleton-shimmer {
+    0% {
+        transform: translate(-100%);
+    }
+    100% {
+        transform: translate(100%);
+    }
+}

package/eds-skeleton/eds-skeleton.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+/**
+ * Local narrowed union — the skeleton's size contract (ported 1:1 from the Angular
+ * `eds-skeleton`, which drives sizing through the shared `EdsSizeDirective`). The
+ * skeleton visually supports `xs | s | m | l`; the value is reflected as the BEM
+ * modifier class `eds-skeleton--size-<size>` (class-based source, see rule 9).
+ */
+export type EdsSkeletonSize = 'xs' | 's' | 'm' | 'l';
+export interface EdsSkeletonProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Renders the skeleton as a circle shape. @default false */
+    circle?: boolean;
+    /** Renders the skeleton as a line shape (full-width, thin). @default false */
+    line?: boolean;
+    /** Renders the skeleton as a square shape. @default false */
+    square?: boolean;
+    /** Renders the skeleton as a rectangle shape (full-width, taller). @default false */
+    rectangle?: boolean;
+    /** Applies rounded corners to rectangle/square shapes. @default false */
+    rounded?: boolean;
+    /**
+     * Size of the skeleton. Reflected as the `eds-skeleton--size-<size>` modifier
+     * class. When omitted, no size modifier is applied (base shape dimensions).
+     */
+    size?: EdsSkeletonSize;
+    /** Data attribute for e2e testing. @default 'eds-skeleton' */
+    e2eAttr?: string;
+}
+/**
+ * `EdsSkeleton` — pure React port of the Angular `eds-skeleton`.
+ *
+ * A decorative loading placeholder rendered in various shapes (`circle`, `line`,
+ * `square`, `rectangle`) and sizes, with an animated shimmer overlay (CSS `::after`).
+ * The Angular source is class-based (it composes `EdsSizeDirective` and computes a
+ * `hostClasses()` BEM string), so — per the pure-React migration guide's rule 9 — the
+ * React port reproduces the BEM modifier classes verbatim in `className` rather than
+ * reflecting `data-*` attributes, and the ported CSS keeps `.eds-skeleton--<modifier>`
+ * selectors.
+ *
+ * Accessibility: the element is purely decorative and sets `aria-hidden="true"`.
+ * Consumers should wrap skeleton placeholders in a container with `aria-busy="true"`
+ * and an `aria-label`.
+ *
+ * Requires `@eui/eds-styles` + the `eui-21` class on an ancestor, like the Angular
+ * component.
+ */
+export declare const EdsSkeleton: React.ForwardRefExoticComponent<EdsSkeletonProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-skeleton.d.ts.map

package/eds-skeleton/eds-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-skeleton.d.ts","sourceRoot":"","sources":["../../src/eds-skeleton/eds-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAErD,MAAM,WAAW,gBACb,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC7C,6DAA6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6DAA6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW,0FAuCtB,CAAC"}

package/eds-skeleton/eds-skeleton.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsSkeleton` — pure React port of the Angular `eds-skeleton`.
+ *
+ * A decorative loading placeholder rendered in various shapes (`circle`, `line`,
+ * `square`, `rectangle`) and sizes, with an animated shimmer overlay (CSS `::after`).
+ * The Angular source is class-based (it composes `EdsSizeDirective` and computes a
+ * `hostClasses()` BEM string), so — per the pure-React migration guide's rule 9 — the
+ * React port reproduces the BEM modifier classes verbatim in `className` rather than
+ * reflecting `data-*` attributes, and the ported CSS keeps `.eds-skeleton--<modifier>`
+ * selectors.
+ *
+ * Accessibility: the element is purely decorative and sets `aria-hidden="true"`.
+ * Consumers should wrap skeleton placeholders in a container with `aria-busy="true"`
+ * and an `aria-label`.
+ *
+ * Requires `@eui/eds-styles` + the `eui-21` class on an ancestor, like the Angular
+ * component.
+ */
+export const EdsSkeleton = React.forwardRef(function EdsSkeleton({ circle = false, line = false, square = false, rectangle = false, rounded = false, size, e2eAttr = 'eds-skeleton', className, ...rest }, ref) {
+    // Mirrors the Angular `hostClasses()` computed: the root class, the size modifier
+    // (from EdsSizeDirective.getCssClass → `eds-skeleton--size-<size>`), then each
+    // active shape/state modifier. Empty entries are filtered out.
+    const hostClasses = [
+        'eds-skeleton',
+        size ? `eds-skeleton--size-${size}` : '',
+        circle ? 'eds-skeleton--circle' : '',
+        line ? 'eds-skeleton--line' : '',
+        square ? 'eds-skeleton--square' : '',
+        rectangle ? 'eds-skeleton--rectangle' : '',
+        rounded ? 'eds-skeleton--rounded' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("span", { ref: ref, className: hostClasses, "aria-hidden": "true", "data-e2e": e2eAttr, ...rest }));
+});
+//# sourceMappingURL=eds-skeleton.js.map

package/eds-skeleton/eds-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-skeleton.js","sourceRoot":"","sources":["../../src/eds-skeleton/eds-skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+B/B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAoC,SAAS,WAAW,CAC/F,EACI,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,KAAK,EACZ,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,IAAI,EACJ,OAAO,GAAG,cAAc,EACxB,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,kFAAkF;IAClF,+EAA+E;IAC/E,+DAA+D;IAC/D,MAAM,WAAW,GAAG;QAChB,cAAc;QACd,IAAI,CAAC,CAAC,CAAC,sBAAsB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACxC,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;QACpC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;QAChC,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;QACpC,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE;QAC1C,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;QACtC,SAAS,IAAI,EAAE;KAClB;SACI,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEf,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,WAAW,iBACV,MAAM,cACR,OAAO,KACb,IAAI,GACV,CACL,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-skeleton/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsSkeleton } from './eds-skeleton.js';
+export type { EdsSkeletonProps, EdsSkeletonSize } from './eds-skeleton.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/eds-skeleton/index.js

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

package/eds-skeleton/index.js.map

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

package/eds-slider/eds-slider.css

@@ -0,0 +1,150 @@
+/* EDS React — eds-slider styles.
+ * 1:1 port of the Angular eds-slider.scss. The Angular source is class-based
+ * (hostClasses() computes `eds-slider`, `eds-slider--primary|--critical`,
+ * `eds-slider--disabled`, `eds-slider--invalid`) rather than String-Props reflected
+ * attributes, so this CSS keeps those BEM classes verbatim (guide Part 1 rule 9) —
+ * `.eds-slider.eds-slider--disabled`, not `data-*`. The `.eui-21` wrapper is dropped
+ * (share-ready); tokens cascade from an ancestor `.eui-21` context. */
+
+.eds-slider {
+    --_slider-active-color: var(--eds-c-surface-primary);
+    --_slider-track-color: var(--eds-c-surface-elevation-sunken);
+    --_slider-cursor: pointer;
+    --_slider-handler-ring-display: block;
+    --_slider-ticks-color: var(--eds-c-border-neutral);
+
+    display: block;
+    width: 100%;
+}
+
+.eds-slider.eds-slider--disabled {
+    --_slider-cursor: default;
+    --_slider-handler-ring-display: none;
+
+    opacity: 0.4;
+    pointer-events: none;
+}
+
+.eds-slider.eds-slider--primary {
+    --_slider-active-color: var(--eds-c-surface-primary);
+}
+
+.eds-slider.eds-slider--critical {
+    --_slider-active-color: var(--eds-c-surface-critical);
+    --_slider-ticks-color: var(--eds-c-border-critical);
+}
+
+.eds-slider.eds-slider--invalid {
+    --_slider-active-color: var(--eds-c-surface-critical);
+    --_slider-ticks-color: var(--eds-c-border-critical);
+}
+
+.eds-slider .eds-slider__range-input {
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+.eds-slider .eds-slider__value-display {
+    font: var(--eds-f-paragraph-s);
+    color: var(--eds-c-foreground);
+    line-height: normal;
+    text-align: right;
+    margin-bottom: var(--eds-sp-2xs);
+}
+
+.eds-slider .eds-slider__container {
+    cursor: var(--_slider-cursor);
+    height: 20px;
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.eds-slider .eds-slider__container .eds-slider__track {
+    background-color: var(--_slider-track-color);
+    height: 4px;
+    width: 100%;
+    position: relative;
+    z-index: 2;
+    border-radius: 2px;
+}
+
+.eds-slider .eds-slider__container .eds-slider__track .eds-slider__track-active {
+    background-color: var(--_slider-active-color);
+    height: 4px;
+    position: absolute;
+    top: 0;
+    border-radius: 2px;
+}
+
+.eds-slider .eds-slider__container .eds-slider__handler {
+    border: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 100px;
+    background-color: var(--_slider-active-color);
+    position: absolute;
+    top: 0;
+    left: 0;
+    cursor: var(--_slider-cursor);
+    outline: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    touch-action: none;
+    z-index: 5;
+    overflow: visible;
+}
+
+.eds-slider .eds-slider__container .eds-slider__handler-start {
+    z-index: 8;
+}
+
+.eds-slider .eds-slider__container .eds-slider__handler-start--max-reached {
+    z-index: 9;
+}
+
+.eds-slider .eds-slider__container .eds-slider__handler-end {
+    z-index: 8;
+}
+
+.eds-slider .eds-slider__container .eds-slider__handler-end--min-reached {
+    z-index: 9;
+}
+
+.eds-slider .eds-slider__container .eds-slider__handler:hover::after,
+.eds-slider .eds-slider__container .eds-slider__handler--dragging::after,
+.eds-slider .eds-slider__container .eds-slider__handler--focused::after {
+    content: '';
+    position: absolute;
+    display: var(--_slider-handler-ring-display);
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    border: 1px solid var(--_slider-active-color);
+    border-radius: 100px;
+    pointer-events: none;
+}
+
+.eds-slider .eds-slider__container .eds-slider__ticks {
+    position: absolute;
+    top: 60%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    transform: translateY(-50%);
+    z-index: 1;
+}
+
+.eds-slider .eds-slider__container .eds-slider__ticks .eds-slider__tick {
+    position: absolute;
+    width: 2px;
+    height: 8px;
+    background-color: var(--_slider-ticks-color);
+    transform: translateX(-50%);
+}