@eui/eds-react 22.0.0-alpha.10

package/eds-avatar/eds-avatar.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { EdsAvatarIcon } from './eds-avatar-icon.js';
+import { EdsAvatarText } from './eds-avatar-text.js';
+import { EdsAvatarImage } from './eds-avatar-image.js';
+import { EdsAvatarBadge } from './eds-avatar-badge.js';
+import { EdsAvatarContent } from './eds-avatar-content.js';
+/** Types that project into the round `.eds-avatar-wrapper` (mirrors the Angular select slots). */
+const WRAPPER_TYPES = [EdsAvatarIcon, EdsAvatarText, EdsAvatarImage, EdsAvatarBadge];
+/** Whether a projected child (at any depth of the surface slots) is / contains an `EdsAvatarImage`. */
+function containsImage(node) {
+    return React.Children.toArray(node).some((child) => {
+        if (!React.isValidElement(child))
+            return false;
+        if (child.type === EdsAvatarImage)
+            return true;
+        return containsImage(child.props.children);
+    });
+}
+/**
+ * `EdsAvatar` — pure React port of the Angular `eds-avatar`.
+ *
+ * A round identity surface with a color palette and six sizes, holding a projected icon /
+ * text / image and an optional overlay badge, plus an optional label column beside it. The
+ * Angular template splits projection into a round `.eds-avatar-wrapper` (icon / text / image
+ * / badge) and a sibling content slot (`eds-avatar-content`); here `children` are split by
+ * element type into the same two regions. `size` / `color` reflect as `data-*`; `data-image`
+ * is set when an `EdsAvatarImage` is present (mirroring the Angular `contentChild` query).
+ */
+export const EdsAvatar = React.forwardRef(function EdsAvatar({ e2eAttr = 'eds-avatar', size = 'm', ariaLabel = null, color = '', children, className, ...rest }, ref) {
+    const wrapperChildren = [];
+    const contentChildren = [];
+    React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child) && child.type === EdsAvatarContent) {
+            contentChildren.push(child);
+        }
+        else if (React.isValidElement(child) && WRAPPER_TYPES.includes(child.type)) {
+            wrapperChildren.push(child);
+        }
+        else {
+            // Bare content (e.g. a plain EdsAvatarImage / EdsBadge composition) → wrapper slot.
+            wrapperChildren.push(child);
+        }
+    });
+    const hasImage = containsImage(children);
+    return (_jsxs("div", { ref: ref, className: className ? `eds-avatar ${className}` : 'eds-avatar', role: "img", "data-size": size, "data-color": color || undefined, "data-image": hasImage ? '' : undefined, "data-e2e": e2eAttr, "aria-label": ariaLabel ?? undefined, ...rest, children: [_jsx("div", { className: "eds-avatar-wrapper", children: wrapperChildren }), contentChildren] }));
+});
+//# sourceMappingURL=eds-avatar.js.map

package/eds-avatar/eds-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar.js","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AA6B3D,kGAAkG;AAClG,MAAM,aAAa,GAAG,CAAC,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC;AAErF,uGAAuG;AACvG,SAAS,aAAa,CAAC,IAAqB;IACxC,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;QAC/C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAC/C,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc;YAAE,OAAO,IAAI,CAAC;QAC/C,OAAO,aAAa,CAAE,KAAK,CAAC,KAAwC,CAAC,QAAQ,CAAC,CAAC;IACnF,CAAC,CAAC,CAAC;AACP,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAiC,SAAS,SAAS,CACxF,EAAE,OAAO,GAAG,YAAY,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,GAAG,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAClG,GAAG;IAEH,MAAM,eAAe,GAAsB,EAAE,CAAC;IAC9C,MAAM,eAAe,GAAsB,EAAE,CAAC;IAE9C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACvC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,gBAAgB,EAAE,CAAC;YACjE,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;aAAM,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAa,CAAC,EAAE,CAAC;YACpF,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACJ,oFAAoF;YACpF,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IAEzC,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,cAAc,SAAS,EAAE,CAAC,CAAC,CAAC,YAAY,EAC/D,IAAI,EAAC,KAAK,eACC,IAAI,gBACH,KAAK,IAAI,SAAS,gBAClB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,cAC3B,OAAO,gBACL,SAAS,IAAI,SAAS,KAC9B,IAAI,aAER,cAAK,SAAS,EAAC,oBAAoB,YAAE,eAAe,GAAO,EAC1D,eAAe,IACd,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-avatar/index.d.ts

