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

package/eds-progress-circle/eds-progress-circle.css

@@ -0,0 +1,96 @@
+/*
+ * eds-progress-circle — pure React port of eds-progress-circle.scss.
+ *
+ * Angular emulated-encapsulation mapping (no shadow DOM here):
+ *   :host.eds-progress-circle        -> .eds-progress-circle (root class on the rendered element)
+ *   &.eds-progress-circle--modifier  -> .eds-progress-circle.eds-progress-circle--modifier
+ *   nested .eds-progress-circle__x    -> .eds-progress-circle .eds-progress-circle__x (descendant)
+ * This is a hostClasses()-computed source, so the BEM modifier classes are kept verbatim
+ * (guide rule 9) rather than translated to [data-*] selectors. The .eui-21 wrapper is dropped
+ * (share-ready). The --_ privates and --eds-* tokens are unchanged; they cascade in from the
+ * .eui-21 context (required on an ancestor), exactly like the Angular component.
+ */
+
+.eds-progress-circle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 6rem;
+    height: 6rem;
+
+    /* Color variants — private custom properties */
+    --_track-color: var(--eds-c-surface-neutral-subtler);
+    --_progress-color: var(--eds-c-border-info);
+    --_label-color: var(--eds-c-foreground-default);
+}
+
+.eds-progress-circle.eds-progress-circle--info {
+    --_progress-color: var(--eds-c-border-info);
+}
+
+.eds-progress-circle.eds-progress-circle--success {
+    --_progress-color: var(--eds-c-border-success);
+}
+
+.eds-progress-circle.eds-progress-circle--warning {
+    --_progress-color: var(--eds-c-border-warning);
+}
+
+.eds-progress-circle.eds-progress-circle--critical {
+    --_progress-color: var(--eds-c-border-critical);
+}
+
+/* Size variants */
+.eds-progress-circle.eds-progress-circle--size-s {
+    width: 4rem;
+    height: 4rem;
+}
+
+.eds-progress-circle.eds-progress-circle--size-s .eds-progress-circle__label {
+    font: var(--eds-f-label-xs);
+}
+
+.eds-progress-circle.eds-progress-circle--size-m {
+    width: 6rem;
+    height: 6rem;
+}
+
+.eds-progress-circle.eds-progress-circle--size-m .eds-progress-circle__label {
+    font: var(--eds-f-label-m-semi-bold);
+}
+
+.eds-progress-circle.eds-progress-circle--size-l {
+    width: 9rem;
+    height: 9rem;
+}
+
+.eds-progress-circle.eds-progress-circle--size-l .eds-progress-circle__label {
+    font: var(--eds-f-label-l-semi-bold);
+}
+
+.eds-progress-circle .eds-progress-circle__svg {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+}
+
+.eds-progress-circle .eds-progress-circle__track {
+    stroke: var(--_track-color);
+}
+
+.eds-progress-circle .eds-progress-circle__progress {
+    stroke: var(--_progress-color);
+    transition: stroke-dashoffset 0.3s ease;
+}
+
+.eds-progress-circle .eds-progress-circle__label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font: var(--eds-f-label-m-semi-bold);
+    color: var(--_label-color);
+    white-space: nowrap;
+    user-select: none;
+}

