@eui/eds 22.0.0-alpha.17 → 22.0.0-alpha.18

package/docs/json/documentation.json

@@ -3452,12 +3452,12 @@
         },
         {
             "name": "EdsLanguageSelectorDialogConfig",
-            "id": "interface-EdsLanguageSelectorDialogConfig-585c9ebf988aee1963674b25a644d8ec75df093ab665d9e7a5ff88d49ef15015bc13b8c354d32bd72dbea11d027050622484572bc4898c4080434f6b0b8b91b6",
+            "id": "interface-EdsLanguageSelectorDialogConfig-01129b158a34bfb8365720e796f11a09bead762cb07d02210e6fdbb4d466bd2b14c9d445b00243ea275988b940405caad04c846838f195b99f0260922b1e218d",
             "file": "packages/eds/eds-language-selector/eds-language-selector-dialog.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';\nimport { UpperCasePipe } from '@angular/common';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_DIALOG_COMPONENT_CONFIG } from '@eui/eds/eds-dialog';\nimport { EdsDialogService } from '@eui/eds/eds-dialog';\nimport { EdsLanguage } from './eds-language-selector';\n\n/** Official EU language codes. */\nconst EU_LANGUAGE_CODES = new Set([\n    'bg', 'cs', 'da', 'de', 'et', 'el', 'en', 'es', 'fr', 'ga',\n    'hr', 'it', 'lv', 'lt', 'hu', 'mt', 'nl', 'pl', 'pt', 'ro',\n    'sk', 'sl', 'fi', 'sv',\n]);\n\nexport interface EdsLanguageSelectorDialogConfig {\n    /** All available languages. */\n    languages: EdsLanguage[];\n    /** Currently selected language code. */\n    selectedLanguage: string;\n    /** Callback when a language is selected. */\n    onLanguageChange: (code: string) => void;\n}\n\n/**\n * Dialog content component for the language selector.\n * Displays EU and non-EU languages in separate grid sections.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'eds-language-selector-dialog',\n    template: `\n        <div class=\"eds-language-dialog\">\n            @if (nonEuLanguages().length > 0) {\n                <h4 class=\"eds-language-dialog__section-title\">EU Languages</h4>\n            }\n            <div class=\"eds-language-dialog__grid\">\n                @for (lang of euLanguages(); track lang.code) {\n                    <div class=\"eds-language-dialog__item\">\n                        <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n                        <button\n                            edsButton\n                            [edsPrimary]=\"lang.code === config?.selectedLanguage\"\n                            [edsNeutral]=\"lang.code !== config?.selectedLanguage\"\n                            (click)=\"selectLanguage(lang)\">\n                            <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n                        </button>\n                    </div>\n                }\n            </div>\n\n            @if (nonEuLanguages().length > 0) {\n                <h4 class=\"eds-language-dialog__section-title eds-language-dialog__section-title--additional\">Non-EU Languages</h4>\n                <div class=\"eds-language-dialog__grid\">\n                    @for (lang of nonEuLanguages(); track lang.code) {\n                        <div class=\"eds-language-dialog__item\">\n                            <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n                            <button\n                                edsButton\n                                [edsPrimary]=\"lang.code === config?.selectedLanguage\"\n                                [edsNeutral]=\"lang.code !== config?.selectedLanguage\"\n                                (click)=\"selectLanguage(lang)\">\n                                <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n                            </button>\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n    `,\n    styles: [`\n        .eds-language-dialog {\n            padding: var(--eds-sp-m);\n        }\n        .eds-language-dialog__section-title {\n            font: var(--eds-f-label-m-semi-bold);\n            margin-bottom: var(--eds-sp-s);\n        }\n        .eds-language-dialog__section-title--additional {\n            margin-top: var(--eds-sp-l);\n        }\n        .eds-language-dialog__grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: var(--eds-sp-s);\n        }\n        .eds-language-dialog__item {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n        }\n        .eds-language-dialog__code {\n            font-weight: 600;\n            min-width: 2rem;\n        }\n    `],\n    imports: [UpperCasePipe, ...EDS_BUTTON],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EdsLanguageSelectorDialog {\n    config = inject<EdsLanguageSelectorDialogConfig>(EDS_DIALOG_COMPONENT_CONFIG, { optional: true });\n\n    /** EU languages filtered from the provided list. */\n    euLanguages = computed(() =>\n        (this.config?.languages ?? []).filter(lang => EU_LANGUAGE_CODES.has(lang.code)),\n    );\n\n    /** Non-EU (additional) languages filtered from the provided list. */\n    nonEuLanguages = computed(() =>\n        (this.config?.languages ?? []).filter(lang => !EU_LANGUAGE_CODES.has(lang.code)),\n    );\n\n    private dialogService = inject(EdsDialogService);\n\n    selectLanguage(lang: EdsLanguage): void {\n        this.config?.onLanguageChange(lang.code);\n        this.dialogService.closeDialog();\n    }\n}\n",
+            "sourceCode": "import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';\nimport { UpperCasePipe } from '@angular/common';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_DIALOG_COMPONENT_CONFIG } from '@eui/eds/eds-dialog';\nimport { EdsDialogService } from '@eui/eds/eds-dialog';\nimport { EdsLanguage } from './eds-language-selector';\n\n/** Official EU language codes. */\nconst EU_LANGUAGE_CODES = new Set([\n    'bg', 'cs', 'da', 'de', 'et', 'el', 'en', 'es', 'fr', 'ga',\n    'hr', 'it', 'lv', 'lt', 'hu', 'mt', 'nl', 'pl', 'pt', 'ro',\n    'sk', 'sl', 'fi', 'sv',\n]);\n\nexport interface EdsLanguageSelectorDialogConfig {\n    /** All available languages. */\n    languages: EdsLanguage[];\n    /** Currently selected language code. */\n    selectedLanguage: string;\n    /** Callback when a language is selected. */\n    onLanguageChange: (code: string) => void;\n}\n\n/**\n * Dialog content component for the language selector.\n * Displays EU and non-EU languages in separate grid sections.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'eds-language-selector-dialog',\n    template: `\n        <div class=\"eds-language-dialog\">\n            @if (nonEuLanguages().length > 0) {\n                <h4 class=\"eds-language-dialog__section-title\">EU Languages</h4>\n            }\n            <div class=\"eds-language-dialog__grid\">\n                @for (lang of euLanguages(); track lang.code) {\n                    <div class=\"eds-language-dialog__item\">\n                        <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n                        <button\n                            edsButton\n                            [edsPrimary]=\"lang.code === config?.selectedLanguage\"\n                            [edsNeutral]=\"lang.code !== config?.selectedLanguage\"\n                            (click)=\"selectLanguage(lang)\">\n                            <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n                        </button>\n                    </div>\n                }\n            </div>\n\n            @if (nonEuLanguages().length > 0) {\n                <h4 class=\"eds-language-dialog__section-title eds-language-dialog__section-title--additional\">Non-EU Languages</h4>\n                <div class=\"eds-language-dialog__grid\">\n                    @for (lang of nonEuLanguages(); track lang.code) {\n                        <div class=\"eds-language-dialog__item\">\n                            <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n                            <button\n                                edsButton\n                                [edsPrimary]=\"lang.code === config?.selectedLanguage\"\n                                [edsNeutral]=\"lang.code !== config?.selectedLanguage\"\n                                (click)=\"selectLanguage(lang)\">\n                                <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n                            </button>\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n    `,\n    styles: [`\n        .eds-language-dialog {\n            padding: var(--eds-sp-m);\n        }\n        .eds-language-dialog__section-title {\n            font: var(--eds-f-label-m-semibold);\n            margin-bottom: var(--eds-sp-s);\n        }\n        .eds-language-dialog__section-title--additional {\n            margin-top: var(--eds-sp-l);\n        }\n        .eds-language-dialog__grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: var(--eds-sp-s);\n        }\n        .eds-language-dialog__item {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n        }\n        .eds-language-dialog__code {\n            font-weight: 600;\n            min-width: 2rem;\n        }\n    `],\n    imports: [UpperCasePipe, ...EDS_BUTTON],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EdsLanguageSelectorDialog {\n    config = inject<EdsLanguageSelectorDialogConfig>(EDS_DIALOG_COMPONENT_CONFIG, { optional: true });\n\n    /** EU languages filtered from the provided list. */\n    euLanguages = computed(() =>\n        (this.config?.languages ?? []).filter(lang => EU_LANGUAGE_CODES.has(lang.code)),\n    );\n\n    /** Non-EU (additional) languages filtered from the provided list. */\n    nonEuLanguages = computed(() =>\n        (this.config?.languages ?? []).filter(lang => !EU_LANGUAGE_CODES.has(lang.code)),\n    );\n\n    private dialogService = inject(EdsDialogService);\n\n    selectLanguage(lang: EdsLanguage): void {\n        this.config?.onLanguageChange(lang.code);\n        this.dialogService.closeDialog();\n    }\n}\n",
             "displayName": "EdsLanguageSelectorDialogConfig",
             "properties": [
                 {
@@ -16152,7 +16152,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n    overflow: clip;\n\n    [role=\"heading\"] {\n        margin: 0;\n        padding: 0;\n        font: inherit;\n    }\n\n    .eds-accordion-item__header {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        padding: var(--eds-sp-m) var(--eds-sp-l);\n        outline: none;\n        background-color: transparent;\n        border: var(--eds-bw-none);\n        text-align: start;\n        cursor: pointer;\n        font: var(--eds-f-label-m-semi-bold);\n        color: var(--eds-c-foreground);\n\n        &:focus-visible {\n            outline: var(--eds-bw-xs) solid var(--eds-c-border-focus);\n            outline-offset: calc(-1 * var(--eds-sp-4xs));\n            border-radius: var(--eds-br-xs);\n        }\n\n        &:hover:not(:disabled) {\n            background-color: var(--eds-c-surface-elevation-sunken);\n        }\n\n        &-icon {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            margin-left: auto;\n            padding-left: var(--eds-sp-m);\n\n            > * {\n                display: inline-flex;\n                transition: transform 200ms ease;\n            }\n\n            &--rotated > * {\n                transform: rotate(180deg);\n            }\n        }\n    }\n\n    .eds-accordion-item__body {\n        display: grid;\n        grid-template-rows: 1fr;\n        transition: grid-template-rows 200ms ease;\n        overflow: hidden;\n\n        &-inner {\n            min-height: 0;\n            overflow: hidden;\n            padding: var(--eds-sp-xs) var(--eds-sp-l) var(--eds-sp-l) var(--eds-sp-l);\n            font: var(--eds-f-paragraph-m);\n        }\n\n        &--collapsed {\n            grid-template-rows: 0fr;\n\n            .eds-accordion-item__body-inner {\n                padding-top: 0;\n                padding-bottom: 0;\n            }\n        }\n    }\n}\n\n// SIZE VARIANTS\n// -------------\n\n:host([size=\"s\"]) {\n    .eds-accordion-item__header {\n        padding-top: var(--eds-sp-xs);\n        padding-bottom: var(--eds-sp-xs);\n        font: var(--eds-f-label-s-semi-bold);\n    }\n\n    .eds-accordion-item__body-inner {\n        padding-bottom: var(--eds-sp-s);\n        font: var(--eds-f-paragraph-s);\n    }\n}\n\n:host([size=\"l\"]) {\n    .eds-accordion-item__header {\n        padding-top: var(--eds-sp-l);\n        padding-bottom: var(--eds-sp-l);\n        font: var(--eds-f-label-l-semi-bold);\n    }\n}\n\n// DISABLED\n// --------\n\n:host([disabled]) {\n    pointer-events: none;\n    opacity: var(--eds-op-40);\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n    overflow: clip;\n\n    [role=\"heading\"] {\n        margin: 0;\n        padding: 0;\n        font: inherit;\n    }\n\n    .eds-accordion-item__header {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        padding: var(--eds-sp-m) var(--eds-sp-l);\n        outline: none;\n        background-color: transparent;\n        border: var(--eds-bw-none);\n        text-align: start;\n        cursor: pointer;\n        font: var(--eds-f-label-m-semibold);\n        color: var(--eds-c-foreground);\n\n        &:focus-visible {\n            outline: var(--eds-bw-xs) solid var(--eds-c-border-focus);\n            outline-offset: calc(-1 * var(--eds-sp-4xs));\n            border-radius: var(--eds-br-xs);\n        }\n\n        &:hover:not(:disabled) {\n            background-color: var(--eds-c-surface-elevation-sunken);\n        }\n\n        &-icon {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            margin-left: auto;\n            padding-left: var(--eds-sp-m);\n\n            > * {\n                display: inline-flex;\n                transition: transform 200ms ease;\n            }\n\n            &--rotated > * {\n                transform: rotate(180deg);\n            }\n        }\n    }\n\n    .eds-accordion-item__body {\n        display: grid;\n        grid-template-rows: 1fr;\n        transition: grid-template-rows 200ms ease;\n        overflow: hidden;\n\n        &-inner {\n            min-height: 0;\n            overflow: hidden;\n            padding: var(--eds-sp-xs) var(--eds-sp-l) var(--eds-sp-l) var(--eds-sp-l);\n            font: var(--eds-f-paragraph-m);\n        }\n\n        &--collapsed {\n            grid-template-rows: 0fr;\n\n            .eds-accordion-item__body-inner {\n                padding-top: 0;\n                padding-bottom: 0;\n            }\n        }\n    }\n}\n\n// SIZE VARIANTS\n// -------------\n\n:host([size=\"s\"]) {\n    .eds-accordion-item__header {\n        padding-top: var(--eds-sp-xs);\n        padding-bottom: var(--eds-sp-xs);\n        font: var(--eds-f-label-s-semibold);\n    }\n\n    .eds-accordion-item__body-inner {\n        padding-bottom: var(--eds-sp-s);\n        font: var(--eds-f-paragraph-s);\n    }\n}\n\n:host([size=\"l\"]) {\n    .eds-accordion-item__header {\n        padding-top: var(--eds-sp-l);\n        padding-bottom: var(--eds-sp-l);\n        font: var(--eds-f-label-l-semibold);\n    }\n}\n\n// DISABLED\n// --------\n\n:host([disabled]) {\n    pointer-events: none;\n    opacity: var(--eds-op-40);\n}\n",
                     "styleUrl": "./eds-accordion-item.scss"
                 }
             ],
@@ -16532,7 +16532,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": ":host {\n    font: var(--eds-f-paragraph-m-semi-bold);\n}\n",
+                    "data": ":host {\n    font: var(--eds-f-paragraph-m-semibold);\n}\n",
                     "styleUrl": "./eds-alert-title.scss"
                 }
             ],
@@ -18720,7 +18720,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        width: 100%;\n\n        .eds-autocomplete__panel {\n            box-shadow: var(--eds-sh-3);\n            background-color: var(--eds-c-surface-elevation);\n            border-radius: var(--eds-br-s);\n            width: 100%;\n            overflow: hidden;\n        }\n\n        .eds-autocomplete-option-group {\n            .eds-autocomplete-option-group__label {\n                align-items: center;\n                cursor: default;\n                display: flex;\n                font: var(--eds-f-label-m-semi-bold);\n                min-height: 40px;\n                padding-inline: var(--eds-sp-s);\n                gap: var(--eds-sp-xs);\n            }\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        width: 100%;\n\n        .eds-autocomplete__panel {\n            box-shadow: var(--eds-sh-3);\n            background-color: var(--eds-c-surface-elevation);\n            border-radius: var(--eds-br-s);\n            width: 100%;\n            overflow: hidden;\n        }\n\n        .eds-autocomplete-option-group {\n            .eds-autocomplete-option-group__label {\n                align-items: center;\n                cursor: default;\n                display: flex;\n                font: var(--eds-f-label-m-semibold);\n                min-height: 40px;\n                padding-inline: var(--eds-sp-s);\n                gap: var(--eds-sp-xs);\n            }\n        }\n    }\n}\n",
                     "styleUrl": "./eds-autocomplete-panel.scss"
                 }
             ],
@@ -19165,7 +19165,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": ".eds-avatar {\n    :host {\n        font: var(--eds-f-paragraph-s-semi-bold);\n    }\n}\n",
+                    "data": ".eds-avatar {\n    :host {\n        font: var(--eds-f-paragraph-s-semibold);\n    }\n}\n",
                     "styleUrl": "./eds-avatar-content-label.scss"
                 }
             ],
@@ -21456,7 +21456,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        align-items: flex-start;\n        gap: var(--eds-sp-m);\n        padding: var(--eds-sp-m) var(--eds-sp-l);\n        border-left: var(--eds-bw-m) solid var(--eds-c-border-primary);\n        border-radius: var(--eds-br-xs);\n        background-color: var(--eds-c-surface-elevation);\n\n        .eds-blockquote__image {\n            display: block;\n            width: 120px;\n            height: 120px;\n            aspect-ratio: 1 / 1;\n            object-fit: cover;\n            flex-shrink: 0;\n        }\n\n        .eds-blockquote__body {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n        }\n\n        .eds-blockquote__quote {\n            margin: 0;\n            padding: 0;\n        }\n\n        .eds-blockquote__citation {\n            font: var(--eds-f-paragraph-l);\n            font-style: italic;\n            color: var(--eds-c-foreground-default);\n            margin: 0;\n        }\n\n        .eds-blockquote__attribution {\n            margin-top: var(--eds-sp-s);\n        }\n\n        .eds-blockquote__author {\n            font: var(--eds-f-label-m-semi-bold);\n            font-style: normal;\n            color: var(--eds-c-foreground-subtler);\n        }\n    }\n\n    @include base.media(base.$eds-bkp-mobile) {\n        :host {\n            padding: var(--eds-sp-s) var(--eds-sp-m);\n            gap: var(--eds-sp-s);\n\n            .eds-blockquote__citation {\n                font: var(--eds-f-paragraph-m);\n                font-style: italic;\n            }\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        align-items: flex-start;\n        gap: var(--eds-sp-m);\n        padding: var(--eds-sp-m) var(--eds-sp-l);\n        border-left: var(--eds-bw-m) solid var(--eds-c-border-primary);\n        border-radius: var(--eds-br-xs);\n        background-color: var(--eds-c-surface-elevation);\n\n        .eds-blockquote__image {\n            display: block;\n            width: 120px;\n            height: 120px;\n            aspect-ratio: 1 / 1;\n            object-fit: cover;\n            flex-shrink: 0;\n        }\n\n        .eds-blockquote__body {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n        }\n\n        .eds-blockquote__quote {\n            margin: 0;\n            padding: 0;\n        }\n\n        .eds-blockquote__citation {\n            font: var(--eds-f-paragraph-l);\n            font-style: italic;\n            color: var(--eds-c-foreground-default);\n            margin: 0;\n        }\n\n        .eds-blockquote__attribution {\n            margin-top: var(--eds-sp-s);\n        }\n\n        .eds-blockquote__author {\n            font: var(--eds-f-label-m-semibold);\n            font-style: normal;\n            color: var(--eds-c-foreground-subtler);\n        }\n    }\n\n    @include base.media(base.$eds-bkp-mobile) {\n        :host {\n            padding: var(--eds-sp-s) var(--eds-sp-m);\n            gap: var(--eds-sp-s);\n\n            .eds-blockquote__citation {\n                font: var(--eds-f-paragraph-m);\n                font-style: italic;\n            }\n        }\n    }\n}\n",
                     "styleUrl": "./eds-blockquote.scss"
                 }
             ],
@@ -24169,7 +24169,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n\n        .eds-calendar-header__nav {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            gap: var(--eds-sp-s);\n        }\n\n        .eds-calendar-header__left {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-s);\n        }\n\n        .eds-calendar-header__label {\n            display: flex;\n            flex-direction: column;\n            align-items: flex-start;\n        }\n\n        .eds-calendar-header__date {\n            font: var(--eds-f-label-l-semi-bold);\n        }\n\n        .eds-calendar-header__sublabel {\n            font: var(--eds-f-paragraph-xs);\n            color: var(--eds-c-foreground-subtler);\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n\n        .eds-calendar-header__nav {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            gap: var(--eds-sp-s);\n        }\n\n        .eds-calendar-header__left {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-s);\n        }\n\n        .eds-calendar-header__label {\n            display: flex;\n            flex-direction: column;\n            align-items: flex-start;\n        }\n\n        .eds-calendar-header__date {\n            font: var(--eds-f-label-l-semibold);\n        }\n\n        .eds-calendar-header__sublabel {\n            font: var(--eds-f-paragraph-xs);\n            color: var(--eds-c-foreground-subtler);\n        }\n    }\n}\n",
                     "styleUrl": "./eds-calendar-header.scss"
                 }
             ],
@@ -24696,7 +24696,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n\n        table {\n            width: 100%;\n            table-layout: fixed;\n            border-collapse: collapse;\n            border-radius: var(--eds-br-s);\n            overflow: hidden;\n\n            &.eds-calendar-monthly--compact {\n                width: auto;\n                table-layout: auto;\n\n                .eds-calendar-monthly--day {\n                    height: 4rem;\n                }\n            }\n        }\n\n        .eds-calendar-monthly--day-header {\n            padding: var(--eds-sp-xs);\n            text-align: left;\n            font: var(--eds-f-label-s-semi-bold);\n        }\n\n        .eds-calendar-monthly--day {\n            overflow: hidden;\n            text-overflow: ellipsis;\n            border: 1px solid var(--eds-c-border-divider);\n            padding: var(--eds-sp-xs);\n            vertical-align: top;\n            height: 8rem;\n\n            &:hover {\n                background-color: var(--eds-c-surface-hover);\n            }\n\n            &.weekend {\n                background-color: var(--eds-c-surface-default);\n            }\n\n            &.disabled {\n                opacity: 0.5;\n            }\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n\n        table {\n            width: 100%;\n            table-layout: fixed;\n            border-collapse: collapse;\n            border-radius: var(--eds-br-s);\n            overflow: hidden;\n\n            &.eds-calendar-monthly--compact {\n                width: auto;\n                table-layout: auto;\n\n                .eds-calendar-monthly--day {\n                    height: 4rem;\n                }\n            }\n        }\n\n        .eds-calendar-monthly--day-header {\n            padding: var(--eds-sp-xs);\n            text-align: left;\n            font: var(--eds-f-label-s-semibold);\n        }\n\n        .eds-calendar-monthly--day {\n            overflow: hidden;\n            text-overflow: ellipsis;\n            border: 1px solid var(--eds-c-border-divider);\n            padding: var(--eds-sp-xs);\n            vertical-align: top;\n            height: 8rem;\n\n            &:hover {\n                background-color: var(--eds-c-surface-hover);\n            }\n\n            &.weekend {\n                background-color: var(--eds-c-surface-default);\n            }\n\n            &.disabled {\n                opacity: 0.5;\n            }\n        }\n    }\n}\n",
                     "styleUrl": "./eds-calendar-monthly.scss"
                 }
             ],
@@ -26211,7 +26211,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        font: var(--eds-f-label-l-semi-bold);\n        color: var(--eds-c-foreground);\n    }\n\n    :host.eds-card-label--clamped {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        font: var(--eds-f-label-l-semibold);\n        color: var(--eds-c-foreground);\n    }\n\n    :host.eds-card-label--clamped {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n    }\n}\n",
                     "styleUrl": "./eds-card-label.scss"
                 }
             ],