@@ -0,0 +1,19 @@
+export { EdsAvatar } from './eds-avatar.js';
+export type { EdsAvatarProps, EdsAvatarSize } from './eds-avatar.js';
+export { EdsAvatarIcon } from './eds-avatar-icon.js';
+export type { EdsAvatarIconProps } from './eds-avatar-icon.js';
+export { EdsAvatarText } from './eds-avatar-text.js';
+export type { EdsAvatarTextProps } from './eds-avatar-text.js';
+export { EdsAvatarImage } from './eds-avatar-image.js';
+export type { EdsAvatarImageProps } from './eds-avatar-image.js';
+export { EdsAvatarBadge } from './eds-avatar-badge.js';
+export type { EdsAvatarBadgeProps } from './eds-avatar-badge.js';
+export { EdsAvatarList } from './eds-avatar-list.js';
+export type { EdsAvatarListProps } from './eds-avatar-list.js';
+export { EdsAvatarContent } from './eds-avatar-content.js';
+export type { EdsAvatarContentProps } from './eds-avatar-content.js';
+export { EdsAvatarContentLabel } from './eds-avatar-content-label.js';
+export type { EdsAvatarContentLabelProps } from './eds-avatar-content-label.js';
+export { EdsAvatarContentSublabel } from './eds-avatar-content-sublabel.js';
+export type { EdsAvatarContentSublabelProps } from './eds-avatar-content-sublabel.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,YAAY,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAEhF,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,YAAY,EAAE,6BAA6B,EAAE,MAAM,kCAAkC,CAAC"}

package/eds-avatar/index.js

@@ -0,0 +1,10 @@
+export { EdsAvatar } from './eds-avatar.js';
+export { EdsAvatarIcon } from './eds-avatar-icon.js';
+export { EdsAvatarText } from './eds-avatar-text.js';
+export { EdsAvatarImage } from './eds-avatar-image.js';
+export { EdsAvatarBadge } from './eds-avatar-badge.js';
+export { EdsAvatarList } from './eds-avatar-list.js';
+export { EdsAvatarContent } from './eds-avatar-content.js';
+export { EdsAvatarContentLabel } from './eds-avatar-content-label.js';
+export { EdsAvatarContentSublabel } from './eds-avatar-content-sublabel.js';
+//# sourceMappingURL=index.js.map

package/eds-avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC"}

package/eds-badge/eds-badge.css