package/eds-progress-circle/eds-progress-circle.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+/**
+ * Supported color types for the progress circle — the component's semantic color contract.
+ *
+ * The Angular `eds-progress-circle` drives its color either through `EdsColorDirective`
+ * (`edsInfo` / `edsSuccess` / `edsWarning` / `edsCritical` / `edsColorVariant`) or, when
+ * `useColorSteps` is enabled, automatically via value thresholds. Only these four values are
+ * styled by the SCSS (`--info | --success | --warning | --critical`). This prop reproduces the
+ * directive-resolved color axis.
+ */
+export type EdsProgressCircleColorType = 'info' | 'success' | 'warning' | 'critical';
+/**
+ * Local narrowed size union — ported from the SCSS (`--size-s | --size-m | --size-l`).
+ * Matches the `EdsSizeDirective` values the component styles.
+ */
+export type EdsProgressCircleSize = 's' | 'm' | 'l';
+/**
+ * ARIA role — `progressbar` for task-completion progress, `meter` for a scalar measurement
+ * within a known range.
+ */
+export type EdsProgressCircleRole = 'progressbar' | 'meter';
+export interface EdsProgressCircleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'role'> {
+    /** Data attribute value for end-to-end testing identification. @default 'eds-progress-circle' */
+    e2eAttr?: string;
+    /** ARIA role for the component. @default 'progressbar' */
+    role?: EdsProgressCircleRole;
+    /** Accessibility label for the progress circle. @default 'Progress' */
+    ariaLabel?: string | null;
+    /** Current progress value (0–100). Values outside the range are clamped. @default 0 */
+    value?: number;
+    /**
+     * Custom label to display inside the circle instead of the default percentage.
+     * When not set, displays `{value}%`.
+     */
+    valueLabel?: string;
+    /** Label to display when value is 0. @default 'N/A' */
+    emptyLabel?: string;
+    /** Whether to show the value label inside the circle. @default true */
+    showValue?: boolean;
+    /**
+     * Whether to use automatic color step transitions based on value thresholds.
+     * When enabled, color changes automatically: success → warning → critical. @default false
+     */
+    useColorSteps?: boolean;
+    /**
+     * Custom color step thresholds as space-separated values (success/warning/critical zones).
+     * @default '33 66'
+     */
+    colorSteps?: string;
+    /**
+     * Semantic color variant. Ignored when `useColorSteps` is `true` (color is then derived
+     * from the value thresholds). @default 'info'
+     */
+    color?: EdsProgressCircleColorType;
+    /** Size variant (`s | m | l`). @default 'm' */
+    size?: EdsProgressCircleSize;
+    /** Stroke width of the progress ring (in SVG units). @default 8 */
+    strokeWidth?: number;
+    children?: React.ReactNode;
+}
+/**
+ * `EdsProgressCircle` — pure React port of the Angular `eds-progress-circle`.
+ *
+ * Circular progress indicator rendered as an SVG ring using the
+ * `stroke-dasharray` / `stroke-dashoffset` technique. Supports customizable colors, sizes,
+ * and labels plus automatic color transitions based on value thresholds.
+ *
+ * This is a `hostClasses()`-computed source, so the BEM modifier classes
+ * (`eds-progress-circle--info|success|warning|critical`, `--size-s|m|l`) are reproduced
+ * verbatim on the root `className` (guide rule 9), not reflected as `data-*` attributes.
+ */
+export declare const EdsProgressCircle: React.ForwardRefExoticComponent<EdsProgressCircleProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-progress-circle.d.ts.map

package/eds-progress-circle/eds-progress-circle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-progress-circle.d.ts","sourceRoot":"","sources":["../../src/eds-progress-circle/eds-progress-circle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;GAQG;AACH,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAErF;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEpD;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxG,iGAAiG;IACjG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,0BAA0B,CAAC;IACnC,+CAA+C;IAC/C,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAKD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,+FA4G5B,CAAC"}