@@ -28142,7 +28142,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../../base' as base;\n\n.eui-21 {\n    :host {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--eds-sp-3xs);\n        font: var(--eds-f-paragraph-xs);\n        color: var(--eds-c-foreground-subtler);\n\n        .eds-chart-legend-item__dot {\n            display: inline-block;\n            width: 0.5rem;\n            height: 0.5rem;\n            border-radius: var(--eds-br-full);\n            flex-shrink: 0;\n        }\n\n        .eds-chart-legend-item__label {\n            white-space: nowrap;\n        }\n\n        .eds-chart-legend-item__value {\n            font: var(--eds-f-label-s-semi-bold);\n            color: var(--eds-c-foreground-default);\n        }\n    }\n}\n",
+                    "data": "@use '../../base' as base;\n\n.eui-21 {\n    :host {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--eds-sp-3xs);\n        font: var(--eds-f-paragraph-xs);\n        color: var(--eds-c-foreground-subtler);\n\n        .eds-chart-legend-item__dot {\n            display: inline-block;\n            width: 0.5rem;\n            height: 0.5rem;\n            border-radius: var(--eds-br-full);\n            flex-shrink: 0;\n        }\n\n        .eds-chart-legend-item__label {\n            white-space: nowrap;\n        }\n\n        .eds-chart-legend-item__value {\n            font: var(--eds-f-label-s-semibold);\n            color: var(--eds-c-foreground-default);\n        }\n    }\n}\n",
                     "styleUrl": "./eds-chart-legend-item.scss"
                 }
             ],
@@ -29154,7 +29154,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        --_day-font: var(--eds-f-label-l-semi-bold);\n        --_month-font: var(--eds-f-paragraph-s);\n        --_year-font: var(--eds-f-label-s-semi-bold);\n        --_top-bg: var(--eds-c-surface-primary-subtler);\n        --_bottom-bg: var(--eds-c-surface-primary);\n        --_bottom-color: var(--eds-c-on-surface-primary);\n\n        display: inline-flex;\n        position: relative;\n\n        .wrapper::before,\n        .wrapper::after {\n            background-color: var(--eds-c-surface-default);\n            border-radius: 50%;\n            content: \"\";\n            display: block;\n            height: 10px;\n            width: 10px;\n            position: absolute;\n            top: -5px;\n        }\n\n        .wrapper::before {\n            left: var(--eds-sp-m);\n        }\n\n        .wrapper::after {\n            right: var(--eds-sp-m);\n        }\n\n        .wrapper,\n        .day-month {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .day-month {\n            background-color: var(--_top-bg);\n            padding: var(--eds-sp-xs) var(--eds-sp-l) var(--eds-sp-4xs) var(--eds-sp-l);\n            border-top-left-radius: var(--eds-br-s);\n            border-top-right-radius: var(--eds-br-s);\n            min-width: 72px;\n        }\n\n        .day {\n            font: var(--_day-font);\n        }\n\n        .month {\n            font: var(--_month-font);\n            text-transform: uppercase;\n        }\n\n        .year {\n            background-color: var(--_bottom-bg);\n            color: var(--_bottom-color);\n            font: var(--_year-font);\n            padding: var(--eds-sp-4xs) var(--eds-sp-l);\n            border-bottom-left-radius: var(--eds-br-s);\n            border-bottom-right-radius: var(--eds-br-s);\n            text-align: center;\n        }\n    }\n\n    :host.eds-date-block--neutral {\n        --_top-bg: var(--eds-c-surface-neutral-subtler);\n        --_bottom-bg: var(--eds-c-surface-neutral);\n        --_bottom-color: var(--eds-c-on-surface-neutral);\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        --_day-font: var(--eds-f-label-l-semibold);\n        --_month-font: var(--eds-f-paragraph-s);\n        --_year-font: var(--eds-f-label-s-semibold);\n        --_top-bg: var(--eds-c-surface-primary-subtler);\n        --_bottom-bg: var(--eds-c-surface-primary);\n        --_bottom-color: var(--eds-c-on-surface-primary);\n\n        display: inline-flex;\n        position: relative;\n\n        .wrapper::before,\n        .wrapper::after {\n            background-color: var(--eds-c-surface-default);\n            border-radius: 50%;\n            content: \"\";\n            display: block;\n            height: 10px;\n            width: 10px;\n            position: absolute;\n            top: -5px;\n        }\n\n        .wrapper::before {\n            left: var(--eds-sp-m);\n        }\n\n        .wrapper::after {\n            right: var(--eds-sp-m);\n        }\n\n        .wrapper,\n        .day-month {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .day-month {\n            background-color: var(--_top-bg);\n            padding: var(--eds-sp-xs) var(--eds-sp-l) var(--eds-sp-4xs) var(--eds-sp-l);\n            border-top-left-radius: var(--eds-br-s);\n            border-top-right-radius: var(--eds-br-s);\n            min-width: 72px;\n        }\n\n        .day {\n            font: var(--_day-font);\n        }\n\n        .month {\n            font: var(--_month-font);\n            text-transform: uppercase;\n        }\n\n        .year {\n            background-color: var(--_bottom-bg);\n            color: var(--_bottom-color);\n            font: var(--_year-font);\n            padding: var(--eds-sp-4xs) var(--eds-sp-l);\n            border-bottom-left-radius: var(--eds-br-s);\n            border-bottom-right-radius: var(--eds-br-s);\n            text-align: center;\n        }\n    }\n\n    :host.eds-date-block--neutral {\n        --_top-bg: var(--eds-c-surface-neutral-subtler);\n        --_bottom-bg: var(--eds-c-surface-neutral);\n        --_bottom-color: var(--eds-c-on-surface-neutral);\n    }\n}\n",
                     "styleUrl": "./eds-date-block.scss"
                 }
             ],
@@ -30023,7 +30023,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: inline-block;\n        position: relative;\n        width: 100%;\n\n        .eds-datepicker__group {\n            margin-bottom: 0;\n        }\n\n        .eds-datepicker__dropdown {\n            position: absolute;\n            top: 100%;\n            left: 0;\n            z-index: 1000;\n            margin-top: var(--eds-sp-3xs);\n            background-color: var(--eds-c-surface-elevation);\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-2);\n            padding: var(--eds-sp-s);\n            width: 280px;\n\n            &--up {\n                top: auto;\n                bottom: 100%;\n                margin-top: 0;\n                margin-bottom: var(--eds-sp-3xs);\n            }\n        }\n\n        .eds-datepicker__header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: var(--eds-sp-xs);\n        }\n\n        .eds-datepicker__month-label {\n            font: var(--eds-f-label-m-semi-bold);\n            color: var(--eds-c-foreground-default);\n        }\n\n        .eds-datepicker__nav-btn {\n            background: none;\n            border: none;\n            cursor: pointer;\n            font-size: 18px;\n            padding: var(--eds-sp-3xs) var(--eds-sp-xs);\n            border-radius: var(--eds-br-xs);\n            color: var(--eds-c-foreground-subtle);\n\n            &:hover {\n                background-color: var(--eds-c-surface-neutral-subtler);\n                color: var(--eds-c-foreground-default);\n            }\n\n            &:focus-visible {\n                outline: 2px solid var(--eds-c-focus-default, #0e47cb);\n                outline-offset: 1px;\n            }\n        }\n\n        .eds-datepicker__weekdays {\n            display: grid;\n            grid-template-columns: repeat(7, 1fr);\n            text-align: center;\n            margin-bottom: var(--eds-sp-3xs);\n        }\n\n        .eds-datepicker__weekday {\n            font: var(--eds-f-paragraph-s);\n            color: var(--eds-c-foreground-subtler);\n            padding: var(--eds-sp-3xs) 0;\n        }\n\n        .eds-datepicker__days {\n            display: grid;\n            grid-template-columns: repeat(7, 1fr);\n            gap: 2px;\n        }\n\n        .eds-datepicker__day {\n            background: none;\n            border: none;\n            cursor: pointer;\n            font: var(--eds-f-paragraph-s);\n            padding: var(--eds-sp-3xs);\n            border-radius: var(--eds-br-xs);\n            text-align: center;\n            min-height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            &:hover:not(:disabled) {\n                background-color: var(--eds-c-surface-neutral-subtler);\n            }\n\n            &--today {\n                font-weight: 700;\n                border: var(--eds-bw-xs) solid var(--eds-c-border-primary);\n            }\n\n            &--selected {\n                background-color: var(--eds-c-surface-primary) !important;\n                color: var(--eds-c-on-surface-primary);\n                font-weight: 600;\n            }\n\n            &--outside {\n                color: var(--eds-c-foreground-subtler);\n                opacity: 0.4;\n                cursor: default;\n            }\n\n            &--empty {\n                cursor: default;\n            }\n\n            &:focus-visible {\n                outline: 2px solid var(--eds-c-focus-default, #0e47cb);\n                outline-offset: 1px;\n            }\n        }\n\n        .eds-datepicker__time {\n            margin-top: var(--eds-sp-s);\n            padding-top: var(--eds-sp-s);\n            border-top: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n            display: flex;\n            justify-content: center;\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: inline-block;\n        position: relative;\n        width: 100%;\n\n        .eds-datepicker__group {\n            margin-bottom: 0;\n        }\n\n        .eds-datepicker__dropdown {\n            position: absolute;\n            top: 100%;\n            left: 0;\n            z-index: 1000;\n            margin-top: var(--eds-sp-3xs);\n            background-color: var(--eds-c-surface-elevation);\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-2);\n            padding: var(--eds-sp-s);\n            width: 280px;\n\n            &--up {\n                top: auto;\n                bottom: 100%;\n                margin-top: 0;\n                margin-bottom: var(--eds-sp-3xs);\n            }\n        }\n\n        .eds-datepicker__header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: var(--eds-sp-xs);\n        }\n\n        .eds-datepicker__month-label {\n            font: var(--eds-f-label-m-semibold);\n            color: var(--eds-c-foreground-default);\n        }\n\n        .eds-datepicker__nav-btn {\n            background: none;\n            border: none;\n            cursor: pointer;\n            font-size: 18px;\n            padding: var(--eds-sp-3xs) var(--eds-sp-xs);\n            border-radius: var(--eds-br-xs);\n            color: var(--eds-c-foreground-subtle);\n\n            &:hover {\n                background-color: var(--eds-c-surface-neutral-subtler);\n                color: var(--eds-c-foreground-default);\n            }\n\n            &:focus-visible {\n                outline: 2px solid var(--eds-c-focus-default, #0e47cb);\n                outline-offset: 1px;\n            }\n        }\n\n        .eds-datepicker__weekdays {\n            display: grid;\n            grid-template-columns: repeat(7, 1fr);\n            text-align: center;\n            margin-bottom: var(--eds-sp-3xs);\n        }\n\n        .eds-datepicker__weekday {\n            font: var(--eds-f-paragraph-s);\n            color: var(--eds-c-foreground-subtler);\n            padding: var(--eds-sp-3xs) 0;\n        }\n\n        .eds-datepicker__days {\n            display: grid;\n            grid-template-columns: repeat(7, 1fr);\n            gap: 2px;\n        }\n\n        .eds-datepicker__day {\n            background: none;\n            border: none;\n            cursor: pointer;\n            font: var(--eds-f-paragraph-s);\n            padding: var(--eds-sp-3xs);\n            border-radius: var(--eds-br-xs);\n            text-align: center;\n            min-height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            &:hover:not(:disabled) {\n                background-color: var(--eds-c-surface-neutral-subtler);\n            }\n\n            &--today {\n                font-weight: 700;\n                border: var(--eds-bw-xs) solid var(--eds-c-border-primary);\n            }\n\n            &--selected {\n                background-color: var(--eds-c-surface-primary) !important;\n                color: var(--eds-c-on-surface-primary);\n                font-weight: 600;\n            }\n\n            &--outside {\n                color: var(--eds-c-foreground-subtler);\n                opacity: 0.4;\n                cursor: default;\n            }\n\n            &--empty {\n                cursor: default;\n            }\n\n            &:focus-visible {\n                outline: 2px solid var(--eds-c-focus-default, #0e47cb);\n                outline-offset: 1px;\n            }\n        }\n\n        .eds-datepicker__time {\n            margin-top: var(--eds-sp-s);\n            padding-top: var(--eds-sp-s);\n            border-top: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n            display: flex;\n            justify-content: center;\n        }\n    }\n}\n",
                     "styleUrl": "./eds-datepicker.scss"
                 }
             ],
@@ -32514,7 +32514,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        margin: 0;\n        padding: 0;\n        position: relative;\n\n        .eds-discussion-thread__header {\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            width: 100%;\n        }\n\n        .eds-discussion-thread__header-title {\n            border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n            display: flex;\n            margin-bottom: var(--eds-sp-xs);\n            padding-bottom: var(--eds-sp-2xs);\n            width: 100%;\n            font: var(--eds-f-label-m-semi-bold);\n        }\n\n        .eds-discussion-thread__header-subtitle {\n            color: var(--eds-c-foreground-subtler);\n            display: flex;\n            width: 100%;\n            font: var(--eds-f-paragraph-m);\n        }\n\n        .eds-discussion-thread__content {\n            list-style: none;\n            padding: var(--eds-sp-m) 0;\n            position: relative;\n\n            &::before {\n                background-color: var(--eds-c-border-divider);\n                bottom: 0;\n                content: \" \";\n                left: 50%;\n                margin-left: -1px;\n                position: absolute;\n                top: 0;\n                width: var(--eds-bw-s);\n            }\n        }\n    }\n\n    @include base.media(base.$eds-bkp-tablet) {\n        :host {\n            .eds-discussion-thread__content::before {\n                left: 40px;\n                margin-left: 0;\n            }\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        margin: 0;\n        padding: 0;\n        position: relative;\n\n        .eds-discussion-thread__header {\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            width: 100%;\n        }\n\n        .eds-discussion-thread__header-title {\n            border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n            display: flex;\n            margin-bottom: var(--eds-sp-xs);\n            padding-bottom: var(--eds-sp-2xs);\n            width: 100%;\n            font: var(--eds-f-label-m-semibold);\n        }\n\n        .eds-discussion-thread__header-subtitle {\n            color: var(--eds-c-foreground-subtler);\n            display: flex;\n            width: 100%;\n            font: var(--eds-f-paragraph-m);\n        }\n\n        .eds-discussion-thread__content {\n            list-style: none;\n            padding: var(--eds-sp-m) 0;\n            position: relative;\n\n            &::before {\n                background-color: var(--eds-c-border-divider);\n                bottom: 0;\n                content: \" \";\n                left: 50%;\n                margin-left: -1px;\n                position: absolute;\n                top: 0;\n                width: var(--eds-bw-s);\n            }\n        }\n    }\n\n    @include base.media(base.$eds-bkp-tablet) {\n        :host {\n            .eds-discussion-thread__content::before {\n                left: 40px;\n                margin-left: 0;\n            }\n        }\n    }\n}\n",
                     "styleUrl": "./eds-discussion-thread.scss"
                 }
             ],
@@ -32787,7 +32787,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        margin-bottom: var(--eds-sp-m);\n        position: relative;\n\n        &::before,\n        &::after {\n            content: \" \";\n            display: table;\n        }\n\n        &::after {\n            clear: both;\n        }\n\n        .eds-discussion-thread-item__panel {\n            background-color: var(--eds-c-surface-elevation);\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-1);\n            float: left;\n            padding: var(--eds-sp-m) var(--eds-sp-m) 0;\n            position: relative;\n            width: 48%;\n\n            &::before {\n                border-bottom: 15px solid transparent;\n                border-left: 15px solid var(--eds-c-border-divider);\n                border-right: 0 solid var(--eds-c-border-divider);\n                border-top: 15px solid transparent;\n                content: \" \";\n                display: inline-block;\n                position: absolute;\n                right: -15px;\n                top: 26px;\n            }\n\n            &::after {\n                border-bottom: 14px solid transparent;\n                border-left: 14px solid var(--eds-c-surface-elevation);\n                border-right: 0 solid var(--eds-c-surface-elevation);\n                border-top: 14px solid transparent;\n                content: \" \";\n                display: inline-block;\n                position: absolute;\n                right: -14px;\n                top: 27px;\n            }\n        }\n\n        .eds-discussion-thread-item__badge {\n            background-color: var(--eds-c-surface-elevation);\n            position: absolute;\n            left: 50%;\n            width: 50px;\n            margin-left: -20px;\n            top: 22px;\n        }\n\n        .eds-discussion-thread-item__panel-header {\n            border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n            margin-bottom: var(--eds-sp-s);\n            padding-bottom: var(--eds-sp-s);\n        }\n\n        .eds-discussion-thread-item__panel-heading {\n            align-items: center;\n            display: flex;\n            justify-content: space-between;\n        }\n\n        .eds-discussion-thread-item__panel-title {\n            align-items: center;\n            display: flex;\n            font: var(--eds-f-label-m-semi-bold);\n        }\n\n        .eds-discussion-thread-item__panel-time {\n            align-items: center;\n            display: flex;\n            margin-left: auto;\n            font: var(--eds-f-paragraph-s);\n            color: var(--eds-c-foreground-subtler);\n            gap: var(--eds-sp-2xs);\n        }\n\n        .eds-discussion-thread-item__panel-time-text {\n            font: var(--eds-f-paragraph-s);\n        }\n\n        .eds-discussion-thread-item__panel-author {\n            margin-top: var(--eds-sp-xs);\n            font: var(--eds-f-paragraph-s);\n            color: var(--eds-c-foreground-subtler);\n        }\n\n        .eds-discussion-thread-item__panel-body {\n            margin: var(--eds-sp-m) 0;\n        }\n\n        .eds-discussion-thread-item__panel-body-text {\n            word-break: break-word;\n            margin: 0;\n            font: var(--eds-f-paragraph-m);\n        }\n    }\n\n    // Inverted (odd) items — panel floats right with arrow pointing left\n    :host.eds-discussion-thread-item--inverted {\n        .eds-discussion-thread-item__panel {\n            float: right;\n\n            &::before {\n                border-left-width: 0;\n                border-right-width: 15px;\n                left: -15px;\n                right: auto;\n            }\n\n            &::after {\n                border-left-width: 0;\n                border-right-width: 14px;\n                left: -14px;\n                right: auto;\n            }\n        }\n    }\n\n    // Responsive: tablet — single column, items on right\n    @include base.media(base.$eds-bkp-tablet) {\n        :host {\n            .eds-discussion-thread-item__panel {\n                float: right;\n                width: calc(100% - 90px);\n\n                &::before {\n                    border-left-width: 0;\n                    border-right-width: 15px;\n                    left: -15px;\n                    right: auto;\n                }\n\n                &::after {\n                    border-left-width: 0;\n                    border-right-width: 14px;\n                    left: -14px;\n                    right: auto;\n                }\n            }\n\n            .eds-discussion-thread-item__badge {\n                left: 15px;\n                margin-left: 0;\n                top: 16px;\n            }\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        margin-bottom: var(--eds-sp-m);\n        position: relative;\n\n        &::before,\n        &::after {\n            content: \" \";\n            display: table;\n        }\n\n        &::after {\n            clear: both;\n        }\n\n        .eds-discussion-thread-item__panel {\n            background-color: var(--eds-c-surface-elevation);\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-1);\n            float: left;\n            padding: var(--eds-sp-m) var(--eds-sp-m) 0;\n            position: relative;\n            width: 48%;\n\n            &::before {\n                border-bottom: 15px solid transparent;\n                border-left: 15px solid var(--eds-c-border-divider);\n                border-right: 0 solid var(--eds-c-border-divider);\n                border-top: 15px solid transparent;\n                content: \" \";\n                display: inline-block;\n                position: absolute;\n                right: -15px;\n                top: 26px;\n            }\n\n            &::after {\n                border-bottom: 14px solid transparent;\n                border-left: 14px solid var(--eds-c-surface-elevation);\n                border-right: 0 solid var(--eds-c-surface-elevation);\n                border-top: 14px solid transparent;\n                content: \" \";\n                display: inline-block;\n                position: absolute;\n                right: -14px;\n                top: 27px;\n            }\n        }\n\n        .eds-discussion-thread-item__badge {\n            background-color: var(--eds-c-surface-elevation);\n            position: absolute;\n            left: 50%;\n            width: 50px;\n            margin-left: -20px;\n            top: 22px;\n        }\n\n        .eds-discussion-thread-item__panel-header {\n            border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n            margin-bottom: var(--eds-sp-s);\n            padding-bottom: var(--eds-sp-s);\n        }\n\n        .eds-discussion-thread-item__panel-heading {\n            align-items: center;\n            display: flex;\n            justify-content: space-between;\n        }\n\n        .eds-discussion-thread-item__panel-title {\n            align-items: center;\n            display: flex;\n            font: var(--eds-f-label-m-semibold);\n        }\n\n        .eds-discussion-thread-item__panel-time {\n            align-items: center;\n            display: flex;\n            margin-left: auto;\n            font: var(--eds-f-paragraph-s);\n            color: var(--eds-c-foreground-subtler);\n            gap: var(--eds-sp-2xs);\n        }\n\n        .eds-discussion-thread-item__panel-time-text {\n            font: var(--eds-f-paragraph-s);\n        }\n\n        .eds-discussion-thread-item__panel-author {\n            margin-top: var(--eds-sp-xs);\n            font: var(--eds-f-paragraph-s);\n            color: var(--eds-c-foreground-subtler);\n        }\n\n        .eds-discussion-thread-item__panel-body {\n            margin: var(--eds-sp-m) 0;\n        }\n\n        .eds-discussion-thread-item__panel-body-text {\n            word-break: break-word;\n            margin: 0;\n            font: var(--eds-f-paragraph-m);\n        }\n    }\n\n    // Inverted (odd) items — panel floats right with arrow pointing left\n    :host.eds-discussion-thread-item--inverted {\n        .eds-discussion-thread-item__panel {\n            float: right;\n\n            &::before {\n                border-left-width: 0;\n                border-right-width: 15px;\n                left: -15px;\n                right: auto;\n            }\n\n            &::after {\n                border-left-width: 0;\n                border-right-width: 14px;\n                left: -14px;\n                right: auto;\n            }\n        }\n    }\n\n    // Responsive: tablet — single column, items on right\n    @include base.media(base.$eds-bkp-tablet) {\n        :host {\n            .eds-discussion-thread-item__panel {\n                float: right;\n                width: calc(100% - 90px);\n\n                &::before {\n                    border-left-width: 0;\n                    border-right-width: 15px;\n                    left: -15px;\n                    right: auto;\n                }\n\n                &::after {\n                    border-left-width: 0;\n                    border-right-width: 14px;\n                    left: -14px;\n                    right: auto;\n                }\n            }\n\n            .eds-discussion-thread-item__badge {\n                left: 15px;\n                margin-left: 0;\n                top: 16px;\n            }\n        }\n    }\n}\n",
                     "styleUrl": "./eds-discussion-thread-item.scss"
                 }
             ],
@@ -34670,7 +34670,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        font: var(--eds-f-label-l-semi-bold);\n        color: var(--eds-c-foreground-default);\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        font: var(--eds-f-label-l-semibold);\n        color: var(--eds-c-foreground-default);\n    }\n}\n",
                     "styleUrl": "./eds-empty-state-title.scss"
                 }
             ],
