@eui/eds 22.0.0-alpha.30 → 22.0.0-alpha.31

package/docs/json/documentation.json

@@ -11851,10 +11851,6 @@
                         "type": "component",
                         "description": "Circular progress indicator component that displays progress as an SVG ring with customizable colors, sizes, and labels. Supports automat..."
                     },
-                    {
-                        "name": "EdsShellTopMessage",
-                        "type": "component"
-                    },
                     {
                         "name": "EdsSlider",
                         "type": "component",
@@ -28598,7 +28594,7 @@
         },
         {
             "name": "EdsDatepicker",
-            "id": "component-EdsDatepicker-940e727f076eb85335162e5ecc2ea7a930e9583dc4d0e64e9ea764804ba795c0bb53e559e4cbb063910e2568b51aed5b08b02c5e5056106a42d350940bab6674",
+            "id": "component-EdsDatepicker-a5e4ed7a2da79f9253e0d3f94d918d5713b3f463d401e7e505f987831dd3ca42f6813fa53a63fc926f605cae8fa65c2b32296d382aa57fe37ad53e6a12e5f0f2",
             "file": "packages/eds/eds-datepicker/eds-datepicker.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -28633,6 +28629,20 @@
                     "rawdescription": "\nAria label for the input.",
                     "required": false
                 },
+                {
+                    "name": "clearable",
+                    "coverageIgnore": false,
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Whether to show a clear button that resets the selected date.</p>\n",
+                    "line": 62,
+                    "rawdescription": "\nWhether to show a clear button that resets the selected date.",
+                    "required": false
+                },
                 {
                     "name": "dateFormat",
                     "coverageIgnore": false,
@@ -28685,7 +28695,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether the timepicker shows seconds.</p>\n",
-                    "line": 65,
+                    "line": 68,
                     "rawdescription": "\nWhether the timepicker shows seconds.",
                     "required": false
                 },
@@ -28713,7 +28723,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether to show a timepicker alongside the calendar.</p>\n",
-                    "line": 62,
+                    "line": 65,
                     "rawdescription": "\nWhether to show a timepicker alongside the calendar.",
                     "required": false
                 },
@@ -28783,7 +28793,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The selected date value.</p>\n",
-                    "line": 73,
+                    "line": 76,
                     "rawdescription": "\nThe selected date value.",
                     "required": false
                 }
@@ -28798,7 +28808,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Emitted when a date is selected.</p>\n",
-                    "line": 69,
+                    "line": 72,
                     "rawdescription": "\nEmitted when a date is selected.",
                     "required": false
                 },
@@ -28812,7 +28822,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The selected date value.</p>\n",
-                    "line": 73,
+                    "line": 76,
                     "rawdescription": "\nThe selected date value.",
                     "required": false
                 }
@@ -28828,7 +28838,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The date adapter (native Date or Luxon).</p>\n",
-                    "line": 92,
+                    "line": 95,
                     "rawdescription": "\nThe date adapter (native Date or Luxon)."
                 },
                 {
@@ -28841,7 +28851,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Computed calendar day grid.</p>\n",
-                    "line": 123,
+                    "line": 126,
                     "rawdescription": "\nComputed calendar day grid."
                 },
                 {
@@ -28854,7 +28864,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Computed display value for the input.</p>\n",
-                    "line": 95,
+                    "line": 98,
                     "rawdescription": "\nComputed display value for the input."
                 },
                 {
@@ -28867,7 +28877,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether the dropdown should open above the input.</p>\n",
-                    "line": 79,
+                    "line": 82,
                     "rawdescription": "\nWhether the dropdown should open above the input."
                 },
                 {
@@ -28880,7 +28890,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether the calendar dropdown is open.</p>\n",
-                    "line": 76,
+                    "line": 79,
                     "rawdescription": "\nWhether the calendar dropdown is open."
                 },
                 {
@@ -28893,7 +28903,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Computed month/year label for the header.</p>\n",
-                    "line": 115,
+                    "line": 118,
                     "rawdescription": "\nComputed month/year label for the header."
                 },
                 {
@@ -28906,7 +28916,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 278,
+                    "line": 281,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -28922,7 +28932,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Current time selection (for datetime mode).</p>\n",
-                    "line": 89,
+                    "line": 92,
                     "rawdescription": "\nCurrent time selection (for datetime mode)."
                 },
                 {
@@ -28935,7 +28945,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Current viewed month/year for the calendar.</p>\n",
-                    "line": 83,
+                    "line": 86,
                     "rawdescription": "\nCurrent viewed month/year for the calendar."
                 },
                 {
@@ -28948,7 +28958,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Weekday header labels.</p>\n",
-                    "line": 86,
+                    "line": 89,
                     "rawdescription": "\nWeekday header labels."
                 }
             ],
