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

package/docs/json/EdsOverlay.md

@@ -9,6 +9,7 @@
 
 ## Inputs
 - **fixedWidth**: `string` - Fixed width value (overrides responsive width).
+- **hasBackdrop**: `boolean` - Shows a dimmed backdrop behind the overlay panel. Off by default.
 - **hasClosedOnClickOutside**: `boolean` - Enables automatic closing when clicking outside the overlay.
 - **isActive**: `boolean` - Controls the visibility and active state of the overlay.
 - **isHighlighted**: `boolean` - Applies highlighted visual styling.

package/docs/json/documentation.json

@@ -28102,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": [],
@@ -28137,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,
@@ -28172,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,
@@ -28220,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,
@@ -28255,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,
@@ -28290,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,
@@ -28339,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,
@@ -28374,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,
@@ -28409,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,
@@ -28634,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"
                 }
             ],
@@ -47704,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"
                 }
             ],
@@ -52282,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": [],
@@ -52317,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,
@@ -52355,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
                 },
@@ -52398,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
                 }
@@ -52414,7 +52428,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 41,
+                    "line": 44,
                     "rawdescription": "\n"
                 }
             ],
@@ -52426,7 +52440,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 58,
+                    "line": 61,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -52439,7 +52453,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 52,
+                    "line": 55,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -52467,7 +52481,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 52
+                    "line": 55
                 }
             ],
             "standalone": false,
@@ -52480,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"
                 }
             ],
@@ -52500,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",
@@ -77073,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": "",
@@ -80668,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": "",

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-26T11:20:02.308Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-09-27T12:18:02.375Z, llm-md export.
 
 ## Components
 
@@ -2252,6 +2252,7 @@ Change detection: `ChangeDetectionStrategy.OnPush`
 
 Inputs:
 - `fixedWidth: string = ''` — Fixed width value (overrides responsive width).
+- `hasBackdrop: boolean = false` — Shows a dimmed backdrop behind the overlay panel. Off by default.
 - `hasClosedOnClickOutside: boolean = false` — Enables automatic closing when clicking outside the overlay.
 - `isActive: boolean = false` — Controls the visibility and active state of the overlay.
 - `isHighlighted: boolean = false` — Applies highlighted visual styling.
@@ -5006,7 +5007,7 @@ Properties:
 - `type EdsButtonSize = "s" | "m" | "l"` — Sizes the button styles (SCSS :host(\[size="…"\]) branches).
 - `type EdsButtonType = "primary" | "secondary" | "tertiary"` — Local narrowed unions — the button's variant contract. No shared-token import.
 - `type EdsChartType = "line" | "area" | "bar" | "stacked-bar" | "horizontal-bar" | "pie" | "radar" | "heatmap" | "treemap" | "funnel" | "waterfall"` — Chart type variants.
-- `type EdsChipColor = "neutral" | "info" | "success" | "warning" | "critical"` — Local narrowed color union — the chip's color contract.
+- `type EdsChipColor = "neutral" | "primary" | "info" | "success" | "warning" | "critical"` — Local narrowed color union — the chip's color contract.
 - `type EdsChipSize = "s" | "m" | "l"` — Local narrowed size union — the chip's size contract.
 - `type EdsColorToken = "primary" | "brand" | "neutral" | "neutral-subtle" | "neutral-subtler" | "highlight" | "info" | "success" | "warning" | "critical" | "disabled"` — Supported color tokens across EDS components.
 - `type EdsDialogVerticalPosition = "top" | "center" | "bottom"`

package/docs/miscellaneous/typealiases.html

@@ -910,7 +910,7 @@ SCSS branches; <code>warning</code> is accepted for parity but has no styled bra
             </tr>
             <tr>
                 <td class="col-md-4">
-                    <code>    <code>&quot;neutral&quot; | &quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;critical&quot;</code>
+                    <code>    <code>&quot;neutral&quot; | &quot;primary&quot; | &quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;critical&quot;</code>
 </code>
                 </td>
             </tr>

package/docs/properties.html

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

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

