@eui/eds 22.0.0-alpha.50 → 22.0.0-alpha.51

package/docs/json/documentation.json

@@ -27327,7 +27327,7 @@
         },
         {
             "name": "EdsBadge",
-            "id": "component-EdsBadge-67832cfdb14e20f2bc77e68a294f3dd8252dc2a045c8c2aadf31d3eac55adeac4fcd73e1a3a7129fa85e2674a625fe39c11479f7dc44535ca363f431db8b3e59",
+            "id": "component-EdsBadge-eff53ba20e9394f26b855080eb8d97a406bdd50bc340954261976d393b3bc37538d689581b50c85b8d60ff833f326a355c96005d6361a65f630b3199d100c85b",
             "file": "packages/eds/eds-badge/eds-badge.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -27362,16 +27362,16 @@
                     "rawdescription": "\n\nARIA label for accessibility. When `null`, the visible content serves as the\naccessible name.\n\n'badge'\n",
                     "jsdoctags": [
                         {
-                            "pos": 2582,
-                            "end": 2604,
+                            "pos": 2570,
+                            "end": 2592,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2583,
-                                "end": 2590,
+                                "pos": 2571,
+                                "end": 2578,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -27397,16 +27397,16 @@
                     "rawdescription": "\n\nText shown when the content is truncated by `maxCharCount`. Falls back to `'99+'`.\n\n''\n",
                     "jsdoctags": [
                         {
-                            "pos": 2273,
-                            "end": 2290,
+                            "pos": 2261,
+                            "end": 2278,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2274,
-                                "end": 2281,
+                                "pos": 2262,
+                                "end": 2269,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -27432,16 +27432,16 @@
                     "rawdescription": "\n\nSemantic color of the badge.\n\n'neutral'\n",
                     "jsdoctags": [
                         {
-                            "pos": 1450,
-                            "end": 1474,
+                            "pos": 1438,
+                            "end": 1462,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1451,
-                                "end": 1458,
+                                "pos": 1439,
+                                "end": 1446,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -27467,16 +27467,16 @@
                     "rawdescription": "\n\nData attribute for e2e testing.\n\n'eds-badge'\n",
                     "jsdoctags": [
                         {
-                            "pos": 2388,
-                            "end": 2414,
+                            "pos": 2376,
+                            "end": 2402,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2389,
-                                "end": 2396,
+                                "pos": 2377,
+                                "end": 2384,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -27502,16 +27502,16 @@
                     "rawdescription": "\n\nMaximum number of characters to display before truncating. When the content\nexceeds this limit it is replaced with `charReplacement`. `0` disables truncation.\n\n0\n",
                     "jsdoctags": [
                         {
-                            "pos": 2080,
-                            "end": 2096,
+                            "pos": 2068,
+                            "end": 2084,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2081,
-                                "end": 2088,
+                                "pos": 2069,
+                                "end": 2076,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -27537,16 +27537,16 @@
                     "rawdescription": "\n\nSize of the badge.\n\n'm'\n",
                     "jsdoctags": [
                         {
-                            "pos": 1826,
-                            "end": 1844,
+                            "pos": 1814,
+                            "end": 1832,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1827,
-                                "end": 1834,
+                                "pos": 1815,
+                                "end": 1822,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -27572,16 +27572,16 @@
                     "rawdescription": "\n\nVisual variant of the badge. `filled` uses a solid semantic surface; `light`\nuses a subtle semantic surface with a matching subtler foreground.\n\n'filled'\n",
                     "jsdoctags": [
                         {
-                            "pos": 1703,
-                            "end": 1726,
+                            "pos": 1691,
+                            "end": 1714,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1704,
-                                "end": 1711,
+                                "pos": 1692,
+                                "end": 1699,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -27712,28 +27712,28 @@
             "description": "<p>A badge component that displays text, numbers, or a dot indicator with semantic\ncolor, size, and variant styling. Supports content truncation, an automatic empty\n(dot) state, and an auto-detected icon-only mode when the sole projected content is\na single icon.</p>\n",
             "rawdescription": "\n\nA badge component that displays text, numbers, or a dot indicator with semantic\ncolor, size, and variant styling. Supports content truncation, an automatic empty\n(dot) state, and an auto-detected icon-only mode when the sole projected content is\na single icon.\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    ElementRef,\n    numberAttribute,\n    computed,\n    effect,\n    input,\n    signal,\n    viewChild,\n} from '@angular/core';\nimport { ObserversModule } from '@angular/cdk/observers';\n\n/**\n * Local narrowed unions — the badge's variant contract. No shared-token import.\n */\nexport type EdsBadgeColor = 'primary' | 'neutral' | 'success' | 'info' | 'warning' | 'critical';\nexport type EdsBadgeVariant = 'filled' | 'light';\nexport type EdsBadgeSize = 'xs' | 's' | 'm' | 'l';\n\n/**\n * @description\n * A badge component that displays text, numbers, or a dot indicator with semantic\n * color, size, and variant styling. Supports content truncation, an automatic empty\n * (dot) state, and an auto-detected icon-only mode when the sole projected content is\n * a single icon.\n */\n@Component({\n    selector: 'eds-badge, span[edsBadge]',\n    templateUrl: './eds-badge.html',\n    styleUrl: './eds-badge.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [ObserversModule],\n    host: {\n        role: 'status',\n        '[attr.color]': 'color()',\n        '[attr.variant]': 'variant()',\n        '[attr.size]': 'size()',\n        '[attr.icon-only]': 'isIconOnly() || null',\n        '[attr.empty]': 'isEmpty() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '[attr.aria-label]': 'ariaLabel()',\n    },\n})\nexport class EdsBadge {\n    /**\n     * Semantic color of the badge.\n     *\n     * @default 'neutral'\n     */\n    color = input<EdsBadgeColor>('neutral');\n\n    /**\n     * Visual variant of the badge. `filled` uses a solid semantic surface; `light`\n     * uses a subtle semantic surface with a matching subtler foreground.\n     *\n     * @default 'filled'\n     */\n    variant = input<EdsBadgeVariant>('filled');\n\n    /**\n     * Size of the badge.\n     *\n     * @default 'm'\n     */\n    size = input<EdsBadgeSize>('m');\n\n    /**\n     * Maximum number of characters to display before truncating. When the content\n     * exceeds this limit it is replaced with `charReplacement`. `0` disables truncation.\n     *\n     * @default 0\n     */\n    maxCharCount = input(0, { transform: numberAttribute });\n\n    /**\n     * Text shown when the content is truncated by `maxCharCount`. Falls back to `'99+'`.\n     *\n     * @default ''\n     */\n    charReplacement = input('');\n\n    /**\n     * Data attribute for e2e testing.\n     *\n     * @default 'eds-badge'\n     */\n    e2eAttr = input('eds-badge');\n\n    /**\n     * ARIA label for accessibility. When `null`, the visible content serves as the\n     * accessible name.\n     *\n     * @default 'badge'\n     */\n    ariaLabel = input<string | null>('badge');\n\n    protected readonly content = viewChild<ElementRef<HTMLElement>>('contentRef');\n\n    /** Whether the projected content is empty (drives the dot/empty state). */\n    protected readonly isEmpty = signal(false);\n\n    /**\n     * Whether the sole projected content is a single icon (drives the circular,\n     * padless icon-only state). Auto-detected from the projected content — not an input.\n     */\n    protected readonly isIconOnly = signal(false);\n\n    /** Whether the content was truncated by `maxCharCount`. */\n    protected readonly hasContentUpdated = signal(false);\n\n    /** The replacement text shown when content is truncated. */\n    protected readonly updatedContent = computed(() => this.charReplacement() || '99+');\n\n    constructor() {\n        effect(() => {\n            const content = this.content();\n            if (content) {\n                this._evaluateContent(content.nativeElement);\n            }\n        });\n    }\n\n    /**\n     * Handles projected content changes and re-evaluates the empty / icon-only /\n     * truncation states.\n     */\n    onContentChanged(): void {\n        const content = this.content();\n        if (content) {\n            this._evaluateContent(content.nativeElement);\n        }\n    }\n\n    /**\n     * Derives the empty and icon-only states from the projected content, then\n     * re-evaluates truncation when there is content.\n     */\n    private _evaluateContent(el: HTMLElement): void {\n        this.isEmpty.set(el.childNodes.length === 0);\n        this.isIconOnly.set(this._isIconOnlyContent(el));\n        if (!this.isEmpty()) {\n            this._checkContent();\n        }\n    }\n\n    /**\n     * Whether the only meaningful projected content is a single icon element\n     * (an `eds-icon` / `[edsIcon]`), with no accompanying text.\n     */\n    private _isIconOnlyContent(el: HTMLElement): boolean {\n        const meaningful = Array.from(el.childNodes).filter(\n            (node) =>\n                node.nodeType === Node.ELEMENT_NODE ||\n                (node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim()),\n        );\n        if (meaningful.length !== 1 || meaningful[0].nodeType !== Node.ELEMENT_NODE) {\n            return false;\n        }\n        const element = meaningful[0] as HTMLElement;\n        return element.tagName.toLowerCase() === 'eds-icon' || element.hasAttribute('edsIcon');\n    }\n\n    /**\n     * Checks whether the content exceeds `maxCharCount` and flags truncation.\n     */\n    private _checkContent(): void {\n        const maxCharCount = this.maxCharCount();\n        const contentEl = this.content();\n        if (maxCharCount !== 0 && contentEl) {\n            const contentText = contentEl.nativeElement.outerText;\n            this.hasContentUpdated.set(!!contentText && contentText.length > maxCharCount);\n        }\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    ElementRef,\n    numberAttribute,\n    computed,\n    effect,\n    input,\n    signal,\n    viewChild,\n} from '@angular/core';\nimport { ObserversModule } from '@angular/cdk/observers';\n\n/**\n * Local narrowed unions — the badge's variant contract. No shared-token import.\n */\nexport type EdsBadgeColor = 'neutral' | 'success' | 'info' | 'warning' | 'critical';\nexport type EdsBadgeVariant = 'filled' | 'light';\nexport type EdsBadgeSize = 'xs' | 's' | 'm' | 'l';\n\n/**\n * @description\n * A badge component that displays text, numbers, or a dot indicator with semantic\n * color, size, and variant styling. Supports content truncation, an automatic empty\n * (dot) state, and an auto-detected icon-only mode when the sole projected content is\n * a single icon.\n */\n@Component({\n    selector: 'eds-badge, span[edsBadge]',\n    templateUrl: './eds-badge.html',\n    styleUrl: './eds-badge.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [ObserversModule],\n    host: {\n        role: 'status',\n        '[attr.color]': 'color()',\n        '[attr.variant]': 'variant()',\n        '[attr.size]': 'size()',\n        '[attr.icon-only]': 'isIconOnly() || null',\n        '[attr.empty]': 'isEmpty() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '[attr.aria-label]': 'ariaLabel()',\n    },\n})\nexport class EdsBadge {\n    /**\n     * Semantic color of the badge.\n     *\n     * @default 'neutral'\n     */\n    color = input<EdsBadgeColor>('neutral');\n\n    /**\n     * Visual variant of the badge. `filled` uses a solid semantic surface; `light`\n     * uses a subtle semantic surface with a matching subtler foreground.\n     *\n     * @default 'filled'\n     */\n    variant = input<EdsBadgeVariant>('filled');\n\n    /**\n     * Size of the badge.\n     *\n     * @default 'm'\n     */\n    size = input<EdsBadgeSize>('m');\n\n    /**\n     * Maximum number of characters to display before truncating. When the content\n     * exceeds this limit it is replaced with `charReplacement`. `0` disables truncation.\n     *\n     * @default 0\n     */\n    maxCharCount = input(0, { transform: numberAttribute });\n\n    /**\n     * Text shown when the content is truncated by `maxCharCount`. Falls back to `'99+'`.\n     *\n     * @default ''\n     */\n    charReplacement = input('');\n\n    /**\n     * Data attribute for e2e testing.\n     *\n     * @default 'eds-badge'\n     */\n    e2eAttr = input('eds-badge');\n\n    /**\n     * ARIA label for accessibility. When `null`, the visible content serves as the\n     * accessible name.\n     *\n     * @default 'badge'\n     */\n    ariaLabel = input<string | null>('badge');\n\n    protected readonly content = viewChild<ElementRef<HTMLElement>>('contentRef');\n\n    /** Whether the projected content is empty (drives the dot/empty state). */\n    protected readonly isEmpty = signal(false);\n\n    /**\n     * Whether the sole projected content is a single icon (drives the circular,\n     * padless icon-only state). Auto-detected from the projected content — not an input.\n     */\n    protected readonly isIconOnly = signal(false);\n\n    /** Whether the content was truncated by `maxCharCount`. */\n    protected readonly hasContentUpdated = signal(false);\n\n    /** The replacement text shown when content is truncated. */\n    protected readonly updatedContent = computed(() => this.charReplacement() || '99+');\n\n    constructor() {\n        effect(() => {\n            const content = this.content();\n            if (content) {\n                this._evaluateContent(content.nativeElement);\n            }\n        });\n    }\n\n    /**\n     * Handles projected content changes and re-evaluates the empty / icon-only /\n     * truncation states.\n     */\n    onContentChanged(): void {\n        const content = this.content();\n        if (content) {\n            this._evaluateContent(content.nativeElement);\n        }\n    }\n\n    /**\n     * Derives the empty and icon-only states from the projected content, then\n     * re-evaluates truncation when there is content.\n     */\n    private _evaluateContent(el: HTMLElement): void {\n        this.isEmpty.set(el.childNodes.length === 0);\n        this.isIconOnly.set(this._isIconOnlyContent(el));\n        if (!this.isEmpty()) {\n            this._checkContent();\n        }\n    }\n\n    /**\n     * Whether the only meaningful projected content is a single icon element\n     * (an `eds-icon` / `[edsIcon]`), with no accompanying text.\n     */\n    private _isIconOnlyContent(el: HTMLElement): boolean {\n        const meaningful = Array.from(el.childNodes).filter(\n            (node) =>\n                node.nodeType === Node.ELEMENT_NODE ||\n                (node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim()),\n        );\n        if (meaningful.length !== 1 || meaningful[0].nodeType !== Node.ELEMENT_NODE) {\n            return false;\n        }\n        const element = meaningful[0] as HTMLElement;\n        return element.tagName.toLowerCase() === 'eds-icon' || element.hasAttribute('edsIcon');\n    }\n\n    /**\n     * Checks whether the content exceeds `maxCharCount` and flags truncation.\n     */\n    private _checkContent(): void {\n        const maxCharCount = this.maxCharCount();\n        const contentEl = this.content();\n        if (maxCharCount !== 0 && contentEl) {\n            const contentText = contentEl.nativeElement.outerText;\n            this.hasContentUpdated.set(!!contentText && contentText.length > maxCharCount);\n        }\n    }\n}\n",
             "styleUrl": "./eds-badge.scss",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n:host {\n    // inherited vars\n    --_eds-badge-size: var(--_eds-badge-size-inherit, calc(var(--eds-sp-m) + var(--eds-sp-3xs)));\n    --_eds-badge-empty-size: var(--_eds-badge-empty-size-inherit, var(--eds-sp-s));\n    --_eds-badge-icon-size: var(--_eds-badge-icon-size-inherit, var(--eds-is-xs));\n\n    // Common defaults\n    --_eds-badge-padding: 0 var(--eds-sp-3xs);\n    --_eds-badge-border-radius: var(--eds-br-full);\n    --_eds-badge-font: var(--eds-f-microcopy-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n\n    // Default color (neutral)\n    --_eds-badge-surface: var(--eds-c-surface-neutral);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral);\n    --_eds-badge-border-color: transparent;\n\n    display: inline-flex;\n    border-radius: var(--_eds-badge-border-radius);\n    background-color: var(--_eds-badge-surface);\n\n    // a projected eds-icon follows the badge foreground (on-surface) color\n    --_eds-icon-color-inherit: var(--_eds-badge-on-surface);\n    --_eds-icon-size-inherit: var(--_eds-badge-icon-size);\n\n    .eds-badge__wrapper {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        color: var(--_eds-badge-on-surface);\n        height: var(--_eds-badge-size);\n        min-width: var(--_eds-badge-size);\n        padding: var(--_eds-badge-padding);\n        font: var(--_eds-badge-font);\n        font-weight: var(--_eds-badge-font-weight);\n        @include base.eds-ellipsis();\n    }\n}\n\n// COLOR — filled (default) surface / foreground / border\n:host([color=\"primary\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-primary);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-primary);\n    --_eds-badge-border-color: transparent;\n}\n:host([color=\"neutral\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-neutral);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral);\n}\n:host([color=\"success\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-success);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-success);\n}\n:host([color=\"info\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-info);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-info);\n}\n:host([color=\"warning\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-warning);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-warning);\n}\n:host([color=\"critical\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-critical);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-critical);\n}\n\n// VARIANT — light: subtle semantic surface with a matching subtler foreground\n:host([variant=\"light\"][color=\"primary\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-primary-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-primary-subtler);\n}\n:host([variant=\"light\"][color=\"neutral\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-neutral-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral-subtler);\n}\n:host([variant=\"light\"][color=\"success\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-success-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler);\n}\n:host([variant=\"light\"][color=\"info\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-info-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler);\n}\n:host([variant=\"light\"][color=\"warning\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-warning-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler);\n}\n:host([variant=\"light\"][color=\"critical\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-critical-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler);\n}\n\n// SIZE\n:host([size=\"xs\"]) {\n    --_eds-badge-size: var(--eds-sp-s);\n    --_eds-badge-font: var(--eds-f-supportive-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n    --_eds-badge-empty-size: var(--eds-sp-2xs);\n}\n:host([size=\"s\"]) {\n    --_eds-badge-size: var(--eds-sp-m);\n    --_eds-badge-font: var(--eds-f-supportive-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n}\n:host([size=\"l\"]) {\n    --_eds-badge-size: calc(var(--eds-sp-m) + var(--eds-sp-2xs));\n    --_eds-badge-font: var(--eds-f-microcopy-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n    --_eds-badge-empty-size: var(--eds-sp-m);\n}\n\n// EMPTY — dot badge, no content in wrapper\n:host([empty]) {\n    width: var(--_eds-badge-empty-size);\n    height: var(--_eds-badge-empty-size);\n}\n\n// ICON-ONLY — auto-detected when the sole projected content is a single icon:\n// circular indicator holding that icon, no wrapper padding\n:host([icon-only]) {\n    .eds-badge__wrapper {\n        padding: 0;\n        width: var(--_eds-badge-size);\n        min-width: var(--_eds-badge-size);\n    }\n}\n\n// icon > badge\n.eds-icon {\n    :host {\n        position: absolute;\n        top: 0;\n        right: 0;\n        transform: translate(40%, -25%);\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    // inherited vars\n    --_eds-badge-size: var(--_eds-badge-size-inherit, calc(var(--eds-sp-m) + var(--eds-sp-3xs)));\n    --_eds-badge-empty-size: var(--_eds-badge-empty-size-inherit, var(--eds-sp-s));\n    --_eds-badge-icon-size: var(--_eds-badge-icon-size-inherit, var(--eds-is-xs));\n\n    // Common defaults\n    --_eds-badge-padding: 0 var(--eds-sp-3xs);\n    --_eds-badge-border-radius: var(--eds-br-full);\n    --_eds-badge-font: var(--eds-f-microcopy-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n\n    // Default color (neutral)\n    --_eds-badge-surface: var(--eds-c-surface-neutral);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral);\n    --_eds-badge-border-color: transparent;\n\n    display: inline-flex;\n    border-radius: var(--_eds-badge-border-radius);\n    border: var(--eds-bw-xs) solid var(--_eds-badge-border-color);\n    background-color: var(--_eds-badge-surface);\n\n    // a projected eds-icon follows the badge foreground (on-surface) color\n    --_eds-icon-color-inherit: var(--_eds-badge-on-surface);\n    --_eds-icon-size-inherit: var(--_eds-badge-icon-size);\n\n    .eds-badge__wrapper {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        color: var(--_eds-badge-on-surface);\n        height: var(--_eds-badge-size);\n        min-width: var(--_eds-badge-size);\n        padding: var(--_eds-badge-padding);\n        font: var(--_eds-badge-font);\n        font-weight: var(--_eds-badge-font-weight);\n        @include base.eds-ellipsis();\n    }\n}\n\n// COLOR — filled (default) surface / foreground / border\n:host([color=\"neutral\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-neutral);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral);\n}\n:host([color=\"success\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-success);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-success);\n}\n:host([color=\"info\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-info);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-info);\n}\n:host([color=\"warning\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-warning);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-warning);\n}\n:host([color=\"critical\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-critical);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-critical);\n}\n\n// VARIANT — light: subtle semantic surface with a matching subtler foreground\n:host([variant=\"light\"][color=\"neutral\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-elevation-sunken);\n    --_eds-badge-on-surface: var(--eds-c-foreground-subtle);\n    --_eds-badge-border-color: var(--eds-c-border-divider);\n}\n:host([variant=\"light\"][color=\"success\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-success-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-success-subtler);\n}\n:host([variant=\"light\"][color=\"info\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-info-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-info-subtler);\n}\n:host([variant=\"light\"][color=\"warning\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-warning-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-warning-subtler);\n}\n:host([variant=\"light\"][color=\"critical\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-critical-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-critical-subtler);\n}\n\n// SIZE\n:host([size=\"xs\"]) {\n    --_eds-badge-size: var(--eds-sp-s);\n    --_eds-badge-font: var(--eds-f-supportive-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n    --_eds-badge-empty-size: var(--eds-sp-2xs);\n}\n:host([size=\"s\"]) {\n    --_eds-badge-size: var(--eds-sp-m);\n    --_eds-badge-font: var(--eds-f-supportive-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n}\n:host([size=\"l\"]) {\n    --_eds-badge-size: calc(var(--eds-sp-m) + var(--eds-sp-2xs));\n    --_eds-badge-font: var(--eds-f-microcopy-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n    --_eds-badge-empty-size: var(--eds-sp-m);\n}\n\n// EMPTY — dot badge, no content in wrapper\n:host([empty]) {\n    width: var(--_eds-badge-empty-size);\n    height: var(--_eds-badge-empty-size);\n}\n\n// ICON-ONLY — auto-detected when the sole projected content is a single icon:\n// circular indicator holding that icon, no wrapper padding\n:host([icon-only]) {\n    .eds-badge__wrapper {\n        padding: 0;\n        width: var(--_eds-badge-size);\n        min-width: var(--_eds-badge-size);\n    }\n}\n\n// icon > badge\n.eds-icon {\n    :host {\n        position: absolute;\n        top: 0;\n        right: 0;\n        transform: translate(40%, -25%);\n    }\n}\n",
                     "styleUrl": "./eds-badge.scss"
                 }
             ],
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 532,
-                    "end": 819,
+                    "pos": 520,
+                    "end": 807,
                     "kind": 328,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
                     "tagName": {
-                        "pos": 533,
-                        "end": 544,
+                        "pos": 521,
+                        "end": 532,
                         "kind": 80,
                         "id": 0,
                         "flags": 16777216,
@@ -97253,7 +97253,7 @@
                 "name": "nextId",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/eds/eds-tree-list/eds-tree-list-item.ts",
+                "file": "packages/eds/eds-icon-toggle/eds-icon-toggle.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -97264,7 +97264,7 @@
                 "name": "nextId",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/eds/eds-icon-toggle/eds-icon-toggle.ts",
+                "file": "packages/eds/eds-tree-list/eds-tree-list-item.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -99684,7 +99684,7 @@
                 "ctype": "miscellaneous",
                 "subtype": "typealias",
                 "coverageIgnore": false,
-                "rawtype": "\"primary\" | \"neutral\" | \"success\" | \"info\" | \"warning\" | \"critical\"",
+                "rawtype": "\"neutral\" | \"success\" | \"info\" | \"warning\" | \"critical\"",
                 "file": "packages/eds/eds-badge/eds-badge.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -103716,12 +103716,12 @@
                     "defaultValue": "['S', 'M', 'T', 'W', 'T', 'F', 'S']"
                 }
             ],
-            "packages/eds/eds-tree-list/eds-tree-list-item.ts": [
+            "packages/eds/eds-icon-toggle/eds-icon-toggle.ts": [
                 {
                     "name": "nextId",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "packages/eds/eds-tree-list/eds-tree-list-item.ts",
+                    "file": "packages/eds/eds-icon-toggle/eds-icon-toggle.ts",
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
@@ -103729,12 +103729,12 @@
                     "defaultValue": "0"
                 }
             ],
-            "packages/eds/eds-icon-toggle/eds-icon-toggle.ts": [
+            "packages/eds/eds-tree-list/eds-tree-list-item.ts": [
                 {
                     "name": "nextId",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "packages/eds/eds-icon-toggle/eds-icon-toggle.ts",
+                    "file": "packages/eds/eds-tree-list/eds-tree-list-item.ts",
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
@@ -106357,7 +106357,7 @@
                     "ctype": "miscellaneous",
                     "subtype": "typealias",
                     "coverageIgnore": false,
-                    "rawtype": "\"primary\" | \"neutral\" | \"success\" | \"info\" | \"warning\" | \"critical\"",
+                    "rawtype": "\"neutral\" | \"success\" | \"info\" | \"warning\" | \"critical\"",
                     "file": "packages/eds/eds-badge/eds-badge.ts",
                     "deprecated": false,
                     "deprecationMessage": "",

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-10-26T14:00:24.382Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-10-26T19:10:31.079Z, llm-md export.
 
 ## Components
 
@@ -6484,7 +6484,7 @@ Properties:
 - `type EdsAutocompleteMatching = "contains" | "startWith"` — Matching strategy for filtering options.
 - `type EdsAutocompleteSortOrder = "ASC" | "DESC"` — Sort order used for chips and dropdown items.
 - `type EdsAvatarSize = "2xs" | "xs" | "s" | "m" | "l" | "xl"` — Local narrowed size union — the avatar's size contract.
-- `type EdsBadgeColor = "primary" | "neutral" | "success" | "info" | "warning" | "critical"` — Local narrowed unions — the badge's variant contract. No shared-token import.
+- `type EdsBadgeColor = "neutral" | "success" | "info" | "warning" | "critical"` — Local narrowed unions — the badge's variant contract. No shared-token import.
 - `type EdsBadgeSize = "xs" | "s" | "m" | "l"`
 - `type EdsBadgeVariant = "filled" | "light"`
 - `type EdsBannerFontColor = "light" | "dark"`

package/docs/miscellaneous/typealiases.html

@@ -979,7 +979,7 @@ and is forwarded as-is to the internal <code>eds-icon-state</code> status icon.<
             </tr>
             <tr>
                 <td class="col-md-4">
-                    <code>    <code>&quot;primary&quot; | &quot;neutral&quot; | &quot;success&quot; | &quot;info&quot; | &quot;warning&quot; | &quot;critical&quot;</code>
+                    <code>    <code>&quot;neutral&quot; | &quot;success&quot; | &quot;info&quot; | &quot;warning&quot; | &quot;critical&quot;</code>
 </code>
                 </td>
             </tr>

package/docs/properties.html

@@ -128,7 +128,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 22.0.0-alpha.50</li>
+            <b>Version</b> : 22.0.0-alpha.51</li>
     </ul>
 
 

package/fesm2022/eui-eds-eds-badge.mjs

@@ -133,7 +133,7 @@ class EdsBadge {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsBadge, isStandalone: true, selector: "eds-badge, span[edsBadge]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxCharCount: { classPropertyName: "maxCharCount", publicName: "maxCharCount", isSignal: true, isRequired: false, transformFunction: null }, charReplacement: { classPropertyName: "charReplacement", publicName: "charReplacement", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.color": "color()", "attr.variant": "variant()", "attr.size": "size()", "attr.icon-only": "isIconOnly() || null", "attr.empty": "isEmpty() || null", "attr.data-e2e": "e2eAttr()", "attr.aria-label": "ariaLabel()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasContentUpdated()) {\n    <span class=\"eds-badge__wrapper\">\n        {{ updatedContent() }}\n    </span>\n} @else {\n    <span class=\"eds-badge__wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n        <ng-content></ng-content>\n    </span>\n}\n", styles: [":host{--_eds-badge-size: var(--_eds-badge-size-inherit, calc(var(--eds-sp-m) + var(--eds-sp-3xs)));--_eds-badge-empty-size: var(--_eds-badge-empty-size-inherit, var(--eds-sp-s));--_eds-badge-icon-size: var(--_eds-badge-icon-size-inherit, var(--eds-is-xs));--_eds-badge-padding: 0 var(--eds-sp-3xs);--_eds-badge-border-radius: var(--eds-br-full);--_eds-badge-font: var(--eds-f-microcopy-m);--_eds-badge-font-weight: var(--eds-f-w-regular);--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral);--_eds-badge-border-color: transparent;display:inline-flex;border-radius:var(--_eds-badge-border-radius);background-color:var(--_eds-badge-surface);--_eds-icon-color-inherit: var(--_eds-badge-on-surface);--_eds-icon-size-inherit: var(--_eds-badge-icon-size)}:host .eds-badge__wrapper{display:inline-flex;align-items:center;justify-content:center;color:var(--_eds-badge-on-surface);height:var(--_eds-badge-size);min-width:var(--_eds-badge-size);padding:var(--_eds-badge-padding);font:var(--_eds-badge-font);font-weight:var(--_eds-badge-font-weight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([color=primary]){--_eds-badge-surface: var(--eds-c-surface-primary);--_eds-badge-on-surface: var(--eds-c-on-surface-primary);--_eds-badge-border-color: transparent}:host([color=neutral]){--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral)}:host([color=success]){--_eds-badge-surface: var(--eds-c-surface-success);--_eds-badge-on-surface: var(--eds-c-on-surface-success)}:host([color=info]){--_eds-badge-surface: var(--eds-c-surface-info);--_eds-badge-on-surface: var(--eds-c-on-surface-info)}:host([color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning);--_eds-badge-on-surface: var(--eds-c-on-surface-warning)}:host([color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical);--_eds-badge-on-surface: var(--eds-c-on-surface-critical)}:host([variant=light][color=primary]){--_eds-badge-surface: var(--eds-c-surface-primary-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-primary-subtler)}:host([variant=light][color=neutral]){--_eds-badge-surface: var(--eds-c-surface-neutral-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral-subtler)}:host([variant=light][color=success]){--_eds-badge-surface: var(--eds-c-surface-success-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler)}:host([variant=light][color=info]){--_eds-badge-surface: var(--eds-c-surface-info-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler)}:host([variant=light][color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler)}:host([variant=light][color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler)}:host([size=xs]){--_eds-badge-size: var(--eds-sp-s);--_eds-badge-font: var(--eds-f-supportive-m);--_eds-badge-font-weight: var(--eds-f-w-regular);--_eds-badge-empty-size: var(--eds-sp-2xs)}:host([size=s]){--_eds-badge-size: var(--eds-sp-m);--_eds-badge-font: var(--eds-f-supportive-m);--_eds-badge-font-weight: var(--eds-f-w-regular)}:host([size=l]){--_eds-badge-size: calc(var(--eds-sp-m) + var(--eds-sp-2xs));--_eds-badge-font: var(--eds-f-microcopy-m);--_eds-badge-font-weight: var(--eds-f-w-regular);--_eds-badge-empty-size: var(--eds-sp-m)}:host([empty]){width:var(--_eds-badge-empty-size);height:var(--_eds-badge-empty-size)}:host([icon-only]) .eds-badge__wrapper{padding:0;width:var(--_eds-badge-size);min-width:var(--_eds-badge-size)}.eds-icon :host{position:absolute;top:0;right:0;transform:translate(40%,-25%)}\n"], dependencies: [{ kind: "ngmodule", type: ObserversModule }, { kind: "directive", type: i1.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsBadge, isStandalone: true, selector: "eds-badge, span[edsBadge]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxCharCount: { classPropertyName: "maxCharCount", publicName: "maxCharCount", isSignal: true, isRequired: false, transformFunction: null }, charReplacement: { classPropertyName: "charReplacement", publicName: "charReplacement", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.color": "color()", "attr.variant": "variant()", "attr.size": "size()", "attr.icon-only": "isIconOnly() || null", "attr.empty": "isEmpty() || null", "attr.data-e2e": "e2eAttr()", "attr.aria-label": "ariaLabel()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasContentUpdated()) {\n    <span class=\"eds-badge__wrapper\">\n        {{ updatedContent() }}\n    </span>\n} @else {\n    <span class=\"eds-badge__wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n        <ng-content></ng-content>\n    </span>\n}\n", styles: [":host{--_eds-badge-size: var(--_eds-badge-size-inherit, calc(var(--eds-sp-m) + var(--eds-sp-3xs)));--_eds-badge-empty-size: var(--_eds-badge-empty-size-inherit, var(--eds-sp-s));--_eds-badge-icon-size: var(--_eds-badge-icon-size-inherit, var(--eds-is-xs));--_eds-badge-padding: 0 var(--eds-sp-3xs);--_eds-badge-border-radius: var(--eds-br-full);--_eds-badge-font: var(--eds-f-microcopy-m);--_eds-badge-font-weight: var(--eds-f-w-regular);--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral);--_eds-badge-border-color: transparent;display:inline-flex;border-radius:var(--_eds-badge-border-radius);border:var(--eds-bw-xs) solid var(--_eds-badge-border-color);background-color:var(--_eds-badge-surface);--_eds-icon-color-inherit: var(--_eds-badge-on-surface);--_eds-icon-size-inherit: var(--_eds-badge-icon-size)}:host .eds-badge__wrapper{display:inline-flex;align-items:center;justify-content:center;color:var(--_eds-badge-on-surface);height:var(--_eds-badge-size);min-width:var(--_eds-badge-size);padding:var(--_eds-badge-padding);font:var(--_eds-badge-font);font-weight:var(--_eds-badge-font-weight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([color=neutral]){--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral)}:host([color=success]){--_eds-badge-surface: var(--eds-c-surface-success);--_eds-badge-on-surface: var(--eds-c-on-surface-success)}:host([color=info]){--_eds-badge-surface: var(--eds-c-surface-info);--_eds-badge-on-surface: var(--eds-c-on-surface-info)}:host([color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning);--_eds-badge-on-surface: var(--eds-c-on-surface-warning)}:host([color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical);--_eds-badge-on-surface: var(--eds-c-on-surface-critical)}:host([variant=light][color=neutral]){--_eds-badge-surface: var(--eds-c-surface-elevation-sunken);--_eds-badge-on-surface: var(--eds-c-foreground-subtle);--_eds-badge-border-color: var(--eds-c-border-divider)}:host([variant=light][color=success]){--_eds-badge-surface: var(--eds-c-surface-success-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler);--_eds-badge-border-color: var(--eds-c-border-success-subtler)}:host([variant=light][color=info]){--_eds-badge-surface: var(--eds-c-surface-info-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler);--_eds-badge-border-color: var(--eds-c-border-info-subtler)}:host([variant=light][color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler);--_eds-badge-border-color: var(--eds-c-border-warning-subtler)}:host([variant=light][color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler);--_eds-badge-border-color: var(--eds-c-border-critical-subtler)}:host([size=xs]){--_eds-badge-size: var(--eds-sp-s);--_eds-badge-font: var(--eds-f-supportive-m);--_eds-badge-font-weight: var(--eds-f-w-regular);--_eds-badge-empty-size: var(--eds-sp-2xs)}:host([size=s]){--_eds-badge-size: var(--eds-sp-m);--_eds-badge-font: var(--eds-f-supportive-m);--_eds-badge-font-weight: var(--eds-f-w-regular)}:host([size=l]){--_eds-badge-size: calc(var(--eds-sp-m) + var(--eds-sp-2xs));--_eds-badge-font: var(--eds-f-microcopy-m);--_eds-badge-font-weight: var(--eds-f-w-regular);--_eds-badge-empty-size: var(--eds-sp-m)}:host([empty]){width:var(--_eds-badge-empty-size);height:var(--_eds-badge-empty-size)}:host([icon-only]) .eds-badge__wrapper{padding:0;width:var(--_eds-badge-size);min-width:var(--_eds-badge-size)}.eds-icon :host{position:absolute;top:0;right:0;transform:translate(40%,-25%)}\n"], dependencies: [{ kind: "ngmodule", type: ObserversModule }, { kind: "directive", type: i1.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBadge, decorators: [{
             type: Component,
@@ -146,7 +146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '[attr.empty]': 'isEmpty() || null',
                         '[attr.data-e2e]': 'e2eAttr()',
                         '[attr.aria-label]': 'ariaLabel()',
-                    }, template: "@if (hasContentUpdated()) {\n    <span class=\"eds-badge__wrapper\">\n        {{ updatedContent() }}\n    </span>\n} @else {\n    <span class=\"eds-badge__wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n        <ng-content></ng-content>\n    </span>\n}\n", styles: [":host{--_eds-badge-size: var(--_eds-badge-size-inherit, calc(var(--eds-sp-m) + var(--eds-sp-3xs)));--_eds-badge-empty-size: var(--_eds-badge-empty-size-inherit, var(--eds-sp-s));--_eds-badge-icon-size: var(--_eds-badge-icon-size-inherit, var(--eds-is-xs));--_eds-badge-padding: 0 var(--eds-sp-3xs);--_eds-badge-border-radius: var(--eds-br-full);--_eds-badge-font: var(--eds-f-microcopy-m);--_eds-badge-font-weight: var(--eds-f-w-regular);--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral);--_eds-badge-border-color: transparent;display:inline-flex;border-radius:var(--_eds-badge-border-radius);background-color:var(--_eds-badge-surface);--_eds-icon-color-inherit: var(--_eds-badge-on-surface);--_eds-icon-size-inherit: var(--_eds-badge-icon-size)}:host .eds-badge__wrapper{display:inline-flex;align-items:center;justify-content:center;color:var(--_eds-badge-on-surface);height:var(--_eds-badge-size);min-width:var(--_eds-badge-size);padding:var(--_eds-badge-padding);font:var(--_eds-badge-font);font-weight:var(--_eds-badge-font-weight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([color=primary]){--_eds-badge-surface: var(--eds-c-surface-primary);--_eds-badge-on-surface: var(--eds-c-on-surface-primary);--_eds-badge-border-color: transparent}:host([color=neutral]){--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral)}:host([color=success]){--_eds-badge-surface: var(--eds-c-surface-success);--_eds-badge-on-surface: var(--eds-c-on-surface-success)}:host([color=info]){--_eds-badge-surface: var(--eds-c-surface-info);--_eds-badge-on-surface: var(--eds-c-on-surface-info)}:host([color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning);--_eds-badge-on-surface: var(--eds-c-on-surface-warning)}:host([color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical);--_eds-badge-on-surface: var(--eds-c-on-surface-critical)}:host([variant=light][color=primary]){--_eds-badge-surface: var(--eds-c-surface-primary-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-primary-subtler)}:host([variant=light][color=neutral]){--_eds-badge-surface: var(--eds-c-surface-neutral-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral-subtler)}:host([variant=light][color=success]){--_eds-badge-surface: var(--eds-c-surface-success-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler)}:host([variant=light][color=info]){--_eds-badge-surface: var(--eds-c-surface-info-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler)}:host([variant=light][color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler)}:host([variant=light][color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler)}:host([size=xs]){--_eds-badge-size: var(--eds-sp-s);--_eds-badge-font: var(--eds-f-supportive-m);--_eds-badge-font-weight: var(--eds-f-w-regular);--_eds-badge-empty-size: var(--eds-sp-2xs)}:host([size=s]){--_eds-badge-size: var(--eds-sp-m);--_eds-badge-font: var(--eds-f-supportive-m);--_eds-badge-font-weight: var(--eds-f-w-regular)}:host([size=l]){--_eds-badge-size: calc(var(--eds-sp-m) + var(--eds-sp-2xs));--_eds-badge-font: var(--eds-f-microcopy-m);--_eds-badge-font-weight: var(--eds-f-w-regular);--_eds-badge-empty-size: var(--eds-sp-m)}:host([empty]){width:var(--_eds-badge-empty-size);height:var(--_eds-badge-empty-size)}:host([icon-only]) .eds-badge__wrapper{padding:0;width:var(--_eds-badge-size);min-width:var(--_eds-badge-size)}.eds-icon :host{position:absolute;top:0;right:0;transform:translate(40%,-25%)}\n"] }]
+                    }, template: "@if (hasContentUpdated()) {\n    <span class=\"eds-badge__wrapper\">\n        {{ updatedContent() }}\n    </span>\n} @else {\n    <span class=\"eds-badge__wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n        <ng-content></ng-content>\n    </span>\n}\n", styles: [":host{--_eds-badge-size: var(--_eds-badge-size-inherit, calc(var(--eds-sp-m) + var(--eds-sp-3xs)));--_eds-badge-empty-size: var(--_eds-badge-empty-size-inherit, var(--eds-sp-s));--_eds-badge-icon-size: var(--_eds-badge-icon-size-inherit, var(--eds-is-xs));--_eds-badge-padding: 0 var(--eds-sp-3xs);--_eds-badge-border-radius: var(--eds-br-full);--_eds-badge-font: var(--eds-f-microcopy-m);--_eds-badge-font-weight: var(--eds-f-w-regular);--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral);--_eds-badge-border-color: transparent;display:inline-flex;border-radius:var(--_eds-badge-border-radius);border:var(--eds-bw-xs) solid var(--_eds-badge-border-color);background-color:var(--_eds-badge-surface);--_eds-icon-color-inherit: var(--_eds-badge-on-surface);--_eds-icon-size-inherit: var(--_eds-badge-icon-size)}:host .eds-badge__wrapper{display:inline-flex;align-items:center;justify-content:center;color:var(--_eds-badge-on-surface);height:var(--_eds-badge-size);min-width:var(--_eds-badge-size);padding:var(--_eds-badge-padding);font:var(--_eds-badge-font);font-weight:var(--_eds-badge-font-weight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([color=neutral]){--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral)}:host([color=success]){--_eds-badge-surface: var(--eds-c-surface-success);--_eds-badge-on-surface: var(--eds-c-on-surface-success)}:host([color=info]){--_eds-badge-surface: var(--eds-c-surface-info);--_eds-badge-on-surface: var(--eds-c-on-surface-info)}:host([color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning);--_eds-badge-on-surface: var(--eds-c-on-surface-warning)}:host([color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical);--_eds-badge-on-surface: var(--eds-c-on-surface-critical)}:host([variant=light][color=neutral]){--_eds-badge-surface: var(--eds-c-surface-elevation-sunken);--_eds-badge-on-surface: var(--eds-c-foreground-subtle);--_eds-badge-border-color: var(--eds-c-border-divider)}:host([variant=light][color=success]){--_eds-badge-surface: var(--eds-c-surface-success-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler);--_eds-badge-border-color: var(--eds-c-border-success-subtler)}:host([variant=light][color=info]){--_eds-badge-surface: var(--eds-c-surface-info-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler);--_eds-badge-border-color: var(--eds-c-border-info-subtler)}:host([variant=light][color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler);--_eds-badge-border-color: var(--eds-c-border-warning-subtler)}:host([variant=light][color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler);--_eds-badge-border-color: var(--eds-c-border-critical-subtler)}:host([size=xs]){--_eds-badge-size: var(--eds-sp-s);--_eds-badge-font: var(--eds-f-supportive-m);--_eds-badge-font-weight: var(--eds-f-w-regular);--_eds-badge-empty-size: var(--eds-sp-2xs)}:host([size=s]){--_eds-badge-size: var(--eds-sp-m);--_eds-badge-font: var(--eds-f-supportive-m);--_eds-badge-font-weight: var(--eds-f-w-regular)}:host([size=l]){--_eds-badge-size: calc(var(--eds-sp-m) + var(--eds-sp-2xs));--_eds-badge-font: var(--eds-f-microcopy-m);--_eds-badge-font-weight: var(--eds-f-w-regular);--_eds-badge-empty-size: var(--eds-sp-m)}:host([empty]){width:var(--_eds-badge-empty-size);height:var(--_eds-badge-empty-size)}:host([icon-only]) .eds-badge__wrapper{padding:0;width:var(--_eds-badge-size);min-width:var(--_eds-badge-size)}.eds-icon :host{position:absolute;top:0;right:0;transform:translate(40%,-25%)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxCharCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCharCount", required: false }] }], charReplacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "charReplacement", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], content: [{ type: i0.ViewChild, args: ['contentRef', { isSignal: true }] }] } });
 
 const EDS_BADGE = [

package/fesm2022/eui-eds-eds-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-eds-eds-badge.mjs","sources":["../../eds-badge/eds-badge.ts","../../eds-badge/eds-badge.html","../../eds-badge/index.ts","../../eds-badge/eui-eds-eds-badge.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    ElementRef,\n    numberAttribute,\n    computed,\n    effect,\n    input,\n    signal,\n    viewChild,\n} from '@angular/core';\nimport { ObserversModule } from '@angular/cdk/observers';\n\n/**\n * Local narrowed unions — the badge's variant contract. No shared-token import.\n */\nexport type EdsBadgeColor = 'primary' | 'neutral' | 'success' | 'info' | 'warning' | 'critical';\nexport type EdsBadgeVariant = 'filled' | 'light';\nexport type EdsBadgeSize = 'xs' | 's' | 'm' | 'l';\n\n/**\n * @description\n * A badge component that displays text, numbers, or a dot indicator with semantic\n * color, size, and variant styling. Supports content truncation, an automatic empty\n * (dot) state, and an auto-detected icon-only mode when the sole projected content is\n * a single icon.\n */\n@Component({\n    selector: 'eds-badge, span[edsBadge]',\n    templateUrl: './eds-badge.html',\n    styleUrl: './eds-badge.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [ObserversModule],\n    host: {\n        role: 'status',\n        '[attr.color]': 'color()',\n        '[attr.variant]': 'variant()',\n        '[attr.size]': 'size()',\n        '[attr.icon-only]': 'isIconOnly() || null',\n        '[attr.empty]': 'isEmpty() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '[attr.aria-label]': 'ariaLabel()',\n    },\n})\nexport class EdsBadge {\n    /**\n     * Semantic color of the badge.\n     *\n     * @default 'neutral'\n     */\n    color = input<EdsBadgeColor>('neutral');\n\n    /**\n     * Visual variant of the badge. `filled` uses a solid semantic surface; `light`\n     * uses a subtle semantic surface with a matching subtler foreground.\n     *\n     * @default 'filled'\n     */\n    variant = input<EdsBadgeVariant>('filled');\n\n    /**\n     * Size of the badge.\n     *\n     * @default 'm'\n     */\n    size = input<EdsBadgeSize>('m');\n\n    /**\n     * Maximum number of characters to display before truncating. When the content\n     * exceeds this limit it is replaced with `charReplacement`. `0` disables truncation.\n     *\n     * @default 0\n     */\n    maxCharCount = input(0, { transform: numberAttribute });\n\n    /**\n     * Text shown when the content is truncated by `maxCharCount`. Falls back to `'99+'`.\n     *\n     * @default ''\n     */\n    charReplacement = input('');\n\n    /**\n     * Data attribute for e2e testing.\n     *\n     * @default 'eds-badge'\n     */\n    e2eAttr = input('eds-badge');\n\n    /**\n     * ARIA label for accessibility. When `null`, the visible content serves as the\n     * accessible name.\n     *\n     * @default 'badge'\n     */\n    ariaLabel = input<string | null>('badge');\n\n    protected readonly content = viewChild<ElementRef<HTMLElement>>('contentRef');\n\n    /** Whether the projected content is empty (drives the dot/empty state). */\n    protected readonly isEmpty = signal(false);\n\n    /**\n     * Whether the sole projected content is a single icon (drives the circular,\n     * padless icon-only state). Auto-detected from the projected content — not an input.\n     */\n    protected readonly isIconOnly = signal(false);\n\n    /** Whether the content was truncated by `maxCharCount`. */\n    protected readonly hasContentUpdated = signal(false);\n\n    /** The replacement text shown when content is truncated. */\n    protected readonly updatedContent = computed(() => this.charReplacement() || '99+');\n\n    constructor() {\n        effect(() => {\n            const content = this.content();\n            if (content) {\n                this._evaluateContent(content.nativeElement);\n            }\n        });\n    }\n\n    /**\n     * Handles projected content changes and re-evaluates the empty / icon-only /\n     * truncation states.\n     */\n    onContentChanged(): void {\n        const content = this.content();\n        if (content) {\n            this._evaluateContent(content.nativeElement);\n        }\n    }\n\n    /**\n     * Derives the empty and icon-only states from the projected content, then\n     * re-evaluates truncation when there is content.\n     */\n    private _evaluateContent(el: HTMLElement): void {\n        this.isEmpty.set(el.childNodes.length === 0);\n        this.isIconOnly.set(this._isIconOnlyContent(el));\n        if (!this.isEmpty()) {\n            this._checkContent();\n        }\n    }\n\n    /**\n     * Whether the only meaningful projected content is a single icon element\n     * (an `eds-icon` / `[edsIcon]`), with no accompanying text.\n     */\n    private _isIconOnlyContent(el: HTMLElement): boolean {\n        const meaningful = Array.from(el.childNodes).filter(\n            (node) =>\n                node.nodeType === Node.ELEMENT_NODE ||\n                (node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim()),\n        );\n        if (meaningful.length !== 1 || meaningful[0].nodeType !== Node.ELEMENT_NODE) {\n            return false;\n        }\n        const element = meaningful[0] as HTMLElement;\n        return element.tagName.toLowerCase() === 'eds-icon' || element.hasAttribute('edsIcon');\n    }\n\n    /**\n     * Checks whether the content exceeds `maxCharCount` and flags truncation.\n     */\n    private _checkContent(): void {\n        const maxCharCount = this.maxCharCount();\n        const contentEl = this.content();\n        if (maxCharCount !== 0 && contentEl) {\n            const contentText = contentEl.nativeElement.outerText;\n            this.hasContentUpdated.set(!!contentText && contentText.length > maxCharCount);\n        }\n    }\n}\n","@if (hasContentUpdated()) {\n    <span class=\"eds-badge__wrapper\">\n        {{ updatedContent() }}\n    </span>\n} @else {\n    <span class=\"eds-badge__wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n        <ng-content></ng-content>\n    </span>\n}\n","import { EdsBadge } from './eds-badge';\n\nexport * from './eds-badge';\n\nexport const EDS_BADGE = [\n    EdsBadge,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-eds-eds-badge.mjs","sources":["../../eds-badge/eds-badge.ts","../../eds-badge/eds-badge.html","../../eds-badge/index.ts","../../eds-badge/eui-eds-eds-badge.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    ElementRef,\n    numberAttribute,\n    computed,\n    effect,\n    input,\n    signal,\n    viewChild,\n} from '@angular/core';\nimport { ObserversModule } from '@angular/cdk/observers';\n\n/**\n * Local narrowed unions — the badge's variant contract. No shared-token import.\n */\nexport type EdsBadgeColor = 'neutral' | 'success' | 'info' | 'warning' | 'critical';\nexport type EdsBadgeVariant = 'filled' | 'light';\nexport type EdsBadgeSize = 'xs' | 's' | 'm' | 'l';\n\n/**\n * @description\n * A badge component that displays text, numbers, or a dot indicator with semantic\n * color, size, and variant styling. Supports content truncation, an automatic empty\n * (dot) state, and an auto-detected icon-only mode when the sole projected content is\n * a single icon.\n */\n@Component({\n    selector: 'eds-badge, span[edsBadge]',\n    templateUrl: './eds-badge.html',\n    styleUrl: './eds-badge.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [ObserversModule],\n    host: {\n        role: 'status',\n        '[attr.color]': 'color()',\n        '[attr.variant]': 'variant()',\n        '[attr.size]': 'size()',\n        '[attr.icon-only]': 'isIconOnly() || null',\n        '[attr.empty]': 'isEmpty() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '[attr.aria-label]': 'ariaLabel()',\n    },\n})\nexport class EdsBadge {\n    /**\n     * Semantic color of the badge.\n     *\n     * @default 'neutral'\n     */\n    color = input<EdsBadgeColor>('neutral');\n\n    /**\n     * Visual variant of the badge. `filled` uses a solid semantic surface; `light`\n     * uses a subtle semantic surface with a matching subtler foreground.\n     *\n     * @default 'filled'\n     */\n    variant = input<EdsBadgeVariant>('filled');\n\n    /**\n     * Size of the badge.\n     *\n     * @default 'm'\n     */\n    size = input<EdsBadgeSize>('m');\n\n    /**\n     * Maximum number of characters to display before truncating. When the content\n     * exceeds this limit it is replaced with `charReplacement`. `0` disables truncation.\n     *\n     * @default 0\n     */\n    maxCharCount = input(0, { transform: numberAttribute });\n\n    /**\n     * Text shown when the content is truncated by `maxCharCount`. Falls back to `'99+'`.\n     *\n     * @default ''\n     */\n    charReplacement = input('');\n\n    /**\n     * Data attribute for e2e testing.\n     *\n     * @default 'eds-badge'\n     */\n    e2eAttr = input('eds-badge');\n\n    /**\n     * ARIA label for accessibility. When `null`, the visible content serves as the\n     * accessible name.\n     *\n     * @default 'badge'\n     */\n    ariaLabel = input<string | null>('badge');\n\n    protected readonly content = viewChild<ElementRef<HTMLElement>>('contentRef');\n\n    /** Whether the projected content is empty (drives the dot/empty state). */\n    protected readonly isEmpty = signal(false);\n\n    /**\n     * Whether the sole projected content is a single icon (drives the circular,\n     * padless icon-only state). Auto-detected from the projected content — not an input.\n     */\n    protected readonly isIconOnly = signal(false);\n\n    /** Whether the content was truncated by `maxCharCount`. */\n    protected readonly hasContentUpdated = signal(false);\n\n    /** The replacement text shown when content is truncated. */\n    protected readonly updatedContent = computed(() => this.charReplacement() || '99+');\n\n    constructor() {\n        effect(() => {\n            const content = this.content();\n            if (content) {\n                this._evaluateContent(content.nativeElement);\n            }\n        });\n    }\n\n    /**\n     * Handles projected content changes and re-evaluates the empty / icon-only /\n     * truncation states.\n     */\n    onContentChanged(): void {\n        const content = this.content();\n        if (content) {\n            this._evaluateContent(content.nativeElement);\n        }\n    }\n\n    /**\n     * Derives the empty and icon-only states from the projected content, then\n     * re-evaluates truncation when there is content.\n     */\n    private _evaluateContent(el: HTMLElement): void {\n        this.isEmpty.set(el.childNodes.length === 0);\n        this.isIconOnly.set(this._isIconOnlyContent(el));\n        if (!this.isEmpty()) {\n            this._checkContent();\n        }\n    }\n\n    /**\n     * Whether the only meaningful projected content is a single icon element\n     * (an `eds-icon` / `[edsIcon]`), with no accompanying text.\n     */\n    private _isIconOnlyContent(el: HTMLElement): boolean {\n        const meaningful = Array.from(el.childNodes).filter(\n            (node) =>\n                node.nodeType === Node.ELEMENT_NODE ||\n                (node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim()),\n        );\n        if (meaningful.length !== 1 || meaningful[0].nodeType !== Node.ELEMENT_NODE) {\n            return false;\n        }\n        const element = meaningful[0] as HTMLElement;\n        return element.tagName.toLowerCase() === 'eds-icon' || element.hasAttribute('edsIcon');\n    }\n\n    /**\n     * Checks whether the content exceeds `maxCharCount` and flags truncation.\n     */\n    private _checkContent(): void {\n        const maxCharCount = this.maxCharCount();\n        const contentEl = this.content();\n        if (maxCharCount !== 0 && contentEl) {\n            const contentText = contentEl.nativeElement.outerText;\n            this.hasContentUpdated.set(!!contentText && contentText.length > maxCharCount);\n        }\n    }\n}\n","@if (hasContentUpdated()) {\n    <span class=\"eds-badge__wrapper\">\n        {{ updatedContent() }}\n    </span>\n} @else {\n    <span class=\"eds-badge__wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n        <ng-content></ng-content>\n    </span>\n}\n","import { EdsBadge } from './eds-badge';\n\nexport * from './eds-badge';\n\nexport const EDS_BADGE = [\n    EdsBadge,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eui/eds",
-  "version": "22.0.0-alpha.50",
+  "version": "22.0.0-alpha.51",
   "tag": "next",
   "description": "eUI EDS components package",
   "homepage": "https://eui.ecdevops.eu",

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

@@ -4,7 +4,7 @@ import { ElementRef } from '@angular/core';
 /**
  * Local narrowed unions — the badge's variant contract. No shared-token import.
  */
-type EdsBadgeColor = 'primary' | 'neutral' | 'success' | 'info' | 'warning' | 'critical';
+type EdsBadgeColor = 'neutral' | 'success' | 'info' | 'warning' | 'critical';
 type EdsBadgeVariant = 'filled' | 'light';
 type EdsBadgeSize = 'xs' | 's' | 'm' | 'l';
 /**