@@ -28969,7 +28979,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 221,
+                    "line": 224,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29004,7 +29014,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 212,
+                    "line": 215,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29039,7 +29049,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 207,
+                    "line": 210,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29065,7 +29075,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 193,
+                    "line": 196,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29078,7 +29088,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 156,
+                    "line": 159,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29100,7 +29110,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 233,
+                    "line": 236,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29126,7 +29136,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 183,
+                    "line": 186,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29148,7 +29158,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 250,
+                    "line": 253,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29174,7 +29184,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 189,
+                    "line": 192,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29206,7 +29216,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 264,
+                    "line": 267,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29252,7 +29262,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 268,
+                    "line": 271,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29288,7 +29298,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 198,
+                    "line": 201,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29323,7 +29333,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 272,
+                    "line": 275,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29349,7 +29359,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 162,
+                    "line": 165,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29371,7 +29381,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 259,
+                    "line": 262,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -29417,7 +29427,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    output,\n    model,\n    signal,\n    computed,\n    booleanAttribute,\n    inject,\n    ElementRef,\n    HostListener,\n    OnDestroy,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_INPUT_TEXT } from '@eui/eds/eds-input-text';\nimport { EDS_INPUT_BUTTON } from '@eui/eds/eds-input-button';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_TIMEPICKER } from '@eui/eds/eds-timepicker';\nimport { EDS_DATE_ADAPTER, EdsDateAdapter, EdsNativeDateAdapter } from './eds-date-adapter';\n\n@Component({\n    selector: 'eds-datepicker',\n    templateUrl: './eds-datepicker.html',\n    styleUrl: './eds-datepicker.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON, ...EDS_INPUT_TEXT, ...EDS_INPUT_BUTTON, ...EDS_BUTTON, ...EDS_TIMEPICKER],\n    host: {\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsDatepicker implements ControlValueAccessor, OnDestroy {\n    /** Data attribute for e2e testing. */\n    e2eAttr = input('eds-datepicker');\n\n    /** Input element id. */\n    inputId = input('eds-datepicker-input');\n\n    /** Placeholder text. */\n    placeholder = input('dd/mm/yyyy');\n\n    /** Aria label for the input. */\n    ariaLabel = input('Date input');\n\n    /** Date format for display (default: dd/mm/yyyy). */\n    dateFormat = input('dd/mm/yyyy');\n\n    /** Minimum selectable date. */\n    minDate = input<Date | null>(null);\n\n    /** Maximum selectable date. */\n    maxDate = input<Date | null>(null);\n\n    /** Whether the datepicker is disabled. */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /** Whether the datepicker is readonly. */\n    readonly = input(false, { transform: booleanAttribute });\n\n    /** Whether to show a timepicker alongside the calendar. */\n    isDatetimepicker = input(false, { transform: booleanAttribute });\n\n    /** Whether the timepicker shows seconds. */\n    hasSeconds = input(false, { transform: booleanAttribute });\n\n    /** Emitted when a date is selected. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    dateChange = output<any>();\n\n    /** The selected date value. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    value = model<any>(null);\n\n    /** Whether the calendar dropdown is open. */\n    isOpen = signal(false);\n\n    /** Whether the dropdown should open above the input. */\n    dropUp = signal(false);\n\n    /** Current viewed month/year for the calendar. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    viewDate = signal<any>(null);\n\n    /** Weekday header labels. */\n    weekDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];\n\n    /** Current time selection (for datetime mode). */\n    selectedTime = signal<{ hours: number; minutes: number; seconds?: number }>({ hours: 0, minutes: 0, seconds: 0 });\n\n    /** The date adapter (native Date or Luxon). */\n    adapter: EdsDateAdapter = inject(EDS_DATE_ADAPTER, { optional: true }) || new EdsNativeDateAdapter();\n\n    /** Computed display value for the input. */\n    displayValue = computed(() => {\n        const date = this.value();\n        if (!date || !this.adapter.isValid(date)) {\n            return '';\n        }\n        const dateStr = this.adapter.format(date);\n        if (this.isDatetimepicker()) {\n            const time = this.selectedTime();\n            const h = String(time.hours).padStart(2, '0');\n            const m = String(time.minutes).padStart(2, '0');\n            if (this.hasSeconds() && time.seconds !== undefined) {\n                const s = String(time.seconds).padStart(2, '0');\n                return `${dateStr} ${h}:${m}:${s}`;\n            }\n            return `${dateStr} ${h}:${m}`;\n        }\n        return dateStr;\n    });\n\n    /** Computed month/year label for the header. */\n    monthLabel = computed(() => {\n        const d = this.viewDate() || this.adapter.today();\n        const months = ['January', 'February', 'March', 'April', 'May', 'June',\n            'July', 'August', 'September', 'October', 'November', 'December'];\n        return `${months[this.adapter.getMonth(d)]} ${this.adapter.getYear(d)}`;\n    });\n\n    /** Computed calendar day grid. */\n    calendarDays = computed(() => {\n        const vd = this.viewDate() || this.adapter.today();\n        const year = this.adapter.getYear(vd);\n        const month = this.adapter.getMonth(vd);\n        const firstDay = this.adapter.create(year, month, 1);\n        // Monday-based: 1=Mon, 7=Sun\n        const startDay = this.adapter.getDayOfWeek(firstDay) - 1;\n        const daysInMonth = this.adapter.getDaysInMonth(firstDay);\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const days: (any | null)[] = [];\n\n        // Empty slots before first day\n        for (let i = 0; i < startDay; i++) {\n            days.push(null);\n        }\n        // Actual days\n        for (let i = 1; i <= daysInMonth; i++) {\n            days.push(this.adapter.create(year, month, i));\n        }\n        return days;\n    });\n\n    private _elementRef = inject(ElementRef);\n    private _ngControl = inject(NgControl, { optional: true, self: true });\n    private _documentClickListener: ((e: Event) => void) | null = null;\n\n    constructor() {\n        if (this._ngControl) {\n            this._ngControl.valueAccessor = this;\n        }\n        this.viewDate.set(this.adapter.today());\n    }\n\n    ngOnDestroy(): void {\n        this._removeDocumentListener();\n    }\n\n    // --- Public API ---\n\n    toggle(): void {\n        if (this.disabled() || this.readonly()) {\n            return;\n        }\n        this.isOpen.set(!this.isOpen());\n        if (this.isOpen()) {\n            // Set view to selected date or today\n            this.viewDate.set(this.adapter.isValid(this.value()) ? this.value() : this.adapter.today());\n\n            // Check if there's enough space below — if not, open above\n            const rect = this._elementRef.nativeElement.getBoundingClientRect();\n            const dropdownHeight = this.isDatetimepicker() ? 420 : 320;\n            const spaceBelow = window.innerHeight - rect.bottom;\n            this.dropUp.set(spaceBelow < dropdownHeight && rect.top > dropdownHeight);\n\n            this._addDocumentListener();\n        } else {\n            this._removeDocumentListener();\n        }\n    }\n\n    onInputClick(): void {\n        if (!this.isOpen()) {\n            this.toggle();\n        }\n    }\n\n    prevMonth(): void {\n        this.viewDate.set(this.adapter.addMonths(this.viewDate(), -1));\n    }\n\n    nextMonth(): void {\n        this.viewDate.set(this.adapter.addMonths(this.viewDate(), 1));\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    selectDay(date: any): void {\n        this.value.set(date);\n        this._onChange(date);\n        this.dateChange.emit(date);\n        this.isOpen.set(false);\n        this._removeDocumentListener();\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    isToday(date: any): boolean {\n        return this.adapter.isSameDay(date, this.adapter.today());\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    isSelected(date: any): boolean {\n        const sel = this.value();\n        if (!sel || !this.adapter.isValid(sel)) {\n            return false;\n        }\n        return this.adapter.isSameDay(date, sel);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    isOutsideRange(date: any): boolean {\n        const min = this.minDate();\n        const max = this.maxDate();\n        if (min && this.adapter.isBefore(date, min)) {\n            return true;\n        }\n        if (max && this.adapter.isAfter(date, max)) {\n            return true;\n        }\n        return false;\n    }\n\n    onInputChange(event: Event): void {\n        const val = (event.target as HTMLInputElement).value;\n        if (val === '') {\n            this.value.set(null);\n            this._onChange(null);\n            this.dateChange.emit(null);\n            return;\n        }\n        const parsed = this.adapter.parse(val);\n        if (parsed) {\n            this.value.set(parsed);\n            this._onChange(parsed);\n            this.dateChange.emit(parsed);\n        }\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onTimeChange(time: any): void {\n        this.selectedTime.set(time);\n        // If a date is already selected, re-emit with the time applied\n        // (consumer is responsible for combining date + time as needed)\n    }\n\n    // --- ControlValueAccessor ---\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    writeValue(value: any): void {\n        this.value.set(value);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnChange(fn: (value: any) => void): void {\n        this._onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(_isDisabled: boolean): void {\n        // Handled via input signal\n    }\n\n    // ControlValueAccessor\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    protected onTouched: () => void = () => { /* noop */ };\n\n    // --- Private ---\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any\n    private _onChange: (value: any) => void = () => { /* noop */ };\n\n    private _addDocumentListener(): void {\n        if (!this._documentClickListener) {\n            this._documentClickListener = (e: Event): void => {\n                if (!this._elementRef.nativeElement.contains(e.target)) {\n                    this.isOpen.set(false);\n                    this._removeDocumentListener();\n                }\n            };\n            document.addEventListener('click', this._documentClickListener);\n        }\n    }\n\n    private _removeDocumentListener(): void {\n        if (this._documentClickListener) {\n            document.removeEventListener('click', this._documentClickListener);\n            this._documentClickListener = null;\n        }\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    output,\n    model,\n    signal,\n    computed,\n    booleanAttribute,\n    inject,\n    ElementRef,\n    HostListener,\n    OnDestroy,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_INPUT_TEXT } from '@eui/eds/eds-input-text';\nimport { EDS_INPUT_BUTTON } from '@eui/eds/eds-input-button';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_TIMEPICKER } from '@eui/eds/eds-timepicker';\nimport { EDS_DATE_ADAPTER, EdsDateAdapter, EdsNativeDateAdapter } from './eds-date-adapter';\n\n@Component({\n    selector: 'eds-datepicker',\n    templateUrl: './eds-datepicker.html',\n    styleUrl: './eds-datepicker.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON, ...EDS_INPUT_TEXT, ...EDS_INPUT_BUTTON, ...EDS_BUTTON, ...EDS_TIMEPICKER],\n    host: {\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsDatepicker implements ControlValueAccessor, OnDestroy {\n    /** Data attribute for e2e testing. */\n    e2eAttr = input('eds-datepicker');\n\n    /** Input element id. */\n    inputId = input('eds-datepicker-input');\n\n    /** Placeholder text. */\n    placeholder = input('dd/mm/yyyy');\n\n    /** Aria label for the input. */\n    ariaLabel = input('Date input');\n\n    /** Date format for display (default: dd/mm/yyyy). */\n    dateFormat = input('dd/mm/yyyy');\n\n    /** Minimum selectable date. */\n    minDate = input<Date | null>(null);\n\n    /** Maximum selectable date. */\n    maxDate = input<Date | null>(null);\n\n    /** Whether the datepicker is disabled. */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /** Whether the datepicker is readonly. */\n    readonly = input(false, { transform: booleanAttribute });\n\n    /** Whether to show a clear button that resets the selected date. */\n    clearable = input(false, { transform: booleanAttribute });\n\n    /** Whether to show a timepicker alongside the calendar. */\n    isDatetimepicker = input(false, { transform: booleanAttribute });\n\n    /** Whether the timepicker shows seconds. */\n    hasSeconds = input(false, { transform: booleanAttribute });\n\n    /** Emitted when a date is selected. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    dateChange = output<any>();\n\n    /** The selected date value. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    value = model<any>(null);\n\n    /** Whether the calendar dropdown is open. */\n    isOpen = signal(false);\n\n    /** Whether the dropdown should open above the input. */\n    dropUp = signal(false);\n\n    /** Current viewed month/year for the calendar. */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    viewDate = signal<any>(null);\n\n    /** Weekday header labels. */\n    weekDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];\n\n    /** Current time selection (for datetime mode). */\n    selectedTime = signal<{ hours: number; minutes: number; seconds?: number }>({ hours: 0, minutes: 0, seconds: 0 });\n\n    /** The date adapter (native Date or Luxon). */\n    adapter: EdsDateAdapter = inject(EDS_DATE_ADAPTER, { optional: true }) || new EdsNativeDateAdapter();\n\n    /** Computed display value for the input. */\n    displayValue = computed(() => {\n        const date = this.value();\n        if (!date || !this.adapter.isValid(date)) {\n            return '';\n        }\n        const dateStr = this.adapter.format(date);\n        if (this.isDatetimepicker()) {\n            const time = this.selectedTime();\n            const h = String(time.hours).padStart(2, '0');\n            const m = String(time.minutes).padStart(2, '0');\n            if (this.hasSeconds() && time.seconds !== undefined) {\n                const s = String(time.seconds).padStart(2, '0');\n                return `${dateStr} ${h}:${m}:${s}`;\n            }\n            return `${dateStr} ${h}:${m}`;\n        }\n        return dateStr;\n    });\n\n    /** Computed month/year label for the header. */\n    monthLabel = computed(() => {\n        const d = this.viewDate() || this.adapter.today();\n        const months = ['January', 'February', 'March', 'April', 'May', 'June',\n            'July', 'August', 'September', 'October', 'November', 'December'];\n        return `${months[this.adapter.getMonth(d)]} ${this.adapter.getYear(d)}`;\n    });\n\n    /** Computed calendar day grid. */\n    calendarDays = computed(() => {\n        const vd = this.viewDate() || this.adapter.today();\n        const year = this.adapter.getYear(vd);\n        const month = this.adapter.getMonth(vd);\n        const firstDay = this.adapter.create(year, month, 1);\n        // Monday-based: 1=Mon, 7=Sun\n        const startDay = this.adapter.getDayOfWeek(firstDay) - 1;\n        const daysInMonth = this.adapter.getDaysInMonth(firstDay);\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const days: (any | null)[] = [];\n\n        // Empty slots before first day\n        for (let i = 0; i < startDay; i++) {\n            days.push(null);\n        }\n        // Actual days\n        for (let i = 1; i <= daysInMonth; i++) {\n            days.push(this.adapter.create(year, month, i));\n        }\n        return days;\n    });\n\n    private _elementRef = inject(ElementRef);\n    private _ngControl = inject(NgControl, { optional: true, self: true });\n    private _documentClickListener: ((e: Event) => void) | null = null;\n\n    constructor() {\n        if (this._ngControl) {\n            this._ngControl.valueAccessor = this;\n        }\n        this.viewDate.set(this.adapter.today());\n    }\n\n    ngOnDestroy(): void {\n        this._removeDocumentListener();\n    }\n\n    // --- Public API ---\n\n    toggle(): void {\n        if (this.disabled() || this.readonly()) {\n            return;\n        }\n        this.isOpen.set(!this.isOpen());\n        if (this.isOpen()) {\n            // Set view to selected date or today\n            this.viewDate.set(this.adapter.isValid(this.value()) ? this.value() : this.adapter.today());\n\n            // Check if there's enough space below — if not, open above\n            const rect = this._elementRef.nativeElement.getBoundingClientRect();\n            const dropdownHeight = this.isDatetimepicker() ? 420 : 320;\n            const spaceBelow = window.innerHeight - rect.bottom;\n            this.dropUp.set(spaceBelow < dropdownHeight && rect.top > dropdownHeight);\n\n            this._addDocumentListener();\n        } else {\n            this._removeDocumentListener();\n        }\n    }\n\n    onInputClick(): void {\n        if (!this.isOpen()) {\n            this.toggle();\n        }\n    }\n\n    prevMonth(): void {\n        this.viewDate.set(this.adapter.addMonths(this.viewDate(), -1));\n    }\n\n    nextMonth(): void {\n        this.viewDate.set(this.adapter.addMonths(this.viewDate(), 1));\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    selectDay(date: any): void {\n        this.value.set(date);\n        this._onChange(date);\n        this.dateChange.emit(date);\n        this.isOpen.set(false);\n        this._removeDocumentListener();\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    isToday(date: any): boolean {\n        return this.adapter.isSameDay(date, this.adapter.today());\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    isSelected(date: any): boolean {\n        const sel = this.value();\n        if (!sel || !this.adapter.isValid(sel)) {\n            return false;\n        }\n        return this.adapter.isSameDay(date, sel);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    isOutsideRange(date: any): boolean {\n        const min = this.minDate();\n        const max = this.maxDate();\n        if (min && this.adapter.isBefore(date, min)) {\n            return true;\n        }\n        if (max && this.adapter.isAfter(date, max)) {\n            return true;\n        }\n        return false;\n    }\n\n    onInputChange(event: Event): void {\n        const val = (event.target as HTMLInputElement).value;\n        if (val === '') {\n            this.value.set(null);\n            this._onChange(null);\n            this.dateChange.emit(null);\n            return;\n        }\n        const parsed = this.adapter.parse(val);\n        if (parsed) {\n            this.value.set(parsed);\n            this._onChange(parsed);\n            this.dateChange.emit(parsed);\n        }\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onTimeChange(time: any): void {\n        this.selectedTime.set(time);\n        // If a date is already selected, re-emit with the time applied\n        // (consumer is responsible for combining date + time as needed)\n    }\n\n    // --- ControlValueAccessor ---\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    writeValue(value: any): void {\n        this.value.set(value);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnChange(fn: (value: any) => void): void {\n        this._onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(_isDisabled: boolean): void {\n        // Handled via input signal\n    }\n\n    // ControlValueAccessor\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    protected onTouched: () => void = () => { /* noop */ };\n\n    // --- Private ---\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any\n    private _onChange: (value: any) => void = () => { /* noop */ };\n\n    private _addDocumentListener(): void {\n        if (!this._documentClickListener) {\n            this._documentClickListener = (e: Event): void => {\n                if (!this._elementRef.nativeElement.contains(e.target)) {\n                    this.isOpen.set(false);\n                    this._removeDocumentListener();\n                }\n            };\n            document.addEventListener('click', this._documentClickListener);\n        }\n    }\n\n    private _removeDocumentListener(): void {\n        if (this._documentClickListener) {\n            document.removeEventListener('click', this._documentClickListener);\n            this._documentClickListener = null;\n        }\n    }\n}\n",
             "styleUrl": "./eds-datepicker.scss",
             "assetsDirs": [],
             "styleUrlsData": [
@@ -29433,7 +29443,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 147,
+                "line": 150,
                 "rawdescription": "\n"
             },
             "extends": [],
@@ -29474,7 +29484,7 @@
                     }
                 ]
             },
-            "templateData": "<eds-input-button class=\"eds-datepicker__group\">\n    <input edsInputText\n        [edsClearable]=\"false\"\n        [id]=\"inputId()\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"displayValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        (input)=\"onInputChange($event)\"\n        (blur)=\"onTouched()\"\n        (click)=\"onInputClick()\"/>\n    @if (!readonly() && !disabled()) {\n        <button edsButton variant=\"secondary\" color=\"neutral\" size=\"s\" type=\"button\" [attr.aria-label]=\"'Open calendar'\" (click)=\"toggle()\">\n            <eds-icon icon=\"calendar-blank:core\"/>\n        </button>\n    }\n</eds-input-button>\n\n@if (isOpen()) {\n    <div class=\"eds-datepicker__dropdown\" [class.eds-datepicker__dropdown--up]=\"dropUp()\" (click)=\"$event.stopPropagation()\">\n        <div class=\"eds-datepicker__header\">\n            <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Previous month\">‹</button>\n            <span class=\"eds-datepicker__month-label\">{{ monthLabel() }}</span>\n            <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"Next month\">›</button>\n        </div>\n        <div class=\"eds-datepicker__weekdays\">\n            @for (day of weekDays; track day) {\n                <span class=\"eds-datepicker__weekday\">{{ day }}</span>\n            }\n        </div>\n        <div class=\"eds-datepicker__days\">\n            @for (day of calendarDays(); track $index) {\n                @if (day === null) {\n                    <span class=\"eds-datepicker__day eds-datepicker__day--empty\"></span>\n                } @else {\n                    <button class=\"eds-datepicker__day\"\n                        type=\"button\"\n                        [class.eds-datepicker__day--today]=\"isToday(day)\"\n                        [class.eds-datepicker__day--selected]=\"isSelected(day)\"\n                        [class.eds-datepicker__day--outside]=\"isOutsideRange(day)\"\n                        [disabled]=\"isOutsideRange(day)\"\n                        (click)=\"selectDay(day)\">\n                        {{ adapter.getDate(day) }}\n                    </button>\n                }\n            }\n        </div>\n\n        @if (isDatetimepicker()) {\n            <div class=\"eds-datepicker__time\">\n                <eds-timepicker [hasSeconds]=\"hasSeconds()\" [disabled]=\"disabled()\" (timeChange)=\"onTimeChange($event)\"/>\n            </div>\n        }\n    </div>\n}\n"
+            "templateData": "<eds-input-button class=\"eds-datepicker__group\">\n    <input edsInputText\n        [edsClearable]=\"clearable()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"displayValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        (input)=\"onInputChange($event)\"\n        (blur)=\"onTouched()\"\n        (click)=\"onInputClick()\"/>\n    @if (!readonly() && !disabled()) {\n        <button edsButton variant=\"secondary\" color=\"neutral\" size=\"s\" type=\"button\" [attr.aria-label]=\"'Open calendar'\" (click)=\"toggle()\">\n            <eds-icon icon=\"calendar-blank:core\"/>\n        </button>\n    }\n</eds-input-button>\n\n@if (isOpen()) {\n    <div class=\"eds-datepicker__dropdown\" [class.eds-datepicker__dropdown--up]=\"dropUp()\" (click)=\"$event.stopPropagation()\">\n        <div class=\"eds-datepicker__header\">\n            <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Previous month\">‹</button>\n            <span class=\"eds-datepicker__month-label\">{{ monthLabel() }}</span>\n            <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"Next month\">›</button>\n        </div>\n        <div class=\"eds-datepicker__weekdays\">\n            @for (day of weekDays; track day) {\n                <span class=\"eds-datepicker__weekday\">{{ day }}</span>\n            }\n        </div>\n        <div class=\"eds-datepicker__days\">\n            @for (day of calendarDays(); track $index) {\n                @if (day === null) {\n                    <span class=\"eds-datepicker__day eds-datepicker__day--empty\"></span>\n                } @else {\n                    <button class=\"eds-datepicker__day\"\n                        type=\"button\"\n                        [class.eds-datepicker__day--today]=\"isToday(day)\"\n                        [class.eds-datepicker__day--selected]=\"isSelected(day)\"\n                        [class.eds-datepicker__day--outside]=\"isOutsideRange(day)\"\n                        [disabled]=\"isOutsideRange(day)\"\n                        (click)=\"selectDay(day)\">\n                        {{ adapter.getDate(day) }}\n                    </button>\n                }\n            }\n        </div>\n\n        @if (isDatetimepicker()) {\n            <div class=\"eds-datepicker__time\">\n                <eds-timepicker [hasSeconds]=\"hasSeconds()\" [disabled]=\"disabled()\" (timeChange)=\"onTimeChange($event)\"/>\n            </div>\n        }\n    </div>\n}\n"
         },
         {
             "name": "EdsDialog",
@@ -35081,7 +35091,7 @@
         },
         {
             "name": "EdsFeedbackMessage",
-            "id": "component-EdsFeedbackMessage-1945d594f88825acc8f9479b3487cc346c8c625da5b103a40b8d1c82186e1c544c6be6bea98353a6e1bb4248fa1e8f9ecbd1e3d96574de91f0078f1daf505d58",
+            "id": "component-EdsFeedbackMessage-e76222a93d6963094ac67b4bdae44f466faa1566b381d7dc23dce20e557b33d96fa0ffffd234b5e9ce26dc17dda316015c60438b59789481924d55f5eb961088",
             "file": "packages/eds/eds-feedback-message/eds-feedback-message.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -35119,16 +35129,16 @@
                     ],
                     "jsdoctags": [
                         {
-                            "pos": 1450,
-                            "end": 1471,
+                            "pos": 1473,
+                            "end": 1494,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1451,
-                                "end": 1458,
+                                "pos": 1474,
+                                "end": 1481,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -35174,16 +35184,16 @@
                     ],
                     "jsdoctags": [
                         {
-                            "pos": 1718,
-                            "end": 1738,
+                            "pos": 1741,
+                            "end": 1761,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1719,
-                                "end": 1726,
+                                "pos": 1742,
+                                "end": 1749,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -35207,9 +35217,9 @@
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Resolved color variant passed to eds-icon-state. The icon set only supports\ninfo / success / warning / critical, so primary and neutral fall back to info.</p>\n",
+                    "description": "<p>Resolved color variant passed to eds-icon-state. The icon set only supports\ninfo / success / warning / critical, so primary, neutral, and disabled fall back to info.</p>\n",
                     "line": 63,
-                    "rawdescription": "\n\nResolved color variant passed to eds-icon-state. The icon set only supports\ninfo / success / warning / critical, so primary and neutral fall back to info.\n",
+                    "rawdescription": "\n\nResolved color variant passed to eds-icon-state. The icon set only supports\ninfo / success / warning / critical, so primary, neutral, and disabled fall back to info.\n",
                     "modifierKind": [
                         124,
                         148
@@ -35228,31 +35238,31 @@
                     "name": "EDS_ICON_STATE"
                 }
             ],
-            "description": "<p>A feedback message component that displays contextual feedback to users.\nSupports different color variants (primary, neutral, info, success, warning, critical) and a muted mode.</p>\n<h3>Basic feedback message</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-feedback-message color=&quot;success&quot;&gt;\n  Operation completed successfully\n&lt;/eds-feedback-message&gt;</code></pre></div><h3>Muted variant (no icon)</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-feedback-message color=&quot;warning&quot; isMuted&gt;\n  This is a subtle warning message\n&lt;/eds-feedback-message&gt;</code></pre></div>",
-            "rawdescription": "\n\nA feedback message component that displays contextual feedback to users.\nSupports different color variants (primary, neutral, info, success, warning, critical) and a muted mode.\n\n### Basic feedback message\n```html\n<eds-feedback-message color=\"success\">\n  Operation completed successfully\n</eds-feedback-message>\n```\n\n### Muted variant (no icon)\n```html\n<eds-feedback-message color=\"warning\" isMuted>\n  This is a subtle warning message\n</eds-feedback-message>\n```\n",
+            "description": "<p>A feedback message component that displays contextual feedback to users.\nSupports different color variants (primary, neutral, info, success, warning, critical, disabled) and a muted mode.</p>\n<h3>Basic feedback message</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-feedback-message color=&quot;success&quot;&gt;\n  Operation completed successfully\n&lt;/eds-feedback-message&gt;</code></pre></div><h3>Muted variant (no icon)</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-feedback-message color=&quot;warning&quot; isMuted&gt;\n  This is a subtle warning message\n&lt;/eds-feedback-message&gt;</code></pre></div>",
+            "rawdescription": "\n\nA feedback message component that displays contextual feedback to users.\nSupports different color variants (primary, neutral, info, success, warning, critical, disabled) and a muted mode.\n\n### Basic feedback message\n```html\n<eds-feedback-message color=\"success\">\n  Operation completed successfully\n</eds-feedback-message>\n```\n\n### Muted variant (no icon)\n```html\n<eds-feedback-message color=\"warning\" isMuted>\n  This is a subtle warning message\n</eds-feedback-message>\n```\n",
             "type": "component",
-            "sourceCode": "import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input } from '@angular/core';\nimport { EDS_ICON_STATE, EdsIconStateColor } from '@eui/eds/eds-icon-state';\n\n/**\n * Local narrowed color union — the feedback message's variant contract. No shared-token import.\n */\nexport type EdsFeedbackMessageColor = 'primary' | 'neutral' | 'info' | 'success' | 'warning' | 'critical';\n\n/**\n * A feedback message component that displays contextual feedback to users.\n * Supports different color variants (primary, neutral, info, success, warning, critical) and a muted mode.\n *\n * @usageNotes\n * ### Basic feedback message\n * ```html\n * <eds-feedback-message color=\"success\">\n *   Operation completed successfully\n * </eds-feedback-message>\n * ```\n *\n * ### Muted variant (no icon)\n * ```html\n * <eds-feedback-message color=\"warning\" isMuted>\n *   This is a subtle warning message\n * </eds-feedback-message>\n * ```\n */\n@Component({\n    selector: 'eds-feedback-message',\n    templateUrl: './eds-feedback-message.html',\n    styleUrl: './eds-feedback-message.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON_STATE],\n    host: {\n        '[attr.color]': 'color()',\n        '[attr.muted]': 'isMuted() || null',\n        role: 'status',\n        'aria-live': 'polite',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsFeedbackMessage {\n    /**\n     * Semantic color of the feedback message.\n     * @default 'info'\n     */\n    readonly color = input<EdsFeedbackMessageColor>('info');\n\n    /**\n     * Controls whether the feedback message is displayed in a muted state.\n     * When true, the status icon is hidden and the message has reduced visual prominence.\n     * @default false\n     */\n    readonly isMuted = input(false, { transform: booleanAttribute });\n\n    /** Data attribute value for end-to-end testing identification. */\n    readonly e2eAttr = input('eds-feedback-message');\n\n    /**\n     * Resolved color variant passed to eds-icon-state. The icon set only supports\n     * info / success / warning / critical, so primary and neutral fall back to info.\n     */\n    protected readonly iconVariant = computed<EdsIconStateColor>(() => {\n        const color = this.color();\n        return color === 'success' || color === 'warning' || color === 'critical' ? color : 'info';\n    });\n}\n",
+            "sourceCode": "import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input } from '@angular/core';\nimport { EDS_ICON_STATE, EdsIconStateColor } from '@eui/eds/eds-icon-state';\n\n/**\n * Local narrowed color union — the feedback message's variant contract. No shared-token import.\n */\nexport type EdsFeedbackMessageColor = 'primary' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'disabled';\n\n/**\n * A feedback message component that displays contextual feedback to users.\n * Supports different color variants (primary, neutral, info, success, warning, critical, disabled) and a muted mode.\n *\n * @usageNotes\n * ### Basic feedback message\n * ```html\n * <eds-feedback-message color=\"success\">\n *   Operation completed successfully\n * </eds-feedback-message>\n * ```\n *\n * ### Muted variant (no icon)\n * ```html\n * <eds-feedback-message color=\"warning\" isMuted>\n *   This is a subtle warning message\n * </eds-feedback-message>\n * ```\n */\n@Component({\n    selector: 'eds-feedback-message',\n    templateUrl: './eds-feedback-message.html',\n    styleUrl: './eds-feedback-message.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON_STATE],\n    host: {\n        '[attr.color]': 'color()',\n        '[attr.muted]': 'isMuted() || null',\n        role: 'status',\n        'aria-live': 'polite',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsFeedbackMessage {\n    /**\n     * Semantic color of the feedback message.\n     * @default 'info'\n     */\n    readonly color = input<EdsFeedbackMessageColor>('info');\n\n    /**\n     * Controls whether the feedback message is displayed in a muted state.\n     * When true, the status icon is hidden and the message has reduced visual prominence.\n     * @default false\n     */\n    readonly isMuted = input(false, { transform: booleanAttribute });\n\n    /** Data attribute value for end-to-end testing identification. */\n    readonly e2eAttr = input('eds-feedback-message');\n\n    /**\n     * Resolved color variant passed to eds-icon-state. The icon set only supports\n     * info / success / warning / critical, so primary, neutral, and disabled fall back to info.\n     */\n    protected readonly iconVariant = computed<EdsIconStateColor>(() => {\n        const color = this.color();\n        return color === 'success' || color === 'warning' || color === 'critical' ? color : 'info';\n    });\n}\n",
             "styleUrl": "./eds-feedback-message.scss",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n:host {\n    --_eds-feedback-message-color: var(--eds-c-foreground-info);\n\n    align-items: center;\n    display: flex;\n    gap: var(--eds-sp-3xs);\n    position: relative;\n\n    .content {\n        color: var(--_eds-feedback-message-color);\n        display: block;\n        position: relative;\n        font: var(--eds-f-paragraph-s);\n    }\n}\n\n:host([color=\"primary\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground-primary);\n}\n\n:host([color=\"neutral\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground);\n}\n\n:host([color=\"info\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground-info);\n}\n\n:host([color=\"success\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground-success);\n}\n\n:host([color=\"warning\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground-warning);\n}\n\n:host([color=\"critical\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground-critical);\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    --_eds-feedback-message-color: var(--eds-c-foreground-info);\n\n    align-items: center;\n    display: flex;\n    gap: var(--eds-sp-3xs);\n    position: relative;\n\n    .content {\n        color: var(--_eds-feedback-message-color);\n        display: block;\n        position: relative;\n        font: var(--eds-f-paragraph-s);\n    }\n}\n\n:host([color=\"primary\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground-primary);\n}\n\n:host([color=\"neutral\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground);\n}\n\n:host([color=\"info\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground-info);\n}\n\n:host([color=\"success\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground-success);\n}\n\n:host([color=\"warning\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground-warning);\n}\n\n:host([color=\"critical\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground-critical);\n}\n\n:host([color=\"disabled\"]) {\n    --_eds-feedback-message-color: var(--eds-c-foreground-disabled);\n}\n",
                     "styleUrl": "./eds-feedback-message.scss"
                 }
             ],
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 588,
-                    "end": 923,
+                    "pos": 611,
+                    "end": 946,
                     "kind": 328,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
                     "tagName": {
-                        "pos": 589,
-                        "end": 599,
+                        "pos": 612,
+                        "end": 622,
                         "kind": 80,
                         "id": 0,
                         "flags": 16777216,
@@ -41727,6 +41737,151 @@
             },
             "templateData": "<eds-icon [icon]=\"currentIcon()\" [color]=\"$any(currentColor())\" />\n"
         },
+        {
+            "name": "EdsInputAddon",
+            "id": "component-EdsInputAddon-dde267b96d184b9beac12b0a668df7499bf0dac3437c415dc6c96a1b2f44c2bcb75e427f26b3b39dfa2ec51804b4c65041488e603a9b8dffb785244e57d26d1b",
+            "file": "packages/eds/eds-input-addon/eds-input-addon.ts",
+            "changeDetection": "ChangeDetectionStrategy.OnPush",
+            "encapsulation": [],
+            "entryComponents": [],
+            "host": {},
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "eds-input-addon",
+            "styleUrls": [
+                "./eds-input-addon.scss"
+            ],
+            "styles": [],
+            "templateUrl": [
+                "./eds-input-addon.html"
+            ],
+            "templateVariables": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [
+                {
+                    "name": "e2eAttr",
+                    "coverageIgnore": false,
+                    "defaultValue": "'eds-input-addon'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Data attribute value for end-to-end testing identification.\nApplied as data-e2e attribute on the host element.\n&#39;eds-input-addon&#39;</p>\n",
+                    "line": 67,
+                    "rawdescription": "\n\nData attribute value for end-to-end testing identification.\nApplied as data-e2e attribute on the host element.\n'eds-input-addon'\n",
+                    "jsdoctags": [
+                        {
+                            "pos": 2411,
+                            "end": 2443,
+                            "kind": 328,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 2412,
+                                "end": 2419,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "default"
+                            },
+                            "comment": "<p>&#39;eds-input-addon&#39;</p>\n"
+                        }
+                    ],
+                    "required": false
+                },
+                {
+                    "name": "position",
+                    "coverageIgnore": false,
+                    "defaultValue": "'start'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "EdsInputAddonPosition",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Which side of the input the addon sits on, reflected as the <code>position</code> host attribute.\n<code>start</code> = left in LTR (right in RTL); <code>end</code> = the opposite side.\n&#39;start&#39;</p>\n",
+                    "line": 74,
+                    "rawdescription": "\n\nWhich side of the input the addon sits on, reflected as the `position` host attribute.\n`start` = left in LTR (right in RTL); `end` = the opposite side.\n'start'\n",
+                    "jsdoctags": [
+                        {
+                            "pos": 2668,
+                            "end": 2690,
+                            "kind": 328,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 2669,
+                                "end": 2676,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "default"
+                            },
+                            "comment": "<p>&#39;start&#39;</p>\n"
+                        }
+                    ],
+                    "required": false
+                }
+            ],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "coverageIgnore": false,
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": false,
+            "imports": [],
+            "description": "<p>A layout component that positions a <strong>non-actionable</strong> static addon (fixed text and/or an icon)\nflush against an input field — e.g. a currency symbol, a <code>https://</code> prefix, a unit suffix.</p>\n<p>Visually it mirrors {@link EdsInputButton}&#39;s footprint but reads as a <strong>recessed extension of the\nfield</strong>, not a control: sunken surface, muted (subtler) foreground, <code>cursor: default</code>, no hover /\nfocus states, and it is not in the tab order. Use <code>eds-input-button</code> when the trailing/leading\nelement must be clickable; use <code>eds-input-addon</code> when it is purely contextual text/icon.</p>\n<h3>Addon at start of input (default)</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-addon&gt;\n  &lt;span&gt;https://&lt;/span&gt;\n  &lt;input edsInputText placeholder=&quot;example.com&quot; /&gt;\n&lt;/eds-input-addon&gt;</code></pre></div><h3>Addon at end of input</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-addon position=&quot;end&quot;&gt;\n  &lt;input edsInputText placeholder=&quot;0.00&quot; /&gt;\n  &lt;span&gt;EUR&lt;/span&gt;\n&lt;/eds-input-addon&gt;</code></pre></div><h3>With an icon</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-addon&gt;\n  &lt;eds-icon icon=&quot;magnifying-glass&quot; ariaHidden /&gt;\n  &lt;input edsInputText placeholder=&quot;Search...&quot; /&gt;\n&lt;/eds-input-addon&gt;</code></pre></div><h3>Accessibility</h3>\n<ul>\n<li>The addon is presentational context, not a control — it has no role and is not focusable.</li>\n<li>When the addon gives the input meaning (currency, prefix, unit), give the projected text an\n<code>id</code> and reference it from the input via <code>aria-describedby</code> so assistive tech announces it.</li>\n<li>When it is purely decorative (repeats the label), mark it <code>aria-hidden=&quot;true&quot;</code>.</li>\n</ul>\n<h3>Notes</h3>\n<ul>\n<li>Default position is <code>start</code> (left in LTR, right in RTL); set <code>position=&quot;end&quot;</code> for the other side.</li>\n<li>Projects plain text, an <code>&lt;eds-icon&gt;</code>, or both.</li>\n</ul>\n",
+            "rawdescription": "\n\nA layout component that positions a **non-actionable** static addon (fixed text and/or an icon)\nflush against an input field — e.g. a currency symbol, a `https://` prefix, a unit suffix.\n\nVisually it mirrors {@link EdsInputButton}'s footprint but reads as a **recessed extension of the\nfield**, not a control: sunken surface, muted (subtler) foreground, `cursor: default`, no hover /\nfocus states, and it is not in the tab order. Use `eds-input-button` when the trailing/leading\nelement must be clickable; use `eds-input-addon` when it is purely contextual text/icon.\n\n### Addon at start of input (default)\n```html\n<eds-input-addon>\n  <span>https://</span>\n  <input edsInputText placeholder=\"example.com\" />\n</eds-input-addon>\n```\n\n### Addon at end of input\n```html\n<eds-input-addon position=\"end\">\n  <input edsInputText placeholder=\"0.00\" />\n  <span>EUR</span>\n</eds-input-addon>\n```\n\n### With an icon\n```html\n<eds-input-addon>\n  <eds-icon icon=\"magnifying-glass\" ariaHidden />\n  <input edsInputText placeholder=\"Search...\" />\n</eds-input-addon>\n```\n\n### Accessibility\n- The addon is presentational context, not a control — it has no role and is not focusable.\n- When the addon gives the input meaning (currency, prefix, unit), give the projected text an\n  `id` and reference it from the input via `aria-describedby` so assistive tech announces it.\n- When it is purely decorative (repeats the label), mark it `aria-hidden=\"true\"`.\n\n### Notes\n- Default position is `start` (left in LTR, right in RTL); set `position=\"end\"` for the other side.\n- Projects plain text, an `<eds-icon>`, or both.\n",
+            "type": "component",
+            "sourceCode": "import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n/** Local narrowed union — the addon's position contract. */\nexport type EdsInputAddonPosition = 'start' | 'end';\n\n/**\n * A layout component that positions a **non-actionable** static addon (fixed text and/or an icon)\n * flush against an input field — e.g. a currency symbol, a `https://` prefix, a unit suffix.\n *\n * Visually it mirrors {@link EdsInputButton}'s footprint but reads as a **recessed extension of the\n * field**, not a control: sunken surface, muted (subtler) foreground, `cursor: default`, no hover /\n * focus states, and it is not in the tab order. Use `eds-input-button` when the trailing/leading\n * element must be clickable; use `eds-input-addon` when it is purely contextual text/icon.\n *\n * @usageNotes\n * ### Addon at start of input (default)\n * ```html\n * <eds-input-addon>\n *   <span>https://</span>\n *   <input edsInputText placeholder=\"example.com\" />\n * </eds-input-addon>\n * ```\n *\n * ### Addon at end of input\n * ```html\n * <eds-input-addon position=\"end\">\n *   <input edsInputText placeholder=\"0.00\" />\n *   <span>EUR</span>\n * </eds-input-addon>\n * ```\n *\n * ### With an icon\n * ```html\n * <eds-input-addon>\n *   <eds-icon icon=\"magnifying-glass\" ariaHidden />\n *   <input edsInputText placeholder=\"Search...\" />\n * </eds-input-addon>\n * ```\n *\n * ### Accessibility\n * - The addon is presentational context, not a control — it has no role and is not focusable.\n * - When the addon gives the input meaning (currency, prefix, unit), give the projected text an\n *   `id` and reference it from the input via `aria-describedby` so assistive tech announces it.\n * - When it is purely decorative (repeats the label), mark it `aria-hidden=\"true\"`.\n *\n * ### Notes\n * - Default position is `start` (left in LTR, right in RTL); set `position=\"end\"` for the other side.\n * - Projects plain text, an `<eds-icon>`, or both.\n */\n@Component({\n    selector: 'eds-input-addon',\n    templateUrl: './eds-input-addon.html',\n    styleUrl: './eds-input-addon.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'eds-input-addon',\n        '[attr.position]': 'position()',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsInputAddon {\n    /**\n     * Data attribute value for end-to-end testing identification.\n     * Applied as data-e2e attribute on the host element.\n     * @default 'eds-input-addon'\n     */\n    e2eAttr = input('eds-input-addon');\n\n    /**\n     * Which side of the input the addon sits on, reflected as the `position` host attribute.\n     * `start` = left in LTR (right in RTL); `end` = the opposite side.\n     * @default 'start'\n     */\n    position = input<EdsInputAddonPosition>('start');\n}\n",
+            "styleUrl": "./eds-input-addon.scss",
+            "assetsDirs": [],
+            "styleUrlsData": [
+                {
+                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        width: 100%;\n        border-radius: var(--eds-br-s);\n\n        // The static addon label — a recessed, non-actionable extension of the field:\n        // sunken surface + subtler foreground + no interaction affordance.\n        .eds-input-addon__label {\n            display: inline-flex;\n            align-items: center;\n            gap: var(--eds-sp-2xs);\n            padding: 0 var(--eds-sp-s);\n            white-space: nowrap;\n            background-color: var(--eds-c-surface-elevation-inset);\n            color: var(--eds-c-foreground-subtler);\n            font: var(--eds-f-paragraph-m);\n            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n            cursor: default;\n            user-select: none;\n            position: relative;\n\n            // Projected icons inherit the muted foreground so text + icon read alike.\n            ::ng-deep .eds-icon {\n                color: var(--eds-c-foreground-subtler);\n            }\n        }\n\n        // The projected input grows to fill the row so the group spans the full width; the addon\n        // label stays at its intrinsic (content) width.\n        ::ng-deep .eds-input-text {\n            flex: 1;\n            min-width: 0;\n        }\n    }\n\n    // Position variants — reflected as the `position` host attribute (String-Props model).\n    // Template DOM order is input first, then label. `start` reverses the row so the label sits\n    // before (left of) the input; `end` keeps the natural order so the label sits after.\n\n    // Start: label appears on the left, joined to the input's left edge.\n    :host([position=\"start\"]) {\n        flex-direction: row-reverse;\n\n        .eds-input-addon__label {\n            border-right: none;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-top-left-radius: var(--eds-br-s);\n            border-bottom-left-radius: var(--eds-br-s);\n\n            // Vertical divider sitting just inside the addon's inner (right) edge, so it reads as\n            // part of the addon rather than straddling the seam with the input.\n            &::after {\n                background-color: var(--eds-c-border-divider);\n                content: \"\";\n                display: block;\n                height: 1.75rem;\n                right: 0;\n                position: absolute;\n                top: var(--eds-sp-2xs);\n                width: 1px;\n            }\n        }\n\n        ::ng-deep .eds-input-text {\n            border-left: none;\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n        }\n    }\n\n    // End: label appears on the right, joined to the input's right edge (natural DOM order).\n    :host([position=\"end\"]) {\n        .eds-input-addon__label {\n            border-left: none;\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-top-right-radius: var(--eds-br-s);\n            border-bottom-right-radius: var(--eds-br-s);\n\n            // Vertical divider sitting just inside the addon's inner (left) edge, so it reads as\n            // part of the addon rather than straddling the seam with the input.\n            &::before {\n                background-color: var(--eds-c-border-divider);\n                content: \"\";\n                display: block;\n                height: 1.75rem;\n                left: 0;\n                position: absolute;\n                top: var(--eds-sp-2xs);\n                width: 1px;\n            }\n        }\n\n        ::ng-deep .eds-input-text {\n            border-right: none;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n        }\n    }\n}\n",
+                    "styleUrl": "./eds-input-addon.scss"
+                }
+            ],
+            "stylesData": "",
+            "jsdoctags": [
+                {
+                    "pos": 789,
+                    "end": 1920,
+                    "kind": 328,
+                    "id": 0,
+                    "flags": 16777216,
+                    "modifierFlagsCache": 0,
+                    "transformFlags": 0,
+                    "tagName": {
+                        "pos": 790,
+                        "end": 800,
+                        "kind": 80,
+                        "id": 0,
+                        "flags": 16777216,
+                        "transformFlags": 0,
+                        "escapedText": "usageNotes"
+                    },
+                    "comment": "<h3>Addon at start of input (default)</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-addon&gt;\n  &lt;span&gt;https://&lt;/span&gt;\n  &lt;input edsInputText placeholder=&quot;example.com&quot; /&gt;\n&lt;/eds-input-addon&gt;</code></pre></div><h3>Addon at end of input</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-addon position=&quot;end&quot;&gt;\n  &lt;input edsInputText placeholder=&quot;0.00&quot; /&gt;\n  &lt;span&gt;EUR&lt;/span&gt;\n&lt;/eds-input-addon&gt;</code></pre></div><h3>With an icon</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-addon&gt;\n  &lt;eds-icon icon=&quot;magnifying-glass&quot; ariaHidden /&gt;\n  &lt;input edsInputText placeholder=&quot;Search...&quot; /&gt;\n&lt;/eds-input-addon&gt;</code></pre></div><h3>Accessibility</h3>\n<ul>\n<li>The addon is presentational context, not a control — it has no role and is not focusable.</li>\n<li>When the addon gives the input meaning (currency, prefix, unit), give the projected text an\n<code>id</code> and reference it from the input via <code>aria-describedby</code> so assistive tech announces it.</li>\n<li>When it is purely decorative (repeats the label), mark it <code>aria-hidden=&quot;true&quot;</code>.</li>\n</ul>\n<h3>Notes</h3>\n<ul>\n<li>Default position is <code>start</code> (left in LTR, right in RTL); set <code>position=&quot;end&quot;</code> for the other side.</li>\n<li>Projects plain text, an <code>&lt;eds-icon&gt;</code>, or both.</li>\n</ul>\n"
+                }
+            ],
+            "extends": [],
+            "relationships": {
+                "incoming": [],
+                "outgoing": []
+            },
+            "templateData": "<ng-content />\n<span class=\"eds-input-addon__label\">\n  <ng-content select=\"[edsInputAddonContent], span, eds-icon, span[edsIcon]\" />\n</span>\n"
+        },
         {
             "name": "EdsInputButton",
             "id": "component-EdsInputButton-457d7bd718ef9cb38b568f7b567a8f015d3cb04aad6ce86a12e00a5a3a589b7523492a4c6c9b1fe90b09ba6ac0b8541ff982cbe42c5eecfe009a5a25ea95847e",
@@ -42636,138 +42791,6 @@
                 "outgoing": []
             }
         },