@@ -36528,7 +36528,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        align-items: center;\n        font: var(--eds-f-label-l-semi-bold);\n        color: var(--eds-c-foreground-default);\n        gap: var(--eds-sp-xs);\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        align-items: center;\n        font: var(--eds-f-label-l-semibold);\n        color: var(--eds-c-foreground-default);\n        gap: var(--eds-sp-xs);\n    }\n}\n",
                     "styleUrl": "./eds-fieldset-title.scss"
                 }
             ],
@@ -37936,7 +37936,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n\n        .eds-file-upload__drop-area {\n            outline: 1px dashed var(--eds-c-border-primary);\n            border-radius: var(--eds-br-m);\n            padding: var(--eds-sp-xl);\n            position: relative;\n            transition: background-color 0.2s ease, outline-width 0.2s ease;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: var(--eds-sp-xs);\n            margin-bottom: var(--eds-sp-xs);\n\n            &--active {\n                background-color: var(--eds-c-surface-elevation);\n                outline-width: 3px;\n            }\n\n            &--disabled {\n                opacity: 0.5;\n                cursor: not-allowed;\n\n                .eds-file-upload__file-input {\n                    cursor: default;\n                }\n            }\n        }\n\n        .eds-file-upload__drag-hint {\n            font: var(--eds-f-paragraph-s);\n            color: var(--eds-c-foreground-subtler);\n        }\n\n        .eds-file-upload__file-input {\n            height: 100%;\n            left: 0;\n            opacity: 0;\n            position: absolute;\n            top: 0;\n            width: 100%;\n\n            &:not(:disabled) {\n                cursor: pointer;\n            }\n        }\n\n        .eds-file-upload__simple-input {\n            margin-bottom: var(--eds-sp-xs);\n\n            .eds-file-upload__hidden-input {\n                display: none;\n            }\n        }\n\n        .eds-file-upload__progress {\n            margin-bottom: var(--eds-sp-xs);\n        }\n\n        .eds-file-upload__error {\n            margin-bottom: var(--eds-sp-xs);\n        }\n\n        .eds-file-upload__total-size {\n            margin-top: var(--eds-sp-xs);\n            margin-bottom: var(--eds-sp-xs);\n            font: var(--eds-f-label-m-semi-bold);\n        }\n\n        .eds-file-upload__reset-btn {\n            margin-top: var(--eds-sp-xs);\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n\n        .eds-file-upload__drop-area {\n            outline: 1px dashed var(--eds-c-border-primary);\n            border-radius: var(--eds-br-m);\n            padding: var(--eds-sp-xl);\n            position: relative;\n            transition: background-color 0.2s ease, outline-width 0.2s ease;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: var(--eds-sp-xs);\n            margin-bottom: var(--eds-sp-xs);\n\n            &--active {\n                background-color: var(--eds-c-surface-elevation);\n                outline-width: 3px;\n            }\n\n            &--disabled {\n                opacity: 0.5;\n                cursor: not-allowed;\n\n                .eds-file-upload__file-input {\n                    cursor: default;\n                }\n            }\n        }\n\n        .eds-file-upload__drag-hint {\n            font: var(--eds-f-paragraph-s);\n            color: var(--eds-c-foreground-subtler);\n        }\n\n        .eds-file-upload__file-input {\n            height: 100%;\n            left: 0;\n            opacity: 0;\n            position: absolute;\n            top: 0;\n            width: 100%;\n\n            &:not(:disabled) {\n                cursor: pointer;\n            }\n        }\n\n        .eds-file-upload__simple-input {\n            margin-bottom: var(--eds-sp-xs);\n\n            .eds-file-upload__hidden-input {\n                display: none;\n            }\n        }\n\n        .eds-file-upload__progress {\n            margin-bottom: var(--eds-sp-xs);\n        }\n\n        .eds-file-upload__error {\n            margin-bottom: var(--eds-sp-xs);\n        }\n\n        .eds-file-upload__total-size {\n            margin-top: var(--eds-sp-xs);\n            margin-bottom: var(--eds-sp-xs);\n            font: var(--eds-f-label-m-semibold);\n        }\n\n        .eds-file-upload__reset-btn {\n            margin-top: var(--eds-sp-xs);\n        }\n    }\n}\n",
                     "styleUrl": "./eds-file-upload.scss"
                 }
             ],
@@ -40600,7 +40600,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        position: fixed;\n        display: flex;\n        flex-direction: column;\n        width: 22rem;\n        z-index: 9000;\n        gap: var(--eds-sp-xs);\n        pointer-events: none;\n\n        // Position variants\n        &.eds-growl--bottom-left {\n            bottom: var(--eds-sp-l);\n            left: var(--eds-sp-l);\n        }\n\n        &.eds-growl--bottom-center {\n            bottom: var(--eds-sp-l);\n            left: 50%;\n            transform: translateX(-50%);\n        }\n\n        &.eds-growl--bottom-right {\n            bottom: var(--eds-sp-l);\n            right: var(--eds-sp-l);\n        }\n\n        &.eds-growl--top-left {\n            top: var(--eds-sp-l);\n            left: var(--eds-sp-l);\n        }\n\n        &.eds-growl--top-center {\n            top: var(--eds-sp-l);\n            left: 50%;\n            transform: translateX(-50%);\n        }\n\n        &.eds-growl--top-right {\n            top: var(--eds-sp-l);\n            right: var(--eds-sp-l);\n        }\n\n        // Item base\n        .eds-growl__item {\n            --_surface: var(--eds-c-surface-info-subtler);\n            --_on-surface: var(--eds-c-on-surface-info-subtler);\n            --_border-color: var(--eds-c-border-info);\n\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            padding: var(--eds-sp-m);\n            background-color: var(--_surface);\n            color: var(--_on-surface);\n            border-left: var(--eds-bw-m) solid var(--_border-color);\n            border-radius: var(--eds-br-s);\n            box-shadow: var(--eds-sh-3);\n            pointer-events: auto;\n            animation: eds-growl-fade-in 0.2s ease-out;\n\n            // Severity color variants\n            &--info {\n                --_surface: var(--eds-c-surface-info-subtler);\n                --_on-surface: var(--eds-c-on-surface-info-subtler);\n                --_border-color: var(--eds-c-border-info);\n            }\n\n            &--success {\n                --_surface: var(--eds-c-surface-success-subtler);\n                --_on-surface: var(--eds-c-on-surface-success-subtler);\n                --_border-color: var(--eds-c-border-success);\n            }\n\n            &--warning {\n                --_surface: var(--eds-c-surface-warning-subtler);\n                --_on-surface: var(--eds-c-on-surface-warning-subtler);\n                --_border-color: var(--eds-c-border-warning);\n            }\n\n            &--critical {\n                --_surface: var(--eds-c-surface-critical-subtler);\n                --_on-surface: var(--eds-c-on-surface-critical-subtler);\n                --_border-color: var(--eds-c-border-critical);\n            }\n\n            &--dismiss-all {\n                --_surface: var(--eds-c-surface-neutral-subtler);\n                --_on-surface: var(--eds-c-foreground-default);\n                --_border-color: var(--eds-c-border-divider);\n            }\n\n            // Slide animations\n            &--slide-up {\n                animation-name: eds-growl-slide-up;\n            }\n\n            &--slide-down {\n                animation-name: eds-growl-slide-down;\n            }\n        }\n\n        // Header row\n        .eds-growl__header {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            padding-right: var(--eds-sp-xl);\n        }\n\n        // Title\n        .eds-growl__title {\n            font: var(--eds-f-label-m-semi-bold);\n            color: var(--_on-surface);\n        }\n\n        // Content / detail area\n        .eds-growl__content {\n            margin-top: var(--eds-sp-2xs);\n            padding-left: calc(var(--eds-sp-xs) + 1.25rem);\n            font: var(--eds-f-paragraph-s);\n            color: var(--_on-surface);\n            max-height: 60vh;\n            overflow-y: auto;\n            overflow-wrap: break-word;\n\n            a {\n                text-decoration: underline;\n            }\n        }\n\n        // Close button\n        .eds-growl__close {\n            position: absolute;\n            top: var(--eds-sp-xs);\n            right: var(--eds-sp-xs);\n        }\n    }\n\n    @keyframes eds-growl-fade-in {\n        from {\n            opacity: 0;\n        }\n        to {\n            opacity: 1;\n        }\n    }\n\n    @keyframes eds-growl-slide-up {\n        from {\n            opacity: 0;\n            transform: translateY(1rem);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n\n    @keyframes eds-growl-slide-down {\n        from {\n            opacity: 0;\n            transform: translateY(-1rem);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n\n    @include base.media(base.$eds-bkp-mobile) {\n        :host {\n            width: calc(100vw - 2 * var(--eds-sp-m));\n\n            &.eds-growl--bottom-left,\n            &.eds-growl--bottom-center,\n            &.eds-growl--bottom-right {\n                bottom: var(--eds-sp-m);\n                left: var(--eds-sp-m);\n                right: var(--eds-sp-m);\n                transform: none;\n            }\n\n            &.eds-growl--top-left,\n            &.eds-growl--top-center,\n            &.eds-growl--top-right {\n                top: var(--eds-sp-m);\n                left: var(--eds-sp-m);\n                right: var(--eds-sp-m);\n                transform: none;\n            }\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        position: fixed;\n        display: flex;\n        flex-direction: column;\n        width: 22rem;\n        z-index: 9000;\n        gap: var(--eds-sp-xs);\n        pointer-events: none;\n\n        // Position variants\n        &.eds-growl--bottom-left {\n            bottom: var(--eds-sp-l);\n            left: var(--eds-sp-l);\n        }\n\n        &.eds-growl--bottom-center {\n            bottom: var(--eds-sp-l);\n            left: 50%;\n            transform: translateX(-50%);\n        }\n\n        &.eds-growl--bottom-right {\n            bottom: var(--eds-sp-l);\n            right: var(--eds-sp-l);\n        }\n\n        &.eds-growl--top-left {\n            top: var(--eds-sp-l);\n            left: var(--eds-sp-l);\n        }\n\n        &.eds-growl--top-center {\n            top: var(--eds-sp-l);\n            left: 50%;\n            transform: translateX(-50%);\n        }\n\n        &.eds-growl--top-right {\n            top: var(--eds-sp-l);\n            right: var(--eds-sp-l);\n        }\n\n        // Item base\n        .eds-growl__item {\n            --_surface: var(--eds-c-surface-info-subtler);\n            --_on-surface: var(--eds-c-on-surface-info-subtler);\n            --_border-color: var(--eds-c-border-info);\n\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            padding: var(--eds-sp-m);\n            background-color: var(--_surface);\n            color: var(--_on-surface);\n            border-left: var(--eds-bw-m) solid var(--_border-color);\n            border-radius: var(--eds-br-s);\n            box-shadow: var(--eds-sh-3);\n            pointer-events: auto;\n            animation: eds-growl-fade-in 0.2s ease-out;\n\n            // Severity color variants\n            &--info {\n                --_surface: var(--eds-c-surface-info-subtler);\n                --_on-surface: var(--eds-c-on-surface-info-subtler);\n                --_border-color: var(--eds-c-border-info);\n            }\n\n            &--success {\n                --_surface: var(--eds-c-surface-success-subtler);\n                --_on-surface: var(--eds-c-on-surface-success-subtler);\n                --_border-color: var(--eds-c-border-success);\n            }\n\n            &--warning {\n                --_surface: var(--eds-c-surface-warning-subtler);\n                --_on-surface: var(--eds-c-on-surface-warning-subtler);\n                --_border-color: var(--eds-c-border-warning);\n            }\n\n            &--critical {\n                --_surface: var(--eds-c-surface-critical-subtler);\n                --_on-surface: var(--eds-c-on-surface-critical-subtler);\n                --_border-color: var(--eds-c-border-critical);\n            }\n\n            &--dismiss-all {\n                --_surface: var(--eds-c-surface-neutral-subtler);\n                --_on-surface: var(--eds-c-foreground-default);\n                --_border-color: var(--eds-c-border-divider);\n            }\n\n            // Slide animations\n            &--slide-up {\n                animation-name: eds-growl-slide-up;\n            }\n\n            &--slide-down {\n                animation-name: eds-growl-slide-down;\n            }\n        }\n\n        // Header row\n        .eds-growl__header {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            padding-right: var(--eds-sp-xl);\n        }\n\n        // Title\n        .eds-growl__title {\n            font: var(--eds-f-label-m-semibold);\n            color: var(--_on-surface);\n        }\n\n        // Content / detail area\n        .eds-growl__content {\n            margin-top: var(--eds-sp-2xs);\n            padding-left: calc(var(--eds-sp-xs) + 1.25rem);\n            font: var(--eds-f-paragraph-s);\n            color: var(--_on-surface);\n            max-height: 60vh;\n            overflow-y: auto;\n            overflow-wrap: break-word;\n\n            a {\n                text-decoration: underline;\n            }\n        }\n\n        // Close button\n        .eds-growl__close {\n            position: absolute;\n            top: var(--eds-sp-xs);\n            right: var(--eds-sp-xs);\n        }\n    }\n\n    @keyframes eds-growl-fade-in {\n        from {\n            opacity: 0;\n        }\n        to {\n            opacity: 1;\n        }\n    }\n\n    @keyframes eds-growl-slide-up {\n        from {\n            opacity: 0;\n            transform: translateY(1rem);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n\n    @keyframes eds-growl-slide-down {\n        from {\n            opacity: 0;\n            transform: translateY(-1rem);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n\n    @include base.media(base.$eds-bkp-mobile) {\n        :host {\n            width: calc(100vw - 2 * var(--eds-sp-m));\n\n            &.eds-growl--bottom-left,\n            &.eds-growl--bottom-center,\n            &.eds-growl--bottom-right {\n                bottom: var(--eds-sp-m);\n                left: var(--eds-sp-m);\n                right: var(--eds-sp-m);\n                transform: none;\n            }\n\n            &.eds-growl--top-left,\n            &.eds-growl--top-center,\n            &.eds-growl--top-right {\n                top: var(--eds-sp-m);\n                left: var(--eds-sp-m);\n                right: var(--eds-sp-m);\n                transform: none;\n            }\n        }\n    }\n}\n",
                     "styleUrl": "./eds-growl.scss"
                 }
             ],
@@ -45408,7 +45408,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../../base' as base;\n\n.eui-21 {\n    :host.eds-label {\n        display: inline-block;\n        font: var(--eds-f-label-m-semi-bold);\n        color: var(--eds-c-foreground);\n    }\n\n    :host.eds-label--required {\n        &::after {\n            color: var(--eds-c-foreground-critical);\n            content: ' *';\n            font: var(--eds-f-label-m-semi-bold);\n        }\n    }\n\n    :host.eds-label--neutral {\n        color: var(--eds-c-foreground);\n    }\n\n    :host.eds-label--critical {\n        color: var(--eds-c-foreground-critical);\n    }\n}\n",
+                    "data": "@use '../../base' as base;\n\n.eui-21 {\n    :host.eds-label {\n        display: inline-block;\n        font: var(--eds-f-label-m-semibold);\n        color: var(--eds-c-foreground);\n    }\n\n    :host.eds-label--required {\n        &::after {\n            color: var(--eds-c-foreground-critical);\n            content: ' *';\n            font: var(--eds-f-label-m-semibold);\n        }\n    }\n\n    :host.eds-label--neutral {\n        color: var(--eds-c-foreground);\n    }\n\n    :host.eds-label--critical {\n        color: var(--eds-c-foreground-critical);\n    }\n}\n",
                     "styleUrl": "./eds-label.scss"
                 }
             ],
@@ -45879,7 +45879,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-semi-bold);\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-semi-bold);\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-semi-bold);\n            }\n        }\n\n        .option-code {\n            font: var(--eds-f-label-m-semi-bold);\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                --_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"
                 }
             ],
@@ -45907,7 +45907,7 @@
         },
         {
             "name": "EdsLanguageSelectorDialog",
-            "id": "component-EdsLanguageSelectorDialog-585c9ebf988aee1963674b25a644d8ec75df093ab665d9e7a5ff88d49ef15015bc13b8c354d32bd72dbea11d027050622484572bc4898c4080434f6b0b8b91b6",
+            "id": "component-EdsLanguageSelectorDialog-01129b158a34bfb8365720e796f11a09bead762cb07d02210e6fdbb4d466bd2b14c9d445b00243ea275988b940405caad04c846838f195b99f0260922b1e218d",
             "file": "packages/eds/eds-language-selector/eds-language-selector-dialog.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -45918,7 +45918,7 @@
             "selector": "eds-language-selector-dialog",
             "styleUrls": [],
             "styles": [
-                "\n        .eds-language-dialog {\n            padding: var(--eds-sp-m);\n        }\n        .eds-language-dialog__section-title {\n            font: var(--eds-f-label-m-semi-bold);\n            margin-bottom: var(--eds-sp-s);\n        }\n        .eds-language-dialog__section-title--additional {\n            margin-top: var(--eds-sp-l);\n        }\n        .eds-language-dialog__grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: var(--eds-sp-s);\n        }\n        .eds-language-dialog__item {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n        }\n        .eds-language-dialog__code {\n            font-weight: 600;\n            min-width: 2rem;\n        }\n    "
+                "\n        .eds-language-dialog {\n            padding: var(--eds-sp-m);\n        }\n        .eds-language-dialog__section-title {\n            font: var(--eds-f-label-m-semibold);\n            margin-bottom: var(--eds-sp-s);\n        }\n        .eds-language-dialog__section-title--additional {\n            margin-top: var(--eds-sp-l);\n        }\n        .eds-language-dialog__grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: var(--eds-sp-s);\n        }\n        .eds-language-dialog__item {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n        }\n        .eds-language-dialog__code {\n            font-weight: 600;\n            min-width: 2rem;\n        }\n    "
             ],
             "template": "<div class=\"eds-language-dialog\">\n    @if (nonEuLanguages().length > 0) {\n        <h4 class=\"eds-language-dialog__section-title\">EU Languages</h4>\n    }\n    <div class=\"eds-language-dialog__grid\">\n        @for (lang of euLanguages(); track lang.code) {\n            <div class=\"eds-language-dialog__item\">\n                <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n                <button\n                    edsButton\n                    [edsPrimary]=\"lang.code === config?.selectedLanguage\"\n                    [edsNeutral]=\"lang.code !== config?.selectedLanguage\"\n                    (click)=\"selectLanguage(lang)\">\n                    <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n                </button>\n            </div>\n        }\n    </div>\n\n    @if (nonEuLanguages().length > 0) {\n        <h4 class=\"eds-language-dialog__section-title eds-language-dialog__section-title--additional\">Non-EU Languages</h4>\n        <div class=\"eds-language-dialog__grid\">\n            @for (lang of nonEuLanguages(); track lang.code) {\n                <div class=\"eds-language-dialog__item\">\n                    <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n                    <button\n                        edsButton\n                        [edsPrimary]=\"lang.code === config?.selectedLanguage\"\n                        [edsNeutral]=\"lang.code !== config?.selectedLanguage\"\n                        (click)=\"selectLanguage(lang)\">\n                        <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n                    </button>\n                </div>\n            }\n        </div>\n    }\n</div>\n",
             "templateUrl": [],
@@ -46023,10 +46023,10 @@
             "description": "<p>Dialog content component for the language selector.\nDisplays EU and non-EU languages in separate grid sections.</p>\n",
             "rawdescription": "\n\nDialog content component for the language selector.\nDisplays EU and non-EU languages in separate grid sections.\n",
             "type": "component",
-            "sourceCode": "import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';\nimport { UpperCasePipe } from '@angular/common';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_DIALOG_COMPONENT_CONFIG } from '@eui/eds/eds-dialog';\nimport { EdsDialogService } from '@eui/eds/eds-dialog';\nimport { EdsLanguage } from './eds-language-selector';\n\n/** Official EU language codes. */\nconst EU_LANGUAGE_CODES = new Set([\n    'bg', 'cs', 'da', 'de', 'et', 'el', 'en', 'es', 'fr', 'ga',\n    'hr', 'it', 'lv', 'lt', 'hu', 'mt', 'nl', 'pl', 'pt', 'ro',\n    'sk', 'sl', 'fi', 'sv',\n]);\n\nexport interface EdsLanguageSelectorDialogConfig {\n    /** All available languages. */\n    languages: EdsLanguage[];\n    /** Currently selected language code. */\n    selectedLanguage: string;\n    /** Callback when a language is selected. */\n    onLanguageChange: (code: string) => void;\n}\n\n/**\n * Dialog content component for the language selector.\n * Displays EU and non-EU languages in separate grid sections.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'eds-language-selector-dialog',\n    template: `\n        <div class=\"eds-language-dialog\">\n            @if (nonEuLanguages().length > 0) {\n                <h4 class=\"eds-language-dialog__section-title\">EU Languages</h4>\n            }\n            <div class=\"eds-language-dialog__grid\">\n                @for (lang of euLanguages(); track lang.code) {\n                    <div class=\"eds-language-dialog__item\">\n                        <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n                        <button\n                            edsButton\n                            [edsPrimary]=\"lang.code === config?.selectedLanguage\"\n                            [edsNeutral]=\"lang.code !== config?.selectedLanguage\"\n                            (click)=\"selectLanguage(lang)\">\n                            <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n                        </button>\n                    </div>\n                }\n            </div>\n\n            @if (nonEuLanguages().length > 0) {\n                <h4 class=\"eds-language-dialog__section-title eds-language-dialog__section-title--additional\">Non-EU Languages</h4>\n                <div class=\"eds-language-dialog__grid\">\n                    @for (lang of nonEuLanguages(); track lang.code) {\n                        <div class=\"eds-language-dialog__item\">\n                            <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n                            <button\n                                edsButton\n                                [edsPrimary]=\"lang.code === config?.selectedLanguage\"\n                                [edsNeutral]=\"lang.code !== config?.selectedLanguage\"\n                                (click)=\"selectLanguage(lang)\">\n                                <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n                            </button>\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n    `,\n    styles: [`\n        .eds-language-dialog {\n            padding: var(--eds-sp-m);\n        }\n        .eds-language-dialog__section-title {\n            font: var(--eds-f-label-m-semi-bold);\n            margin-bottom: var(--eds-sp-s);\n        }\n        .eds-language-dialog__section-title--additional {\n            margin-top: var(--eds-sp-l);\n        }\n        .eds-language-dialog__grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: var(--eds-sp-s);\n        }\n        .eds-language-dialog__item {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n        }\n        .eds-language-dialog__code {\n            font-weight: 600;\n            min-width: 2rem;\n        }\n    `],\n    imports: [UpperCasePipe, ...EDS_BUTTON],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EdsLanguageSelectorDialog {\n    config = inject<EdsLanguageSelectorDialogConfig>(EDS_DIALOG_COMPONENT_CONFIG, { optional: true });\n\n    /** EU languages filtered from the provided list. */\n    euLanguages = computed(() =>\n        (this.config?.languages ?? []).filter(lang => EU_LANGUAGE_CODES.has(lang.code)),\n    );\n\n    /** Non-EU (additional) languages filtered from the provided list. */\n    nonEuLanguages = computed(() =>\n        (this.config?.languages ?? []).filter(lang => !EU_LANGUAGE_CODES.has(lang.code)),\n    );\n\n    private dialogService = inject(EdsDialogService);\n\n    selectLanguage(lang: EdsLanguage): void {\n        this.config?.onLanguageChange(lang.code);\n        this.dialogService.closeDialog();\n    }\n}\n",
+            "sourceCode": "import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';\nimport { UpperCasePipe } from '@angular/common';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_DIALOG_COMPONENT_CONFIG } from '@eui/eds/eds-dialog';\nimport { EdsDialogService } from '@eui/eds/eds-dialog';\nimport { EdsLanguage } from './eds-language-selector';\n\n/** Official EU language codes. */\nconst EU_LANGUAGE_CODES = new Set([\n    'bg', 'cs', 'da', 'de', 'et', 'el', 'en', 'es', 'fr', 'ga',\n    'hr', 'it', 'lv', 'lt', 'hu', 'mt', 'nl', 'pl', 'pt', 'ro',\n    'sk', 'sl', 'fi', 'sv',\n]);\n\nexport interface EdsLanguageSelectorDialogConfig {\n    /** All available languages. */\n    languages: EdsLanguage[];\n    /** Currently selected language code. */\n    selectedLanguage: string;\n    /** Callback when a language is selected. */\n    onLanguageChange: (code: string) => void;\n}\n\n/**\n * Dialog content component for the language selector.\n * Displays EU and non-EU languages in separate grid sections.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'eds-language-selector-dialog',\n    template: `\n        <div class=\"eds-language-dialog\">\n            @if (nonEuLanguages().length > 0) {\n                <h4 class=\"eds-language-dialog__section-title\">EU Languages</h4>\n            }\n            <div class=\"eds-language-dialog__grid\">\n                @for (lang of euLanguages(); track lang.code) {\n                    <div class=\"eds-language-dialog__item\">\n                        <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n                        <button\n                            edsButton\n                            [edsPrimary]=\"lang.code === config?.selectedLanguage\"\n                            [edsNeutral]=\"lang.code !== config?.selectedLanguage\"\n                            (click)=\"selectLanguage(lang)\">\n                            <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n                        </button>\n                    </div>\n                }\n            </div>\n\n            @if (nonEuLanguages().length > 0) {\n                <h4 class=\"eds-language-dialog__section-title eds-language-dialog__section-title--additional\">Non-EU Languages</h4>\n                <div class=\"eds-language-dialog__grid\">\n                    @for (lang of nonEuLanguages(); track lang.code) {\n                        <div class=\"eds-language-dialog__item\">\n                            <span class=\"eds-language-dialog__code\">{{ lang.code | uppercase }}</span>\n                            <button\n                                edsButton\n                                [edsPrimary]=\"lang.code === config?.selectedLanguage\"\n                                [edsNeutral]=\"lang.code !== config?.selectedLanguage\"\n                                (click)=\"selectLanguage(lang)\">\n                                <span [attr.lang]=\"lang.code\">{{ lang.label }}</span>\n                            </button>\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n    `,\n    styles: [`\n        .eds-language-dialog {\n            padding: var(--eds-sp-m);\n        }\n        .eds-language-dialog__section-title {\n            font: var(--eds-f-label-m-semibold);\n            margin-bottom: var(--eds-sp-s);\n        }\n        .eds-language-dialog__section-title--additional {\n            margin-top: var(--eds-sp-l);\n        }\n        .eds-language-dialog__grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: var(--eds-sp-s);\n        }\n        .eds-language-dialog__item {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n        }\n        .eds-language-dialog__code {\n            font-weight: 600;\n            min-width: 2rem;\n        }\n    `],\n    imports: [UpperCasePipe, ...EDS_BUTTON],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EdsLanguageSelectorDialog {\n    config = inject<EdsLanguageSelectorDialogConfig>(EDS_DIALOG_COMPONENT_CONFIG, { optional: true });\n\n    /** EU languages filtered from the provided list. */\n    euLanguages = computed(() =>\n        (this.config?.languages ?? []).filter(lang => EU_LANGUAGE_CODES.has(lang.code)),\n    );\n\n    /** Non-EU (additional) languages filtered from the provided list. */\n    nonEuLanguages = computed(() =>\n        (this.config?.languages ?? []).filter(lang => !EU_LANGUAGE_CODES.has(lang.code)),\n    );\n\n    private dialogService = inject(EdsDialogService);\n\n    selectLanguage(lang: EdsLanguage): void {\n        this.config?.onLanguageChange(lang.code);\n        this.dialogService.closeDialog();\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
-            "stylesData": "\n        .eds-language-dialog {\n            padding: var(--eds-sp-m);\n        }\n        .eds-language-dialog__section-title {\n            font: var(--eds-f-label-m-semi-bold);\n            margin-bottom: var(--eds-sp-s);\n        }\n        .eds-language-dialog__section-title--additional {\n            margin-top: var(--eds-sp-l);\n        }\n        .eds-language-dialog__grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: var(--eds-sp-s);\n        }\n        .eds-language-dialog__item {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n        }\n        .eds-language-dialog__code {\n            font-weight: 600;\n            min-width: 2rem;\n        }\n    \n",
+            "stylesData": "\n        .eds-language-dialog {\n            padding: var(--eds-sp-m);\n        }\n        .eds-language-dialog__section-title {\n            font: var(--eds-f-label-m-semibold);\n            margin-bottom: var(--eds-sp-s);\n        }\n        .eds-language-dialog__section-title--additional {\n            margin-top: var(--eds-sp-l);\n        }\n        .eds-language-dialog__grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: var(--eds-sp-s);\n        }\n        .eds-language-dialog__item {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n        }\n        .eds-language-dialog__code {\n            font-weight: 600;\n            min-width: 2rem;\n        }\n    \n",
             "jsdoctags": [
                 {
                     "pos": 886,
@@ -47009,7 +47009,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n        font: var(--eds-f-label-s-semi-bold);\n        color: var(--eds-c-foreground-default);\n        white-space: nowrap;\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n        font: var(--eds-f-label-s-semibold);\n        color: var(--eds-c-foreground-default);\n        white-space: nowrap;\n    }\n}\n",
                     "styleUrl": "./eds-list-item-end.scss"
                 }
             ],