package/eds-progress-circle/eds-progress-circle.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+/** Clamp a value into the 0–100 range (mirrors the Angular `clampValue`). */
+const clampValue = (value) => Math.max(0, Math.min(100, Number.isNaN(value) ? 0 : value));
+/**
+ * `EdsProgressCircle` — pure React port of the Angular `eds-progress-circle`.
+ *
+ * Circular progress indicator rendered as an SVG ring using the
+ * `stroke-dasharray` / `stroke-dashoffset` technique. Supports customizable colors, sizes,
+ * and labels plus automatic color transitions based on value thresholds.
+ *
+ * This is a `hostClasses()`-computed source, so the BEM modifier classes
+ * (`eds-progress-circle--info|success|warning|critical`, `--size-s|m|l`) are reproduced
+ * verbatim on the root `className` (guide rule 9), not reflected as `data-*` attributes.
+ */
+export const EdsProgressCircle = React.forwardRef(function EdsProgressCircle({ e2eAttr = 'eds-progress-circle', role = 'progressbar', ariaLabel = 'Progress', value = 0, valueLabel, emptyLabel = 'N/A', showValue = true, useColorSteps = false, colorSteps = '33 66', color = 'info', size = 'm', strokeWidth = 8, className, children: _children, ...rest }, ref) {
+    const clamped = clampValue(value);
+    // Geometry — ported verbatim from the Angular computed()s.
+    const radius = 50 - strokeWidth / 2;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = circumference - (clamped / 100) * circumference;
+    // resolvedColorClass() — reproduced verbatim from the Angular computed().
+    let resolvedColorClass;
+    if (useColorSteps) {
+        const steps = colorSteps
+            .split(/[ ,]+/g)
+            .map((s) => parseInt(s, 10));
+        const step1 = steps[0] ?? 33;
+        const step2 = steps[1] ?? 66;
+        if (clamped <= step1)
+            resolvedColorClass = 'eds-progress-circle--success';
+        else if (clamped <= step2)
+            resolvedColorClass = 'eds-progress-circle--warning';
+        else
+            resolvedColorClass = 'eds-progress-circle--critical';
+    }
+    else {
+        resolvedColorClass = `eds-progress-circle--${color}`;
+    }
+    // hostClasses() — reproduced verbatim from the Angular computed().
+    const sizeClass = `eds-progress-circle--size-${size}`;
+    const hostClasses = [
+        'eds-progress-circle',
+        sizeClass,
+        resolvedColorClass || 'eds-progress-circle--info',
+    ]
+        .join(' ')
+        .trim();
+    const rootClassName = className ? `${hostClasses} ${className}` : hostClasses;
+    // displayLabel() — reproduced verbatim from the Angular computed().
+    let displayLabel = '';
+    if (showValue) {
+        if (clamped === 0)
+            displayLabel = emptyLabel;
+        else
+            displayLabel = valueLabel ?? `${Math.round(clamped)}%`;
+    }
+    // ariaValueText() — reproduced verbatim from the Angular computed().
+    let ariaValueText = null;
+    if (valueLabel)
+        ariaValueText = valueLabel;
+    else if (clamped === 0)
+        ariaValueText = emptyLabel;
+    return (_jsxs("div", { ref: ref, className: rootClassName, "data-e2e": e2eAttr, role: role, "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuetext": ariaValueText ?? undefined, "aria-label": ariaLabel ?? undefined, ...rest, children: [_jsxs("svg", { viewBox: "0 0 100 100", className: "eds-progress-circle__svg", children: [_jsx("circle", { className: "eds-progress-circle__track", cx: 50, cy: 50, r: radius, strokeWidth: strokeWidth, fill: "none" }), clamped > 0 && (_jsx("circle", { className: "eds-progress-circle__progress", cx: 50, cy: 50, r: radius, strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: dashOffset, fill: "none", strokeLinecap: "round" }))] }), showValue && _jsx("span", { className: "eds-progress-circle__label", children: displayLabel })] }));
+});
+//# sourceMappingURL=eds-progress-circle.js.map

package/eds-progress-circle/eds-progress-circle.js.map

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

package/eds-progress-circle/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsProgressCircle } from './eds-progress-circle.js';
+export type { EdsProgressCircleProps, EdsProgressCircleColorType, EdsProgressCircleSize, EdsProgressCircleRole, } from './eds-progress-circle.js';
+//# sourceMappingURL=index.d.ts.map

package/eds-progress-circle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-progress-circle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,YAAY,EACR,sBAAsB,EACtB,0BAA0B,EAC1B,qBAAqB,EACrB,qBAAqB,GACxB,MAAM,0BAA0B,CAAC"}

package/eds-progress-circle/index.js

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

package/eds-progress-circle/index.js.map

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

package/eds-rating/eds-rating.css

