@eui/eds 22.0.0-alpha.32 → 22.0.0-alpha.34

package/docs/json/EdsBadge.md

@@ -21,7 +21,7 @@ state, and an icon-only (dot) mode.
 
 #### Variant
 ```html
-<eds-badge color="info" variant="outline">New</eds-badge>
+<eds-badge color="info" variant="light">New</eds-badge>
 ```
 
 #### Truncation
@@ -45,4 +45,4 @@ state, and an icon-only (dot) mode.
 - **iconOnly**: `boolean` - Whether the badge is a small dot indicator with no text content.  false
 - **maxCharCount**: `number` - Maximum number of characters to display before truncating. When the content exceeds this limit it is replaced with `charReplacement`. `0` disables truncation.  0
 - **size**: `EdsBadgeSize` - Size of the badge.  'm'
-- **variant**: `EdsBadgeVariant` - Visual variant of the badge. `filled` uses a solid semantic surface; `outline` uses a transparent surface with a stronger border.  'filled'
+- **variant**: `EdsBadgeVariant` - Visual variant of the badge. `filled` uses a solid semantic surface; `light` uses a subtle semantic surface with a matching subtler foreground.  'filled'

package/docs/json/documentation.json

@@ -19589,7 +19589,7 @@
         },
         {
             "name": "EdsBadge",
-            "id": "component-EdsBadge-12979c23aa9fce2b0dfa9b54d3002acb87bcf617b2455ae712542a527b6d5244a9c7389484f8dcff5f76d0038dc79a1c0efa7f1d98464c818b9123b150f50662",
+            "id": "component-EdsBadge-5e0ab81e36ba0a86538ae5e8fcccde39fe0f772181977cfcadaaeadbf1e55f090fe839038001fb971489b4a5dc5b8af92d79641ccfb3377aa8f252ddee8222ed",
             "file": "packages/eds/eds-badge/eds-badge.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -19624,16 +19624,16 @@
                     "rawdescription": "\n\nARIA label for accessibility. When `null`, the visible content serves as the\naccessible name.\n\n'badge'\n",
                     "jsdoctags": [
                         {
-                            "pos": 3236,
-                            "end": 3258,
+                            "pos": 3259,
+                            "end": 3281,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3237,
-                                "end": 3244,
+                                "pos": 3260,
+                                "end": 3267,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -19659,16 +19659,16 @@
                     "rawdescription": "\n\nText shown when the content is truncated by `maxCharCount`. Falls back to `'99+'`.\n\n''\n",
                     "jsdoctags": [
                         {
-                            "pos": 2927,
-                            "end": 2944,
+                            "pos": 2950,
+                            "end": 2967,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2928,
-                                "end": 2935,
+                                "pos": 2951,
+                                "end": 2958,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -19694,16 +19694,16 @@
                     "rawdescription": "\n\nSemantic color of the badge.\n\n'neutral'\n",
                     "jsdoctags": [
                         {
-                            "pos": 1938,
-                            "end": 1962,
+                            "pos": 1947,
+                            "end": 1971,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1939,
-                                "end": 1946,
+                                "pos": 1948,
+                                "end": 1955,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -19729,16 +19729,16 @@
                     "rawdescription": "\n\nData attribute for e2e testing.\n\n'eds-badge'\n",
                     "jsdoctags": [
                         {
-                            "pos": 3042,
-                            "end": 3068,
+                            "pos": 3065,
+                            "end": 3091,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3043,
-                                "end": 3050,
+                                "pos": 3066,
+                                "end": 3073,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -19764,16 +19764,16 @@
                     "rawdescription": "\n\nWhether the badge is a small dot indicator with no text content.\n\nfalse\n",
                     "jsdoctags": [
                         {
-                            "pos": 2453,
-                            "end": 2473,
+                            "pos": 2476,
+                            "end": 2496,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2454,
-                                "end": 2461,
+                                "pos": 2477,
+                                "end": 2484,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -19799,16 +19799,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": 2734,
-                            "end": 2750,
+                            "pos": 2757,
+                            "end": 2773,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2735,
-                                "end": 2742,
+                                "pos": 2758,
+                                "end": 2765,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -19834,16 +19834,16 @@
                     "rawdescription": "\n\nSize of the badge.\n\n'm'\n",
                     "jsdoctags": [
                         {
-                            "pos": 2300,
-                            "end": 2318,
+                            "pos": 2323,
+                            "end": 2341,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2301,
-                                "end": 2308,
+                                "pos": 2324,
+                                "end": 2331,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -19864,21 +19864,21 @@
                     "type": "EdsBadgeVariant",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Visual variant of the badge. <code>filled</code> uses a solid semantic surface; <code>outline</code>\nuses a transparent surface with a stronger border.</p>\n<p>&#39;filled&#39;</p>\n",
+                    "description": "<p>Visual variant of the badge. <code>filled</code> uses a solid semantic surface; <code>light</code>\nuses a subtle semantic surface with a matching subtler foreground.</p>\n<p>&#39;filled&#39;</p>\n",
                     "line": 86,
-                    "rawdescription": "\n\nVisual variant of the badge. `filled` uses a solid semantic surface; `outline`\nuses a transparent surface with a stronger border.\n\n'filled'\n",
+                    "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": 2177,
-                            "end": 2200,
+                            "pos": 2200,
+                            "end": 2223,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2178,
-                                "end": 2185,
+                                "pos": 2201,
+                                "end": 2208,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -19989,31 +19989,31 @@
                     "type": "module"
                 }
             ],
-            "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\nstate, and an icon-only (dot) mode.</p>\n<h4>Basic badge</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge&gt;99&lt;/eds-badge&gt;</code></pre></div><h4>Semantic colors</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge color=&quot;success&quot;&gt;Active&lt;/eds-badge&gt;\n&lt;eds-badge color=&quot;critical&quot;&gt;Error&lt;/eds-badge&gt;</code></pre></div><h4>Variant</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge color=&quot;info&quot; variant=&quot;outline&quot;&gt;New&lt;/eds-badge&gt;</code></pre></div><h4>Truncation</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge [maxCharCount]=&quot;2&quot; charReplacement=&quot;99+&quot;&gt;150&lt;/eds-badge&gt;</code></pre></div><h4>Icon-only (dot indicator)</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge iconOnly color=&quot;critical&quot;&gt;&lt;/eds-badge&gt;</code></pre></div>",
-            "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\nstate, and an icon-only (dot) mode.\n\n#### Basic badge\n```html\n<eds-badge>99</eds-badge>\n```\n\n#### Semantic colors\n```html\n<eds-badge color=\"success\">Active</eds-badge>\n<eds-badge color=\"critical\">Error</eds-badge>\n```\n\n#### Variant\n```html\n<eds-badge color=\"info\" variant=\"outline\">New</eds-badge>\n```\n\n#### Truncation\n```html\n<eds-badge [maxCharCount]=\"2\" charReplacement=\"99+\">150</eds-badge>\n```\n\n#### Icon-only (dot indicator)\n```html\n<eds-badge iconOnly color=\"critical\"></eds-badge>\n```\n",
+            "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\nstate, and an icon-only (dot) mode.</p>\n<h4>Basic badge</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge&gt;99&lt;/eds-badge&gt;</code></pre></div><h4>Semantic colors</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge color=&quot;success&quot;&gt;Active&lt;/eds-badge&gt;\n&lt;eds-badge color=&quot;critical&quot;&gt;Error&lt;/eds-badge&gt;</code></pre></div><h4>Variant</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge color=&quot;info&quot; variant=&quot;light&quot;&gt;New&lt;/eds-badge&gt;</code></pre></div><h4>Truncation</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge [maxCharCount]=&quot;2&quot; charReplacement=&quot;99+&quot;&gt;150&lt;/eds-badge&gt;</code></pre></div><h4>Icon-only (dot indicator)</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge iconOnly color=&quot;critical&quot;&gt;&lt;/eds-badge&gt;</code></pre></div>",
+            "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\nstate, and an icon-only (dot) mode.\n\n#### Basic badge\n```html\n<eds-badge>99</eds-badge>\n```\n\n#### Semantic colors\n```html\n<eds-badge color=\"success\">Active</eds-badge>\n<eds-badge color=\"critical\">Error</eds-badge>\n```\n\n#### Variant\n```html\n<eds-badge color=\"info\" variant=\"light\">New</eds-badge>\n```\n\n#### Truncation\n```html\n<eds-badge [maxCharCount]=\"2\" charReplacement=\"99+\">150</eds-badge>\n```\n\n#### Icon-only (dot indicator)\n```html\n<eds-badge iconOnly color=\"critical\"></eds-badge>\n```\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    ElementRef,\n    booleanAttribute,\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' | 'outline';\nexport type EdsBadgeSize = 's' | 'm';\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 * state, and an icon-only (dot) mode.\n *\n * @usageNotes\n * #### Basic badge\n * ```html\n * <eds-badge>99</eds-badge>\n * ```\n *\n * #### Semantic colors\n * ```html\n * <eds-badge color=\"success\">Active</eds-badge>\n * <eds-badge color=\"critical\">Error</eds-badge>\n * ```\n *\n * #### Variant\n * ```html\n * <eds-badge color=\"info\" variant=\"outline\">New</eds-badge>\n * ```\n *\n * #### Truncation\n * ```html\n * <eds-badge [maxCharCount]=\"2\" charReplacement=\"99+\">150</eds-badge>\n * ```\n *\n * #### Icon-only (dot indicator)\n * ```html\n * <eds-badge iconOnly color=\"critical\"></eds-badge>\n * ```\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]': 'iconOnly() || 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; `outline`\n     * uses a transparent surface with a stronger border.\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     * Whether the badge is a small dot indicator with no text content.\n     *\n     * @default false\n     */\n    iconOnly = input(false, { transform: booleanAttribute });\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    /** 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.isEmpty.set(content.nativeElement.childNodes.length === 0);\n                if (!this.isEmpty()) {\n                    this._checkContent();\n                }\n            }\n        });\n    }\n\n    /**\n     * Handles projected content changes and re-evaluates truncation.\n     */\n    onContentChanged(): void {\n        this._checkContent();\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    booleanAttribute,\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 * state, and an icon-only (dot) mode.\n *\n * @usageNotes\n * #### Basic badge\n * ```html\n * <eds-badge>99</eds-badge>\n * ```\n *\n * #### Semantic colors\n * ```html\n * <eds-badge color=\"success\">Active</eds-badge>\n * <eds-badge color=\"critical\">Error</eds-badge>\n * ```\n *\n * #### Variant\n * ```html\n * <eds-badge color=\"info\" variant=\"light\">New</eds-badge>\n * ```\n *\n * #### Truncation\n * ```html\n * <eds-badge [maxCharCount]=\"2\" charReplacement=\"99+\">150</eds-badge>\n * ```\n *\n * #### Icon-only (dot indicator)\n * ```html\n * <eds-badge iconOnly color=\"critical\"></eds-badge>\n * ```\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]': 'iconOnly() || 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     * Whether the badge is a small dot indicator with no text content.\n     *\n     * @default false\n     */\n    iconOnly = input(false, { transform: booleanAttribute });\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    /** 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.isEmpty.set(content.nativeElement.childNodes.length === 0);\n                if (!this.isEmpty()) {\n                    this._checkContent();\n                }\n            }\n        });\n    }\n\n    /**\n     * Handles projected content changes and re-evaluates truncation.\n     */\n    onContentChanged(): void {\n        this._checkContent();\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    // Common defaults\n    --_eds-badge-padding: 0 var(--eds-sp-3xs);\n    --_eds-badge-border-radius: var(--eds-br-full);\n    --_eds-badge-border-width: var(--eds-bw-xs);\n    --_eds-badge-font: var(--eds-f-microcopy-xs);\n    --_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-3xs));\n    --_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-3xs));\n    --_eds-badge-empty-size: var(--eds-sp-s);\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: var(--eds-c-border-neutral-subtle);\n\n    display: inline-flex;\n    border: var(--_eds-badge-border-width) solid var(--_eds-badge-border-color);\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-on-surface: var(--_eds-badge-on-surface);\n\n    // Reset the icon-size channel so a value inherited from a composing ancestor\n    // (e.g. eds-avatar sets `--_icon-size` for its own slot) does NOT leak into the\n    // badge's projected icon; the icon falls back to its own `size` attribute.\n    --_icon-size: initial;\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-height);\n        min-width: var(--_eds-badge-min-width);\n        padding: var(--_eds-badge-padding);\n        font: var(--_eds-badge-font);\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: var(--eds-c-border-primary-subtle);\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    --_eds-badge-border-color: var(--eds-c-border-neutral-subtle);\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    --_eds-badge-border-color: var(--eds-c-border-success-subtle);\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    --_eds-badge-border-color: var(--eds-c-border-info-subtle);\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    --_eds-badge-border-color: var(--eds-c-border-warning-subtle);\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    --_eds-badge-border-color: var(--eds-c-border-critical-subtle);\n}\n\n// VARIANT — outline: transparent surface, subtler foreground, stronger border\n:host([variant=\"outline\"]) {\n    --_eds-badge-surface: var(--eui-c-surface-container);\n}\n:host([variant=\"outline\"][color=\"primary\"]) {\n    --_eds-badge-on-surface: var(--eds-c-on-surface-primary-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-primary);\n}\n:host([variant=\"outline\"][color=\"neutral\"]) {\n    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-neutral);\n}\n:host([variant=\"outline\"][color=\"success\"]) {\n    --_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-success);\n}\n:host([variant=\"outline\"][color=\"info\"]) {\n    --_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-info);\n}\n:host([variant=\"outline\"][color=\"warning\"]) {\n    --_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-warning);\n}\n:host([variant=\"outline\"][color=\"critical\"]) {\n    --_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-critical);\n}\n\n// SIZE\n:host([size=\"s\"]) {\n    --_eds-badge-height: var(--eds-sp-m);\n    --_eds-badge-min-width: var(--eds-sp-m);\n    --_eds-badge-font: var(--eds-f-microcopy-2xs);\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 — circular indicator holding a single small icon, no wrapper padding\n:host([icon-only]) {\n    .eds-badge__wrapper {\n        padding: 0;\n        width: var(--_eds-badge-height);\n        min-width: var(--_eds-badge-height);\n    }\n}\n\n// CONTEXTUAL POSITIONING — badge projected inside icon / icon-button / avatar\n// ---------------------------------------------------------------------------\n// The badge is content-projected into another component's host, so it must react\n// to that ancestor via :host-context() (the ancestor lives in a different\n// encapsulation scope; a plain descendant selector would not match).\n\n// icon > badge\n:host-context(.eds-icon) {\n    position: absolute;\n    left: 60%;\n    top: -20%;\n}\n\n:host([empty]):host-context(.eds-icon) {\n    left: 60%;\n    top: -10%;\n}\n\n:host([size=\"xs\"][empty]):host-context(.eds-icon) {\n    left: 70%;\n    top: -10%;\n}\n\n// icon-button (per size) > icon > badge\n:host-context(.eds-icon-button[size=\"2xs\"]) {\n    left: 50%;\n    top: -30%;\n}\n\n:host-context(.eds-icon-button[size=\"xs\"]) {\n    left: 50%;\n    top: -40%;\n}\n\n:host-context(.eds-icon-button[size=\"s\"]) {\n    left: 50%;\n    top: -50%;\n}\n\n:host-context(.eds-icon-button[size=\"m\"]) {\n    left: 50%;\n    top: -40%;\n}\n\n:host-context(.eds-icon-button[size=\"l\"]) {\n    left: 50%;\n    top: -25%;\n}\n\n// avatar > badge\n:host-context(.eds-avatar) {\n    border: var(--eds-bw-s) solid var(--eds-c-border-inverted);\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    // Common defaults\n    --_eds-badge-padding: 0 var(--eds-sp-3xs);\n    --_eds-badge-border-radius: var(--eds-br-full);\n    --_eds-badge-border-width: var(--eds-bw-xs);\n    --_eds-badge-font: var(--eds-f-microcopy-xs);\n    --_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-3xs));\n    --_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-3xs));\n    --_eds-badge-empty-size: var(--eds-sp-s);\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: var(--eds-c-border-neutral-subtle);\n\n    display: inline-flex;\n    border: var(--_eds-badge-border-width) solid var(--_eds-badge-border-color);\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-on-surface: var(--_eds-badge-on-surface);\n\n    // Reset the icon-size channel so a value inherited from a composing ancestor\n    // (e.g. eds-avatar sets `--_icon-size` for its own slot) does NOT leak into the\n    // badge's projected icon; the icon falls back to its own `size` attribute.\n    --_icon-size: initial;\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-height);\n        min-width: var(--_eds-badge-min-width);\n        padding: var(--_eds-badge-padding);\n        font: var(--_eds-badge-font);\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: var(--eds-c-border-primary-subtle);\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    --_eds-badge-border-color: var(--eds-c-border-neutral-subtle);\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    --_eds-badge-border-color: var(--eds-c-border-success-subtle);\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    --_eds-badge-border-color: var(--eds-c-border-info-subtle);\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    --_eds-badge-border-color: var(--eds-c-border-warning-subtle);\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    --_eds-badge-border-color: var(--eds-c-border-critical-subtle);\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    --_eds-badge-border-color: var(--eds-c-border-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    --_eds-badge-border-color: var(--eds-c-border-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    --_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-height: var(--eds-sp-s);\n    --_eds-badge-min-width: var(--eds-sp-s);\n    --_eds-badge-font: var(--eds-f-microcopy-2xs);\n    --_eds-badge-empty-size: var(--eds-sp-2xs);\n}\n:host([size=\"s\"]) {\n    --_eds-badge-height: var(--eds-sp-m);\n    --_eds-badge-min-width: var(--eds-sp-m);\n    --_eds-badge-font: var(--eds-f-microcopy-2xs);\n}\n:host([size=\"l\"]) {\n    --_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-2xs));\n    --_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-2xs));\n    --_eds-badge-font: var(--eds-f-microcopy-xs);\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 — circular indicator holding a single small icon, no wrapper padding\n:host([icon-only]) {\n    .eds-badge__wrapper {\n        padding: 0;\n        width: var(--_eds-badge-height);\n        min-width: var(--_eds-badge-height);\n    }\n}\n\n// CONTEXTUAL POSITIONING — badge projected inside icon / icon-button / avatar\n// ---------------------------------------------------------------------------\n// The badge is content-projected into another component's host, so it must react\n// to that ancestor via :host-context() (the ancestor lives in a different\n// encapsulation scope; a plain descendant selector would not match).\n\n// icon > badge\n:host-context(.eds-icon) {\n    position: absolute;\n    left: 60%;\n    top: -20%;\n}\n\n:host([empty]):host-context(.eds-icon) {\n    left: 60%;\n    top: -10%;\n}\n\n:host([size=\"xs\"][empty]):host-context(.eds-icon) {\n    left: 70%;\n    top: -10%;\n}\n\n// icon-button (per size) > icon > badge\n:host-context(.eds-icon-button[size=\"2xs\"]) {\n    left: 50%;\n    top: -30%;\n}\n\n:host-context(.eds-icon-button[size=\"xs\"]) {\n    left: 50%;\n    top: -40%;\n}\n\n:host-context(.eds-icon-button[size=\"s\"]) {\n    left: 50%;\n    top: -50%;\n}\n\n:host-context(.eds-icon-button[size=\"m\"]) {\n    left: 50%;\n    top: -40%;\n}\n\n:host-context(.eds-icon-button[size=\"l\"]) {\n    left: 50%;\n    top: -25%;\n}\n\n// avatar > badge\n:host-context(.eds-avatar) {\n    border: var(--eds-bw-s) solid var(--eds-c-border-inverted);\n}\n",
                     "styleUrl": "./eds-badge.scss"
                 }
             ],
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 543,
-                    "end": 769,
+                    "pos": 554,
+                    "end": 780,
                     "kind": 328,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
                     "tagName": {
-                        "pos": 544,
-                        "end": 555,
+                        "pos": 555,
+                        "end": 566,
                         "kind": 80,
                         "id": 0,
                         "flags": 16777216,
@@ -20023,23 +20023,23 @@
                     "comment": "<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\nstate, and an icon-only (dot) mode.</p>\n"
                 },
                 {
-                    "pos": 769,
-                    "end": 1309,
+                    "pos": 780,
+                    "end": 1318,
                     "kind": 328,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
                     "tagName": {
-                        "pos": 770,
-                        "end": 780,
+                        "pos": 781,
+                        "end": 791,
                         "kind": 80,
                         "id": 0,
                         "flags": 16777216,
                         "transformFlags": 0,
                         "escapedText": "usageNotes"
                     },
-                    "comment": "<h4>Basic badge</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge&gt;99&lt;/eds-badge&gt;</code></pre></div><h4>Semantic colors</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge color=&quot;success&quot;&gt;Active&lt;/eds-badge&gt;\n&lt;eds-badge color=&quot;critical&quot;&gt;Error&lt;/eds-badge&gt;</code></pre></div><h4>Variant</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge color=&quot;info&quot; variant=&quot;outline&quot;&gt;New&lt;/eds-badge&gt;</code></pre></div><h4>Truncation</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge [maxCharCount]=&quot;2&quot; charReplacement=&quot;99+&quot;&gt;150&lt;/eds-badge&gt;</code></pre></div><h4>Icon-only (dot indicator)</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge iconOnly color=&quot;critical&quot;&gt;&lt;/eds-badge&gt;</code></pre></div>"
+                    "comment": "<h4>Basic badge</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge&gt;99&lt;/eds-badge&gt;</code></pre></div><h4>Semantic colors</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge color=&quot;success&quot;&gt;Active&lt;/eds-badge&gt;\n&lt;eds-badge color=&quot;critical&quot;&gt;Error&lt;/eds-badge&gt;</code></pre></div><h4>Variant</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge color=&quot;info&quot; variant=&quot;light&quot;&gt;New&lt;/eds-badge&gt;</code></pre></div><h4>Truncation</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge [maxCharCount]=&quot;2&quot; charReplacement=&quot;99+&quot;&gt;150&lt;/eds-badge&gt;</code></pre></div><h4>Icon-only (dot indicator)</h4>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-badge iconOnly color=&quot;critical&quot;&gt;&lt;/eds-badge&gt;</code></pre></div>"
                 }
             ],
             "constructorObj": {
@@ -41111,7 +41111,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n:host {\n    --_eds-icon-size: var(--_icon-size, var(--eds-is-m)); // inherited from parent\n    // --_eds-icon-on-surface lets a parent (e.g. eds-badge) override the icon color;\n    // when unset, each color variant supplies its own token below.\n    --_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground))); // inherited from parent\n\n    display: inline-flex;\n    position: relative;\n\n    .eds-icon-svg {\n        height: var(--_eds-icon-size);\n        width: var(--_eds-icon-size);\n        fill: var(--_eds-icon-color);\n        color: var(--_eds-icon-color);\n    }\n\n    // Multi-color sprites (flags) — disable fill inheritance so path fill attributes render\n    .eds-icon-svg.eds-icon-set-flags-1x1,\n    .eds-icon-svg.eds-icon-set-flags-4x3 {\n        fill: none;\n    }\n}\n\n// SIZE VARIANTS\n// -------------\n\n// An explicit `size` attribute on the icon is authoritative and resolves directly to\n// its icon-size token. The inherited `--_icon-size` hint (set by a composing parent\n// such as eds-avatar) only drives the base `:host` default above — it must NOT override\n// an explicit `size`, otherwise a parent's inherited value would silently win over the\n// size a consumer passes (e.g. eds-loading-indicator's spinner).\n:host([size=\"3xs\"]) { --_eds-icon-size: var(--eds-is-3xs); }\n:host([size=\"2xs\"]) { --_eds-icon-size: var(--eds-is-2xs); }\n:host([size=\"xs\"])  { --_eds-icon-size: var(--eds-is-xs); }\n:host([size=\"s\"])   { --_eds-icon-size: var(--eds-is-s); }\n:host([size=\"m\"])   { --_eds-icon-size: var(--eds-is-m); }\n:host([size=\"l\"])   { --_eds-icon-size: var(--eds-is-l); }\n:host([size=\"xl\"])  { --_eds-icon-size: var(--eds-is-xl); }\n:host([size=\"2xl\"]) { --_eds-icon-size: var(--eds-is-2xl); }\n:host([size=\"3xl\"]) { --_eds-icon-size: var(--eds-is-3xl); }\n:host([size=\"4xl\"]) { --_eds-icon-size: var(--eds-is-4xl); }\n\n// COLOR VARIANTS\n// --------------\n\n:host([color=\"neutral\"])         { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground)); }\n:host([color=\"neutral-subtle\"])  { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle)); }\n:host([color=\"neutral-subtler\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler)); }\n:host([color=\"primary\"])         { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary)); }\n:host([color=\"highlight\"])       { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight)); }\n:host([color=\"info\"])            { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info)); }\n:host([color=\"success\"])         { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success)); }\n:host([color=\"warning\"])         { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning)); }\n:host([color=\"critical\"])        { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical)); }\n:host([color=\"brand\"])           { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand)); }\n:host([color=\"disabled\"])        { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled)); }\n\n// ROUNDED\n// -------\n\n:host([rounded]) {\n    border-radius: 50%;\n    overflow: hidden;\n\n    .eds-icon-svg {\n        border-radius: 50%;\n    }\n}\n\n// LOADING SPINNER — inherits icon size and color\n// ----------------------------------------------\n\n:host([loading]) {\n    // Spinner ring thickness scales with the icon size so every size reads correctly\n    // (a fixed border would nearly fill the smallest sizes and look too thin on large ones).\n    --_eds-icon-spinner-border: max(2px, calc(var(--_eds-icon-size) * 0.125));\n\n    .eds-icon-spinner {\n        display: inline-block;\n        box-sizing: border-box;\n        width: var(--_eds-icon-size);\n        height: var(--_eds-icon-size);\n        border: var(--_eds-icon-spinner-border) solid var(--eds-c-border-neutral-subtle);\n        border-top-color: var(--_eds-icon-color);\n        border-radius: 50%;\n        animation: eds-icon-spin 0.6s linear infinite;\n    }\n}\n\n@keyframes eds-icon-spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    --_eds-icon-size: var(--_icon-size, var(--eds-is-m)); // inherited from parent\n    // --_eds-icon-on-surface lets a parent (e.g. eds-badge) override the icon color;\n    // when unset, each color variant supplies its own token below.\n    --_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground))); // inherited from parent\n\n    display: inline-flex;\n    position: relative;\n\n    .eds-icon-svg {\n        height: var(--_eds-icon-size);\n        width: var(--_eds-icon-size);\n        fill: var(--_eds-icon-color);\n        color: var(--_eds-icon-color);\n    }\n\n    // Multi-color sprites (flags) — disable fill inheritance so path fill attributes render\n    .eds-icon-svg.eds-icon-set-flags-1x1,\n    .eds-icon-svg.eds-icon-set-flags-4x3 {\n        fill: none;\n    }\n}\n\n// SIZE VARIANTS\n// -------------\n\n// Each `size` attribute resolves to its icon-size token, but a composing parent may\n// override it by setting the inherited `--_icon-size` channel (e.g. eds-avatar sizes\n// its projected icon from the avatar host). When `--_icon-size` is unset, the icon's\n// own `size` token applies — so a standalone icon still honors its `size` attribute,\n// while a composed icon is driven by its container. Parents that must NOT be affected\n// reset the channel (eds-badge sets `--_icon-size: initial`).\n:host([size=\"3xs\"]) { --_eds-icon-size: var(--_icon-size, var(--eds-is-3xs)); }\n:host([size=\"2xs\"]) { --_eds-icon-size: var(--_icon-size, var(--eds-is-2xs)); }\n:host([size=\"xs\"])  { --_eds-icon-size: var(--_icon-size, var(--eds-is-xs)); }\n:host([size=\"s\"])   { --_eds-icon-size: var(--_icon-size, var(--eds-is-s)); }\n:host([size=\"m\"])   { --_eds-icon-size: var(--_icon-size, var(--eds-is-m)); }\n:host([size=\"l\"])   { --_eds-icon-size: var(--_icon-size, var(--eds-is-l)); }\n:host([size=\"xl\"])  { --_eds-icon-size: var(--_icon-size, var(--eds-is-xl)); }\n:host([size=\"2xl\"]) { --_eds-icon-size: var(--_icon-size, var(--eds-is-2xl)); }\n:host([size=\"3xl\"]) { --_eds-icon-size: var(--_icon-size, var(--eds-is-3xl)); }\n:host([size=\"4xl\"]) { --_eds-icon-size: var(--_icon-size, var(--eds-is-4xl)); }\n\n// COLOR VARIANTS\n// --------------\n\n:host([color=\"neutral\"])         { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground)); }\n:host([color=\"neutral-subtle\"])  { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle)); }\n:host([color=\"neutral-subtler\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler)); }\n:host([color=\"primary\"])         { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary)); }\n:host([color=\"highlight\"])       { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight)); }\n:host([color=\"info\"])            { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info)); }\n:host([color=\"success\"])         { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success)); }\n:host([color=\"warning\"])         { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning)); }\n:host([color=\"critical\"])        { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical)); }\n:host([color=\"brand\"])           { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand)); }\n:host([color=\"disabled\"])        { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled)); }\n\n// ROUNDED\n// -------\n\n:host([rounded]) {\n    border-radius: 50%;\n    overflow: hidden;\n\n    .eds-icon-svg {\n        border-radius: 50%;\n    }\n}\n\n// LOADING SPINNER — inherits icon size and color\n// ----------------------------------------------\n\n:host([loading]) {\n    // Spinner ring thickness scales with the icon size so every size reads correctly\n    // (a fixed border would nearly fill the smallest sizes and look too thin on large ones).\n    --_eds-icon-spinner-border: max(2px, calc(var(--_eds-icon-size) * 0.125));\n\n    .eds-icon-spinner {\n        display: inline-block;\n        box-sizing: border-box;\n        width: var(--_eds-icon-size);\n        height: var(--_eds-icon-size);\n        border: var(--_eds-icon-spinner-border) solid var(--eds-c-border-neutral-subtle);\n        border-top-color: var(--_eds-icon-color);\n        border-radius: 50%;\n        animation: eds-icon-spin 0.6s linear infinite;\n    }\n}\n\n@keyframes eds-icon-spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n",
                     "styleUrl": "./eds-icon.scss"
                 }
             ],
@@ -45062,7 +45062,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n:host {\n    display: block;\n    width: 100%;\n\n    // The composed input-button fills the available width.\n    ::ng-deep .eds-input-button {\n        width: 100%;\n    }\n\n    // The trailing toggle is an eds-icon-button, which eds-input-button does NOT\n    // style (it only targets .eds-button). Give it the same bordered, divided\n    // treatment as a text button sitting at the end of the field.\n    ::ng-deep .eds-icon-button {\n        border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n        border-left: none;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n        border-top-right-radius: var(--eds-br-s);\n        border-bottom-right-radius: var(--eds-br-s);\n        background-color: var(--eds-c-surface-elevation);\n\n        &::before {\n            background-color: var(--eds-c-border-divider);\n            content: \"\";\n            display: block;\n            height: 1.75rem;\n            left: -1px;\n            position: absolute;\n            top: var(--eds-sp-2xs);\n            width: 1px;\n        }\n    }\n}\n\n// Disabled — mirror the eds-input mixin's disabled visuals on the toggle so both\n// halves of the field match (the base uses the --eds-c-suface-disabled token).\n:host([disabled]) {\n    ::ng-deep .eds-icon-button {\n        background-color: var(--eds-c-suface-disabled);\n        border-color: var(--eds-c-border-disabled);\n    }\n}\n\n// Readonly — the input becomes borderless/transparent; match the toggle and\n// drop its divider so the field reads as static text.\n:host([readonly]) {\n    ::ng-deep .eds-icon-button {\n        background-color: transparent;\n        border-color: transparent;\n\n        &::before {\n            display: none;\n        }\n    }\n}\n\n// Invalid state — reflected as the `invalid` host attribute (String-Props model).\n:host([invalid]) {\n    ::ng-deep .eds-input-text {\n        border-color: var(--eds-c-border-critical);\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    display: block;\n    width: 100%;\n\n    // The composed input-button fills the available width.\n    ::ng-deep .eds-input-button {\n        width: 100%;\n    }\n\n    // The trailing toggle is an eds-icon-button, which eds-input-button does NOT\n    // style (it only targets .eds-button). Give it the same bordered, divided\n    // treatment as a text button sitting at the end of the field.\n    ::ng-deep .eds-icon-button {\n        border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n        border-left: none;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n        border-top-right-radius: var(--eds-br-s);\n        border-bottom-right-radius: var(--eds-br-s);\n        background-color: var(--eds-c-surface-elevation);\n\n        &::before {\n            background-color: var(--eds-c-border-divider);\n            content: \"\";\n            display: block;\n            height: 1.75rem;\n            left: -1px;\n            position: absolute;\n            top: var(--eds-sp-2xs);\n            width: 1px;\n        }\n    }\n}\n\n// Disabled — mirror the eds-input mixin's disabled visuals on the toggle so both\n// halves of the field match (the base uses the --eds-c-suface-disabled token).\n:host([disabled]) {\n    ::ng-deep .eds-icon-button {\n        background-color: var(--eds-c-suface-disabled);\n        border-color: var(--eds-c-border-disabled);\n    }\n}\n\n// Readonly — the input becomes borderless/transparent; match the toggle and\n// drop its divider so the field reads as static text.\n:host([readonly]) {\n    ::ng-deep .eds-icon-button {\n        background-color: transparent;\n        border-color: transparent;\n\n        &::before {\n            display: none;\n        }\n    }\n}\n\n// Invalid state — reflected as the `invalid` host attribute (String-Props model).\n:host([invalid]) {\n    ::ng-deep .eds-input-text,\n    ::ng-deep .eds-icon-button {\n        border-color: var(--eds-c-border-critical);\n    }\n}\n",
                     "styleUrl": "./eds-input-password.scss"
                 }
             ],
@@ -71969,7 +71969,7 @@
                     }
                 ]
             },
-            "templateData": "<div class=\"eds-tree__wrapper eds-ul-rep\" cdkScrollable #cdkScrollableRef>\n    @if (renderTree) {\n    <cdk-tree\n        #treeComponentInstance\n        [dataSource]=\"cdkArrayDataSource\"\n        [treeControl]=\"cdkTreeControl\"\n        [trackBy]=\"trackBy\"\n        class=\"eds-cdk-tree\">\n        <!-- Leaf node (no children) -->\n        <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eds-cdk-nested-tree-node\">\n            @if (treeRunTimeItemModel) {\n            <div\n                class=\"eds-li-rep eds-tree-node\"\n                [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n                [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n                    || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n                <div class=\"eds-tree-node-wrapper\"\n                     (click)=\"onNodeClick(treeRunTimeItemModel, $event)\">\n                    <div class=\"eds-tree-node-wrapper__container\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef() || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path,\n                                path: treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n            }\n        </cdk-nested-tree-node>\n        <!-- Expandable node (has children) -->\n        <cdk-nested-tree-node\n            *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n            class=\"eds-cdk-nested-tree-node eds-cdk-nested-tree-node--with-child\">\n            @if (treeRunTimeItemModel) {\n            <div\n                class=\"eds-li-rep eds-tree-node eds-tree-node--with-child\"\n                [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n                [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n                    || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n                <div class=\"eds-tree-node-wrapper\">\n                    <div (click)=\"onNodeClick(treeRunTimeItemModel, $event)\" class=\"eds-tree-node-wrapper__container\">\n                        <!-- Expand/collapse action button -->\n                        <button\n                            edsIconButton\n                            size=\"s\"\n                            rounded\n                            [icon]=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) ? collapsedSvgIconClass() : expandedSvgIconClass()\"\n                            [ariaLabel]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n                            (click)=\"onToggleButtonClick(treeRunTimeItemModel, $event)\"\n                            class=\"eds-tree-node__button\">\n                        </button>\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef() || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path,\n                                path: treeRunTimeItemModel.path,\n                                children: getTreeItem(treeRunTimeItemModel?.path)?.children\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n                @if (cdkTreeControl.isExpanded(treeRunTimeItemModel)) {\n                <div class=\"eds-ul-rep eds-tree-node\" role=\"group\">\n                    <ng-container cdkTreeNodeOutlet></ng-container>\n                </div>\n                }\n            </div>\n            }\n        </cdk-nested-tree-node>\n    </cdk-tree>\n    }\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n    @if (node) {\n        <div class=\"eds-tree-node-wrapper__container-left\" [class.eds-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n            @if (node && node.selectable) {\n            <input\n                edsInputCheckbox\n                type=\"checkbox\"\n                id=\"{{ id }}\"\n                [checked]=\"!!node?.isSelected\"\n                [indeterminate]=\"!!node?.isIndeterminate\"\n                (change)=\"onSelect($event)\" />\n            }\n\n            @if (node?.treeContentBlock?.iconSvgName) {\n                <eds-icon\n                    [icon]=\"node?.treeContentBlock?.iconSvgName\"\n                    size=\"s\"\n                    class=\"eds-u-mr-xs\">\n                </eds-icon>\n            }\n\n            @if (node?.treeContentBlock?.chips) {\n                @for (chip of node.treeContentBlock.chips; track chip) {\n                <eds-chip\n                    size=\"m\"\n                    [color]=\"$any(chip.typeClass || 'neutral')\"\n                    class=\"eds-u-mr-xs\">\n                    {{ chip.label }}\n                </eds-chip>\n                }\n            }\n\n            @if (node?.treeContentBlock?.typeLabel) {\n                <eds-badge size=\"m\" [color]=\"node?.treeContentBlock?.typeClass || 'neutral'\" class=\"eds-u-mr-xs\">\n                    {{ node?.treeContentBlock?.typeLabel }}\n                </eds-badge>\n            }\n        </div>\n\n        <div class=\"eds-tree-node-wrapper__container-middle\">\n            @if (!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal) {\n            <label\n                edsLabel\n                for=\"{{ id }}\"\n                class=\"eds-u-text-truncate\"\n                [class.eds-label--selected]=\"\n                    highlightPath()\n                        ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n                        : node?.isSelected\n                \"\n                [class.eds-u-cursor-pointer]=\"node?.selectable\">\n                {{ node?.treeContentBlock?.label }}\n            </label>\n            }\n            @if (node?.treeContentBlock?.url) {\n            <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n                <a\n                    class=\"eds-u-text-link\"\n                    [class.eds-u-text-link-standalone]=\"!showUnderlinedLinks()\"\n                    [routerLink]=\"node?.treeContentBlock?.url\">\n                    {{ node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            }\n            @if (node?.treeContentBlock?.urlExternal) {\n            <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n                <a\n                    class=\"eds-u-text-link-external\"\n                    [class.eds-u-text-link-external-standalone]=\"!showUnderlinedLinks()\"\n                    href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n                    target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n                    {{ node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            }\n        </div>\n\n        @if (node?.treeContentBlock?.rightContent) {\n        <div class=\"eds-tree-node-wrapper__container-right\">\n            @for (badge of node.treeContentBlock.rightContent?.badges; track badge) {\n                <eds-badge variant=\"outline\" [color]=\"badge.typeClass || 'neutral'\" class=\"eds-u-ml-xs\">\n                    {{ badge.label }}\n                </eds-badge>\n            }\n\n            @for (chip of node.treeContentBlock.rightContent?.chips; track chip) {\n                <eds-chip\n                    size=\"m\"\n                    [color]=\"$any(chip.typeClass || 'neutral')\"\n                    class=\"eds-u-ml-xs\">\n                    {{ chip.label }}\n                </eds-chip>\n            }\n\n            @if (node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef()) {\n                <eds-dropdown class=\"eds-u-ml-xs\">\n                    <button edsIconButton size=\"s\" rounded icon=\"dots-three-vertical\" ariaLabel=\"Options menu\"></button>\n                    <eds-dropdown-content>\n                        <ng-template\n                            [ngTemplateOutlet]=\"rightContextMenuTemplateRef()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n                                metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n                            }\">\n                        </ng-template>\n                    </eds-dropdown-content>\n                </eds-dropdown>\n            }\n        </div>\n        }\n\n        @if (node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef()) {\n        <ng-container\n            [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: { expanded: false }\n            }\" />\n        }\n        <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n            <button\n                edsIconButton\n                size=\"s\"\n                rounded\n                [icon]=\"metaDataContainer.expanded ? 'caret-down' : 'caret-right'\"\n                ariaLabel=\"expand collapse tree item\"\n                (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n            </button>\n            @if (metaDataContainer.expanded) {\n            <div class=\"eds-tree-node__metacontent\">\n                <ng-template\n                    [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: node?.treeContentBlock?.metadata,\n                        metadata: node?.treeContentBlock?.metadata\n                    }\">\n                </ng-template>\n            </div>\n            }\n        </ng-template>\n        }\n</ng-template>\n"
+            "templateData": "<div class=\"eds-tree__wrapper eds-ul-rep\" cdkScrollable #cdkScrollableRef>\n    @if (renderTree) {\n    <cdk-tree\n        #treeComponentInstance\n        [dataSource]=\"cdkArrayDataSource\"\n        [treeControl]=\"cdkTreeControl\"\n        [trackBy]=\"trackBy\"\n        class=\"eds-cdk-tree\">\n        <!-- Leaf node (no children) -->\n        <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eds-cdk-nested-tree-node\">\n            @if (treeRunTimeItemModel) {\n            <div\n                class=\"eds-li-rep eds-tree-node\"\n                [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n                [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n                    || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n                <div class=\"eds-tree-node-wrapper\"\n                     (click)=\"onNodeClick(treeRunTimeItemModel, $event)\">\n                    <div class=\"eds-tree-node-wrapper__container\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef() || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path,\n                                path: treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n            }\n        </cdk-nested-tree-node>\n        <!-- Expandable node (has children) -->\n        <cdk-nested-tree-node\n            *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n            class=\"eds-cdk-nested-tree-node eds-cdk-nested-tree-node--with-child\">\n            @if (treeRunTimeItemModel) {\n            <div\n                class=\"eds-li-rep eds-tree-node eds-tree-node--with-child\"\n                [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n                [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n                    || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n                <div class=\"eds-tree-node-wrapper\">\n                    <div (click)=\"onNodeClick(treeRunTimeItemModel, $event)\" class=\"eds-tree-node-wrapper__container\">\n                        <!-- Expand/collapse action button -->\n                        <button\n                            edsIconButton\n                            size=\"s\"\n                            rounded\n                            [icon]=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) ? collapsedSvgIconClass() : expandedSvgIconClass()\"\n                            [ariaLabel]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n                            (click)=\"onToggleButtonClick(treeRunTimeItemModel, $event)\"\n                            class=\"eds-tree-node__button\">\n                        </button>\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef() || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path,\n                                path: treeRunTimeItemModel.path,\n                                children: getTreeItem(treeRunTimeItemModel?.path)?.children\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n                @if (cdkTreeControl.isExpanded(treeRunTimeItemModel)) {\n                <div class=\"eds-ul-rep eds-tree-node\" role=\"group\">\n                    <ng-container cdkTreeNodeOutlet></ng-container>\n                </div>\n                }\n            </div>\n            }\n        </cdk-nested-tree-node>\n    </cdk-tree>\n    }\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n    @if (node) {\n        <div class=\"eds-tree-node-wrapper__container-left\" [class.eds-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n            @if (node && node.selectable) {\n            <input\n                edsInputCheckbox\n                type=\"checkbox\"\n                id=\"{{ id }}\"\n                [checked]=\"!!node?.isSelected\"\n                [indeterminate]=\"!!node?.isIndeterminate\"\n                (change)=\"onSelect($event)\" />\n            }\n\n            @if (node?.treeContentBlock?.iconSvgName) {\n                <eds-icon\n                    [icon]=\"node?.treeContentBlock?.iconSvgName\"\n                    size=\"s\"\n                    class=\"eds-u-mr-xs\">\n                </eds-icon>\n            }\n\n            @if (node?.treeContentBlock?.chips) {\n                @for (chip of node.treeContentBlock.chips; track chip) {\n                <eds-chip\n                    size=\"m\"\n                    [color]=\"$any(chip.typeClass || 'neutral')\"\n                    class=\"eds-u-mr-xs\">\n                    {{ chip.label }}\n                </eds-chip>\n                }\n            }\n\n            @if (node?.treeContentBlock?.typeLabel) {\n                <eds-badge size=\"m\" [color]=\"node?.treeContentBlock?.typeClass || 'neutral'\" class=\"eds-u-mr-xs\">\n                    {{ node?.treeContentBlock?.typeLabel }}\n                </eds-badge>\n            }\n        </div>\n\n        <div class=\"eds-tree-node-wrapper__container-middle\">\n            @if (!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal) {\n            <label\n                edsLabel\n                for=\"{{ id }}\"\n                class=\"eds-u-text-truncate\"\n                [class.eds-label--selected]=\"\n                    highlightPath()\n                        ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n                        : node?.isSelected\n                \"\n                [class.eds-u-cursor-pointer]=\"node?.selectable\">\n                {{ node?.treeContentBlock?.label }}\n            </label>\n            }\n            @if (node?.treeContentBlock?.url) {\n            <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n                <a\n                    class=\"eds-u-text-link\"\n                    [class.eds-u-text-link-standalone]=\"!showUnderlinedLinks()\"\n                    [routerLink]=\"node?.treeContentBlock?.url\">\n                    {{ node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            }\n            @if (node?.treeContentBlock?.urlExternal) {\n            <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n                <a\n                    class=\"eds-u-text-link-external\"\n                    [class.eds-u-text-link-external-standalone]=\"!showUnderlinedLinks()\"\n                    href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n                    target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n                    {{ node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            }\n        </div>\n\n        @if (node?.treeContentBlock?.rightContent) {\n        <div class=\"eds-tree-node-wrapper__container-right\">\n            @for (badge of node.treeContentBlock.rightContent?.badges; track badge) {\n                <eds-badge variant=\"light\" [color]=\"badge.typeClass || 'neutral'\" class=\"eds-u-ml-xs\">\n                    {{ badge.label }}\n                </eds-badge>\n            }\n\n            @for (chip of node.treeContentBlock.rightContent?.chips; track chip) {\n                <eds-chip\n                    size=\"m\"\n                    [color]=\"$any(chip.typeClass || 'neutral')\"\n                    class=\"eds-u-ml-xs\">\n                    {{ chip.label }}\n                </eds-chip>\n            }\n\n            @if (node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef()) {\n                <eds-dropdown class=\"eds-u-ml-xs\">\n                    <button edsIconButton size=\"s\" rounded icon=\"dots-three-vertical\" ariaLabel=\"Options menu\"></button>\n                    <eds-dropdown-content>\n                        <ng-template\n                            [ngTemplateOutlet]=\"rightContextMenuTemplateRef()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n                                metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n                            }\">\n                        </ng-template>\n                    </eds-dropdown-content>\n                </eds-dropdown>\n            }\n        </div>\n        }\n\n        @if (node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef()) {\n        <ng-container\n            [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: { expanded: false }\n            }\" />\n        }\n        <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n            <button\n                edsIconButton\n                size=\"s\"\n                rounded\n                [icon]=\"metaDataContainer.expanded ? 'caret-down' : 'caret-right'\"\n                ariaLabel=\"expand collapse tree item\"\n                (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n            </button>\n            @if (metaDataContainer.expanded) {\n            <div class=\"eds-tree-node__metacontent\">\n                <ng-template\n                    [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: node?.treeContentBlock?.metadata,\n                        metadata: node?.treeContentBlock?.metadata\n                    }\">\n                </ng-template>\n            </div>\n            }\n        </ng-template>\n        }\n</ng-template>\n"
         },
         {
             "name": "EdsTreeList",
@@ -78137,7 +78137,7 @@
                 "ctype": "miscellaneous",
                 "subtype": "typealias",
                 "coverageIgnore": false,
-                "rawtype": "\"s\" | \"m\"",
+                "rawtype": "\"xs\" | \"s\" | \"m\" | \"l\"",
                 "file": "packages/eds/eds-badge/eds-badge.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -78150,7 +78150,7 @@
                 "ctype": "miscellaneous",
                 "subtype": "typealias",
                 "coverageIgnore": false,
-                "rawtype": "\"filled\" | \"outline\"",
+                "rawtype": "\"filled\" | \"light\"",
                 "file": "packages/eds/eds-badge/eds-badge.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -81912,7 +81912,7 @@
                     "ctype": "miscellaneous",
                     "subtype": "typealias",
                     "coverageIgnore": false,
-                    "rawtype": "\"s\" | \"m\"",
+                    "rawtype": "\"xs\" | \"s\" | \"m\" | \"l\"",
                     "file": "packages/eds/eds-badge/eds-badge.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
@@ -81925,7 +81925,7 @@
                     "ctype": "miscellaneous",
                     "subtype": "typealias",
                     "coverageIgnore": false,
-                    "rawtype": "\"filled\" | \"outline\"",
+                    "rawtype": "\"filled\" | \"light\"",
                     "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-09-30T09:05:20.742Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-09-30T12:16:37.135Z, llm-md export.
 
 ## Components
 
@@ -293,7 +293,7 @@ File: `packages/eds/eds-badge/eds-badge.ts`
 Selector: `eds-badge, span[edsBadge]`
 Change detection: `ChangeDetectionStrategy.OnPush`
 
-Description: A badge component that displays text, numbers, or a dot indicator with semantic color, size, and variant styling. Supports content truncation, an automatic empty state, and an icon-only (dot) mode. Basic badge Example : \<eds-badge\>99\</eds-badge\> Semantic colors Example : \<eds-badge color="success"\>Active\</eds-badge\> \<eds-badge color="critical"\>Error\</eds-badge\> Variant Example : \<eds-badge color="info" variant="outline"\>New\</eds-badge\> Truncation Example : \<eds-badge \[maxCharCount\]="2" charReplacement="99+"\>150\</eds-badge\> Icon-only (dot indicator) Example : \<eds-badge iconOnly color="critical"\>\</eds-badge\>
+Description: A badge component that displays text, numbers, or a dot indicator with semantic color, size, and variant styling. Supports content truncation, an automatic empty state, and an icon-only (dot) mode. Basic badge Example : \<eds-badge\>99\</eds-badge\> Semantic colors Example : \<eds-badge color="success"\>Active\</eds-badge\> \<eds-badge color="critical"\>Error\</eds-badge\> Variant Example : \<eds-badge color="info" variant="light"\>New\</eds-badge\> Truncation Example : \<eds-badge \[maxCharCount\]="2" charReplacement="99+"\>150\</eds-badge\> Icon-only (dot indicator) Example : \<eds-badge iconOnly color="critical"\>\</eds-badge\>
 
 Inputs:
 - `ariaLabel: string | null = 'badge'` — ARIA label for accessibility. When null , the visible content serves as the accessible name. 'badge'
@@ -303,7 +303,7 @@ Inputs:
 - `iconOnly: boolean = false` — Whether the badge is a small dot indicator with no text content. false
 - `maxCharCount: number = 0` — Maximum number of characters to display before truncating. When the content exceeds this limit it is replaced with charReplacement . 0 disables truncation. 0
 - `size: EdsBadgeSize = 'm'` — Size of the badge. 'm'
-- `variant: EdsBadgeVariant = 'filled'` — Visual variant of the badge. filled uses a solid semantic surface; outline uses a transparent surface with a stronger border. 'filled'
+- `variant: EdsBadgeVariant = 'filled'` — Visual variant of the badge. filled uses a solid semantic surface; light uses a subtle semantic surface with a matching subtler foreground. 'filled'
 
 Methods:
 - `onContentChanged(): void` — Handles projected content changes and re-evaluates truncation.
@@ -5080,8 +5080,8 @@ Properties:
 - `type EdsAlertColor = "info" | "success" | "warning" | "critical"` — Local narrowed color union — the alert's color contract.
 - `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 EdsBadgeSize = "s" | "m"`
-- `type EdsBadgeVariant = "filled" | "outline"`
+- `type EdsBadgeSize = "xs" | "s" | "m" | "l"`
+- `type EdsBadgeVariant = "filled" | "light"`
 - `type EdsBannerFontColor = "light" | "dark"`
 - `type EdsBannerFontSize = "s" | "m" | "l"`
 - `type EdsBannerFontWeight = "light" | "bold"`

package/docs/miscellaneous/typealiases.html

@@ -708,7 +708,7 @@
             </tr>
             <tr>
                 <td class="col-md-4">
-                    <code>    <code>&quot;s&quot; | &quot;m&quot;</code>
+                    <code>    <code>&quot;xs&quot; | &quot;s&quot; | &quot;m&quot; | &quot;l&quot;</code>
 </code>
                 </td>
             </tr>
@@ -724,7 +724,7 @@
             </tr>
             <tr>
                 <td class="col-md-4">
-                    <code>    <code>&quot;filled&quot; | &quot;outline&quot;</code>
+                    <code>    <code>&quot;filled&quot; | &quot;light&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.32</li>
+            <b>Version</b> : 22.0.0-alpha.34</li>
     </ul>