@eui/eds 22.0.0-alpha.25 → 22.0.0-alpha.27

package/docs/json/documentation.json

@@ -11832,10 +11832,6 @@
                         "type": "component",
                         "description": "Floating Action Button with optional speed dial menu. Follows the WAI-ARIA APG Menu Button pattern: - Trigger button: role=\"button\", aria..."
                     },
-                    {
-                        "name": "EdsLabel",
-                        "type": "component"
-                    },
                     {
                         "name": "EdsLanguageSelector",
                         "type": "component"
@@ -28106,7 +28102,7 @@
         },
         {
             "name": "EdsChip",
-            "id": "component-EdsChip-1927048d98093c3aba72b028da8ab4444c8ce503bd5e0699c16763210d8f03352bbfc1f4bd60d567809f55a6daeda52e25ebc91b5c535d6d00e20800f4cdd6df",
+            "id": "component-EdsChip-010367764117c5686d7cde5dfc9ed3b4c04698f91b1e286df1d01e1b53f72c6d38ef41ad4ce01de33e0035fec01b2b0bc84f3b1e835c0c21a72f161b97272202",
             "file": "packages/eds/eds-chip/eds-chip.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -28141,16 +28137,16 @@
                     "rawdescription": "\n\nSets the `aria-label` attribute for the host element.\nWhen not set, assistive technology will use the text content of the chip.\n\nundefined\n",
                     "jsdoctags": [
                         {
-                            "pos": 2551,
-                            "end": 2575,
+                            "pos": 2563,
+                            "end": 2587,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2552,
-                                "end": 2559,
+                                "pos": 2564,
+                                "end": 2571,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -28176,16 +28172,16 @@
                     "rawdescription": "\n\nSemantic color of the chip.\n'neutral'\n",
                     "jsdoctags": [
                         {
-                            "pos": 2063,
-                            "end": 2087,
+                            "pos": 2075,
+                            "end": 2099,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2064,
-                                "end": 2071,
+                                "pos": 2076,
+                                "end": 2083,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -28224,16 +28220,16 @@
                     "rawdescription": "\n\nControls the disabled state of the chip.\nWhen true, prevents interaction and applies disabled styling.\n\nfalse\n",
                     "jsdoctags": [
                         {
-                            "pos": 4056,
-                            "end": 4076,
+                            "pos": 4068,
+                            "end": 4088,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 4057,
-                                "end": 4064,
+                                "pos": 4069,
+                                "end": 4076,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -28259,16 +28255,16 @@
                     "rawdescription": "\n\nSets the `data-e2e` attribute for the host element.\n\n'eds-chip'\n",
                     "jsdoctags": [
                         {
-                            "pos": 2930,
-                            "end": 2955,
+                            "pos": 2942,
+                            "end": 2967,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2931,
-                                "end": 2938,
+                                "pos": 2943,
+                                "end": 2950,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -28294,16 +28290,16 @@
                     "rawdescription": "\n\nSets the edsInternalId of the chip.\n\n''\n",
                     "jsdoctags": [
                         {
-                            "pos": 3057,
-                            "end": 3074,
+                            "pos": 3069,
+                            "end": 3086,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3058,
-                                "end": 3065,
+                                "pos": 3070,
+                                "end": 3077,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -28343,16 +28339,16 @@
                     "rawdescription": "\n\nWhether the chip is in active/pressed state.\n\nfalse\n",
                     "jsdoctags": [
                         {
-                            "pos": 3831,
-                            "end": 3851,
+                            "pos": 3843,
+                            "end": 3863,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3832,
-                                "end": 3839,
+                                "pos": 3844,
+                                "end": 3851,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -28378,16 +28374,16 @@
                     "rawdescription": "\n\nWhether the chip can be removed.\n\nfalse\n",
                     "jsdoctags": [
                         {
-                            "pos": 3668,
-                            "end": 3688,
+                            "pos": 3680,
+                            "end": 3700,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3669,
-                                "end": 3676,
+                                "pos": 3681,
+                                "end": 3688,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -28413,16 +28409,16 @@
                     "rawdescription": "\n\nSize of the chip.\n'm'\n",
                     "jsdoctags": [
                         {
-                            "pos": 2175,
-                            "end": 2193,
+                            "pos": 2187,
+                            "end": 2205,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2176,
-                                "end": 2183,
+                                "pos": 2188,
+                                "end": 2195,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -28638,12 +28634,12 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    booleanAttribute,\n    inject,\n    input,\n    output,\n    computed,\n} from '@angular/core';\n\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { EdsChipList } from '@eui/eds/eds-chip-list';\n\nimport { EdsChipData } from './models/eui-chip.model';\nimport { EdsIconSize } from '@eui/eds/eds-icon';\n\n/**\n * Local narrowed color union — the chip's color contract.\n */\nexport type EdsChipColor = 'neutral' | 'info' | 'success' | 'warning' | 'critical';\n\n/**\n * Local narrowed size union — the chip's size contract.\n */\nexport type EdsChipSize = 's' | 'm' | 'l';\n\n/** Maps a chip size to the size of its inner (remove) icon. */\nconst CHIP_ICON_SIZE: Record<EdsChipSize, EdsIconSize> = {\n    s: 'xs',\n    m: 's',\n    l: 'm',\n};\n\n@Component({\n    templateUrl: './eds-chip.html',\n    selector: 'eds-chip, span[edsChip], li[edsChip]',\n    styleUrl: './eds-chip.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        ...EDS_ICON,\n        ...EDS_ICON_BUTTON,\n        ...EDS_BUTTON,\n    ],\n    host: {\n        class: 'eds-chip',\n        '[attr.color]': 'color()',\n        '[attr.size]': 'size()',\n        '[attr.removable]': 'isRemovable() || null',\n        '[attr.active]': 'isActive() || null',\n        '[attr.disabled]': 'disabled() || null',\n        '[attr.tabindex]': 'disabled() ? \"-1\" : \"0\"',\n        '[attr.role]': 'hostRole()',\n        '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n        '[attr.aria-pressed]': 'isActive() ? \"true\" : null',\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '(click)': 'onHostClick($event)',\n        '(keydown.enter)': 'onHostClick($event)',\n        '(keydown.space)': 'onHostKeyActivate($event)',\n        '(keydown.delete)': 'onKeyRemove($event)',\n        '(keydown.backspace)': 'onKeyRemove($event)',\n    },\n})\nexport class EdsChip {\n    /**\n     * Semantic color of the chip.\n     * @default 'neutral'\n     */\n    color = input<EdsChipColor>('neutral');\n\n    /**\n     * Size of the chip.\n     * @default 'm'\n     */\n    size = input<EdsChipSize>('m');\n\n    /** Size of the inner remove icon, derived from the chip size. */\n    protected iconSize = computed<EdsIconSize>(() => CHIP_ICON_SIZE[this.size()]);\n\n    /**\n     * Sets the `aria-label` attribute for the host element.\n     * When not set, assistive technology will use the text content of the chip.\n     *\n     * @default undefined\n     */\n    ariaLabel = input<string | undefined>(undefined);\n\n    /**\n     * Resolved role for the host element.\n     * Returns 'listitem' when inside an eds-chip-list, 'button' otherwise.\n     */\n    protected hostRole = computed(() => this.chipList ? 'listitem' : 'button');\n\n    /**\n     * Sets the `data-e2e` attribute for the host element.\n     *\n     * @default 'eds-chip'\n     */\n    e2eAttr = input('eds-chip');\n\n    /**\n     * Sets the edsInternalId of the chip.\n     *\n     * @default ''\n     */\n    edsInternalId = input<string>('');\n\n    /**\n     * Sets the label of the tooltip to display on hover.\n     */\n    tooltipMessage = input<string>('');\n\n    /**\n     * Sets the id of the chip.\n     */\n    id = input<string | number>('');\n\n    /**\n     * Sets the data of the chip like tooltip configuration.\n     */\n    data = input<EdsChipData>({\n        id: crypto.randomUUID(),\n        tooltip: {\n            color: 'edsTooltipPrimary',\n            contentAlignment: null,\n            position: 'above',\n        },\n    });\n\n    /**\n     * Whether the chip can be removed.\n     *\n     * @default false\n     */\n    isRemovable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Whether the chip is in active/pressed state.\n     *\n     * @default false\n     */\n    isActive = input(false, { transform: booleanAttribute });\n\n    /**\n     * Controls the disabled state of the chip.\n     * When true, prevents interaction and applies disabled styling.\n     *\n     * @default false\n     */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Event emitted when the chip is removed.\n     */\n    chipRemove = output<EdsChipData>();\n\n    /**\n     * Event emitted when the chip is clicked.\n     */\n    chipClick = output<EdsChipData>();\n\n    /** Optional parent chip-list — used to determine role. */\n    private chipList = inject(EdsChipList, { optional: true });\n\n    onHostClick(event?: Event): void {\n        if (this.disabled()) {\n            return;\n        }\n\n        if (this.isRemovable()) {\n            this.onRemove(event);\n        } else {\n            this.onClick(event);\n        }\n    }\n\n    /**\n     * Handles Space key activation — prevents page scroll and triggers click.\n     */\n    onHostKeyActivate(event: Event): void {\n        event.preventDefault();\n        this.onHostClick(event);\n    }\n\n    /**\n     * Handles Delete/Backspace key to remove chip (WAI-ARIA APG convention).\n     */\n    onKeyRemove(event: Event): void {\n        if (this.disabled() || !this.isRemovable()) {\n            return;\n        }\n        event.preventDefault();\n        this.chipRemove.emit(this.data());\n    }\n\n    /**\n     * Remove chip handler\n     *\n     * @param event Click event\n     */\n    private onRemove(event?: Event): void {\n        if (event instanceof KeyboardEvent && (event as KeyboardEvent).code === 'Backspace') {\n            this.chipRemove.emit({ ...this.data(), _event: event });\n        } else {\n            this.chipRemove.emit(this.data());\n        }\n    }\n\n    private onClick(event?: Event): void {\n        this.chipClick.emit(this.data());\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    booleanAttribute,\n    inject,\n    input,\n    output,\n    computed,\n} from '@angular/core';\n\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { EdsChipList } from '@eui/eds/eds-chip-list';\n\nimport { EdsChipData } from './models/eui-chip.model';\nimport { EdsIconSize } from '@eui/eds/eds-icon';\n\n/**\n * Local narrowed color union — the chip's color contract.\n */\nexport type EdsChipColor = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'critical';\n\n/**\n * Local narrowed size union — the chip's size contract.\n */\nexport type EdsChipSize = 's' | 'm' | 'l';\n\n/** Maps a chip size to the size of its inner (remove) icon. */\nconst CHIP_ICON_SIZE: Record<EdsChipSize, EdsIconSize> = {\n    s: 'xs',\n    m: 's',\n    l: 'm',\n};\n\n@Component({\n    templateUrl: './eds-chip.html',\n    selector: 'eds-chip, span[edsChip], li[edsChip]',\n    styleUrl: './eds-chip.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        ...EDS_ICON,\n        ...EDS_ICON_BUTTON,\n        ...EDS_BUTTON,\n    ],\n    host: {\n        class: 'eds-chip',\n        '[attr.color]': 'color()',\n        '[attr.size]': 'size()',\n        '[attr.removable]': 'isRemovable() || null',\n        '[attr.active]': 'isActive() || null',\n        '[attr.disabled]': 'disabled() || null',\n        '[attr.tabindex]': 'disabled() ? \"-1\" : \"0\"',\n        '[attr.role]': 'hostRole()',\n        '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n        '[attr.aria-pressed]': 'isActive() ? \"true\" : null',\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '(click)': 'onHostClick($event)',\n        '(keydown.enter)': 'onHostClick($event)',\n        '(keydown.space)': 'onHostKeyActivate($event)',\n        '(keydown.delete)': 'onKeyRemove($event)',\n        '(keydown.backspace)': 'onKeyRemove($event)',\n    },\n})\nexport class EdsChip {\n    /**\n     * Semantic color of the chip.\n     * @default 'neutral'\n     */\n    color = input<EdsChipColor>('neutral');\n\n    /**\n     * Size of the chip.\n     * @default 'm'\n     */\n    size = input<EdsChipSize>('m');\n\n    /** Size of the inner remove icon, derived from the chip size. */\n    protected iconSize = computed<EdsIconSize>(() => CHIP_ICON_SIZE[this.size()]);\n\n    /**\n     * Sets the `aria-label` attribute for the host element.\n     * When not set, assistive technology will use the text content of the chip.\n     *\n     * @default undefined\n     */\n    ariaLabel = input<string | undefined>(undefined);\n\n    /**\n     * Resolved role for the host element.\n     * Returns 'listitem' when inside an eds-chip-list, 'button' otherwise.\n     */\n    protected hostRole = computed(() => this.chipList ? 'listitem' : 'button');\n\n    /**\n     * Sets the `data-e2e` attribute for the host element.\n     *\n     * @default 'eds-chip'\n     */\n    e2eAttr = input('eds-chip');\n\n    /**\n     * Sets the edsInternalId of the chip.\n     *\n     * @default ''\n     */\n    edsInternalId = input<string>('');\n\n    /**\n     * Sets the label of the tooltip to display on hover.\n     */\n    tooltipMessage = input<string>('');\n\n    /**\n     * Sets the id of the chip.\n     */\n    id = input<string | number>('');\n\n    /**\n     * Sets the data of the chip like tooltip configuration.\n     */\n    data = input<EdsChipData>({\n        id: crypto.randomUUID(),\n        tooltip: {\n            color: 'edsTooltipPrimary',\n            contentAlignment: null,\n            position: 'above',\n        },\n    });\n\n    /**\n     * Whether the chip can be removed.\n     *\n     * @default false\n     */\n    isRemovable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Whether the chip is in active/pressed state.\n     *\n     * @default false\n     */\n    isActive = input(false, { transform: booleanAttribute });\n\n    /**\n     * Controls the disabled state of the chip.\n     * When true, prevents interaction and applies disabled styling.\n     *\n     * @default false\n     */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Event emitted when the chip is removed.\n     */\n    chipRemove = output<EdsChipData>();\n\n    /**\n     * Event emitted when the chip is clicked.\n     */\n    chipClick = output<EdsChipData>();\n\n    /** Optional parent chip-list — used to determine role. */\n    private chipList = inject(EdsChipList, { optional: true });\n\n    onHostClick(event?: Event): void {\n        if (this.disabled()) {\n            return;\n        }\n\n        if (this.isRemovable()) {\n            this.onRemove(event);\n        } else {\n            this.onClick(event);\n        }\n    }\n\n    /**\n     * Handles Space key activation — prevents page scroll and triggers click.\n     */\n    onHostKeyActivate(event: Event): void {\n        event.preventDefault();\n        this.onHostClick(event);\n    }\n\n    /**\n     * Handles Delete/Backspace key to remove chip (WAI-ARIA APG convention).\n     */\n    onKeyRemove(event: Event): void {\n        if (this.disabled() || !this.isRemovable()) {\n            return;\n        }\n        event.preventDefault();\n        this.chipRemove.emit(this.data());\n    }\n\n    /**\n     * Remove chip handler\n     *\n     * @param event Click event\n     */\n    private onRemove(event?: Event): void {\n        if (event instanceof KeyboardEvent && (event as KeyboardEvent).code === 'Backspace') {\n            this.chipRemove.emit({ ...this.data(), _event: event });\n        } else {\n            this.chipRemove.emit(this.data());\n        }\n    }\n\n    private onClick(event?: Event): void {\n        this.chipClick.emit(this.data());\n    }\n}\n",
             "styleUrl": "./eds-chip.scss",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use 'sass:map';\n@use '../base' as base;\n\n:host {\n    // default color = neutral\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground-primary);\n    --_eds-chip-border-color: var(--eds-c-border-primary-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle);\n\n    // default size = m\n    --_eds-chip-font: var(--eds-f-paragraph-s);\n    --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);\n    --_eds-chip-height: var(--eds-sp-xl);\n\n    // a projected eds-icon follows the chip foreground (on-surface) color\n    --_eds-icon-on-surface: var(--_eds-chip-on-surface);\n\n    border-radius: var(--eds-br-full);\n    display: inline-flex;\n    border: var(--eds-bw-xs) solid var(--_eds-chip-border-color);\n    padding: var(--_eds-chip-padding);\n    font: var(--_eds-chip-font);\n    background-color: var(--_eds-chip-surface);\n    color: var(--_eds-chip-on-surface);\n    height: var(--_eds-chip-height);\n    cursor: pointer;\n    gap: var(--eds-sp-2xs);\n    align-items: center;\n\n    &:not([disabled]) {\n        @include base.eds-focus-visible-ring-rounded();\n    }\n\n    &:hover {\n        background-color: var(--_eds-chip-surface-hover);\n        color: var(--_eds-chip-on-surface-hover);\n    }\n    &:active {\n        background-color: var(--_eds-chip-surface-active);\n        color: var(--_eds-chip-on-surface-active);\n    }\n\n    .eds-chip__content {\n        display: inline-flex;\n        align-items: center;\n        background: transparent;\n        gap: var(--eds-sp-2xs);\n    }\n\n    .eds-chip__close {\n        margin-left: var(--eds-sp-xs);\n    }\n}\n\n// SIZE VARIANTS\n// -------------\n\n:host([size=\"s\"]) {\n    --_eds-chip-font: var(--eds-f-paragraph-xs);\n    --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);\n    --_eds-chip-height: var(--eds-sp-l);\n}\n\n:host([size=\"m\"]) {\n    --_eds-chip-font: var(--eds-f-paragraph-s);\n    --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);\n    --_eds-chip-height: var(--eds-sp-xl);\n}\n\n:host([size=\"l\"]) {\n    --_eds-chip-font: var(--eds-f-paragraph-s);\n    --_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);\n    --_eds-chip-height: var(--eds-sp-2xl);\n}\n\n// COLOR VARIANTS\n// --------------\n\n:host([color=\"neutral\"]) {\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground-primary);\n    --_eds-chip-border-color: var(--eds-c-border-primary-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle);\n}\n\n:host([color=\"info\"]) {\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground-info);\n    --_eds-chip-border-color: var(--eds-c-border-info-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-info-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-info-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-info-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-info-subtle);\n}\n\n:host([color=\"success\"]) {\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground-success);\n    --_eds-chip-border-color: var(--eds-c-border-success-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-success-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-success-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-success-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-success-subtle);\n}\n\n:host([color=\"warning\"]) {\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground-warning);\n    --_eds-chip-border-color: var(--eds-c-border-warning-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-warning-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-warning-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-warning-subtle);\n}\n\n:host([color=\"critical\"]) {\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground-critical);\n    --_eds-chip-border-color: var(--eds-c-border-critical-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-critical-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-critical-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-critical-subtle);\n}\n\n// STATE OVERRIDES\n// ---------------\n\n:host([active]) {\n    --_eds-chip-surface: var(--eds-c-surface-primary);\n    --_eds-chip-on-surface: var(--eds-c-on-surface-primary);\n    --_eds-chip-border-color: transparent;\n    --_eds-chip-surface-hover: var(--eds-c-surface-primary--hover);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary--hover);\n    --_eds-chip-surface-active: var(--eds-c-surface-primary--pressed);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-primary--pressed);\n}\n\n:host([disabled]) {\n    --_eds-chip-surface: var(--eds-c-surface-disabled-subtle);\n    --_eds-chip-on-surface: var(--eds-c-foreground-disabled);\n    --_eds-chip-border-color: var(--eds-c-border-disabled);\n    --_eds-chip-surface-hover: var(--eds-c-surface-disabled-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-foreground-disabled);\n    --_eds-chip-surface-active: var(--eds-c-surface-disabled-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-foreground-disabled);\n\n    cursor: default;\n}\n",
+                    "data": "@use 'sass:map';\n@use '../base' as base;\n\n:host {\n    // default color = neutral\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground);\n    --_eds-chip-border-color: var(--eds-c-border-neutral-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle);\n\n    // default size = m\n    --_eds-chip-font: var(--eds-f-paragraph-s);\n    --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);\n    --_eds-chip-height: var(--eds-sp-xl);\n\n    // a projected eds-icon follows the chip foreground (on-surface) color\n    --_eds-icon-on-surface: var(--_eds-chip-on-surface);\n\n    border-radius: var(--eds-br-full);\n    display: inline-flex;\n    border: var(--eds-bw-xs) solid var(--_eds-chip-border-color);\n    padding: var(--_eds-chip-padding);\n    font: var(--_eds-chip-font);\n    background-color: var(--_eds-chip-surface);\n    color: var(--_eds-chip-on-surface);\n    height: var(--_eds-chip-height);\n    cursor: pointer;\n    gap: var(--eds-sp-2xs);\n    align-items: center;\n\n    &:not([disabled]) {\n        @include base.eds-focus-visible-ring-rounded();\n    }\n\n    &:hover {\n        background-color: var(--_eds-chip-surface-hover);\n        color: var(--_eds-chip-on-surface-hover);\n    }\n    &:active {\n        background-color: var(--_eds-chip-surface-active);\n        color: var(--_eds-chip-on-surface-active);\n    }\n\n    .eds-chip__content {\n        display: inline-flex;\n        align-items: center;\n        background: transparent;\n        gap: var(--eds-sp-2xs);\n\n        // A projected icon sitting at the very start/end of the chip content is pulled slightly\n        // toward the edge so it reads as tucked in against the chip rather than double-padded\n        // (host padding + gap). Only the leading/trailing icon is nudged, not icons between text.\n        ::ng-deep eds-icon:first-child {\n            margin-left: calc(-1 * var(--eds-sp-3xs));\n        }\n\n        ::ng-deep eds-icon:last-child {\n            margin-right: calc(-1 * var(--eds-sp-3xs));\n        }\n    }\n\n    .eds-chip__close {\n        margin-left: var(--eds-sp-xs);\n    }\n}\n\n// SIZE VARIANTS\n// -------------\n\n:host([size=\"s\"]) {\n    --_eds-chip-font: var(--eds-f-paragraph-xs);\n    --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);\n    --_eds-chip-height: var(--eds-sp-l);\n}\n\n:host([size=\"m\"]) {\n    --_eds-chip-font: var(--eds-f-paragraph-s);\n    --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);\n    --_eds-chip-height: var(--eds-sp-xl);\n}\n\n:host([size=\"l\"]) {\n    --_eds-chip-font: var(--eds-f-paragraph-s);\n    --_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);\n    --_eds-chip-height: var(--eds-sp-2xl);\n}\n\n// COLOR VARIANTS\n// --------------\n\n:host([color=\"neutral\"]) {\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground);\n    --_eds-chip-border-color: var(--eds-c-border-neutral-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle);\n}\n\n:host([color=\"primary\"]) {\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground-primary);\n    --_eds-chip-border-color: var(--eds-c-border-primary-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle);\n}\n\n:host([color=\"info\"]) {\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground-info);\n    --_eds-chip-border-color: var(--eds-c-border-info-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-info-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-info-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-info-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-info-subtle);\n}\n\n:host([color=\"success\"]) {\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground-success);\n    --_eds-chip-border-color: var(--eds-c-border-success-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-success-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-success-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-success-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-success-subtle);\n}\n\n:host([color=\"warning\"]) {\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground-warning);\n    --_eds-chip-border-color: var(--eds-c-border-warning-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-warning-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-warning-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-warning-subtle);\n}\n\n:host([color=\"critical\"]) {\n    --_eds-chip-surface: transparent;\n    --_eds-chip-on-surface: var(--eds-c-foreground-critical);\n    --_eds-chip-border-color: var(--eds-c-border-critical-subtle);\n    --_eds-chip-surface-hover: var(--eds-c-surface-critical-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical-subtle);\n    --_eds-chip-surface-active: var(--eds-c-surface-critical-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-critical-subtle);\n}\n\n// STATE OVERRIDES — ACTIVE (filled)\n// ---------------------------------\n// Active fills the chip with its OWN color. The default (no explicit color) and the neutral color\n// resolve to the neutral filled scale; primary resolves to the primary filled scale.\n\n:host([active]),\n:host([active][color=\"neutral\"]) {\n    --_eds-chip-surface: var(--eds-c-surface-inverted);\n    --_eds-chip-on-surface: var(--eds-c-on-surface-inverted);\n    --_eds-chip-border-color: transparent;\n    --_eds-chip-surface-hover: var(--eds-c-surface-inverted--hover);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-inverted--hover);\n    --_eds-chip-surface-active: var(--eds-c-surface-inverted--pressed);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-inverted--pressed);\n}\n\n:host([active][color=\"primary\"]) {\n    --_eds-chip-surface: var(--eds-c-surface-primary);\n    --_eds-chip-on-surface: var(--eds-c-on-surface-primary);\n    --_eds-chip-border-color: transparent;\n    --_eds-chip-surface-hover: var(--eds-c-surface-primary--hover);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary--hover);\n    --_eds-chip-surface-active: var(--eds-c-surface-primary--pressed);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-primary--pressed);\n}\n\n:host([active][color=\"info\"]) {\n    --_eds-chip-surface: var(--eds-c-surface-info);\n    --_eds-chip-on-surface: var(--eds-c-on-surface-info);\n    --_eds-chip-border-color: transparent;\n    --_eds-chip-surface-hover: var(--eds-c-surface-info--hover);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-info--hover);\n    --_eds-chip-surface-active: var(--eds-c-surface-info--pressed);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-info--pressed);\n}\n\n:host([active][color=\"success\"]) {\n    --_eds-chip-surface: var(--eds-c-surface-success);\n    --_eds-chip-on-surface: var(--eds-c-on-surface-success);\n    --_eds-chip-border-color: transparent;\n    --_eds-chip-surface-hover: var(--eds-c-surface-success--hover);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-success--hover);\n    --_eds-chip-surface-active: var(--eds-c-surface-success--pressed);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-success--pressed);\n}\n\n:host([active][color=\"warning\"]) {\n    --_eds-chip-surface: var(--eds-c-surface-warning);\n    --_eds-chip-on-surface: var(--eds-c-on-surface-warning);\n    --_eds-chip-border-color: transparent;\n    --_eds-chip-surface-hover: var(--eds-c-surface-warning--hover);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning--hover);\n    --_eds-chip-surface-active: var(--eds-c-surface-warning--pressed);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-warning--pressed);\n}\n\n:host([active][color=\"critical\"]) {\n    --_eds-chip-surface: var(--eds-c-surface-critical);\n    --_eds-chip-on-surface: var(--eds-c-on-surface-critical);\n    --_eds-chip-border-color: transparent;\n    --_eds-chip-surface-hover: var(--eds-c-surface-critical--hover);\n    --_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical--hover);\n    --_eds-chip-surface-active: var(--eds-c-surface-critical--pressed);\n    --_eds-chip-on-surface-active: var(--eds-c-on-surface-critical--pressed);\n}\n\n// Disabled wins over every color/active combination — the extra [disabled] raises specificity\n// above the two-attribute :host([active][color=\"…\"]) active overrides above.\n:host([disabled]),\n:host([disabled][active]) {\n    --_eds-chip-surface: var(--eds-c-surface-disabled-subtle);\n    --_eds-chip-on-surface: var(--eds-c-foreground-disabled);\n    --_eds-chip-border-color: var(--eds-c-border-disabled);\n    --_eds-chip-surface-hover: var(--eds-c-surface-disabled-subtle);\n    --_eds-chip-on-surface-hover: var(--eds-c-foreground-disabled);\n    --_eds-chip-surface-active: var(--eds-c-surface-disabled-subtle);\n    --_eds-chip-on-surface-active: var(--eds-c-foreground-disabled);\n\n    cursor: default;\n}\n",
                     "styleUrl": "./eds-chip.scss"
                 }
             ],
@@ -40909,7 +40905,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 inherited `--_icon-size` (set by a composing parent such as eds-avatar) always\n// takes precedence; the icon's own `size` attribute is the fallback. This lets a\n// parent size a projected icon purely through custom-property inheritance — no\n// ::ng-deep required across the component boundary.\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    .eds-icon-spinner {\n        display: inline-block;\n        width: var(--_eds-icon-size);\n        height: var(--_eds-icon-size);\n        border: 3px 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// 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=\"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",
                     "styleUrl": "./eds-icon.scss"
                 }
             ],
@@ -47122,7 +47118,7 @@
         },
         {
             "name": "EdsLabel",
-            "id": "component-EdsLabel-b2fdb15189489609b286666b45939e28d51f054e0b5e50f6c182ce1ff40242752db5ea6476fae58207cb272124ea54c778f4ab35a22e7d86d1a290a18d4b3120",
+            "id": "component-EdsLabel-6a7892f50e0f744d2ac74c39cc66fcd29647088f763f2fc971778ecfee99441b09bba46f0d098031acd473b9f8d7c6ca501b7c3817903e6f657a38d12e15542a",
             "file": "packages/eds/eds-label/eds-label.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -47140,18 +47136,43 @@
             "templateUrl": [],
             "templateVariables": [],
             "viewProviders": [],
-            "hostDirectives": [
+            "hostDirectives": [],
+            "inputsClass": [
                 {
-                    "name": "EdsColorDirective",
-                    "inputs": [
-                        "edsNeutral",
-                        "edsCritical",
-                        "edsColorVariant"
+                    "name": "color",
+                    "coverageIgnore": false,
+                    "defaultValue": "'neutral'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "EdsLabelColor",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Semantic color of the label.\n&#39;neutral&#39;</p>\n",
+                    "line": 43,
+                    "rawdescription": "\n\nSemantic color of the label.\n'neutral'\n",
+                    "jsdoctags": [
+                        {
+                            "pos": 1208,
+                            "end": 1232,
+                            "kind": 328,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 1209,
+                                "end": 1216,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "default"
+                            },
+                            "comment": "<p>&#39;neutral&#39;</p>\n"
+                        }
                     ],
-                    "outputs": []
-                }
-            ],
-            "inputsClass": [
+                    "required": false
+                },
                 {
                     "name": "edsRequired",
                     "coverageIgnore": false,
@@ -47162,20 +47183,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Marks the label as required (appends a red asterisk).\nfalse</p>\n",
-                    "line": 37,
+                    "line": 49,
                     "rawdescription": "\n\nMarks the label as required (appends a red asterisk).\nfalse\n",
                     "jsdoctags": [
                         {
-                            "pos": 836,
-                            "end": 856,
+                            "pos": 1357,
+                            "end": 1377,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 837,
-                                "end": 844,
+                                "pos": 1358,
+                                "end": 1365,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -47189,37 +47210,7 @@
                 }
             ],
             "outputsClass": [],
-            "propertiesClass": [
-                {
-                    "name": "colorDirective",
-                    "coverageIgnore": false,
-                    "defaultValue": "inject(EdsColorDirective)",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 39,
-                    "rawdescription": "\n",
-                    "modifierKind": [
-                        124
-                    ]
-                },
-                {
-                    "name": "hostClasses",
-                    "coverageIgnore": false,
-                    "defaultValue": "computed(() => {\n        const colorClass = this.colorDirective.getCssClass('eds-label');\n        return [\n            'eds-label',\n            colorClass || 'eds-label--neutral',\n            this.edsRequired() ? 'eds-label--required' : '',\n        ]\n            .join(' ')\n            .trim();\n    })",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>Computed host CSS classes based on current state.</p>\n",
-                    "line": 44,
-                    "rawdescription": "\n\nComputed host CSS classes based on current state.\n"
-                }
-            ],
+            "propertiesClass": [],
             "methodsClass": [],
             "coverageIgnore": false,
             "deprecated": false,
@@ -47228,29 +47219,35 @@
             "hostListeners": [],
             "standalone": false,
             "imports": [],
-            "description": "",
-            "rawdescription": "\n",
+            "description": "<p>A form label applied to <code>label</code>, <code>span</code>, or <code>div</code> elements via the <code>edsLabel</code> attribute.\nSupports a semantic color (<code>neutral</code> default, <code>critical</code> for errors) reflected as a host\nattribute, plus a required marker.</p>\n<p>Usage:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;label edsLabel for=&quot;name&quot;&gt;Name&lt;/label&gt;\n&lt;label edsLabel edsRequired for=&quot;email&quot;&gt;Email&lt;/label&gt;\n&lt;span edsLabel color=&quot;critical&quot;&gt;This field is required&lt;/span&gt;</code></pre></div>",
+            "rawdescription": "\n\nA form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.\nSupports a semantic color (`neutral` default, `critical` for errors) reflected as a host\nattribute, plus a required marker.\n\nUsage:\n```html\n<label edsLabel for=\"name\">Name</label>\n<label edsLabel edsRequired for=\"email\">Email</label>\n<span edsLabel color=\"critical\">This field is required</span>\n```\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    computed,\n    booleanAttribute,\n    inject,\n} from '@angular/core';\n\nimport { EdsColorDirective } from '@eui/eds/shared';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'label[edsLabel], span[edsLabel], div[edsLabel]',\n    template: '<ng-content/>',\n    styleUrl: './eds-label.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    hostDirectives: [\n        {\n            directive: EdsColorDirective,\n            inputs: [\n                'edsNeutral',\n                'edsCritical',\n                'edsColorVariant',\n            ],\n        },\n    ],\n    host: {\n        '[class]': 'hostClasses()',\n    },\n})\nexport class EdsLabel {\n    /**\n     * Marks the label as required (appends a red asterisk).\n     * @default false\n     */\n    edsRequired = input(false, { transform: booleanAttribute });\n\n    protected colorDirective = inject(EdsColorDirective);\n\n    /**\n     * Computed host CSS classes based on current state.\n     */\n    hostClasses = computed(() => {\n        const colorClass = this.colorDirective.getCssClass('eds-label');\n        return [\n            'eds-label',\n            colorClass || 'eds-label--neutral',\n            this.edsRequired() ? 'eds-label--required' : '',\n        ]\n            .join(' ')\n            .trim();\n    });\n}\n",
+            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    booleanAttribute,\n} from '@angular/core';\n\n/**\n * Local narrowed color union — the label's color contract.\n * `neutral` is the default; `critical` colors the label for error context.\n */\nexport type EdsLabelColor = 'neutral' | 'critical';\n\n/**\n * A form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.\n * Supports a semantic color (`neutral` default, `critical` for errors) reflected as a host\n * attribute, plus a required marker.\n *\n * Usage:\n * ```html\n * <label edsLabel for=\"name\">Name</label>\n * <label edsLabel edsRequired for=\"email\">Email</label>\n * <span edsLabel color=\"critical\">This field is required</span>\n * ```\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'label[edsLabel], span[edsLabel], div[edsLabel]',\n    template: '<ng-content/>',\n    styleUrl: './eds-label.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'eds-label',\n        '[attr.color]': 'color()',\n        '[attr.required]': 'edsRequired() || null',\n    },\n})\nexport class EdsLabel {\n    /**\n     * Semantic color of the label.\n     * @default 'neutral'\n     */\n    color = input<EdsLabelColor>('neutral');\n\n    /**\n     * Marks the label as required (appends a red asterisk).\n     * @default false\n     */\n    edsRequired = input(false, { transform: booleanAttribute });\n}\n",
             "styleUrl": "./eds-label.scss",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host.eds-label {\n        display: inline-block;\n        font: var(--eds-f-label-m-semibold);\n        color: var(--eds-c-foreground);\n    }\n\n    :host.eds-label--required {\n        &::after {\n            color: var(--eds-c-foreground-critical);\n            content: ' *';\n            font: var(--eds-f-label-m-semibold);\n        }\n    }\n\n    :host.eds-label--neutral {\n        color: var(--eds-c-foreground);\n    }\n\n    :host.eds-label--critical {\n        color: var(--eds-c-foreground-critical);\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    display: inline-block;\n    font: var(--eds-f-label-m-semibold);\n    color: var(--eds-c-foreground);\n}\n\n// COLOR VARIANTS\n// --------------\n\n:host([color=\"neutral\"])  { color: var(--eds-c-foreground); }\n:host([color=\"critical\"]) { color: var(--eds-c-foreground-critical); }\n\n// REQUIRED MARKER\n// ---------------\n\n:host([required])::after {\n    color: var(--eds-c-foreground-critical);\n    content: ' *';\n    font: var(--eds-f-label-m-semibold);\n}\n",
                     "styleUrl": "./eds-label.scss"
                 }
             ],
             "stylesData": "",
+            "jsdoctags": [
+                {
+                    "pos": 308,
+                    "end": 733,
+                    "kind": 321,
+                    "id": 0,
+                    "flags": 16777216,
+                    "modifierFlagsCache": 0,
+                    "transformFlags": 0,
+                    "comment": "A form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.\nSupports a semantic color (`neutral` default, `critical` for errors) reflected as a host\nattribute, plus a required marker.\n\nUsage:\n```html\n<label edsLabel for=\"name\">Name</label>\n<label edsLabel edsRequired for=\"email\">Email</label>\n<span edsLabel color=\"critical\">This field is required</span>\n```"
+                }
+            ],
             "extends": [],
             "relationships": {
                 "incoming": [],
-                "outgoing": [
-                    {
-                        "name": "EdsColorDirective",
-                        "type": "directive",
-                        "description": "Signal-based color variant directive. Provides both a string-based `edsColorVariant` input and boolean shorthand inputs (`edsNeutral`, `e..."
-                    }
-                ]
+                "outgoing": []
             }
         },
         {
@@ -47707,7 +47704,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: inline-flex;\n        position: relative;\n\n        .language-toggle {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-3xs);\n            padding: var(--eds-sp-3xs) var(--eds-sp-xs);\n            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral-subtle);\n            border-radius: var(--eds-br-s);\n            background: none;\n            cursor: pointer;\n            font: var(--eds-f-label-m-semibold);\n            color: inherit;\n            transition: background 0.15s ease, border-color 0.15s ease;\n\n            @include base.eds-focus-visible-ring();\n\n            &:hover {\n                background: var(--eds-c-surface-elevation-sunken);\n                border-color: var(--eds-c-border-neutral);\n            }\n\n            &--icon-layout {\n                border: none;\n                padding: var(--eds-sp-3xs) var(--eds-sp-2xs);\n                gap: var(--eds-sp-3xs);\n                border-radius: var(--eds-br-s);\n\n                &:hover {\n                    background: var(--eds-c-surface-elevation-sunken);\n                }\n            }\n        }\n\n        .language-code {\n            font: var(--eds-f-label-m-semibold);\n        }\n\n        .chevron {\n            font-size: var(--eds-f-s-xs);\n            color: var(--eds-c-foreground-subtler);\n        }\n\n        .language-dropdown {\n            position: absolute;\n            top: 100%;\n            left: 0;\n            z-index: 200;\n            margin-top: var(--eds-sp-3xs);\n            min-width: 160px;\n            list-style: none;\n            padding: var(--eds-sp-3xs) var(--eds-sp-none);\n            background: var(--eds-c-surface-elevation-overlay);\n            border: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n            border-radius: var(--eds-br-m);\n            box-shadow: var(--eds-sh-3);\n\n            &--align-right {\n                left: auto;\n                right: 0;\n            }\n        }\n\n        .language-option {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            padding: var(--eds-sp-xs) var(--eds-sp-m);\n            cursor: pointer;\n            font: var(--eds-f-paragraph-s);\n            color: var(--eds-c-foreground);\n            transition: background 0.15s ease;\n            outline: none;\n\n            &:hover,\n            &.focused {\n                background: var(--eds-c-surface-elevation-sunken);\n            }\n\n            &.focused {\n                outline: var(--eds-bw-xs) solid var(--eds-c-border-primary);\n                outline-offset: -1px;\n            }\n\n            &.selected {\n                color: var(--eds-c-foreground-primary);\n                font-weight: var(--eds-f-w-semibold);\n            }\n        }\n\n        .option-code {\n            font: var(--eds-f-label-m-semibold);\n            min-width: 2rem;\n        }\n\n        .option-label {\n            flex: 1;\n        }\n    }\n\n    // COLOR VARIANTS\n    :host.eds-language-selector--brand {\n        .language-toggle {\n            color: var(--eds-c-on-surface-brand);\n            border-color: transparent;\n\n            &:hover {\n                background: var(--eds-c-surface-brand--hover);\n                color: var(--eds-c-on-surface-brand--hover);\n            }\n\n            &--icon-layout:hover {\n                background: var(--eds-c-surface-brand--hover);\n                color: var(--eds-c-on-surface-brand--hover);\n            }\n\n            ::ng-deep .eds-icon {\n                --_on-surface: var(--eds-c-on-surface-brand);\n            }\n        }\n\n        .chevron {\n            color: var(--eds-c-on-surface-brand);\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: inline-flex;\n        position: relative;\n\n        .language-toggle {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-3xs);\n            padding: var(--eds-sp-3xs) var(--eds-sp-xs);\n            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral-subtle);\n            border-radius: var(--eds-br-s);\n            background: none;\n            cursor: pointer;\n            font: var(--eds-f-label-m-semibold);\n            color: inherit;\n            transition: background 0.15s ease, border-color 0.15s ease;\n\n            @include base.eds-focus-visible-ring();\n\n            &:hover {\n                background: var(--eds-c-surface-elevation-sunken);\n                border-color: var(--eds-c-border-neutral);\n            }\n\n            &--icon-layout {\n                border: none;\n                padding: var(--eds-sp-3xs) var(--eds-sp-2xs);\n                gap: var(--eds-sp-3xs);\n                border-radius: var(--eds-br-s);\n\n                &:hover {\n                    background: var(--eds-c-surface-elevation-sunken);\n                }\n            }\n        }\n\n        .language-code {\n            font: var(--eds-f-label-m-semibold);\n        }\n\n        .chevron {\n            font-size: var(--eds-f-s-xs);\n            color: var(--eds-c-foreground-subtler);\n        }\n\n        .language-dropdown {\n            position: absolute;\n            top: 100%;\n            left: 0;\n            z-index: 200;\n            margin-top: var(--eds-sp-3xs);\n            min-width: 160px;\n            list-style: none;\n            padding: var(--eds-sp-3xs) var(--eds-sp-none);\n            background: var(--eds-c-surface-elevation-overlay);\n            border: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n            border-radius: var(--eds-br-m);\n            box-shadow: var(--eds-sh-3);\n\n            &--align-right {\n                left: auto;\n                right: 0;\n            }\n        }\n\n        .language-option {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            padding: var(--eds-sp-xs) var(--eds-sp-m);\n            cursor: pointer;\n            font: var(--eds-f-paragraph-s);\n            color: var(--eds-c-foreground);\n            transition: background 0.15s ease;\n            outline: none;\n\n            &:hover,\n            &.focused {\n                background: var(--eds-c-surface-elevation-sunken);\n            }\n\n            &.focused {\n                outline: var(--eds-bw-xs) solid var(--eds-c-border-primary);\n                outline-offset: -1px;\n            }\n\n            &.selected {\n                color: var(--eds-c-foreground-primary);\n                font-weight: var(--eds-f-w-semibold);\n            }\n        }\n\n        .option-code {\n            font: var(--eds-f-label-m-semibold);\n            min-width: 2rem;\n        }\n\n        .option-label {\n            flex: 1;\n        }\n    }\n\n    // COLOR VARIANTS\n    :host.eds-language-selector--brand {\n        .language-toggle {\n            color: var(--eds-c-on-surface-brand);\n            border-color: transparent;\n\n            &:hover {\n                background: var(--eds-c-surface-brand--hover);\n                color: var(--eds-c-on-surface-brand--hover);\n            }\n\n            &--icon-layout:hover {\n                background: var(--eds-c-surface-brand--hover);\n                color: var(--eds-c-on-surface-brand--hover);\n            }\n\n            ::ng-deep eds-icon {\n                // --_eds-icon-on-surface is the icon's top-priority color override; it is\n                // honored even by the icon's own color=\"…\" variant branches, whereas\n                // --_on-surface is only a lower-priority fallback the variant branches ignore.\n                --_eds-icon-on-surface: var(--eds-c-on-surface-brand);\n            }\n        }\n\n        .chevron {\n            color: var(--eds-c-on-surface-brand);\n        }\n    }\n}\n",
                     "styleUrl": "./eds-language-selector.scss"
                 }
             ],
@@ -52285,7 +52282,7 @@
         },
         {
             "name": "EdsOverlay",
-            "id": "component-EdsOverlay-2d971cdb0c7ffb58e1e7a791c88f0db5886f3ad591e10c9cc1cadded2013c4175f64efc67fb79a9190f7ffa2410382ca7144771fe76ee8cdb7758850afa85473",
+            "id": "component-EdsOverlay-1b392b510b939cf5c652fd2b23120e50f0de213ec7253738e3cf53e8dbdfc7c6bd815cf5e1569960bebd518b0fe223e83c85be3b4c4c3c4e1a4a7386cb411815",
             "file": "packages/eds/eds-overlay/eds-overlay.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -52320,6 +52317,20 @@
                     "rawdescription": "\nFixed width value (overrides responsive width).",
                     "required": false
                 },
+                {
+                    "name": "hasBackdrop",
+                    "coverageIgnore": false,
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Shows a dimmed backdrop behind the overlay panel. Off by default.</p>\n",
+                    "line": 36,
+                    "rawdescription": "\nShows a dimmed backdrop behind the overlay panel. Off by default.",
+                    "required": false
+                },
                 {
                     "name": "hasClosedOnClickOutside",
                     "coverageIgnore": false,
@@ -52358,7 +52369,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Applies highlighted visual styling.</p>\n",
-                    "line": 36,
+                    "line": 39,
                     "rawdescription": "\nApplies highlighted visual styling.",
                     "required": false
                 },
@@ -52401,7 +52412,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Emitted when the overlay&#39;s active state changes (typically false for close requests).</p>\n",
-                    "line": 39,
+                    "line": 42,
                     "rawdescription": "\nEmitted when the overlay's active state changes (typically false for close requests).",
                     "required": false
                 }
@@ -52417,7 +52428,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 41,
+                    "line": 44,
                     "rawdescription": "\n"
                 }
             ],
@@ -52429,7 +52440,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 58,
+                    "line": 61,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -52442,7 +52453,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 52,
+                    "line": 55,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -52470,7 +52481,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 52
+                    "line": 55
                 }
             ],
             "standalone": false,
@@ -52483,12 +52494,12 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, ChangeDetectionStrategy, input, output, computed, booleanAttribute, HostListener } from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\n\nexport type EdsOverlayPosition = 'right' | 'left' | 'top' | 'bottom';\n\n@Component({\n  selector: 'eds-overlay',\n  templateUrl: './eds-overlay.html',\n  styleUrl: './eds-overlay.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [A11yModule],\n  host: {\n    '[class]': 'hostClasses()',\n    role: 'dialog',\n    '[attr.aria-hidden]': '!isActive()',\n    '[attr.inert]': '!isActive() ? true : null',\n  },\n})\nexport class EdsOverlay {\n  /** Controls the visibility and active state of the overlay. */\n  isActive = input(false, { transform: booleanAttribute });\n\n  /** Screen position where the overlay appears ('right', 'left', 'top', 'bottom'). */\n  position = input<EdsOverlayPosition>('right');\n\n  /** Responsive width variant for the overlay panel (e.g. 'small', 'medium', 'large'). */\n  width = input<string>('');\n\n  /** Fixed width value (overrides responsive width). */\n  fixedWidth = input<string>('');\n\n  /** Enables automatic closing when clicking outside the overlay. */\n  hasClosedOnClickOutside = input(false, { transform: booleanAttribute });\n\n  /** Applies highlighted visual styling. */\n  isHighlighted = input(false, { transform: booleanAttribute });\n\n  /** Emitted when the overlay's active state changes (typically false for close requests). */\n  activeState = output<boolean>();\n\n  hostClasses = computed(() => {\n    return [\n      'eds-overlay',\n      `eds-overlay--${this.position()}`,\n      this.isActive() ? 'eds-overlay--active' : '',\n      this.width() ? `eds-overlay--width-${this.width()}` : '',\n      this.isHighlighted() ? 'eds-overlay--highlighted' : '',\n    ].join(' ').trim();\n  });\n\n  @HostListener('document:keydown.escape')\n  onEscape(): void {\n    if (this.isActive()) {\n      this.activeState.emit(false);\n    }\n  }\n\n  onBackdropClick(): void {\n    if (this.hasClosedOnClickOutside()) {\n      this.activeState.emit(false);\n    }\n  }\n}\n",
+            "sourceCode": "import { Component, ChangeDetectionStrategy, input, output, computed, booleanAttribute, HostListener } from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\n\nexport type EdsOverlayPosition = 'right' | 'left' | 'top' | 'bottom';\n\n@Component({\n  selector: 'eds-overlay',\n  templateUrl: './eds-overlay.html',\n  styleUrl: './eds-overlay.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [A11yModule],\n  host: {\n    '[class]': 'hostClasses()',\n    role: 'dialog',\n    '[attr.aria-hidden]': '!isActive()',\n    '[attr.inert]': '!isActive() ? true : null',\n  },\n})\nexport class EdsOverlay {\n  /** Controls the visibility and active state of the overlay. */\n  isActive = input(false, { transform: booleanAttribute });\n\n  /** Screen position where the overlay appears ('right', 'left', 'top', 'bottom'). */\n  position = input<EdsOverlayPosition>('right');\n\n  /** Responsive width variant for the overlay panel (e.g. 'small', 'medium', 'large'). */\n  width = input<string>('');\n\n  /** Fixed width value (overrides responsive width). */\n  fixedWidth = input<string>('');\n\n  /** Enables automatic closing when clicking outside the overlay. */\n  hasClosedOnClickOutside = input(false, { transform: booleanAttribute });\n\n  /** Shows a dimmed backdrop behind the overlay panel. Off by default. */\n  hasBackdrop = input(false, { transform: booleanAttribute });\n\n  /** Applies highlighted visual styling. */\n  isHighlighted = input(false, { transform: booleanAttribute });\n\n  /** Emitted when the overlay's active state changes (typically false for close requests). */\n  activeState = output<boolean>();\n\n  hostClasses = computed(() => {\n    return [\n      'eds-overlay',\n      `eds-overlay--${this.position()}`,\n      this.isActive() ? 'eds-overlay--active' : '',\n      this.width() ? `eds-overlay--width-${this.width()}` : '',\n      this.isHighlighted() ? 'eds-overlay--highlighted' : '',\n    ].join(' ').trim();\n  });\n\n  @HostListener('document:keydown.escape')\n  onEscape(): void {\n    if (this.isActive()) {\n      this.activeState.emit(false);\n    }\n  }\n\n  onBackdropClick(): void {\n    if (this.hasClosedOnClickOutside()) {\n      this.activeState.emit(false);\n    }\n  }\n}\n",
             "styleUrl": "./eds-overlay.scss",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 1000;\n        pointer-events: none;\n        display: flex;\n\n        &.eds-overlay--active {\n            pointer-events: auto;\n        }\n\n        &.eds-overlay--right {\n            justify-content: flex-end;\n        }\n\n        &.eds-overlay--left {\n            justify-content: flex-start;\n        }\n\n        &.eds-overlay--top {\n            align-items: flex-start;\n\n            .eds-overlay-panel {\n                width: 100%;\n                max-height: 80vh;\n                transform: translateY(-100%);\n            }\n\n            &.eds-overlay--active .eds-overlay-panel {\n                transform: translateY(0);\n            }\n        }\n\n        &.eds-overlay--bottom {\n            align-items: flex-end;\n\n            .eds-overlay-panel {\n                width: 100%;\n                max-height: 80vh;\n                transform: translateY(100%);\n            }\n\n            &.eds-overlay--active .eds-overlay-panel {\n                transform: translateY(0);\n            }\n        }\n\n        &:not(.eds-overlay--active) {\n            visibility: hidden;\n\n            .eds-overlay-panel {\n                transform: translateX(100%);\n            }\n\n            &.eds-overlay--left .eds-overlay-panel {\n                transform: translateX(-100%);\n            }\n        }\n\n        &.eds-overlay--highlighted .eds-overlay-panel {\n            border-left: 3px solid var(--eds-c-border-primary);\n        }\n\n        .eds-overlay-backdrop {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: var(--eds-c-alpha-backdrop);\n        }\n\n        .eds-overlay-panel {\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            background: var(--eds-c-surface-elevation-overlay);\n            box-shadow: var(--eds-sh-4);\n            overflow: hidden;\n            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n            width: 400px;\n            max-width: 100vw;\n        }\n    }\n\n    // Width variants\n    :host.eds-overlay--width-small .eds-overlay-panel {\n        width: 320px;\n    }\n\n    :host.eds-overlay--width-medium .eds-overlay-panel {\n        width: 480px;\n    }\n\n    :host.eds-overlay--width-large .eds-overlay-panel {\n        width: 640px;\n    }\n\n    :host.eds-overlay--width-xlarge .eds-overlay-panel {\n        width: 800px;\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 1000;\n        pointer-events: none;\n        display: flex;\n\n        &.eds-overlay--active {\n            pointer-events: auto;\n        }\n\n        &.eds-overlay--right {\n            justify-content: flex-end;\n        }\n\n        &.eds-overlay--left {\n            justify-content: flex-start;\n        }\n\n        &.eds-overlay--top {\n            align-items: flex-start;\n\n            .eds-overlay-panel {\n                width: 100%;\n                max-height: 80vh;\n                transform: translateY(-100%);\n            }\n\n            &.eds-overlay--active .eds-overlay-panel {\n                transform: translateY(0);\n            }\n        }\n\n        &.eds-overlay--bottom {\n            align-items: flex-end;\n\n            .eds-overlay-panel {\n                width: 100%;\n                max-height: 80vh;\n                transform: translateY(100%);\n            }\n\n            &.eds-overlay--active .eds-overlay-panel {\n                transform: translateY(0);\n            }\n        }\n\n        &:not(.eds-overlay--active) {\n            visibility: hidden;\n\n            .eds-overlay-panel {\n                transform: translateX(100%);\n            }\n\n            &.eds-overlay--left .eds-overlay-panel {\n                transform: translateX(-100%);\n            }\n        }\n\n        &.eds-overlay--highlighted .eds-overlay-panel {\n            border-left: 3px solid var(--eds-c-border-primary);\n        }\n\n        .eds-overlay-backdrop {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            // Transparent by default (used only as a click-catcher for hasClosedOnClickOutside);\n            // dimmed only when the backdrop is explicitly requested via hasBackdrop.\n            background: transparent;\n\n            &.eds-overlay-backdrop--visible {\n                background: var(--eds-c-alpha-backdrop);\n            }\n        }\n\n        .eds-overlay-panel {\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            background: var(--eds-c-surface-elevation-overlay);\n            box-shadow: var(--eds-sh-4);\n            overflow: hidden;\n            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n            width: 400px;\n            max-width: 100vw;\n        }\n    }\n\n    // Width variants\n    :host.eds-overlay--width-small .eds-overlay-panel {\n        width: 320px;\n    }\n\n    :host.eds-overlay--width-medium .eds-overlay-panel {\n        width: 480px;\n    }\n\n    :host.eds-overlay--width-large .eds-overlay-panel {\n        width: 640px;\n    }\n\n    :host.eds-overlay--width-xlarge .eds-overlay-panel {\n        width: 800px;\n    }\n}\n",
                     "styleUrl": "./eds-overlay.scss"
                 }
             ],