-        {
-            "name": "EdsInputGroupAddon",
-            "id": "component-EdsInputGroupAddon-4feb34cd01f07e3d43c8b5f2b526f293f76ee2abb6ed42d5aaae60d000d32082052a37b38e078edc9cf58d928f70985c9c29a3e7baa45ac0f922b91afad68b04",
-            "file": "packages/eds/eds-input-group/eds-input-group-addon.ts",
-            "changeDetection": "ChangeDetectionStrategy.OnPush",
-            "encapsulation": [],
-            "entryComponents": [],
-            "host": {},
-            "inputs": [],
-            "outputs": [],
-            "providers": [],
-            "selector": "div[edsInputGroupAddon], eds-input-group-addon",
-            "styleUrls": [
-                "./eds-input-group-addon.scss"
-            ],
-            "styles": [],
-            "template": "<ng-content/>",
-            "templateUrl": [],
-            "templateVariables": [],
-            "viewProviders": [],
-            "hostDirectives": [],
-            "inputsClass": [
-                {
-                    "name": "e2eAttr",
-                    "coverageIgnore": false,
-                    "defaultValue": "'eds-input-group-addon'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 19,
-                    "rawdescription": "\n",
-                    "required": false
-                }
-            ],
-            "outputsClass": [],
-            "propertiesClass": [],
-            "methodsClass": [],
-            "coverageIgnore": false,
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [],
-            "hostListeners": [],
-            "standalone": false,
-            "imports": [],
-            "description": "",
-            "rawdescription": "\n",
-            "type": "component",
-            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n} from '@angular/core';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[edsInputGroupAddon], eds-input-group-addon',\n    template: '<ng-content/>',\n    styleUrl: './eds-input-group-addon.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'eds-input-group-addon',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsInputGroupAddon {\n    e2eAttr = input('eds-input-group-addon');\n}\n",
-            "styleUrl": "./eds-input-group-addon.scss",
-            "assetsDirs": [],
-            "styleUrlsData": [
-                {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host.eds-input-group-addon {\n        align-items: stretch;\n        display: flex;\n        position: relative;\n        width: 100%;\n\n        // Border merging: collapse double borders between adjacent children\n        > ::ng-deep :not(:first-child) {\n            margin-left: calc(-1 * var(--eds-bw-xs));\n        }\n\n        // --- Addon items ---\n        > ::ng-deep .eds-input-group-addon-item:first-child {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-top-left-radius: var(--eds-br-s);\n            border-bottom-left-radius: var(--eds-br-s);\n        }\n\n        > ::ng-deep .eds-input-group-addon-item:last-child {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-top-right-radius: var(--eds-br-s);\n            border-bottom-right-radius: var(--eds-br-s);\n        }\n\n        > ::ng-deep .eds-input-group-addon-item:not(:first-child):not(:last-child) {\n            border-radius: 0;\n        }\n\n        // --- Inputs/selects (direct or nested in clearable wrapper) ---\n        // First child\n        > ::ng-deep :first-child:not(.eds-input-group-addon-item):not(.eds-button) input,\n        > ::ng-deep :first-child:not(.eds-input-group-addon-item):not(.eds-button) select,\n        > ::ng-deep :first-child.eds-input-text {\n            border-top-right-radius: 0 !important;\n            border-bottom-right-radius: 0 !important;\n            border-top-left-radius: var(--eds-br-s) !important;\n            border-bottom-left-radius: var(--eds-br-s) !important;\n        }\n\n        // Last child\n        > ::ng-deep :last-child:not(.eds-input-group-addon-item):not(.eds-button) input,\n        > ::ng-deep :last-child:not(.eds-input-group-addon-item):not(.eds-button) select,\n        > ::ng-deep :last-child.eds-input-text {\n            border-top-left-radius: 0 !important;\n            border-bottom-left-radius: 0 !important;\n            border-top-right-radius: var(--eds-br-s) !important;\n            border-bottom-right-radius: var(--eds-br-s) !important;\n        }\n\n        // Middle child\n        > ::ng-deep :not(:first-child):not(:last-child):not(.eds-input-group-addon-item):not(.eds-button) input,\n        > ::ng-deep :not(:first-child):not(:last-child):not(.eds-input-group-addon-item):not(.eds-button) select,\n        > ::ng-deep :not(:first-child):not(:last-child).eds-input-text {\n            border-radius: 0 !important;\n        }\n\n        // --- Buttons (direct children, e.g. datepicker calendar button) ---\n        > ::ng-deep .eds-button:first-child {\n            border-top-right-radius: 0 !important;\n            border-bottom-right-radius: 0 !important;\n            border-top-left-radius: var(--eds-br-s) !important;\n            border-bottom-left-radius: var(--eds-br-s) !important;\n        }\n\n        > ::ng-deep .eds-button:last-child {\n            border-top-left-radius: 0 !important;\n            border-bottom-left-radius: 0 !important;\n            border-top-right-radius: var(--eds-br-s) !important;\n            border-bottom-right-radius: var(--eds-br-s) !important;\n        }\n\n        > ::ng-deep .eds-button:not(:first-child):not(:last-child) {\n            border-radius: 0 !important;\n        }\n\n        // Ensure focused element appears above adjacent items\n        > ::ng-deep :focus-within,\n        > ::ng-deep :focus {\n            z-index: 1;\n        }\n    }\n}\n",
-                    "styleUrl": "./eds-input-group-addon.scss"
-                }
-            ],
-            "stylesData": "",
-            "extends": [],
-            "relationships": {
-                "incoming": [],
-                "outgoing": []
-            }
-        },
-        {
-            "name": "EdsInputGroupAddonItem",
-            "id": "component-EdsInputGroupAddonItem-cc4571a697cbace81da13955b0be2a222475306b9835a69c3c41b847ec3dafb439537b9231cdf6092c6e407a75b29934df0e635d04ac768ac6f89dd9386c2598",
-            "file": "packages/eds/eds-input-group/eds-input-group-addon-item.ts",
-            "changeDetection": "ChangeDetectionStrategy.OnPush",
-            "encapsulation": [],
-            "entryComponents": [],
-            "host": {},
-            "inputs": [],
-            "outputs": [],
-            "providers": [],
-            "selector": "div[edsInputGroupAddonItem], eds-input-group-addon-item",
-            "styleUrls": [
-                "./eds-input-group-addon-item.scss"
-            ],
-            "styles": [],
-            "template": "<ng-content/>",
-            "templateUrl": [],
-            "templateVariables": [],
-            "viewProviders": [],
-            "hostDirectives": [],
-            "inputsClass": [
-                {
-                    "name": "e2eAttr",
-                    "coverageIgnore": false,
-                    "defaultValue": "'eds-input-group-addon-item'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 19,
-                    "rawdescription": "\n",
-                    "required": false
-                }
-            ],
-            "outputsClass": [],
-            "propertiesClass": [],
-            "methodsClass": [],
-            "coverageIgnore": false,
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [],
-            "hostListeners": [],
-            "standalone": false,
-            "imports": [],
-            "description": "",
-            "rawdescription": "\n",
-            "type": "component",
-            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n} from '@angular/core';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[edsInputGroupAddonItem], eds-input-group-addon-item',\n    template: '<ng-content/>',\n    styleUrl: './eds-input-group-addon-item.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'eds-input-group-addon-item',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsInputGroupAddonItem {\n    e2eAttr = input('eds-input-group-addon-item');\n}\n",
-            "styleUrl": "./eds-input-group-addon-item.scss",
-            "assetsDirs": [],
-            "styleUrlsData": [
-                {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host.eds-input-group-addon-item {\n        align-items: center;\n        align-self: stretch;\n        background-color: var(--eds-c-surface-neutral-subtler);\n        border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n        box-shadow: none;\n        color: var(--eds-c-foreground-default);\n        display: flex;\n        flex-shrink: 0;\n        font: var(--eds-f-paragraph-m);\n        height: auto;\n        justify-content: center;\n        min-height: var(--eds-si-3xl);\n        min-width: var(--eds-si-3xl);\n        padding: 0 var(--eds-sp-xs);\n        position: relative;\n    }\n}\n",
-                    "styleUrl": "./eds-input-group-addon-item.scss"
-                }
-            ],
-            "stylesData": "",
-            "extends": [],
-            "relationships": {
-                "incoming": [],
-                "outgoing": []
-            }
-        },
         {
             "name": "EdsInputIcon",
             "id": "component-EdsInputIcon-b42a75cc61bc9a0668e2572f84311012b91e1f7f9f1d67128e782c9d3569d5263d9165cddf306d5739705eed519be167811697af86a9215f2dae8b293ec82507",
@@ -46582,7 +46605,7 @@
         },
         {
             "name": "EdsLabel",
-            "id": "component-EdsLabel-6a7892f50e0f744d2ac74c39cc66fcd29647088f763f2fc971778ecfee99441b09bba46f0d098031acd473b9f8d7c6ca501b7c3817903e6f657a38d12e15542a",
+            "id": "component-EdsLabel-a6c17460de9b611fe0d8092d4a0ccd286c59d7d02d0bcd539f8e68be432e99c8191e127e662e893e6db9f64f6c39d8e18041d774fef7348c5fa7d66d1d6c74b7",
             "file": "packages/eds/eds-label/eds-label.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -46612,20 +46635,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Semantic color of the label.\n&#39;neutral&#39;</p>\n",
-                    "line": 43,
+                    "line": 45,
                     "rawdescription": "\n\nSemantic color of the label.\n'neutral'\n",
                     "jsdoctags": [
                         {
-                            "pos": 1208,
-                            "end": 1232,
+                            "pos": 1342,
+                            "end": 1366,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1209,
-                                "end": 1216,
+                                "pos": 1343,
+                                "end": 1350,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -46647,20 +46670,90 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Marks the label as required (appends a red asterisk).\nfalse</p>\n",
-                    "line": 49,
+                    "line": 51,
                     "rawdescription": "\n\nMarks the label as required (appends a red asterisk).\nfalse\n",
                     "jsdoctags": [
                         {
-                            "pos": 1357,
-                            "end": 1377,
+                            "pos": 1491,
+                            "end": 1511,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1358,
-                                "end": 1365,
+                                "pos": 1492,
+                                "end": 1499,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "default"
+                            },
+                            "comment": "<p>false</p>\n"
+                        }
+                    ],
+                    "required": false
+                },
+                {
+                    "name": "hasOptionalLabel",
+                    "coverageIgnore": false,
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Appends an <code>(optional)</code> text label to the label.\nfalse</p>\n",
+                    "line": 63,
+                    "rawdescription": "\n\nAppends an `(optional)` text label to the label.\nfalse\n",
+                    "jsdoctags": [
+                        {
+                            "pos": 1853,
+                            "end": 1873,
+                            "kind": 328,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 1854,
+                                "end": 1861,
+                                "kind": 80,
+                                "id": 0,
+                                "flags": 16842752,
+                                "transformFlags": 0,
+                                "escapedText": "default"
+                            },
+                            "comment": "<p>false</p>\n"
+                        }
+                    ],
+                    "required": false
+                },
+                {
+                    "name": "hasRequiredLabel",
+                    "coverageIgnore": false,
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>When <code>edsRequired</code> is set, appends a <code>(required)</code> text label instead of the asterisk.\nfalse</p>\n",
+                    "line": 57,
+                    "rawdescription": "\n\nWhen `edsRequired` is set, appends a `(required)` text label instead of the asterisk.\nfalse\n",
+                    "jsdoctags": [
+                        {
+                            "pos": 1688,
+                            "end": 1708,
+                            "kind": 328,
+                            "id": 0,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "tagName": {
+                                "pos": 1689,
+                                "end": 1696,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -46686,12 +46779,12 @@
             "description": "<p>A form label applied to <code>label</code>, <code>span</code>, or <code>div</code> elements via the <code>edsLabel</code> attribute.\nSupports a semantic color (<code>neutral</code> default, <code>critical</code> for errors) reflected as a host\nattribute, plus a required marker.</p>\n<p>Usage:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;label edsLabel for=&quot;name&quot;&gt;Name&lt;/label&gt;\n&lt;label edsLabel edsRequired for=&quot;email&quot;&gt;Email&lt;/label&gt;\n&lt;span edsLabel color=&quot;critical&quot;&gt;This field is required&lt;/span&gt;</code></pre></div>",
             "rawdescription": "\n\nA form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.\nSupports a semantic color (`neutral` default, `critical` for errors) reflected as a host\nattribute, plus a required marker.\n\nUsage:\n```html\n<label edsLabel for=\"name\">Name</label>\n<label edsLabel edsRequired for=\"email\">Email</label>\n<span edsLabel color=\"critical\">This field is required</span>\n```\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    booleanAttribute,\n} from '@angular/core';\n\n/**\n * Local narrowed color union — the label's color contract.\n * `neutral` is the default; `critical` colors the label for error context.\n */\nexport type EdsLabelColor = 'neutral' | 'critical';\n\n/**\n * A form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.\n * Supports a semantic color (`neutral` default, `critical` for errors) reflected as a host\n * attribute, plus a required marker.\n *\n * Usage:\n * ```html\n * <label edsLabel for=\"name\">Name</label>\n * <label edsLabel edsRequired for=\"email\">Email</label>\n * <span edsLabel color=\"critical\">This field is required</span>\n * ```\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'label[edsLabel], span[edsLabel], div[edsLabel]',\n    template: '<ng-content/>',\n    styleUrl: './eds-label.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'eds-label',\n        '[attr.color]': 'color()',\n        '[attr.required]': 'edsRequired() || null',\n    },\n})\nexport class EdsLabel {\n    /**\n     * Semantic color of the label.\n     * @default 'neutral'\n     */\n    color = input<EdsLabelColor>('neutral');\n\n    /**\n     * Marks the label as required (appends a red asterisk).\n     * @default false\n     */\n    edsRequired = input(false, { transform: booleanAttribute });\n}\n",
+            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    booleanAttribute,\n} from '@angular/core';\n\n/**\n * Local narrowed color union — the label's color contract.\n * `neutral` is the default; `critical` colors the label for error context.\n */\nexport type EdsLabelColor = 'neutral' | 'critical';\n\n/**\n * A form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.\n * Supports a semantic color (`neutral` default, `critical` for errors) reflected as a host\n * attribute, plus a required marker.\n *\n * Usage:\n * ```html\n * <label edsLabel for=\"name\">Name</label>\n * <label edsLabel edsRequired for=\"email\">Email</label>\n * <span edsLabel color=\"critical\">This field is required</span>\n * ```\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'label[edsLabel], span[edsLabel], div[edsLabel]',\n    template: '<ng-content/>',\n    styleUrl: './eds-label.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'eds-label',\n        '[attr.color]': 'color()',\n        '[attr.required]': 'edsRequired() || null',\n        '[attr.has-required-label]': 'hasRequiredLabel() || null',\n        '[attr.has-optional-label]': 'hasOptionalLabel() || null',\n    },\n})\nexport class EdsLabel {\n    /**\n     * Semantic color of the label.\n     * @default 'neutral'\n     */\n    color = input<EdsLabelColor>('neutral');\n\n    /**\n     * Marks the label as required (appends a red asterisk).\n     * @default false\n     */\n    edsRequired = input(false, { transform: booleanAttribute });\n\n    /**\n     * When `edsRequired` is set, appends a `(required)` text label instead of the asterisk.\n     * @default false\n     */\n    hasRequiredLabel = input(false, { transform: booleanAttribute });\n\n    /**\n     * Appends an `(optional)` text label to the label.\n     * @default false\n     */\n    hasOptionalLabel = input(false, { transform: booleanAttribute });\n}\n",
             "styleUrl": "./eds-label.scss",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n:host {\n    display: inline-block;\n    font: var(--eds-f-label-m-semibold);\n    color: var(--eds-c-foreground);\n}\n\n// COLOR VARIANTS\n// --------------\n\n:host([color=\"neutral\"])  { color: var(--eds-c-foreground); }\n:host([color=\"critical\"]) { color: var(--eds-c-foreground-critical); }\n\n// REQUIRED MARKER\n// ---------------\n\n:host([required])::after {\n    color: var(--eds-c-foreground-critical);\n    content: ' *';\n    font: var(--eds-f-label-m-semibold);\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    display: inline-block;\n    font: var(--eds-f-label-m-semibold);\n    color: var(--eds-c-foreground);\n}\n\n// COLOR VARIANTS\n// --------------\n\n:host([color=\"neutral\"])  { color: var(--eds-c-foreground); }\n:host([color=\"critical\"]) { color: var(--eds-c-foreground-critical); }\n\n// REQUIRED MARKER\n// ---------------\n\n:host([required])::after {\n    color: var(--eds-c-foreground-critical);\n    content: ' *';\n    font: var(--eds-f-label-m-semibold);\n}\n\n:host([required][has-required-label])::after {\n    content: ' (required)';\n    font: var(--eds-f-label-s);\n}\n\n// OPTIONAL MARKER\n// ---------------\n\n:host([has-optional-label])::after {\n    color: var(--eds-c-foreground-subtle);\n    content: ' (optional)';\n    font: var(--eds-f-label-s);\n}\n",
                     "styleUrl": "./eds-label.scss"
                 }
             ],