@@ -0,0 +1,49 @@
+/**
+ * eds-rating — pure-React CSS port of eds-rating.scss.
+ *
+ * The Angular source is class-based (`.eds-rating` / `.eds-rating--disabled`), so the port
+ * keeps those BEM classes rather than `data-*` attributes. `:host.eds-rating` maps to the
+ * root class `.eds-rating`; child element classes nest as descendants. The
+ * `eds-focus-visible-ring-rounded()` mixin is inlined verbatim (offset 1px default).
+ * `.eui-21` wrapper dropped (share-ready).
+ */
+.eds-rating {
+    display: inline-flex;
+    align-items: center;
+}
+
+.eds-rating .eds-rating__star {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--eds-sp-3xs);
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    border-radius: var(--eds-br-s);
+    color: var(--eds-c-foreground-subtler);
+    transition: color 150ms ease-in-out, transform 150ms ease-in-out;
+}
+
+.eds-rating .eds-rating__star:focus-visible:not([readonly]) {
+    outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+    outline-offset: 1px !important;
+    border-radius: var(--eds-br-full) !important;
+}
+
+.eds-rating .eds-rating__star:hover:not(:disabled) {
+    transform: scale(1.15);
+}
+
+.eds-rating .eds-rating__star--filled {
+    --_on-surface: var(--eds-c-foreground-primary);
+    color: var(--eds-c-foreground-primary);
+}
+
+.eds-rating .eds-rating__star:disabled {
+    cursor: not-allowed;
+}
+
+.eds-rating.eds-rating--disabled {
+    opacity: 0.4;
+}

package/eds-rating/eds-rating.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+/**
+ * `EdsRating` — pure React port of the Angular `eds-rating`.
+ *
+ * A star-rating radiogroup: N clickable star buttons following the WAI-ARIA APG Radio
+ * Group pattern (roving `tabindex`, wrapping arrow keys, `Home`/`End`, `Space`), each
+ * rendering an `EdsIcon` (`star-fill:core` when filled, `star:core` otherwise). Clicking
+ * the currently-selected star toggles the rating back to 0.
+ *
+ * The Angular component is a `ControlValueAccessor`. React has no CVA, so the value is
+ * exposed as a controlled `value` + `onChange` pair and/or an uncontrolled `defaultValue`
+ * (⚑ CVA — flag for React forms-API design review). `onRatingChange` mirrors the Angular
+ * `ratingChange` output and fires alongside `onChange`.
+ *
+ * The Angular source is class-based (`hostClasses()` computes `eds-rating` +
+ * `eds-rating--disabled`) rather than String-Props reflected attributes, so the React port
+ * keeps those BEM classes verbatim (guide Part 1 rule 9) — the CSS matches `.eds-rating`
+ * and `.eds-rating--disabled`, not `data-*`.
+ */
+export interface EdsRatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /**
+     * Controlled current rating value. When provided the component is controlled — pair it
+     * with `onChange`. Mirrors the Angular `rating` input / CVA value.
+     */
+    value?: number;
+    /**
+     * Initial rating value for uncontrolled usage. Ignored when `value` is provided.
+     * @default 0
+     */
+    defaultValue?: number;
+    /**
+     * Number of stars to display. Mirrors the Angular `numberOfStars` input.
+     * @default 5
+     */
+    numberOfStars?: number;
+    /**
+     * Whether the rating is disabled. Mirrors the Angular `disabled` input.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Accessible label for the rating group. Mirrors the Angular `ariaLabel` input.
+     * @default 'Rating'
+     */
+    ariaLabel?: string;
+    /**
+     * Value for the `data-e2e` attribute (end-to-end testing identification).
+     * @default 'eds-rating'
+     */
+    e2eAttr?: string;
+    /**
+     * Called with the new rating value whenever it changes (controlled write path).
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Fires with the new rating value on every change. Mirrors the Angular `ratingChange`
+     * output.
+     */
+    onRatingChange?: (value: number) => void;
+    /**
+     * Called when focus leaves a star button. Mirrors the Angular CVA `onTouched`.
+     */
+    onTouched?: () => void;
+}
+export declare const EdsRating: React.ForwardRefExoticComponent<EdsRatingProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-rating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-rating.d.ts","sourceRoot":"","sources":["../../src/eds-rating/eds-rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,cACb,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAC/E;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,SAAS,uFAiJpB,CAAC"}