@@ -0,0 +1,174 @@
+/*
+ * eds-badge — pure React port of eds-badge.scss.
+ *
+ * Angular emulated-encapsulation mapping (no shadow DOM here):
+ *   :host                 -> .eds-badge (root class on the rendered element)
+ *   :host([attr="v"])     -> .eds-badge[data-attr="v"]
+ *   :host([bool])         -> .eds-badge[data-bool]
+ *   :host-context(.X)     -> .X .eds-badge
+ *   base.eds-ellipsis()   -> inlined (overflow/text-overflow/white-space)
+ * The --_eds-badge-* privates and --eds-* tokens are unchanged; tokens cascade in from
+ * the .eui-21 context (required on an ancestor), exactly like the Angular component.
+ */
+
+.eds-badge {
+    /* Common defaults */
+    --_eds-badge-padding: 0 var(--eds-sp-3xs);
+    --_eds-badge-border-radius: var(--eds-br-full);
+    --_eds-badge-border-width: var(--eds-bw-xs);
+    --_eds-badge-font: var(--eds-f-microcopy-xs);
+    --_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-3xs));
+    --_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-3xs));
+    --_eds-badge-empty-size: var(--eds-sp-s);
+
+    /* Default color (neutral) */
+    --_eds-badge-surface: var(--eds-c-surface-neutral);
+    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral);
+    --_eds-badge-border-color: var(--eds-c-border-neutral-subtle);
+
+    display: inline-flex;
+    border: var(--_eds-badge-border-width) solid var(--_eds-badge-border-color);
+    border-radius: var(--_eds-badge-border-radius);
+    background-color: var(--_eds-badge-surface);
+
+    /* a projected eds-icon follows the badge foreground (on-surface) color */
+    --_eds-icon-on-surface: var(--_eds-badge-on-surface);
+}
+
+.eds-badge .eds-badge__wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--_eds-badge-on-surface);
+    height: var(--_eds-badge-height);
+    min-width: var(--_eds-badge-min-width);
+    padding: var(--_eds-badge-padding);
+    font: var(--_eds-badge-font);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* COLOR — filled (default) surface / foreground / border */
+.eds-badge[data-color="primary"] {
+    --_eds-badge-surface: var(--eds-c-surface-primary);
+    --_eds-badge-on-surface: var(--eds-c-on-surface-primary);
+    --_eds-badge-border-color: var(--eds-c-border-primary-subtle);
+}
+.eds-badge[data-color="neutral"] {
+    --_eds-badge-surface: var(--eds-c-surface-neutral);
+    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral);
+    --_eds-badge-border-color: var(--eds-c-border-neutral-subtle);
+}
+.eds-badge[data-color="success"] {
+    --_eds-badge-surface: var(--eds-c-surface-success);
+    --_eds-badge-on-surface: var(--eds-c-on-surface-success);
+    --_eds-badge-border-color: var(--eds-c-border-success-subtle);
+}
+.eds-badge[data-color="info"] {
+    --_eds-badge-surface: var(--eds-c-surface-info);
+    --_eds-badge-on-surface: var(--eds-c-on-surface-info);
+    --_eds-badge-border-color: var(--eds-c-border-info-subtle);
+}
+.eds-badge[data-color="warning"] {
+    --_eds-badge-surface: var(--eds-c-surface-warning);
+    --_eds-badge-on-surface: var(--eds-c-on-surface-warning);
+    --_eds-badge-border-color: var(--eds-c-border-warning-subtle);
+}
+.eds-badge[data-color="critical"] {
+    --_eds-badge-surface: var(--eds-c-surface-critical);
+    --_eds-badge-on-surface: var(--eds-c-on-surface-critical);
+    --_eds-badge-border-color: var(--eds-c-border-critical-subtle);
+}
+
+/* VARIANT — outline: transparent surface, subtler foreground, stronger border */
+.eds-badge[data-variant="outline"] {
+    --_eds-badge-surface: transparent;
+}
+.eds-badge[data-variant="outline"][data-color="primary"] {
+    --_eds-badge-on-surface: var(--eds-c-on-surface-primary-subtler);
+    --_eds-badge-border-color: var(--eds-c-border-primary);
+}
+.eds-badge[data-variant="outline"][data-color="neutral"] {
+    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral-subtler);
+    --_eds-badge-border-color: var(--eds-c-border-neutral);
+}
+.eds-badge[data-variant="outline"][data-color="success"] {
+    --_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler);
+    --_eds-badge-border-color: var(--eds-c-border-success);
+}
+.eds-badge[data-variant="outline"][data-color="info"] {
+    --_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler);
+    --_eds-badge-border-color: var(--eds-c-border-info);
+}
+.eds-badge[data-variant="outline"][data-color="warning"] {
+    --_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler);
+    --_eds-badge-border-color: var(--eds-c-border-warning);
+}
+.eds-badge[data-variant="outline"][data-color="critical"] {
+    --_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler);
+    --_eds-badge-border-color: var(--eds-c-border-critical);
+}
+
+/* SIZE */
+.eds-badge[data-size="s"] {
+    --_eds-badge-height: var(--eds-sp-m);
+    --_eds-badge-min-width: var(--eds-sp-m);
+    --_eds-badge-font: var(--eds-f-microcopy-2xs);
+}
+
+/* EMPTY — dot badge, no content in wrapper */
+.eds-badge[data-empty] {
+    width: var(--_eds-badge-empty-size);
+    height: var(--_eds-badge-empty-size);
+}
+
+/* ICON-ONLY — circular indicator holding a single small icon, no wrapper padding */
+.eds-badge[data-icon-only] .eds-badge__wrapper {
+    padding: 0;
+    width: var(--_eds-badge-height);
+    min-width: var(--_eds-badge-height);
+}
+
+/*
+ * CONTEXTUAL POSITIONING — badge nested inside icon / icon-button / avatar.
+ * :host-context(.X) -> .X .eds-badge (ancestor descendant selector).
+ */
+.eds-icon .eds-badge {
+    position: absolute;
+    left: 60%;
+    top: -20%;
+}
+.eds-icon .eds-badge[data-empty] {
+    left: 60%;
+    top: -10%;
+}
+.eds-icon .eds-badge[data-size="xs"][data-empty] {
+    left: 70%;
+    top: -10%;
+}
+
+.eds-icon-button[size="2xs"] .eds-badge {
+    left: 50%;
+    top: -30%;
+}
+.eds-icon-button[size="xs"] .eds-badge {
+    left: 50%;
+    top: -40%;
+}
+.eds-icon-button[size="s"] .eds-badge {
+    left: 50%;
+    top: -50%;
+}
+.eds-icon-button[size="m"] .eds-badge {
+    left: 50%;
+    top: -40%;
+}
+.eds-icon-button[size="l"] .eds-badge {
+    left: 50%;
+    top: -25%;
+}
+
+.eds-avatar .eds-badge {
+    border: var(--eds-bw-s) solid var(--eds-c-border-inverted);
+}