@@ -60502,8 +60595,9 @@
         },
         {
             "name": "EdsShellTopMessage",
-            "id": "component-EdsShellTopMessage-9de1977b4b5433658bba6e76a5e89f713d5d9454ba745bda315888653999ed4c2c3d0015afff3c4f33210619901f84e92d6d57c1c9e63ad923c18da5468f47e6",
+            "id": "component-EdsShellTopMessage-2197e5564ff2fcb12bb66eedf64eeec66130134fafaf59e5736f1ed47cf1749feef53e9bf1406bf991ffbeca244cb24fa47dafa56fedf7f474be0b3b128fbd20",
             "file": "packages/eds/eds-shell/eds-shell-top-message.ts",
+            "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
             "entryComponents": [],
             "host": {},
@@ -60520,20 +60614,36 @@
             ],
             "templateVariables": [],
             "viewProviders": [],
-            "hostDirectives": [
-                {
-                    "name": "EdsColorDirective",
-                    "inputs": [
-                        "edsWarning",
-                        "edsCritical",
-                        "edsInfo",
-                        "edsSuccess",
-                        "edsColorVariant"
-                    ],
-                    "outputs": []
-                }
-            ],
+            "hostDirectives": [],
             "inputsClass": [
+                {
+                    "name": "color",
+                    "coverageIgnore": false,
+                    "defaultValue": "'info'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "EdsShellTopMessageColor",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Semantic color variant of the message.</p>\n",
+                    "line": 25,
+                    "rawdescription": "\nSemantic color variant of the message.",
+                    "required": false
+                },
+                {
+                    "name": "e2eAttr",
+                    "coverageIgnore": false,
+                    "defaultValue": "'eds-shell-top-message'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Test hook.</p>\n",
+                    "line": 34,
+                    "rawdescription": "\nTest hook.",
+                    "required": false
+                },
                 {
                     "name": "isDismissible",
                     "coverageIgnore": false,
@@ -60544,9 +60654,23 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Whether the close button is shown.</p>\n",
-                    "line": 23,
+                    "line": 31,
                     "rawdescription": "\nWhether the close button is shown.",
                     "required": false
+                },
+                {
+                    "name": "variant",
+                    "coverageIgnore": false,
+                    "defaultValue": "'default'",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "EdsShellTopMessageVariant",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Surface treatment. <code>default</code> = subtler surface, <code>filled</code> = full color surface.</p>\n",
+                    "line": 28,
+                    "rawdescription": "\nSurface treatment. `default` = subtler surface, `filled` = full color surface.",
+                    "required": false
                 }
             ],
             "outputsClass": [
@@ -60559,7 +60683,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Emits when the message is dismissed.</p>\n",
-                    "line": 26,
+                    "line": 37,
                     "rawdescription": "\nEmits when the message is dismissed.",
                     "required": false
                 }