package/eds-rating/eds-rating.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { EdsIcon } from '../eds-icon/eds-icon.js';
+export const EdsRating = React.forwardRef(function EdsRating({ value, defaultValue = 0, numberOfStars = 5, disabled = false, ariaLabel = 'Rating', e2eAttr = 'eds-rating', onChange, onRatingChange, onTouched, className, ...rest }, ref) {
+    const isControlled = value !== undefined;
+    const [internalRating, setInternalRating] = useState(defaultValue);
+    const rating = isControlled ? value : internalRating;
+    const starRefs = useRef([]);
+    const updateRating = useCallback((next) => {
+        if (!isControlled) {
+            setInternalRating(next);
+        }
+        onRatingChange?.(next);
+        onChange?.(next);
+    }, [isControlled, onRatingChange, onChange]);
+    const focusStar = useCallback((arrayIndex) => {
+        starRefs.current[arrayIndex]?.focus();
+    }, []);
+    /**
+     * Roving-tabindex pattern: when nothing is selected the first star is tabbable,
+     * otherwise only the selected star is tabbable.
+     */
+    const getTabIndex = (starIndex) => {
+        if (rating === 0) {
+            return starIndex === 1 ? 0 : -1;
+        }
+        return starIndex === rating ? 0 : -1;
+    };
+    const onStarClick = (starIndex) => {
+        if (disabled)
+            return;
+        const next = rating === starIndex ? 0 : starIndex;
+        updateRating(next);
+    };
+    const onKeydown = (event, starIndex) => {
+        if (disabled)
+            return;
+        const total = numberOfStars;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp': {
+                event.preventDefault();
+                const nextIndex = starIndex === total ? 1 : starIndex + 1;
+                updateRating(nextIndex);
+                focusStar(nextIndex - 1);
+                break;
+            }
+            case 'ArrowLeft':
+            case 'ArrowDown': {
+                event.preventDefault();
+                const prevIndex = starIndex === 1 ? total : starIndex - 1;
+                updateRating(prevIndex);
+                focusStar(prevIndex - 1);
+                break;
+            }
+            case ' ': {
+                event.preventDefault();
+                if (rating !== starIndex) {
+                    updateRating(starIndex);
+                }
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                updateRating(1);
+                focusStar(0);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                updateRating(total);
+                focusStar(total - 1);
+                break;
+            }
+        }
+    };
+    const stars = Array.from({ length: numberOfStars }, (_, i) => ({
+        index: i + 1,
+        filled: i + 1 <= rating,
+    }));
+    const rootClass = [
+        'eds-rating',
+        disabled ? 'eds-rating--disabled' : '',
+        className ?? '',
+    ]
+        .join(' ')
+        .trim();
+    return (_jsx("div", { ref: ref, className: rootClass, role: "radiogroup", "aria-label": ariaLabel, "data-e2e": e2eAttr, ...rest, children: stars.map((star) => (_jsx("button", { ref: (el) => {
+                starRefs.current[star.index - 1] = el;
+            }, type: "button", className: star.filled
+                ? 'eds-rating__star eds-rating__star--filled'
+                : 'eds-rating__star', disabled: disabled, tabIndex: getTabIndex(star.index), role: "radio", "aria-checked": star.index === rating, "aria-label": `Star ${star.index} of ${numberOfStars}`, onClick: () => onStarClick(star.index), onKeyDown: (event) => onKeydown(event, star.index), onBlur: () => onTouched?.(), children: _jsx(EdsIcon, { icon: star.filled ? 'star-fill:core' : 'star:core', size: "s" }) }, star.index))) }));
+});
+//# sourceMappingURL=eds-rating.js.map

package/eds-rating/eds-rating.js.map

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

package/eds-rating/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsRating } from './eds-rating.js';
+export type { EdsRatingProps } from './eds-rating.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/eds-rating/index.js

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

package/eds-rating/index.js.map

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

package/eds-select/eds-select.css