@@ -48610,7 +48610,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        width: 100%;\n        @include base.eds-focus-visible();\n\n        .eds-menu-item__content {\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            width: 100%;\n        }\n\n        // Link base\n        .eds-menu-item__link {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            padding: var(--eds-sp-xs) var(--eds-sp-l);\n            font: var(--eds-f-paragraph-s);\n            color: var(--eds-c-foreground-default);\n            text-decoration: none;\n            cursor: pointer;\n            border: none;\n            background: none;\n            width: 100%;\n            min-height: 40px;\n            border-left: 3px solid transparent;\n            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n\n            &:hover:not(.eds-menu-item__link--disabled):not(.eds-menu-item__link--category) {\n                background: var(--eds-c-surface-elevation-sunken);\n                color: var(--eds-c-foreground-primary);\n            }\n\n            &--active:not(.eds-menu-item--disabled) {\n                background: var(--eds-c-surface-primary-subtle);\n                color: var(--eds-c-foreground-primary);\n                font-weight: var(--eds-f-w-semi-bold);\n                border-left-color: var(--eds-c-border-primary);\n            }\n\n            &--disabled {\n                opacity: var(--eds-op-40);\n                pointer-events: none;\n            }\n\n            &--category {\n                cursor: default;\n                font: var(--eds-f-label-s-semi-bold);\n                color: var(--eds-c-foreground-subtler);\n                text-transform: uppercase;\n                letter-spacing: 0.02em;\n                padding: var(--eds-sp-m) var(--eds-sp-l) var(--eds-sp-xs);\n                min-height: auto;\n                border-left-color: transparent;\n\n                &:hover {\n                    background: none;\n                }\n            }\n        }\n\n        // Sub-blocks\n        .eds-menu-item__link-start-block {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            flex-shrink: 0;\n            position: relative;\n\n            &:empty {\n                display: none;\n            }\n        }\n\n        .eds-menu-item__link-content-block {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            flex: 1;\n            min-width: 0;\n        }\n\n        .eds-menu-item__link-label {\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n\n            &--category {\n                font: var(--eds-f-label-s-semi-bold);\n                color: var(--eds-c-foreground-subtler);\n            }\n        }\n\n        .eds-menu-item__link-end-block {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            flex-shrink: 0;\n            margin-left: auto;\n        }\n\n        .eds-menu-item__link-external-icon {\n            flex-shrink: 0;\n            color: var(--eds-c-foreground-subtler);\n        }\n\n        // Icon\n        .eds-menu-item__icon {\n            flex-shrink: 0;\n        }\n\n        // Status/marker dot. The EDS `dot:core` glyph is a tiny dot centered in a 256x256\n        // viewbox, so rendered as-is it reads as a barely-visible speck. Draw the marker as a\n        // proper CSS disc (using the icon's resolved color) and hide the inner glyph, keeping\n        // the eds-icon element + its color handling.\n        .eds-menu-item__marker {\n            flex-shrink: 0;\n            width: var(--eds-sp-xs);\n            height: var(--eds-sp-xs);\n            border-radius: 50%;\n            background: currentColor;\n\n            ::ng-deep .eds-icon-svg {\n                display: none;\n            }\n        }\n\n        // Initials\n        .eds-menu-item__initials {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font: var(--eds-f-label-m-semi-bold);\n            width: 32px;\n            height: 32px;\n            border-radius: var(--eds-br-s);\n            background: var(--eds-c-surface-elevation-sunken);\n            border: 1px solid var(--eds-c-border-divider);\n            flex-shrink: 0;\n        }\n\n        // Icon label (collapsed mode with labels)\n        .eds-menu-item__icon-label {\n            font: var(--eds-f-microcopy-2xs);\n            color: var(--eds-c-foreground-subtler);\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            max-width: 100%;\n            text-align: center;\n        }\n\n        // Badge dot in collapsed mode (positioned relative to start-block / icon)\n        .eds-menu-item__badge--dot {\n            position: absolute;\n            top: -2px;\n            right: -2px;\n            pointer-events: none;\n        }\n\n        // Action icon button\n        .eds-menu-item__action-icon {\n            opacity: 0;\n            transition: opacity 0.15s ease;\n        }\n\n        .eds-menu-item__content:hover .eds-menu-item__action-icon {\n            opacity: 1;\n        }\n\n        // Expand toggle\n        .eds-menu-item__expand-toggle {\n            flex-shrink: 0;\n        }\n\n        // Disabled state\n        .eds-menu-item--disabled {\n            opacity: var(--eds-op-40);\n            pointer-events: none;\n        }\n\n        // Expanded state\n        .eds-menu-item--expanded {\n            > .eds-menu-item__link {\n                font-weight: var(--eds-f-w-medium);\n            }\n        }\n\n        // Active state\n        .eds-menu-item--active {\n            > .eds-menu-item__link {\n                background: var(--eds-c-surface-primary-subtle);\n                color: var(--eds-c-foreground-primary);\n                font-weight: var(--eds-f-w-semi-bold);\n                border-left-color: var(--eds-c-border-primary);\n            }\n        }\n    }\n\n    // Bold root level\n    :host.eds-menu-item--bold {\n        > .eds-menu-item__content > .eds-menu-item__link {\n            font-weight: var(--eds-f-w-semi-bold);\n        }\n    }\n\n    // Icon-label mode (collapsed with labels under icons)\n    :host.eds-menu-item--icon-label {\n        .eds-menu-item__link {\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: var(--eds-sp-xs);\n            gap: var(--eds-sp-4xs);\n            border-left: none;\n            border-radius: var(--eds-br-s);\n        }\n\n        .eds-menu-item__link-content-block {\n            display: none;\n        }\n\n        .eds-menu-item__link-end-block {\n            display: none;\n        }\n    }\n\n    // Collapsed host-level adjustments\n    .eds-menu--collapsed {\n        :host {\n            .eds-menu-item__content {\n                position: relative;\n            }\n\n            .eds-menu-item__link {\n                justify-content: center;\n                padding: var(--eds-sp-xs) var(--eds-sp-s);\n                border-left: none;\n                border-radius: var(--eds-br-s);\n                margin: var(--eds-sp-4xs) 0;\n            }\n\n            .eds-menu-item__link-content-block {\n                display: none;\n            }\n\n            .eds-menu-item__link-end-block {\n                display: none;\n            }\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        width: 100%;\n        @include base.eds-focus-visible();\n\n        .eds-menu-item__content {\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            width: 100%;\n        }\n\n        // Link base\n        .eds-menu-item__link {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            padding: var(--eds-sp-xs) var(--eds-sp-l);\n            font: var(--eds-f-paragraph-s);\n            color: var(--eds-c-foreground-default);\n            text-decoration: none;\n            cursor: pointer;\n            border: none;\n            background: none;\n            width: 100%;\n            min-height: 40px;\n            border-left: 3px solid transparent;\n            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n\n            &:hover:not(.eds-menu-item__link--disabled):not(.eds-menu-item__link--category) {\n                background: var(--eds-c-surface-elevation-sunken);\n                color: var(--eds-c-foreground-primary);\n            }\n\n            &--active:not(.eds-menu-item--disabled) {\n                background: var(--eds-c-surface-primary-subtle);\n                color: var(--eds-c-foreground-primary);\n                font-weight: var(--eds-f-w-semibold);\n                border-left-color: var(--eds-c-border-primary);\n            }\n\n            &--disabled {\n                opacity: var(--eds-op-40);\n                pointer-events: none;\n            }\n\n            &--category {\n                cursor: default;\n                font: var(--eds-f-label-s-semibold);\n                color: var(--eds-c-foreground-subtler);\n                text-transform: uppercase;\n                letter-spacing: 0.02em;\n                padding: var(--eds-sp-m) var(--eds-sp-l) var(--eds-sp-xs);\n                min-height: auto;\n                border-left-color: transparent;\n\n                &:hover {\n                    background: none;\n                }\n            }\n        }\n\n        // Sub-blocks\n        .eds-menu-item__link-start-block {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            flex-shrink: 0;\n            position: relative;\n\n            &:empty {\n                display: none;\n            }\n        }\n\n        .eds-menu-item__link-content-block {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            flex: 1;\n            min-width: 0;\n        }\n\n        .eds-menu-item__link-label {\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n\n            &--category {\n                font: var(--eds-f-label-s-semibold);\n                color: var(--eds-c-foreground-subtler);\n            }\n        }\n\n        .eds-menu-item__link-end-block {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            flex-shrink: 0;\n            margin-left: auto;\n        }\n\n        .eds-menu-item__link-external-icon {\n            flex-shrink: 0;\n            color: var(--eds-c-foreground-subtler);\n        }\n\n        // Icon\n        .eds-menu-item__icon {\n            flex-shrink: 0;\n        }\n\n        // Status/marker dot. The EDS `dot:core` glyph is a tiny dot centered in a 256x256\n        // viewbox, so rendered as-is it reads as a barely-visible speck. Draw the marker as a\n        // proper CSS disc (using the icon's resolved color) and hide the inner glyph, keeping\n        // the eds-icon element + its color handling.\n        .eds-menu-item__marker {\n            flex-shrink: 0;\n            width: var(--eds-sp-xs);\n            height: var(--eds-sp-xs);\n            border-radius: 50%;\n            background: currentColor;\n\n            ::ng-deep .eds-icon-svg {\n                display: none;\n            }\n        }\n\n        // Initials\n        .eds-menu-item__initials {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font: var(--eds-f-label-m-semibold);\n            width: 32px;\n            height: 32px;\n            border-radius: var(--eds-br-s);\n            background: var(--eds-c-surface-elevation-sunken);\n            border: 1px solid var(--eds-c-border-divider);\n            flex-shrink: 0;\n        }\n\n        // Icon label (collapsed mode with labels)\n        .eds-menu-item__icon-label {\n            font: var(--eds-f-microcopy-2xs);\n            color: var(--eds-c-foreground-subtler);\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            max-width: 100%;\n            text-align: center;\n        }\n\n        // Badge dot in collapsed mode (positioned relative to start-block / icon)\n        .eds-menu-item__badge--dot {\n            position: absolute;\n            top: -2px;\n            right: -2px;\n            pointer-events: none;\n        }\n\n        // Action icon button\n        .eds-menu-item__action-icon {\n            opacity: 0;\n            transition: opacity 0.15s ease;\n        }\n\n        .eds-menu-item__content:hover .eds-menu-item__action-icon {\n            opacity: 1;\n        }\n\n        // Expand toggle\n        .eds-menu-item__expand-toggle {\n            flex-shrink: 0;\n        }\n\n        // Disabled state\n        .eds-menu-item--disabled {\n            opacity: var(--eds-op-40);\n            pointer-events: none;\n        }\n\n        // Expanded state\n        .eds-menu-item--expanded {\n            > .eds-menu-item__link {\n                font-weight: var(--eds-f-w-medium);\n            }\n        }\n\n        // Active state\n        .eds-menu-item--active {\n            > .eds-menu-item__link {\n                background: var(--eds-c-surface-primary-subtle);\n                color: var(--eds-c-foreground-primary);\n                font-weight: var(--eds-f-w-semibold);\n                border-left-color: var(--eds-c-border-primary);\n            }\n        }\n    }\n\n    // Bold root level\n    :host.eds-menu-item--bold {\n        > .eds-menu-item__content > .eds-menu-item__link {\n            font-weight: var(--eds-f-w-semibold);\n        }\n    }\n\n    // Icon-label mode (collapsed with labels under icons)\n    :host.eds-menu-item--icon-label {\n        .eds-menu-item__link {\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: var(--eds-sp-xs);\n            gap: var(--eds-sp-4xs);\n            border-left: none;\n            border-radius: var(--eds-br-s);\n        }\n\n        .eds-menu-item__link-content-block {\n            display: none;\n        }\n\n        .eds-menu-item__link-end-block {\n            display: none;\n        }\n    }\n\n    // Collapsed host-level adjustments\n    .eds-menu--collapsed {\n        :host {\n            .eds-menu-item__content {\n                position: relative;\n            }\n\n            .eds-menu-item__link {\n                justify-content: center;\n                padding: var(--eds-sp-xs) var(--eds-sp-s);\n                border-left: none;\n                border-radius: var(--eds-br-s);\n                margin: var(--eds-sp-4xs) 0;\n            }\n\n            .eds-menu-item__link-content-block {\n                display: none;\n            }\n\n            .eds-menu-item__link-end-block {\n                display: none;\n            }\n        }\n    }\n}\n",
                     "styleUrl": "./eds-menu-item.scss"
                 }
             ],