@@ -60575,7 +60699,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Internal visibility state.</p>\n",
-                    "line": 29,
+                    "line": 40,
                     "rawdescription": "\nInternal visibility state."
                 }
             ],
@@ -60587,7 +60711,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 31,
+                    "line": 42,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -60608,12 +60732,12 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, input, output, signal, booleanAttribute } from '@angular/core';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { EdsColorDirective } from '@eui/eds/shared';\n\n@Component({\n  selector: 'eds-shell-top-message',\n  imports: [...EDS_ICON_BUTTON],\n  templateUrl: './eds-shell-top-message.html',\n  styleUrl: './eds-shell-top-message.scss',\n  hostDirectives: [\n    {\n      directive: EdsColorDirective,\n      inputs: ['edsWarning', 'edsCritical', 'edsInfo', 'edsSuccess', 'edsColorVariant'],\n    },\n  ],\n  host: {\n    '[class.eds-top-message]': 'true',\n    '[class.eds-top-message--hidden]': '!isVisible()',\n  },\n})\nexport class EdsShellTopMessage {\n  /** Whether the close button is shown. */\n  isDismissible = input(true, { transform: booleanAttribute });\n\n  /** Emits when the message is dismissed. */\n  dismissed = output<void>();\n\n  /** Internal visibility state. */\n  isVisible = signal(true);\n\n  dismiss(): void {\n    this.isVisible.set(false);\n    setTimeout(() => this.dismissed.emit(), 300);\n  }\n}\n",
+            "sourceCode": "import { Component, ChangeDetectionStrategy, input, output, signal, booleanAttribute } from '@angular/core';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\n\n/** Local narrowed color union — the top message's color contract. */\nexport type EdsShellTopMessageColor = 'info' | 'success' | 'warning' | 'critical';\n\n/** Surface treatment: `default` uses the subtler surface, `filled` the full color surface. */\nexport type EdsShellTopMessageVariant = 'default' | 'filled';\n\n@Component({\n  selector: 'eds-shell-top-message',\n  imports: [...EDS_ICON_BUTTON],\n  templateUrl: './eds-shell-top-message.html',\n  styleUrl: './eds-shell-top-message.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.color]': 'color()',\n    '[attr.variant]': 'variant()',\n    '[attr.hidden]': '!isVisible() || null',\n    '[attr.data-e2e]': 'e2eAttr()',\n  },\n})\nexport class EdsShellTopMessage {\n  /** Semantic color variant of the message. */\n  color = input<EdsShellTopMessageColor>('info');\n\n  /** Surface treatment. `default` = subtler surface, `filled` = full color surface. */\n  variant = input<EdsShellTopMessageVariant>('default');\n\n  /** Whether the close button is shown. */\n  isDismissible = input(true, { transform: booleanAttribute });\n\n  /** Test hook. */\n  e2eAttr = input('eds-shell-top-message');\n\n  /** Emits when the message is dismissed. */\n  dismissed = output<void>();\n\n  /** Internal visibility state. */\n  isVisible = signal(true);\n\n  dismiss(): void {\n    this.isVisible.set(false);\n    setTimeout(() => this.dismissed.emit(), 300);\n  }\n}\n",
             "styleUrl": "./eds-shell-top-message.scss",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n.eui-21 {\n    :host {\n        display: flex;\n        align-items: center;\n        gap: var(--eds-sp-m);\n        padding: var(--eds-sp-xs) var(--eds-sp-xl);\n        font: var(--eds-f-paragraph-s);\n        flex-shrink: 0;\n        overflow: hidden;\n        transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;\n        max-height: 80px;\n        opacity: 1;\n\n        // Default: info\n        background: var(--eds-c-surface-info-subtler);\n        color: var(--eds-c-on-surface-info-subtler);\n\n        .top-message-content {\n            flex: 1;\n        }\n    }\n\n    // Color variants applied via host directive classes\n    :host(.eds-color-variant--warning) {\n        background: var(--eds-c-surface-warning-subtler);\n        color: var(--eds-c-on-surface-warning-subtler);\n    }\n\n    :host(.eds-color-variant--critical) {\n        background: var(--eds-c-surface-critical-subtler);\n        color: var(--eds-c-on-surface-critical-subtler);\n    }\n\n    :host(.eds-color-variant--success) {\n        background: var(--eds-c-surface-success-subtler);\n        color: var(--eds-c-on-surface-success-subtler);\n    }\n\n    :host(.eds-color-variant--info) {\n        background: var(--eds-c-surface-info-subtler);\n        color: var(--eds-c-on-surface-info-subtler);\n    }\n\n    :host(.eds-top-message--hidden) {\n        max-height: 0;\n        padding-top: 0;\n        padding-bottom: 0;\n        opacity: 0;\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    // default color = info\n    --_eds-shell-top-message-surface: var(--eds-c-surface-info-subtler);\n    --_eds-shell-top-message-on-surface: var(--eds-c-on-surface-info-subtler);\n\n    // `[hidden]` (native) would set display:none and kill the collapse transition — force flex\n    // and animate via max-height/opacity instead.\n    display: flex !important;\n    align-items: center;\n    gap: var(--eds-sp-m);\n    padding: var(--eds-sp-xs) var(--eds-sp-xl);\n    font: var(--eds-f-paragraph-s);\n    flex-shrink: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;\n    max-height: 80px;\n    opacity: 1;\n    background: var(--_eds-shell-top-message-surface);\n    color: var(--_eds-shell-top-message-on-surface);\n\n    .top-message-content {\n        flex: 1;\n    }\n}\n\n// COLOR VARIANTS — default (subtler surface)\n// ------------------------------------------\n\n:host([color=\"info\"]) {\n    --_eds-shell-top-message-surface: var(--eds-c-surface-info-subtler);\n    --_eds-shell-top-message-on-surface: var(--eds-c-on-surface-info-subtler);\n}\n\n:host([color=\"success\"]) {\n    --_eds-shell-top-message-surface: var(--eds-c-surface-success-subtler);\n    --_eds-shell-top-message-on-surface: var(--eds-c-on-surface-success-subtler);\n}\n\n:host([color=\"warning\"]) {\n    --_eds-shell-top-message-surface: var(--eds-c-surface-warning-subtler);\n    --_eds-shell-top-message-on-surface: var(--eds-c-on-surface-warning-subtler);\n}\n\n:host([color=\"critical\"]) {\n    --_eds-shell-top-message-surface: var(--eds-c-surface-critical-subtler);\n    --_eds-shell-top-message-on-surface: var(--eds-c-on-surface-critical-subtler);\n}\n\n// FILLED VARIANT — full color surface\n// -----------------------------------\n\n:host([variant=\"filled\"][color=\"info\"]) {\n    --_eds-shell-top-message-surface: var(--eds-c-surface-info);\n    --_eds-shell-top-message-on-surface: var(--eds-c-on-surface-info);\n}\n\n:host([variant=\"filled\"][color=\"success\"]) {\n    --_eds-shell-top-message-surface: var(--eds-c-surface-success);\n    --_eds-shell-top-message-on-surface: var(--eds-c-on-surface-success);\n}\n\n:host([variant=\"filled\"][color=\"warning\"]) {\n    --_eds-shell-top-message-surface: var(--eds-c-surface-warning);\n    --_eds-shell-top-message-on-surface: var(--eds-c-on-surface-warning);\n}\n\n:host([variant=\"filled\"][color=\"critical\"]) {\n    --_eds-shell-top-message-surface: var(--eds-c-surface-critical);\n    --_eds-shell-top-message-on-surface: var(--eds-c-on-surface-critical);\n}\n\n// HIDDEN / DISMISSED STATE\n// ------------------------\n\n:host([hidden]) {\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    opacity: 0;\n}\n",
                     "styleUrl": "./eds-shell-top-message.scss"
                 }
             ],