@@ -52503,7 +52514,7 @@
                     }
                 ]
             },
-            "templateData": "@if (isActive()) {\n  <div class=\"eds-overlay-backdrop\" (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n  class=\"eds-overlay-panel\"\n  [style.width]=\"fixedWidth() || null\"\n  [cdkTrapFocus]=\"isActive()\"\n  [cdkTrapFocusAutoCapture]=\"true\">\n  <ng-content select=\"eds-overlay-header\"></ng-content>\n  <ng-content select=\"eds-overlay-content\"></ng-content>\n  <ng-content select=\"eds-overlay-footer\"></ng-content>\n  <ng-content></ng-content>\n</div>\n"
+            "templateData": "@if (isActive() && (hasBackdrop() || hasClosedOnClickOutside())) {\n  <div\n    class=\"eds-overlay-backdrop\"\n    [class.eds-overlay-backdrop--visible]=\"hasBackdrop()\"\n    (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n  class=\"eds-overlay-panel\"\n  [style.width]=\"fixedWidth() || null\"\n  [cdkTrapFocus]=\"isActive()\"\n  [cdkTrapFocusAutoCapture]=\"true\">\n  <ng-content select=\"eds-overlay-header\"></ng-content>\n  <ng-content select=\"eds-overlay-content\"></ng-content>\n  <ng-content select=\"eds-overlay-footer\"></ng-content>\n  <ng-content></ng-content>\n</div>\n"
         },
         {
             "name": "EdsOverlayContent",
@@ -77076,7 +77087,7 @@
                 "ctype": "miscellaneous",
                 "subtype": "typealias",
                 "coverageIgnore": false,
-                "rawtype": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"critical\"",
+                "rawtype": "\"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"critical\"",
                 "file": "packages/eds/eds-chip/eds-chip.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -77435,6 +77446,19 @@
                 "description": "<p>Local narrowed size union — the prompt input&#39;s size contract.</p>\n",
                 "kind": 193
             },