@@ -50099,7 +50099,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host.eds-multiselect {\n        display: block;\n        position: relative;\n        width: 100%;\n\n        .eds-multiselect__trigger {\n            @include base.eds-ellipsis();\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            font: var(--eds-f-paragraph-m);\n            appearance: none;\n            background-color: var(--eds-c-surface-elevation);\n            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n            border-radius: var(--eds-br-s);\n            box-shadow: none;\n            color: var(--eds-c-foreground-default);\n            min-height: var(--eds-si-3xl);\n            padding: var(--eds-sp-xs) var(--eds-sp-s);\n            width: 100%;\n            cursor: pointer;\n            outline: none;\n            transition: border-color 0.15s ease;\n\n            &:hover:not([aria-disabled=\"true\"]) {\n                border-color: var(--eds-c-border-primary);\n            }\n\n            &:focus-visible:not([aria-disabled=\"true\"]) {\n                outline: 2px solid var(--eds-c-border-primary);\n                outline-offset: -2px;\n            }\n        }\n\n        .eds-multiselect__display {\n            flex: 1;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n\n            &--placeholder {\n                color: var(--eds-c-foreground-subtler);\n            }\n        }\n\n        .eds-multiselect__caret {\n            flex-shrink: 0;\n            font-size: 20px;\n            color: var(--eds-c-foreground-default);\n            transition: transform 0.2s ease;\n        }\n\n        // Open state\n        &.eds-multiselect--open {\n            .eds-multiselect__trigger {\n                border-color: var(--eds-c-border-primary);\n                outline: 2px solid var(--eds-c-border-primary);\n                outline-offset: -2px;\n            }\n\n            .eds-multiselect__caret {\n                transform: rotate(180deg);\n            }\n        }\n\n        // Disabled state\n        &.eds-multiselect--disabled {\n            .eds-multiselect__trigger {\n                background-color: var(--eds-c-suface-disabled);\n                border-color: var(--eds-c-border-disabled);\n                color: var(--eds-c-foreground-subtler);\n                cursor: not-allowed;\n                pointer-events: none;\n            }\n\n            .eds-multiselect__caret {\n                color: var(--eds-c-foreground-subtler);\n            }\n        }\n\n        // Invalid state\n        &.eds-multiselect--invalid {\n            .eds-multiselect__trigger {\n                border-color: var(--eds-c-border-critical);\n            }\n\n            .eds-multiselect__trigger:focus-visible {\n                outline-color: var(--eds-c-border-critical);\n            }\n        }\n    }\n}\n\n// Dropdown panel (rendered in CDK overlay, outside :host)\n.eds-multiselect__panel-wrapper {\n    background-color: var(--eds-c-surface-elevation);\n    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n    border-radius: var(--eds-br-s);\n    box-shadow: var(--eds-sh-1);\n    display: flex;\n    flex-direction: column;\n    max-height: 280px;\n    min-width: 100%;\n    box-sizing: border-box;\n    outline: none;\n}\n\n.eds-multiselect__panel {\n    flex: 1;\n    max-height: 240px;\n    overflow-y: auto;\n    padding: var(--eds-sp-3xs) 0;\n    outline: none;\n\n    .eds-multiselect-option {\n        display: flex;\n        align-items: center;\n        gap: var(--eds-sp-s);\n        padding: var(--eds-sp-xs) var(--eds-sp-s);\n        cursor: pointer;\n        font: var(--eds-f-paragraph-m);\n        color: var(--eds-c-foreground-default);\n        user-select: none;\n        transition: background-color 0.1s ease;\n\n        .eds-multiselect-option__label {\n            flex: 1;\n        }\n\n        .eds-multiselect-option__check {\n            opacity: 0;\n            font-size: 16px;\n            color: var(--eds-c-foreground-primary);\n            transition: opacity 0.1s ease;\n        }\n\n        &:hover:not(.eds-multiselect-option--disabled) {\n            background-color: var(--eds-c-surface-hover);\n        }\n\n        &--active:not(.eds-multiselect-option--disabled) {\n            background-color: var(--eds-c-surface-hover);\n            outline: var(--eds-bw-s) solid var(--eds-c-border-primary);\n            outline-offset: -2px;\n        }\n\n        &--selected {\n            .eds-multiselect-option__check {\n                opacity: 1;\n            }\n        }\n\n        &--disabled {\n            color: var(--eds-c-foreground-subtler);\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n}\n\n.eds-multiselect__panel-footer {\n    display: flex;\n    justify-content: flex-start;\n    padding: var(--eds-sp-xs) var(--eds-sp-s);\n    border-top: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n}\n\n.eds-multiselect__done-button {\n    font: var(--eds-f-label-m-semi-bold);\n    color: var(--eds-c-foreground-primary);\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: var(--eds-sp-3xs) var(--eds-sp-s);\n    border-radius: var(--eds-br-s);\n    transition: background-color 0.1s ease;\n\n    &:hover {\n        background-color: var(--eds-c-surface-hover);\n    }\n\n    &:focus-visible {\n        outline: 2px solid var(--eds-c-border-primary);\n        outline-offset: -2px;\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host.eds-multiselect {\n        display: block;\n        position: relative;\n        width: 100%;\n\n        .eds-multiselect__trigger {\n            @include base.eds-ellipsis();\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-xs);\n            font: var(--eds-f-paragraph-m);\n            appearance: none;\n            background-color: var(--eds-c-surface-elevation);\n            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n            border-radius: var(--eds-br-s);\n            box-shadow: none;\n            color: var(--eds-c-foreground-default);\n            min-height: var(--eds-si-3xl);\n            padding: var(--eds-sp-xs) var(--eds-sp-s);\n            width: 100%;\n            cursor: pointer;\n            outline: none;\n            transition: border-color 0.15s ease;\n\n            &:hover:not([aria-disabled=\"true\"]) {\n                border-color: var(--eds-c-border-primary);\n            }\n\n            &:focus-visible:not([aria-disabled=\"true\"]) {\n                outline: 2px solid var(--eds-c-border-primary);\n                outline-offset: -2px;\n            }\n        }\n\n        .eds-multiselect__display {\n            flex: 1;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n\n            &--placeholder {\n                color: var(--eds-c-foreground-subtler);\n            }\n        }\n\n        .eds-multiselect__caret {\n            flex-shrink: 0;\n            font-size: 20px;\n            color: var(--eds-c-foreground-default);\n            transition: transform 0.2s ease;\n        }\n\n        // Open state\n        &.eds-multiselect--open {\n            .eds-multiselect__trigger {\n                border-color: var(--eds-c-border-primary);\n                outline: 2px solid var(--eds-c-border-primary);\n                outline-offset: -2px;\n            }\n\n            .eds-multiselect__caret {\n                transform: rotate(180deg);\n            }\n        }\n\n        // Disabled state\n        &.eds-multiselect--disabled {\n            .eds-multiselect__trigger {\n                background-color: var(--eds-c-suface-disabled);\n                border-color: var(--eds-c-border-disabled);\n                color: var(--eds-c-foreground-subtler);\n                cursor: not-allowed;\n                pointer-events: none;\n            }\n\n            .eds-multiselect__caret {\n                color: var(--eds-c-foreground-subtler);\n            }\n        }\n\n        // Invalid state\n        &.eds-multiselect--invalid {\n            .eds-multiselect__trigger {\n                border-color: var(--eds-c-border-critical);\n            }\n\n            .eds-multiselect__trigger:focus-visible {\n                outline-color: var(--eds-c-border-critical);\n            }\n        }\n    }\n}\n\n// Dropdown panel (rendered in CDK overlay, outside :host)\n.eds-multiselect__panel-wrapper {\n    background-color: var(--eds-c-surface-elevation);\n    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n    border-radius: var(--eds-br-s);\n    box-shadow: var(--eds-sh-1);\n    display: flex;\n    flex-direction: column;\n    max-height: 280px;\n    min-width: 100%;\n    box-sizing: border-box;\n    outline: none;\n}\n\n.eds-multiselect__panel {\n    flex: 1;\n    max-height: 240px;\n    overflow-y: auto;\n    padding: var(--eds-sp-3xs) 0;\n    outline: none;\n\n    .eds-multiselect-option {\n        display: flex;\n        align-items: center;\n        gap: var(--eds-sp-s);\n        padding: var(--eds-sp-xs) var(--eds-sp-s);\n        cursor: pointer;\n        font: var(--eds-f-paragraph-m);\n        color: var(--eds-c-foreground-default);\n        user-select: none;\n        transition: background-color 0.1s ease;\n\n        .eds-multiselect-option__label {\n            flex: 1;\n        }\n\n        .eds-multiselect-option__check {\n            opacity: 0;\n            font-size: 16px;\n            color: var(--eds-c-foreground-primary);\n            transition: opacity 0.1s ease;\n        }\n\n        &:hover:not(.eds-multiselect-option--disabled) {\n            background-color: var(--eds-c-surface-hover);\n        }\n\n        &--active:not(.eds-multiselect-option--disabled) {\n            background-color: var(--eds-c-surface-hover);\n            outline: var(--eds-bw-s) solid var(--eds-c-border-primary);\n            outline-offset: -2px;\n        }\n\n        &--selected {\n            .eds-multiselect-option__check {\n                opacity: 1;\n            }\n        }\n\n        &--disabled {\n            color: var(--eds-c-foreground-subtler);\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n}\n\n.eds-multiselect__panel-footer {\n    display: flex;\n    justify-content: flex-start;\n    padding: var(--eds-sp-xs) var(--eds-sp-s);\n    border-top: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n}\n\n.eds-multiselect__done-button {\n    font: var(--eds-f-label-m-semibold);\n    color: var(--eds-c-foreground-primary);\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: var(--eds-sp-3xs) var(--eds-sp-s);\n    border-radius: var(--eds-br-s);\n    transition: background-color 0.1s ease;\n\n    &:hover {\n        background-color: var(--eds-c-surface-hover);\n    }\n\n    &:focus-visible {\n        outline: 2px solid var(--eds-c-border-primary);\n        outline-offset: -2px;\n    }\n}\n",
                     "styleUrl": "./eds-multiselect.scss"
                 }
             ],
@@ -51752,7 +51752,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        font: var(--eds-f-label-m-semi-bold);\n        color: var(--eds-c-foreground);\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: block;\n        font: var(--eds-f-label-m-semibold);\n        color: var(--eds-c-foreground);\n    }\n}\n",
                     "styleUrl": "./eds-page-column-header-label.scss"
                 }
             ],
@@ -53859,7 +53859,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    // POSITION & ARROW STYLES (applied on CDK overlay panel)\n    .eds-popover-position {\n        .eds-popover__arrow {\n            border-color: inherit;\n            border-style: solid;\n            border-width: 8px;\n            color: var(--eds-c-border-divider);\n            display: none;\n            height: 0;\n            position: absolute;\n            width: 0;\n\n            &-inner {\n                border-color: var(--eds-c-surface-elevation);\n                border-style: solid;\n                border-width: 7px;\n                content: \" \";\n                display: block;\n                height: 0;\n                position: absolute;\n                width: 0;\n            }\n        }\n\n        &--top,\n        &--bottom,\n        &--left,\n        &--right {\n            .eds-popover__arrow {\n                display: block;\n            }\n        }\n\n        &--top,\n        &--bottom {\n            .eds-popover__arrow {\n                border-left-color: transparent;\n                border-right-color: transparent;\n                left: 50%;\n                transform: translateX(-8px);\n\n                &-inner {\n                    border-left-color: transparent;\n                    border-right-color: transparent;\n                    margin-left: -7px;\n                }\n            }\n        }\n\n        &--top {\n            .eds-popover__arrow {\n                border-bottom-width: 0;\n                bottom: -7px;\n\n                &-inner {\n                    border-bottom-width: 0;\n                    bottom: 2px;\n                }\n            }\n        }\n\n        &--bottom {\n            .eds-popover__arrow {\n                border-top-width: 0;\n                top: -7px;\n\n                &-inner {\n                    border-top-width: 0;\n                    top: 1px;\n                }\n            }\n        }\n\n        &--left,\n        &--right {\n            .eds-popover__arrow {\n                border-bottom-color: transparent;\n                border-top-color: transparent;\n                top: 50%;\n                transform: translateY(-8px);\n\n                &-inner {\n                    border-bottom-color: transparent;\n                    border-top-color: transparent;\n                    top: -7px;\n                }\n            }\n        }\n\n        &--left {\n            .eds-popover__arrow {\n                border-right-width: 0;\n                right: -7px;\n\n                &-inner {\n                    border-right-width: 0;\n                    right: 2px;\n                }\n            }\n        }\n\n        &--right {\n            .eds-popover__arrow {\n                border-left-width: 0;\n                left: -7px;\n\n                &-inner {\n                    border-left-width: 0;\n                    border-right-color: var(--eds-c-surface-elevation);\n                    left: 2px;\n                }\n            }\n        }\n    }\n\n    // POPOVER COMPONENT STYLES (applied on CDK overlay panel)\n    .eds-popover {\n        display: flex;\n        width: 25rem;\n\n        &--has-custom-width {\n            width: auto !important;\n        }\n\n        &--size-s {\n            max-width: 12rem;\n            width: 12rem;\n        }\n\n        &--size-m {\n            max-width: 25rem;\n            width: 25rem;\n        }\n\n        &--size-l {\n            max-width: 35rem;\n            width: 35rem;\n        }\n\n        &--size-xl {\n            max-width: 50rem;\n            width: 50rem;\n        }\n\n        &--size-2xl {\n            max-width: 75rem;\n            width: 75rem;\n        }\n\n        &--size-auto {\n            max-width: none;\n            width: auto;\n        }\n\n        &__container {\n            background-color: var(--eds-c-surface-elevation);\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-1);\n            width: 100%;\n        }\n\n        &__header {\n            align-items: center;\n            display: flex;\n            justify-content: space-between;\n            padding: var(--eds-sp-s) var(--eds-sp-s) 0 var(--eds-sp-s);\n\n            &--close-only {\n                justify-content: flex-end;\n            }\n\n            &-title {\n                font: var(--eds-f-label-m-semi-bold);\n            }\n        }\n\n        &__content {\n            padding: var(--eds-sp-s);\n\n            &--no-padding {\n                padding: 0;\n            }\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    // POSITION & ARROW STYLES (applied on CDK overlay panel)\n    .eds-popover-position {\n        .eds-popover__arrow {\n            border-color: inherit;\n            border-style: solid;\n            border-width: 8px;\n            color: var(--eds-c-border-divider);\n            display: none;\n            height: 0;\n            position: absolute;\n            width: 0;\n\n            &-inner {\n                border-color: var(--eds-c-surface-elevation);\n                border-style: solid;\n                border-width: 7px;\n                content: \" \";\n                display: block;\n                height: 0;\n                position: absolute;\n                width: 0;\n            }\n        }\n\n        &--top,\n        &--bottom,\n        &--left,\n        &--right {\n            .eds-popover__arrow {\n                display: block;\n            }\n        }\n\n        &--top,\n        &--bottom {\n            .eds-popover__arrow {\n                border-left-color: transparent;\n                border-right-color: transparent;\n                left: 50%;\n                transform: translateX(-8px);\n\n                &-inner {\n                    border-left-color: transparent;\n                    border-right-color: transparent;\n                    margin-left: -7px;\n                }\n            }\n        }\n\n        &--top {\n            .eds-popover__arrow {\n                border-bottom-width: 0;\n                bottom: -7px;\n\n                &-inner {\n                    border-bottom-width: 0;\n                    bottom: 2px;\n                }\n            }\n        }\n\n        &--bottom {\n            .eds-popover__arrow {\n                border-top-width: 0;\n                top: -7px;\n\n                &-inner {\n                    border-top-width: 0;\n                    top: 1px;\n                }\n            }\n        }\n\n        &--left,\n        &--right {\n            .eds-popover__arrow {\n                border-bottom-color: transparent;\n                border-top-color: transparent;\n                top: 50%;\n                transform: translateY(-8px);\n\n                &-inner {\n                    border-bottom-color: transparent;\n                    border-top-color: transparent;\n                    top: -7px;\n                }\n            }\n        }\n\n        &--left {\n            .eds-popover__arrow {\n                border-right-width: 0;\n                right: -7px;\n\n                &-inner {\n                    border-right-width: 0;\n                    right: 2px;\n                }\n            }\n        }\n\n        &--right {\n            .eds-popover__arrow {\n                border-left-width: 0;\n                left: -7px;\n\n                &-inner {\n                    border-left-width: 0;\n                    border-right-color: var(--eds-c-surface-elevation);\n                    left: 2px;\n                }\n            }\n        }\n    }\n\n    // POPOVER COMPONENT STYLES (applied on CDK overlay panel)\n    .eds-popover {\n        display: flex;\n        width: 25rem;\n\n        &--has-custom-width {\n            width: auto !important;\n        }\n\n        &--size-s {\n            max-width: 12rem;\n            width: 12rem;\n        }\n\n        &--size-m {\n            max-width: 25rem;\n            width: 25rem;\n        }\n\n        &--size-l {\n            max-width: 35rem;\n            width: 35rem;\n        }\n\n        &--size-xl {\n            max-width: 50rem;\n            width: 50rem;\n        }\n\n        &--size-2xl {\n            max-width: 75rem;\n            width: 75rem;\n        }\n\n        &--size-auto {\n            max-width: none;\n            width: auto;\n        }\n\n        &__container {\n            background-color: var(--eds-c-surface-elevation);\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-1);\n            width: 100%;\n        }\n\n        &__header {\n            align-items: center;\n            display: flex;\n            justify-content: space-between;\n            padding: var(--eds-sp-s) var(--eds-sp-s) 0 var(--eds-sp-s);\n\n            &--close-only {\n                justify-content: flex-end;\n            }\n\n            &-title {\n                font: var(--eds-f-label-m-semibold);\n            }\n        }\n\n        &__content {\n            padding: var(--eds-sp-s);\n\n            &--no-padding {\n                padding: 0;\n            }\n        }\n    }\n}\n",
                     "styleUrl": "./eds-popover.scss"
                 }
             ],
@@ -54275,7 +54275,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        position: relative;\n        width: 100%;\n\n        .eds-progress-bar__header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: var(--eds-sp-xs);\n\n            &-label {\n                font: var(--eds-f-label-s-semi-bold);\n                color: var(--eds-c-foreground);\n            }\n\n            &-status {\n                display: flex;\n                align-items: center;\n            }\n        }\n\n        .eds-progress-bar__track {\n            background-color: var(--eds-c-surface-elevation-sunken);\n            border-radius: var(--eds-br-xs);\n            height: var(--eds-sp-2xs);\n            position: relative;\n            overflow: hidden;\n            width: 100%;\n        }\n\n        .eds-progress-bar__indicator {\n            background-color: var(--eds-c-surface-primary);\n            border-radius: var(--eds-br-xs);\n            height: 100%;\n            transition: width 0.25s ease;\n        }\n\n        // Size variants\n        &.eds-progress-bar--size-xs {\n            .eds-progress-bar__track {\n                height: var(--eds-sp-3xs);\n            }\n        }\n\n        &.eds-progress-bar--size-s {\n            .eds-progress-bar__track {\n                height: var(--eds-sp-2xs);\n            }\n        }\n\n        &.eds-progress-bar--size-m {\n            .eds-progress-bar__track {\n                height: var(--eds-sp-xs);\n            }\n        }\n\n        &.eds-progress-bar--size-l {\n            .eds-progress-bar__track {\n                height: var(--eds-sp-s);\n            }\n        }\n\n        // Color variants\n        &.eds-progress-bar--success {\n            .eds-progress-bar__indicator {\n                background-color: var(--eds-c-surface-success);\n            }\n        }\n\n        &.eds-progress-bar--info {\n            .eds-progress-bar__indicator {\n                background-color: var(--eds-c-surface-info);\n            }\n        }\n\n        &.eds-progress-bar--warning {\n            .eds-progress-bar__indicator {\n                background-color: var(--eds-c-surface-warning);\n            }\n        }\n\n        &.eds-progress-bar--critical {\n            .eds-progress-bar__indicator {\n                background-color: var(--eds-c-surface-critical);\n            }\n        }\n\n        // Indeterminate animation\n        &.eds-progress-bar--indeterminate {\n            .eds-progress-bar__indicator {\n                width: 100% !important;\n                background-color: transparent;\n                background-image: linear-gradient(\n                    to right,\n                    transparent 0%,\n                    var(--eds-c-surface-primary) 30%,\n                    var(--eds-c-surface-primary) 60%,\n                    transparent 100%\n                );\n                background-size: 40% 100%;\n                background-repeat: no-repeat;\n                animation: eds-progress-indeterminate 1.5s infinite ease-in-out;\n            }\n\n            &.eds-progress-bar--success .eds-progress-bar__indicator {\n                background-image: linear-gradient(\n                    to right,\n                    transparent 0%,\n                    var(--eds-c-surface-success) 30%,\n                    var(--eds-c-surface-success) 60%,\n                    transparent 100%\n                );\n            }\n\n            &.eds-progress-bar--info .eds-progress-bar__indicator {\n                background-image: linear-gradient(\n                    to right,\n                    transparent 0%,\n                    var(--eds-c-surface-info) 30%,\n                    var(--eds-c-surface-info) 60%,\n                    transparent 100%\n                );\n            }\n\n            &.eds-progress-bar--warning .eds-progress-bar__indicator {\n                background-image: linear-gradient(\n                    to right,\n                    transparent 0%,\n                    var(--eds-c-surface-warning) 30%,\n                    var(--eds-c-surface-warning) 60%,\n                    transparent 100%\n                );\n            }\n\n            &.eds-progress-bar--critical .eds-progress-bar__indicator {\n                background-image: linear-gradient(\n                    to right,\n                    transparent 0%,\n                    var(--eds-c-surface-critical) 30%,\n                    var(--eds-c-surface-critical) 60%,\n                    transparent 100%\n                );\n            }\n        }\n\n        @keyframes eds-progress-indeterminate {\n            0% {\n                background-position: -40% 0;\n            }\n            100% {\n                background-position: 140% 0;\n            }\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        position: relative;\n        width: 100%;\n\n        .eds-progress-bar__header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: var(--eds-sp-xs);\n\n            &-label {\n                font: var(--eds-f-label-s-semibold);\n                color: var(--eds-c-foreground);\n            }\n\n            &-status {\n                display: flex;\n                align-items: center;\n            }\n        }\n\n        .eds-progress-bar__track {\n            background-color: var(--eds-c-surface-elevation-sunken);\n            border-radius: var(--eds-br-xs);\n            height: var(--eds-sp-2xs);\n            position: relative;\n            overflow: hidden;\n            width: 100%;\n        }\n\n        .eds-progress-bar__indicator {\n            background-color: var(--eds-c-surface-primary);\n            border-radius: var(--eds-br-xs);\n            height: 100%;\n            transition: width 0.25s ease;\n        }\n\n        // Size variants\n        &.eds-progress-bar--size-xs {\n            .eds-progress-bar__track {\n                height: var(--eds-sp-3xs);\n            }\n        }\n\n        &.eds-progress-bar--size-s {\n            .eds-progress-bar__track {\n                height: var(--eds-sp-2xs);\n            }\n        }\n\n        &.eds-progress-bar--size-m {\n            .eds-progress-bar__track {\n                height: var(--eds-sp-xs);\n            }\n        }\n\n        &.eds-progress-bar--size-l {\n            .eds-progress-bar__track {\n                height: var(--eds-sp-s);\n            }\n        }\n\n        // Color variants\n        &.eds-progress-bar--success {\n            .eds-progress-bar__indicator {\n                background-color: var(--eds-c-surface-success);\n            }\n        }\n\n        &.eds-progress-bar--info {\n            .eds-progress-bar__indicator {\n                background-color: var(--eds-c-surface-info);\n            }\n        }\n\n        &.eds-progress-bar--warning {\n            .eds-progress-bar__indicator {\n                background-color: var(--eds-c-surface-warning);\n            }\n        }\n\n        &.eds-progress-bar--critical {\n            .eds-progress-bar__indicator {\n                background-color: var(--eds-c-surface-critical);\n            }\n        }\n\n        // Indeterminate animation\n        &.eds-progress-bar--indeterminate {\n            .eds-progress-bar__indicator {\n                width: 100% !important;\n                background-color: transparent;\n                background-image: linear-gradient(\n                    to right,\n                    transparent 0%,\n                    var(--eds-c-surface-primary) 30%,\n                    var(--eds-c-surface-primary) 60%,\n                    transparent 100%\n                );\n                background-size: 40% 100%;\n                background-repeat: no-repeat;\n                animation: eds-progress-indeterminate 1.5s infinite ease-in-out;\n            }\n\n            &.eds-progress-bar--success .eds-progress-bar__indicator {\n                background-image: linear-gradient(\n                    to right,\n                    transparent 0%,\n                    var(--eds-c-surface-success) 30%,\n                    var(--eds-c-surface-success) 60%,\n                    transparent 100%\n                );\n            }\n\n            &.eds-progress-bar--info .eds-progress-bar__indicator {\n                background-image: linear-gradient(\n                    to right,\n                    transparent 0%,\n                    var(--eds-c-surface-info) 30%,\n                    var(--eds-c-surface-info) 60%,\n                    transparent 100%\n                );\n            }\n\n            &.eds-progress-bar--warning .eds-progress-bar__indicator {\n                background-image: linear-gradient(\n                    to right,\n                    transparent 0%,\n                    var(--eds-c-surface-warning) 30%,\n                    var(--eds-c-surface-warning) 60%,\n                    transparent 100%\n                );\n            }\n\n            &.eds-progress-bar--critical .eds-progress-bar__indicator {\n                background-image: linear-gradient(\n                    to right,\n                    transparent 0%,\n                    var(--eds-c-surface-critical) 30%,\n                    var(--eds-c-surface-critical) 60%,\n                    transparent 100%\n                );\n            }\n        }\n\n        @keyframes eds-progress-indeterminate {\n            0% {\n                background-position: -40% 0;\n            }\n            100% {\n                background-position: 140% 0;\n            }\n        }\n    }\n}\n",
                     "styleUrl": "./eds-progress-bar.scss"
                 }
             ],