@@ -0,0 +1,134 @@
+/**
+ * eds-select.css — 1:1 pure-React port of eds-select.scss.
+ *
+ * The Angular file is `:host.eds-select { @include base.eds-input(); @include base.eds-ellipsis(); … }`
+ * plus the harmonized-dropdown block and the readonly-display input. 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 input reset + focus-visible + placeholder + readonly + disabled
+ *                             + invalid declarations (same expansion used in eds-input-text.css)
+ *
+ * The Angular component is class-based, so variant/state selectors stay as BEM classes
+ * (`.eds-select--readonly`, `.eds-select--placeholder`, `.eds-select--invalid`), not `data-*`
+ * (guide rule 9). Native-element attribute selectors (`[multiple="true"]`, `[size]`, `[readonly]`,
+ * `[hidden]`) are kept verbatim — they target the real `<select>` attributes.
+ */
+
+/* --- base.eds-input() + base.eds-ellipsis() on .eds-select --- */
+.eds-select {
+    /* 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;
+    min-height: var(--eds-si-3xl);
+    padding: var(--eds-sp-xs) var(--eds-sp-s);
+    width: 100%;
+
+    /* eds-select-specific base */
+    color: var(--eds-c-foreground-default);
+    overflow-y: auto;
+}
+
+/* eds-focus-visible() (nested in eds-input mixin) */
+.eds-select:focus-visible:not([readonly]) {
+    outline: 2px solid var(--eds-c-border-primary) !important;
+    outline-offset: -2px !important;
+    transition: none;
+}
+
+/* Disabled (from eds-input mixin) */
+.eds-select:disabled {
+    background-color: var(--eds-c-suface-disabled);
+    border-color: var(--eds-c-border-disabled);
+    color: var(--eds-c-foreground-subtler);
+    pointer-events: none;
+}
+
+.eds-select[hidden],
+.eds-select--readonly {
+    display: none;
+}
+
+.eds-select[readonly][multiple="true"] option:checked {
+    background: none;
+}
+
+.eds-select[readonly][multiple="true"] :not(option:checked) {
+    display: none;
+}
+
+.eds-select[multiple="true"],
+.eds-select[size]:not([size="1"]):not([size="0"]) {
+    background-image: none;
+    height: auto;
+    overflow: auto;
+    padding: var(--eds-sp-3xs) 0;
+}
+
+/* Placeholder color */
+.eds-select--placeholder {
+    color: var(--eds-c-foreground-subtler);
+}
+
+/* Invalid (reflected as the --invalid class by hostClasses()) */
+.eds-select--invalid {
+    border-color: var(--eds-c-border-critical);
+}
+
+.eds-select optgroup {
+    font: var(--eds-f-label-m-semi-bold);
+}
+
+.eds-select optgroup,
+.eds-select option {
+    appearance: none;
+    color: var(--eds-c-foreground-default);
+    display: block;
+    padding: var(--eds-sp-3xs);
+    white-space: pre;
+}
+
+.eds-select optgroup:disabled,
+.eds-select option:disabled {
+    color: var(--eds-c-foreground-subtler);
+}
+
+.eds-select optgroup.eds-select__placeholder,
+.eds-select option.eds-select__placeholder {
+    color: var(--eds-c-foreground-subtler) !important;
+}
+
+/* Harmonized dropdown selector (same style & icon for all browsers) */
+.eds-select:not([readonly]):not([multiple]),
+.eds-select[size="1"],
+.eds-select[size="0"] {
+    appearance: none;
+    background-color: var(--eds-c-surface-elevation);
+    /* caret-down icon (EDS Phosphor regular-flat) */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23404040'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
+    background-position: calc(100% - var(--eds-sp-s)) center;
+    background-repeat: no-repeat;
+    background-size: var(--eds-sp-l);
+    padding-right: var(--eds-sp-3xl);
+}
+
+/* Readonly display — plain native input styled to match */
+.eds-select__readonly-display {
+    font: var(--eds-f-paragraph-m);
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+    color: var(--eds-c-foreground-default);
+    padding: var(--eds-sp-xs) 0;
+    width: 100%;
+    pointer-events: none;
+    outline: none;
+}