@@ -60625,11 +60749,6 @@
                     {
                         "name": "EDS_ICON_BUTTON",
                         "type": "module"
-                    },
-                    {
-                        "name": "EdsColorDirective",
-                        "type": "directive",
-                        "description": "Signal-based color variant directive. Provides both a string-based `edsColorVariant` input and boolean shorthand inputs (`edsNeutral`, `e..."
                     }
                 ]
             },
@@ -75930,6 +76049,19 @@
                 "rawdescription": "Convenience array for importing all eds-icon-toggle components.",
                 "description": "<p>Convenience array for importing all eds-icon-toggle components.</p>\n"
             },
+            {
+                "name": "EDS_INPUT_ADDON",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "packages/eds/eds-input-addon/index.ts",
+                "coverageIgnore": false,
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "unknown",
+                "defaultValue": "[\n    EdsInputAddon,\n] as const",
+                "rawdescription": "Convenience array for importing all eds-input-addon components.",
+                "description": "<p>Convenience array for importing all eds-input-addon components.</p>\n"
+            },
             {
                 "name": "EDS_INPUT_BUTTON",
                 "ctype": "miscellaneous",
@@ -75965,7 +76097,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "unknown",
-                "defaultValue": "[\n    EdsInputGroup,\n    EdsInputGroupAddon,\n    EdsInputGroupAddonItem,\n] as const",
+                "defaultValue": "[\n    EdsInputGroup,\n] as const",
                 "rawdescription": "Convenience array for importing all eds-input-group components.",
                 "description": "<p>Convenience array for importing all eds-input-group components.</p>\n"
             },