package/eds-badge/eds-badge.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+/**
+ * Local narrowed unions — the badge's variant contract (ported 1:1 from the Angular
+ * `eds-badge`). No shared-token import.
+ */
+export type EdsBadgeColor = 'primary' | 'neutral' | 'success' | 'info' | 'warning' | 'critical';
+export type EdsBadgeVariant = 'filled' | 'outline';
+export type EdsBadgeSize = 's' | 'm';
+export interface EdsBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** Semantic color of the badge. @default 'neutral' */
+    color?: EdsBadgeColor;
+    /** Visual variant. `filled` = solid surface; `outline` = transparent + stronger border. @default 'filled' */
+    variant?: EdsBadgeVariant;
+    /** Size of the badge. @default 'm' */
+    size?: EdsBadgeSize;
+    /** Whether the badge is a small dot indicator with no text content. @default false */
+    iconOnly?: boolean;
+    /**
+     * Maximum number of characters before truncating. When content exceeds this,
+     * it is replaced with `charReplacement`. `0` disables truncation. @default 0
+     */
+    maxCharCount?: number;
+    /** Text shown when content is truncated. Falls back to `'99+'`. @default '' */
+    charReplacement?: string;
+    /** Data attribute for e2e testing. @default 'eds-badge' */
+    e2eAttr?: string;
+    /**
+     * ARIA label. When `null`, the visible content serves as the accessible name.
+     * @default 'badge'
+     */
+    ariaLabel?: string | null;
+    /** Badge content (text / number / projected icon). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsBadge` — pure React port of the Angular `eds-badge`.
+ *
+ * A badge that displays text, numbers, or a dot indicator with semantic color, size,
+ * and variant styling. Supports content truncation (`maxCharCount`), an automatic empty
+ * state, and an icon-only (dot) mode. No Web Component / `@lit/react` dependency —
+ * behavior is reimplemented with React hooks, styling ported to `eds-badge.css`
+ * (attribute-scoped, `--eds-*` tokens). Requires `@eui/eds-styles` + the `eui-21` class
+ * on an ancestor, like the Angular component.
+ */
+export declare const EdsBadge: React.ForwardRefExoticComponent<EdsBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-badge.d.ts","sourceRoot":"","sources":["../../src/eds-badge/eds-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;AAChG,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,CAAC;AACnD,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,CAAC;AAErC,MAAM,WAAW,aACb,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC5D,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,6GAA6G;IAC7G,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,uFAiEnB,CAAC"}