@@ -54848,7 +54848,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host.eds-progress-circle {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        width: 6rem;\n        height: 6rem;\n\n        // Color variants — private custom properties\n        --_track-color: var(--eds-c-surface-neutral-subtler);\n        --_progress-color: var(--eds-c-border-info);\n        --_label-color: var(--eds-c-foreground-default);\n\n        &.eds-progress-circle--info {\n            --_progress-color: var(--eds-c-border-info);\n        }\n\n        &.eds-progress-circle--success {\n            --_progress-color: var(--eds-c-border-success);\n        }\n\n        &.eds-progress-circle--warning {\n            --_progress-color: var(--eds-c-border-warning);\n        }\n\n        &.eds-progress-circle--critical {\n            --_progress-color: var(--eds-c-border-critical);\n        }\n\n        // Size variants\n        &.eds-progress-circle--size-s {\n            width: 4rem;\n            height: 4rem;\n\n            .eds-progress-circle__label {\n                font: var(--eds-f-label-xs);\n            }\n        }\n\n        &.eds-progress-circle--size-m {\n            width: 6rem;\n            height: 6rem;\n\n            .eds-progress-circle__label {\n                font: var(--eds-f-label-m-semi-bold);\n            }\n        }\n\n        &.eds-progress-circle--size-l {\n            width: 9rem;\n            height: 9rem;\n\n            .eds-progress-circle__label {\n                font: var(--eds-f-label-l-semi-bold);\n            }\n        }\n    }\n\n    :host.eds-progress-circle {\n        .eds-progress-circle__svg {\n            width: 100%;\n            height: 100%;\n            transform: rotate(-90deg);\n        }\n\n        .eds-progress-circle__track {\n            stroke: var(--_track-color);\n        }\n\n        .eds-progress-circle__progress {\n            stroke: var(--_progress-color);\n            transition: stroke-dashoffset 0.3s ease;\n        }\n\n        .eds-progress-circle__label {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            font: var(--eds-f-label-m-semi-bold);\n            color: var(--_label-color);\n            white-space: nowrap;\n            user-select: none;\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host.eds-progress-circle {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        width: 6rem;\n        height: 6rem;\n\n        // Color variants — private custom properties\n        --_track-color: var(--eds-c-surface-neutral-subtler);\n        --_progress-color: var(--eds-c-border-info);\n        --_label-color: var(--eds-c-foreground-default);\n\n        &.eds-progress-circle--info {\n            --_progress-color: var(--eds-c-border-info);\n        }\n\n        &.eds-progress-circle--success {\n            --_progress-color: var(--eds-c-border-success);\n        }\n\n        &.eds-progress-circle--warning {\n            --_progress-color: var(--eds-c-border-warning);\n        }\n\n        &.eds-progress-circle--critical {\n            --_progress-color: var(--eds-c-border-critical);\n        }\n\n        // Size variants\n        &.eds-progress-circle--size-s {\n            width: 4rem;\n            height: 4rem;\n\n            .eds-progress-circle__label {\n                font: var(--eds-f-label-xs);\n            }\n        }\n\n        &.eds-progress-circle--size-m {\n            width: 6rem;\n            height: 6rem;\n\n            .eds-progress-circle__label {\n                font: var(--eds-f-label-m-semibold);\n            }\n        }\n\n        &.eds-progress-circle--size-l {\n            width: 9rem;\n            height: 9rem;\n\n            .eds-progress-circle__label {\n                font: var(--eds-f-label-l-semibold);\n            }\n        }\n    }\n\n    :host.eds-progress-circle {\n        .eds-progress-circle__svg {\n            width: 100%;\n            height: 100%;\n            transform: rotate(-90deg);\n        }\n\n        .eds-progress-circle__track {\n            stroke: var(--_track-color);\n        }\n\n        .eds-progress-circle__progress {\n            stroke: var(--_progress-color);\n            transition: stroke-dashoffset 0.3s ease;\n        }\n\n        .eds-progress-circle__label {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            font: var(--eds-f-label-m-semibold);\n            color: var(--_label-color);\n            white-space: nowrap;\n            user-select: none;\n        }\n    }\n}\n",
                     "styleUrl": "./eds-progress-circle.scss"
                 }
             ],
@@ -55917,7 +55917,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host.eds-select {\n        @include base.eds-input();\n        @include base.eds-ellipsis();\n        color: var(--eds-c-foreground-default);\n        overflow-y: auto;\n\n        &[hidden],\n        &--readonly {\n            display: none;\n        }\n\n        &[readonly][multiple=\"true\"] option:checked {\n            background: none;\n        }\n\n        &[readonly][multiple=\"true\"] :not(option:checked) {\n            display: none;\n        }\n\n        &[multiple=\"true\"],\n        &[size]:not([size=\"1\"]):not([size=\"0\"]) {\n            background-image: none;\n            height: auto;\n            overflow: auto;\n            padding: var(--eds-sp-3xs) 0;\n        }\n\n        // Placeholder color\n        &--placeholder {\n            color: var(--eds-c-foreground-subtler);\n        }\n\n        optgroup {\n            font: var(--eds-f-label-m-semi-bold);\n        }\n\n        optgroup,\n        option {\n            appearance: none;\n            color: var(--eds-c-foreground-default);\n            display: block;\n            padding: var(--eds-sp-3xs);\n            white-space: pre;\n\n            &:disabled {\n                color: var(--eds-c-foreground-subtler);\n            }\n\n            &.eds-select__placeholder {\n                color: var(--eds-c-foreground-subtler) !important;\n            }\n        }\n    }\n\n    // Harmonized dropdown selector (same style & icon for all browsers)\n    :host.eds-select:not([readonly]):not([multiple]),\n    :host.eds-select[size=\"1\"],\n    :host.eds-select[size=\"0\"] {\n        appearance: none;\n        background-color: var(--eds-c-surface-elevation);\n        // caret-down icon (EDS Phosphor regular-flat)\n        background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23404040'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E\");\n        background-position: calc(100% - var(--eds-sp-s)) center;\n        background-repeat: no-repeat;\n        background-size: var(--eds-sp-l);\n        padding-right: var(--eds-sp-3xl);\n    }\n}\n\n\n// Readonly display — plain native input styled to match\n.eds-select__readonly-display {\n    font: var(--eds-f-paragraph-m);\n    background-color: transparent;\n    border: none;\n    box-shadow: none;\n    color: var(--eds-c-foreground-default);\n    padding: var(--eds-sp-xs) 0;\n    width: 100%;\n    pointer-events: none;\n    outline: none;\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host.eds-select {\n        @include base.eds-input();\n        @include base.eds-ellipsis();\n        color: var(--eds-c-foreground-default);\n        overflow-y: auto;\n\n        &[hidden],\n        &--readonly {\n            display: none;\n        }\n\n        &[readonly][multiple=\"true\"] option:checked {\n            background: none;\n        }\n\n        &[readonly][multiple=\"true\"] :not(option:checked) {\n            display: none;\n        }\n\n        &[multiple=\"true\"],\n        &[size]:not([size=\"1\"]):not([size=\"0\"]) {\n            background-image: none;\n            height: auto;\n            overflow: auto;\n            padding: var(--eds-sp-3xs) 0;\n        }\n\n        // Placeholder color\n        &--placeholder {\n            color: var(--eds-c-foreground-subtler);\n        }\n\n        optgroup {\n            font: var(--eds-f-label-m-semibold);\n        }\n\n        optgroup,\n        option {\n            appearance: none;\n            color: var(--eds-c-foreground-default);\n            display: block;\n            padding: var(--eds-sp-3xs);\n            white-space: pre;\n\n            &:disabled {\n                color: var(--eds-c-foreground-subtler);\n            }\n\n            &.eds-select__placeholder {\n                color: var(--eds-c-foreground-subtler) !important;\n            }\n        }\n    }\n\n    // Harmonized dropdown selector (same style & icon for all browsers)\n    :host.eds-select:not([readonly]):not([multiple]),\n    :host.eds-select[size=\"1\"],\n    :host.eds-select[size=\"0\"] {\n        appearance: none;\n        background-color: var(--eds-c-surface-elevation);\n        // caret-down icon (EDS Phosphor regular-flat)\n        background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23404040'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E\");\n        background-position: calc(100% - var(--eds-sp-s)) center;\n        background-repeat: no-repeat;\n        background-size: var(--eds-sp-l);\n        padding-right: var(--eds-sp-3xl);\n    }\n}\n\n\n// Readonly display — plain native input styled to match\n.eds-select__readonly-display {\n    font: var(--eds-f-paragraph-m);\n    background-color: transparent;\n    border: none;\n    box-shadow: none;\n    color: var(--eds-c-foreground-default);\n    padding: var(--eds-sp-xs) 0;\n    width: 100%;\n    pointer-events: none;\n    outline: none;\n}\n",
                     "styleUrl": "./eds-select.scss"
                 }
             ],
@@ -57381,7 +57381,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: var(--eds-sp-m) var(--eds-sp-l);\n        border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n        min-height: var(--eds-si-7xl);\n        white-space: nowrap;\n\n        .sidebar-brand {\n            font: var(--eds-f-label-m-semi-bold);\n            color: var(--eds-c-foreground-primary);\n        }\n\n        .sidebar-close-btn {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: var(--eds-f-s-xl);\n            width: var(--eds-is-l);\n            height: var(--eds-is-l);\n            border: none;\n            background: none;\n            border-radius: var(--eds-br-s);\n            cursor: pointer;\n            color: var(--eds-c-foreground);\n\n            &:hover {\n                background: var(--eds-c-surface-elevation-sunken);\n            }\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: var(--eds-sp-m) var(--eds-sp-l);\n        border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n        min-height: var(--eds-si-7xl);\n        white-space: nowrap;\n\n        .sidebar-brand {\n            font: var(--eds-f-label-m-semibold);\n            color: var(--eds-c-foreground-primary);\n        }\n\n        .sidebar-close-btn {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: var(--eds-f-s-xl);\n            width: var(--eds-is-l);\n            height: var(--eds-is-l);\n            border: none;\n            background: none;\n            border-radius: var(--eds-br-s);\n            cursor: pointer;\n            color: var(--eds-c-foreground);\n\n            &:hover {\n                background: var(--eds-c-surface-elevation-sunken);\n            }\n        }\n    }\n}\n",
                     "styleUrl": "./eds-shell-sidebar-header.scss"
                 }
             ],
@@ -57693,7 +57693,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        gap: var(--eds-sp-4xs);\n        min-width: 0;\n\n        .app-name {\n            font: var(--eds-f-label-m-semi-bold);\n            color: inherit;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .app-subtitle {\n            font: var(--eds-f-microcopy-xs);\n            opacity: 0.8;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        gap: var(--eds-sp-4xs);\n        min-width: 0;\n\n        .app-name {\n            font: var(--eds-f-label-m-semibold);\n            color: inherit;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .app-subtitle {\n            font: var(--eds-f-microcopy-xs);\n            opacity: 0.8;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n    }\n}\n",
                     "styleUrl": "./eds-shell-toolbar-app.scss"
                 }
             ],
@@ -62548,7 +62548,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    // === table.scss ===\n    .eds-table {\n        display: block;\n        position: relative;\n        width: 100%;\n\n        .eds-table__scroll-viewport {\n            min-height: 100%;\n            width: 100%;\n        }\n\n        .eds-table__scrollable-wrapper {\n            overflow: auto;\n        }\n\n        .eds-table__orderable-cols-preview,\n        .eds-table__orderable-rows-preview {\n            display: none;\n        }\n\n        tr {\n            &[edshighlighted] {\n                background-color: var(--eds-c-border-divider) !important;\n                position: relative;\n                z-index: 2;\n            }\n        }\n\n        caption {\n            text-align: start;\n            font-style: italic;\n        }\n\n        .eds-table__cell-select {\n            width: 48px;\n            text-align: center;\n            padding: var(--eds-sp-xs);\n        }\n\n        .eds-table__cell-select-checkbox-container {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .eds-table__loading-overlay {\n            position: absolute;\n            inset: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background-color: rgba(255, 255, 255, 0.7);\n            z-index: 10;\n        }\n\n        .eds-table__loading-spinner {\n            width: 32px;\n            height: 32px;\n            border: 3px solid var(--eds-c-border-divider);\n            border-top-color: var(--eds-c-border-primary);\n            border-radius: 50%;\n            animation: eds-table-spin 0.8s linear infinite;\n        }\n\n        .eds-table__skeleton-line {\n            height: 16px;\n            background: var(--eds-c-surface-hover);\n            border-radius: var(--eds-br-s);\n            // animation: eds-table-pulse 1.5s ease-in-out infinite;\n        }\n\n        .eds-table__expandable-row {\n            td {\n                background-color: var(--eds-c-surface-default);\n            }\n        }\n    }\n\n    // === table-filter.scss ===\n    .eds-table {\n        .eds-table-filter {\n            align-items: center;\n            display: flex;\n            justify-content: flex-end;\n            position: relative;\n\n            &--responsive {\n                width: 100%;\n            }\n\n            &__input {\n                padding-left: var(--eds-sp-2xl) !important;\n            }\n\n            &__icon {\n                left: var(--eds-sp-xs);\n                position: absolute;\n                top: var(--eds-sp-xs);\n            }\n        }\n    }\n\n    // === table-sortable-col.scss ===\n    .eds-table {\n        .eds-table__sortable-col {\n            cursor: pointer;\n            user-select: none;\n\n            &--disabled {\n                cursor: default;\n            }\n\n            &-multisort-index {\n                font: var(--eds-f-paragraph-xs);\n                color: var(--eds-c-foreground-subtler);\n                margin-left: var(--eds-sp-3xs);\n            }\n\n            .eds-table__sortable-col-content {\n                align-items: center;\n                display: flex;\n                vertical-align: middle;\n                white-space: nowrap;\n                justify-content: space-between;\n\n                .eds-table__sortable-col-content-label {\n                    align-items: center;\n                    display: flex;\n                    user-select: none;\n                    gap: var(--eds-sp-2xs);\n                }\n            }\n        }\n    }\n\n    // === table.states.scss ===\n    .eds-table {\n        .eds-table__row--selected {\n            td {\n                background-color: var(--eds-c-surface-selected);\n            }\n        }\n\n        .eds-table__row--selectable {\n            cursor: pointer;\n        }\n\n        .eds-table__col--sticky {\n            position: sticky;\n            z-index: 1;\n            background-color: inherit;\n        }\n\n        .eds-table__col--sticky-shadowed-first {\n            box-shadow: inset -5px 0 8px -8px rgba(0, 0, 0, 0.2);\n        }\n\n        .eds-table__col--sticky-shadowed-last {\n            box-shadow: inset 5px 0 8px -8px rgba(0, 0, 0, 0.2);\n        }\n    }\n\n    .eds-table--virtual-scroll {\n        width: 100%;\n        height: 100%;\n    }\n\n    .eds-table--fixed-layout {\n        table-layout: fixed;\n        width: 100%;\n    }\n\n    .eds-table--bordered {\n        td,\n        th {\n            border: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n        }\n    }\n\n    .eds-table--compact {\n        thead {\n            tr {\n                th {\n                    padding: var(--eds-sp-3xs) var(--eds-sp-s);\n                }\n            }\n        }\n\n        tbody {\n            tr {\n                height: calc(2 * var(--eds-sp-m));\n\n                td {\n                    padding: 0 var(--eds-sp-s);\n                }\n            }\n        }\n    }\n\n    .eds-table--flat {\n        thead {\n            tr {\n                th {\n                    background-color: transparent;\n                    border: none;\n                }\n            }\n        }\n\n        tbody {\n            tr {\n                border: none;\n\n                td {\n                    background-color: transparent;\n                    border: none;\n                }\n\n                &:hover td {\n                    background-color: var(--eds-c-surface-hover);\n                }\n            }\n        }\n\n        tfoot {\n            tr {\n                border: none;\n\n                td {\n                    background-color: transparent;\n                    border: none;\n                }\n            }\n        }\n\n        tr {\n            border: none;\n        }\n    }\n\n    .eds-table--loading {\n        pointer-events: none;\n        opacity: 0.6;\n    }\n\n    .eds-table--cols-orderable {\n        .cdk-drag-placeholder {\n            background-color: var(--eds-c-surface-elevation);\n            color: var(--eds-c-foreground-default);\n            cursor: move;\n            opacity: 1;\n        }\n\n        tr {\n            display: table-row;\n\n            th.cdk-drag:not(.cdk-drag-disabled) {\n                cursor: move;\n            }\n        }\n    }\n\n    .eds-table--sticky {\n        max-width: none !important;\n\n        tbody {\n            tr:nth-of-type(odd) {\n                td {\n                    background-color: var(--eds-c-surface-default);\n                }\n                &:hover td {\n                    background-color: var(--eds-c-surface-hover);\n                }\n            }\n\n            tr:nth-of-type(even) {\n                td {\n                    background-color: var(--eds-c-surface-elevation);\n                }\n                &:hover td {\n                    background-color: var(--eds-c-surface-hover);\n                }\n            }\n        }\n    }\n\n    .eds-table--sticky-header {\n        thead {\n            position: sticky;\n            top: 0;\n            z-index: 8;\n\n            th,\n            td {\n                background-color: inherit;\n            }\n        }\n\n        &.eds-table--sticky-cols {\n            thead {\n                z-index: 9;\n            }\n        }\n    }\n\n    .eds-table--sticky-footer {\n        tfoot {\n            position: sticky;\n            bottom: -1px;\n            z-index: 8;\n\n            tr {\n                td {\n                    background-color: inherit;\n                }\n            }\n        }\n    }\n\n    .eds-table--sticky-cols {\n        .eds-table__col--sticky {\n            position: sticky;\n            z-index: 1;\n        }\n\n        th, tbody td, tfoot td {\n            &.eds-table__col--sticky {\n                &.eds-table__col--sticky-shadowed-first {\n                    box-shadow: inset -5px 0 8px -8px rgba(0, 0, 0, 0.2);\n                }\n\n                &.eds-table__col--sticky-shadowed-last {\n                    box-shadow: inset 5px 0 8px -8px rgba(0, 0, 0, 0.2);\n                }\n            }\n        }\n    }\n\n    // === table.mq.scss ===\n    @include base.media(base.$eds-bkp-mobile) {\n        .eds-table--responsive {\n            width: 100% !important;\n\n            thead,\n            tbody,\n            tfoot,\n            th,\n            td,\n            tr {\n                display: block;\n            }\n\n            thead tr {\n                left: -9999px;\n                position: absolute;\n                top: -9999px;\n            }\n\n            tr {\n                height: auto;\n            }\n\n            td {\n                border: none;\n                border-bottom: var(--eds-bw-s) solid var(--eds-c-border-divider);\n                padding-left: 50%;\n                position: relative;\n                text-align: left !important;\n                left: unset !important;\n                right: unset !important;\n\n                &::before {\n                    color: var(--eds-c-foreground-subtler);\n                    content: attr(data-col-label);\n                    left: var(--eds-sp-xs);\n                    padding-right: var(--eds-sp-xs);\n                    position: absolute;\n                    width: 45%;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                    font: var(--eds-f-label-m-semi-bold);\n                }\n            }\n\n            tfoot {\n                tr td {\n                    &:empty {\n                        display: none !important;\n                    }\n                }\n            }\n\n            .actionsColumn,\n            .actions-column {\n                justify-content: flex-start;\n                text-align: left;\n                width: 100%;\n            }\n        }\n\n        // Sticky table mobile reset\n        .eds-table {\n            .eds-table__sticky-container {\n                height: auto;\n                width: auto !important;\n            }\n        }\n\n        .eds-table--sticky-cols {\n            th,\n            td {\n                width: auto;\n                z-index: auto;\n\n                .eds-table__col--sticky {\n                    width: auto;\n                    z-index: auto;\n\n                    &.eds-table__col--sticky-shadowed-first,\n                    &.eds-table__col--sticky-shadowed-last {\n                        box-shadow: none !important;\n                    }\n                }\n            }\n\n            tfoot {\n                tr td {\n                    &:empty {\n                        display: none !important;\n                    }\n                }\n            }\n        }\n    }\n\n    @keyframes eds-table-spin {\n        to {\n            transform: rotate(360deg);\n        }\n    }\n\n    @keyframes eds-table-pulse {\n        0%,\n        100% {\n            opacity: 1;\n        }\n        50% {\n            opacity: 0.5;\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    // === table.scss ===\n    .eds-table {\n        display: block;\n        position: relative;\n        width: 100%;\n\n        .eds-table__scroll-viewport {\n            min-height: 100%;\n            width: 100%;\n        }\n\n        .eds-table__scrollable-wrapper {\n            overflow: auto;\n        }\n\n        .eds-table__orderable-cols-preview,\n        .eds-table__orderable-rows-preview {\n            display: none;\n        }\n\n        tr {\n            &[edshighlighted] {\n                background-color: var(--eds-c-border-divider) !important;\n                position: relative;\n                z-index: 2;\n            }\n        }\n\n        caption {\n            text-align: start;\n            font-style: italic;\n        }\n\n        .eds-table__cell-select {\n            width: 48px;\n            text-align: center;\n            padding: var(--eds-sp-xs);\n        }\n\n        .eds-table__cell-select-checkbox-container {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .eds-table__loading-overlay {\n            position: absolute;\n            inset: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background-color: rgba(255, 255, 255, 0.7);\n            z-index: 10;\n        }\n\n        .eds-table__loading-spinner {\n            width: 32px;\n            height: 32px;\n            border: 3px solid var(--eds-c-border-divider);\n            border-top-color: var(--eds-c-border-primary);\n            border-radius: 50%;\n            animation: eds-table-spin 0.8s linear infinite;\n        }\n\n        .eds-table__skeleton-line {\n            height: 16px;\n            background: var(--eds-c-surface-hover);\n            border-radius: var(--eds-br-s);\n            // animation: eds-table-pulse 1.5s ease-in-out infinite;\n        }\n\n        .eds-table__expandable-row {\n            td {\n                background-color: var(--eds-c-surface-default);\n            }\n        }\n    }\n\n    // === table-filter.scss ===\n    .eds-table {\n        .eds-table-filter {\n            align-items: center;\n            display: flex;\n            justify-content: flex-end;\n            position: relative;\n\n            &--responsive {\n                width: 100%;\n            }\n\n            &__input {\n                padding-left: var(--eds-sp-2xl) !important;\n            }\n\n            &__icon {\n                left: var(--eds-sp-xs);\n                position: absolute;\n                top: var(--eds-sp-xs);\n            }\n        }\n    }\n\n    // === table-sortable-col.scss ===\n    .eds-table {\n        .eds-table__sortable-col {\n            cursor: pointer;\n            user-select: none;\n\n            &--disabled {\n                cursor: default;\n            }\n\n            &-multisort-index {\n                font: var(--eds-f-paragraph-xs);\n                color: var(--eds-c-foreground-subtler);\n                margin-left: var(--eds-sp-3xs);\n            }\n\n            .eds-table__sortable-col-content {\n                align-items: center;\n                display: flex;\n                vertical-align: middle;\n                white-space: nowrap;\n                justify-content: space-between;\n\n                .eds-table__sortable-col-content-label {\n                    align-items: center;\n                    display: flex;\n                    user-select: none;\n                    gap: var(--eds-sp-2xs);\n                }\n            }\n        }\n    }\n\n    // === table.states.scss ===\n    .eds-table {\n        .eds-table__row--selected {\n            td {\n                background-color: var(--eds-c-surface-selected);\n            }\n        }\n\n        .eds-table__row--selectable {\n            cursor: pointer;\n        }\n\n        .eds-table__col--sticky {\n            position: sticky;\n            z-index: 1;\n            background-color: inherit;\n        }\n\n        .eds-table__col--sticky-shadowed-first {\n            box-shadow: inset -5px 0 8px -8px rgba(0, 0, 0, 0.2);\n        }\n\n        .eds-table__col--sticky-shadowed-last {\n            box-shadow: inset 5px 0 8px -8px rgba(0, 0, 0, 0.2);\n        }\n    }\n\n    .eds-table--virtual-scroll {\n        width: 100%;\n        height: 100%;\n    }\n\n    .eds-table--fixed-layout {\n        table-layout: fixed;\n        width: 100%;\n    }\n\n    .eds-table--bordered {\n        td,\n        th {\n            border: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n        }\n    }\n\n    .eds-table--compact {\n        thead {\n            tr {\n                th {\n                    padding: var(--eds-sp-3xs) var(--eds-sp-s);\n                }\n            }\n        }\n\n        tbody {\n            tr {\n                height: calc(2 * var(--eds-sp-m));\n\n                td {\n                    padding: 0 var(--eds-sp-s);\n                }\n            }\n        }\n    }\n\n    .eds-table--flat {\n        thead {\n            tr {\n                th {\n                    background-color: transparent;\n                    border: none;\n                }\n            }\n        }\n\n        tbody {\n            tr {\n                border: none;\n\n                td {\n                    background-color: transparent;\n                    border: none;\n                }\n\n                &:hover td {\n                    background-color: var(--eds-c-surface-hover);\n                }\n            }\n        }\n\n        tfoot {\n            tr {\n                border: none;\n\n                td {\n                    background-color: transparent;\n                    border: none;\n                }\n            }\n        }\n\n        tr {\n            border: none;\n        }\n    }\n\n    .eds-table--loading {\n        pointer-events: none;\n        opacity: 0.6;\n    }\n\n    .eds-table--cols-orderable {\n        .cdk-drag-placeholder {\n            background-color: var(--eds-c-surface-elevation);\n            color: var(--eds-c-foreground-default);\n            cursor: move;\n            opacity: 1;\n        }\n\n        tr {\n            display: table-row;\n\n            th.cdk-drag:not(.cdk-drag-disabled) {\n                cursor: move;\n            }\n        }\n    }\n\n    .eds-table--sticky {\n        max-width: none !important;\n\n        tbody {\n            tr:nth-of-type(odd) {\n                td {\n                    background-color: var(--eds-c-surface-default);\n                }\n                &:hover td {\n                    background-color: var(--eds-c-surface-hover);\n                }\n            }\n\n            tr:nth-of-type(even) {\n                td {\n                    background-color: var(--eds-c-surface-elevation);\n                }\n                &:hover td {\n                    background-color: var(--eds-c-surface-hover);\n                }\n            }\n        }\n    }\n\n    .eds-table--sticky-header {\n        thead {\n            position: sticky;\n            top: 0;\n            z-index: 8;\n\n            th,\n            td {\n                background-color: inherit;\n            }\n        }\n\n        &.eds-table--sticky-cols {\n            thead {\n                z-index: 9;\n            }\n        }\n    }\n\n    .eds-table--sticky-footer {\n        tfoot {\n            position: sticky;\n            bottom: -1px;\n            z-index: 8;\n\n            tr {\n                td {\n                    background-color: inherit;\n                }\n            }\n        }\n    }\n\n    .eds-table--sticky-cols {\n        .eds-table__col--sticky {\n            position: sticky;\n            z-index: 1;\n        }\n\n        th, tbody td, tfoot td {\n            &.eds-table__col--sticky {\n                &.eds-table__col--sticky-shadowed-first {\n                    box-shadow: inset -5px 0 8px -8px rgba(0, 0, 0, 0.2);\n                }\n\n                &.eds-table__col--sticky-shadowed-last {\n                    box-shadow: inset 5px 0 8px -8px rgba(0, 0, 0, 0.2);\n                }\n            }\n        }\n    }\n\n    // === table.mq.scss ===\n    @include base.media(base.$eds-bkp-mobile) {\n        .eds-table--responsive {\n            width: 100% !important;\n\n            thead,\n            tbody,\n            tfoot,\n            th,\n            td,\n            tr {\n                display: block;\n            }\n\n            thead tr {\n                left: -9999px;\n                position: absolute;\n                top: -9999px;\n            }\n\n            tr {\n                height: auto;\n            }\n\n            td {\n                border: none;\n                border-bottom: var(--eds-bw-s) solid var(--eds-c-border-divider);\n                padding-left: 50%;\n                position: relative;\n                text-align: left !important;\n                left: unset !important;\n                right: unset !important;\n\n                &::before {\n                    color: var(--eds-c-foreground-subtler);\n                    content: attr(data-col-label);\n                    left: var(--eds-sp-xs);\n                    padding-right: var(--eds-sp-xs);\n                    position: absolute;\n                    width: 45%;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                    font: var(--eds-f-label-m-semibold);\n                }\n            }\n\n            tfoot {\n                tr td {\n                    &:empty {\n                        display: none !important;\n                    }\n                }\n            }\n\n            .actionsColumn,\n            .actions-column {\n                justify-content: flex-start;\n                text-align: left;\n                width: 100%;\n            }\n        }\n\n        // Sticky table mobile reset\n        .eds-table {\n            .eds-table__sticky-container {\n                height: auto;\n                width: auto !important;\n            }\n        }\n\n        .eds-table--sticky-cols {\n            th,\n            td {\n                width: auto;\n                z-index: auto;\n\n                .eds-table__col--sticky {\n                    width: auto;\n                    z-index: auto;\n\n                    &.eds-table__col--sticky-shadowed-first,\n                    &.eds-table__col--sticky-shadowed-last {\n                        box-shadow: none !important;\n                    }\n                }\n            }\n\n            tfoot {\n                tr td {\n                    &:empty {\n                        display: none !important;\n                    }\n                }\n            }\n        }\n    }\n\n    @keyframes eds-table-spin {\n        to {\n            transform: rotate(360deg);\n        }\n    }\n\n    @keyframes eds-table-pulse {\n        0%,\n        100% {\n            opacity: 1;\n        }\n        50% {\n            opacity: 0.5;\n        }\n    }\n}\n",
                     "styleUrl": "./eds-table.scss"
                 }
             ],