@@ -154,7 +154,7 @@ class EdsChip {
         this.chipClick.emit(this.data());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsChip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsChip, isStandalone: true, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, edsInternalId: { classPropertyName: "edsInternalId", publicName: "edsInternalId", isSignal: true, isRequired: false, transformFunction: null }, tooltipMessage: { classPropertyName: "tooltipMessage", publicName: "tooltipMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isRemovable: { classPropertyName: "isRemovable", publicName: "isRemovable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipRemove: "chipRemove", chipClick: "chipClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onHostClick($event)", "keydown.space": "onHostKeyActivate($event)", "keydown.delete": "onKeyRemove($event)", "keydown.backspace": "onKeyRemove($event)" }, properties: { "attr.color": "color()", "attr.size": "size()", "attr.removable": "isRemovable() || null", "attr.active": "isActive() || null", "attr.disabled": "disabled() || null", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "attr.role": "hostRole()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-pressed": "isActive() ? \"true\" : null", "attr.aria-label": "ariaLabel()", "attr.data-e2e": "e2eAttr()" }, classAttribute: "eds-chip" }, ngImport: i0, template: "<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x:core\" [size]=\"iconSize()\"/>\n}\n", styles: [":host{--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-primary);--_eds-chip-border-color: var(--eds-c-border-primary-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle);--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl);--_eds-icon-on-surface: var(--_eds-chip-on-surface);border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_eds-chip-border-color);padding:var(--_eds-chip-padding);font:var(--_eds-chip-font);background-color:var(--_eds-chip-surface);color:var(--_eds-chip-on-surface);height:var(--_eds-chip-height);cursor:pointer;gap:var(--eds-sp-2xs);align-items:center}:host:not([disabled]):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}:host:hover{background-color:var(--_eds-chip-surface-hover);color:var(--_eds-chip-on-surface-hover)}:host:active{background-color:var(--_eds-chip-surface-active);color:var(--_eds-chip-on-surface-active)}:host .eds-chip__content{display:inline-flex;align-items:center;background:transparent;gap:var(--eds-sp-2xs)}:host .eds-chip__close{margin-left:var(--eds-sp-xs)}:host([size=s]){--_eds-chip-font: var(--eds-f-paragraph-xs);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);--_eds-chip-height: var(--eds-sp-l)}:host([size=m]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl)}:host([size=l]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-2xl)}:host([color=neutral]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-primary);--_eds-chip-border-color: var(--eds-c-border-primary-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle)}:host([color=info]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-info);--_eds-chip-border-color: var(--eds-c-border-info-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-info-subtle);--_eds-chip-surface-active: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-info-subtle)}:host([color=success]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-success);--_eds-chip-border-color: var(--eds-c-border-success-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-success-subtle);--_eds-chip-surface-active: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-success-subtle)}:host([color=warning]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-warning);--_eds-chip-border-color: var(--eds-c-border-warning-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning-subtle);--_eds-chip-surface-active: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-warning-subtle)}:host([color=critical]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-critical);--_eds-chip-border-color: var(--eds-c-border-critical-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical-subtle);--_eds-chip-surface-active: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-critical-subtle)}:host([active]){--_eds-chip-surface: var(--eds-c-surface-primary);--_eds-chip-on-surface: var(--eds-c-on-surface-primary);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-primary--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary--hover);--_eds-chip-surface-active: var(--eds-c-surface-primary--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary--pressed)}:host([disabled]){--_eds-chip-surface: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface: var(--eds-c-foreground-disabled);--_eds-chip-border-color: var(--eds-c-border-disabled);--_eds-chip-surface-hover: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-hover: var(--eds-c-foreground-disabled);--_eds-chip-surface-active: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-active: var(--eds-c-foreground-disabled);cursor:default}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsChip, isStandalone: true, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, edsInternalId: { classPropertyName: "edsInternalId", publicName: "edsInternalId", isSignal: true, isRequired: false, transformFunction: null }, tooltipMessage: { classPropertyName: "tooltipMessage", publicName: "tooltipMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isRemovable: { classPropertyName: "isRemovable", publicName: "isRemovable", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipRemove: "chipRemove", chipClick: "chipClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onHostClick($event)", "keydown.space": "onHostKeyActivate($event)", "keydown.delete": "onKeyRemove($event)", "keydown.backspace": "onKeyRemove($event)" }, properties: { "attr.color": "color()", "attr.size": "size()", "attr.removable": "isRemovable() || null", "attr.active": "isActive() || null", "attr.disabled": "disabled() || null", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "attr.role": "hostRole()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-pressed": "isActive() ? \"true\" : null", "attr.aria-label": "ariaLabel()", "attr.data-e2e": "e2eAttr()" }, classAttribute: "eds-chip" }, ngImport: i0, template: "<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x:core\" [size]=\"iconSize()\"/>\n}\n", styles: [":host{--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground);--_eds-chip-border-color: var(--eds-c-border-neutral-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle);--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl);--_eds-icon-on-surface: var(--_eds-chip-on-surface);border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_eds-chip-border-color);padding:var(--_eds-chip-padding);font:var(--_eds-chip-font);background-color:var(--_eds-chip-surface);color:var(--_eds-chip-on-surface);height:var(--_eds-chip-height);cursor:pointer;gap:var(--eds-sp-2xs);align-items:center}:host:not([disabled]):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}:host:hover{background-color:var(--_eds-chip-surface-hover);color:var(--_eds-chip-on-surface-hover)}:host:active{background-color:var(--_eds-chip-surface-active);color:var(--_eds-chip-on-surface-active)}:host .eds-chip__content{display:inline-flex;align-items:center;background:transparent;gap:var(--eds-sp-2xs)}:host .eds-chip__content ::ng-deep eds-icon:first-child{margin-left:calc(-1 * var(--eds-sp-3xs))}:host .eds-chip__content ::ng-deep eds-icon:last-child{margin-right:calc(-1 * var(--eds-sp-3xs))}:host .eds-chip__close{margin-left:var(--eds-sp-xs)}:host([size=s]){--_eds-chip-font: var(--eds-f-paragraph-xs);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);--_eds-chip-height: var(--eds-sp-l)}:host([size=m]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl)}:host([size=l]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-2xl)}:host([color=neutral]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground);--_eds-chip-border-color: var(--eds-c-border-neutral-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle)}:host([color=primary]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-primary);--_eds-chip-border-color: var(--eds-c-border-primary-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle)}:host([color=info]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-info);--_eds-chip-border-color: var(--eds-c-border-info-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-info-subtle);--_eds-chip-surface-active: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-info-subtle)}:host([color=success]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-success);--_eds-chip-border-color: var(--eds-c-border-success-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-success-subtle);--_eds-chip-surface-active: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-success-subtle)}:host([color=warning]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-warning);--_eds-chip-border-color: var(--eds-c-border-warning-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning-subtle);--_eds-chip-surface-active: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-warning-subtle)}:host([color=critical]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-critical);--_eds-chip-border-color: var(--eds-c-border-critical-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical-subtle);--_eds-chip-surface-active: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-critical-subtle)}:host([active]),:host([active][color=neutral]){--_eds-chip-surface: var(--eds-c-surface-inverted);--_eds-chip-on-surface: var(--eds-c-on-surface-inverted);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-inverted--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-inverted--hover);--_eds-chip-surface-active: var(--eds-c-surface-inverted--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-inverted--pressed)}:host([active][color=primary]){--_eds-chip-surface: var(--eds-c-surface-primary);--_eds-chip-on-surface: var(--eds-c-on-surface-primary);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-primary--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary--hover);--_eds-chip-surface-active: var(--eds-c-surface-primary--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary--pressed)}:host([active][color=info]){--_eds-chip-surface: var(--eds-c-surface-info);--_eds-chip-on-surface: var(--eds-c-on-surface-info);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-info--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-info--hover);--_eds-chip-surface-active: var(--eds-c-surface-info--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-info--pressed)}:host([active][color=success]){--_eds-chip-surface: var(--eds-c-surface-success);--_eds-chip-on-surface: var(--eds-c-on-surface-success);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-success--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-success--hover);--_eds-chip-surface-active: var(--eds-c-surface-success--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-success--pressed)}:host([active][color=warning]){--_eds-chip-surface: var(--eds-c-surface-warning);--_eds-chip-on-surface: var(--eds-c-on-surface-warning);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-warning--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning--hover);--_eds-chip-surface-active: var(--eds-c-surface-warning--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-warning--pressed)}:host([active][color=critical]){--_eds-chip-surface: var(--eds-c-surface-critical);--_eds-chip-on-surface: var(--eds-c-on-surface-critical);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-critical--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical--hover);--_eds-chip-surface-active: var(--eds-c-surface-critical--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-critical--pressed)}:host([disabled]),:host([disabled][active]){--_eds-chip-surface: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface: var(--eds-c-foreground-disabled);--_eds-chip-border-color: var(--eds-c-border-disabled);--_eds-chip-surface-hover: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-hover: var(--eds-c-foreground-disabled);--_eds-chip-surface-active: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-active: var(--eds-c-foreground-disabled);cursor:default}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsChip, decorators: [{
             type: Component,
@@ -180,7 +180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '(keydown.space)': 'onHostKeyActivate($event)',
                         '(keydown.delete)': 'onKeyRemove($event)',
                         '(keydown.backspace)': 'onKeyRemove($event)',
-                    }, template: "<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x:core\" [size]=\"iconSize()\"/>\n}\n", styles: [":host{--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-primary);--_eds-chip-border-color: var(--eds-c-border-primary-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle);--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl);--_eds-icon-on-surface: var(--_eds-chip-on-surface);border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_eds-chip-border-color);padding:var(--_eds-chip-padding);font:var(--_eds-chip-font);background-color:var(--_eds-chip-surface);color:var(--_eds-chip-on-surface);height:var(--_eds-chip-height);cursor:pointer;gap:var(--eds-sp-2xs);align-items:center}:host:not([disabled]):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}:host:hover{background-color:var(--_eds-chip-surface-hover);color:var(--_eds-chip-on-surface-hover)}:host:active{background-color:var(--_eds-chip-surface-active);color:var(--_eds-chip-on-surface-active)}:host .eds-chip__content{display:inline-flex;align-items:center;background:transparent;gap:var(--eds-sp-2xs)}:host .eds-chip__close{margin-left:var(--eds-sp-xs)}:host([size=s]){--_eds-chip-font: var(--eds-f-paragraph-xs);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);--_eds-chip-height: var(--eds-sp-l)}:host([size=m]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl)}:host([size=l]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-2xl)}:host([color=neutral]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-primary);--_eds-chip-border-color: var(--eds-c-border-primary-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle)}:host([color=info]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-info);--_eds-chip-border-color: var(--eds-c-border-info-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-info-subtle);--_eds-chip-surface-active: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-info-subtle)}:host([color=success]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-success);--_eds-chip-border-color: var(--eds-c-border-success-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-success-subtle);--_eds-chip-surface-active: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-success-subtle)}:host([color=warning]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-warning);--_eds-chip-border-color: var(--eds-c-border-warning-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning-subtle);--_eds-chip-surface-active: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-warning-subtle)}:host([color=critical]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-critical);--_eds-chip-border-color: var(--eds-c-border-critical-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical-subtle);--_eds-chip-surface-active: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-critical-subtle)}:host([active]){--_eds-chip-surface: var(--eds-c-surface-primary);--_eds-chip-on-surface: var(--eds-c-on-surface-primary);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-primary--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary--hover);--_eds-chip-surface-active: var(--eds-c-surface-primary--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary--pressed)}:host([disabled]){--_eds-chip-surface: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface: var(--eds-c-foreground-disabled);--_eds-chip-border-color: var(--eds-c-border-disabled);--_eds-chip-surface-hover: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-hover: var(--eds-c-foreground-disabled);--_eds-chip-surface-active: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-active: var(--eds-c-foreground-disabled);cursor:default}\n"] }]
+                    }, template: "<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x:core\" [size]=\"iconSize()\"/>\n}\n", styles: [":host{--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground);--_eds-chip-border-color: var(--eds-c-border-neutral-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle);--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl);--_eds-icon-on-surface: var(--_eds-chip-on-surface);border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_eds-chip-border-color);padding:var(--_eds-chip-padding);font:var(--_eds-chip-font);background-color:var(--_eds-chip-surface);color:var(--_eds-chip-on-surface);height:var(--_eds-chip-height);cursor:pointer;gap:var(--eds-sp-2xs);align-items:center}:host:not([disabled]):focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}:host:hover{background-color:var(--_eds-chip-surface-hover);color:var(--_eds-chip-on-surface-hover)}:host:active{background-color:var(--_eds-chip-surface-active);color:var(--_eds-chip-on-surface-active)}:host .eds-chip__content{display:inline-flex;align-items:center;background:transparent;gap:var(--eds-sp-2xs)}:host .eds-chip__content ::ng-deep eds-icon:first-child{margin-left:calc(-1 * var(--eds-sp-3xs))}:host .eds-chip__content ::ng-deep eds-icon:last-child{margin-right:calc(-1 * var(--eds-sp-3xs))}:host .eds-chip__close{margin-left:var(--eds-sp-xs)}:host([size=s]){--_eds-chip-font: var(--eds-f-paragraph-xs);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);--_eds-chip-height: var(--eds-sp-l)}:host([size=m]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-xl)}:host([size=l]){--_eds-chip-font: var(--eds-f-paragraph-s);--_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_eds-chip-height: var(--eds-sp-2xl)}:host([color=neutral]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground);--_eds-chip-border-color: var(--eds-c-border-neutral-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle)}:host([color=primary]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-primary);--_eds-chip-border-color: var(--eds-c-border-primary-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle)}:host([color=info]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-info);--_eds-chip-border-color: var(--eds-c-border-info-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-info-subtle);--_eds-chip-surface-active: var(--eds-c-surface-info-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-info-subtle)}:host([color=success]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-success);--_eds-chip-border-color: var(--eds-c-border-success-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-success-subtle);--_eds-chip-surface-active: var(--eds-c-surface-success-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-success-subtle)}:host([color=warning]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-warning);--_eds-chip-border-color: var(--eds-c-border-warning-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning-subtle);--_eds-chip-surface-active: var(--eds-c-surface-warning-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-warning-subtle)}:host([color=critical]){--_eds-chip-surface: transparent;--_eds-chip-on-surface: var(--eds-c-foreground-critical);--_eds-chip-border-color: var(--eds-c-border-critical-subtle);--_eds-chip-surface-hover: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical-subtle);--_eds-chip-surface-active: var(--eds-c-surface-critical-subtle);--_eds-chip-on-surface-active: var(--eds-c-on-surface-critical-subtle)}:host([active]),:host([active][color=neutral]){--_eds-chip-surface: var(--eds-c-surface-inverted);--_eds-chip-on-surface: var(--eds-c-on-surface-inverted);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-inverted--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-inverted--hover);--_eds-chip-surface-active: var(--eds-c-surface-inverted--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-inverted--pressed)}:host([active][color=primary]){--_eds-chip-surface: var(--eds-c-surface-primary);--_eds-chip-on-surface: var(--eds-c-on-surface-primary);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-primary--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary--hover);--_eds-chip-surface-active: var(--eds-c-surface-primary--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-primary--pressed)}:host([active][color=info]){--_eds-chip-surface: var(--eds-c-surface-info);--_eds-chip-on-surface: var(--eds-c-on-surface-info);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-info--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-info--hover);--_eds-chip-surface-active: var(--eds-c-surface-info--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-info--pressed)}:host([active][color=success]){--_eds-chip-surface: var(--eds-c-surface-success);--_eds-chip-on-surface: var(--eds-c-on-surface-success);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-success--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-success--hover);--_eds-chip-surface-active: var(--eds-c-surface-success--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-success--pressed)}:host([active][color=warning]){--_eds-chip-surface: var(--eds-c-surface-warning);--_eds-chip-on-surface: var(--eds-c-on-surface-warning);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-warning--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning--hover);--_eds-chip-surface-active: var(--eds-c-surface-warning--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-warning--pressed)}:host([active][color=critical]){--_eds-chip-surface: var(--eds-c-surface-critical);--_eds-chip-on-surface: var(--eds-c-on-surface-critical);--_eds-chip-border-color: transparent;--_eds-chip-surface-hover: var(--eds-c-surface-critical--hover);--_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical--hover);--_eds-chip-surface-active: var(--eds-c-surface-critical--pressed);--_eds-chip-on-surface-active: var(--eds-c-on-surface-critical--pressed)}:host([disabled]),:host([disabled][active]){--_eds-chip-surface: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface: var(--eds-c-foreground-disabled);--_eds-chip-border-color: var(--eds-c-border-disabled);--_eds-chip-surface-hover: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-hover: var(--eds-c-foreground-disabled);--_eds-chip-surface-active: var(--eds-c-surface-disabled-subtle);--_eds-chip-on-surface-active: var(--eds-c-foreground-disabled);cursor:default}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], edsInternalId: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsInternalId", required: false }] }], tooltipMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], isRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRemovable", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chipRemove: [{ type: i0.Output, args: ["chipRemove"] }], chipClick: [{ type: i0.Output, args: ["chipClick"] }] } });
 
 /**