package/eds-badge/eds-badge.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
+/**
+ * `EdsBadge` — pure React port of the Angular `eds-badge`.
+ *
+ * A badge that displays text, numbers, or a dot indicator with semantic color, size,
+ * and variant styling. Supports content truncation (`maxCharCount`), an automatic empty
+ * state, and an icon-only (dot) mode. No Web Component / `@lit/react` dependency —
+ * behavior is reimplemented with React hooks, styling ported to `eds-badge.css`
+ * (attribute-scoped, `--eds-*` tokens). Requires `@eui/eds-styles` + the `eui-21` class
+ * on an ancestor, like the Angular component.
+ */
+export const EdsBadge = React.forwardRef(function EdsBadge({ color = 'neutral', variant = 'filled', size = 'm', iconOnly = false, maxCharCount = 0, charReplacement = '', e2eAttr = 'eds-badge', ariaLabel = 'badge', children, className, ...rest }, ref) {
+    const contentRef = useRef(null);
+    const [isEmpty, setIsEmpty] = useState(false);
+    const [hasContentUpdated, setHasContentUpdated] = useState(false);
+    const updatedContent = charReplacement || '99+';
+    // Mirrors the Angular effect + cdkObserveContent: measure the projected content to
+    // derive the empty state and truncation flag from the live DOM (outerText length).
+    useLayoutEffect(() => {
+        if (hasContentUpdated) {
+            return;
+        }
+        const el = contentRef.current;
+        if (!el) {
+            return;
+        }
+        const empty = el.childNodes.length === 0;
+        setIsEmpty(empty);
+        if (!empty && maxCharCount !== 0) {
+            const text = el.innerText;
+            setHasContentUpdated(!!text && text.length > maxCharCount);
+        }
+    }, [children, maxCharCount, hasContentUpdated]);
+    const rootClass = className ? `eds-badge ${className}` : 'eds-badge';
+    return (_jsx("span", { ref: ref, className: rootClass, role: "status", "data-color": color, "data-variant": variant, "data-size": size, "data-icon-only": iconOnly ? '' : undefined, "data-empty": isEmpty ? '' : undefined, "data-e2e": e2eAttr, "aria-label": ariaLabel ?? undefined, ...rest, children: hasContentUpdated ? (_jsx("span", { className: "eds-badge__wrapper", children: updatedContent })) : (_jsx("span", { className: "eds-badge__wrapper", ref: contentRef, children: children })) }));
+});
+//# sourceMappingURL=eds-badge.js.map

package/eds-badge/eds-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-badge.js","sourceRoot":"","sources":["../../src/eds-badge/eds-badge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAsC1D;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAiC,SAAS,QAAQ,CACtF,EACI,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,GAAG,EACV,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,CAAC,EAChB,eAAe,GAAG,EAAE,EACpB,OAAO,GAAG,WAAW,EACrB,SAAS,GAAG,OAAO,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EACD,GAAG;IAEH,MAAM,UAAU,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,MAAM,cAAc,GAAG,eAAe,IAAI,KAAK,CAAC;IAEhD,mFAAmF;IACnF,mFAAmF;IACnF,eAAe,CAAC,GAAG,EAAE;QACjB,IAAI,iBAAiB,EAAE,CAAC;YACpB,OAAO;QACX,CAAC;QACD,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,EAAE,EAAE,CAAC;YACN,OAAO;QACX,CAAC;QACD,MAAM,KAAK,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,CAAC;QACzC,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,IAAI,CAAC,KAAK,IAAI,YAAY,KAAK,CAAC,EAAE,CAAC;YAC/B,MAAM,IAAI,GAAG,EAAE,CAAC,SAAS,CAAC;YAC1B,oBAAoB,CAAC,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;QAC/D,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEhD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;IAErE,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,QAAQ,gBACD,KAAK,kBACH,OAAO,eACV,IAAI,oBACC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,gBAC7B,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,cAC1B,OAAO,gBACL,SAAS,IAAI,SAAS,KAC9B,IAAI,YAEP,iBAAiB,CAAC,CAAC,CAAC,CACjB,eAAM,SAAS,EAAC,oBAAoB,YAAE,cAAc,GAAQ,CAC/D,CAAC,CAAC,CAAC,CACA,eAAM,SAAS,EAAC,oBAAoB,EAAC,GAAG,EAAE,UAAU,YAC/C,QAAQ,GACN,CACV,GACE,CACV,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-badge/index.d.ts