@@ -77624,7 +77756,7 @@
                 "ctype": "miscellaneous",
                 "subtype": "typealias",
                 "coverageIgnore": false,
-                "rawtype": "\"primary\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"critical\"",
+                "rawtype": "\"primary\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"critical\" | \"disabled\"",
                 "file": "packages/eds/eds-feedback-message/eds-feedback-message.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -77866,6 +77998,19 @@
                 "description": "<p>Local narrowed size union — the icon-state&#39;s size contract.</p>\n",
                 "kind": 193
             },
+            {
+                "name": "EdsInputAddonPosition",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "coverageIgnore": false,
+                "rawtype": "\"start\" | \"end\"",
+                "file": "packages/eds/eds-input-addon/eds-input-addon.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "rawdescription": "Local narrowed union — the addon's position contract.",
+                "description": "<p>Local narrowed union — the addon&#39;s position contract.</p>\n",
+                "kind": 193
+            },
             {
                 "name": "EdsInputPromptSendPosition",
                 "ctype": "miscellaneous",
@@ -78035,6 +78180,32 @@
                 "description": "<p>Sizes the segmented control styles (SCSS <code>:host([size=&quot;…&quot;])</code> branches).</p>\n",
                 "kind": 193
             },
+            {
+                "name": "EdsShellTopMessageColor",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "coverageIgnore": false,
+                "rawtype": "\"info\" | \"success\" | \"warning\" | \"critical\"",
+                "file": "packages/eds/eds-shell/eds-shell-top-message.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "rawdescription": "Local narrowed color union — the top message's color contract.",
+                "description": "<p>Local narrowed color union — the top message&#39;s color contract.</p>\n",
+                "kind": 193
+            },
+            {
+                "name": "EdsShellTopMessageVariant",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "coverageIgnore": false,
+                "rawtype": "\"default\" | \"filled\"",
+                "file": "packages/eds/eds-shell/eds-shell-top-message.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "rawdescription": "Surface treatment: `default` uses the subtler surface, `filled` the full color surface.",
+                "description": "<p>Surface treatment: <code>default</code> uses the subtler surface, <code>filled</code> the full color surface.</p>\n",
+                "kind": 193
+            },
             {
                 "name": "EdsSidebarCollapseMode",
                 "ctype": "miscellaneous",
@@ -79332,6 +79503,21 @@
                     "description": "<p>Convenience array for importing all eds-icon-toggle components.</p>\n"
                 }
             ],