@@ -64767,7 +64767,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    // VARS DEFS \n    // ---------\n    :host.eds-tabs {\n        // EDS tokens (not the legacy --eui-f-*, which are undefined outside the Angular app).\n        --_label-font: var(--eds-f-label-m-semi-bold);\n        --_sublabel-font: var(--eds-f-paragraph-s);   \n    }\n\n    :host.eds-tabs {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n\n        .eds-tab-item {\n            --_border-color: transparent;\n            --_color: var(--eds-c-foreground-subtler);\n            --_color-hover: var(--eds-c-foreground);\n       }\n        .eds-tab-item--active {\n            --_color: var(--eds-c-foreground);\n            --_border-color: var(--eds-c-border);\n        }\n        .eds-tab-item--disabled {\n            --_color: var(--eds-c-foreground-disabled);\n            --_icon-color: var(--eds-c-foreground-disabled);\n            --_border-color-hover: transparent;\n        }\n    }\n\n    // COLOR VARIANTS\n    :host.eds-tabs--brand {\n        .eds-tab-item {\n            --_color: var(--eds-c-foreground-inverted);\n            --_color-hover: var(--eds-c-on-surface-brand);\n        }\n        .eds-tab-item--active {\n            --_color: var(--eds-c-on-surface-brand);\n            --_border-color: var(--eds-c-on-surface-brand);\n        }\n    }\n\n    :host.eds-tabs--neutral {\n        .eds-tab-item {\n            --_color: var(--eds-c-foreground-subtler);\n            --_color-hover: var(--eds-c-foreground);\n        }\n        .eds-tab-item--active {\n            --_color: var(--eds-c-foreground);\n            --_border-color: var(--eds-c-foreground);\n        }\n    }\n\n    // NAVBAR VARIANT — no bottom border on wrapper\n    :host.eds-tabs.eds-tabs--navbar {\n        .eds-tabs-wrapper {\n            border-bottom: none;\n        }\n    }\n\n    :host.eds-tabs {\n        .eds-tabs-wrapper {\n            align-items: center;\n            border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n            display: flex;\n            overflow: hidden;\n            position: relative;\n\n            .eds-tabs-right-content-wrapper {\n                display: flex;\n                margin-left: var(--eds-sp-m);\n            }\n        }\n\n        // UL items\n        .eds-tab-items {\n            display: flex;\n            height: 100%;\n            list-style: none;\n            list-style-type: none;\n            margin: 0;\n            padding: 0;\n\n            // LI item\n            .eds-tab-item {\n                align-items: center;\n                background-color: inherit;\n                border: var(--eui-bw-none);\n                border-bottom: var(--eds-bw-s) solid transparent;\n                color: var(--_color);\n                cursor: pointer;\n                display: flex;\n                padding: var(--eds-sp-s) var(--eds-sp-m) var(--eds-sp-s) var(--eds-sp-m);\n                position: relative;\n                text-align: center;\n                gap: var(--eds-sp-2xs);\n                @include base.eds-focus-visible;\n\n                // Main container\n                ::ng-deep.eds-tab-header-wrapper {\n                    display: flex;\n                    align-items: center;\n                    gap: var(--eds-sp-s);\n                    @include base.eds-ellipsis;\n\n                    ::ng-deep.eds-tab-header-label-wrapper {\n                        display: flex;\n                        flex-direction: column;\n\n                        ::ng-deep.eds-tab-header-label {\n                            display: block;\n                            font-weight: bold;\n                            line-height: var(--eds-sp-l);\n                            color: var(--_color);\n                            font: var(--_label-font);\n                        }\n\n                        ::ng-deep.eds-tab-header-sub-label {\n                            font-weight: normal;\n                            color: var(--_color);\n                            font: var(--_sublabel-font);\n                        }\n                    }\n                }\n\n                ::ng-deep.eds-tab-header-left-content,\n                ::ng-deep.eds-tab-header-right-content {\n                    display: flex;\n                }\n\n                &--active {\n                    border-color: var(--_border-color);\n                }\n\n                &--disabled {\n                    cursor: not-allowed;\n                    pointer-events: none;\n                }\n\n                &:hover {\n                    &:not(.eds-tab-header--active) {\n                        ::ng-deep.eds-tab-header-label {\n                            color: var(--_color-hover);\n                        }\n                        ::ng-deep.eds-tab-header-sub-label {\n                            color: var(--_color-hover);\n                        }                        \n                    }\n                }\n\n            }\n        }\n\n        .eds-tabs-navigation {\n            display: flex;\n            overflow: hidden;\n            position: relative;\n            width: 100%;\n\n            .eds-tabs-navigation__left-item,\n            .eds-tabs-navigation__right-item {\n                align-self: center;\n                background-color: var(--eui-c-surface-page);\n                display: none;\n                height: 100%;\n                position: absolute;\n                z-index: 1;\n            }\n\n            .eds-tabs-navigation__left-item {\n                left: 0;\n            }\n\n            .eds-tabs-navigation__right-item {\n                right: 0;\n            }\n        }\n\n        // SCROLLING state\n        .eds-tabs-wrapper.eui-tabs-wrapper--scrolling {\n\n            // UL items\n            .eds-tab-items {\n                padding-left: var(--eui-s-5xl);\n\n                .eds-tab-item {\n                    min-width: unset;\n                    overflow: unset;\n                }\n            }\n\n            .eds-tabs-navigation__left-item,\n            .eds-tabs-navigation__right-item {\n                display: flex;\n            }\n        }\n\n        .eds-tab-body-container {\n            ::ng-deep.eds-tab__body {\n                padding: var(--eui-s-s);\n                @include base.eds-focus-visible;\n\n                &.eds-tab__body--no-padding {\n                    padding: 0;\n                }\n            }\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    // VARS DEFS \n    // ---------\n    :host.eds-tabs {\n        // EDS tokens (not the legacy --eui-f-*, which are undefined outside the Angular app).\n        --_label-font: var(--eds-f-label-m-semibold);\n        --_sublabel-font: var(--eds-f-paragraph-s);   \n    }\n\n    :host.eds-tabs {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n\n        .eds-tab-item {\n            --_border-color: transparent;\n            --_color: var(--eds-c-foreground-subtler);\n            --_color-hover: var(--eds-c-foreground);\n       }\n        .eds-tab-item--active {\n            --_color: var(--eds-c-foreground);\n            --_border-color: var(--eds-c-border);\n        }\n        .eds-tab-item--disabled {\n            --_color: var(--eds-c-foreground-disabled);\n            --_icon-color: var(--eds-c-foreground-disabled);\n            --_border-color-hover: transparent;\n        }\n    }\n\n    // COLOR VARIANTS\n    :host.eds-tabs--brand {\n        .eds-tab-item {\n            --_color: var(--eds-c-foreground-inverted);\n            --_color-hover: var(--eds-c-on-surface-brand);\n        }\n        .eds-tab-item--active {\n            --_color: var(--eds-c-on-surface-brand);\n            --_border-color: var(--eds-c-on-surface-brand);\n        }\n    }\n\n    :host.eds-tabs--neutral {\n        .eds-tab-item {\n            --_color: var(--eds-c-foreground-subtler);\n            --_color-hover: var(--eds-c-foreground);\n        }\n        .eds-tab-item--active {\n            --_color: var(--eds-c-foreground);\n            --_border-color: var(--eds-c-foreground);\n        }\n    }\n\n    // NAVBAR VARIANT — no bottom border on wrapper\n    :host.eds-tabs.eds-tabs--navbar {\n        .eds-tabs-wrapper {\n            border-bottom: none;\n        }\n    }\n\n    :host.eds-tabs {\n        .eds-tabs-wrapper {\n            align-items: center;\n            border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n            display: flex;\n            overflow: hidden;\n            position: relative;\n\n            .eds-tabs-right-content-wrapper {\n                display: flex;\n                margin-left: var(--eds-sp-m);\n            }\n        }\n\n        // UL items\n        .eds-tab-items {\n            display: flex;\n            height: 100%;\n            list-style: none;\n            list-style-type: none;\n            margin: 0;\n            padding: 0;\n\n            // LI item\n            .eds-tab-item {\n                align-items: center;\n                background-color: inherit;\n                border: var(--eui-bw-none);\n                border-bottom: var(--eds-bw-s) solid transparent;\n                color: var(--_color);\n                cursor: pointer;\n                display: flex;\n                padding: var(--eds-sp-s) var(--eds-sp-m) var(--eds-sp-s) var(--eds-sp-m);\n                position: relative;\n                text-align: center;\n                gap: var(--eds-sp-2xs);\n                @include base.eds-focus-visible;\n\n                // Main container\n                ::ng-deep.eds-tab-header-wrapper {\n                    display: flex;\n                    align-items: center;\n                    gap: var(--eds-sp-s);\n                    @include base.eds-ellipsis;\n\n                    ::ng-deep.eds-tab-header-label-wrapper {\n                        display: flex;\n                        flex-direction: column;\n\n                        ::ng-deep.eds-tab-header-label {\n                            display: block;\n                            font-weight: bold;\n                            line-height: var(--eds-sp-l);\n                            color: var(--_color);\n                            font: var(--_label-font);\n                        }\n\n                        ::ng-deep.eds-tab-header-sub-label {\n                            font-weight: normal;\n                            color: var(--_color);\n                            font: var(--_sublabel-font);\n                        }\n                    }\n                }\n\n                ::ng-deep.eds-tab-header-left-content,\n                ::ng-deep.eds-tab-header-right-content {\n                    display: flex;\n                }\n\n                &--active {\n                    border-color: var(--_border-color);\n                }\n\n                &--disabled {\n                    cursor: not-allowed;\n                    pointer-events: none;\n                }\n\n                &:hover {\n                    &:not(.eds-tab-header--active) {\n                        ::ng-deep.eds-tab-header-label {\n                            color: var(--_color-hover);\n                        }\n                        ::ng-deep.eds-tab-header-sub-label {\n                            color: var(--_color-hover);\n                        }                        \n                    }\n                }\n\n            }\n        }\n\n        .eds-tabs-navigation {\n            display: flex;\n            overflow: hidden;\n            position: relative;\n            width: 100%;\n\n            .eds-tabs-navigation__left-item,\n            .eds-tabs-navigation__right-item {\n                align-self: center;\n                background-color: var(--eui-c-surface-page);\n                display: none;\n                height: 100%;\n                position: absolute;\n                z-index: 1;\n            }\n\n            .eds-tabs-navigation__left-item {\n                left: 0;\n            }\n\n            .eds-tabs-navigation__right-item {\n                right: 0;\n            }\n        }\n\n        // SCROLLING state\n        .eds-tabs-wrapper.eui-tabs-wrapper--scrolling {\n\n            // UL items\n            .eds-tab-items {\n                padding-left: var(--eui-s-5xl);\n\n                .eds-tab-item {\n                    min-width: unset;\n                    overflow: unset;\n                }\n            }\n\n            .eds-tabs-navigation__left-item,\n            .eds-tabs-navigation__right-item {\n                display: flex;\n            }\n        }\n\n        .eds-tab-body-container {\n            ::ng-deep.eds-tab__body {\n                padding: var(--eui-s-s);\n                @include base.eds-focus-visible;\n\n                &.eds-tab__body--no-padding {\n                    padding: 0;\n                }\n            }\n        }\n    }\n}\n",
                     "styleUrl": "./eds-tabs.scss"
                 }
             ],
@@ -66195,7 +66195,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    // Color variant definitions\n    :host.eds-timeline-item--neutral {\n        --_indicator-color: var(--eds-c-foreground-subtler);\n        --_title-color: var(--eds-c-foreground-default);\n    }\n\n    :host.eds-timeline-item--info {\n        --_indicator-color: var(--eds-c-foreground-info);\n        --_title-color: var(--eds-c-foreground-info);\n    }\n\n    :host.eds-timeline-item--success {\n        --_indicator-color: var(--eds-c-foreground-success);\n        --_title-color: var(--eds-c-foreground-success);\n    }\n\n    :host.eds-timeline-item--warning {\n        --_indicator-color: var(--eds-c-foreground-warning);\n        --_title-color: var(--eds-c-foreground-warning);\n    }\n\n    :host.eds-timeline-item--critical {\n        --_indicator-color: var(--eds-c-foreground-critical);\n        --_title-color: var(--eds-c-foreground-critical);\n    }\n\n    // Component layout\n    :host {\n        // The first line height for label-m-semi-bold is ~20px.\n        // We center the dot to that first line.\n        --_dot-size: var(--eds-sp-s);\n        --_first-line-height: 1.25rem; // 20px — matches eds-f-label-m-semi-bold line-height\n\n        display: flex;\n        flex-direction: row;\n        position: relative;\n        width: 100%;\n        padding-bottom: var(--eds-sp-m);\n\n        // Left section (date/time in centered layout)\n        .left-content {\n            display: flex;\n            flex-direction: column;\n            align-items: flex-end;\n            min-width: 8rem;\n            padding-right: var(--eds-sp-s);\n        }\n\n        // Center indicator (dot + connecting line)\n        .indicator {\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            flex-shrink: 0;\n            width: var(--eds-sp-l);\n            z-index: 2;\n\n            // The dot — centered to the first line of text\n            &::after {\n                content: '';\n                width: var(--_dot-size);\n                height: var(--_dot-size);\n                border-radius: var(--eds-br-full);\n                border: var(--eds-bw-s) solid var(--_indicator-color);\n                background-color: var(--eds-c-surface-default);\n                margin-top: calc(var(--_first-line-height) / 2 - var(--_dot-size) / 2);\n                flex-shrink: 0;\n            }\n\n            // Vertical connecting line\n            &::before {\n                content: '';\n                position: absolute;\n                top: calc(var(--_first-line-height) / 2 + var(--_dot-size) / 2);\n                left: 50%;\n                transform: translateX(-50%);\n                width: var(--eds-bw-s);\n                height: calc(100% + var(--eds-sp-m) - var(--_first-line-height) / 2 - var(--_dot-size) / 2);\n                background-color: var(--eds-c-border-divider);\n            }\n\n            // Group variant (dashed line, no dot)\n            &.indicator--group {\n                &::after {\n                    display: none;\n                }\n\n                &::before {\n                    top: 0;\n                    height: calc(100% + var(--eds-sp-m));\n                    background-color: transparent;\n                    border-left: var(--eds-bw-s) dashed var(--eds-c-border-divider);\n                    width: 0;\n                    transform: none;\n                    left: calc(50% - 1px);\n                }\n            }\n        }\n\n        // Right section (content)\n        .content {\n            flex: 1;\n            padding-left: var(--eds-sp-s);\n            min-width: 0;\n\n            .title {\n                font: var(--eds-f-label-m-semi-bold);\n                color: var(--_title-color);\n                line-height: var(--_first-line-height);\n            }\n\n            .subtitle {\n                font: var(--eds-f-paragraph-s);\n                color: var(--eds-c-foreground-subtler);\n                margin-top: var(--eds-sp-4xs);\n            }\n\n            .date {\n                font: var(--eds-f-label-s-semi-bold);\n                color: var(--eds-c-foreground-default);\n                margin-top: var(--eds-sp-2xs);\n            }\n\n            .time {\n                font: var(--eds-f-paragraph-xs);\n                color: var(--eds-c-foreground-subtler);\n                margin-top: var(--eds-sp-4xs);\n            }\n        }\n\n        .date {\n            font: var(--eds-f-label-s-semi-bold);\n            color: var(--eds-c-foreground-default);\n            line-height: var(--_first-line-height);\n        }\n\n        .time {\n            font: var(--eds-f-paragraph-xs);\n            color: var(--eds-c-foreground-subtler);\n            margin-top: var(--eds-sp-4xs);\n        }\n\n        // Hide connector line for the last item\n        &:last-child {\n            .indicator::before {\n                display: none;\n            }\n        }\n    }\n\n    // Group state\n    :host.eds-timeline-item--group {\n        padding-bottom: var(--eds-sp-xs);\n\n        .content {\n            padding-bottom: var(--eds-sp-xs);\n        }\n    }\n\n    // Left-aligned variant\n    :host.eds-timeline-item--left-aligned {\n        .indicator {\n            margin-left: 0;\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    // Color variant definitions\n    :host.eds-timeline-item--neutral {\n        --_indicator-color: var(--eds-c-foreground-subtler);\n        --_title-color: var(--eds-c-foreground-default);\n    }\n\n    :host.eds-timeline-item--info {\n        --_indicator-color: var(--eds-c-foreground-info);\n        --_title-color: var(--eds-c-foreground-info);\n    }\n\n    :host.eds-timeline-item--success {\n        --_indicator-color: var(--eds-c-foreground-success);\n        --_title-color: var(--eds-c-foreground-success);\n    }\n\n    :host.eds-timeline-item--warning {\n        --_indicator-color: var(--eds-c-foreground-warning);\n        --_title-color: var(--eds-c-foreground-warning);\n    }\n\n    :host.eds-timeline-item--critical {\n        --_indicator-color: var(--eds-c-foreground-critical);\n        --_title-color: var(--eds-c-foreground-critical);\n    }\n\n    // Component layout\n    :host {\n        // The first line height for label-m-semibold is ~20px.\n        // We center the dot to that first line.\n        --_dot-size: var(--eds-sp-s);\n        --_first-line-height: 1.25rem; // 20px — matches eds-f-label-m-semibold line-height\n\n        display: flex;\n        flex-direction: row;\n        position: relative;\n        width: 100%;\n        padding-bottom: var(--eds-sp-m);\n\n        // Left section (date/time in centered layout)\n        .left-content {\n            display: flex;\n            flex-direction: column;\n            align-items: flex-end;\n            min-width: 8rem;\n            padding-right: var(--eds-sp-s);\n        }\n\n        // Center indicator (dot + connecting line)\n        .indicator {\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            flex-shrink: 0;\n            width: var(--eds-sp-l);\n            z-index: 2;\n\n            // The dot — centered to the first line of text\n            &::after {\n                content: '';\n                width: var(--_dot-size);\n                height: var(--_dot-size);\n                border-radius: var(--eds-br-full);\n                border: var(--eds-bw-s) solid var(--_indicator-color);\n                background-color: var(--eds-c-surface-default);\n                margin-top: calc(var(--_first-line-height) / 2 - var(--_dot-size) / 2);\n                flex-shrink: 0;\n            }\n\n            // Vertical connecting line\n            &::before {\n                content: '';\n                position: absolute;\n                top: calc(var(--_first-line-height) / 2 + var(--_dot-size) / 2);\n                left: 50%;\n                transform: translateX(-50%);\n                width: var(--eds-bw-s);\n                height: calc(100% + var(--eds-sp-m) - var(--_first-line-height) / 2 - var(--_dot-size) / 2);\n                background-color: var(--eds-c-border-divider);\n            }\n\n            // Group variant (dashed line, no dot)\n            &.indicator--group {\n                &::after {\n                    display: none;\n                }\n\n                &::before {\n                    top: 0;\n                    height: calc(100% + var(--eds-sp-m));\n                    background-color: transparent;\n                    border-left: var(--eds-bw-s) dashed var(--eds-c-border-divider);\n                    width: 0;\n                    transform: none;\n                    left: calc(50% - 1px);\n                }\n            }\n        }\n\n        // Right section (content)\n        .content {\n            flex: 1;\n            padding-left: var(--eds-sp-s);\n            min-width: 0;\n\n            .title {\n                font: var(--eds-f-label-m-semibold);\n                color: var(--_title-color);\n                line-height: var(--_first-line-height);\n            }\n\n            .subtitle {\n                font: var(--eds-f-paragraph-s);\n                color: var(--eds-c-foreground-subtler);\n                margin-top: var(--eds-sp-4xs);\n            }\n\n            .date {\n                font: var(--eds-f-label-s-semibold);\n                color: var(--eds-c-foreground-default);\n                margin-top: var(--eds-sp-2xs);\n            }\n\n            .time {\n                font: var(--eds-f-paragraph-xs);\n                color: var(--eds-c-foreground-subtler);\n                margin-top: var(--eds-sp-4xs);\n            }\n        }\n\n        .date {\n            font: var(--eds-f-label-s-semibold);\n            color: var(--eds-c-foreground-default);\n            line-height: var(--_first-line-height);\n        }\n\n        .time {\n            font: var(--eds-f-paragraph-xs);\n            color: var(--eds-c-foreground-subtler);\n            margin-top: var(--eds-sp-4xs);\n        }\n\n        // Hide connector line for the last item\n        &:last-child {\n            .indicator::before {\n                display: none;\n            }\n        }\n    }\n\n    // Group state\n    :host.eds-timeline-item--group {\n        padding-bottom: var(--eds-sp-xs);\n\n        .content {\n            padding-bottom: var(--eds-sp-xs);\n        }\n    }\n\n    // Left-aligned variant\n    :host.eds-timeline-item--left-aligned {\n        .indicator {\n            margin-left: 0;\n        }\n    }\n}\n",
                     "styleUrl": "./eds-timeline-item.scss"
                 }
             ],