@@ -0,0 +1,3 @@
+export { EdsBadge } from './eds-badge.js';
+export type { EdsBadgeProps, EdsBadgeColor, EdsBadgeVariant, EdsBadgeSize } from './eds-badge.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/eds-badge/index.js

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

package/eds-badge/index.js.map

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

package/eds-button/eds-button.css

@@ -0,0 +1,233 @@
+/*
+ * eds-button — pure React port of eds-button.scss.
+ * Class-based (pre-String-Props) source: variants are BEM classes computed in the
+ * component's hostClasses(), so the CSS keeps `.eds-button.eds-button--type-primary` style
+ * selectors verbatim (guide Part 1 rule 9) — NOT data-* attributes. `:host.eds-button` ->
+ * `.eds-button` (the host IS the button); the `.eui-21` wrapper is dropped (share-ready).
+ * Focus-ring mixins inlined from base.eds-focus-visible-ring / *-rounded.
+ */
+
+/* ---------- TYPE + COLOR token mapping ---------- */
+
+.eds-button.eds-button--type-primary {
+    --_border-width: var(--eds-bw-none);
+    --_border-color: transparent;
+}
+.eds-button.eds-button--type-primary.eds-button--primary {
+    --_surface: var(--eds-c-surface-primary);
+    --_on-surface: var(--eds-c-on-surface-primary);
+    --_surface-hover: var(--eds-c-surface-primary--hover);
+    --_on-surface-hover: var(--eds-c-on-surface-primary--hover);
+    --_surface-active: var(--eds-c-surface-primary--pressed);
+    --_on-surface-active: var(--eds-c-on-surface-primary--pressed);
+}
+.eds-button.eds-button--type-primary.eds-button--highlight {
+    --_surface: var(--eds-c-surface-highlight);
+    --_on-surface: var(--eds-c-on-surface-highlight);
+    --_surface-hover: var(--eds-c-surface-highlight--hover);
+    --_on-surface-hover: var(--eds-c-on-surface-highlight--hover);
+    --_surface-active: var(--eds-c-surface-highlight--pressed);
+    --_on-surface-active: var(--eds-c-on-surface-highlight--pressed);
+}
+.eds-button.eds-button--type-primary.eds-button--critical {
+    --_surface: var(--eds-c-surface-critical);
+    --_on-surface: var(--eds-c-on-surface-critical);
+    --_surface-hover: var(--eds-c-surface-critical--hover);
+    --_on-surface-hover: var(--eds-c-on-surface-critical--hover);
+    --_surface-active: var(--eds-c-surface-critical--pressed);
+    --_on-surface-active: var(--eds-c-on-surface-critical--pressed);
+}
+.eds-button.eds-button--type-primary:disabled,
+.eds-button.eds-button--type-primary.disabled {
+    --_surface: var(--eds-c-surface-disabled);
+    --_on-surface: var(--eds-c-foreground-disabled);
+    --_surface-hover: var(--eds-c-surface-disabled);
+    --_on-surface-hover: var(--eds-c-foreground-disabled);
+    --_surface-active: var(--eds-c-surface-disabled);
+    --_on-surface-active: var(--eds-c-foreground-disabled);
+}
+
+.eds-button.eds-button--type-secondary {
+    --_border-width: var(--eds-bw-xs);
+    --_surface: transparent;
+}
+.eds-button.eds-button--type-secondary.eds-button--primary {
+    --_border-color: var(--eds-c-border-primary);
+    --_on-surface: var(--eds-c-foreground-primary);
+    --_surface-hover: var(--eds-c-surface-primary-subtle);
+    --_on-surface-hover: var(--eds-c-on-surface-primary-subtle);
+    --_surface-active: var(--eds-c-surface-primary-subtle);
+    --_on-surface-active: var(--eds-c-on-surface-primary-subtle);
+}
+.eds-button.eds-button--type-secondary.eds-button--neutral {
+    --_border-color: var(--eds-c-border-neutral);
+    --_on-surface: var(--eds-c-foreground-neutral);
+    --_surface-hover: var(--eds-c-surface-neutral-subtle);
+    --_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);
+    --_surface-active: var(--eds-c-surface-neutral-subtle);
+    --_on-surface-active: var(--eds-c-on-surface-neutral-subtle);
+}
+.eds-button.eds-button--type-secondary.eds-button--highlight {
+    --_border-color: var(--eds-c-border-highlight);
+    --_on-surface: var(--eds-c-foreground-highlight);
+    --_surface-hover: var(--eds-c-surface-highlight-subtler);
+    --_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);
+    --_surface-active: var(--eds-c-surface-highlight-subtler);
+    --_on-surface-active: var(--eds-c-on-surface-highlight-subtler);
+}
+.eds-button.eds-button--type-secondary.eds-button--critical {
+    --_border-color: var(--eds-c-border-critical);
+    --_on-surface: var(--eds-c-foreground-critical);
+    --_surface-hover: var(--eds-c-surface-critical-subtler);
+    --_on-surface-hover: var(--eds-c-on-surface-critical-subtler);
+    --_surface-active: var(--eds-c-surface-critical-subtler);
+    --_on-surface-active: var(--eds-c-on-surface-critical-subtler);
+}
+.eds-button.eds-button--type-secondary:disabled,
+.eds-button.eds-button--type-secondary.disabled {
+    --_border-width: var(--eds-bw-xs);
+    --_border-color: var(--eds-c-border-disabled);
+    --_surface: var(--eds-c-surface-elevation);
+    --_on-surface: var(--eds-c-foreground-disabled);
+    --_surface-hover: var(--eds-c-surface-elevation);
+    --_on-surface-hover: var(--eds-c-foreground-disabled);
+    --_surface-active: var(--eds-c-surface-elevation);
+    --_on-surface-active: var(--eds-c-foreground-disabled);
+}
+
+.eds-button.eds-button--type-tertiary {
+    --_border-width: var(--eds-bw-none);
+    --_surface: transparent;
+}
+.eds-button.eds-button--type-tertiary.eds-button--primary {
+    --_on-surface: var(--eds-c-foreground-primary);
+    --_surface-hover: var(--eds-c-surface-primary-subtle);
+    --_on-surface-hover: var(--eds-c-on-surface-primary-subtle);
+    --_surface-active: var(--eds-c-surface-primary-subtle);
+    --_on-surface-active: var(--eds-c-on-surface-primary-subtle);
+}
+.eds-button.eds-button--type-tertiary.eds-button--neutral {
+    --_on-surface: var(--eds-c-foreground-neutral);
+    --_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle)); /* parent css vars override (see eds-chip f.e.) */
+    --_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle)); /* parent css vars override (see eds-chip f.e.) */
+    --_surface-active: var(--eds-c-surface-neutral-subtle);
+    --_on-surface-active: var(--eds-c-on-surface-neutral-subtle);
+}
+.eds-button.eds-button--type-tertiary.eds-button--highlight {
+    --_on-surface: var(--eds-c-foreground-highlight);
+    --_surface-hover: var(--eds-c-surface-highlight-subtler);
+    --_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);
+    --_surface-active: var(--eds-c-surface-highlight-subtler);
+    --_on-surface-active: var(--eds-c-on-surface-highlight-subtler);
+}
+.eds-button.eds-button--type-tertiary.eds-button--critical {
+    --_on-surface: var(--eds-c-foreground-critical);
+    --_surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler)); /* parent css vars override (see eds-chip f.e.) */
+    --_on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler)); /* parent css vars override (see eds-chip f.e.) */
+    --_surface-active: var(--eds-c-surface-critical-subtler);
+    --_on-surface-active: var(--eds-c-on-surface-critical-subtler);
+}
+.eds-button.eds-button--type-tertiary:disabled,
+.eds-button.eds-button--type-tertiary.disabled {
+    --_surface: var(--eds-c-surface-elevation);
+    --_on-surface: var(--eds-c-foreground-disabled);
+    --_surface-hover: var(--eds-c-surface-elevation);
+    --_on-surface-hover: var(--eds-c-foreground-disabled);
+    --_surface-active: var(--eds-c-surface-elevation);
+    --_on-surface-active: var(--eds-c-foreground-disabled);
+}
+
+/* ---------- SIZE token mapping ---------- */
+
+/* 40px (default) */
+.eds-button.eds-button--size-m {
+    --_font-size: var(--eds-f-s-m);
+    --_padding: 0 var(--eds-sp-xs);
+    --_size: var(--eds-sp-5xl);
+    --_icon-size: var(--eds-is-m);
+}
+/* 32px */
+.eds-button.eds-button--size-s {
+    --_font-size: var(--eds-f-s-s);
+    --_padding: 0 var(--eds-sp-2xs);
+    --_size: var(--eds-sp-3xl);
+    --_icon-size: var(--eds-is-s);
+}
+/* 52px */
+.eds-button.eds-button--size-l {
+    --_font-size: var(--eds-f-s-l);
+    --_padding: 0 var(--eds-sp-s);
+    --_size: var(--eds-sp-8xl);
+    --_icon-size: var(--eds-is-m);
+}
+
+/* ---------- common styles ---------- */
+
+.eds-button {
+    align-items: center;
+    background-image: none;
+    border-radius: var(--eds-br-s);
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+    outline: none;
+    text-transform: none;
+    transition: none;
+    vertical-align: middle;
+    white-space: nowrap;
+    border-style: solid;
+}
+/* inlined base.eds-focus-visible-ring() */
+.eds-button: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-xs) !important;
+}
+.eds-button .eds-button__container {
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+    gap: var(--eds-sp-2xs);
+    justify-content: center; /* Needed for responsive */
+    width: 100%; /* Needed for responsive */
+}
+
+/* ---------- internal css vars mapping ---------- */
+
+.eds-button {
+    background-color: var(--_surface);
+    color: var(--_on-surface);
+    border-width: var(--_border-width);
+    border-color: var(--_border-color);
+    font-size: var(--_font-size);
+    min-height: var(--_size);
+    min-width: var(--_size);
+    padding: var(--_padding);
+
+    /* a projected eds-icon follows the button foreground (on-surface) color */
+    --_eds-icon-on-surface: var(--_on-surface);
+}
+.eds-button:hover {
+    background-color: var(--_surface-hover);
+    color: var(--_on-surface-hover);
+    --_eds-icon-on-surface: var(--_on-surface-hover);
+}
+.eds-button:active {
+    background-color: var(--_surface-active);
+    color: var(--_on-surface-active);
+    --_eds-icon-on-surface: var(--_on-surface-active);
+}
+
+/* ---------- other states ---------- */
+
+.eds-button.eds-button--rounded {
+    border-radius: var(--eds-br-full);
+}
+/* inlined base.eds-focus-visible-ring-rounded() */
+.eds-button.eds-button--rounded: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;
+}