+            "packages/eds/eds-input-addon/index.ts": [
+                {
+                    "name": "EDS_INPUT_ADDON",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/eds/eds-input-addon/index.ts",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "defaultValue": "[\n    EdsInputAddon,\n] as const",
+                    "rawdescription": "Convenience array for importing all eds-input-addon components.",
+                    "description": "<p>Convenience array for importing all eds-input-addon components.</p>\n"
+                }
+            ],
             "packages/eds/eds-input-button/index.ts": [
                 {
                     "name": "EDS_INPUT_BUTTON",
@@ -79372,7 +79558,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
-                    "defaultValue": "[\n    EdsInputGroup,\n    EdsInputGroupAddon,\n    EdsInputGroupAddonItem,\n] as const",
+                    "defaultValue": "[\n    EdsInputGroup,\n] as const",
                     "rawdescription": "Convenience array for importing all eds-input-group components.",
                     "description": "<p>Convenience array for importing all eds-input-group components.</p>\n"
                 }
@@ -81313,7 +81499,7 @@
                     "ctype": "miscellaneous",
                     "subtype": "typealias",
                     "coverageIgnore": false,
-                    "rawtype": "\"primary\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"critical\"",
+                    "rawtype": "\"primary\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"critical\" | \"disabled\"",
                     "file": "packages/eds/eds-feedback-message/eds-feedback-message.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
@@ -81574,6 +81760,21 @@
                     "kind": 193
                 }
             ],
+            "packages/eds/eds-input-addon/eds-input-addon.ts": [
+                {
+                    "name": "EdsInputAddonPosition",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "coverageIgnore": false,
+                    "rawtype": "\"start\" | \"end\"",
+                    "file": "packages/eds/eds-input-addon/eds-input-addon.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "Local narrowed union — the addon's position contract.",
+                    "description": "<p>Local narrowed union — the addon&#39;s position contract.</p>\n",
+                    "kind": 193
+                }
+            ],
             "packages/eds/eds-input-prompt/eds-input-prompt.ts": [
                 {
                     "name": "EdsInputPromptSendPosition",
@@ -81765,6 +81966,34 @@
                     "kind": 193
                 }
             ],
+            "packages/eds/eds-shell/eds-shell-top-message.ts": [
+                {
+                    "name": "EdsShellTopMessageColor",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "coverageIgnore": false,
+                    "rawtype": "\"info\" | \"success\" | \"warning\" | \"critical\"",
+                    "file": "packages/eds/eds-shell/eds-shell-top-message.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "Local narrowed color union — the top message's color contract.",
+                    "description": "<p>Local narrowed color union — the top message&#39;s color contract.</p>\n",
+                    "kind": 193
+                },
+                {
+                    "name": "EdsShellTopMessageVariant",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "coverageIgnore": false,
+                    "rawtype": "\"default\" | \"filled\"",
+                    "file": "packages/eds/eds-shell/eds-shell-top-message.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "Surface treatment: `default` uses the subtler surface, `filled` the full color surface.",
+                    "description": "<p>Surface treatment: <code>default</code> uses the subtler surface, <code>filled</code> the full color surface.</p>\n",
+                    "kind": 193
+                }
+            ],
             "packages/eds/eds-shell/eds-shell.ts": [
                 {
                     "name": "EdsSidebarCollapseMode",