+            {
+                "name": "EdsLabelColor",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "coverageIgnore": false,
+                "rawtype": "\"neutral\" | \"critical\"",
+                "file": "packages/eds/eds-label/eds-label.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "rawdescription": "Local narrowed color union — the label's color contract.\n`neutral` is the default; `critical` colors the label for error context.",
+                "description": "<p>Local narrowed color union — the label&#39;s color contract.\n<code>neutral</code> is the default; <code>critical</code> colors the label for error context.</p>\n",
+                "kind": 193
+            },
             {
                 "name": "EdsListRole",
                 "ctype": "miscellaneous",
@@ -80658,7 +80682,7 @@
                     "ctype": "miscellaneous",
                     "subtype": "typealias",
                     "coverageIgnore": false,
-                    "rawtype": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"critical\"",
+                    "rawtype": "\"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"critical\"",
                     "file": "packages/eds/eds-chip/eds-chip.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
@@ -81048,6 +81072,21 @@
                     "kind": 193
                 }
             ],
+            "packages/eds/eds-label/eds-label.ts": [
+                {
+                    "name": "EdsLabelColor",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "coverageIgnore": false,
+                    "rawtype": "\"neutral\" | \"critical\"",
+                    "file": "packages/eds/eds-label/eds-label.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "Local narrowed color union — the label's color contract.\n`neutral` is the default; `critical` colors the label for error context.",
+                    "description": "<p>Local narrowed color union — the label&#39;s color contract.\n<code>neutral</code> is the default; <code>critical</code> colors the label for error context.</p>\n",
+                    "kind": 193
+                }
+            ],
             "packages/eds/eds-list/eds-list.ts": [
                 {
                     "name": "EdsListRole",