@@ -66836,7 +66836,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: inline-block;\n\n        .eds-timepicker {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-3xs);\n        }\n\n        .eds-timepicker__field {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: var(--eds-sp-3xs);\n        }\n\n        .eds-timepicker__input {\n            width: 44px;\n            height: var(--eds-si-xl);\n            text-align: center;\n            font: var(--eds-f-paragraph-m);\n            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n            border-radius: var(--eds-br-xs);\n            background-color: var(--eds-c-surface-elevation);\n            color: var(--eds-c-foreground-default);\n            padding: 0;\n\n            &:focus-visible {\n                outline: 2px solid var(--eds-c-focus-default, #0e47cb);\n                outline-offset: 1px;\n            }\n\n            &:disabled {\n                opacity: var(--eds-op-50);\n                pointer-events: none;\n            }\n        }\n\n        .eds-timepicker__btn {\n            background: none;\n            border: none;\n            cursor: pointer;\n            font-size: 10px;\n            line-height: 1;\n            padding: var(--eds-sp-3xs);\n            border-radius: var(--eds-br-xs);\n            color: var(--eds-c-foreground-subtle);\n\n            &:hover:not(:disabled) {\n                background-color: var(--eds-c-surface-neutral-subtler);\n                color: var(--eds-c-foreground-default);\n            }\n\n            &:focus-visible {\n                outline: 2px solid var(--eds-c-focus-default, #0e47cb);\n                outline-offset: 1px;\n            }\n\n            &:disabled {\n                opacity: var(--eds-op-50);\n                cursor: default;\n            }\n        }\n\n        .eds-timepicker__separator {\n            font: var(--eds-f-label-m-semi-bold);\n            color: var(--eds-c-foreground-default);\n            padding-top: var(--eds-sp-m);\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: inline-block;\n\n        .eds-timepicker {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-3xs);\n        }\n\n        .eds-timepicker__field {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: var(--eds-sp-3xs);\n        }\n\n        .eds-timepicker__input {\n            width: 44px;\n            height: var(--eds-si-xl);\n            text-align: center;\n            font: var(--eds-f-paragraph-m);\n            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n            border-radius: var(--eds-br-xs);\n            background-color: var(--eds-c-surface-elevation);\n            color: var(--eds-c-foreground-default);\n            padding: 0;\n\n            &:focus-visible {\n                outline: 2px solid var(--eds-c-focus-default, #0e47cb);\n                outline-offset: 1px;\n            }\n\n            &:disabled {\n                opacity: var(--eds-op-50);\n                pointer-events: none;\n            }\n        }\n\n        .eds-timepicker__btn {\n            background: none;\n            border: none;\n            cursor: pointer;\n            font-size: 10px;\n            line-height: 1;\n            padding: var(--eds-sp-3xs);\n            border-radius: var(--eds-br-xs);\n            color: var(--eds-c-foreground-subtle);\n\n            &:hover:not(:disabled) {\n                background-color: var(--eds-c-surface-neutral-subtler);\n                color: var(--eds-c-foreground-default);\n            }\n\n            &:focus-visible {\n                outline: 2px solid var(--eds-c-focus-default, #0e47cb);\n                outline-offset: 1px;\n            }\n\n            &:disabled {\n                opacity: var(--eds-op-50);\n                cursor: default;\n            }\n        }\n\n        .eds-timepicker__separator {\n            font: var(--eds-f-label-m-semibold);\n            color: var(--eds-c-foreground-default);\n            padding-top: var(--eds-sp-m);\n        }\n    }\n}\n",
                     "styleUrl": "./eds-timepicker.scss"
                 }
             ],
@@ -70989,7 +70989,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../../base' as base;\n\n.eui-21 {\n    :host {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--eds-sp-3xs);\n        font: var(--eds-f-paragraph-xs);\n        white-space: nowrap;\n\n        .eds-trend__value {\n            font: var(--eds-f-label-s-semi-bold);\n        }\n\n        .eds-trend__label {\n            color: var(--eds-c-foreground-subtler);\n            font: var(--eds-f-paragraph-xs);\n        }\n    }\n\n    :host.eds-trend--success {\n        color: var(--eds-c-foreground-success);\n    }\n\n    :host.eds-trend--critical {\n        color: var(--eds-c-foreground-critical);\n    }\n\n    :host.eds-trend--neutral {\n        color: var(--eds-c-foreground-subtler);\n    }\n}\n",
+                    "data": "@use '../../base' as base;\n\n.eui-21 {\n    :host {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--eds-sp-3xs);\n        font: var(--eds-f-paragraph-xs);\n        white-space: nowrap;\n\n        .eds-trend__value {\n            font: var(--eds-f-label-s-semibold);\n        }\n\n        .eds-trend__label {\n            color: var(--eds-c-foreground-subtler);\n            font: var(--eds-f-paragraph-xs);\n        }\n    }\n\n    :host.eds-trend--success {\n        color: var(--eds-c-foreground-success);\n    }\n\n    :host.eds-trend--critical {\n        color: var(--eds-c-foreground-critical);\n    }\n\n    :host.eds-trend--neutral {\n        color: var(--eds-c-foreground-subtler);\n    }\n}\n",
                     "styleUrl": "./eds-trend.scss"
                 }
             ],
@@ -71611,7 +71611,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: inline-flex;\n        position: relative;\n\n        .user-profile {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-3xs);\n            border-radius: var(--eds-br-s);\n            padding: var(--eds-sp-3xs) var(--eds-sp-xs);\n            transition: background 0.15s ease;\n\n            &.has-menu {\n                cursor: pointer;\n                @include base.eds-focus-visible-ring();\n\n                &:hover {\n                    background: var(--eds-c-surface-elevation-sunken);\n                }\n\n                &.in-toolbar:hover {\n                    background: var(--eds-c-surface-brand--hover);\n                }\n            }\n\n            &.reverse {\n                .user-info {\n                    order: -1;\n                    text-align: right;\n                }\n            }\n        }\n\n        .user-info {\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n        }\n\n        .welcome {\n            font: var(--eds-f-microcopy-xs);\n            color: var(--eds-c-foreground-subtler);\n        }\n\n        .name {\n            font: var(--eds-f-label-m-semi-bold);\n            color: var(--eds-c-foreground);\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .sub-info {\n            font: var(--eds-f-microcopy-xs);\n            color: var(--eds-c-foreground-subtler);\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .chevron {\n            flex-shrink: 0;\n            color: var(--eds-c-foreground-subtler);\n            transition: transform 0.2s ease;\n\n            &.chevron-brand {\n                color: var(--eds-c-on-surface-brand);\n            }\n        }\n\n        .icon-only-label {\n            font: var(--eds-f-label-m-semi-bold);\n            color: var(--eds-c-foreground);\n            white-space: nowrap;\n        }\n\n        .user-profile.icon-only {\n            &.in-toolbar .icon-only-label {\n                color: var(--eds-c-on-surface-brand);\n            }\n        }\n\n        .profile-menu {\n            position: absolute;\n            top: 100%;\n            right: 0;\n            z-index: 200;\n            min-width: 220px;\n            margin-top: var(--eds-sp-3xs);\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            overflow: hidden;\n\n            &.align-left {\n                right: auto;\n                left: 0;\n            }\n        }\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: inline-flex;\n        position: relative;\n\n        .user-profile {\n            display: flex;\n            align-items: center;\n            gap: var(--eds-sp-3xs);\n            border-radius: var(--eds-br-s);\n            padding: var(--eds-sp-3xs) var(--eds-sp-xs);\n            transition: background 0.15s ease;\n\n            &.has-menu {\n                cursor: pointer;\n                @include base.eds-focus-visible-ring();\n\n                &:hover {\n                    background: var(--eds-c-surface-elevation-sunken);\n                }\n\n                &.in-toolbar:hover {\n                    background: var(--eds-c-surface-brand--hover);\n                }\n            }\n\n            &.reverse {\n                .user-info {\n                    order: -1;\n                    text-align: right;\n                }\n            }\n        }\n\n        .user-info {\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n        }\n\n        .welcome {\n            font: var(--eds-f-microcopy-xs);\n            color: var(--eds-c-foreground-subtler);\n        }\n\n        .name {\n            font: var(--eds-f-label-m-semibold);\n            color: var(--eds-c-foreground);\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .sub-info {\n            font: var(--eds-f-microcopy-xs);\n            color: var(--eds-c-foreground-subtler);\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .chevron {\n            flex-shrink: 0;\n            color: var(--eds-c-foreground-subtler);\n            transition: transform 0.2s ease;\n\n            &.chevron-brand {\n                color: var(--eds-c-on-surface-brand);\n            }\n        }\n\n        .icon-only-label {\n            font: var(--eds-f-label-m-semibold);\n            color: var(--eds-c-foreground);\n            white-space: nowrap;\n        }\n\n        .user-profile.icon-only {\n            &.in-toolbar .icon-only-label {\n                color: var(--eds-c-on-surface-brand);\n            }\n        }\n\n        .profile-menu {\n            position: absolute;\n            top: 100%;\n            right: 0;\n            z-index: 200;\n            min-width: 220px;\n            margin-top: var(--eds-sp-3xs);\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            overflow: hidden;\n\n            &.align-left {\n                right: auto;\n                left: 0;\n            }\n        }\n    }\n}\n",
                     "styleUrl": "./eds-user-profile.scss"
                 }
             ],
@@ -72227,7 +72227,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host.eds-wizard {\n        display: block;\n    }\n\n    // Steps container — horizontal flex\n    :host .eds-wizard__steps {\n        display: flex;\n        padding: var(--eds-sp-m) 0;\n    }\n\n    // Each step — flex column (indicator row + labels below)\n    :host .eds-wizard__step {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        flex: 1 1 0;\n        cursor: pointer;\n        outline: none;\n\n        &:first-child .eds-wizard__step-labels {\n            text-align: left;\n            align-items: flex-start;\n        }\n\n        &:last-child {\n            flex: 0 0 auto;\n\n            .eds-wizard__step-connector {\n                display: none;\n            }\n\n            .eds-wizard__step-labels {\n                text-align: right;\n                align-items: flex-end;\n            }\n        }\n\n        &:focus-visible .eds-wizard__step-circle {\n            @include base.eds-focus-visible-ring-rounded();\n        }\n    }\n\n    // Indicator row — circle + connector on the same line\n    :host .eds-wizard__step-indicator {\n        display: flex;\n        align-items: center;\n        width: 100%;\n    }\n\n    // The circle\n    :host .eds-wizard__step-circle {\n        --_circle-size: 2rem;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        width: var(--_circle-size);\n        height: var(--_circle-size);\n        border-radius: var(--eds-br-full);\n        border: 2px solid var(--eds-c-border-neutral);\n        background-color: var(--eds-c-surface-default);\n        font: var(--eds-f-label-m-semi-bold);\n        color: var(--eds-c-foreground-subtler);\n        transition: background-color 150ms, border-color 150ms, color 150ms;\n    }\n\n    // Step number text\n    :host .eds-wizard__step-number {\n        font: var(--eds-f-label-m-semi-bold);\n        line-height: 1;\n    }\n\n    // Connector line — grows to fill space between circles\n    :host .eds-wizard__step-connector {\n        flex: 1 1 0;\n        height: 2px;\n        background-color: var(--eds-c-border-divider);\n        margin: 0 var(--eds-sp-2xs);\n        transition: background-color 150ms;\n\n        &--completed {\n            background-color: var(--eds-c-border-primary);\n        }\n    }\n\n    // Labels below the indicator\n    :host .eds-wizard__step-labels {\n        display: flex;\n        flex-direction: column;\n        margin-top: var(--eds-sp-2xs);\n        width: var(--_circle-size, 2rem);\n        text-align: center;\n        align-items: center;\n    }\n\n    :host .eds-wizard__step-label {\n        font: var(--eds-f-label-s);\n        color: var(--eds-c-foreground-subtler);\n        transition: color 150ms;\n        white-space: nowrap;\n    }\n\n    :host .eds-wizard__step-sublabel {\n        font: var(--eds-f-paragraph-s);\n        color: var(--eds-c-foreground-subtler);\n        margin-top: var(--eds-sp-3xs);\n        white-space: nowrap;\n    }\n\n    // Content panel\n    :host .eds-wizard__content {\n        margin-top: var(--eds-sp-m);\n    }\n\n    // === STATES ===\n\n    // Active step\n    :host .eds-wizard__step--active {\n        .eds-wizard__step-circle {\n            background-color: var(--eds-c-surface-primary);\n            border-color: var(--eds-c-border-primary);\n            color: var(--eds-c-on-surface-primary);\n\n            ::ng-deep .eds-icon {\n                --_on-surface: var(--eds-c-on-surface-primary);\n            }\n        }\n\n        .eds-wizard__step-label {\n            color: var(--eds-c-foreground-primary);\n        }\n\n        .eds-wizard__step-sublabel {\n            color: var(--eds-c-foreground-primary);\n        }\n    }\n\n    // Completed step\n    :host .eds-wizard__step--completed {\n        .eds-wizard__step-circle {\n            background-color: var(--eds-c-surface-primary);\n            border-color: var(--eds-c-border-primary);\n            color: var(--eds-c-on-surface-primary);\n        }\n\n        .eds-wizard__step-label {\n            color: var(--eds-c-foreground-default);\n        }\n    }\n\n    // Critical step (error)\n    :host .eds-wizard__step--critical:not(.eds-wizard__step--active) {\n        .eds-wizard__step-circle {\n            border-color: var(--eds-c-border-critical);\n            color: var(--eds-c-foreground-critical);\n        }\n    }\n\n    :host .eds-wizard__step--critical {\n        .eds-wizard__step-label {\n            color: var(--eds-c-foreground-critical);\n        }\n\n        .eds-wizard__step-sublabel {\n            color: var(--eds-c-foreground-critical);\n        }\n    }\n\n    // Warning step\n    :host .eds-wizard__step--warning:not(.eds-wizard__step--active) {\n        .eds-wizard__step-circle {\n            border-color: var(--eds-c-border-warning);\n            color: var(--eds-c-foreground-warning);\n        }\n    }\n\n    :host .eds-wizard__step--warning {\n        .eds-wizard__step-label {\n            color: var(--eds-c-foreground-warning);\n        }\n\n        .eds-wizard__step-sublabel {\n            color: var(--eds-c-foreground-warning);\n        }\n    }\n\n    // Success step\n    :host .eds-wizard__step--success {\n        .eds-wizard__step-circle {\n            border-color: var(--eds-c-border-success);\n            color: var(--eds-c-foreground-success);\n        }\n\n        .eds-wizard__step-label {\n            color: var(--eds-c-foreground-success);\n        }\n\n        .eds-wizard__step-sublabel {\n            color: var(--eds-c-foreground-success);\n        }\n    }\n\n    // Disabled step\n    :host .eds-wizard__step--disabled {\n        cursor: not-allowed;\n        opacity: 0.4;\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host.eds-wizard {\n        display: block;\n    }\n\n    // Steps container — horizontal flex\n    :host .eds-wizard__steps {\n        display: flex;\n        padding: var(--eds-sp-m) 0;\n    }\n\n    // Each step — flex column (indicator row + labels below)\n    :host .eds-wizard__step {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        flex: 1 1 0;\n        cursor: pointer;\n        outline: none;\n\n        &:first-child .eds-wizard__step-labels {\n            text-align: left;\n            align-items: flex-start;\n        }\n\n        &:last-child {\n            flex: 0 0 auto;\n\n            .eds-wizard__step-connector {\n                display: none;\n            }\n\n            .eds-wizard__step-labels {\n                text-align: right;\n                align-items: flex-end;\n            }\n        }\n\n        &:focus-visible .eds-wizard__step-circle {\n            @include base.eds-focus-visible-ring-rounded();\n        }\n    }\n\n    // Indicator row — circle + connector on the same line\n    :host .eds-wizard__step-indicator {\n        display: flex;\n        align-items: center;\n        width: 100%;\n    }\n\n    // The circle\n    :host .eds-wizard__step-circle {\n        --_circle-size: 2rem;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        width: var(--_circle-size);\n        height: var(--_circle-size);\n        border-radius: var(--eds-br-full);\n        border: 2px solid var(--eds-c-border-neutral);\n        background-color: var(--eds-c-surface-elevation);\n        font: var(--eds-f-label-m-semibold);\n        color: var(--eds-c-foreground-subtler);\n        transition: background-color 150ms, border-color 150ms, color 150ms;\n    }\n\n    // Step number text\n    :host .eds-wizard__step-number {\n        font: var(--eds-f-label-m-semibold);\n        line-height: 1;\n    }\n\n    // Connector line — grows to fill space between circles\n    :host .eds-wizard__step-connector {\n        flex: 1 1 0;\n        height: 2px;\n        background-color: var(--eds-c-border-divider);\n        margin: 0 var(--eds-sp-2xs);\n        transition: background-color 150ms;\n\n        &--completed {\n            background-color: var(--eds-c-border-primary);\n        }\n    }\n\n    // Labels below the indicator\n    :host .eds-wizard__step-labels {\n        display: flex;\n        flex-direction: column;\n        margin-top: var(--eds-sp-2xs);\n        width: var(--_circle-size, 2rem);\n        text-align: center;\n        align-items: center;\n    }\n\n    :host .eds-wizard__step-label {\n        font: var(--eds-f-label-s);\n        color: var(--eds-c-foreground-subtler);\n        transition: color 150ms;\n        white-space: nowrap;\n    }\n\n    :host .eds-wizard__step-sublabel {\n        font: var(--eds-f-paragraph-s);\n        color: var(--eds-c-foreground-subtler);\n        margin-top: var(--eds-sp-3xs);\n        white-space: nowrap;\n    }\n\n    // Content panel\n    :host .eds-wizard__content {\n        margin-top: var(--eds-sp-m);\n    }\n\n    // === STATES ===\n\n    // Active step\n    :host .eds-wizard__step--active {\n        .eds-wizard__step-circle {\n            background-color: var(--eds-c-surface-primary);\n            border-color: var(--eds-c-border-primary);\n            color: var(--eds-c-on-surface-primary);\n\n            ::ng-deep .eds-icon {\n                --_on-surface: var(--eds-c-on-surface-primary);\n            }\n        }\n\n        .eds-wizard__step-label {\n            color: var(--eds-c-foreground-primary);\n        }\n\n        .eds-wizard__step-sublabel {\n            color: var(--eds-c-foreground-primary);\n        }\n    }\n\n    // Completed step\n    :host .eds-wizard__step--completed {\n        .eds-wizard__step-circle {\n            background-color: var(--eds-c-surface-primary);\n            border-color: var(--eds-c-border-primary);\n            color: var(--eds-c-on-surface-primary);\n        }\n\n        .eds-wizard__step-label {\n            color: var(--eds-c-foreground-default);\n        }\n    }\n\n    // Critical step (error)\n    :host .eds-wizard__step--critical:not(.eds-wizard__step--active) {\n        .eds-wizard__step-circle {\n            border-color: var(--eds-c-border-critical);\n            color: var(--eds-c-foreground-critical);\n        }\n    }\n\n    :host .eds-wizard__step--critical {\n        .eds-wizard__step-label {\n            color: var(--eds-c-foreground-critical);\n        }\n\n        .eds-wizard__step-sublabel {\n            color: var(--eds-c-foreground-critical);\n        }\n    }\n\n    // Warning step\n    :host .eds-wizard__step--warning:not(.eds-wizard__step--active) {\n        .eds-wizard__step-circle {\n            border-color: var(--eds-c-border-warning);\n            color: var(--eds-c-foreground-warning);\n        }\n    }\n\n    :host .eds-wizard__step--warning {\n        .eds-wizard__step-label {\n            color: var(--eds-c-foreground-warning);\n        }\n\n        .eds-wizard__step-sublabel {\n            color: var(--eds-c-foreground-warning);\n        }\n    }\n\n    // Success step\n    :host .eds-wizard__step--success {\n        .eds-wizard__step-circle {\n            border-color: var(--eds-c-border-success);\n            color: var(--eds-c-foreground-success);\n        }\n\n        .eds-wizard__step-label {\n            color: var(--eds-c-foreground-success);\n        }\n\n        .eds-wizard__step-sublabel {\n            color: var(--eds-c-foreground-success);\n        }\n    }\n\n    // Disabled step\n    :host .eds-wizard__step--disabled {\n        cursor: not-allowed;\n        opacity: 0.4;\n    }\n}\n",
                     "styleUrl": "./eds-wizard.scss"
                 }
             ],